commit 96793b2e1e4884bc6e1e5cf163517665ac417fda
Author: joaquin <jnavajascordobes@gmail.com>
Date:   Sun May 3 23:36:48 2026 +0200

    Proyecto App Windows

diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..3740109
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,84 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code session-start"
+          }
+        ]
+      }
+    ],
+    "SessionEnd": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code session-end"
+          }
+        ]
+      }
+    ],
+    "UserPromptSubmit": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code user-prompt-submit"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code stop"
+          }
+        ]
+      }
+    ],
+    "PreToolUse": [
+      {
+        "matcher": "Task",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code pre-task"
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": "Task",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code post-task"
+          }
+        ]
+      },
+      {
+        "matcher": "TodoWrite",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "entire hooks claude-code post-todo"
+          }
+        ]
+      }
+    ]
+  },
+  "permissions": {
+    "deny": [
+      "Read(./.entire/metadata/**)"
+    ]
+  }
+}
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..36b2439
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,55 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(tree:*)",
+      "WebSearch",
+      "WebFetch(domain:www.electronjs.org)",
+      "Bash(npm run build:frontend:*)",
+      "Bash(cat:*)",
+      "Bash(npx asar:*)",
+      "Bash(npm run package:app:*)",
+      "Bash(npm run build:backend:*)",
+      "Bash(pnpm add:*)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:www.npmjs.com)",
+      "Skill(example-skills:frontend-design)",
+      "Bash(npm run test:frontend:*)",
+      "Bash(nx lint:*)",
+      "Bash(npx tsc:*)",
+      "Bash(find:*)",
+      "Bash(xargs sed:*)",
+      "Skill(frontend-design)",
+      "mcp__angular-cli__get_best_practices",
+      "mcp__nx-mcp__nx_workspace",
+      "Bash(grep:*)",
+      "Bash(npx nx lint:*)",
+      "Bash(npx nx build:*)",
+      "Bash(npx eslint:*)",
+      "Bash(npx nx run:*)",
+      "Bash(lsof:*)",
+      "Bash(xargs kill:*)",
+      "Bash(curl:*)",
+      "Bash(npx:*)",
+      "Bash(wc:*)",
+      "Bash(nx build:*)",
+      "Bash(agent-browser:*)",
+      "Bash(sqlite3:*)",
+      "Bash(agent-browser --cdp 9222 eval \"window.ng?.getComponent\\(document.querySelector\\(''app-unified-collection-page''\\)\\)?.playlistId\\(\\)\")",
+      "Bash(npx --yes agent-browser --cdp 9222 eval \"document.querySelector\\(''.nav-item.category-item''\\)?.click\\(\\)\")",
+      "Bash(agent-browser --cdp 9222 eval \"document.querySelector\\(''.playlist-switcher-trigger''\\).click\\(\\)\")",
+      "Bash(agent-browser --cdp 9222 eval \"document.querySelector\\(''''.playlist-switcher-trigger''''\\).click\\(\\)\")",
+      "Bash(npx agent-browser:*)",
+      "Bash(agent-browser --cdp 9222 eval \"fetch\\(''http://localhost:9222/json''\\).then\\(r=>r.json\\(\\)\\).then\\(t=>t[0].webSocketDebuggerUrl\\)\")",
+      "Bash(npx --yes agent-browser --cdp 9222 eval 'document.querySelector\\(\"\".mat-mdc-paginator-range-label\"\"\\)?.textContent?.trim\\(\\)')",
+      "Skill(electron)",
+      "Bash(node:*)",
+      "Bash(pkill -f \"chrome-cdp-debug\")"
+    ],
+    "deny": [],
+    "ask": []
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "nx-mcp"
+  ]
+}
diff --git a/.coderabbit.yaml b/.coderabbit.yaml
new file mode 100644
index 0000000..b1c350a
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,21 @@
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+
+language: 'en-US'
+
+reviews:
+    profile: 'chill'
+    high_level_summary: true
+    auto_review:
+        enabled: true
+        drafts: false
+
+issue_enrichment:
+    labeling:
+        auto_apply_labels: true
+        labeling_instructions:
+            - label: bug
+              instructions: Issues reporting bugs, errors, crashes, incorrect behavior, or unexpected results. This includes runtime errors, logic errors, broken functionality, regressions, and any deviation from expected or documented behavior.
+            - label: enhancement
+              instructions: Feature requests, improvements to existing functionality, performance optimizations, refactoring suggestions, UI/UX enhancements, and any suggestions to make the project better or add new capabilities.
+            - label: documentation
+              instructions: Documentation updates, additions, corrections, or clarifications needed. This includes missing docs, outdated information, unclear instructions, API documentation, code examples, README improvements, and any requests for better explanations or guides.
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..b1254b5
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,19 @@
+.git
+.gitignore
+.github
+.vscode
+.editorconfig
+.dockerignore
+.angular
+.electron
+.husky
+Dockerfile
+README.md
+dist
+e2e
+node_modules
+screenshots
+test-results
+coverage
+build
+release
diff --git a/.entire/.gitignore b/.entire/.gitignore
new file mode 100644
index 0000000..2cffdef
--- /dev/null
+++ b/.entire/.gitignore
@@ -0,0 +1,4 @@
+tmp/
+settings.local.json
+metadata/
+logs/
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..bad2373
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [4gray]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: []
diff --git a/.github/ISSUE_TEMPLATE/---bug-report.md b/.github/ISSUE_TEMPLATE/---bug-report.md
new file mode 100644
index 0000000..6fdb440
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/---bug-report.md
@@ -0,0 +1,35 @@
+---
+name: "\U0001F41E Bug report"
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+-   PWA or Electron/Tauri application
+-   OS: [e.g. Linux]
+-   Browser [e.g. chrome, safari]
+-   Version [e.g. 0.16.0]
+-   Feature: [e.g. M3U playlist, Xtream Code, Stalker Portal]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/---feature-request.md b/.github/ISSUE_TEMPLATE/---feature-request.md
new file mode 100644
index 0000000..24405ec
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/---feature-request.md
@@ -0,0 +1,20 @@
+---
+name: "\U0001F680 Feature request"
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/.github/workflows/build-and-make.yaml b/.github/workflows/build-and-make.yaml
new file mode 100644
index 0000000..866637e
--- /dev/null
+++ b/.github/workflows/build-and-make.yaml
@@ -0,0 +1,420 @@
+name: Build and Make Electron App
+
+on:
+    push:
+        branches:
+            - master
+        tags:
+            - 'v*.*.*'
+    pull_request:
+        branches:
+            - master
+    workflow_dispatch:
+
+jobs:
+    build:
+        name: Build on ${{ matrix.os }} ${{ matrix.arch }}
+        runs-on: ${{ matrix.runner }}
+        timeout-minutes: 60
+        strategy:
+            matrix:
+                include:
+                    # macOS builds - separate runners to avoid native module conflicts
+                    - os: macos
+                      runner: macos-15-intel
+                      arch: x64
+                    - os: macos
+                      runner: macos-latest
+                      arch: arm64
+                    # Linux and Windows
+                    - os: linux
+                      runner: ubuntu-22.04
+                      linux_profile: standard
+                    - os: linux
+                      runner: ubuntu-24.04
+                      linux_profile: flatpak
+                    - os: windows
+                      runner: windows-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'pnpm'
+
+            - name: Install Linux system dependencies
+              if: matrix.os == 'linux'
+              run: |
+                  sudo apt-get update
+                  sudo apt-get install --no-install-recommends -y rpm libarchive-tools flatpak flatpak-builder appstream
+
+                  # Configure Flatpak
+                  # 1. Add the Flathub repository (source of runtimes)
+                  flatpak remote-add --if-not-exists --user flathub https://flathub.org/repo/flathub.flatpakrepo
+
+                  # 2. Install the standard Freedesktop Platform and SDK (required by electron-builder)
+                  # We install version 24.08 as a safe default, electron-builder might pick what it needs
+                  flatpak install --user -y flathub org.freedesktop.Platform//24.08 org.freedesktop.Sdk//24.08
+
+            - name: Select Linux packaging targets for CI profile
+              if: matrix.os == 'linux'
+              run: |
+                  node -e "
+                    const fs = require('fs');
+                    const path = 'electron-builder.json';
+                    const config = JSON.parse(fs.readFileSync(path, 'utf8'));
+                    const targets = Array.isArray(config.linux?.target) ? config.linux.target : [];
+                    const profile = '${{ matrix.linux_profile }}';
+
+                    if (profile === 'standard') {
+                      config.linux.target = targets.filter((entry) => String(entry.target).toLowerCase() !== 'flatpak');
+                    } else if (profile === 'flatpak') {
+                      config.linux.target = targets.filter((entry) => String(entry.target).toLowerCase() === 'flatpak');
+                    }
+
+                    fs.writeFileSync(path, JSON.stringify(config, null, 4) + '\n');
+                  "
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Build frontend
+              run: pnpm nx build web --skip-nx-cache
+
+            - name: Build backend
+              run: pnpm run build:backend
+
+            - name: Validate AppStream metadata
+              if: matrix.os == 'linux'
+              run: appstreamcli validate --pedantic --no-net apps/electron-backend/linux/com.fourgray.iptvnator.metainfo.xml
+
+            - name: Build website
+              if: matrix.os == 'linux'
+              run: pnpm nx build website --skip-nx-cache
+
+            - name: Verify AppStream website assets
+              if: matrix.os == 'linux'
+              shell: bash
+              run: |
+                  set -euo pipefail
+
+                  for screenshot in player playlists epg settings; do
+                      if ! find dist/apps/website -path "*/appstream/${screenshot}.png" -print -quit | grep -q .; then
+                          echo "::error::Missing AppStream website asset for ${screenshot}.png"
+                          exit 1
+                      fi
+                  done
+
+            - name: Override macOS arch in electron-builder.json
+              if: matrix.os == 'macos'
+              run: |
+                  # Replace the mac arch array with just the target architecture
+                  node -e "
+                    const fs = require('fs');
+                    const pkg = JSON.parse(fs.readFileSync('electron-builder.json', 'utf8'));
+                    pkg.mac.target.arch = ['${{ matrix.arch }}'];
+                    fs.writeFileSync('electron-builder.json', JSON.stringify(pkg, null, 4));
+                  "
+
+            - name: Validate macOS signing configuration
+              if: matrix.os == 'macos' && github.event_name != 'pull_request'
+              shell: bash
+              env:
+                  CSC_NAME: ${{ vars.CSC_NAME }}
+                  CSC_LINK: ${{ secrets.CSC_LINK }}
+                  CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+                  APPLE_API_KEY_CONTENT: ${{ secrets.APPLE_API_KEY }}
+                  APPLE_API_KEY_ID: ${{ secrets.APPLE_API_KEY_ID }}
+                  APPLE_API_ISSUER: ${{ secrets.APPLE_API_ISSUER }}
+                  APPLE_ID: ${{ secrets.APPLE_ID }}
+                  APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+                  APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+              run: |
+                  if [ -z "${CSC_NAME}" ]; then
+                      echo "::error::Missing CSC_NAME repository variable for deterministic macOS code signing."
+                      exit 1
+                  fi
+
+                  if [ -z "${CSC_LINK}" ] || [ -z "${CSC_KEY_PASSWORD}" ]; then
+                      echo "::error::Missing CSC_LINK or CSC_KEY_PASSWORD secret for macOS code signing."
+                      exit 1
+                  fi
+
+                  has_api_key_credentials=false
+                  if [ -n "${APPLE_API_KEY_CONTENT}" ] || [ -n "${APPLE_API_KEY_ID}" ] || [ -n "${APPLE_API_ISSUER}" ]; then
+                      if [ -z "${APPLE_API_KEY_CONTENT}" ] || [ -z "${APPLE_API_KEY_ID}" ] || [ -z "${APPLE_API_ISSUER}" ]; then
+                          echo "::error::APPLE_API_KEY, APPLE_API_KEY_ID, and APPLE_API_ISSUER must all be set for App Store Connect API key notarization."
+                          exit 1
+                      fi
+                      has_api_key_credentials=true
+                  fi
+
+                  has_apple_id_credentials=false
+                  if [ -n "${APPLE_ID}" ] || [ -n "${APPLE_APP_SPECIFIC_PASSWORD}" ] || [ -n "${APPLE_TEAM_ID}" ]; then
+                      if [ -z "${APPLE_ID}" ] || [ -z "${APPLE_APP_SPECIFIC_PASSWORD}" ] || [ -z "${APPLE_TEAM_ID}" ]; then
+                          echo "::error::APPLE_ID, APPLE_APP_SPECIFIC_PASSWORD, and APPLE_TEAM_ID must all be set for Apple ID notarization."
+                          exit 1
+                      fi
+                      has_apple_id_credentials=true
+                  fi
+
+                  if [ "${has_api_key_credentials}" = false ] && [ "${has_apple_id_credentials}" = false ]; then
+                      echo "::error::Missing notarization credentials. Configure either APPLE_API_KEY + APPLE_API_KEY_ID + APPLE_API_ISSUER, or APPLE_ID + APPLE_APP_SPECIFIC_PASSWORD + APPLE_TEAM_ID."
+                      exit 1
+                  fi
+
+            - name: Prepare macOS notarization credentials
+              if: matrix.os == 'macos' && github.event_name != 'pull_request'
+              shell: bash
+              env:
+                  APPLE_API_KEY_CONTENT: ${{ secrets.APPLE_API_KEY }}
+                  APPLE_API_KEY_ID: ${{ secrets.APPLE_API_KEY_ID }}
+                  APPLE_API_ISSUER: ${{ secrets.APPLE_API_ISSUER }}
+                  APPLE_ID: ${{ secrets.APPLE_ID }}
+                  APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+                  APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+              run: |
+                  if [ -n "${APPLE_API_KEY_CONTENT}" ]; then
+                      APPLE_API_KEY_PATH="${RUNNER_TEMP}/AuthKey_${APPLE_API_KEY_ID}.p8"
+                      printf '%s' "${APPLE_API_KEY_CONTENT}" > "${APPLE_API_KEY_PATH}"
+                      chmod 600 "${APPLE_API_KEY_PATH}"
+                      echo "APPLE_API_KEY=${APPLE_API_KEY_PATH}" >> "${GITHUB_ENV}"
+                      echo "APPLE_API_KEY_ID=${APPLE_API_KEY_ID}" >> "${GITHUB_ENV}"
+                      echo "APPLE_API_ISSUER=${APPLE_API_ISSUER}" >> "${GITHUB_ENV}"
+                      echo "APPLE_ID=" >> "${GITHUB_ENV}"
+                      echo "APPLE_APP_SPECIFIC_PASSWORD=" >> "${GITHUB_ENV}"
+                      echo "APPLE_TEAM_ID=" >> "${GITHUB_ENV}"
+                      exit 0
+                  fi
+
+                  if [ -n "${APPLE_ID}" ]; then
+                      echo "APPLE_API_KEY=" >> "${GITHUB_ENV}"
+                      echo "APPLE_API_KEY_ID=" >> "${GITHUB_ENV}"
+                      echo "APPLE_API_ISSUER=" >> "${GITHUB_ENV}"
+                      echo "APPLE_ID=${APPLE_ID}" >> "${GITHUB_ENV}"
+                      echo "APPLE_APP_SPECIFIC_PASSWORD=${APPLE_APP_SPECIFIC_PASSWORD}" >> "${GITHUB_ENV}"
+                      echo "APPLE_TEAM_ID=${APPLE_TEAM_ID}" >> "${GITHUB_ENV}"
+                  fi
+
+            - name: Make Electron app (macOS)
+              if: matrix.os == 'macos' && github.event_name != 'pull_request'
+              env:
+                  CSC_NAME: ${{ vars.CSC_NAME }}
+                  CSC_LINK: ${{ secrets.CSC_LINK }}
+                  CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+                  DEBUG: electron-builder,electron-notarize*
+              run: pnpm run make:app
+
+            - name: Verify signed macOS app
+              if: matrix.os == 'macos' && github.event_name != 'pull_request'
+              shell: bash
+              run: |
+                  set -euo pipefail
+
+                  case "${{ matrix.arch }}" in
+                      x64)
+                          APP_PATH="dist/executables/mac/IPTVnator.app"
+                          ;;
+                      arm64)
+                          APP_PATH="dist/executables/mac-arm64/IPTVnator.app"
+                          ;;
+                      *)
+                          echo "::error::Unsupported macOS arch: ${{ matrix.arch }}"
+                          exit 1
+                          ;;
+                  esac
+
+                  print_debug_attrs() {
+                      echo "::group::Extended attributes"
+                      xattr -lr "${APP_PATH}" | sed -n '1,120p' || true
+                      echo "::endgroup::"
+                  }
+
+                  trap print_debug_attrs ERR
+
+                  if [ ! -d "${APP_PATH}" ]; then
+                      echo "::error::Expected app bundle not found at ${APP_PATH}"
+                      exit 1
+                  fi
+
+                  SIGNATURE_INFO="$(codesign -dv --verbose=4 "${APP_PATH}" 2>&1)"
+                  printf '%s\n' "${SIGNATURE_INFO}"
+
+                  if printf '%s\n' "${SIGNATURE_INFO}" | grep -q 'Signature=adhoc'; then
+                      echo "::error::macOS app is still ad-hoc signed."
+                      exit 1
+                  fi
+
+                  if printf '%s\n' "${SIGNATURE_INFO}" | grep -q 'TeamIdentifier=not set'; then
+                      echo "::error::macOS app is missing a TeamIdentifier."
+                      exit 1
+                  fi
+
+                  codesign --verify --deep --strict --verbose=4 "${APP_PATH}"
+                  spctl -a -vvv --type execute "${APP_PATH}"
+                  xcrun stapler validate "${APP_PATH}"
+
+            - name: Make Electron app
+              if: matrix.os != 'macos' || github.event_name == 'pull_request'
+              run: pnpm run make:app
+
+            - name: Verify packaged worker layout
+              shell: bash
+              env:
+                  PACKAGE_OS: ${{ matrix.os }}
+                  PACKAGE_ARCH: ${{ matrix.arch || '' }}
+              run: pnpm run verify:package-layout -- "$PACKAGE_OS" "$PACKAGE_ARCH"
+
+            - name: Smoke test packaged Flatpak launcher
+              if: matrix.os == 'linux' && matrix.linux_profile == 'flatpak'
+              shell: bash
+              run: |
+                  set -euo pipefail
+
+                  FLATPAK_BUNDLE="$(find dist/executables -maxdepth 1 -name '*.flatpak' | head -n 1)"
+                  if [ -z "${FLATPAK_BUNDLE}" ]; then
+                      echo "::error::Flatpak bundle not found in dist/executables"
+                      exit 1
+                  fi
+
+                  flatpak install --user --noninteractive -y "${FLATPAK_BUNDLE}"
+                  flatpak run --command=sh com.fourgray.iptvnator -c '
+                      set -euo pipefail
+
+                      test -f /app/share/metainfo/com.fourgray.iptvnator.metainfo.xml
+                      test -L /app/bin/iptvnator
+
+                      LAUNCHER_PATH="$(readlink -f /app/bin/iptvnator)"
+                      test -f "${LAUNCHER_PATH}"
+                      test -f "${LAUNCHER_PATH}.bin"
+                      grep -q '\''readlink -f "$SCRIPT_PATH"'\'' "${LAUNCHER_PATH}"
+                      grep -q '\''exec "$SCRIPT_DIR/iptvnator.bin"'\'' "${LAUNCHER_PATH}"
+                  '
+
+            - name: Upload artifacts (macOS)
+              if: matrix.os == 'macos'
+              uses: actions/upload-artifact@v4
+              with:
+                  name: macos-${{ matrix.arch }}-artifacts
+                  path: |
+                      dist/executables/**/*.dmg
+                      dist/executables/**/*.zip
+                  retention-days: 7
+
+            - name: Upload artifacts (Linux)
+              if: matrix.os == 'linux' && matrix.linux_profile == 'standard'
+              uses: actions/upload-artifact@v4
+              with:
+                  name: linux-artifacts
+                  path: |
+                      dist/executables/**/*.deb
+                      dist/executables/**/*.rpm
+                      dist/executables/**/*.snap
+                      dist/executables/**/*.AppImage
+                      dist/executables/**/*.tar.gz
+                      dist/executables/**/*.pacman
+                  retention-days: 7
+
+            - name: Upload artifacts (Flatpak)
+              if: matrix.os == 'linux' && matrix.linux_profile == 'flatpak'
+              uses: actions/upload-artifact@v4
+              with:
+                  name: linux-flatpak-artifacts
+                  path: |
+                      dist/executables/**/*.flatpak
+                  retention-days: 7
+
+            - name: Upload artifacts (Windows)
+              if: matrix.os == 'windows'
+              uses: actions/upload-artifact@v4
+              with:
+                  name: windows-artifacts
+                  path: |
+                      dist/executables/**/*.exe
+                      dist/executables/**/*.msi
+                      dist/executables/**/*.zip
+                  retention-days: 7
+
+    create-release:
+        name: Create Draft Release
+        needs: build
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Download all artifacts
+              uses: actions/download-artifact@v4
+              with:
+                  path: artifacts
+
+            - name: Display structure of downloaded files
+              run: ls -R artifacts
+
+            - name: Get version from package.json
+              id: package-version
+              run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+            - name: Create Draft Release
+              uses: softprops/action-gh-release@v2
+              with:
+                  draft: true
+                  prerelease: ${{ github.event_name == 'pull_request' }}
+                  name: Release v${{ steps.package-version.outputs.version }}
+                  tag_name: ${{ startsWith(github.ref, 'refs/tags/') && github.ref_name || format('test-{0}', github.sha) }}
+                  generate_release_notes: true
+                  files: |
+                      artifacts/macos-x64-artifacts/*-x64.dmg
+                      artifacts/macos-x64-artifacts/*-x64.zip
+                      artifacts/macos-arm64-artifacts/*-arm64.dmg
+                      artifacts/macos-arm64-artifacts/*-arm64.zip
+                      artifacts/linux-artifacts/*.AppImage
+                      artifacts/linux-artifacts/*.deb
+                      artifacts/linux-artifacts/*.rpm
+                      artifacts/linux-artifacts/*.snap
+                      artifacts/linux-artifacts/*.tar.gz
+                      artifacts/linux-artifacts/*.pacman
+                      artifacts/linux-flatpak-artifacts/*.flatpak
+                      artifacts/windows-artifacts/*-setup.exe
+                      artifacts/windows-artifacts/*.msi
+                      artifacts/windows-artifacts/*.zip
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    publish-snap:
+        name: Publish to Snapcraft Store
+        needs: build
+        runs-on: ubuntu-latest
+        if: startsWith(github.ref, 'refs/tags/v')
+        env:
+            SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.snapcraft_token }}
+
+        steps:
+            - name: Download snap artifact
+              uses: actions/download-artifact@v4
+              with:
+                  name: linux-artifacts
+                  path: artifacts
+
+            - name: Setup Snapcraft
+              uses: samuelmeuli/action-snapcraft@v3
+
+            - name: Publish all snaps to edge channel
+              run: |
+                  # Find and publish all snap files
+                  for SNAP_FILE in artifacts/*.snap; do
+                      if [ -f "$SNAP_FILE" ]; then
+                          echo "Publishing: $SNAP_FILE"
+                          snapcraft upload --release=edge "$SNAP_FILE"
+                      fi
+                  done
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..b9dbc86
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,41 @@
+name: CI
+
+on:
+    push:
+        branches:
+            - master
+    pull_request:
+        branches:
+            - master
+    workflow_dispatch:
+
+jobs:
+    unit-and-typecheck:
+        name: Unit Tests and Typechecks
+        runs-on: ubuntu-latest
+        timeout-minutes: 30
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'pnpm'
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Typecheck web and Electron entry points
+              run: pnpm run typecheck:ci
+
+            - name: Run curated Nx unit test suite
+              run: pnpm run test:unit:ci
+              env:
+                  CI: true
+                  NX_TASKS_RUNNER_DYNAMIC_OUTPUT: false
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
new file mode 100644
index 0000000..3359f2d
--- /dev/null
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: '0 20 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file. 
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v3
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
new file mode 100644
index 0000000..b7c0b8b
--- /dev/null
+++ b/.github/workflows/deploy-website.yml
@@ -0,0 +1,59 @@
+name: Deploy Website to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'apps/website/**'
+      - '.github/workflows/deploy-website.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build Website
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build website
+        run: pnpm nx build website
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/apps/website
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
new file mode 100644
index 0000000..74ba2dc
--- /dev/null
+++ b/.github/workflows/docker.yml
@@ -0,0 +1,39 @@
+name: docker-build
+
+on: [workflow_dispatch]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v3
+      -
+        name: Install jq
+        run: sudo apt-get update && sudo apt-get install -y jq
+      -
+        name: Get version from package.json
+        id: package-version
+        run: echo "VERSION=$(cat package.json | jq -r .version)" >> $GITHUB_OUTPUT
+      -
+        name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      -
+        name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./docker/Dockerfile
+          push: true
+          tags: |
+              4gray/iptvnator:latest
+              4gray/iptvnator:${{ github.sha }}
+              4gray/iptvnator:${{ steps.package-version.outputs.VERSION }}
+          platforms: linux/amd64,linux/arm64
diff --git a/.github/workflows/e2e-tests.yaml b/.github/workflows/e2e-tests.yaml
new file mode 100644
index 0000000..3f78768
--- /dev/null
+++ b/.github/workflows/e2e-tests.yaml
@@ -0,0 +1,98 @@
+name: 'Cross-Platform E2E Tests'
+
+on:
+    push:
+        branches:
+            - master
+    pull_request:
+        branches:
+            - master
+
+jobs:
+    electron-e2e-tests:
+        name: Electron E2E on ${{ matrix.os }}
+        runs-on: ${{ matrix.os }}
+        env:
+            NX_SKIP_NX_CACHE: true
+        strategy:
+            fail-fast: false
+            matrix:
+                os: [ubuntu-latest, macos-latest, windows-latest]
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'pnpm'
+
+            - name: Install Dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Build Backend
+              run: pnpm nx build electron-backend
+
+            - name: Install Playwright Browsers
+              run: pnpm exec playwright install --with-deps
+
+            - name: Run Electron E2E Tests (Linux)
+              if: runner.os == 'Linux'
+              run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" pnpm nx run electron-backend-e2e:e2e
+              env:
+                  CI: true
+
+            - name: Run Electron E2E Tests (Windows/Mac)
+              if: runner.os != 'Linux'
+              run: pnpm nx run electron-backend-e2e:e2e
+              env:
+                  CI: true
+
+            - name: Upload Electron Test Results
+              if: failure()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: playwright-report-electron-${{ matrix.os }}
+                  path: dist/playwright-report/electron-backend-e2e/
+                  retention-days: 7
+
+    web-e2e-tests:
+        name: Web E2E on Ubuntu Chromium
+        runs-on: ubuntu-latest
+        env:
+            NX_SKIP_NX_CACHE: true
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: '22'
+                  cache: 'pnpm'
+
+            - name: Install Dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Install Chromium
+              run: pnpm exec playwright install --with-deps chromium
+
+            - name: Run Web E2E Tests
+              run: pnpm nx run web-e2e:e2e -- --project=chromium
+              env:
+                  CI: true
+
+            - name: Upload Web Test Results
+              if: failure()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: playwright-report-web-ubuntu
+                  path: dist/.playwright/apps/web-e2e/playwright-report/
+                  retention-days: 7
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ab0c9c6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,70 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files. 
+
+#compiled output 
+/dist 
+/build 
+/tmp 
+/out-tsc 
+/app-builds 
+/release 
+/e2e/tracing
+/e2e/screenshots 
+/test-results 
+api.js 
+epg-worker.js 
+main.js 
+menu.js 
+src/**/*.js
+!src/karma.conf.js 
+*.js.map 
+data.db 
+preload.js 
+shared/*.js 
+playwright-report 
+.nx
+server.js 
+
+# dependencies 
+node_modules
+package-lock.json
+
+# IDEs and editors 
+/.idea 
+.project
+.classpath 
+.c9/ 
+*.launch 
+.settings/ 
+*.sublime-workspace 
+
+# IDE - VSCode 
+.vscode/*
+.vscode/settings.json 
+!.vscode/tasks.json 
+!.vscode/launch.json
+!.vscode/extensions.json 
+
+# VLC portable for Windows NSIS bundle (downloaded by tools/packaging/download-vlc-windows.mjs)
+/tools/packaging/bundled-vlc/win64/
+
+# misc 
+/.sass-cache 
+/connect.lock 
+/coverage
+/libpeerconnection.log 
+npm-debug.log 
+testem.log 
+/typings 
+.angular/* 
+
+# e2e
+/e2e/*.js 
+!/e2e/protractor.conf.js 
+/e2e/*.map 
+/e2e/db 
+
+# System Files 
+.DS_Store
+Thumbs.db
+.angular
+.astro
diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..ae5a82e
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,9 @@
+{
+    "mcpServers": {
+        "nx-mcp": {
+            "type": "stdio",
+            "command": "npx",
+            "args": ["nx", "mcp"]
+        }
+    }
+}
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..4399c73
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+save=true
+save-exact=true
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..991c586
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+*.yml 
+dist 
+build 
+coverage 
+release 
+.angular
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..fc835ec
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 80
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000..307edfd
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,38 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4,
+        "selector-type-no-unknown": [
+            true,
+            {
+                "ignoreTypes": [
+                    "/^mat-/"
+                ]
+            }
+        ],
+        "selector-pseudo-element-no-unknown": [
+            true,
+            {
+                "ignorePseudoElements": ["ng-deep"]
+            }
+        ],
+        "at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["function", "if", "each", "include", "mixin"]
+            }
+        ],
+        "media-feature-name-no-unknown": [
+            true,
+            {
+              "ignoreMediaFeatureNames": ["display-mode"]
+            }
+        ],
+        "value-keyword-case": null,
+        "string-quotes": "single",
+        "value-no-vendor-prefix": null,
+        "property-no-vendor-prefix": null
+    },
+    "plugins": ["stylelint-scss"],
+    "syntax": "scss"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..3583c43
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+    "recommendations": ["ms-playwright.playwright", "esbenp.prettier-vscode"]
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..d261cde
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,157 @@
+# AGENTS.md
+
+This file provides guidance to coding agents working in this repository.
+
+## Plan Mode
+
+- When an agent is in Plan Mode and produces a final `<proposed_plan>`, it must also save that finalized plan as a Markdown file in the repo-root `.plans/` directory.
+- Save only finalized plans. Do not write interim exploration, questions, or draft revisions to `.plans/`.
+- Use the filename pattern `YYYY-MM-DD-short-topic.md` such as `.plans/2026-03-12-channel-filtering.md`.
+- If the intended filename already exists, append a numeric suffix such as `-2`, `-3`, and so on.
+
+## Documentation After Changes
+
+- After implementing a meaningful change, agents must assess whether canonical repo docs need updates before considering the task complete.
+- Meaningful changes include new or changed user-visible behavior, architecture or data-flow changes, non-obvious maintenance workflows, new setup/debugging steps, and new subsystem contracts or boundaries.
+- Skip doc updates for trivial refactors with unchanged behavior, formatting-only edits, and isolated test-only changes.
+- Prefer updating an existing authoritative doc before creating a new one:
+    1. `README.md` for top-level developer or user workflows
+    2. `docs/architecture/` for architecture, ownership, and behavior contracts
+    3. the nearest module `README.md` for local usage or behavior
+- Repo docs are canonical even when they were originally drafted by an LLM. External wiki pages are derivative or synthesis content unless explicitly promoted back into the repo.
+- The external wiki sync is one-way by default: repo docs -> external wiki `_repo-context/`.
+- If repo docs changed and `IPTVNATOR_WIKI_VAULT` is configured, run `pnpm wiki:export --mode changed` after the doc update.
+- The wiki exporter only owns `_repo-context/` in the external vault. It must never overwrite repo docs or maintained wiki pages outside that folder.
+- Final task summaries should state whether docs were updated, which doc changed, and whether wiki export ran, was skipped, or failed.
+
+## Electron Debugging (CDP)
+
+- Start the Electron development app with: `nx serve electron-backend`
+- Package-script equivalent: `pnpm run serve:backend`
+- Electron is configured to start with: `--remote-debugging-port=9222`
+- Connect Chrome DevTools Protocol tools to: `127.0.0.1:9222`
+- For Electron automation/debugging tasks, use the `electron` skill
+- Do not auto-open DevTools during normal CDP automation. In development, DevTools is opt-in via `ELECTRON_OPEN_DEVTOOLS=1`.
+- If DevTools is open, `agent-browser --cdp 9222 ...` may attach to the DevTools page instead of the IPTVnator window. Symptoms: `tab list` shows `about:blank`, snapshots are empty, and screenshots are black.
+- If that happens, inspect targets with `curl http://127.0.0.1:9222/json/list` and connect directly to the IPTVnator page websocket from the `webSocketDebuggerUrl` field.
+
+### Trace / Debug Startup
+
+- Full startup tracing:
+
+```bash
+IPTVNATOR_TRACE_STARTUP=1 nx serve electron-backend
+```
+
+- Narrower trace flags:
+    - `IPTVNATOR_TRACE_IPC=1` traces renderer `window.electron.*` bridge calls
+    - `IPTVNATOR_TRACE_DB=1` traces DB worker requests and request-scoped DB events
+    - `IPTVNATOR_TRACE_SQL=1` traces SQLite statements in the main process and DB worker
+    - `IPTVNATOR_TRACE_WINDOW=1` traces BrowserWindow lifecycle and unresponsive events
+    - `IPTVNATOR_TRACE_RENDERER_CONSOLE=1` mirrors renderer console output into the Electron terminal
+
+- GPU/compositor debugging:
+
+```bash
+IPTVNATOR_DISABLE_HARDWARE_ACCELERATION=1 nx serve electron-backend
+```
+
+- If local Nx state gets weird before a rerun:
+
+```bash
+pnpm nx reset
+```
+
+### agent-browser (global install)
+
+```bash
+agent-browser --cdp 9222 tab list
+agent-browser --cdp 9222 tab 1
+agent-browser --cdp 9222 snapshot -i -c -d 4
+agent-browser --cdp 9222 screenshot /tmp/iptvnator-cdp.png
+```
+
+### Fallback
+
+```bash
+npx --yes agent-browser --cdp 9222 tab list
+```
+
+### DevTools Workaround
+
+```bash
+ELECTRON_OPEN_DEVTOOLS=1 nx serve electron-backend
+curl http://127.0.0.1:9222/json/list
+agent-browser connect ws://127.0.0.1:9222/devtools/page/<iptvnator-page-id>
+agent-browser screenshot /tmp/iptvnator-cdp.png
+```
+
+## Radio / Audio Player
+
+M3U playlists can contain radio channels identified by the `radio="true"` attribute on `#EXTINF` lines. When a radio channel is selected:
+
+- The dedicated `AudioPlayerComponent` (`libs/ui/playback/src/lib/audio-player/`) renders instead of a video player
+- The audio player always uses the built-in inline player — external player settings (MPV/VLC) are ignored
+- The EPG panel is hidden (radio streams have no EPG data)
+- The layout uses a cinematic hero pattern: the station logo is blurred as a full-area backdrop with a vignette overlay, and the artwork card + controls float above it
+- Volume is shared with the video player via `localStorage` key `'volume'`
+- Keyboard shortcuts: ArrowUp/ArrowDown (volume +/-5%), M (mute toggle)
+- Radio detection in the video player template: `activeChannel.radio === 'true'` — this is a string comparison, not boolean
+
+Key files:
+
+- `libs/ui/playback/src/lib/audio-player/audio-player.component.ts` — the audio player component
+- `libs/ui/playback/src/lib/audio-player/audio-player.component.scss` — cinematic hero styling
+- `libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html` — template conditionals for radio vs video
+- `libs/shared/interfaces/src/lib/channel.interface.ts` — `radio: string` field on Channel interface
+
+## Repo Skills
+
+- `iptvnator-ui-design`
+  Repository-specific UI design guidance for IPTVnator.
+  Use when working on channel rows, EPG views, settings surfaces, shared selection styles, or light/dark theme consistency.
+  File: `.codex/skills/iptvnator-ui-design/SKILL.md`
+
+- `iptvnator-theme-style`
+  Theme architecture, design token reference, shared SCSS library, portal header pattern, Electron drag region, and common styling mistakes.
+  Use when adding/changing CSS tokens, styling portal headers or sidebars, using shared SCSS mixins (`portal-layout`, `content-grid`, `portal-sidebar`), or auditing cross-portal visual consistency.
+  File: `.codex/skills/iptvnator-theme-style/SKILL.md`
+
+- `iptvnator-nx-architecture`
+  Repository-specific Nx monorepo structure, library placement rules, path alias guidance, and migration guardrails for portal/workspace/app code.
+  Use when deciding where code belongs, extracting code into libs, choosing imports, or refactoring Xtream/Stalker/Workspace boundaries.
+  File: `.codex/skills/iptvnator-nx-architecture/SKILL.md`
+
+- `iptvnator-sqlite-db-worker`
+  Repository-specific guidance for the Electron non-EPG SQLite worker, including worker boundaries, request-scoped DB progress events, and validation steps for slow DB operations.
+  Use when moving heavy database work off the main thread, adding worker-backed SQLite operations, or wiring loading/progress UI for Xtream and playlist DB flows.
+  File: `.codex/skills/iptvnator-sqlite-db-worker/SKILL.md`
+
+- `xtream-electron`
+  Repository-specific guidance for IPTVnator's Electron-first Xtream implementation, including feature/data-access boundaries, worker-backed DB flows, and Xtream loading/progress UX expectations.
+  Use when working on Xtream routes, store/data-source logic, or Electron-backed Xtream import/search/delete behavior.
+  File: `.codex/skills/xtream-electron/SKILL.md`
+
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+## General Guidelines for working with Nx
+
+- For navigating/exploring the workspace, invoke the `nx-workspace` skill first - it has patterns for querying projects, targets, and dependencies
+- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- Prefix nx commands with the workspace's package manager (e.g., `pnpm nx build`, `npm exec nx test`) - avoids using globally installed CLI
+- You have access to the Nx MCP server and its tools, use them to help the user
+- For Nx plugin best practices, check `node_modules/@nx/<plugin>/PLUGIN.md`. Not all plugins have this file - proceed without it if unavailable.
+- NEVER guess CLI flags - always check nx_docs or `--help` first when unsure
+
+## Scaffolding & Generators
+
+- For scaffolding tasks (creating apps, libs, project structure, setup), ALWAYS invoke the `nx-generate` skill FIRST before exploring or calling MCP tools
+
+## When to use nx_docs
+
+- USE for: advanced config options, unfamiliar flags, migration guides, plugin configuration, edge cases
+- DON'T USE for: basic generator syntax (`nx g @nx/react:app`), standard commands, things you already know
+- The `nx-generate` skill handles generator discovery internally - don't call nx_docs just to look up generator syntax
+
+<!-- nx configuration end-->
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..42aacde
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,259 @@
+# [0.12.0](https://github.com/4gray/iptvnator/compare/v0.11.1...v0.12.0) (2023-03-11)
+
+
+### Important change
+
+The storage location of playlists has been changed, now everything is stored in IndexedDB. So after the update you will see a panel offering to migrate playlists.
+
+### Bug Fixes
+
+* macos related window management improvements ([b336680](https://github.com/4gray/iptvnator/commit/**b336680ec93b6c2a78af08bf1847f6e133895719**))
+* set epgSource as not required field ([049ed6b](https://github.com/4gray/iptvnator/commit/049ed6be519df602fd8eb5071fb17efe1a850000)), closes [#175](https://github.com/4gray/iptvnator/issues/175)
+
+
+### Features
+
+* add cmd+q hotkey to close the app (macOS) ([f3e00e7](https://github.com/4gray/iptvnator/commit/f3e00e78aa65b64d058c27b616b0d11d1a374015)), closes [#181](https://github.com/4gray/iptvnator/issues/181)
+* add dockerfile and docker-compose ([4b97e3d](https://github.com/4gray/iptvnator/commit/4b97e3d4b3b84a57c5c09cc25c0c362de341e2ba))
+* add italian language ([3e3f18c](https://github.com/4gray/iptvnator/commit/3e3f18cabf3784bcfee17e54771ca0a5dbcbbf33))
+* draggable channels in favorites list ([ba41c8d](https://github.com/4gray/iptvnator/commit/ba41c8dae5e82bd1f39fb9a6cd8518e25dcdb894))
+* export playlist as m3u ([7e4d6b1](https://github.com/4gray/iptvnator/commit/7e4d6b171fa87ffb7084344a10d653dd2cb30ea2))
+* persist window size ([2ce60e0](https://github.com/4gray/iptvnator/commit/2ce60e0a205dd8034626f35bfea1632fcac56529)), closes [#205](https://github.com/4gray/iptvnator/issues/205)
+* **pwa:** load a m3u playlist as a URL parameter [#176](https://github.com/4gray/iptvnator/issues/176) ([344bd75](https://github.com/4gray/iptvnator/commit/344bd75c876ff3d26e5721e64e7b35cf7547950a))
+
+
+
+## [0.11.1](https://github.com/4gray/iptvnator/compare/v0.11.0...v0.11.1) (2022-10-01)
+
+
+### Bug Fixes
+
+* allow file:// protocol for epg source ([c4e1076](https://github.com/4gray/iptvnator/commit/c4e107681e55ac168a86b57cf0c6bfd5a2b35c5c))
+* disable service worker in electron app ([df4e99a](https://github.com/4gray/iptvnator/commit/df4e99a4ae7186322eddcab8b6a81a04bd4c2e1a))
+* red screen in PIP window ([9756a76](https://github.com/4gray/iptvnator/commit/9756a76a90c05c008cd84c690c82b04c7ec56c87))
+* service worker injection ([ba3dd88](https://github.com/4gray/iptvnator/commit/ba3dd88dde1129ac21ec6056b81f7ff8b569f5d6))
+
+
+### Reverts
+
+* Revert "Update release.yml" ([5ac1992](https://github.com/4gray/iptvnator/commit/5ac199281d0fa24998cf01dff148316f7684e46a))
+
+
+
+# [0.11.0](https://github.com/4gray/iptvnator/compare/v0.10.0...v0.11.0) (2022-09-11)
+
+
+### Bug Fixes
+
+* set default value for video player ([ab1d0bf](https://github.com/4gray/iptvnator/commit/ab1d0bfec85dd8a43606c02a215c6654b809bb15))
+* show notification after playlist refresh (PWA) ([b18e537](https://github.com/4gray/iptvnator/commit/b18e537ccb25c49002577a7aedd810c81eb981ea))
+
+
+### Features
+
+* check for available updates in PWA ([17b265f](https://github.com/4gray/iptvnator/commit/17b265f5a6bc4cae5c66532ccda3af580b52779c))
+* implement multi epg view ([b4db751](https://github.com/4gray/iptvnator/commit/b4db751fb66353700dbc9e2285232da28ee655cb))
+* import playlist as text ([6676fa0](https://github.com/4gray/iptvnator/commit/6676fa0a4267a5cb56697b47f24954581873f3e1))
+* support multiple epg sources ([f8c6874](https://github.com/4gray/iptvnator/commit/f8c6874ad3734ef74e5de25e83626c7e8e77c55a))
+
+
+
+# [0.10.0](https://github.com/4gray/iptvnator/compare/v0.9.0...v0.10.0) (2022-04-24)
+
+
+### Bug Fixes
+
+* capitalize app name [#117](https://github.com/4gray/iptvnator/issues/117) ([36d3eaa](https://github.com/4gray/iptvnator/commit/36d3eaa54d546de64a9522583772cf411a2866c4))
+* epg function to compare channel ids ([c7de39e](https://github.com/4gray/iptvnator/commit/c7de39e7c4fa46d9d09adb34a88a060fa9570ea6))
+
+
+### Features
+
+* add context menu with default actions ([44e76e0](https://github.com/4gray/iptvnator/commit/44e76e0e35eccc085c9b35ddd3a112b6c1aa8e09)), closes [#96](https://github.com/4gray/iptvnator/issues/96)
+* add option to change aspect ratio ([b8a3f76](https://github.com/4gray/iptvnator/commit/b8a3f76c40f44416eb69b7ab0d99bf6ad3b5307b)), closes [#80](https://github.com/4gray/iptvnator/issues/80)
+* add option to select stream resolution ([c23fe3a](https://github.com/4gray/iptvnator/commit/c23fe3a923ff5b60930f9968ec9cfb611b552858)), closes [#93](https://github.com/4gray/iptvnator/issues/93)
+* add pwa support ([5a5085d](https://github.com/4gray/iptvnator/commit/5a5085dcf7e7ba956c02db539160bb06ebce5e80))
+* auto-detect if OS is in dark mode ([ad26588](https://github.com/4gray/iptvnator/commit/ad265884e6976ad4ddc636434bf97bc3e02c7613))
+* generate global playlist with all favorites ([764201a](https://github.com/4gray/iptvnator/commit/764201a0afa03b0ed3c075e3c3cfcf6fba5c105a)), closes [#97](https://github.com/4gray/iptvnator/issues/97)
+* integrate french localization ([ab75a2f](https://github.com/4gray/iptvnator/commit/ab75a2f83752ccebd07ca0dd13e9ded1e58e0efc))
+* **pwa:** auto-generate playlist with global favorites ([98ff7f4](https://github.com/4gray/iptvnator/commit/98ff7f4fa4576e00d3de0afd05395f673622ddd8))
+* switch playlists from the sidebar ([0bc71d4](https://github.com/4gray/iptvnator/commit/0bc71d47911c9b87cbe92f20f7d024c0027349e1))
+
+
+
+# [0.9.0](https://github.com/4gray/iptvnator/compare/v0.8.0...v0.9.0) (2021-10-14)
+
+
+### Bug Fixes
+
+* search feature should not affect favorites list ([ef52f77](https://github.com/4gray/iptvnator/commit/ef52f77c117c644c2173d4b82783028a19f25011)), closes [#71](https://github.com/4gray/iptvnator/issues/71)
+
+
+### Features
+
+* add chinese translation ([a497f05](https://github.com/4gray/iptvnator/commit/a497f0570175618d7053b53fd47aa907e6361f17))
+* global subtitle display setting ([4d2e175](https://github.com/4gray/iptvnator/commit/4d2e17565d247c2a6bc9ae3d23ab37ff52033478))
+* rearrange the display order of playlists ([757c739](https://github.com/4gray/iptvnator/commit/757c739d92d0a646f1927a4c3f2d3eb8425876df)), closes [#77](https://github.com/4gray/iptvnator/issues/77)
+
+
+
+# [0.8.0](https://github.com/4gray/iptvnator/compare/v0.7.0...v0.8.0) (2021-07-17)
+
+
+### Features
+
+* add info popup with epg info for active channel ([0eecfd1](https://github.com/4gray/iptvnator/commit/0eecfd1163a36019a7b600290fe5f01ee3bb9677)), closes [#51](https://github.com/4gray/iptvnator/issues/51)
+* add support of specific user-agent and referer on channel level ([a55f741](https://github.com/4gray/iptvnator/commit/a55f741a320db430987352289fd7847e050dcafd)), closes [#57](https://github.com/4gray/iptvnator/issues/57)
+
+
+
+# [0.7.0](https://github.com/4gray/iptvnator/compare/v0.6.0...v0.7.0) (2021-05-24)
+
+
+### Bug Fixes
+
+* promise issue after channel switch [#29](https://github.com/4gray/iptvnator/issues/29) ([d1f194a](https://github.com/4gray/iptvnator/commit/d1f194a25e231fd39f73aae8da7fccf60e7d4826))
+
+
+### Features
+
+* auto-refresh playlists on app startup ([e8ab576](https://github.com/4gray/iptvnator/commit/e8ab576d8b797a39eb1206e80f19e04abe88bdb4))
+* refresh playlist from file system or imported url ([57cf247](https://github.com/4gray/iptvnator/commit/57cf2477d9f3d423eb4ebbd983488b4ade275411))
+* support of timeshift and catchup attributes in playlists ([ced16a8](https://github.com/4gray/iptvnator/commit/ced16a88b25c9cb139d3a70ed1194a977cfb07f1))
+
+
+
+# [0.6.0](https://github.com/4gray/iptvnator/compare/v0.5.0...v0.6.0) (2021-04-10)
+
+
+### Bug Fixes
+
+* quit application via window close icon ([24d5584](https://github.com/4gray/iptvnator/commit/24d558470251d479b611a22bfa7f1b7ba0c70a45)), closes [#33](https://github.com/4gray/iptvnator/issues/33)
+
+
+### Features
+
+* add "what is new" dialog ([cc375a4](https://github.com/4gray/iptvnator/commit/cc375a4d4e068ec6cd23deeb83135fe8b773e517))
+* add dark theme ([0cf010a](https://github.com/4gray/iptvnator/commit/0cf010aba31b9e7b8a3344787b7c18bb67405ab7))
+* add dialog with detailed epg description ([96e93c5](https://github.com/4gray/iptvnator/commit/96e93c5b0cf1b8d9e703d93c66a1ad552ab44ed8))
+* set custom user agent for a playlist ([a8167c4](https://github.com/4gray/iptvnator/commit/a8167c4b2ae625f9714c8bbe5cd6ffa3fcfa0140)), closes [#26](https://github.com/4gray/iptvnator/issues/26)
+* show channel logos in the list ([41998ff](https://github.com/4gray/iptvnator/commit/41998ff7a0800368ef64ba184e4bab1b02f509c0)), closes [#28](https://github.com/4gray/iptvnator/issues/28)
+
+
+
+# [0.5.0](https://github.com/4gray/iptvnator/compare/v0.4.0...v0.5.0) (2021-02-28)
+
+
+### Bug Fixes
+
+* less strict url validation of playlist URL ([4f366d9](https://github.com/4gray/iptvnator/commit/4f366d91fd5664787b2258f30a25cb0d3d58b30e)), closes [#22](https://github.com/4gray/iptvnator/issues/22)
+* macOS corrupt icon fix, closes [#21](https://github.com/4gray/iptvnator/issues/21) ([955bb27](https://github.com/4gray/iptvnator/commit/955bb27eec4267a954246415fa1234dd4cd2b08c))
+
+
+### Features
+
+* add dialog about playlist details ([9f951fa](https://github.com/4gray/iptvnator/commit/9f951fa0174e4548c57f7a5392d4d74587ac2023))
+* add german language (i18n) ([7888e85](https://github.com/4gray/iptvnator/commit/7888e85ff106176fff3951ec9e9a056e787d28e5))
+* add internationalization ([0f8ca2a](https://github.com/4gray/iptvnator/commit/0f8ca2ab1a618dfc3e273ddadfdb51c251912642))
+* add russian language (i18n) ([a93af69](https://github.com/4gray/iptvnator/commit/a93af690eea075092ae9a987531af01cd3d9a415))
+
+
+
+# [0.4.0](https://github.com/4gray/iptvnator/compare/v0.3.0...v0.4.0) (2021-02-11)
+
+
+### Bug Fixes
+
+* default html5 player initialization fix ([4a6b976](https://github.com/4gray/iptvnator/commit/4a6b9761902fb694677980874ad3dc4a985e4c90))
+
+
+### Features
+
+* add `ctrl+f` as hotkey to focus search field ([cad162d](https://github.com/4gray/iptvnator/commit/cad162dc6700a9543571ef051b24d123d41fe9f9))
+* add epg worker with new ipc commands ([418566f](https://github.com/4gray/iptvnator/commit/418566f6317960e83edff117a036b54df2eac07b))
+* add moment.js based date pipe ([4881ba8](https://github.com/4gray/iptvnator/commit/4881ba8fe073fd425942773e04bbc98bb7d02aaa))
+* check for available update ([68ccabb](https://github.com/4gray/iptvnator/commit/68ccabbcb110295aa46a88b1c6c70d057ffaef66))
+* epg integration ([2e861b6](https://github.com/4gray/iptvnator/commit/2e861b6a1f2c0744bc1eaae632a79087d1721f41))
+* **epg:** epg program list with date navigation ([fdbe02b](https://github.com/4gray/iptvnator/commit/fdbe02b47e400cdad0c6e0294579150590ac5c14))
+* favorite channels list ([f02bbe3](https://github.com/4gray/iptvnator/commit/f02bbe39a66a12fd1d3b12863aa2b32048b7691f))
+* integrate epg feature ([e896af0](https://github.com/4gray/iptvnator/commit/e896af037303990c95d95efac7296365e8c714ee))
+* integrate epg worker & refactor app menu ([3b97d74](https://github.com/4gray/iptvnator/commit/3b97d74e0b39b20d62f4b2911fe0af1a7c70891b))
+* sort playlists by import date ([d967b12](https://github.com/4gray/iptvnator/commit/d967b121008075751f47bbd4898894571ef38152))
+* validation of playlist url ([da2fe5e](https://github.com/4gray/iptvnator/commit/da2fe5e6bfdf09b1feaf7aa4db6240f962555870))
+
+
+### Performance Improvements
+
+* destroy hls instance after view change ([2e3681c](https://github.com/4gray/iptvnator/commit/2e3681c36edb9e95509d510ab445ab3d95bb4328))
+
+
+
+# [0.2.0](https://github.com/4gray/iptvnator/compare/v0.1.0...v0.2.0) (2020-09-27)
+
+
+### Features
+
+* add new video.js based player ([1e852e3](https://github.com/4gray/iptvnator/commit/1e852e389931e18ccfaf78f21c86df5dfe81ad6d))
+* add settings page ([1a44ecd](https://github.com/4gray/iptvnator/commit/1a44ecd995d212e9597c44353fa049e4f07f0ab7))
+* video player configuration in app settings ([05c0c25](https://github.com/4gray/iptvnator/commit/05c0c251cf92ad17788628f5c8d8d8107e935d94))
+
+
+
+# [0.1.0](https://github.com/4gray/iptvnator/compare/v0.0.2...v0.1.0) (2020-09-12)
+
+
+### Bug Fixes
+
+* playlist upload for mac os [#6](https://github.com/4gray/iptvnator/issues/6) ([78ca56f](https://github.com/4gray/iptvnator/commit/78ca56f2b64ca61d7acdce0038d1210e99b07ffc))
+
+
+### Features
+
+* add new application icon ([0ce0b1f](https://github.com/4gray/iptvnator/commit/0ce0b1f1b5222470c79e666f6be92f507dc2f68d))
+* open playlist from file system ([861e480](https://github.com/4gray/iptvnator/commit/861e480b7076fe0e02f96908f4f30ac626722a9a))
+
+
+
+## [0.0.2](https://github.com/4gray/iptvnator/compare/v0.0.1...v0.0.2) (2020-09-06)
+
+
+### Bug Fixes
+
+* define path to userData folder as db store ([8e8c107](https://github.com/4gray/iptvnator/commit/8e8c107ca78d30bc6e90c6894fc021b1ee83d5ea))
+* enable copy-paste hotkeys for mac os ([4357c17](https://github.com/4gray/iptvnator/commit/4357c172932231d50c33ee8bc7decfb5a73d9419))
+
+
+
+## [0.0.1](https://github.com/4gray/iptvnator/compare/2f1701a3db04beb2fc6aca1e3a05f04c0a04b8af...v0.0.1) (2020-09-05)
+
+
+### Bug Fixes
+
+* full screen permissions ([fff2aaa](https://github.com/4gray/iptvnator/commit/fff2aaa5416cb29b12c60ff0cbe615e409689808))
+* full screen permissions ([f0d0fb1](https://github.com/4gray/iptvnator/commit/f0d0fb1c31651106ae5a2e1e1920b0d6efdfb489))
+* start_url fix in manifest file ([e05b7eb](https://github.com/4gray/iptvnator/commit/e05b7ebdfe58fe8b4bb8a169eaa8c0ab62947a32))
+* start_url fix in manifest file ([3929655](https://github.com/4gray/iptvnator/commit/392965595581b38229975475562c839e30146920))
+* update paths to make app installable ([fd9fc53](https://github.com/4gray/iptvnator/commit/fd9fc5360692030b4ce70eb9cdc44b79239a3fa8))
+* update paths to make app installable ([4b7d1b5](https://github.com/4gray/iptvnator/commit/4b7d1b561ca04a8c0ed32a0b6a4ce48e695b310f))
+
+
+### Features
+
+* add channel search function ([d1b9461](https://github.com/4gray/iptvnator/commit/d1b94615f0d1a420d320babfc3e866dd2520cf72))
+* add channel search function ([7a039af](https://github.com/4gray/iptvnator/commit/7a039af3f1e0619ce7a97622668705698380609a))
+* add favorites and tab based navigation ([8d333d9](https://github.com/4gray/iptvnator/commit/8d333d95203ec4344f44df0678c70d6840ae1bb0))
+* add favorites and tab based navigation ([c6e3e1f](https://github.com/4gray/iptvnator/commit/c6e3e1f02550b83914e284b95943bc05a53ad509))
+* add icon, about dialog and menu ([bcf49b8](https://github.com/4gray/iptvnator/commit/bcf49b84c7626c3e87bbdab8ad382df4546f42e9))
+* change sidebar mode ([22f2bc1](https://github.com/4gray/iptvnator/commit/22f2bc1df9a588d38e507c1a2b6a5b0a5aadd830))
+* change sidebar mode ([ca9f7a2](https://github.com/4gray/iptvnator/commit/ca9f7a254b2551592cc543698b25d622bc262df6))
+* electron based app ([0feb657](https://github.com/4gray/iptvnator/commit/0feb65786ab3caf7775195cc266a2789eb3093ed))
+* electron based app ([998e7e9](https://github.com/4gray/iptvnator/commit/998e7e92557aff5cf86bd362abdde051275797b0))
+* implement channel groups view ([20e0a40](https://github.com/4gray/iptvnator/commit/20e0a4019c6a3db09fa54a3118c67eb348787a18))
+* implement channel groups view ([773e1ed](https://github.com/4gray/iptvnator/commit/773e1edf63df735d517fd11dda6dfd6b3181258f))
+* initial commit ([79332aa](https://github.com/4gray/iptvnator/commit/79332aa6de5dd2a10fad187e809057e2cbac4abd))
+* initial commit ([2f1701a](https://github.com/4gray/iptvnator/commit/2f1701a3db04beb2fc6aca1e3a05f04c0a04b8af))
+* list with recent playlists ([1735026](https://github.com/4gray/iptvnator/commit/1735026c201591c4192317f3a5371c8548f8fa1c))
+* list with recent playlists ([8ee96ee](https://github.com/4gray/iptvnator/commit/8ee96eeebe0ca422d7bc183296f896c49e827b19))
+
+
+
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..e8f75d7
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,686 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Plan Mode
+
+- When Claude Code is in Plan Mode and produces a final `<proposed_plan>`, it must also save that finalized plan as a Markdown file in the repo-root `.plans/` directory.
+- Save only finalized plans. Do not write interim exploration, question turns, or draft revisions to `.plans/`.
+- Use the filename pattern `YYYY-MM-DD-short-topic.md` such as `.plans/2026-03-12-channel-filtering.md`.
+- If the intended filename already exists, append a numeric suffix such as `-2`, `-3`, and so on.
+
+## Documentation After Changes
+
+- After implementing a meaningful change, Claude Code must assess whether canonical repo docs need updates before considering the task complete.
+- Meaningful changes include new or changed user-visible behavior, architecture or data-flow changes, non-obvious maintenance workflows, new setup/debugging steps, and new subsystem contracts or boundaries.
+- Skip doc updates for trivial refactors with unchanged behavior, formatting-only edits, and isolated test-only changes.
+- Prefer updating an existing authoritative doc before creating a new one:
+    1. `README.md` for top-level developer or user workflows
+    2. `docs/architecture/` for architecture, ownership, and behavior contracts
+    3. the nearest module `README.md` for local usage or behavior
+- Repo docs are canonical even when they were originally drafted by an LLM. External wiki pages are derivative or synthesis content unless explicitly promoted back into the repo.
+- The external wiki sync is one-way by default: repo docs -> external wiki `_repo-context/`.
+- If repo docs changed and `IPTVNATOR_WIKI_VAULT` is configured, run `pnpm wiki:export --mode changed` after the doc update.
+- The wiki exporter only owns `_repo-context/` in the external vault. It must never overwrite repo docs or maintained wiki pages outside that folder.
+- Final task summaries should state whether docs were updated, which doc changed, and whether wiki export ran, was skipped, or failed.
+
+## Project Overview
+
+IPTVnator is a cross-platform IPTV player application built with Angular and Electron, supporting M3U/M3U8 playlists, Xtream Codes API, and Stalker portals.
+
+**Dual Environment Support**: The application is designed to work in both Electron and as a Progressive Web App (PWA). The architecture uses a factory pattern to inject environment-specific services at runtime, ensuring the same codebase works in both contexts.
+
+## Development Commands
+
+### Building and Serving
+
+```bash
+# Serve the Angular web app only (development mode, baseHref="/")
+pnpm run serve:frontend
+# or
+nx serve web
+
+# Serve with PWA configuration (optimized, baseHref="/")
+pnpm run serve:frontend:pwa
+# or
+nx serve web --configuration=pwa
+
+# Serve the Electron app (starts both frontend and backend)
+pnpm run serve:backend
+# or
+nx serve electron-backend
+
+# Build frontend for Electron (baseHref="./")
+pnpm run build:frontend
+# or
+nx build web
+
+# Build frontend for PWA deployment (baseHref="/")
+pnpm run build:frontend:pwa
+# or
+nx build web --configuration=pwa
+
+# Build backend (Electron)
+pnpm run build:backend
+# or
+nx build electron-backend
+
+# Package the app (creates distributable without installers)
+pnpm run package:app
+# or
+nx run electron-backend:package
+
+# Create installers/executables
+pnpm run make:app
+# or
+nx run electron-backend:make
+```
+
+### Electron CDP Debugging
+
+- Start Electron in dev mode with: `nx serve electron-backend`
+- Package-script equivalent: `pnpm run serve:backend`
+- The workspace is configured to always launch Electron with: `--remote-debugging-port=9222`
+- Use CDP clients (Chrome DevTools Protocol tools) against: `127.0.0.1:9222`
+- When the task is Electron automation/debugging, use the `electron` skill
+
+For startup tracing or white-screen debugging:
+
+```bash
+IPTVNATOR_TRACE_STARTUP=1 nx serve electron-backend
+```
+
+Useful narrower flags:
+
+- `IPTVNATOR_TRACE_IPC=1` traces renderer `window.electron.*` bridge calls
+- `IPTVNATOR_TRACE_DB=1` traces DB worker requests and DB progress events
+- `IPTVNATOR_TRACE_SQL=1` traces SQLite statements in both main and worker connections
+- `IPTVNATOR_TRACE_WINDOW=1` traces BrowserWindow navigation/load lifecycle
+- `IPTVNATOR_TRACE_RENDERER_CONSOLE=1` mirrors renderer console logs into the Electron terminal
+
+For GPU/compositor debugging:
+
+```bash
+IPTVNATOR_DISABLE_HARDWARE_ACCELERATION=1 nx serve electron-backend
+```
+
+If the Nx daemon gets into a bad state before rerunning Electron:
+
+```bash
+pnpm nx reset
+```
+
+Use global `agent-browser` (preferred):
+
+```bash
+# Verify CDP targets
+agent-browser --cdp 9222 tab list
+
+# Switch to the app tab and inspect interactive elements
+agent-browser --cdp 9222 tab 1
+agent-browser --cdp 9222 snapshot -i -c -d 4
+
+# Capture debug artifacts
+agent-browser --cdp 9222 screenshot /tmp/iptvnator-cdp.png
+agent-browser --cdp 9222 trace start /tmp/iptvnator.trace.zip
+agent-browser --cdp 9222 wait 1500
+agent-browser --cdp 9222 trace stop /tmp/iptvnator.trace.zip
+```
+
+If `agent-browser` is not in PATH, use:
+
+```bash
+npx --yes agent-browser --cdp 9222 tab list
+```
+
+### Testing
+
+```bash
+# Run frontend tests
+pnpm run test:frontend
+# or
+nx test web
+
+# Run backend tests
+pnpm run test:backend
+# or
+nx test electron-backend
+
+# Run e2e tests (Playwright)
+nx e2e web-e2e
+
+# Run tests with coverage
+nx test web --configuration=ci
+```
+
+### Linting
+
+```bash
+# Lint frontend
+nx lint web
+
+# Lint backend
+nx lint electron-backend
+```
+
+### Documentation And Wiki Export
+
+```bash
+# Export a full canonical-doc snapshot into the external Obsidian vault
+pnpm wiki:export --mode full
+
+# Export only the latest repo context into the external Obsidian vault
+pnpm wiki:export --mode changed
+```
+
+## Architecture
+
+### Monorepo Structure (Nx Workspace)
+
+This is an Nx monorepo with the following structure:
+
+- **apps/web** - Angular application (frontend)
+- **apps/electron-backend** - Electron main process
+- **apps/web-e2e** - Playwright end-to-end tests
+- **libs/** - Shared libraries:
+    - **m3u-state** - NgRx state management for playlists
+    - **services** - Abstract DataService and implementations
+    - **shared/interfaces** - TypeScript interfaces and types
+    - **shared/m3u-utils** - M3U playlist utilities
+    - **ui/components** - Reusable UI components
+    - **ui/pipes** - Angular pipes
+    - **ui/shared-portals** - Portal-related UI components
+
+### Frontend Architecture (Angular)
+
+**State Management**: Uses NgRx for playlist state management:
+
+- Store configuration in `apps/web/src/app/app.config.ts`
+- Playlist state, actions, effects, and reducers in `libs/m3u-state/`
+- Entity adapter pattern for managing playlists collection
+- Router store integration for route-based state
+
+**XtreamStore Architecture** (Signal Store with Feature Composition):
+
+The Xtream Codes module uses NgRx Signal Store with a layered architecture:
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        PRESENTATION LAYER                        │
+│              Components use XtreamStore (facade)                 │
+└─────────────────────────────────────────────────────────────────┘
+                                  │
+                                  ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                         FACADE LAYER                             │
+│                         XtreamStore                              │
+│            (Composes feature stores, unified API)                │
+└─────────────────────────────────────────────────────────────────┘
+                                  │
+        ┌────────────┬────────────┼────────────┬────────────┐
+        ▼            ▼            ▼            ▼            ▼
+┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐
+│  withPortal│ │withContent │ │withSelection│ │ withSearch │ │ withPlayer │
+└────────────┘ └────────────┘ └────────────┘ └────────────┘ └────────────┘
+        │                           │              │
+        └───────────────────────────┼──────────────┘
+                                    ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                    DATA SOURCE LAYER                             │
+│                   IXtreamDataSource                              │
+│         ┌───────────────────┬───────────────────┐               │
+│         ▼                   ▼                                    │
+│  ElectronDataSource    PwaDataSource                            │
+│  (DB-first + API)      (API-only)                               │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+File structure:
+
+```
+apps/web/src/app/xtream-electron/
+├── stores/
+│   ├── features/
+│   │   ├── with-portal.feature.ts      # Playlist & portal status
+│   │   ├── with-content.feature.ts     # Categories & streams
+│   │   ├── with-selection.feature.ts   # UI selection & pagination
+│   │   ├── with-search.feature.ts      # Search functionality
+│   │   ├── with-epg.feature.ts         # EPG data
+│   │   ├── with-player.feature.ts      # Stream URLs & player
+│   │   └── index.ts
+│   ├── xtream.store.ts                 # Facade composing all features
+│   └── index.ts
+├── services/
+│   ├── xtream-api.service.ts           # Xtream Codes API calls
+│   ├── xtream-url.service.ts           # Stream URL construction
+│   └── index.ts
+├── data-sources/
+│   ├── xtream-data-source.interface.ts # Abstract interface + types
+│   ├── electron-xtream-data-source.ts  # DB-first implementation
+│   ├── pwa-xtream-data-source.ts       # API-only implementation
+│   └── index.ts                        # Factory provider
+└── with-favorites.feature.ts           # Favorites (existing)
+└── with-recent-items.ts                # Recently viewed (existing)
+```
+
+Key patterns:
+
+- **Feature stores**: Each `with*.feature.ts` uses `signalStoreFeature()` for focused functionality
+- **Facade pattern**: `XtreamStore` composes all features, maintaining backward compatibility
+- **Data source abstraction**: `IXtreamDataSource` interface with environment-specific implementations
+- **Factory injection**: `provideXtreamDataSource()` selects Electron or PWA implementation at runtime
+
+Data strategies by environment:
+| Environment | Strategy |
+|-------------|----------|
+| **Electron** | DB-first: Check DB → fetch API if missing → cache to DB |
+| **PWA** | API-only: Always fetch from API, store in memory |
+
+**M3U Playlist Module Architecture**:
+
+The M3U playlist module handles traditional M3U/M3U8 playlists with support for 90,000+ channels.
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                         VIDEO PLAYER PAGE                            │
+│                    apps/web/src/app/home/video-player/              │
+├─────────────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐  ┌──────────────────────┐  ┌────────────────────┐ │
+│  │   Sidebar   │  │    Video Player      │  │   EPG List         │ │
+│  │             │  │  (ArtPlayer/Video.js)│  │   (Right drawer)   │ │
+│  │ ┌─────────┐ │  │                      │  │                    │ │
+│  │ │Channel  │ │  │                      │  │                    │ │
+│  │ │List     │ │  │                      │  │                    │ │
+│  │ │Container│ │  │                      │  │                    │ │
+│  │ └─────────┘ │  │                      │  │                    │ │
+│  └─────────────┘  └──────────────────────┘  └────────────────────┘ │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**Radio Channel Layout** (when `channel.radio === 'true'`):
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  ┌─────────────┐  ┌────────────────────────────────────────────────┐│
+│  │   Sidebar   │  │  Blurred backdrop (station logo)              ││
+│  │             │  │  ┌──────────┐                                 ││
+│  │             │  │  │ Artwork  │  ← cinematic hero layout        ││
+│  │             │  │  └──────────┘                                 ││
+│  │             │  │  Station Name                                 ││
+│  │             │  │  [LIVE] badge                                 ││
+│  │             │  │  ⏮  ▶/⏸  ⏭   ← transport controls          ││
+│  │             │  │  🔊 ━━━━━━━━━  ← volume slider               ││
+│  │             │  │  (no EPG panel)                               ││
+│  └─────────────┘  └────────────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+Key radio behavior:
+
+- Detection: `channel.radio === 'true'` (string from M3U `radio` attribute)
+- The audio player always renders inline — `shouldShowInlinePlayer` is bypassed for radio
+- EPG panel is conditionally hidden in the template when radio is active
+- Volume is shared with video player via `localStorage` key `'volume'`
+- Keyboard: ArrowUp/Down adjusts volume by 5%, M toggles mute
+- Component: `libs/ui/playback/src/lib/audio-player/audio-player.component.ts`
+
+Channel List Component Structure (parent coordinator pattern):
+
+```
+libs/ui/components/src/lib/channel-list-container/
+├── channel-list-container.component.ts   # Parent - shared state coordinator
+├── all-channels-tab/                      # Virtual scroll + debounced search
+├── groups-tab/                            # Expansion panels + infinite scroll
+├── favorites-tab/                         # CDK drag-drop reordering
+└── channel-list-item/                     # Individual channel display
+```
+
+Key patterns:
+
+- **EnrichedChannel**: Pre-computed EPG data attached to channels for performance
+- **Parent coordinator**: Manages shared signals (`channelEpgMap`, `progressTick`, `favoriteIds`)
+- **Virtual scrolling**: CDK virtual scroll for 90,000+ channel lists
+- **Infinite scroll**: IntersectionObserver in groups tab loads 50 items at a time
+- **Global progress tick**: Single 30s interval instead of per-item intervals
+
+State management via NgRx (`libs/m3u-state/`):
+
+- `PlaylistActions`: loadPlaylists, addPlaylist, removePlaylist, parsePlaylist
+- `ChannelActions`: setChannels, setActiveChannel, setAdjacentChannelAsActive
+- `EpgActions`: setActiveEpgProgram, setCurrentEpgProgram, setEpgAvailableFlag
+- `FavoritesActions`: updateFavorites, setFavorites
+
+See `docs/architecture/m3u-playlist-module.md` for complete documentation.
+
+**Routing**: Lazy-loaded routes in `apps/web/src/app/app.routes.ts`
+
+- Home/playlists overview: `/`
+- Video player: `/playlists/:id` or `/iptv`
+- Xtream Codes: `/xtreams/:id` (different routes for Electron vs web)
+- Stalker portal: `/portals/:id`
+- Settings: `/settings`
+
+**Service Architecture** (Factory Pattern):
+
+- Abstract `DataService` class in `libs/services/src/lib/data.service.ts` defines the contract
+- Two environment-specific implementations:
+    - `ElectronService` (`apps/web/src/app/services/electron.service.ts`) - Uses IPC to communicate with Electron backend
+    - `PwaService` (`apps/web/src/app/services/pwa.service.ts`) - Uses HTTP API and IndexedDB for standalone web version
+- Factory function `DataFactory()` in `apps/web/src/app/app.config.ts` determines which implementation to inject:
+    ```typescript
+    if (window.electron) {
+        return new ElectronService();
+    }
+    return new PwaService();
+    ```
+
+**Data Storage (Environment-Specific)**:
+
+- **Electron**: libSQL/SQLite database via Drizzle ORM
+    - Location: `~/.iptvnator/databases/iptvnator.db`
+    - Full-featured relational database with foreign keys and indexes
+    - Supports local file or remote Turso instance via env vars
+- **PWA (Web)**: IndexedDB via `ngx-indexed-db`
+    - Browser-based NoSQL storage
+    - Same schema structure but implemented in IndexedDB
+    - Limited by browser storage quotas
+
+**TypeScript File Size Rule**:
+
+Keep TypeScript files under **300 lines**. Hard maximum is **350–400 lines**.
+
+- When creating new files, design them to stay within this limit from the start.
+- When adding a feature to an existing file that would push it past 350 lines, **refactor first**: extract helpers, sub-services, or feature modules before adding the new code.
+- When you notice a file already exceeds 350 lines, **proactively suggest a refactoring** (or perform it if the change is straightforward) — even if the immediate task is small.
+
+Typical split strategies:
+
+- Angular components: extract child components, move logic to a dedicated service or store feature
+- Signal store features: split into smaller `with*` feature functions in separate files
+- Services: split by responsibility (e.g. separate API, transformation, and state concerns)
+- Utility files: group by domain and export from a barrel `index.ts`
+
+This rule exists to keep the codebase navigable and reviewable. A 150-line file is always preferable to a 500-line file.
+
+---
+
+**Angular Coding Standards**:
+
+This project uses modern Angular signal-based APIs and patterns. **ALWAYS** use the following:
+
+- **Component Queries**: Use `viewChild()`, `viewChildren()`, `contentChild()`, `contentChildren()` instead of `@ViewChild`, `@ViewChildren`, `@ContentChild`, `@ContentChildren` decorators
+
+    ```typescript
+    // ✅ Correct - Signal-based
+    readonly menu = viewChild.required<MatMenu>('menuRef');
+    readonly items = viewChildren<ElementRef>('item');
+
+    // ❌ Incorrect - Old decorator syntax
+    @ViewChild('menuRef') menu!: MatMenu;
+    @ViewChildren('item') items!: QueryList<ElementRef>;
+    ```
+
+    **Important**: When using signals in templates with properties that expect non-signal values, unwrap the signal by calling it:
+
+    ```html
+    <!-- ✅ Correct - Unwrap the signal -->
+    <button [matMenuTriggerFor]="menu()">Open Menu</button>
+
+    <!-- ❌ Incorrect - Signal not unwrapped -->
+    <button [matMenuTriggerFor]="menu">Open Menu</button>
+    ```
+
+- **Component Inputs/Outputs**: Use `input()` and `output()` functions instead of `@Input()` and `@Output()` decorators
+
+    ```typescript
+    // ✅ Correct - Signal-based
+    readonly title = input.required<string>();
+    readonly size = input<number>(10); // with default value
+    readonly clicked = output<string>();
+
+    // ❌ Incorrect - Old decorator syntax
+    @Input({ required: true }) title!: string;
+    @Input() size = 10;
+    @Output() clicked = new EventEmitter<string>();
+    ```
+
+- **Reactive State**: Use signal primitives for reactive state management
+
+    ```typescript
+    // ✅ Use signal(), computed(), effect(), linkedSignal()
+    readonly count = signal(0);
+    readonly doubled = computed(() => this.count() * 2);
+
+    constructor() {
+        effect(() => {
+            console.log('Count changed:', this.count());
+        });
+    }
+    ```
+
+- **Host Bindings**: Use `@HostBinding()` and `@HostListener()` decorators (these don't have signal equivalents yet)
+
+    ```typescript
+    @HostBinding('class.active') get isActive() { return this.active(); }
+    @HostListener('click') onClick() { /* ... */ }
+    ```
+
+- **Control Flow**: Use `@if`, `@for`, `@switch` instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+
+    ```typescript
+    // ✅ Correct - Modern syntax
+    @if (isLoggedIn()) {
+        <p>Welcome!</p>
+    }
+
+    @for (item of items(); track item.id) {
+        <li>{{ item.name }}</li>
+    }
+
+    // ❌ Incorrect - Old syntax
+    <p *ngIf="isLoggedIn">Welcome!</p>
+    <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
+    ```
+
+### Backend Architecture (Electron)
+
+**Main Entry**: `apps/electron-backend/src/main.ts`
+
+- Bootstraps Electron app and initializes database
+- Registers event handlers for IPC communication
+
+**Database**:
+
+- **ORM**: Drizzle ORM with libSQL (local SQLite file or remote Turso)
+- **Location**: `~/.iptvnator/databases/iptvnator.db` (avoids spaces in path)
+- **Schema** (`apps/electron-backend/src/app/database/schema.ts`):
+    - `playlists` - Playlist metadata (M3U, Xtream, Stalker)
+    - `categories` - Content categories (live, movies, series)
+    - `content` - Streams/VOD/series items
+    - `favorites` - User favorites
+    - `recentlyViewed` - Watch history
+- **Connection**: `apps/electron-backend/src/app/database/connection.ts`
+    - Auto-creates tables on init
+    - Supports local file or remote via env vars (`LIBSQL_URL`, `LIBSQL_AUTH_TOKEN`)
+
+**IPC Communication**:
+
+- **Preload script**: `apps/electron-backend/src/app/api/main.preload.ts`
+    - Exposes `window.electron` API via `contextBridge`
+    - All IPC channels defined here (playlist operations, EPG, database CRUD, external players, etc.)
+- **Event handlers**: `apps/electron-backend/src/app/events/`
+    - `database.events.ts` - Database CRUD operations
+    - `playlist.events.ts` - Playlist import/update
+    - `epg.events.ts` - EPG fetch and parsing (uses worker)
+    - `xtream.events.ts` - Xtream Codes API
+    - `stalker.events.ts` - Stalker portal API
+    - `player.events.ts` - External player (MPV, VLC) integration
+    - `settings.events.ts` - App settings
+    - `electron.events.ts` - App version, etc.
+
+**Workers**:
+
+- EPG parsing runs in worker thread: `apps/electron-backend/src/app/workers/epg-parser.worker.ts`
+
+### Key Features
+
+**Playlist Support**:
+
+- M3U/M3U8 files (local or URL)
+- Xtream Codes API (`username`, `password`, `serverUrl`)
+- Stalker portal (`macAddress`, `url`)
+
+**Video Players**:
+
+- Built-in HTML5 player with HLS.js or Video.js
+- External players: MPV, VLC (via IPC to Electron backend)
+
+**Radio Player**:
+
+- Dedicated audio player for channels with `radio="true"` M3U attribute
+- Cinematic layout: blurred station logo as backdrop, floating artwork card, transport controls
+- Always uses the built-in inline player — external player settings (MPV/VLC) are ignored for radio
+- EPG panel is hidden for radio channels (radio streams have no EPG data)
+- Volume synced with video player via shared `localStorage` key `'volume'`
+- Keyboard shortcuts: ArrowUp/ArrowDown (volume), M (mute)
+- Component: `libs/ui/playback/src/lib/audio-player/audio-player.component.ts`
+
+**EPG (Electronic Program Guide)**:
+
+- XMLTV format support
+- Background parsing in worker thread
+- Stored in database for quick lookup
+
+**Favorites and Recently Viewed**:
+
+- Per-playlist favorites and global favorites
+- Recently viewed tracks watch history
+
+**Internationalization**:
+
+- Uses `@ngx-translate` with 16 language files in `apps/web/src/assets/i18n/`
+
+## Development Notes
+
+### Environment Detection and Dual-Mode Architecture
+
+The app determines whether it's running in Electron or as a PWA by checking:
+
+```typescript
+window.electron; // truthy in Electron, undefined in browser
+```
+
+**Why Dual Mode?**
+IPTVnator supports both Electron (desktop app) and PWA (web browser) to provide flexibility:
+
+- **Electron**: Full-featured desktop experience with local database, external player support (MPV/VLC), and native file system access
+- **PWA**: Lightweight web version that runs in any browser without installation
+
+**Environment-Specific Behavior**:
+
+- `app.config.ts` - `DataFactory()` selects DataService implementation based on environment
+- `app.routes.ts` - Different routes for Xtream portals (Electron uses Tauri-based routes, PWA uses standard routes)
+- Storage layer switches automatically:
+    - Electron → libSQL/Drizzle ORM → `~/.iptvnator/databases/iptvnator.db`
+    - PWA → IndexedDB → Browser storage
+- External player support (MPV/VLC) only available in Electron
+- File system operations only available in Electron (uploading playlists from disk)
+
+**Base Href Configuration**:
+The app uses different base href values depending on the build target:
+
+- **Development & PWA**: `baseHref="/"` (from `index.html`)
+    - Used by: `pnpm run serve:frontend`, `pnpm run build:frontend:pwa`
+    - For web servers with proper routing
+- **Electron Production**: `baseHref="./"` (overridden in build config)
+    - Used by: `pnpm run build:backend`, `pnpm run make:app`
+    - Required for `file://` protocol in Electron
+
+Build configurations in `apps/web/project.json`:
+
+- `production`: Electron build with `baseHref="./"`
+- `pwa`: Web deployment with `baseHref="/"`
+- `development`: Dev mode with `baseHref="/"` from index.html
+
+**Factory Pattern Implementation**:
+The factory pattern ensures a single codebase works in both environments without conditional checks scattered throughout the application. All environment-specific logic is encapsulated in the service implementations.
+
+### Testing Strategy
+
+- **Unit tests**: Jest with `jest-preset-angular` and `ng-mocks`
+- **E2E tests**: Playwright testing the web app
+- Backend tests use standard Jest
+
+### Nx Commands
+
+Use `nx` CLI for better performance:
+
+```bash
+nx run <project>:<target>
+# Example: nx run web:build
+# Example: nx run electron-backend:serve
+```
+
+To run multiple projects:
+
+```bash
+nx run-many --target=test --all
+```
+
+### Electron Build Process
+
+The Electron backend depends on the web app being built first:
+
+- `electron-backend:build` depends on `web:build`
+- Output goes to `dist/apps/electron-backend` (backend) and `dist/apps/web` (frontend)
+- Packaging combines both into distributable
+
+### Database Migrations
+
+No formal migration system yet. Schema changes are applied via raw SQL in `connection.ts` `createTables()` function using `CREATE TABLE IF NOT EXISTS`.
+
+### Common Patterns
+
+**IPC Communication**:
+
+1. Define handler in appropriate events file (e.g., `database.events.ts`)
+2. Register with `ipcMain.handle()` in the event bootstrap function
+3. Expose in preload script via `contextBridge.exposeInMainWorld()`
+4. Call from Angular via `window.electron.<methodName>()`
+
+**Adding New Playlist Source**:
+
+1. Add type to `libs/shared/interfaces/src/lib/playlist.interface.ts`
+2. Create event handler in `apps/electron-backend/src/app/events/`
+3. Add UI in `apps/web/src/app/home/`
+4. Update database schema if needed
+
+**State Management**:
+
+- Use NgRx for global application state (playlists)
+- Use component stores (`@ngrx/component-store`) for feature-specific state
+- Use NgRx signals for reactive data streams
+
+<!-- nx configuration start-->
+<!-- Leave the start & end comments to automatically receive updates. -->
+
+## General Guidelines for working with Nx
+
+- For navigating/exploring the workspace, invoke the `nx-workspace` skill first - it has patterns for querying projects, targets, and dependencies
+- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
+- Prefix nx commands with the workspace's package manager (e.g., `pnpm nx build`, `npm exec nx test`) - avoids using globally installed CLI
+- You have access to the Nx MCP server and its tools, use them to help the user
+- For Nx plugin best practices, check `node_modules/@nx/<plugin>/PLUGIN.md`. Not all plugins have this file - proceed without it if unavailable.
+- NEVER guess CLI flags - always check nx_docs or `--help` first when unsure
+
+## Scaffolding & Generators
+
+- For scaffolding tasks (creating apps, libs, project structure, setup), ALWAYS invoke the `nx-generate` skill FIRST before exploring or calling MCP tools
+
+## When to use nx_docs
+
+- USE for: advanced config options, unfamiliar flags, migration guides, plugin configuration, edge cases
+- DON'T USE for: basic generator syntax (`nx g @nx/react:app`), standard commands, things you already know
+- The `nx-generate` skill handles generator discovery internally - don't call nx_docs just to look up generator syntax
+
+<!-- nx configuration end-->
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..95ab426
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2020-2021
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e20e3ce
--- /dev/null
+++ b/README.md
@@ -0,0 +1,275 @@
+# IPTVnator - IPTV Player Application
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/4gray/iptvnator/electron/src/assets/icons/favicon.256x256.png" alt="IPTVnator icon" title="Free IPTV player application" />
+</p>
+<p align="center">
+  <a href="https://github.com/4gray/iptvnator/releases"><img src="https://img.shields.io/github/release/4gray/iptvnator.svg?style=for-the-badge&logo=github" alt="Release"></a>
+  <a href="https://github.com/4gray/iptvnator/releases"><img src="https://img.shields.io/github/v/release/4gray/iptvnator?include_prereleases&label=pre-release&logo=github&style=for-the-badge" /></a>
+ <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/4gray/iptvnator/build-and-test.yaml?style=for-the-badge&logo=github"> <a href="https://github.com/4gray/iptvnator/releases"><img src="https://img.shields.io/github/downloads/4gray/iptvnator/total?style=for-the-badge&logo=github" alt="Releases"></a> <a href="https://codecov.io/gh/4gray/iptvnator"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/4gray/iptvnator?style=for-the-badge"></a> <a href="https://t.me/iptvnator"><img src="https://img.shields.io/badge/telegram-iptvnator-blue?logo=telegram&style=for-the-badge" alt="Telegram"></a> <a href="https://bsky.app/profile/iptvnator.bsky.social"><img src="https://img.shields.io/badge/bluesky-iptvnator-darkblue?logo=bluesky&style=for-the-badge" alt="Bluesky"></a>
+</p>
+
+🌐 **[Website](https://4gray.github.io/iptvnator/)** | <a href="https://t.me/iptvnator">Telegram channel for discussions</a> | <a href="https://ko-fi.com/4gray" target="_blank">Buy me a coffee</a> | <a href="https://github.com/sponsors/4gray">GitHub Sponsors</a>
+
+**IPTVnator** is a video player application that provides support for IPTV playlist playback (m3u, m3u8). The application allows users to import playlists using remote URLs or by uploading files from the local file system. Additionally, it supports EPG information in XMLTV format which can be provided via URL.
+
+The application is a cross-platform, open-source project built with Electron and Angular.
+
+⚠️ Note: IPTVnator does not provide any playlists or other digital content. The channels and pictures in the screenshots are for demonstration purposes only.
+
+![IPTVnator: Channels list, player and epg list](./iptv-dark-theme.png)
+
+## Features
+
+- M3u and M3u8 playlist support 📺
+- Radio playlist support with dedicated audio player 📻
+- Xtream Code (XC) and Stalker portal (STB) support
+- External player support - MPV, VLC
+- Add playlists from the file system or remote URLs 📂
+- Automatic playlist updates on application startup
+- Channel search functionality 🔍
+- EPG support (TV Guide) with detailed information
+- TV archive/catchup/timeshift functionality
+- Group-based channel list
+- Read-only M3U channel details from the channel context menu
+- Favorite channels management
+- Global favorites aggregated from all playlists
+- HTML video player with HLS.js support or Video.js-based player
+- Internationalization with support for 16 languages:
+    - Arabic
+    - Moroccan arabic
+    - English
+    - Russian
+    - German
+    - Korean
+    - Spanish
+    - Chinese
+    - Traditional chinese
+    - French
+    - Italian
+    - Turkish
+    - Japanese
+    - Dutch
+    - Belarusian
+    - Polish
+- Custom "User Agent" header configuration for playlists
+- Light and Dark themes
+- Docker version available for self-hosting
+
+## Screenshots:
+
+|                 Welcome screen: Playlists overview                 | Main player interface with channels sidebar and video player  |
+| :----------------------------------------------------------------: | :-----------------------------------------------------------: |
+|       ![Welcome screen: Playlists overview](./playlists.png)       |   ![Sidebar with channel and video player](./iptv-main.png)   |
+|            Welcome screen: Add playlist via file upload            |             Welcome screen: Add playlist via URL              |
+| ![Welcome screen: Add playlist via file upload](./iptv-upload.png) | ![Welcome screen: Add playlist via URL](./upload-via-url.png) |
+|              EPG Sidebar: TV guide on the right side               |                 General application settings                  |
+|         ![EPG: TV guide on the right side](./iptv-epg.png)         |         ![General app settings](./iptv-settings.png)          |
+|                         Playlist settings                          |
+|         ![Playlist settings](./iptv-playlist-settings.png)         |                                                               |
+
+_Note: First version of the application which was developed as a PWA is available in an extra git branch._
+
+## Download
+
+Download the latest version of the application for macOS, Windows, and Linux from the [release page](https://github.com/4gray/iptvnator/releases).
+
+Alternatively, you can install the application using one of the following package managers:
+
+### Homebrew
+
+```shell
+$ brew install iptvnator
+```
+
+### Snap
+
+```shell
+$ sudo snap install iptvnator
+```
+
+### Arch
+
+Also available as an Arch PKG, [iptvnator-bin](https://aur.archlinux.org/packages/iptvnator-bin/), in the AUR (using your favourite AUR-helper, .e.g. `yay`)
+
+```shell
+$ yay -S iptvnator-bin
+```
+
+### Gentoo
+
+You can install IPTVnator from the [gentoo-zh overlay](https://github.com/microcai/gentoo-zh)
+
+```shell
+sudo eselect repository enable gentoo-zh
+sudo emerge --sync gentoo-zh
+sudo emerge iptvnator-bin
+```
+
+[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/en/snap-store-black.svg)](https://snapcraft.io/iptvnator)
+
+<a href="https://github.com/sponsors/4gray" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-green.png" alt="Buy Me A Coffee" width="185"></a>
+
+## Troubleshooting
+
+### macOS: "App is damaged and can't be opened"
+
+Older unsigned macOS builds may require removing the quarantine flag from the downloaded application:
+
+```bash
+xattr -c /Applications/IPTVnator.app
+```
+
+Alternatively, if the app is located in a different directory:
+
+```bash
+xattr -c ~/Downloads/IPTVnator.app
+```
+
+### Linux: chrome-sandbox Issues
+
+If you encounter the following error when launching IPTVnator:
+
+```
+The SUID sandbox helper binary was found, but is not configured correctly.
+Rather than run without sandboxing I'm aborting now.
+You need to make sure that chrome-sandbox is owned by root and has mode 4755.
+```
+
+**Solution 1: Fix chrome-sandbox permissions (Recommended for .deb/.rpm installations)**
+
+Navigate to the IPTVnator installation directory and run:
+
+```bash
+sudo chown root:root chrome-sandbox
+sudo chmod 4755 chrome-sandbox
+```
+
+**Solution 2: Launch with --no-sandbox flag**
+
+Edit the desktop launcher file to add the `--no-sandbox` flag:
+
+1. Find your desktop file location:
+    - **Ubuntu/Debian**: `~/.local/share/applications/iptvnator.desktop`
+    - **System-wide**: `/usr/share/applications/iptvnator.desktop`
+
+2. Edit the file and modify the `Exec` line:
+
+    ```
+    Exec=iptvnator --no-sandbox %U
+    ```
+
+3. Save the file and relaunch the application from your application menu.
+
+Alternatively, you can launch IPTVnator from the terminal with the flag:
+
+```bash
+iptvnator --no-sandbox
+```
+
+### GNU/Linux: Wayland startup failure
+
+If IPTVnator exits on GNU/Linux with errors about failing to connect to
+Wayland or initialize the Ozone platform, force X11/XWayland instead:
+
+```bash
+iptvnator --ozone-platform=x11
+```
+
+This workaround is mainly for older or problematic Linux graphics stacks. The
+Snap package already includes this X11 override by default. For AppImage,
+direct binaries, and other Linux package formats, pass the flag manually when
+needed.
+
+## How to Build and Develop
+
+Requirements:
+
+- Node.js with pnpm (via Corepack)
+
+1. Clone this repository and install project dependencies:
+
+    ```
+    $ corepack enable
+    $ pnpm install
+    ```
+
+2. Start the application:
+    ```
+    $ pnpm run serve:backend
+    ```
+
+This will open the Electron app in a separate window, while the Angular dev server will run at http://localhost:4200.
+
+The equivalent Nx command is:
+
+```
+$ nx serve electron-backend
+```
+
+To start Electron with an empty, isolated data directory instead of your normal
+`~/.iptvnator` folder, set `IPTVNATOR_E2E_DATA_DIR` for that run:
+
+```
+$ rm -rf .tmp/iptvnator-empty && mkdir -p .tmp/iptvnator-empty
+$ IPTVNATOR_E2E_DATA_DIR="$PWD/.tmp/iptvnator-empty" pnpm run serve:backend
+```
+
+This redirects the SQLite database, Electron user data, and local config under
+the given directory. Delete that directory whenever you want a fresh empty
+state.
+
+If you need to debug renderer freezes or GPU/compositor issues in Electron, you
+can disable hardware acceleration for a run:
+
+```
+$ IPTVNATOR_DISABLE_HARDWARE_ACCELERATION=1 pnpm run serve:backend
+```
+
+If you need startup diagnostics for a white screen or a frozen route, you can
+also turn on opt-in Electron tracing. These logs are written to the Electron
+terminal output so they still help when the renderer DevTools never open:
+
+```
+$ IPTVNATOR_TRACE_STARTUP=1 pnpm run serve:backend
+```
+
+Nx equivalent:
+
+```
+$ IPTVNATOR_TRACE_STARTUP=1 nx serve electron-backend
+```
+
+Useful narrower flags:
+
+- `IPTVNATOR_TRACE_IPC=1` logs renderer `window.electron.*` calls reaching the
+  Electron bridge
+- `IPTVNATOR_TRACE_DB=1` logs DB worker requests and request-scoped DB events
+- `IPTVNATOR_TRACE_SQL=1` logs SQLite statements in both the main connection and
+  DB worker connection
+- `IPTVNATOR_TRACE_WINDOW=1` logs BrowserWindow load, navigation, and
+  unresponsive events
+- `IPTVNATOR_TRACE_RENDERER_CONSOLE=1` mirrors renderer console messages into
+  the Electron terminal output
+
+If the local Nx daemon gets into a bad state before rerunning Electron, reset it:
+
+```
+$ pnpm nx reset
+```
+
+To run only the Angular app without Electron, use:
+
+```
+$ pnpm run serve:frontend
+```
+
+## Disclaimer
+
+**IPTVnator doesn't provide any playlists or other digital content.**
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors)
+
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
diff --git a/apps/electron-backend-e2e/eslint.config.mjs b/apps/electron-backend-e2e/eslint.config.mjs
new file mode 100644
index 0000000..b2e9fac
--- /dev/null
+++ b/apps/electron-backend-e2e/eslint.config.mjs
@@ -0,0 +1,12 @@
+import playwright from 'eslint-plugin-playwright';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  playwright.configs['flat/recommended'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.js'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/apps/electron-backend-e2e/playwright.config.ts b/apps/electron-backend-e2e/playwright.config.ts
new file mode 100644
index 0000000..9413765
--- /dev/null
+++ b/apps/electron-backend-e2e/playwright.config.ts
@@ -0,0 +1,70 @@
+import { defineConfig } from '@playwright/test';
+import { workspaceRoot } from '@nx/devkit';
+
+/**
+ * Playwright configuration for Electron e2e tests.
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './src',
+    /* Match .e2e.ts files */
+    testMatch: '**/*.e2e.ts',
+    /* Run tests sequentially since we're testing an Electron app */
+    fullyParallel: false,
+    /* Fail the build on CI if you accidentally left test.only in the source code */
+    forbidOnly: !!process.env['CI'],
+    /* Retry on CI only */
+    retries: process.env['CI'] ? 2 : 0,
+    /* Single worker since we're testing an Electron app */
+    workers: 1,
+    /* Reporter to use */
+    reporter: [
+        ['list'],
+        [
+            'html',
+            {
+                outputFolder:
+                    '../../dist/playwright-report/electron-backend-e2e',
+            },
+        ],
+    ],
+    /* Shared settings for all the projects below */
+    use: {
+        /* Align with the app's existing test ids */
+        testIdAttribute: 'data-test-id',
+        /* Collect trace when retrying the failed test */
+        trace: 'on-first-retry',
+        /* Screenshots on failure */
+        screenshot: 'on',
+        /* Video on failure */
+        video: 'on-first-retry',
+    },
+    webServer: [
+        {
+            command: 'pnpm nx run stalker-mock-server:serve',
+            url: `http://localhost:${process.env['MOCK_PORT'] ?? '3210'}/health`,
+            reuseExistingServer: !process.env['CI'],
+            cwd: workspaceRoot,
+        },
+        {
+            command: 'pnpm nx run xtream-mock-server:serve',
+            url: `http://localhost:${process.env['XTREAM_MOCK_PORT'] ?? '3211'}/health`,
+            reuseExistingServer: !process.env['CI'],
+            cwd: workspaceRoot,
+        },
+    ],
+    /* Output folder for test artifacts */
+    outputDir: '../../dist/test-results/electron-backend-e2e',
+    /* Timeout for each test */
+    timeout: 60000,
+    /* Timeout for expect() assertions */
+    expect: {
+        timeout: 10000,
+    },
+    projects: [
+        {
+            name: 'electron',
+            use: {},
+        },
+    ],
+});
diff --git a/apps/electron-backend-e2e/project.json b/apps/electron-backend-e2e/project.json
new file mode 100644
index 0000000..4d777d2
--- /dev/null
+++ b/apps/electron-backend-e2e/project.json
@@ -0,0 +1,16 @@
+{
+    "name": "electron-backend-e2e",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/electron-backend-e2e/src",
+    "implicitDependencies": [
+        "electron-backend",
+        "stalker-mock-server",
+        "xtream-mock-server"
+    ],
+    "targets": {
+        "e2e": {
+            "dependsOn": ["electron-backend:build-e2e"]
+        }
+    }
+}
diff --git a/apps/electron-backend-e2e/src/catalog-sorting.e2e.ts b/apps/electron-backend-e2e/src/catalog-sorting.e2e.ts
new file mode 100644
index 0000000..3c6b256
--- /dev/null
+++ b/apps/electron-backend-e2e/src/catalog-sorting.e2e.ts
@@ -0,0 +1,527 @@
+import { Page } from '@playwright/test';
+import {
+    addStalkerPortal,
+    addXtreamPortal,
+    clickCategoryByNameExact,
+    clickFirstGridListCard,
+    closeElectronApp,
+    defaultXtreamPassword,
+    defaultXtreamUsername,
+    expect,
+    expectPathname,
+    launchElectronApp,
+    openWorkspaceSection,
+    resetMockServers,
+    test,
+    waitForStalkerCatalog,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+import {
+    fetchStalkerCategoryFixture,
+    fetchXtreamLiveFixture,
+    fetchXtreamSeriesFixture,
+    fetchXtreamVodFixture,
+    getXtreamDateValue,
+    getXtreamTitle,
+} from './portal-mock-fixtures';
+
+test.describe('Electron Catalog Sorting', () => {
+    test('sorts Xtream live channels by server order and name, with persistence after revisit', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const fixture = await fetchXtreamLiveFixture(
+            request,
+            xtreamCredentials
+        );
+        const expectedServerOrder = fixture.items
+            .map((item) => getXtreamTitle(item))
+            .filter((title, index, titles) => titles.indexOf(title) === index)
+            .slice(0, 5);
+        const expectedAscending = fixture.items
+            .map((item) => getXtreamTitle(item))
+            .filter((title, index, titles) => titles.indexOf(title) === index)
+            .sort(collator.compare)
+            .slice(0, 5);
+        const expectedDescending = fixture.items
+            .map((item) => getXtreamTitle(item))
+            .filter((title, index, titles) => titles.indexOf(title) === index)
+            .sort(collator.compare)
+            .reverse()
+            .slice(0, 5);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow);
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                fixture.categoryName
+            );
+
+            await expectVisibleChannelTitles(
+                app.mainWindow,
+                expectedServerOrder
+            );
+
+            await setLiveSortMode(app.mainWindow, 'Name A-Z');
+            await expectVisibleChannelTitles(app.mainWindow, expectedAscending);
+
+            await setLiveSortMode(app.mainWindow, 'Name Z-A');
+            await expectVisibleChannelTitles(
+                app.mainWindow,
+                expectedDescending
+            );
+
+            await setLiveSortMode(app.mainWindow, 'Name A-Z');
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                fixture.categoryName
+            );
+            await expectVisibleChannelTitles(app.mainWindow, expectedAscending);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('sorts Xtream VOD and series content, and keeps the chosen sort after revisiting the section', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const expectedVodDateDesc = [...vodFixture.items]
+            .sort(
+                (left, right) =>
+                    getXtreamDateValue(right) - getXtreamDateValue(left)
+            )
+            .map((item) => getXtreamTitle(item))
+            .slice(0, visibleComparisonSize);
+        const expectedVodDateAsc = [...vodFixture.items]
+            .sort(
+                (left, right) =>
+                    getXtreamDateValue(left) - getXtreamDateValue(right)
+            )
+            .map((item) => getXtreamTitle(item))
+            .slice(0, visibleComparisonSize);
+        const expectedVodNameAsc = [...vodFixture.items]
+            .map((item) => getXtreamTitle(item))
+            .sort(collator.compare)
+            .slice(0, visibleComparisonSize);
+        const expectedVodNameDesc = [...vodFixture.items]
+            .map((item) => getXtreamTitle(item))
+            .sort(collator.compare)
+            .reverse()
+            .slice(0, visibleComparisonSize);
+        const expectedSeriesNameAsc = [...seriesFixture.items]
+            .map((item) => getXtreamTitle(item))
+            .sort(collator.compare)
+            .slice(0, visibleComparisonSize);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow);
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            await expectVisibleGridTitles(app.mainWindow, expectedVodDateDesc);
+
+            await setContentSortMode(
+                app.mainWindow,
+                'Date Added (Oldest First)'
+            );
+            await expectVisibleGridTitles(app.mainWindow, expectedVodDateAsc);
+
+            await setContentSortMode(app.mainWindow, 'Name A-Z');
+            await expectVisibleGridTitles(app.mainWindow, expectedVodNameAsc);
+
+            await setContentSortMode(app.mainWindow, 'Name Z-A');
+            await expectVisibleGridTitles(app.mainWindow, expectedVodNameDesc);
+
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            await setContentSortMode(app.mainWindow, 'Name A-Z');
+            await expectVisibleGridTitles(
+                app.mainWindow,
+                expectedSeriesNameAsc
+            );
+
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            await expectVisibleGridTitles(
+                app.mainWindow,
+                expectedSeriesNameAsc
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('does not expose local sorting controls on Stalker category routes', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+
+            await expect(
+                app.mainWindow.getByRole('button', { name: 'Sort content' })
+            ).toHaveCount(0);
+            await expect(
+                app.mainWindow.getByRole('button', { name: 'Sort channels' })
+            ).toHaveCount(0);
+
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await expect(
+                app.mainWindow.getByRole('button', { name: 'Sort content' })
+            ).toHaveCount(0);
+
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await expect(
+                app.mainWindow.getByRole('button', { name: 'Sort content' })
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('keeps Xtream catalog page after opening VOD and series details, and resets grid scroll on page changes', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow);
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            await expectCatalogGridReady(app.mainWindow);
+            await expectCatalogScrollResetAfterNextPage(app.mainWindow);
+            await clickFirstGridListCard(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+\/[^/]+$/
+            );
+            await goBackFromDetail(app.mainWindow);
+            await expectCatalogPageQuery(app.mainWindow, '2');
+            await expectCatalogGridReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            await expectCatalogGridReady(app.mainWindow);
+            await expectCatalogScrollResetAfterNextPage(app.mainWindow);
+            await clickFirstGridListCard(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/series\/[^/]+\/[^/]+$/
+            );
+            await goBackFromDetail(app.mainWindow);
+            await expectCatalogPageQuery(app.mainWindow, '2');
+            await expectCatalogGridReady(app.mainWindow);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('resets Stalker VOD and series grid scroll when changing pages', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const vodFixture = await fetchStalkerCategoryFixture(request, 'vod');
+        const seriesFixture = await fetchStalkerCategoryFixture(
+            request,
+            'series'
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await clickCategoryByVisibleName(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            await expectCatalogGridReady(app.mainWindow);
+            await expectCatalogScrollResetAfterNextPage(app.mainWindow, {
+                expectContentChange: false,
+            });
+            await expectStalkerDetailBackPreservesCatalogPage(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await clickCategoryByVisibleName(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            await expectCatalogGridReady(app.mainWindow);
+            await expectCatalogScrollResetAfterNextPage(app.mainWindow, {
+                expectContentChange: false,
+            });
+            await expectStalkerDetailBackPreservesCatalogPage(app.mainWindow);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+const collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+});
+const visibleComparisonSize = 8;
+const xtreamCredentials = {
+    username: defaultXtreamUsername,
+    password: defaultXtreamPassword,
+};
+
+async function setLiveSortMode(
+    page: Page,
+    label: 'Server Order' | 'Name A-Z' | 'Name Z-A'
+): Promise<void> {
+    await page.getByRole('button', { name: 'Sort channels' }).click();
+    await page.getByRole('menuitem', { name: label, exact: true }).click();
+}
+
+async function setContentSortMode(
+    page: Page,
+    label:
+        | 'Date Added (Latest First)'
+        | 'Date Added (Oldest First)'
+        | 'Name A-Z'
+        | 'Name Z-A'
+): Promise<void> {
+    await page.getByRole('button', { name: 'Sort content' }).click();
+    await page.getByRole('menuitem', { name: label, exact: true }).click();
+}
+
+async function expectVisibleChannelTitles(
+    page: Page,
+    expectedTitles: string[]
+): Promise<void> {
+    await expect
+        .poll(async () => {
+            const titles = await visibleChannelTitles(page);
+            return titles.slice(0, expectedTitles.length);
+        })
+        .toEqual(expectedTitles);
+}
+
+async function expectVisibleGridTitles(
+    page: Page,
+    expectedTitles: string[]
+): Promise<void> {
+    await expect
+        .poll(async () => {
+            const titles = await visibleGridTitles(page);
+            return titles.slice(0, expectedTitles.length);
+        })
+        .toEqual(expectedTitles);
+}
+
+async function expectCatalogGridReady(page: Page): Promise<void> {
+    await expect(
+        page.locator('.category-content-layout mat-card').first()
+    ).toBeVisible({
+        timeout: 20000,
+    });
+}
+
+async function expectCatalogScrollResetAfterNextPage(
+    page: Page,
+    options: { expectContentChange?: boolean } = {}
+): Promise<string[]> {
+    const grid = catalogGrid(page);
+
+    await expect(grid).toBeVisible({ timeout: 20000 });
+    await ensureCatalogCanGoNext(page);
+    const rangeBefore = await catalogRangeText(page);
+    const titlesBefore = await visibleGridTitles(page);
+    await grid.evaluate((element: HTMLElement) => {
+        element.scrollTo({ top: element.scrollHeight });
+    });
+    await expect.poll(() => getCatalogGridScrollTop(page)).toBeGreaterThan(0);
+
+    await page
+        .locator('.category-content-header')
+        .getByRole('button', { name: 'Next page' })
+        .click();
+    await expectCatalogPageQuery(page, '2');
+    await expect.poll(() => catalogRangeText(page)).not.toBe(rangeBefore);
+    if (options.expectContentChange !== false) {
+        await expect
+            .poll(() => visibleGridTitles(page))
+            .not.toEqual(titlesBefore);
+    }
+    await expect.poll(() => getCatalogGridScrollTop(page)).toBeLessThan(2);
+    return visibleGridTitles(page);
+}
+
+async function expectStalkerDetailBackPreservesCatalogPage(
+    page: Page
+): Promise<void> {
+    const titlesOnPage = await visibleGridTitles(page);
+
+    await clickFirstGridListCard(page);
+    await goBackFromDetail(page);
+
+    await expectCatalogPageQuery(page, '2');
+    await expectCatalogGridReady(page);
+    await expect.poll(() => visibleGridTitles(page)).toEqual(titlesOnPage);
+}
+
+async function expectCatalogPageQuery(
+    page: Page,
+    expectedPage: string
+): Promise<void> {
+    await expect
+        .poll(() => new URL(page.url()).searchParams.get('page'))
+        .toBe(expectedPage);
+}
+
+async function goBackFromDetail(page: Page): Promise<void> {
+    const backButton = page
+        .locator('app-content-hero .hero__back-button')
+        .first();
+
+    await expect(backButton).toBeVisible({ timeout: 20000 });
+    try {
+        await backButton.click({ timeout: 5000 });
+    } catch {
+        await backButton.evaluate((button: HTMLButtonElement) =>
+            button.click()
+        );
+    }
+}
+
+async function clickCategoryByVisibleName(
+    page: Page,
+    categoryName: string
+): Promise<void> {
+    const category = page
+        .locator('app-workspace-context-panel .category-item:visible')
+        .filter({
+            has: page.locator('.nav-item-label', {
+                hasText: new RegExp(`^\\s*${escapeRegex(categoryName)}\\s*$`),
+            }),
+        })
+        .first();
+
+    await expect(category).toBeVisible({ timeout: 20000 });
+    await category.click();
+    await expect.poll(() => category.getAttribute('aria-current')).toBe('true');
+}
+
+function catalogGrid(page: Page) {
+    return page.locator('app-category-content-view app-grid-list').first();
+}
+
+async function ensureCatalogCanGoNext(page: Page): Promise<void> {
+    const header = page.locator('.category-content-header');
+    const nextButton = header.getByRole('button', { name: 'Next page' });
+
+    await expect(nextButton).toBeVisible({ timeout: 20000 });
+
+    if (await nextButton.isDisabled()) {
+        await header.getByRole('button', { name: 'Previous page' }).click();
+        await expect
+            .poll(() => new URL(page.url()).searchParams.get('page'))
+            .toBe(null);
+    }
+
+    await expect(nextButton).toBeEnabled({ timeout: 20000 });
+}
+
+async function catalogRangeText(page: Page): Promise<string> {
+    return (
+        (await page
+            .locator('.category-content-header .mat-mdc-paginator-range-label')
+            .first()
+            .textContent()) ?? ''
+    ).trim();
+}
+
+async function getCatalogGridScrollTop(page: Page): Promise<number> {
+    return catalogGrid(page).evaluate((element: HTMLElement) =>
+        Math.round(element.scrollTop)
+    );
+}
+
+function escapeRegex(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+async function visibleChannelTitles(page: Page): Promise<string[]> {
+    return page
+        .locator('[data-test-id="channel-item"] .channel-name')
+        .allInnerTexts()
+        .then((titles: string[]) =>
+            uniqueTitles(titles.map((title) => title.trim()))
+        );
+}
+
+async function visibleGridTitles(page: Page): Promise<string[]> {
+    return page
+        .locator('.category-content-layout mat-card .title')
+        .allInnerTexts()
+        .then((titles: string[]) =>
+            uniqueTitles(titles.map((title) => title.trim()))
+        );
+}
+
+function uniqueTitles(titles: string[]): string[] {
+    const seen = new Set<string>();
+
+    return titles.filter((title) => {
+        if (seen.has(title)) {
+            return false;
+        }
+
+        seen.add(title);
+        return true;
+    });
+}
diff --git a/apps/electron-backend-e2e/src/category-management.e2e.ts b/apps/electron-backend-e2e/src/category-management.e2e.ts
new file mode 100644
index 0000000..c4b9c8a
--- /dev/null
+++ b/apps/electron-backend-e2e/src/category-management.e2e.ts
@@ -0,0 +1,388 @@
+import { Locator, Page } from '@playwright/test';
+import {
+    addXtreamPortal,
+    clickCategoryById,
+    closeElectronApp,
+    expect,
+    launchElectronApp,
+    openSources,
+    openWorkspaceSection,
+    refreshSource,
+    resetMockServers,
+    restartElectronApp,
+    sourceRowByTitle,
+    test,
+    waitForSourceRowIdle,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+
+test.describe('Electron Xtream Category Management', () => {
+    test('hides and restores categories, supports search and bulk actions, and persists hidden selections after refresh', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const portalName = 'Category Managed Xtream';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: portalName,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            // Wait for the route to settle on the live TV section so that
+            // the sidebar shows live categories (not VOD/series from a
+            // previous section) before we read from it.
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/live/
+            );
+
+            const targetCategory = await pickSidebarCategory(app.mainWindow);
+
+            let dialog = await openManageCategoriesDialog(app.mainWindow);
+
+            await dialog
+                .getByRole('button', {
+                    name: 'Deselect All',
+                    exact: true,
+                })
+                .click();
+            await expect(
+                dialog.locator('.category-item mat-checkbox input:checked')
+            ).toHaveCount(0);
+
+            await dialog
+                .getByRole('button', {
+                    name: 'Select All',
+                    exact: true,
+                })
+                .click();
+            await expect(
+                dialog
+                    .locator('.category-item mat-checkbox input:checked')
+                    .first()
+            ).toBeVisible();
+
+            await dialog
+                .locator('input[type="search"]')
+                .fill(targetCategory.name);
+            await toggleManagedCategory(dialog, targetCategory, false);
+            await dialog
+                .getByRole('button', { name: 'Save', exact: true })
+                .click();
+            await app.mainWindow.waitForSelector('mat-dialog-container', {
+                state: 'detached',
+            });
+
+            await expect(
+                sidebarCategoryById(app.mainWindow, targetCategory.id)
+            ).toHaveCount(0);
+
+            await openSources(app.mainWindow);
+            await refreshSource(app.mainWindow, portalName, { confirm: true });
+            await openSources(app.mainWindow);
+            await waitForSourceRowIdle(app.mainWindow, portalName);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, portalName).first().click();
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/live/
+            );
+            await expect(
+                sidebarCategoryById(app.mainWindow, targetCategory.id)
+            ).toHaveCount(0);
+
+            dialog = await openManageCategoriesDialog(app.mainWindow);
+            await dialog
+                .locator('input[type="search"]')
+                .fill(targetCategory.name);
+            await toggleManagedCategory(dialog, targetCategory, true);
+            await dialog
+                .getByRole('button', { name: 'Save', exact: true })
+                .click();
+            await app.mainWindow.waitForSelector('mat-dialog-container', {
+                state: 'detached',
+            });
+
+            dialog = await openManageCategoriesDialog(app.mainWindow);
+            await dialog
+                .locator('input[type="search"]')
+                .fill(targetCategory.name);
+            const restoredRows = dialog.locator('.category-item');
+            await expect(restoredRows).toHaveCount(1, { timeout: 15000 });
+            await expect(
+                restoredRows.first().locator('mat-checkbox input')
+            ).toBeChecked();
+            await dialog
+                .getByRole('button', { name: 'Close', exact: true })
+                .click();
+            await app.mainWindow.waitForSelector('mat-dialog-container', {
+                state: 'detached',
+            });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('persists hidden selections after refreshing from the workspace header', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const portalName = 'Header Refresh Xtream';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: portalName,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/live/
+            );
+
+            const targetCategory = await pickSidebarCategory(app.mainWindow);
+            const dialog = await openManageCategoriesDialog(app.mainWindow);
+
+            await dialog
+                .getByRole('button', {
+                    name: 'Deselect All',
+                    exact: true,
+                })
+                .click();
+            await expect(
+                dialog.locator('.category-item mat-checkbox input:checked')
+            ).toHaveCount(0);
+
+            await dialog
+                .locator('input[type="search"]')
+                .fill(targetCategory.name);
+            await toggleManagedCategory(dialog, targetCategory, true);
+            await dialog
+                .getByRole('button', { name: 'Save', exact: true })
+                .click();
+            await app.mainWindow.waitForSelector('mat-dialog-container', {
+                state: 'detached',
+            });
+
+            await expect(
+                sidebarCategoryById(app.mainWindow, targetCategory.id)
+            ).toBeVisible();
+
+            await refreshFromWorkspaceHeader(app.mainWindow);
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/live/
+            );
+            await expectVisibleSidebarCategoryNames(app.mainWindow, [
+                targetCategory.name,
+            ]);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, portalName).first().click();
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/live/
+            );
+            await expectVisibleSidebarCategoryNames(app.mainWindow, [
+                targetCategory.name,
+            ]);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+async function openManageCategoriesDialog(page: Page) {
+    await page.getByRole('button', { name: 'Manage categories' }).click();
+    const dialog = page.locator('mat-dialog-container').last();
+
+    await expect(dialog).toBeVisible();
+    await expect(
+        dialog.getByRole('button', { name: 'Select All', exact: true })
+    ).toBeVisible();
+    // Wait for the category list to render — Angular needs a CD cycle after
+    // isLoading() flips to false before the @for items are painted.
+    await expect(dialog.locator('.category-item').first()).toBeVisible({
+        timeout: 15000,
+    });
+    return dialog;
+}
+
+async function refreshFromWorkspaceHeader(page: Page): Promise<void> {
+    await page
+        .getByRole('button', { name: 'Refresh playlist', exact: true })
+        .click();
+
+    const dialog = page.locator('mat-dialog-container');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: 'Yes', exact: true }).click();
+    await page.waitForSelector('mat-dialog-container', { state: 'detached' });
+}
+
+function sidebarCategoryById(page: Page, categoryId: string): Locator {
+    return page.locator(
+        `app-workspace-context-panel .category-item[data-category-id="${categoryId}"]`
+    );
+}
+
+async function expectVisibleSidebarCategoryIds(
+    page: Page,
+    expectedIds: string[]
+): Promise<void> {
+    const categories = page.locator(
+        'app-workspace-context-panel .category-item:visible'
+    );
+    const actualIds: string[] = [];
+    const count = await categories.count();
+
+    for (let index = 0; index < count; index += 1) {
+        const categoryId = await categories
+            .nth(index)
+            .getAttribute('data-category-id');
+
+        if (categoryId) {
+            actualIds.push(categoryId.trim());
+        }
+    }
+
+    expect(actualIds).toEqual(expectedIds);
+}
+
+async function expectVisibleSidebarCategoryNames(
+    page: Page,
+    expectedNames: string[]
+): Promise<void> {
+    await expect
+        .poll(async () => {
+            const categories = page.locator(
+                'app-workspace-context-panel .category-item:visible'
+            );
+            const actualNames: string[] = [];
+            const count = await categories.count();
+
+            for (let index = 0; index < count; index += 1) {
+                const categoryName =
+                    (
+                        await categories
+                            .nth(index)
+                            .locator('.nav-item-label')
+                            .textContent()
+                    )?.trim() ?? '';
+
+                if (categoryName) {
+                    actualNames.push(categoryName);
+                }
+            }
+
+            return actualNames;
+        })
+        .toEqual(expectedNames);
+}
+
+async function pickSidebarCategory(
+    page: Page
+): Promise<{ id: string; itemCount: number; name: string }> {
+    let preferredCandidate:
+        | { id: string; itemCount: number; name: string }
+        | null = null;
+
+    await expect
+        .poll(async () => {
+            const categories = page.locator(
+                'app-workspace-context-panel .category-item:visible'
+            );
+            const count = await categories.count();
+            const candidates: Array<{
+                id: string;
+                itemCount: number;
+                name: string;
+            }> = [];
+
+            for (let index = 0; index < count; index += 1) {
+                const category = categories.nth(index);
+                const id =
+                    (await category.getAttribute('data-category-id'))?.trim() ??
+                    '';
+                const name =
+                    (
+                        await category.locator('.nav-item-label').textContent()
+                    )?.trim() ?? '';
+                const countText =
+                    (
+                        await category.locator('.item-count').textContent()
+                    )?.trim() ?? '';
+                const itemCount = Number.parseInt(countText, 10) || 0;
+
+                if (id && name && itemCount > 0) {
+                    candidates.push({ id, itemCount, name });
+                }
+            }
+
+            if (candidates.length === 0) {
+                preferredCandidate = null;
+                return false;
+            }
+
+            const nameCounts = new Map<string, number>();
+            for (const candidate of candidates) {
+                nameCounts.set(
+                    candidate.name,
+                    (nameCounts.get(candidate.name) ?? 0) + 1
+                );
+            }
+
+            preferredCandidate =
+                candidates.find(
+                    (candidate) => nameCounts.get(candidate.name) === 1
+                ) ?? candidates[0];
+
+            return preferredCandidate !== null;
+        })
+        .toBe(true, {
+            message: 'No visible Xtream category with content was found.',
+            timeout: 15000,
+        });
+
+    return preferredCandidate!;
+}
+
+async function toggleManagedCategory(
+    dialog: Locator,
+    targetCategory: {
+        id: string;
+        itemCount: number;
+        name: string;
+    },
+    shouldBeSelected: boolean
+): Promise<void> {
+    void targetCategory.id;
+    const categoryRows = dialog.locator('.category-item');
+    await expect(categoryRows).toHaveCount(1, { timeout: 15000 });
+    const categoryRow = categoryRows.first();
+    const checkbox = categoryRow.locator('mat-checkbox input');
+
+    await expect(categoryRow).toBeVisible({ timeout: 15000 });
+    if (shouldBeSelected) {
+        await checkbox.check();
+        await expect(checkbox).toBeChecked();
+        return;
+    }
+
+    await checkbox.uncheck();
+    await expect(checkbox).not.toBeChecked();
+}
diff --git a/apps/electron-backend-e2e/src/dashboard-activation.e2e.ts b/apps/electron-backend-e2e/src/dashboard-activation.e2e.ts
new file mode 100644
index 0000000..007a473
--- /dev/null
+++ b/apps/electron-backend-e2e/src/dashboard-activation.e2e.ts
@@ -0,0 +1,257 @@
+import { Page } from '@playwright/test';
+import {
+    addXtreamPortal,
+    clickCategoryByNameExact,
+    clickFirstGridListCard,
+    closeElectronApp,
+    defaultXtreamPassword,
+    defaultXtreamUsername,
+    expectPathname,
+    expect,
+    goToDashboard,
+    launchElectronApp,
+    openWorkspaceSection,
+    resetMockServers,
+    test,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+import {
+    fetchXtreamLiveFixture,
+    fetchXtreamSeriesFixture,
+    fetchXtreamVodFixture,
+    getXtreamTitle,
+    pickDistinctTitles,
+} from './portal-mock-fixtures';
+
+test.describe('Dashboard Activation', () => {
+    test('opens live favorites in the collection route and movies/series in global collection detail views from the dashboard', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const liveFixture = await fetchXtreamLiveFixture(
+            request,
+            xtreamCredentials
+        );
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const [liveTitle] = pickDistinctTitles(
+            liveFixture.items,
+            getXtreamTitle
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Xtream Dashboard Activation Source',
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                liveFixture.categoryName
+            );
+            await toggleFavoriteForChannel(app.mainWindow, liveTitle);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            const movieTitle = await clickFirstGridListCard(app.mainWindow);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await playCurrentDetail(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            const seriesTitle = await clickFirstGridListCard(app.mainWindow);
+            await playFirstSeriesEpisode(app.mainWindow);
+
+            await goToDashboard(app.mainWindow);
+
+            await expectDashboardRail(app.mainWindow, 'dashboard-global-favorites-rail');
+            await dashboardRailCardByTitle(
+                app.mainWindow,
+                'dashboard-global-favorites-rail',
+                liveTitle
+            ).click();
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/favorites$/
+            );
+            await expect(
+                app.mainWindow.locator('.player-toolbar .close-btn').first()
+            ).toBeVisible({ timeout: 20000 });
+
+            await app.mainWindow.goBack();
+            await app.mainWindow.waitForURL(/\/workspace\/dashboard$/);
+
+            await dashboardRailCardByTitle(
+                app.mainWindow,
+                'dashboard-global-favorites-rail',
+                movieTitle
+            ).click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-favorites$/,
+                title: movieTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/dashboard$/);
+
+            await dashboardRailCardByTitle(
+                app.mainWindow,
+                'dashboard-recently-watched-rail',
+                movieTitle
+            ).click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-recent$/,
+                title: movieTitle,
+            });
+
+            await app.mainWindow.goBack();
+            await expectPathname(app.mainWindow, /\/workspace\/dashboard$/);
+
+            await dashboardRailCardByTitle(
+                app.mainWindow,
+                'dashboard-recently-watched-rail',
+                seriesTitle
+            ).click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-recent$/,
+                title: seriesTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/dashboard$/);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+const xtreamCredentials = {
+    username: defaultXtreamUsername,
+    password: defaultXtreamPassword,
+};
+
+async function expectDashboardRail(page: Page, railTestId: string): Promise<void> {
+    await expect(page.locator(`[data-test-id="${railTestId}"]`)).toBeVisible({
+        timeout: 20000,
+    });
+}
+
+function dashboardRailCardByTitle(
+    page: Page,
+    railTestId: string,
+    title: string
+) {
+    return page.locator(`[data-test-id="${railTestId}-card"]`).filter({
+        hasText: title,
+    }).first();
+}
+
+async function goBackFromDetail(page: Page): Promise<void> {
+    const backButton = page
+        .locator('app-content-hero .hero__back-button')
+        .first();
+
+    await expect(backButton).toBeVisible({ timeout: 20000 });
+    try {
+        await backButton.click({ timeout: 5000 });
+    } catch {
+        await backButton.evaluate((button: HTMLButtonElement) =>
+            button.click()
+        );
+    }
+}
+
+async function addCurrentDetailToFavorites(page: Page): Promise<void> {
+    const addButton = page.locator('button.favorite-btn').first();
+
+    await expect(addButton).toBeVisible({ timeout: 20000 });
+    await addButton.click();
+    await expect(
+        page.locator('button.favorite-btn--active').first()
+    ).toBeVisible({
+        timeout: 20000,
+    });
+}
+
+async function expectInlineCollectionDetail(
+    page: Page,
+    params: {
+        pathname: RegExp;
+        title: string;
+    }
+): Promise<void> {
+    await expectPathname(page, params.pathname);
+    await expect(page.locator('app-workspace-context-panel')).toHaveCount(0);
+    await expect(page.locator('app-content-hero')).toContainText(params.title);
+    await expect(
+        page.locator('app-content-hero .hero__back-button').first()
+    ).toBeVisible({ timeout: 20000 });
+}
+
+async function playCurrentDetail(page: Page): Promise<void> {
+    const playButton = page.locator('button.play-btn').first();
+
+    await expect(playButton).toBeVisible({ timeout: 20000 });
+    await playButton.click();
+}
+
+async function playFirstSeriesEpisode(page: Page): Promise<void> {
+    const seasonCard = page.locator('.season-card').first();
+    const episodeCard = page
+        .locator('.episode-card, .episode-list-item')
+        .first();
+
+    await expect
+        .poll(
+            async () =>
+                (await seasonCard.count()) + (await episodeCard.count()),
+            { timeout: 20000 }
+        )
+        .toBeGreaterThan(0);
+
+    if ((await seasonCard.count()) > 0) {
+        await seasonCard.scrollIntoViewIfNeeded();
+        await expect(seasonCard).toBeVisible({ timeout: 20000 });
+        await seasonCard.click();
+    }
+
+    await episodeCard.scrollIntoViewIfNeeded();
+    await expect(episodeCard).toBeVisible({ timeout: 20000 });
+    await episodeCard.click();
+}
+
+async function toggleFavoriteForChannel(
+    page: Page,
+    title: string
+): Promise<void> {
+    const item = page
+        .locator('[data-test-id="channel-item"]')
+        .filter({ hasText: title })
+        .first();
+
+    await expect(item).toBeVisible({ timeout: 20000 });
+    await item.hover();
+    await item.locator('.favorite-button').first().click();
+    await expect(item.locator('.favorite-button mat-icon').first()).toHaveText(
+        /star/
+    );
+}
diff --git a/apps/electron-backend-e2e/src/electron-test-fixtures.ts b/apps/electron-backend-e2e/src/electron-test-fixtures.ts
new file mode 100644
index 0000000..a566dce
--- /dev/null
+++ b/apps/electron-backend-e2e/src/electron-test-fixtures.ts
@@ -0,0 +1,1644 @@
+import {
+    _electron as electron,
+    APIRequestContext,
+    ElectronApplication,
+    expect,
+    Locator,
+    Page,
+    test as base,
+} from '@playwright/test';
+import { createServer, Server } from 'http';
+import {
+    existsSync,
+    mkdtempSync,
+    readFileSync,
+    rmSync,
+    writeFileSync,
+} from 'fs';
+import { tmpdir } from 'os';
+import { join, resolve } from 'path';
+
+export const workspaceRoot = resolve(__dirname, '../../..');
+export const electronMainPath = join(
+    workspaceRoot,
+    'dist/apps/electron-backend/main.js'
+);
+export const packagedRendererIndexPath = join(
+    workspaceRoot,
+    'dist/apps/web/index.html'
+);
+export const m3uFixturePath = join(
+    workspaceRoot,
+    'apps/web-e2e/src/fixtures/test.m3u'
+);
+export const stalkerMockPort = process.env['MOCK_PORT'] ?? '3210';
+export const xtreamMockPort = process.env['XTREAM_MOCK_PORT'] ?? '3211';
+export const stalkerMockServer = `http://localhost:${stalkerMockPort}`;
+export const xtreamMockServer = `http://localhost:${xtreamMockPort}`;
+export const defaultXtreamPortalName = 'Mock Xtream Portal';
+export const defaultStalkerPortalName = 'Mock Stalker Portal';
+export const defaultXtreamUsername = 'user1';
+export const defaultXtreamPassword = 'pass1';
+export const defaultStalkerMacAddress = '00:1A:79:00:00:01';
+
+export type PortalProvider = 'stalker' | 'xtream';
+
+export type M3uTestChannel = {
+    groupTitle?: string;
+    logo?: string;
+    name: string;
+    tvgId?: string;
+    tvgName?: string;
+    url: string;
+};
+
+export type MutableTextServer = {
+    close: () => Promise<void>;
+    origin: string;
+    resourceUrl: string;
+    setBody: (body: string) => void;
+};
+
+type ElectronFixtures = {
+    dataDir: string;
+};
+
+type LaunchElectronAppOptions = {
+    env?: Record<string, string | undefined>;
+};
+
+export type PortalDebugEvent = {
+    durationMs: number;
+    operation: string;
+    provider: PortalProvider;
+    request: unknown;
+    requestId: string;
+    response?: unknown;
+    startedAt: string;
+    status: 'success' | 'error';
+    transport: 'electron-main' | 'electron-renderer' | 'pwa-http';
+};
+
+export type DbOperationEvent = {
+    operationId?: string;
+    operation: string;
+    playlistId?: string;
+    status: 'started' | 'progress' | 'completed' | 'cancelled' | 'error';
+    phase?: string;
+    current?: number;
+    total?: number;
+    increment?: number;
+    error?: string;
+};
+
+declare global {
+    interface Window {
+        __dbOperationEvents?: DbOperationEvent[];
+        __dbOperationUnsubscribe?: (() => void) | undefined;
+        __portalDebugEvents?: PortalDebugEvent[];
+        __portalDebugUnsubscribe?: (() => void) | undefined;
+        __rendererFrameCount?: number;
+        __rendererFrameRequestId?: number;
+    }
+}
+
+export type LaunchedElectronApp = {
+    electronApp: ElectronApplication;
+    mainWindow: Page;
+};
+
+export const test = base.extend<ElectronFixtures>({
+    dataDir: async ({}, use) => {
+        const dataDir = mkdtempSync(join(tmpdir(), 'iptvnator-electron-e2e-'));
+
+        await use(dataDir);
+
+        rmSync(dataDir, { force: true, recursive: true });
+    },
+});
+
+export { expect };
+
+export async function launchElectronApp(
+    dataDir: string,
+    options: LaunchElectronAppOptions = {}
+): Promise<LaunchedElectronApp> {
+    if (!existsSync(electronMainPath)) {
+        throw new Error(
+            `Electron build not found at ${electronMainPath}. Run the build before executing the E2E suite.`
+        );
+    }
+    assertPackagedRendererBuildIsElectronSafe();
+
+    const args = [electronMainPath];
+
+    if (process.platform === 'linux' && process.env['CI']) {
+        args.unshift('--no-sandbox', '--disable-gpu');
+    }
+
+    const electronApp = await electron.launch({
+        args,
+        env: {
+            ...process.env,
+            ...options.env,
+            ELECTRON_IS_DEV: '0',
+            IPTVNATOR_E2E_DATA_DIR: dataDir,
+            NODE_ENV: 'test',
+        },
+    });
+
+    const mainWindow = await findMainWindow(electronApp);
+    await waitForAppReady(mainWindow);
+    await startPortalDebugCapture(mainWindow);
+    await startDbOperationCapture(mainWindow);
+    await startRendererFrameCapture(mainWindow);
+
+    return {
+        electronApp,
+        mainWindow,
+    };
+}
+
+export async function closeElectronApp(
+    app: LaunchedElectronApp
+): Promise<void> {
+    try {
+        await app.electronApp.close();
+    } catch (error) {
+        console.warn('Failed to close Electron app cleanly:', error);
+    }
+}
+
+function assertPackagedRendererBuildIsElectronSafe(): void {
+    if (!existsSync(packagedRendererIndexPath)) {
+        throw new Error(
+            `Renderer build not found at ${packagedRendererIndexPath}. Run pnpm nx run electron-backend:build-e2e before executing the Electron E2E suite.`
+        );
+    }
+
+    const indexHtml = readFileSync(packagedRendererIndexPath, 'utf8');
+    const baseHrefMatch = indexHtml.match(/<base\s+href="([^"]*)"/i);
+    const baseHref = baseHrefMatch?.[1] ?? '<missing>';
+
+    if (baseHref !== './') {
+        throw new Error(
+            `Renderer build at ${packagedRendererIndexPath} is not file-safe for packaged Electron. Found base href ${JSON.stringify(baseHref)}. Run pnpm nx run electron-backend:build-e2e or use an Electron E2E Nx target so dist/apps/web is rebuilt with the electron-e2e configuration.`
+        );
+    }
+}
+
+async function findMainWindow(app: ElectronApplication): Promise<Page> {
+    await new Promise((resolvePromise) => setTimeout(resolvePromise, 2000));
+
+    const windows = app.windows();
+
+    for (const window of windows) {
+        const title = await window.title();
+
+        if (!title.includes('DevTools')) {
+            return window;
+        }
+    }
+
+    return app.firstWindow();
+}
+
+async function waitForAppReady(page: Page): Promise<void> {
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForSelector('app-root', { timeout: 30000 });
+    try {
+        await page.waitForFunction(
+            () => {
+                const appRoot = document.querySelector('app-root');
+
+                return Boolean(appRoot && appRoot.innerHTML.trim().length > 0);
+            },
+            { timeout: 30000 }
+        );
+    } catch (error) {
+        const diagnostics = await page.evaluate(() => ({
+            appRootLength:
+                document.querySelector('app-root')?.innerHTML.trim().length ?? 0,
+            baseHref:
+                document
+                    .querySelector('base')
+                    ?.getAttribute('href') ?? '<missing>',
+            readyState: document.readyState,
+            title: document.title,
+            url: location.href,
+        }));
+
+        const reason =
+            error instanceof Error ? error.message : 'unknown startup error';
+
+        throw new Error(
+            `Electron app did not render visible app-root within 30000ms. ${reason}. Diagnostics: ${JSON.stringify(
+                diagnostics
+            )}`
+        );
+    }
+}
+
+export async function openAddPlaylistDialog(page: Page): Promise<void> {
+    await page.getByRole('button', { name: 'Add playlist' }).click();
+    await expect(page.locator('mat-dialog-container').last()).toBeVisible();
+}
+
+async function getActiveDialog(page: Page): Promise<Locator> {
+    const dialog = page.locator('mat-dialog-container').last();
+    await expect(dialog).toBeVisible();
+    return dialog;
+}
+
+export async function stubNativePlaylistFileDialog(
+    electronApp: ElectronApplication,
+    filePath: string
+): Promise<void> {
+    await electronApp.evaluate(async ({ dialog }, selectedFilePath) => {
+        dialog.showOpenDialog = async () =>
+            ({
+                canceled: false,
+                filePaths: [selectedFilePath],
+            }) as any;
+    }, filePath);
+}
+
+export async function importM3uPlaylistFromNativeDialog(
+    app: LaunchedElectronApp,
+    filePath: string
+): Promise<void> {
+    await openAddPlaylistDialog(app.mainWindow);
+    const dialog = await getActiveDialog(app.mainWindow);
+    await clickDialogCategoryOption(dialog, /^m3u$/i);
+    await clickDialogSubtypeOption(
+        dialog,
+        /add\s+via\s+file\s+upload/i,
+        'mat-button-toggle[value="file"]'
+    );
+    const fileInput = dialog.locator('input[type="file"][name="playlist"]');
+
+    await fileInput.evaluate((element, selectedFilePath) => {
+        (element as HTMLInputElement).dataset.filePathOverride =
+            selectedFilePath;
+    }, filePath);
+    await fileInput.setInputFiles(filePath);
+    await expect(
+        dialog.getByRole('button', { name: /add playlist/i })
+    ).toBeEnabled({ timeout: 10000 });
+    await dialog.getByRole('button', { name: /add playlist/i }).click();
+    await dialog.waitFor({ state: 'detached' });
+}
+
+export async function addXtreamPortal(
+    page: Page,
+    options: {
+        name?: string;
+        password?: string;
+        serverUrl?: string;
+        username?: string;
+    } = {}
+): Promise<void> {
+    const {
+        name = defaultXtreamPortalName,
+        password = defaultXtreamPassword,
+        serverUrl = xtreamMockServer,
+        username = defaultXtreamUsername,
+    } = options;
+
+    await openAddPlaylistDialog(page);
+    const dialog = await getActiveDialog(page);
+    await clickDialogCategoryOption(
+        dialog,
+        /^xtream$/i,
+        'mat-button-toggle[value="xtream"]'
+    );
+
+    await setInputValue(dialog.locator('#title'), name);
+    await setInputValue(dialog.locator('#serverUrl'), serverUrl);
+    await setInputValue(dialog.locator('#username'), username);
+    await setInputValue(dialog.locator('#password'), password);
+    const addButton = dialog
+        .getByRole('button', { name: /^(add|add playlist)$/i })
+        .last();
+
+    await expect(addButton).toBeEnabled({ timeout: 10000 });
+    await addButton.click();
+    await dialog.waitFor({ state: 'detached' });
+}
+
+async function setInputValue(input: Locator, value: string): Promise<void> {
+    await input.fill('');
+    await input.fill(value);
+
+    if ((await input.inputValue()) === value) {
+        return;
+    }
+
+    await input.click();
+    await input.press('Control+A');
+    await input.press('Backspace');
+    await input.type(value);
+
+    if ((await input.inputValue()) === value) {
+        return;
+    }
+
+    await input.evaluate((element, nextValue) => {
+        const inputElement = element as HTMLInputElement;
+        inputElement.value = nextValue;
+        inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+        inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+        inputElement.dispatchEvent(new Event('blur', { bubbles: true }));
+    }, value);
+
+    await expect(input).toHaveValue(value);
+}
+
+async function clickDialogCategoryOption(
+    dialog: Locator,
+    label: RegExp,
+    legacySelector?: string
+): Promise<void> {
+    await clickDialogSegmentedOption(
+        dialog,
+        'Playlist category',
+        label,
+        legacySelector
+    );
+}
+
+async function clickDialogSubtypeOption(
+    dialog: Locator,
+    label: RegExp,
+    legacySelector?: string
+): Promise<void> {
+    await clickDialogSegmentedOption(
+        dialog,
+        'M3U source',
+        label,
+        legacySelector
+    );
+}
+
+async function clickDialogSegmentedOption(
+    dialog: Locator,
+    tablistLabel: string,
+    label: RegExp,
+    legacySelector?: string
+): Promise<void> {
+    const tablist = dialog
+        .locator(`[role="tablist"][aria-label="${tablistLabel}"]`)
+        .first();
+
+    if ((await tablist.count()) > 0) {
+        const optionByTabRole = tablist
+            .getByRole('tab', { name: label })
+            .first();
+
+        if ((await optionByTabRole.count()) > 0) {
+            await optionByTabRole.click();
+            return;
+        }
+    }
+
+    const optionByGlobalTabRole = dialog
+        .getByRole('tab', { name: label })
+        .first();
+
+    if ((await optionByGlobalTabRole.count()) > 0) {
+        await optionByGlobalTabRole.click();
+        return;
+    }
+
+    const optionByButtonRole = dialog
+        .getByRole('button', { name: label })
+        .first();
+
+    if ((await optionByButtonRole.count()) > 0) {
+        await optionByButtonRole.click();
+        return;
+    }
+
+    if (!legacySelector) {
+        throw new Error(
+            `Could not find dialog option matching ${label} in "${tablistLabel}".`
+        );
+    }
+
+    await dialog.locator(legacySelector).click();
+}
+
+export async function addStalkerPortal(
+    page: Page,
+    options: {
+        macAddress?: string;
+        name?: string;
+        portalUrl?: string;
+    } = {}
+): Promise<void> {
+    const {
+        macAddress = defaultStalkerMacAddress,
+        name = defaultStalkerPortalName,
+        portalUrl = `${stalkerMockServer}/portal.php`,
+    } = options;
+
+    await openAddPlaylistDialog(page);
+    const dialog = await getActiveDialog(page);
+    await clickDialogCategoryOption(
+        dialog,
+        /^stalker$/i,
+        'mat-button-toggle[value="stalker"]'
+    );
+
+    await setInputValue(dialog.locator('input#title'), name);
+    await setInputValue(dialog.locator('input#portalUrl'), portalUrl);
+    await setInputValue(dialog.locator('input#macAddress'), macAddress);
+    const addButton = dialog
+        .getByRole('button', { name: /^(add|add playlist)$/i })
+        .last();
+
+    await expect(addButton).toBeEnabled({ timeout: 10000 });
+    await addButton.click();
+    await dialog.waitFor({ state: 'detached' });
+}
+
+export async function openSettings(page: Page): Promise<void> {
+    await page.locator('a[href$="/workspace/settings"]').click();
+    await expect(page.getByTestId('settings-container')).toBeVisible();
+}
+
+export async function enableRemoteControl(
+    page: Page,
+    port: number
+): Promise<void> {
+    const remoteControlCheckbox = page.locator(
+        'mat-checkbox[formcontrolname="remoteControl"] input[type="checkbox"]'
+    );
+
+    await remoteControlCheckbox.scrollIntoViewIfNeeded();
+    await remoteControlCheckbox.check();
+    await page.locator('#remoteControlPort').fill(String(port));
+}
+
+export async function saveSettings(page: Page): Promise<void> {
+    const saveButton = page.getByTestId('save-settings');
+
+    await saveButton.click();
+    await expect(saveButton).toBeDisabled();
+    await page.waitForTimeout(300);
+}
+
+export async function goToDashboard(page: Page): Promise<void> {
+    const dashboardLink = page
+        .locator('a.brand[href$="/workspace/dashboard"]')
+        .first();
+
+    await expect(dashboardLink).toBeVisible();
+    await dashboardLink.click();
+    await page.waitForURL(/\/workspace\/dashboard$/);
+}
+
+export async function openSources(page: Page): Promise<void> {
+    await page.getByRole('link', { name: 'Sources', exact: true }).click();
+    await page.waitForURL(/\/workspace\/sources(?:\?.*)?$/);
+}
+
+export async function restartElectronApp(
+    app: LaunchedElectronApp,
+    dataDir: string,
+    options: LaunchElectronAppOptions = {}
+): Promise<LaunchedElectronApp> {
+    await closeElectronApp(app);
+    return launchElectronApp(dataDir, options);
+}
+
+export async function importM3uPlaylistFromUrl(
+    page: Page,
+    playlistUrl: string
+): Promise<void> {
+    await openAddPlaylistDialog(page);
+    const dialog = await getActiveDialog(page);
+    await clickDialogCategoryOption(dialog, /^m3u$/i);
+    await clickDialogSubtypeOption(
+        dialog,
+        /add\s+via\s+url/i,
+        'mat-button-toggle[value="url"]'
+    );
+
+    await setInputValue(
+        dialog.locator('input[formcontrolname="playlistUrl"]'),
+        playlistUrl
+    );
+    await dialog.getByRole('button', { name: /Add playlist/i }).click();
+    await dialog.waitFor({ state: 'detached' });
+}
+
+export function buildM3uContent(channels: M3uTestChannel[]): string {
+    const lines = ['#EXTM3U'];
+
+    for (const channel of channels) {
+        const attributes = [
+            channel.tvgId ? `tvg-id="${channel.tvgId}"` : '',
+            channel.tvgName ? `tvg-name="${channel.tvgName}"` : '',
+            channel.logo ? `tvg-logo="${channel.logo}"` : '',
+            channel.groupTitle ? `group-title="${channel.groupTitle}"` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+
+        lines.push(
+            `#EXTINF:-1${attributes ? ` ${attributes}` : ''},${channel.name}`
+        );
+        lines.push(channel.url);
+    }
+
+    return `${lines.join('\n')}\n`;
+}
+
+export function writeTemporaryM3uFile(
+    dataDir: string,
+    fileName: string,
+    channels: M3uTestChannel[]
+): string {
+    const filePath = join(dataDir, fileName);
+    writeFileSync(filePath, buildM3uContent(channels), 'utf8');
+    return filePath;
+}
+
+export function parseM3uFixture(filePath: string): M3uTestChannel[] {
+    const content = readFileSync(filePath, 'utf8');
+    const items: M3uTestChannel[] = [];
+    const lines = content.split(/\r?\n/);
+    let pending:
+        | {
+              groupTitle?: string;
+              logo?: string;
+              name: string;
+              tvgId?: string;
+              tvgName?: string;
+          }
+        | undefined;
+
+    for (const rawLine of lines) {
+        const line = rawLine.trim();
+        if (!line) {
+            continue;
+        }
+
+        if (line.startsWith('#EXTINF:')) {
+            pending = {
+                groupTitle:
+                    line.match(/group-title="([^"]*)"/)?.[1]?.trim() ?? '',
+                logo: line.match(/tvg-logo="([^"]*)"/)?.[1]?.trim() ?? '',
+                name: line.split(',').at(-1)?.trim() ?? '',
+                tvgId: line.match(/tvg-id="([^"]*)"/)?.[1]?.trim() ?? '',
+                tvgName: line.match(/tvg-name="([^"]*)"/)?.[1]?.trim() ?? '',
+            };
+            continue;
+        }
+
+        if (!pending || line.startsWith('#')) {
+            continue;
+        }
+
+        items.push({
+            ...pending,
+            url: line,
+        });
+        pending = undefined;
+    }
+
+    return items.filter((item) => item.name.length > 0);
+}
+
+export async function createMutableTextServer(
+    initialBody: string,
+    options: {
+        contentType?: string;
+        resourcePath?: string;
+    } = {}
+): Promise<MutableTextServer> {
+    const {
+        contentType = 'text/plain; charset=utf-8',
+        resourcePath = '/resource.txt',
+    } = options;
+    let body = initialBody;
+
+    const server = createServer((req, res) => {
+        const pathname = (req.url ?? '').split('?')[0];
+
+        if (pathname !== resourcePath) {
+            res.writeHead(404, {
+                'Content-Type': 'application/json; charset=utf-8',
+            });
+            res.end(JSON.stringify({ error: 'Not found' }));
+            return;
+        }
+
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(body);
+    });
+
+    await listenOnRandomPort(server);
+    const address = server.address();
+
+    if (!address || typeof address === 'string') {
+        throw new Error('Failed to resolve the temporary HTTP server address.');
+    }
+
+    const origin = `http://127.0.0.1:${address.port}`;
+
+    return {
+        close: () => closeServer(server),
+        origin,
+        resourceUrl: `${origin}${resourcePath}`,
+        setBody(nextBody: string) {
+            body = nextBody;
+        },
+    };
+}
+
+export async function openWorkspaceSection(
+    page: Page,
+    label: string
+): Promise<void> {
+    if (label === 'Favorites') {
+        await openPlaylistFavorites(page);
+        return;
+    }
+
+    if (label === 'Recently viewed') {
+        await openPlaylistRecent(page);
+        return;
+    }
+
+    await page.getByRole('link', { name: label, exact: true }).click();
+}
+
+export async function openPlaylistFavorites(page: Page): Promise<void> {
+    await openGlobalFavorites(page);
+    await switchUnifiedCollectionScope(page, 'This playlist');
+}
+
+export async function openPlaylistRecent(page: Page): Promise<void> {
+    await openGlobalRecent(page);
+    await switchUnifiedCollectionScope(page, 'This playlist');
+}
+
+export async function openGlobalFavorites(page: Page): Promise<void> {
+    await openWorkspaceSection(page, 'Global favorites');
+    await page.waitForURL(/\/workspace\/global-favorites(?:\?.*)?$/);
+}
+
+export async function openGlobalRecent(page: Page): Promise<void> {
+    const dialog = await openCommandPalette(page);
+
+    await dialog.locator('input[type="search"]').fill('recent');
+    await dialog.getByRole('button', { name: /Open recently viewed/i }).click();
+    await page.waitForURL(/\/workspace\/global-recent(?:\?.*)?$/);
+}
+
+export async function switchUnifiedCollectionScope(
+    page: Page,
+    scopeLabel: 'This playlist' | 'All playlists'
+): Promise<void> {
+    const toggleGroup = page.locator('.scope-toggle');
+
+    await expect(toggleGroup).toBeVisible();
+    await clickButtonToggleOption(toggleGroup, scopeLabel);
+}
+
+export async function switchUnifiedCollectionContent(
+    page: Page,
+    contentLabel: 'Live TV' | 'Movies' | 'Series'
+): Promise<void> {
+    const toggleGroup = page.locator('.content-toggle');
+
+    await expect(toggleGroup).toBeVisible();
+    await clickButtonToggleOption(toggleGroup, contentLabel);
+}
+
+export async function clearCurrentUnifiedCollection(
+    page: Page
+): Promise<void> {
+    await page
+        .getByRole('button', {
+            name: /Clear .* (favorites|recently viewed)/i,
+        })
+        .click();
+
+    const dialog = page.locator('mat-dialog-container').last();
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Yes$/i }).click();
+    await expect(dialog).toBeHidden();
+}
+
+async function clickButtonToggleOption(
+    toggleGroup: Locator,
+    label: string
+): Promise<void> {
+    const toggle = toggleGroup
+        .locator('mat-button-toggle')
+        .filter({ hasText: flexibleTextPattern(label) })
+        .first();
+
+    await expect(toggle).toBeVisible();
+
+    if (!(await isButtonToggleSelected(toggle))) {
+        await toggle.click();
+    }
+
+    await expect
+        .poll(() => isButtonToggleSelected(toggle), {
+            timeout: 10000,
+        })
+        .toBe(true);
+}
+
+export function channelItemByTitle(page: Page, title: string): Locator {
+    return page.getByTestId('channel-item').filter({
+        has: page.locator('.channel-name', {
+            hasText: flexibleTextPattern(title),
+        }),
+    });
+}
+
+export function contentCardByTitle(page: Page, title: string): Locator {
+    return page.locator('app-content-card').filter({
+        has: page.locator('h3', {
+            hasText: flexibleTextPattern(title),
+        }),
+    });
+}
+
+export async function expectVisibleContentCardTitle(
+    page: Page,
+    title: string
+): Promise<void> {
+    await expect
+        .poll(
+            async () => {
+                const titles = await visibleContentCardTitles(page);
+                return titles.some(
+                    (visibleTitle) =>
+                        normalizeVisibleText(visibleTitle) ===
+                        normalizeVisibleText(title)
+                );
+            },
+            { timeout: 20000 }
+        )
+        .toBe(true);
+}
+
+export async function expectPathname(
+    page: Page,
+    pattern: RegExp
+): Promise<void> {
+    await expect.poll(() => new URL(page.url()).pathname).toMatch(pattern);
+}
+
+export function playlistSwitcherTitle(page: Page): Locator {
+    return page
+        .locator('.playlist-switcher-trigger .playlist-info .name')
+        .first();
+}
+
+export function gridListCardByTitle(page: Page, title: string): Locator {
+    return page.locator('.category-content-layout mat-card').filter({
+        has: page.locator('.title', {
+            hasText: flexibleTextPattern(title),
+        }),
+    });
+}
+
+/**
+ * Waits for the first grid card to appear (skeleton loading done) and returns
+ * its display title. Use this instead of picking from fixture order, since the
+ * grid sorts by date-desc and may paginate items off the first page.
+ */
+export async function waitForFirstGridListCardTitle(
+    page: Page
+): Promise<string> {
+    const card = page.locator('.category-content-layout mat-card').first();
+    await expect(card).toBeVisible({ timeout: 20000 });
+    return ((await card.locator('.title').textContent()) ?? '').trim();
+}
+
+/**
+ * Waits for the first grid card to appear with a non-empty title, clicks it,
+ * and returns the title. Use this instead of waitForFirstGridListCardTitle +
+ * clickGridListCardByTitle to avoid a race condition where the grid re-renders
+ * between the title read and the subsequent search-by-title click.
+ */
+export async function clickFirstGridListCard(page: Page): Promise<string> {
+    const card = page.locator('.category-content-layout mat-card').first();
+    await expect(card).toBeVisible({ timeout: 20000 });
+    const titleEl = card.locator('.title');
+    let title = '';
+    await expect(async () => {
+        title = ((await titleEl.textContent()) ?? '').trim();
+        expect(title.length).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+    await card.click();
+    return title;
+}
+
+export async function clickGridListCardByTitle(
+    page: Page,
+    title: string
+): Promise<void> {
+    const card = gridListCardByTitle(page, title).first();
+
+    await expect(card).toBeVisible({ timeout: 20000 });
+    await card.click();
+}
+
+export async function clickCategoryById(
+    page: Page,
+    categoryId: string
+): Promise<void> {
+    const category = page.locator(
+        `app-workspace-context-panel .category-item[data-category-id="${categoryId}"]:visible`
+    );
+
+    await expect(category.first()).toBeVisible({ timeout: 20000 });
+    await category.first().scrollIntoViewIfNeeded();
+    await category.first().click();
+    await expect
+        .poll(async () => {
+            const pathname = new URL(page.url()).pathname;
+            const isSelected =
+                (await category.first().getAttribute('aria-current')) ===
+                'true';
+
+            return (
+                isSelected ||
+                pathname.endsWith(`/${categoryId}`) ||
+                pathname.includes(`/${categoryId}/`)
+            );
+        })
+        .toBe(true);
+}
+
+export async function clickCategoryByNameExact(
+    page: Page,
+    categoryName: string
+): Promise<void> {
+    const categories = page
+        .locator('app-workspace-context-panel .category-item:visible')
+        .filter({
+            has: page.locator('.nav-item-label', {
+                hasText: new RegExp(`^\\s*${escapeRegex(categoryName)}\\s*$`),
+            }),
+        });
+    const category = await pickPreferredCategory(categories);
+
+    await expect(category).toBeVisible();
+    await category.scrollIntoViewIfNeeded();
+    const categoryId =
+        (await category.getAttribute('data-category-id'))?.trim() ?? '';
+    await category.click();
+    await expect
+        .poll(async () => {
+            const pathname = new URL(page.url()).pathname;
+            const isSelected =
+                (await category.getAttribute('aria-current')) === 'true';
+
+            return (
+                isSelected ||
+                (categoryId.length > 0 &&
+                    (pathname.endsWith(`/${categoryId}`) ||
+                        pathname.includes(`/${categoryId}/`)))
+            );
+        })
+        .toBe(true);
+}
+
+export function sourceRowByTitle(page: Page, title: string): Locator {
+    return page.locator('app-playlist-item').filter({
+        hasText: flexibleTextPattern(title),
+    });
+}
+
+export async function getVisibleSourceTitles(page: Page): Promise<string[]> {
+    return page.locator('app-playlist-item').evaluateAll((elements) =>
+        elements
+            .map((element) => {
+                const titleElement = element.querySelector('.playlist-title');
+                return titleElement?.textContent?.trim() ?? '';
+            })
+            .filter((title) => title.length > 0)
+    );
+}
+
+export async function selectSourceTypeFilter(
+    page: Page,
+    typeLabel: 'All' | 'M3U' | 'Xtream' | 'Stalker'
+): Promise<void> {
+    await selectSourcesTypeFilterOption(page, typeLabel);
+}
+
+export async function selectSourceSort(
+    page: Page,
+    sortLabel:
+        | 'Date added (Newest first)'
+        | 'Date added (Oldest first)'
+        | 'Name (A-Z)'
+        | 'Name (Z-A)'
+        | 'Custom order'
+): Promise<void> {
+    const sortTrigger = page.locator('app-workspace-sources .sort-trigger');
+
+    await expect(sortTrigger).toBeVisible();
+    await sortTrigger.click();
+
+    const option = page
+        .locator('.cdk-overlay-pane [role="menuitem"]')
+        .filter({
+            hasText: flexibleTextPattern(sortLabel),
+        })
+        .first();
+
+    await expect(option).toBeVisible();
+    await option.click();
+    await expect(option).toBeHidden();
+}
+
+export async function dragSourceBefore(
+    page: Page,
+    sourceTitle: string,
+    targetTitle: string
+): Promise<void> {
+    const source = sourceRowByTitle(page, sourceTitle).locator('.drag-icon');
+    const target = sourceRowByTitle(page, targetTitle).locator(
+        '.playlist-item'
+    );
+
+    await expect(source.first()).toBeVisible();
+    await expect(target.first()).toBeVisible();
+
+    const sourceBox = await source.first().boundingBox();
+    const targetBox = await target.first().boundingBox();
+
+    if (!sourceBox || !targetBox) {
+        throw new Error('Could not resolve source or target bounds for drag.');
+    }
+
+    await page.mouse.move(
+        sourceBox.x + sourceBox.width / 2,
+        sourceBox.y + sourceBox.height / 2
+    );
+    await page.mouse.down();
+    await page.mouse.move(
+        targetBox.x + targetBox.width / 2,
+        targetBox.y + targetBox.height / 3,
+        {
+            steps: 15,
+        }
+    );
+    await page.mouse.up();
+}
+
+export async function openSourceEditor(
+    page: Page,
+    title: string
+): Promise<Locator> {
+    const row = sourceRowByTitle(page, title).first();
+
+    await expect(row).toBeVisible();
+    await row.locator('.edit-btn').click();
+    const dialog = page.locator('mat-dialog-container').last();
+
+    await expect(dialog).toBeVisible();
+    return dialog;
+}
+
+export async function updateSourceDialog(
+    dialog: Locator,
+    updates: Partial<
+        Record<
+            | 'macAddress'
+            | 'password'
+            | 'portalUrl'
+            | 'serverUrl'
+            | 'stalkerDeviceId1'
+            | 'stalkerDeviceId2'
+            | 'stalkerSerialNumber'
+            | 'stalkerSignature1'
+            | 'stalkerSignature2'
+            | 'title'
+            | 'url'
+            | 'userAgent'
+            | 'username',
+            string
+        > & {
+            autoRefresh: boolean;
+        }
+    >
+): Promise<void> {
+    for (const [field, value] of Object.entries(updates)) {
+        if (field === 'autoRefresh' || value == null) {
+            continue;
+        }
+
+        await setInputValue(
+            dialog.locator(`input[formcontrolname="${field}"]`),
+            value as string
+        );
+    }
+
+    if (typeof updates.autoRefresh === 'boolean') {
+        const checkbox = dialog.locator(
+            'mat-checkbox[formcontrolname="autoRefresh"] input[type="checkbox"]'
+        );
+
+        if (updates.autoRefresh) {
+            await checkbox.check();
+        } else {
+            await checkbox.uncheck();
+        }
+    }
+}
+
+export async function saveSourceDialog(
+    page: Page,
+    dialog: Locator
+): Promise<void> {
+    await dialog.getByRole('button', { name: 'Save', exact: true }).click();
+    await page.waitForSelector('mat-dialog-container', { state: 'detached' });
+    await expectPlaylistUpdatedToast(page);
+}
+
+export async function expectSourceDialogValues(
+    dialog: Locator,
+    expected: Partial<
+        Record<
+            | 'macAddress'
+            | 'password'
+            | 'portalUrl'
+            | 'serverUrl'
+            | 'stalkerDeviceId1'
+            | 'stalkerDeviceId2'
+            | 'stalkerSerialNumber'
+            | 'stalkerSignature1'
+            | 'stalkerSignature2'
+            | 'title'
+            | 'url'
+            | 'userAgent'
+            | 'username',
+            string
+        > & {
+            autoRefresh: boolean;
+        }
+    >
+): Promise<void> {
+    for (const [field, value] of Object.entries(expected)) {
+        if (field === 'autoRefresh' || value == null) {
+            continue;
+        }
+
+        await expect(
+            dialog.locator(`input[formcontrolname="${field}"]`)
+        ).toHaveValue(value as string);
+    }
+
+    if (typeof expected.autoRefresh === 'boolean') {
+        const checkbox = dialog.locator(
+            'mat-checkbox[formcontrolname="autoRefresh"] input[type="checkbox"]'
+        );
+
+        if (expected.autoRefresh) {
+            await expect(checkbox).toBeChecked();
+        } else {
+            await expect(checkbox).not.toBeChecked();
+        }
+    }
+}
+
+export async function deleteSource(page: Page, title: string): Promise<void> {
+    const row = sourceRowByTitle(page, title).first();
+
+    await expect(row).toBeVisible();
+    await row.locator('.delete-btn').click();
+    await confirmDialog(page);
+}
+
+export async function refreshSource(
+    page: Page,
+    title: string,
+    options: {
+        confirm?: boolean;
+    } = {}
+): Promise<void> {
+    const { confirm = false } = options;
+    const row = sourceRowByTitle(page, title).first();
+
+    await expect(row).toBeVisible();
+    await row.locator('.refresh-btn').click();
+
+    if (confirm) {
+        await confirmDialog(page);
+    }
+}
+
+export async function waitForSourceRowIdle(
+    page: Page,
+    title: string
+): Promise<void> {
+    const row = sourceRowByTitle(page, title).first();
+
+    await expect(row).toBeVisible();
+    await expect(row.locator('.busy-state__message')).toHaveCount(0, {
+        timeout: 60000,
+    });
+    await expect(row.locator('.action-spinner')).toHaveCount(0, {
+        timeout: 60000,
+    });
+}
+
+export async function waitForM3uCatalog(page: Page): Promise<void> {
+    await page.waitForURL(/\/workspace\/playlists\/.+\/all$/);
+    await expect(page.getByTestId('channel-item').first()).toBeVisible({
+        timeout: 20000,
+    });
+}
+
+export async function waitForXtreamCatalog(page: Page): Promise<void> {
+    await page.waitForURL(/\/workspace\/xtreams\/.+/);
+    await waitForXtreamImportToFinish(page);
+
+    const categories = page.locator(
+        'app-workspace-context-panel .category-item'
+    );
+    await expect(categories.first()).toBeVisible({ timeout: 20000 });
+
+    const contentItems = page.locator(
+        '.content-card, [data-test-id="channel-item"], mat-card'
+    );
+
+    try {
+        await expect(contentItems.first()).toBeVisible({ timeout: 5000 });
+        return;
+    } catch {
+        const category = await pickPreferredCategory(categories);
+        await category.scrollIntoViewIfNeeded();
+        await category.click();
+        await expect(contentItems.first()).toBeVisible({ timeout: 20000 });
+    }
+}
+
+export async function waitForXtreamWorkspaceReady(page: Page): Promise<void> {
+    await waitForXtreamCatalog(page);
+}
+
+export async function expectPlaylistUpdatedToast(page: Page): Promise<void> {
+    await expect(
+        page
+            .locator('.mat-mdc-snack-bar-label')
+            .filter({
+                hasText: 'Success! The playlist was successfully updated.',
+            })
+            .last()
+    ).toBeVisible({
+        timeout: 20000,
+    });
+}
+
+export async function waitForXtreamImportToFinish(page: Page): Promise<void> {
+    const overlay = page.locator('.workspace-loading-overlay');
+
+    try {
+        await overlay.waitFor({ state: 'visible', timeout: 5000 });
+    } catch {
+        // The overlay may already be gone by the time the test reaches this point.
+    }
+
+    await expect(overlay).toHaveCount(0, { timeout: 30000 });
+}
+
+async function pickPreferredCategory(categories: Locator): Promise<Locator> {
+    const count = await categories.count();
+    let fallback: Locator | null = null;
+
+    for (let index = 0; index < count; index += 1) {
+        const candidate = categories.nth(index);
+
+        if (!(await candidate.isVisible())) {
+            continue;
+        }
+
+        fallback ??= candidate;
+
+        const countText =
+            (await candidate.locator('.item-count').first().textContent()) ??
+            '';
+        const itemCount = Number.parseInt(countText.trim(), 10);
+
+        if (Number.isFinite(itemCount) && itemCount > 0) {
+            return candidate;
+        }
+    }
+
+    return fallback ?? categories.first();
+}
+
+export async function waitForStalkerCatalog(page: Page): Promise<void> {
+    await page.waitForURL(/\/workspace\/stalker\/.+/);
+
+    const categories = page.locator('.category-item');
+    await expect(categories.first()).toBeVisible({ timeout: 20000 });
+    await categories.first().click();
+
+    const contentItems = page.locator(
+        '.content-card, [data-test-id="channel-item"], mat-card'
+    );
+    await expect(contentItems.first()).toBeVisible({ timeout: 20000 });
+}
+
+export async function fillWorkspaceSearch(
+    page: Page,
+    term: string,
+    options: {
+        submit?: boolean;
+    } = {}
+): Promise<void> {
+    const input = page.locator(
+        'app-workspace-shell-header .search-field input[type="search"]'
+    );
+
+    await expect(input).toBeEnabled();
+    await input.fill(term);
+
+    if (options.submit) {
+        await input.press('Enter');
+    }
+}
+
+export async function expectWorkspaceSearchScope(
+    page: Page,
+    expected: RegExp | string
+): Promise<void> {
+    await expect(
+        page.locator('app-workspace-shell-header .search-chip--scope')
+    ).toHaveText(expected);
+}
+
+export async function expectWorkspaceSearchStatus(
+    page: Page,
+    expected: RegExp | string
+): Promise<void> {
+    await expect(
+        page.locator('app-workspace-shell-header .search-chip--status')
+    ).toHaveText(expected);
+}
+
+async function startPortalDebugCapture(page: Page): Promise<void> {
+    await page.evaluate(() => {
+        const electronApi = window.electron as typeof window.electron & {
+            onPortalDebugEvent?: (
+                callback: (event: PortalDebugEvent) => void
+            ) => (() => void) | undefined;
+        };
+
+        window.__portalDebugUnsubscribe?.();
+        window.__portalDebugEvents = [];
+
+        if (!electronApi.onPortalDebugEvent) {
+            return;
+        }
+
+        window.__portalDebugUnsubscribe = electronApi.onPortalDebugEvent(
+            (event: PortalDebugEvent) => {
+                window.__portalDebugEvents?.push(event as PortalDebugEvent);
+            }
+        );
+    });
+}
+
+async function startDbOperationCapture(page: Page): Promise<void> {
+    await page.evaluate(() => {
+        const electronApi = window.electron as typeof window.electron & {
+            onDbOperationEvent?: (
+                callback: (event: DbOperationEvent) => void
+            ) => (() => void) | undefined;
+        };
+
+        window.__dbOperationUnsubscribe?.();
+        window.__dbOperationEvents = [];
+
+        if (!electronApi.onDbOperationEvent) {
+            return;
+        }
+
+        window.__dbOperationUnsubscribe = electronApi.onDbOperationEvent(
+            (event: DbOperationEvent) => {
+                window.__dbOperationEvents?.push(event);
+            }
+        );
+    });
+}
+
+async function startRendererFrameCapture(page: Page): Promise<void> {
+    await page.evaluate(() => {
+        if (window.__rendererFrameRequestId) {
+            window.cancelAnimationFrame(window.__rendererFrameRequestId);
+        }
+
+        window.__rendererFrameCount = 0;
+
+        const tick = () => {
+            window.__rendererFrameCount =
+                (window.__rendererFrameCount ?? 0) + 1;
+            window.__rendererFrameRequestId =
+                window.requestAnimationFrame(tick);
+        };
+
+        window.__rendererFrameRequestId = window.requestAnimationFrame(tick);
+    });
+}
+
+export async function expectPortalDebugSuccess(
+    page: Page,
+    provider: PortalProvider
+): Promise<void> {
+    await expect
+        .poll(
+            async () => {
+                return page.evaluate((targetProvider) => {
+                    return (
+                        window.__portalDebugEvents?.filter(
+                            (event) =>
+                                event.provider === targetProvider &&
+                                event.status === 'success' &&
+                                event.transport === 'electron-main'
+                        ).length ?? 0
+                    );
+                }, provider);
+            },
+            { timeout: 20000 }
+        )
+        .toBeGreaterThan(0);
+}
+
+export async function waitForPortalDebugEvent(
+    page: Page,
+    options: {
+        operation: string;
+        predicate?: (event: PortalDebugEvent) => boolean;
+        provider: PortalProvider;
+        timeoutMs?: number;
+    }
+): Promise<PortalDebugEvent> {
+    const { operation, predicate, provider, timeoutMs = 20000 } = options;
+    const startedAt = Date.now();
+
+    while (Date.now() - startedAt <= timeoutMs) {
+        const events = await page.evaluate(
+            () => window.__portalDebugEvents ?? []
+        );
+        const match = events.find((event) => {
+            if (
+                event.provider !== provider ||
+                event.operation !== operation ||
+                event.status !== 'success' ||
+                event.transport !== 'electron-main'
+            ) {
+                return false;
+            }
+
+            return predicate ? predicate(event) : true;
+        });
+
+        if (match) {
+            return match;
+        }
+
+        await page.waitForTimeout(200);
+    }
+
+    const recentEvents = await page.evaluate(() =>
+        (window.__portalDebugEvents ?? []).slice(-10)
+    );
+
+    throw new Error(
+        `Timed out waiting for ${provider}:${operation}. Recent events: ${JSON.stringify(
+            recentEvents,
+            null,
+            2
+        )}`
+    );
+}
+
+export async function waitForDbOperationEvent(
+    page: Page,
+    options: {
+        operation: string;
+        operationId?: string;
+        phase?: string;
+        playlistId?: string;
+        predicate?: (event: DbOperationEvent) => boolean;
+        status?: DbOperationEvent['status'];
+        timeoutMs?: number;
+    }
+): Promise<DbOperationEvent> {
+    const {
+        operation,
+        operationId,
+        phase,
+        playlistId,
+        predicate,
+        status,
+        timeoutMs = 20000,
+    } = options;
+    const startedAt = Date.now();
+
+    while (Date.now() - startedAt <= timeoutMs) {
+        const events = await page.evaluate(
+            () => window.__dbOperationEvents ?? []
+        );
+        const match = events.find((event) => {
+            if (event.operation !== operation) {
+                return false;
+            }
+
+            if (operationId && event.operationId !== operationId) {
+                return false;
+            }
+
+            if (status && event.status !== status) {
+                return false;
+            }
+
+            if (phase && event.phase !== phase) {
+                return false;
+            }
+
+            if (playlistId && event.playlistId !== playlistId) {
+                return false;
+            }
+
+            return predicate ? predicate(event) : true;
+        });
+
+        if (match) {
+            return match;
+        }
+
+        await page.waitForTimeout(200);
+    }
+
+    const recentEvents = await page.evaluate(() =>
+        (window.__dbOperationEvents ?? []).slice(-20)
+    );
+
+    throw new Error(
+        `Timed out waiting for DB event ${operation}. Recent events: ${JSON.stringify(
+            recentEvents,
+            null,
+            2
+        )}`
+    );
+}
+
+export async function getRendererFrameCount(page: Page): Promise<number> {
+    return page.evaluate(() => window.__rendererFrameCount ?? 0);
+}
+
+export async function expectRendererFramesAdvance(
+    page: Page,
+    options: {
+        minimumDelta?: number;
+        sampleMs?: number;
+    } = {}
+): Promise<void> {
+    const { minimumDelta = 4, sampleMs = 300 } = options;
+    const startCount = await getRendererFrameCount(page);
+
+    await page.waitForTimeout(sampleMs);
+
+    await expect
+        .poll(async () => (await getRendererFrameCount(page)) - startCount, {
+            timeout: sampleMs + 1500,
+        })
+        .toBeGreaterThanOrEqual(minimumDelta);
+}
+
+export async function resetMockServers(
+    request: APIRequestContext,
+    providers: PortalProvider[]
+): Promise<void> {
+    for (const provider of providers) {
+        const server =
+            provider === 'stalker' ? stalkerMockServer : xtreamMockServer;
+        const response = await request.post(`${server}/reset`);
+        expect(response.ok()).toBeTruthy();
+    }
+}
+
+async function openCommandPalette(page: Page): Promise<Locator> {
+    const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+    await page.locator('body').focus();
+    await page.keyboard.press(`${modifier}+K`);
+    const dialog = page.locator(
+        'mat-dialog-container app-workspace-command-palette'
+    );
+
+    await expect(dialog).toBeVisible();
+    return dialog;
+}
+
+async function confirmDialog(page: Page, buttonLabel = 'Yes'): Promise<void> {
+    const dialog = page.locator('mat-dialog-container');
+
+    await expect(dialog).toBeVisible();
+    await dialog
+        .getByRole('button', { name: buttonLabel, exact: true })
+        .click();
+    await page.waitForSelector('mat-dialog-container', { state: 'detached' });
+}
+
+async function selectSourcesTypeFilterOption(
+    page: Page,
+    label: string
+): Promise<void> {
+    const option = page
+        .locator('app-workspace-sources-filters-panel .option-row')
+        .filter({
+            has: page.locator('.option-label', {
+                hasText: flexibleTextPattern(label),
+            }),
+        })
+        .first();
+
+    await expect(option).toBeVisible();
+    await option.click();
+}
+
+async function listenOnRandomPort(server: Server): Promise<void> {
+    await new Promise<void>((resolvePromise, reject) => {
+        server.once('error', reject);
+        server.listen(0, '127.0.0.1', () => {
+            server.off('error', reject);
+            resolvePromise();
+        });
+    });
+}
+
+async function closeServer(server: Server): Promise<void> {
+    await new Promise<void>((resolvePromise, reject) => {
+        server.close((error) => {
+            if (error) {
+                reject(error);
+                return;
+            }
+
+            resolvePromise();
+        });
+    });
+}
+
+function escapeRegex(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function flexibleTextPattern(value: string): RegExp {
+    return new RegExp(
+        value
+            .trim()
+            .split(/\s+/)
+            .map((part) => escapeRegex(part))
+            .join('\\s+'),
+        'i'
+    );
+}
+
+async function isButtonToggleSelected(toggle: Locator): Promise<boolean> {
+    try {
+        return await toggle.evaluate((element) => {
+            const host = element as HTMLElement;
+            const selectedDescendant = host.querySelector(
+                '[aria-checked="true"], [aria-pressed="true"]'
+            );
+
+            return (
+                host.classList.contains('mat-button-toggle-checked') ||
+                host.getAttribute('aria-checked') === 'true' ||
+                host.getAttribute('aria-pressed') === 'true' ||
+                selectedDescendant !== null
+            );
+        });
+    } catch {
+        return false;
+    }
+}
+
+async function visibleContentCardTitles(page: Page): Promise<string[]> {
+    return page
+        .locator('app-content-card h3')
+        .allInnerTexts()
+        .then((titles) => titles.map((title) => title.trim()).filter(Boolean));
+}
+
+function normalizeVisibleText(value: string): string {
+    return value.trim().replace(/\s+/g, ' ').toLowerCase();
+}
diff --git a/apps/electron-backend-e2e/src/epg.e2e.ts b/apps/electron-backend-e2e/src/epg.e2e.ts
new file mode 100644
index 0000000..267539b
--- /dev/null
+++ b/apps/electron-backend-e2e/src/epg.e2e.ts
@@ -0,0 +1,173 @@
+import { Page } from '@playwright/test';
+import {
+    buildM3uContent,
+    channelItemByTitle,
+    closeElectronApp,
+    createMutableTextServer,
+    expect,
+    importM3uPlaylistFromUrl,
+    launchElectronApp,
+    openWorkspaceSection,
+    openSettings,
+    test,
+} from './electron-test-fixtures';
+
+const fallbackLogoSvg = Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect width="96" height="96" rx="20" fill="#16436b"/><text x="48" y="58" text-anchor="middle" font-size="28" font-family="Arial" fill="#f5f7fb">GN</text></svg>`
+).toString('base64');
+const fallbackLogoDataUrl = `data:image/svg+xml;base64,${fallbackLogoSvg}`;
+const epgFixtureXml = `<?xml version="1.0" encoding="UTF-8"?>
+<tv>
+  <channel id="guide-news">
+    <display-name>Guide News</display-name>
+  </channel>
+  <programme start="20260328070000 +0000" stop="20260328080000 +0000" channel="guide-news">
+    <title>Guide Bulletin</title>
+    <desc>EPG refresh smoke test.</desc>
+  </programme>
+</tv>
+`;
+
+test.describe('Electron EPG', () => {
+    test('adds an EPG source, fetches guide data, removes the source row, and clears stored EPG data', async ({
+        dataDir,
+    }) => {
+        const epgServer = await createMutableTextServer(epgFixtureXml, {
+            contentType: 'application/xml; charset=utf-8',
+            resourcePath: '/guide.xml',
+        });
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(app.mainWindow);
+            await app.mainWindow
+                .getByRole('button', { name: 'Add EPG source' })
+                .click();
+            await app.mainWindow
+                .locator('.epg-source-row input')
+                .first()
+                .fill(epgServer.resourceUrl);
+
+            await app.mainWindow.locator('.epg-source-row button').first().click();
+            await expect(
+                app.mainWindow.locator('.epg-progress-panel')
+            ).toBeVisible();
+            await expect
+                .poll(() => getEpgChannelCount(app.mainWindow), {
+                    timeout: 30000,
+                })
+                .toBeGreaterThan(0);
+            await expect(
+                app.mainWindow.locator('.epg-progress-panel .stat-badge').first()
+            ).toBeVisible();
+
+            await app.mainWindow.locator('.epg-source-row button').nth(1).click();
+            await expect(app.mainWindow.locator('.epg-source-row')).toHaveCount(0);
+
+            await app.mainWindow
+                .getByRole('button', { name: 'Clear EPG data' })
+                .click();
+            const dialog = app.mainWindow.locator('mat-dialog-container');
+            await expect(dialog).toBeVisible();
+            await dialog.getByRole('button', { name: 'Yes', exact: true }).click();
+            await app.mainWindow.waitForSelector('mat-dialog-container', {
+                state: 'detached',
+            });
+
+            await expect
+                .poll(() => getEpgChannelCount(app.mainWindow), {
+                    timeout: 20000,
+                })
+                .toBe(0);
+        } finally {
+            await closeElectronApp(app);
+            await epgServer.close();
+        }
+    });
+
+    test('uses the XMLTV channel icon as a fallback when the playlist has no tvg-logo', async ({
+        dataDir,
+    }) => {
+        const playlistServer = await createMutableTextServer(
+            buildM3uContent([
+                {
+                    name: 'Guide News Live',
+                    tvgId: 'guide-news',
+                    url: 'https://example.com/live/guide-news.m3u8',
+                },
+            ]),
+            {
+                contentType: 'application/x-mpegurl; charset=utf-8',
+                resourcePath: '/playlist.m3u',
+            }
+        );
+        const epgServer = await createMutableTextServer(
+            `<?xml version="1.0" encoding="UTF-8"?>
+<tv>
+  <channel id="guide-news">
+    <display-name>Guide News Live</display-name>
+    <icon src="${fallbackLogoDataUrl}"/>
+  </channel>
+  <programme start="20260328070000 +0000" stop="20260328080000 +0000" channel="guide-news">
+    <title>Guide Bulletin</title>
+    <desc>EPG logo fallback test.</desc>
+  </programme>
+</tv>
+`,
+            {
+                contentType: 'application/xml; charset=utf-8',
+                resourcePath: '/guide.xml',
+            }
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromUrl(
+                app.mainWindow,
+                playlistServer.resourceUrl
+            );
+
+            await openSettings(app.mainWindow);
+            await app.mainWindow
+                .getByRole('button', { name: 'Add EPG source' })
+                .click();
+            await app.mainWindow
+                .locator('.epg-source-row input')
+                .first()
+                .fill(epgServer.resourceUrl);
+            await app.mainWindow.locator('.epg-source-row button').first().click();
+
+            await expect
+                .poll(() => getEpgChannelCount(app.mainWindow), {
+                    timeout: 30000,
+                })
+                .toBeGreaterThan(0);
+
+            await openWorkspaceSection(app.mainWindow, 'All channels');
+
+            const channelItem = channelItemByTitle(
+                app.mainWindow,
+                'Guide News Live'
+            );
+            await expect(channelItem).toBeVisible();
+            await expect(channelItem.locator('.channel-logo')).toHaveAttribute(
+                'src',
+                fallbackLogoDataUrl
+            );
+            await expect(
+                channelItem.locator('.channel-logo-fallback')
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+            await playlistServer.close();
+            await epgServer.close();
+        }
+    });
+});
+
+async function getEpgChannelCount(page: Page): Promise<number> {
+    return page.evaluate(async () => {
+        const channels = await window.electron?.getEpgChannelsByRange?.(0, 20);
+        return Array.isArray(channels) ? channels.length : 0;
+    });
+}
diff --git a/apps/electron-backend-e2e/src/favorites.e2e.ts b/apps/electron-backend-e2e/src/favorites.e2e.ts
new file mode 100644
index 0000000..74a887a
--- /dev/null
+++ b/apps/electron-backend-e2e/src/favorites.e2e.ts
@@ -0,0 +1,633 @@
+import { Page } from '@playwright/test';
+import {
+    addStalkerPortal,
+    addXtreamPortal,
+    channelItemByTitle,
+    clearCurrentUnifiedCollection,
+    clickCategoryById,
+    clickGridListCardByTitle,
+    clickCategoryByNameExact,
+    clickFirstGridListCard,
+    closeElectronApp,
+    contentCardByTitle,
+    defaultXtreamPassword,
+    defaultXtreamUsername,
+    expectPathname,
+    expectVisibleContentCardTitle,
+    expect,
+    importM3uPlaylistFromNativeDialog,
+    launchElectronApp,
+    openWorkspaceSection,
+    openPlaylistFavorites,
+    openSources,
+    resetMockServers,
+    restartElectronApp,
+    sourceRowByTitle,
+    switchUnifiedCollectionContent,
+    switchUnifiedCollectionScope,
+    test,
+    playlistSwitcherTitle,
+    waitForM3uCatalog,
+    waitForStalkerCatalog,
+    waitForXtreamWorkspaceReady,
+    writeTemporaryM3uFile,
+} from './electron-test-fixtures';
+import {
+    fetchStalkerCategoryFixture,
+    fetchXtreamLiveFixture,
+    fetchXtreamSeriesFixture,
+    fetchXtreamVodFixture,
+    getStalkerTitle,
+    getXtreamTitle,
+    pickDistinctTitles,
+} from './portal-mock-fixtures';
+
+test.describe('Electron Favorites', () => {
+    test('shows M3U favorites in playlist and all-playlists scope, and preserves them after restart', async ({
+        dataDir,
+    }) => {
+        const playlistTitle = 'm3u-favorites-source.m3u';
+        const playlistSourceTitle = 'm3u-favorites-source';
+        const filePath = writeTemporaryM3uFile(dataDir, playlistTitle, [
+            {
+                groupTitle: 'News',
+                name: 'M3U Favorite One',
+                url: 'https://streams.example.test/m3u-favorite-one.m3u8',
+            },
+            {
+                groupTitle: 'News',
+                name: 'M3U Favorite Two',
+                url: 'https://streams.example.test/m3u-favorite-two.m3u8',
+            },
+        ]);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, filePath);
+            await waitForM3uCatalog(app.mainWindow);
+            await toggleFavoriteForChannel(app.mainWindow, 'M3U Favorite One');
+            await toggleFavoriteForChannel(app.mainWindow, 'M3U Favorite Two');
+            await openPlaylistFavorites(app.mainWindow);
+
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Favorite One')
+            ).toHaveCount(1);
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Favorite Two')
+            ).toHaveCount(1);
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Favorite One')
+            ).toHaveCount(1);
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Favorite Two')
+            ).toHaveCount(1);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, playlistSourceTitle)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await openPlaylistFavorites(app.mainWindow);
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Favorite One')
+            ).toHaveCount(1);
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Favorite Two')
+            ).toHaveCount(1);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('keeps playlist M3U favorites cleared after navigating away and back', async ({
+        dataDir,
+    }) => {
+        const playlistTitle = 'm3u-clear-favorites-source.m3u';
+        const playlistSourceTitle = 'm3u-clear-favorites-source';
+        const filePath = writeTemporaryM3uFile(dataDir, playlistTitle, [
+            {
+                groupTitle: 'News',
+                name: 'M3U Clear Favorite One',
+                url: 'https://streams.example.test/m3u-clear-favorite-one.m3u8',
+            },
+            {
+                groupTitle: 'News',
+                name: 'M3U Clear Favorite Two',
+                url: 'https://streams.example.test/m3u-clear-favorite-two.m3u8',
+            },
+        ]);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, filePath);
+            await waitForM3uCatalog(app.mainWindow);
+            await toggleFavoriteForChannel(
+                app.mainWindow,
+                'M3U Clear Favorite One'
+            );
+            await toggleFavoriteForChannel(
+                app.mainWindow,
+                'M3U Clear Favorite Two'
+            );
+            await openPlaylistFavorites(app.mainWindow);
+
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Clear Favorite One')
+            ).toHaveCount(1);
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Clear Favorite Two')
+            ).toHaveCount(1);
+
+            await clearCurrentUnifiedCollection(app.mainWindow);
+
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Clear Favorite One')
+            ).toHaveCount(0);
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Clear Favorite Two')
+            ).toHaveCount(0);
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, playlistSourceTitle)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await openPlaylistFavorites(app.mainWindow);
+
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Clear Favorite One')
+            ).toHaveCount(0);
+            await expect(
+                channelItemByTitle(app.mainWindow, 'M3U Clear Favorite Two')
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('shows Xtream live, movie, and series favorites in playlist and all-playlists scope, and preserves them after restart', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const liveFixture = await fetchXtreamLiveFixture(
+            request,
+            xtreamCredentials
+        );
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const [liveTitle] = pickDistinctTitles(
+            liveFixture.items,
+            getXtreamTitle
+        );
+        const portalTitle = 'Xtream Favorites Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                liveFixture.categoryName
+            );
+            await toggleFavoriteForChannel(app.mainWindow, liveTitle);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            // Use clickFirstGridListCard: grid sorts by date-desc so fixture order ≠
+            // display order; this atomically reads the first card's title and clicks
+            // it, avoiding a race where the grid re-renders between the title read
+            // and a separate search-by-title click.
+            const movieTitle = await clickFirstGridListCard(app.mainWindow);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            const seriesTitle = await clickFirstGridListCard(app.mainWindow);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await openPlaylistFavorites(app.mainWindow);
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, portalTitle).first().click();
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openPlaylistFavorites(app.mainWindow);
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('opens Xtream favorite movies and series inline from favorites without switching the playlist or showing the sidebar', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const hostPortalTitle = 'Xtream Favorite Detail Host';
+        const sourcePortalTitle = 'Xtream Favorite Detail Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: hostPortalTitle,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await addXtreamPortal(app.mainWindow, {
+                name: sourcePortalTitle,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            const movieTitle = await clickFirstGridListCard(app.mainWindow);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            const seriesTitle = await clickFirstGridListCard(app.mainWindow);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, hostPortalTitle)
+                .first()
+                .click();
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openPlaylistFavorites(app.mainWindow);
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                hostPortalTitle
+            );
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await contentCardByTitle(app.mainWindow, movieTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-favorites$/,
+                title: movieTitle,
+                playlistTitle: hostPortalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+            await contentCardByTitle(app.mainWindow, seriesTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-favorites$/,
+                title: seriesTitle,
+                playlistTitle: hostPortalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('shows Stalker live, movie, and series favorites in playlist and all-playlists scope, and preserves them after restart', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const liveFixture = await fetchStalkerCategoryFixture(request, 'itv');
+        const vodFixture = await fetchStalkerCategoryFixture(request, 'vod');
+        const seriesFixture = await fetchStalkerCategoryFixture(
+            request,
+            'series'
+        );
+        const [liveTitle] = pickDistinctTitles(
+            liveFixture.items,
+            getStalkerTitle
+        );
+        const [movieTitle] = pickDistinctTitles(
+            vodFixture.items,
+            getStalkerTitle
+        );
+        const [seriesTitle] = pickDistinctTitles(
+            seriesFixture.items,
+            getStalkerTitle
+        );
+        const portalTitle = 'Stalker Favorites Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForStalkerCatalog(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Live TV', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, liveFixture.categoryId);
+            await toggleFavoriteForChannel(app.mainWindow, liveTitle);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, vodFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, movieTitle);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, seriesFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, seriesTitle);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await openPlaylistFavorites(app.mainWindow);
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(1);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(1);
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(1);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, portalTitle).first().click();
+            await waitForStalkerCatalog(app.mainWindow);
+            await openPlaylistFavorites(app.mainWindow);
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(1);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('opens Stalker favorite movies and series inline from favorites without showing the sidebar', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const vodFixture = await fetchStalkerCategoryFixture(request, 'vod');
+        const seriesFixture = await fetchStalkerCategoryFixture(
+            request,
+            'series'
+        );
+        const [movieTitle] = pickDistinctTitles(
+            vodFixture.items,
+            getStalkerTitle
+        );
+        const [seriesTitle] = pickDistinctTitles(
+            seriesFixture.items,
+            getStalkerTitle
+        );
+        const portalTitle = 'Stalker Favorite Detail Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForStalkerCatalog(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, vodFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, movieTitle);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, seriesFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, seriesTitle);
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await openPlaylistFavorites(app.mainWindow);
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                portalTitle
+            );
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await contentCardByTitle(app.mainWindow, movieTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-favorites$/,
+                title: movieTitle,
+                playlistTitle: portalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+            await contentCardByTitle(app.mainWindow, seriesTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-favorites$/,
+                title: seriesTitle,
+                playlistTitle: portalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+const xtreamCredentials = {
+    username: defaultXtreamUsername,
+    password: defaultXtreamPassword,
+};
+
+async function addCurrentDetailToFavorites(page: Page): Promise<void> {
+    const addButton = page.locator('button.favorite-btn').first();
+
+    await expect(addButton).toBeVisible({ timeout: 20000 });
+    await addButton.click();
+    await expect(
+        page.locator('button.favorite-btn--active').first()
+    ).toBeVisible({
+        timeout: 20000,
+    });
+}
+
+async function goBackFromDetail(page: Page): Promise<void> {
+    const backButton = page
+        .locator('app-content-hero .hero__back-button')
+        .first();
+
+    await expect(backButton).toBeVisible({ timeout: 20000 });
+    try {
+        await backButton.click({ timeout: 5000 });
+    } catch {
+        await backButton.evaluate((button: HTMLButtonElement) =>
+            button.click()
+        );
+    }
+}
+
+async function expectInlineCollectionDetail(
+    page: Page,
+    params: {
+        pathname: RegExp;
+        title: string;
+        playlistTitle: string;
+    }
+): Promise<void> {
+    await expectPathname(page, params.pathname);
+    await expect(playlistSwitcherTitle(page)).toContainText(
+        params.playlistTitle
+    );
+    await expect(page.locator('app-workspace-context-panel')).toHaveCount(0);
+    await expect(page.locator('app-content-hero')).toContainText(params.title);
+    await expect(
+        page.locator('app-content-hero .hero__back-button').first()
+    ).toBeVisible({ timeout: 20000 });
+}
+
+async function toggleFavoriteForChannel(
+    page: Page,
+    title: string
+): Promise<void> {
+    const item = channelItemByTitle(page, title).first();
+
+    await expect(item).toBeVisible({ timeout: 20000 });
+    await item.hover();
+    await item.locator('.favorite-button').first().click();
+    await expect(item.locator('.favorite-button mat-icon').first()).toHaveText(
+        /star/
+    );
+}
diff --git a/apps/electron-backend-e2e/src/file-import.e2e.ts b/apps/electron-backend-e2e/src/file-import.e2e.ts
new file mode 100644
index 0000000..579cb6d
--- /dev/null
+++ b/apps/electron-backend-e2e/src/file-import.e2e.ts
@@ -0,0 +1,27 @@
+import {
+    closeElectronApp,
+    expect,
+    importM3uPlaylistFromNativeDialog,
+    launchElectronApp,
+    m3uFixturePath,
+    test,
+} from './electron-test-fixtures';
+
+test.describe('Electron Native Playlist Import', () => {
+    test('imports an M3U playlist via the native file picker path', async ({
+        dataDir,
+    }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, m3uFixturePath);
+
+            await app.mainWindow.waitForURL(/\/workspace\/playlists\/.+/);
+            await expect(
+                app.mainWindow.getByTestId('channel-item')
+            ).toHaveCount(4);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
diff --git a/apps/electron-backend-e2e/src/playlist-switcher.e2e.ts b/apps/electron-backend-e2e/src/playlist-switcher.e2e.ts
new file mode 100644
index 0000000..df8856b
--- /dev/null
+++ b/apps/electron-backend-e2e/src/playlist-switcher.e2e.ts
@@ -0,0 +1,504 @@
+import { Page } from '@playwright/test';
+import {
+    channelItemByTitle,
+    addStalkerPortal,
+    addXtreamPortal,
+    closeElectronApp,
+    defaultXtreamPassword,
+    defaultXtreamUsername,
+    expect,
+    importM3uPlaylistFromNativeDialog,
+    launchElectronApp,
+    openPlaylistFavorites,
+    openPlaylistRecent,
+    openSettings,
+    openSourceEditor,
+    openSources,
+    openWorkspaceSection,
+    playlistSwitcherTitle,
+    resetMockServers,
+    restartElectronApp,
+    saveSettings,
+    saveSourceDialog,
+    sourceRowByTitle,
+    test,
+    updateSourceDialog,
+    waitForDbOperationEvent,
+    waitForM3uCatalog,
+    waitForStalkerCatalog,
+    waitForXtreamCatalog,
+    writeTemporaryM3uFile,
+    xtreamMockServer,
+} from './electron-test-fixtures';
+
+const xtreamStressUsername = 'stress';
+const xtreamStressPassword = 'stress';
+const dbWorkerBatchDelayMs = '20';
+
+const localAFileName = 'switcher-local-a.m3u';
+const localADisplayName = 'switcher-local-a';
+const localBFileName = 'switcher-local-b.m3u';
+const localBDisplayName = 'switcher-local-b';
+const localAChannelName = 'Switcher Favorite A';
+const localBChannelName = 'Switcher Favorite B';
+const offlineLocalFileName = 'offline-local-source.m3u';
+const offlineLocalDisplayName = 'offline-local-source';
+const xtreamAName = 'Switcher Xtream A';
+const xtreamBName = 'Switcher Xtream B';
+const stalkerAName = 'Switcher Stalker A';
+const stalkerBName = 'Switcher Stalker B';
+const offlineXtreamName = 'Offline Cached Xtream';
+const importingXtreamName = 'Importing Xtream Portal';
+
+test.describe('Electron Playlist Switcher', () => {
+    test.describe.configure({ mode: 'serial' });
+    test.setTimeout(120000);
+
+    test('preserves same-type sections and cross-type mappings when switching from the workspace header', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream', 'stalker']);
+        const localAPath = writeTemporaryM3uFile(dataDir, localAFileName, [
+            {
+                groupTitle: 'News',
+                name: 'Switcher Local A',
+                url: 'https://streams.example.test/switcher-local-a.m3u8',
+            },
+        ]);
+        const localBPath = writeTemporaryM3uFile(dataDir, localBFileName, [
+            {
+                groupTitle: 'Sports',
+                name: 'Switcher Local B',
+                url: 'https://streams.example.test/switcher-local-b.m3u8',
+            },
+        ]);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localAPath);
+            await importM3uPlaylistFromNativeDialog(app, localBPath);
+            await addXtreamPortal(app.mainWindow, {
+                name: xtreamAName,
+            });
+            await addXtreamPortal(app.mainWindow, {
+                name: xtreamBName,
+            });
+            await addStalkerPortal(app.mainWindow, {
+                name: stalkerAName,
+            });
+            await addStalkerPortal(app.mainWindow, {
+                name: stalkerBName,
+            });
+            await openSources(app.mainWindow);
+
+            await sourceRowByTitle(app.mainWindow, localADisplayName)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await openPlaylistRecent(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+
+            await switchPlaylistFromHeader(app.mainWindow, localBDisplayName);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                localBDisplayName
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, xtreamAName);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                xtreamAName
+            );
+
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/live$/
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, xtreamBName);
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/live$/
+            );
+
+            await openWorkspaceSection(app.mainWindow, 'Recently added');
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/recently-added$/
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, stalkerAName);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/recent$/
+            );
+
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await waitForStalkerCatalog(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/itv$/
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, stalkerBName);
+            await waitForStalkerCatalog(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/itv$/
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, xtreamAName);
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/live$/
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, localADisplayName);
+            await waitForM3uCatalog(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/playlists\/[^/]+\/all$/
+            );
+
+            await openPlaylistFavorites(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/global-favorites$/
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, stalkerBName);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/global-favorites$/
+            );
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                stalkerBName
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('refreshes M3U unified collections immediately when switching same-type playlists from the header', async ({
+        dataDir,
+    }) => {
+        const localAPath = writeTemporaryM3uFile(dataDir, localAFileName, [
+            {
+                groupTitle: 'News',
+                name: localAChannelName,
+                url: 'https://streams.example.test/switcher-favorite-a.m3u8',
+            },
+        ]);
+        const localBPath = writeTemporaryM3uFile(dataDir, localBFileName, [
+            {
+                groupTitle: 'Sports',
+                name: localBChannelName,
+                url: 'https://streams.example.test/switcher-favorite-b.m3u8',
+            },
+        ]);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localAPath);
+            await importM3uPlaylistFromNativeDialog(app, localBPath);
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, localADisplayName)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await toggleFavoriteForChannel(app.mainWindow, localAChannelName);
+            await channelItemByTitle(app.mainWindow, localAChannelName)
+                .first()
+                .click();
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, localBDisplayName)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await toggleFavoriteForChannel(app.mainWindow, localBChannelName);
+            await channelItemByTitle(app.mainWindow, localBChannelName)
+                .first()
+                .click();
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, localADisplayName)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+
+            await openPlaylistFavorites(app.mainWindow);
+            await expect(channelItemByTitle(app.mainWindow, localAChannelName)).toHaveCount(
+                1
+            );
+            await expect(channelItemByTitle(app.mainWindow, localBChannelName)).toHaveCount(
+                0
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, localBDisplayName);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/global-favorites$/
+            );
+            await expect(channelItemByTitle(app.mainWindow, localBChannelName)).toHaveCount(
+                1
+            );
+            await expect(channelItemByTitle(app.mainWindow, localAChannelName)).toHaveCount(
+                0
+            );
+
+            await openPlaylistRecent(app.mainWindow);
+            await expect(channelItemByTitle(app.mainWindow, localBChannelName)).toHaveCount(
+                1
+            );
+            await expect(channelItemByTitle(app.mainWindow, localAChannelName)).toHaveCount(
+                0
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, localADisplayName);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/global-recent$/
+            );
+            await expect(channelItemByTitle(app.mainWindow, localAChannelName)).toHaveCount(
+                1
+            );
+            await expect(channelItemByTitle(app.mainWindow, localBChannelName)).toHaveCount(
+                0
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('switches away from importing Xtream playlists, returns before completion, and avoids redundant reimport after caching', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const localAPath = writeTemporaryM3uFile(dataDir, localAFileName, [
+            {
+                groupTitle: 'News',
+                name: 'Import Switch Local',
+                url: 'https://streams.example.test/import-switch-local.m3u8',
+            },
+        ]);
+        const app = await launchElectronApp(dataDir, {
+            env: {
+                IPTVNATOR_DB_WORKER_BATCH_DELAY_MS: dbWorkerBatchDelayMs,
+            },
+        });
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localAPath);
+            await waitForM3uCatalog(app.mainWindow);
+
+            await addXtreamPortal(app.mainWindow, {
+                name: importingXtreamName,
+                password: xtreamStressPassword,
+                username: xtreamStressUsername,
+            });
+
+            const overlay = app.mainWindow.locator('.workspace-loading-overlay');
+            await expect(overlay).toBeVisible({ timeout: 15000 });
+            await waitForDbOperationEvent(app.mainWindow, {
+                operation: 'save-content',
+                predicate: (event) =>
+                    event.status === 'progress' &&
+                    (event.current ?? 0) > 0 &&
+                    (event.total ?? 0) > 0,
+                timeoutMs: 30000,
+            });
+
+            await switchPlaylistFromHeader(app.mainWindow, localADisplayName);
+            await waitForM3uCatalog(app.mainWindow);
+            await expect(overlay).toHaveCount(0);
+
+            await switchPlaylistFromHeader(app.mainWindow, importingXtreamName);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod$/
+            );
+            await Promise.race([
+                overlay.waitFor({ state: 'visible', timeout: 15000 }),
+                waitForXtreamCatalog(app.mainWindow),
+            ]);
+
+            await waitForXtreamCatalog(app.mainWindow);
+
+            await switchPlaylistFromHeader(app.mainWindow, localADisplayName);
+            await waitForM3uCatalog(app.mainWindow);
+
+            const startedBeforeReturn = await countDbEvents(
+                app.mainWindow,
+                'save-content',
+                'started'
+            );
+
+            await switchPlaylistFromHeader(app.mainWindow, importingXtreamName);
+            await waitForXtreamCatalog(app.mainWindow);
+            await expect(overlay).toHaveCount(0);
+
+            await app.mainWindow.waitForTimeout(1200);
+
+            const startedAfterReturn = await countDbEvents(
+                app.mainWindow,
+                'save-content',
+                'started'
+            );
+            expect(startedAfterReturn).toBe(startedBeforeReturn);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('keeps cached Xtream content browseable with an unavailable warning after the portal goes offline and after restart', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const offlineLocalPath = writeTemporaryM3uFile(
+            dataDir,
+            offlineLocalFileName,
+            [
+                {
+                    groupTitle: 'News',
+                    name: 'Offline Local Channel',
+                    url: 'https://streams.example.test/offline-local.m3u8',
+                },
+            ]
+        );
+        let app = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(app.mainWindow);
+            await selectSettingsOption(
+                app.mainWindow,
+                'select-startup-behavior',
+                'restore-last-view'
+            );
+            await saveSettings(app.mainWindow);
+
+            await addXtreamPortal(app.mainWindow, {
+                name: offlineXtreamName,
+                password: defaultXtreamPassword,
+                username: defaultXtreamUsername,
+            });
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await waitForXtreamCatalog(app.mainWindow);
+
+            await importM3uPlaylistFromNativeDialog(app, offlineLocalPath);
+            await waitForM3uCatalog(app.mainWindow);
+
+            await openSources(app.mainWindow);
+            const dialog = await openSourceEditor(
+                app.mainWindow,
+                offlineXtreamName
+            );
+            await updateSourceDialog(dialog, {
+                serverUrl: xtreamMockServer.replace(/:\d+$/, ':65530'),
+            });
+            await saveSourceDialog(app.mainWindow, dialog);
+
+            await sourceRowByTitle(app.mainWindow, offlineLocalDisplayName)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+
+            await switchPlaylistFromHeader(app.mainWindow, offlineXtreamName);
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectXtreamUnavailableWarning(app.mainWindow);
+            await expect(app.mainWindow.locator('.xtream-content-gate')).toHaveCount(
+                0
+            );
+
+            app = await restartElectronApp(app, dataDir);
+
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectXtreamUnavailableWarning(app.mainWindow);
+            await expect(app.mainWindow.locator('.xtream-content-gate')).toHaveCount(
+                0
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+async function openPlaylistSwitcher(page: Page): Promise<void> {
+    await page
+        .locator('app-playlist-switcher .playlist-switcher-trigger')
+        .click();
+    await expect(
+        page.locator('.cdk-overlay-pane .playlist-item').first()
+    ).toBeVisible();
+}
+
+async function switchPlaylistFromHeader(
+    page: Page,
+    title: string
+): Promise<void> {
+    await openPlaylistSwitcher(page);
+    const item = page
+        .locator('.cdk-overlay-pane .playlist-item')
+        .filter({ hasText: title })
+        .first();
+
+    await expect(item).toBeVisible();
+    await item.click();
+    await expect(page.locator('.cdk-overlay-pane .playlist-item')).toHaveCount(
+        0
+    );
+}
+
+async function expectPathname(page: Page, pattern: RegExp): Promise<void> {
+    await expect
+        .poll(() => new URL(page.url()).pathname, { timeout: 20000 })
+        .toMatch(pattern);
+}
+
+async function countDbEvents(
+    page: Page,
+    operation: string,
+    status: string
+): Promise<number> {
+    return page.evaluate(
+        ({ operation, status: desiredStatus }) =>
+            (window.__dbOperationEvents ?? []).filter(
+                (event) =>
+                    event.operation === operation &&
+                    event.status === desiredStatus
+            ).length,
+        { operation, status }
+    );
+}
+
+async function selectSettingsOption(
+    page: Page,
+    selectTestId: string,
+    optionTestId: string
+): Promise<void> {
+    await page.getByTestId(selectTestId).click();
+    await page.getByTestId(optionTestId).click();
+}
+
+async function expectXtreamUnavailableWarning(page: Page): Promise<void> {
+    await expect(
+        page.getByTestId('xtream-offline-warning')
+    ).toBeVisible({ timeout: 20000 });
+}
+
+async function toggleFavoriteForChannel(page: Page, title: string): Promise<void> {
+    const item = channelItemByTitle(page, title).first();
+
+    await expect(item).toBeVisible({ timeout: 20000 });
+    await item.hover();
+    await item.locator('.favorite-button').first().click();
+    await expect(item.locator('.favorite-button mat-icon').first()).toHaveText(/star/);
+}
diff --git a/apps/electron-backend-e2e/src/portal-mock-fixtures.ts b/apps/electron-backend-e2e/src/portal-mock-fixtures.ts
new file mode 100644
index 0000000..cf53230
--- /dev/null
+++ b/apps/electron-backend-e2e/src/portal-mock-fixtures.ts
@@ -0,0 +1,453 @@
+import { APIRequestContext } from '@playwright/test';
+import {
+    defaultStalkerMacAddress,
+    expect,
+    stalkerMockServer,
+    xtreamMockServer,
+} from './electron-test-fixtures';
+
+export type XtreamCategory = {
+    category_id: string;
+    category_name: string;
+};
+
+export type XtreamLiveStream = {
+    added?: string;
+    category_id?: string;
+    epg_channel_id?: string;
+    name?: string;
+    stream_id?: number | string;
+    stream_type?: string;
+    tv_archive?: number | string;
+    tv_archive_duration?: number | string;
+};
+
+export type XtreamVodStream = {
+    added?: string;
+    category_id?: string;
+    name?: string;
+    stream_id?: number | string;
+};
+
+export type XtreamSeriesItem = {
+    added?: string;
+    category_id?: number | string;
+    last_modified?: string;
+    name?: string;
+    releaseDate?: string;
+    series_id?: number | string;
+};
+
+export type XtreamCategoryFixture<T> = {
+    categoryId: string;
+    categoryName: string;
+    items: T[];
+};
+
+export type XtreamRawEpgListing = {
+    channel_id?: string;
+    description?: string;
+    end?: string;
+    epg_id?: string;
+    id?: string;
+    lang?: string;
+    start?: string;
+    start_timestamp?: string;
+    stop_timestamp?: string;
+    title?: string;
+};
+
+export type XtreamNormalizedEpgListing = {
+    channelId: string;
+    description: string;
+    end: string;
+    id: string;
+    rawDescription: string;
+    rawEnd: string;
+    rawStart: string;
+    rawTitle: string;
+    start: string;
+    startTimestamp: number;
+    stopTimestamp: number;
+    title: string;
+};
+
+export type XtreamEpgFixture = {
+    categoryId: string;
+    categoryName: string;
+    fullEpg: XtreamNormalizedEpgListing[];
+    rawFullEpg: XtreamRawEpgListing[];
+    rawShortEpg: XtreamRawEpgListing[];
+    shortEpg: XtreamNormalizedEpgListing[];
+    stream: XtreamLiveStream;
+};
+
+type StalkerCategory = {
+    id: string;
+    title: string;
+};
+
+type StalkerProxyPayload<T> = {
+    payload: {
+        js: T;
+    };
+};
+
+type StalkerOrderedList<T> = {
+    data: T[];
+};
+
+type StalkerSeasonLike = {
+    id?: number | string;
+};
+
+export type StalkerContentItem = {
+    id?: number | string;
+    name?: string;
+    o_name?: string;
+};
+
+export type StalkerCategoryFixture = {
+    categoryId: string;
+    categoryName: string;
+    items: StalkerContentItem[];
+};
+
+export async function fetchXtreamLiveFixture(
+    request: APIRequestContext,
+    credentials = { username: 'minimal', password: 'minimal' }
+): Promise<XtreamCategoryFixture<XtreamLiveStream>> {
+    return fetchXtreamFixture<XtreamLiveStream>(request, {
+        categoriesAction: 'get_live_categories',
+        itemsAction: 'get_live_streams',
+        ...credentials,
+    });
+}
+
+export async function fetchXtreamVodFixture(
+    request: APIRequestContext,
+    credentials = { username: 'minimal', password: 'minimal' }
+): Promise<XtreamCategoryFixture<XtreamVodStream>> {
+    return fetchXtreamFixture<XtreamVodStream>(request, {
+        categoriesAction: 'get_vod_categories',
+        itemsAction: 'get_vod_streams',
+        ...credentials,
+    });
+}
+
+export async function fetchXtreamSeriesFixture(
+    request: APIRequestContext,
+    credentials = { username: 'minimal', password: 'minimal' }
+): Promise<XtreamCategoryFixture<XtreamSeriesItem>> {
+    return fetchXtreamFixture<XtreamSeriesItem>(request, {
+        categoriesAction: 'get_series_categories',
+        itemsAction: 'get_series',
+        ...credentials,
+    });
+}
+
+export async function fetchXtreamEpgFixture(
+    request: APIRequestContext,
+    credentials = { username: 'epg', password: 'epg' }
+): Promise<XtreamEpgFixture> {
+    const liveFixture = await fetchXtreamLiveFixture(request, credentials);
+    const stream = liveFixture.items[0];
+    if (!stream) {
+        throw new Error('Xtream EPG fixture returned no live stream.');
+    }
+    const streamId = Number(stream.stream_id);
+
+    if (!Number.isFinite(streamId) || streamId <= 0) {
+        throw new Error('Xtream EPG fixture returned an invalid stream id.');
+    }
+
+    const rawShortResponse = await fetchJson<{
+        epg_listings?: XtreamRawEpgListing[];
+    }>(
+        request,
+        `${xtreamMockServer}/player_api.php?action=get_short_epg&username=${encodeURIComponent(
+            credentials.username
+        )}&password=${encodeURIComponent(
+            credentials.password
+        )}&stream_id=${streamId}&limit=3`
+    );
+    const rawFullResponse = await fetchJson<{
+        epg_listings?: XtreamRawEpgListing[];
+    }>(
+        request,
+        `${xtreamMockServer}/player_api.php?action=get_simple_data_table&username=${encodeURIComponent(
+            credentials.username
+        )}&password=${encodeURIComponent(
+            credentials.password
+        )}&stream_id=${streamId}`
+    );
+
+    const rawShortEpg = rawShortResponse.epg_listings ?? [];
+    const rawFullEpg = rawFullResponse.epg_listings ?? [];
+
+    if (rawShortEpg.length === 0 || rawFullEpg.length === 0) {
+        throw new Error('Xtream EPG fixture returned no schedule data.');
+    }
+
+    return {
+        categoryId: liveFixture.categoryId,
+        categoryName: liveFixture.categoryName,
+        stream,
+        rawShortEpg,
+        rawFullEpg,
+        shortEpg: normalizeXtreamEpgListings(rawShortEpg),
+        fullEpg: normalizeXtreamEpgListings(rawFullEpg),
+    };
+}
+
+export async function fetchStalkerCategoryFixture(
+    request: APIRequestContext,
+    type: 'itv' | 'series' | 'vod'
+): Promise<StalkerCategoryFixture> {
+    const categoriesResponse = await fetchJson<
+        StalkerProxyPayload<StalkerCategory[]>
+    >(
+        request,
+        buildStalkerProxyUrl('get_categories', {
+            type,
+        })
+    );
+    const categories = categoriesResponse.payload.js ?? [];
+
+    for (const category of categories) {
+        const itemsResponse = await fetchJson<
+            StalkerProxyPayload<StalkerOrderedList<StalkerContentItem>>
+        >(
+            request,
+            buildStalkerProxyUrl('get_ordered_list', {
+                category: String(category.id),
+                p: '1',
+                type,
+            })
+        );
+        const items = itemsResponse.payload.js.data ?? [];
+
+        if (items.length > 0) {
+            if (type === 'series') {
+                const playableSeries = await findPlayableStalkerSeriesItem(
+                    request,
+                    items
+                );
+
+                if (!playableSeries) {
+                    continue;
+                }
+
+                return {
+                    categoryId: String(category.id),
+                    categoryName: category.title,
+                    items: [
+                        playableSeries,
+                        ...items.filter(
+                            (item) =>
+                                String(item.id ?? '') !==
+                                String(playableSeries.id ?? '')
+                        ),
+                    ],
+                };
+            }
+
+            return {
+                categoryId: String(category.id),
+                categoryName: category.title,
+                items,
+            };
+        }
+    }
+
+    throw new Error(`Stalker mock server returned no ${type} items.`);
+}
+
+export function getXtreamTitle(
+    item: XtreamLiveStream | XtreamVodStream | XtreamSeriesItem
+): string {
+    return `${item.name ?? ''}`.trim();
+}
+
+export function getXtreamDateValue(
+    item: XtreamVodStream | XtreamSeriesItem
+): number {
+    if ('last_modified' in item && item.last_modified) {
+        return Number.parseInt(item.last_modified, 10) || 0;
+    }
+
+    return Number.parseInt(item.added ?? '', 10) || 0;
+}
+
+export function getStalkerTitle(item: StalkerContentItem): string {
+    return `${item.o_name ?? item.name ?? ''}`.trim();
+}
+
+export function pickDistinctTitles<T>(
+    items: T[],
+    getTitle: (item: T) => string
+): [string, string] {
+    const titles = items
+        .map((item) => getTitle(item))
+        .map((title) => title.trim())
+        .filter((title, index, allTitles) => {
+            return (
+                title.length > 0 &&
+                allTitles.findIndex((candidate) => candidate === title) ===
+                    index
+            );
+        });
+
+    if (titles.length < 2) {
+        throw new Error('Expected at least two distinct item titles.');
+    }
+
+    return [titles[0], titles[1]];
+}
+
+async function fetchXtreamFixture<T extends { category_id?: string | number }>(
+    request: APIRequestContext,
+    options: {
+        categoriesAction: string;
+        itemsAction: string;
+        password: string;
+        username: string;
+    }
+): Promise<XtreamCategoryFixture<T>> {
+    const { categoriesAction, itemsAction, password, username } = options;
+    const categories = await fetchJson<XtreamCategory[]>(
+        request,
+        `${xtreamMockServer}/player_api.php?action=${encodeURIComponent(
+            categoriesAction
+        )}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(
+            password
+        )}`
+    );
+
+    for (const category of categories) {
+        const items = await fetchJson<T[]>(
+            request,
+            `${xtreamMockServer}/player_api.php?action=${encodeURIComponent(
+                itemsAction
+            )}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(
+                password
+            )}&category_id=${encodeURIComponent(category.category_id)}`
+        );
+
+        if (items.length > 0) {
+            return {
+                categoryId: String(category.category_id),
+                categoryName: category.category_name,
+                items,
+            };
+        }
+    }
+
+    throw new Error(`Xtream mock server returned no items for ${itemsAction}.`);
+}
+
+async function fetchJson<T>(
+    request: APIRequestContext,
+    url: string
+): Promise<T> {
+    const response = await request.get(url);
+
+    expect(response.ok()).toBeTruthy();
+
+    return (await response.json()) as T;
+}
+
+function normalizeXtreamEpgListings(
+    listings: XtreamRawEpgListing[]
+): XtreamNormalizedEpgListing[] {
+    return listings
+        .map((listing, index) => {
+            const startTimestamp = Number.parseInt(
+                String(listing.start_timestamp ?? ''),
+                10
+            );
+            const stopTimestamp = Number.parseInt(
+                String(listing.stop_timestamp ?? ''),
+                10
+            );
+
+            return {
+                id: String(listing.id ?? index),
+                title: decodeXtreamText(String(listing.title ?? '')),
+                description: decodeXtreamText(
+                    String(listing.description ?? '')
+                ),
+                rawTitle: String(listing.title ?? ''),
+                rawDescription: String(listing.description ?? ''),
+                rawStart: String(listing.start ?? ''),
+                rawEnd: String(listing.end ?? ''),
+                start: new Date(startTimestamp * 1000).toISOString(),
+                end: new Date(stopTimestamp * 1000).toISOString(),
+                startTimestamp,
+                stopTimestamp,
+                channelId: String(listing.channel_id ?? listing.epg_id ?? ''),
+            };
+        })
+        .sort((left, right) => left.startTimestamp - right.startTimestamp);
+}
+
+function decodeXtreamText(value: string): string {
+    return Buffer.from(value, 'base64').toString('utf-8');
+}
+
+function buildStalkerProxyUrl(
+    action: string,
+    params: Record<string, string>
+): string {
+    const searchParams = new URLSearchParams({
+        action,
+        macAddress: defaultStalkerMacAddress,
+        url: `${stalkerMockServer}/portal.php`,
+        ...params,
+    });
+
+    return `${stalkerMockServer}/stalker?${searchParams.toString()}`;
+}
+
+async function findPlayableStalkerSeriesItem(
+    request: APIRequestContext,
+    items: StalkerContentItem[]
+): Promise<StalkerContentItem | null> {
+    for (const item of items) {
+        const itemId = String(item.id ?? '').trim();
+
+        if (!itemId) {
+            continue;
+        }
+
+        const seasonsResponse = await fetchJson<
+            StalkerProxyPayload<
+                StalkerOrderedList<StalkerSeasonLike> | StalkerSeasonLike[]
+            >
+        >(
+            request,
+            buildStalkerProxyUrl('get_ordered_list', {
+                movie_id: itemId,
+                p: '1',
+                type: 'series',
+            })
+        );
+        const seasons = extractStalkerSeriesItems(seasonsResponse.payload.js);
+
+        if (seasons.length > 0) {
+            return item;
+        }
+    }
+
+    return null;
+}
+
+function extractStalkerSeriesItems<T>(
+    payload: StalkerOrderedList<T> | T[] | undefined
+): T[] {
+    if (Array.isArray(payload)) {
+        return payload;
+    }
+
+    return payload?.data ?? [];
+}
diff --git a/apps/electron-backend-e2e/src/providers.e2e.ts b/apps/electron-backend-e2e/src/providers.e2e.ts
new file mode 100644
index 0000000..236c935
--- /dev/null
+++ b/apps/electron-backend-e2e/src/providers.e2e.ts
@@ -0,0 +1,87 @@
+import type { Page } from '@playwright/test';
+
+import {
+    addStalkerPortal,
+    addXtreamPortal,
+    closeElectronApp,
+    defaultStalkerPortalName,
+    defaultXtreamPortalName,
+    expect,
+    expectPortalDebugSuccess,
+    goToDashboard,
+    launchElectronApp,
+    resetMockServers,
+    stalkerMockServer,
+    test,
+    waitForStalkerCatalog,
+    waitForXtreamCatalog,
+} from './electron-test-fixtures';
+
+test.describe('Electron Provider Smoke Tests', () => {
+    test('loads Xtream content through the Electron IPC path', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow);
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectPortalDebugSuccess(app.mainWindow, 'xtream');
+
+            await goToDashboard(app.mainWindow);
+            await expectRecentSourceCard(
+                app.mainWindow,
+                defaultXtreamPortalName
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('loads Stalker content through the Electron IPC path', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow, {
+                portalUrl: `${stalkerMockServer}/portal.php`,
+            });
+            await waitForStalkerCatalog(app.mainWindow);
+            await expectPortalDebugSuccess(app.mainWindow, 'stalker');
+
+            await goToDashboard(app.mainWindow);
+            await expectRecentSourceCard(
+                app.mainWindow,
+                defaultStalkerPortalName
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+async function expectRecentSourceCard(
+    page: Page,
+    title: string
+): Promise<void> {
+    await expect(
+        page.getByTestId('dashboard-recent-sources-rail')
+    ).toBeVisible({
+        timeout: 20000,
+    });
+
+    await expect(
+        page.getByTestId('dashboard-recent-sources-rail-card').filter({
+            hasText: title,
+        }).first()
+    ).toBeVisible({
+        timeout: 20000,
+    });
+}
diff --git a/apps/electron-backend-e2e/src/recent.e2e.ts b/apps/electron-backend-e2e/src/recent.e2e.ts
new file mode 100644
index 0000000..b277325
--- /dev/null
+++ b/apps/electron-backend-e2e/src/recent.e2e.ts
@@ -0,0 +1,661 @@
+import { Page } from '@playwright/test';
+import {
+    addStalkerPortal,
+    addXtreamPortal,
+    channelItemByTitle,
+    clickCategoryById,
+    clickGridListCardByTitle,
+    clickCategoryByNameExact,
+    clickFirstGridListCard,
+    closeElectronApp,
+    contentCardByTitle,
+    defaultXtreamPassword,
+    defaultXtreamUsername,
+    expectPathname,
+    expectVisibleContentCardTitle,
+    expect,
+    importM3uPlaylistFromNativeDialog,
+    launchElectronApp,
+    openPlaylistFavorites,
+    openPlaylistRecent,
+    openWorkspaceSection,
+    openSources,
+    resetMockServers,
+    restartElectronApp,
+    sourceRowByTitle,
+    switchUnifiedCollectionContent,
+    switchUnifiedCollectionScope,
+    test,
+    playlistSwitcherTitle,
+    waitForM3uCatalog,
+    waitForStalkerCatalog,
+    waitForXtreamWorkspaceReady,
+    writeTemporaryM3uFile,
+} from './electron-test-fixtures';
+import {
+    fetchStalkerCategoryFixture,
+    fetchXtreamLiveFixture,
+    fetchXtreamSeriesFixture,
+    fetchXtreamVodFixture,
+    getStalkerTitle,
+    getXtreamTitle,
+    pickDistinctTitles,
+} from './portal-mock-fixtures';
+
+test.describe('Electron Recently Viewed', () => {
+    test('keeps unified live detail open when re-clicking the active M3U recent item', async ({
+        dataDir,
+    }) => {
+        const filePath = writeTemporaryM3uFile(
+            dataDir,
+            'm3u-live-reclick.m3u',
+            [
+                {
+                    groupTitle: 'Live',
+                    name: 'Stable Recent Channel',
+                    url: 'https://streams.example.test/stable-recent.m3u8',
+                },
+            ]
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, filePath);
+            await waitForM3uCatalog(app.mainWindow);
+
+            await channelItemByTitle(app.mainWindow, 'Stable Recent Channel')
+                .first()
+                .click();
+
+            await openPlaylistRecent(app.mainWindow);
+
+            const item = channelItemByTitle(
+                app.mainWindow,
+                'Stable Recent Channel'
+            ).first();
+            const closeButton = app.mainWindow
+                .locator('.player-toolbar .close-btn')
+                .first();
+
+            await item.click();
+            await expect(closeButton).toBeVisible({ timeout: 20000 });
+
+            await item.click();
+            await expect(closeButton).toBeVisible({ timeout: 20000 });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('tracks M3U recent channels in newest-first order, supports all-playlists scope, and persists removals after restart', async ({
+        dataDir,
+    }) => {
+        const playlistTitle = 'm3u-recent-source.m3u';
+        const playlistSourceTitle = 'm3u-recent-source';
+        const filePath = writeTemporaryM3uFile(dataDir, playlistTitle, [
+            {
+                groupTitle: 'Live',
+                name: 'Recent Channel One',
+                url: 'https://streams.example.test/recent-one.m3u8',
+            },
+            {
+                groupTitle: 'Live',
+                name: 'Recent Channel Two',
+                url: 'https://streams.example.test/recent-two.m3u8',
+            },
+        ]);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, filePath);
+            await waitForM3uCatalog(app.mainWindow);
+
+            await channelItemByTitle(app.mainWindow, 'Recent Channel One')
+                .first()
+                .click();
+            await channelItemByTitle(app.mainWindow, 'Recent Channel Two')
+                .first()
+                .click();
+
+            await openPlaylistRecent(app.mainWindow);
+            await expect
+                .poll(() => visibleLiveTitles(app.mainWindow))
+                .toEqual(['Recent Channel Two', 'Recent Channel One']);
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await expect
+                .poll(() => visibleLiveTitles(app.mainWindow))
+                .toEqual(['Recent Channel Two', 'Recent Channel One']);
+
+            await removeLiveRecentItem(app.mainWindow, 'Recent Channel Two');
+            await expect
+                .poll(() => visibleLiveTitles(app.mainWindow))
+                .toEqual(['Recent Channel One']);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, playlistSourceTitle)
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await openPlaylistRecent(app.mainWindow);
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await expect
+                .poll(() => visibleLiveTitles(app.mainWindow))
+                .toEqual(['Recent Channel One']);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('tracks Xtream live, movie, and series history across playlist and all-playlists scope, persists after restart, and supports clearing', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const liveFixture = await fetchXtreamLiveFixture(
+            request,
+            xtreamCredentials
+        );
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const [liveTitle] = pickDistinctTitles(
+            liveFixture.items,
+            getXtreamTitle
+        );
+        const portalTitle = 'Xtream Recent Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                liveFixture.categoryName
+            );
+            await toggleFavoriteForChannel(app.mainWindow, liveTitle);
+            await openPlaylistFavorites(app.mainWindow);
+            await channelItemByTitle(app.mainWindow, liveTitle).first().click();
+            await closeUnifiedLiveDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            // Pick from the displayed grid: fixture order ≠ display order (date-desc
+            // sort + pagination), so the first fixture item may not be on page 1.
+            // Use clickFirstGridListCard to atomically read + click the first visible
+            // card, avoiding a race where the grid re-renders between title read and
+            // a separate search-by-title click.
+            const movieTitle = await clickFirstGridListCard(app.mainWindow);
+            await playCurrentDetail(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            const seriesTitle = await clickFirstGridListCard(app.mainWindow);
+            await playFirstSeriesEpisode(app.mainWindow);
+
+            await openPlaylistRecent(app.mainWindow);
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, portalTitle).first().click();
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openPlaylistRecent(app.mainWindow);
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await clearRecentItems(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(0);
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await clearRecentItems(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(0);
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+            await clearRecentItems(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('opens Xtream recent movies and series inline from recent without switching the playlist or showing the sidebar', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            xtreamCredentials
+        );
+        const seriesFixture = await fetchXtreamSeriesFixture(
+            request,
+            xtreamCredentials
+        );
+        const portalTitle = 'Xtream Recent Detail Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            const movieTitle = await clickFirstGridListCard(app.mainWindow);
+            await playCurrentDetail(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                seriesFixture.categoryName
+            );
+            const seriesTitle = await clickFirstGridListCard(app.mainWindow);
+            await playFirstSeriesEpisode(app.mainWindow);
+
+            await openPlaylistRecent(app.mainWindow);
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                portalTitle
+            );
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await contentCardByTitle(app.mainWindow, movieTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-recent$/,
+                title: movieTitle,
+                playlistTitle: portalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+            await contentCardByTitle(app.mainWindow, seriesTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-recent$/,
+                title: seriesTitle,
+                playlistTitle: portalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('tracks Stalker live, movie, and series history across playlist and all-playlists scope, and preserves it after restart', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const liveFixture = await fetchStalkerCategoryFixture(request, 'itv');
+        const vodFixture = await fetchStalkerCategoryFixture(request, 'vod');
+        const seriesFixture = await fetchStalkerCategoryFixture(
+            request,
+            'series'
+        );
+        const [liveTitle] = pickDistinctTitles(
+            liveFixture.items,
+            getStalkerTitle
+        );
+        const [movieTitle] = pickDistinctTitles(
+            vodFixture.items,
+            getStalkerTitle
+        );
+        const [seriesTitle] = pickDistinctTitles(
+            seriesFixture.items,
+            getStalkerTitle
+        );
+        const portalTitle = 'Stalker Recent Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForStalkerCatalog(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Live TV', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, liveFixture.categoryId);
+            await toggleFavoriteForChannel(app.mainWindow, liveTitle);
+            await openPlaylistFavorites(app.mainWindow);
+            await channelItemByTitle(app.mainWindow, liveTitle).first().click();
+            await closeUnifiedLiveDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, vodFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, movieTitle);
+            await playCurrentDetail(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, seriesFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, seriesTitle);
+            await playFirstSeriesEpisode(app.mainWindow);
+
+            await openPlaylistRecent(app.mainWindow);
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(1);
+
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(1);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await sourceRowByTitle(app.mainWindow, portalTitle).first().click();
+            await waitForStalkerCatalog(app.mainWindow);
+            await openPlaylistRecent(app.mainWindow);
+            await switchUnifiedCollectionScope(app.mainWindow, 'All playlists');
+            await switchUnifiedCollectionContent(app.mainWindow, 'Live TV');
+            await expect(
+                channelItemByTitle(app.mainWindow, liveTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expect(
+                contentCardByTitle(app.mainWindow, movieTitle)
+            ).toHaveCount(1);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expect(
+                contentCardByTitle(app.mainWindow, seriesTitle)
+            ).toHaveCount(1);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('opens Stalker recent movies and series inline from recent without showing the sidebar', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const vodFixture = await fetchStalkerCategoryFixture(request, 'vod');
+        const seriesFixture = await fetchStalkerCategoryFixture(
+            request,
+            'series'
+        );
+        const [movieTitle] = pickDistinctTitles(
+            vodFixture.items,
+            getStalkerTitle
+        );
+        const [seriesTitle] = pickDistinctTitles(
+            seriesFixture.items,
+            getStalkerTitle
+        );
+        const portalTitle = 'Stalker Recent Detail Source';
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow, {
+                name: portalTitle,
+            });
+            await waitForStalkerCatalog(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, vodFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, movieTitle);
+            await playCurrentDetail(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Series', exact: true })
+                .click();
+            await clickCategoryById(app.mainWindow, seriesFixture.categoryId);
+            await clickGridListCardByTitle(app.mainWindow, seriesTitle);
+            await playFirstSeriesEpisode(app.mainWindow);
+
+            await openPlaylistRecent(app.mainWindow);
+            await expect(playlistSwitcherTitle(app.mainWindow)).toContainText(
+                portalTitle
+            );
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Movies');
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+            await contentCardByTitle(app.mainWindow, movieTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-recent$/,
+                title: movieTitle,
+                playlistTitle: portalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+            await expectVisibleContentCardTitle(app.mainWindow, movieTitle);
+
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+            await contentCardByTitle(app.mainWindow, seriesTitle)
+                .first()
+                .click();
+            await expectInlineCollectionDetail(app.mainWindow, {
+                pathname: /\/workspace\/global-recent$/,
+                title: seriesTitle,
+                playlistTitle: portalTitle,
+            });
+
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(app.mainWindow, /\/workspace\/global-recent$/);
+            await switchUnifiedCollectionContent(app.mainWindow, 'Series');
+            await expectVisibleContentCardTitle(app.mainWindow, seriesTitle);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+const xtreamCredentials = {
+    username: defaultXtreamUsername,
+    password: defaultXtreamPassword,
+};
+
+async function clearRecentItems(page: Page, typeLabel: string): Promise<void> {
+    await page
+        .getByRole('button', { name: `Clear recently viewed ${typeLabel}` })
+        .click();
+    await page.getByRole('button', { name: 'Yes' }).click();
+}
+
+async function closeUnifiedLiveDetail(page: Page): Promise<void> {
+    const closeButton = page.locator('.player-toolbar .close-btn').first();
+
+    await expect(closeButton).toBeVisible({ timeout: 20000 });
+    await closeButton.click();
+}
+
+async function goBackFromDetail(page: Page): Promise<void> {
+    const backButton = page
+        .locator('app-content-hero .hero__back-button')
+        .first();
+
+    await expect(backButton).toBeVisible({ timeout: 20000 });
+    try {
+        await backButton.click({ timeout: 5000 });
+    } catch {
+        await backButton.evaluate((button: HTMLButtonElement) =>
+            button.click()
+        );
+    }
+}
+
+async function expectInlineCollectionDetail(
+    page: Page,
+    params: {
+        pathname: RegExp;
+        title: string;
+        playlistTitle: string;
+    }
+): Promise<void> {
+    await expectPathname(page, params.pathname);
+    await expect(playlistSwitcherTitle(page)).toContainText(
+        params.playlistTitle
+    );
+    await expect(page.locator('app-workspace-context-panel')).toHaveCount(0);
+    await expect(page.locator('app-content-hero')).toContainText(params.title);
+    await expect(
+        page.locator('app-content-hero .hero__back-button').first()
+    ).toBeVisible({ timeout: 20000 });
+}
+
+async function playCurrentDetail(page: Page): Promise<void> {
+    const playButton = page.locator('button.play-btn').first();
+
+    await expect(playButton).toBeVisible({ timeout: 20000 });
+    await playButton.click();
+}
+
+async function playFirstSeriesEpisode(page: Page): Promise<void> {
+    const seasonCard = page.locator('.season-card').first();
+    const episodeCard = page
+        .locator('.episode-card, .episode-list-item')
+        .first();
+
+    await expect
+        .poll(
+            async () =>
+                (await seasonCard.count()) + (await episodeCard.count()),
+            { timeout: 20000 }
+        )
+        .toBeGreaterThan(0);
+
+    if ((await seasonCard.count()) > 0) {
+        await seasonCard.scrollIntoViewIfNeeded();
+        await expect(seasonCard).toBeVisible({ timeout: 20000 });
+        await seasonCard.click();
+    }
+
+    await episodeCard.scrollIntoViewIfNeeded();
+    await expect(episodeCard).toBeVisible({ timeout: 20000 });
+    await episodeCard.click();
+}
+
+async function removeLiveRecentItem(page: Page, title: string): Promise<void> {
+    const item = channelItemByTitle(page, title).first();
+
+    await expect(item).toBeVisible({ timeout: 20000 });
+    await item.hover();
+    await item.locator('.favorite-button').first().click();
+}
+
+async function toggleFavoriteForChannel(
+    page: Page,
+    title: string
+): Promise<void> {
+    const item = channelItemByTitle(page, title).first();
+
+    await expect(item).toBeVisible({ timeout: 20000 });
+    await item.hover();
+    await item.locator('.favorite-button').first().click();
+}
+
+async function visibleLiveTitles(page: Page): Promise<string[]> {
+    return page
+        .locator('[data-test-id="channel-item"] .channel-name')
+        .allInnerTexts()
+        .then((titles) => titles.map((title) => title.trim()));
+}
diff --git a/apps/electron-backend-e2e/src/search.e2e.ts b/apps/electron-backend-e2e/src/search.e2e.ts
new file mode 100644
index 0000000..291dd71
--- /dev/null
+++ b/apps/electron-backend-e2e/src/search.e2e.ts
@@ -0,0 +1,1594 @@
+import { APIRequestContext, Locator, Page } from '@playwright/test';
+import { readFileSync } from 'fs';
+import {
+    addStalkerPortal,
+    addXtreamPortal,
+    closeElectronApp,
+    defaultStalkerMacAddress,
+    expect,
+    expectWorkspaceSearchScope,
+    expectWorkspaceSearchStatus,
+    fillWorkspaceSearch,
+    goToDashboard,
+    importM3uPlaylistFromNativeDialog,
+    launchElectronApp,
+    m3uFixturePath,
+    openGlobalFavorites,
+    resetMockServers,
+    stalkerMockServer,
+    test,
+    waitForM3uCatalog,
+    waitForPortalDebugEvent,
+    waitForStalkerCatalog,
+    waitForXtreamCatalog,
+    xtreamMockServer,
+} from './electron-test-fixtures';
+
+type XtreamCategory = {
+    category_id: string;
+    category_name: string;
+};
+
+type XtreamVodStream = {
+    category_id?: string;
+    id?: number | string;
+    name?: string;
+    series_id?: number | string;
+    stream_id?: number | string;
+    title?: string;
+    xtream_id?: number | string;
+};
+
+type StalkerCategory = {
+    id: string;
+    title: string;
+};
+
+type StalkerProxyPayload<T> = {
+    payload: {
+        js: T;
+    };
+};
+
+type StalkerOrderedList<T> = {
+    cur_page: number;
+    data: T[];
+    max_page_items: number;
+    total_items: number;
+    total_pages: number;
+};
+
+type StalkerContentItem = {
+    id?: number | string;
+    name?: string;
+    o_name?: string;
+};
+
+type XtreamVodFixture = {
+    candidateTitles: string[];
+    categoryId: string;
+    categoryName: string;
+    controlTitle: string;
+    itemId: string;
+    targetTitle: string;
+};
+
+type StalkerCategoryFixture = {
+    categoryId: string;
+    categoryName: string;
+    controlTitle: string;
+    targetTitle: string;
+};
+
+type M3uFixtureItem = {
+    groupTitle: string;
+    name: string;
+    url: string;
+};
+
+type M3uSearchFixture = {
+    controlTitle: string;
+    groupTitle: string;
+    siblingTitle: string;
+    targetTitle: string;
+};
+
+const headerSearchSelector =
+    'app-workspace-shell-header .search-field input[type="search"]';
+const xtreamSearchUsername = 'minimal';
+const xtreamSearchPassword = 'minimal';
+
+test.describe('Electron Workspace Search', () => {
+    test('@search @m3u filters all channels from the workspace header on playlist routes', async ({
+        dataDir,
+    }) => {
+        const sample = loadM3uSearchFixture();
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, m3uFixturePath);
+            await waitForM3uCatalog(app.mainWindow);
+
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/playlists\/[^/]+\/all$/
+            );
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await expectWorkspaceSearchScope(app.mainWindow, 'All channels');
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @m3u filters grouped channels by group and channel title from the workspace header', async ({
+        dataDir,
+    }) => {
+        const sample = loadM3uSearchFixture();
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, m3uFixturePath);
+            await waitForM3uCatalog(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Groups');
+
+            await fillWorkspaceSearch(app.mainWindow, sample.groupTitle);
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/playlists\/[^/]+\/groups$/
+            );
+            await expectQueryParam(app.mainWindow, 'q', sample.groupTitle);
+            await expectWorkspaceSearchScope(app.mainWindow, 'Groups');
+            await expect(
+                groupPanelHeader(app.mainWindow, sample.groupTitle)
+            ).toHaveCount(1);
+            await expect(
+                groupPanelHeader(app.mainWindow, sample.groupTitle).first()
+            ).toContainText(sample.groupTitle);
+            await expect(
+                groupPanelHeader(app.mainWindow, sample.groupTitle).first()
+            ).toContainText('2');
+            await ensureGroupSelected(app.mainWindow, sample.groupTitle);
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.siblingTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await expect(
+                groupPanelHeader(app.mainWindow, sample.groupTitle).first()
+            ).toContainText(sample.groupTitle);
+            await expect(
+                groupPanelHeader(app.mainWindow, sample.groupTitle).first()
+            ).toContainText('1');
+            await ensureGroupSelected(app.mainWindow, sample.groupTitle);
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.siblingTitle)
+            ).toHaveCount(0);
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @m3u filters playlist favorites from the workspace header', async ({
+        dataDir,
+    }) => {
+        const sample = loadM3uSearchFixture();
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, m3uFixturePath);
+            await waitForM3uCatalog(app.mainWindow);
+            await toggleFavoriteForChannel(app.mainWindow, sample.targetTitle);
+            await toggleFavoriteForChannel(app.mainWindow, sample.controlTitle);
+            await openWorkspaceSection(app.mainWindow, 'Favorites');
+
+            await fillWorkspaceSearch(app.mainWindow, sample.groupTitle);
+
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await expectQueryParam(app.mainWindow, 'q', sample.groupTitle);
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                'Global favorites'
+            );
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @m3u filters global favorites from the workspace rail without leaving the persisted query model', async ({
+        dataDir,
+    }) => {
+        const sample = loadM3uSearchFixture();
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, m3uFixturePath);
+            await waitForM3uCatalog(app.mainWindow);
+            await toggleFavoriteForChannel(app.mainWindow, sample.targetTitle);
+            await toggleFavoriteForChannel(app.mainWindow, sample.controlTitle);
+            await openGlobalFavorites(app.mainWindow);
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/global-favorites$/
+            );
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                'Global favorites'
+            );
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @xtream filters VOD content from the workspace header on a category route', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const sample = await fetchXtreamVodFixture(request);
+        const xtreamQueries = buildXtreamSearchQueries(
+            sample.targetTitle,
+            sample.controlTitle
+        );
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                password: xtreamSearchPassword,
+                username: xtreamSearchUsername,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod$/
+            );
+
+            await clickCategoryByNameExact(app.mainWindow, sample.categoryName);
+            await expect(
+                app.mainWindow
+                    .locator('.category-content-layout mat-card')
+                    .first()
+            ).toBeVisible({
+                timeout: 20000,
+            });
+            const resolvedTitles = await resolveVisibleXtreamTitles(
+                app.mainWindow,
+                sample
+            );
+            await fillWorkspaceSearch(
+                app.mainWindow,
+                resolvedTitles.targetTitle
+            );
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+$/
+            );
+            await expectQueryParam(
+                app.mainWindow,
+                'q',
+                resolvedTitles.targetTitle
+            );
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                `Movies / ${sample.categoryName}`
+            );
+            const contentLayout = app.mainWindow.locator(
+                '.category-content-layout'
+            );
+            await expect(contentLayout).toContainText(
+                flexibleTextPattern(resolvedTitles.targetTitle)
+            );
+            await expect(contentLayout).not.toContainText(
+                flexibleTextPattern(resolvedTitles.controlTitle)
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @xtream filters series content from the workspace header on a category route', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const sample = await fetchXtreamSeriesFixture(request);
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                password: xtreamSearchPassword,
+                username: xtreamSearchUsername,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/series$/
+            );
+
+            await clickCategoryByNameExact(app.mainWindow, sample.categoryName);
+            try {
+                await expect(
+                    app.mainWindow
+                        .locator('.category-content-layout mat-card')
+                        .first()
+                ).toBeVisible({
+                    timeout: 5000,
+                });
+            } catch {
+                await openWorkspaceSection(app.mainWindow, 'Series');
+                await expectPathname(
+                    app.mainWindow,
+                    /\/workspace\/xtreams\/[^/]+\/series$/
+                );
+                await clickCategoryByNameExact(
+                    app.mainWindow,
+                    sample.categoryName
+                );
+                await expect(
+                    app.mainWindow
+                        .locator('.category-content-layout mat-card')
+                        .first()
+                ).toBeVisible({
+                    timeout: 20000,
+                });
+            }
+            const resolvedTitles = await resolveVisibleXtreamTitles(
+                app.mainWindow,
+                sample
+            );
+            await fillWorkspaceSearch(
+                app.mainWindow,
+                resolvedTitles.targetTitle
+            );
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/series(?:\/[^/]+)?$/
+            );
+            await expectQueryParam(
+                app.mainWindow,
+                'q',
+                resolvedTitles.targetTitle
+            );
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                `Series / ${sample.categoryName}`
+            );
+            const contentLayout = app.mainWindow.locator(
+                '.category-content-layout'
+            );
+            await expect(contentLayout).toContainText(
+                flexibleTextPattern(resolvedTitles.targetTitle)
+            );
+            await expect(contentLayout).not.toContainText(
+                flexibleTextPattern(resolvedTitles.controlTitle)
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @xtream promotes dashboard header search into advanced playlist search', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const sample = await fetchXtreamVodFixture(request);
+        const xtreamQueries = buildXtreamSearchQueries(
+            sample.targetTitle,
+            sample.controlTitle
+        );
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                password: xtreamSearchPassword,
+                username: xtreamSearchUsername,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await goToDashboard(app.mainWindow);
+            const xtreamQuery = await performXtreamPlaylistSearch(
+                app.mainWindow,
+                xtreamQueries
+            );
+            await expectWorkspaceSearchScope(app.mainWindow, 'Advanced search');
+            await expect(
+                app.mainWindow.locator('app-search-layout app-search-form')
+            ).toHaveCount(0);
+            await expect(
+                xtreamSearchResultCards(app.mainWindow).first()
+            ).toBeVisible({ timeout: 20000 });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @xtream restores the search term and results after returning from a result detail route', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const sample = await fetchXtreamVodFixture(request);
+        const xtreamQueries = buildXtreamSearchQueries(
+            sample.targetTitle,
+            sample.controlTitle
+        );
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                password: xtreamSearchPassword,
+                username: xtreamSearchUsername,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await goToDashboard(app.mainWindow);
+            const xtreamQuery = await performXtreamPlaylistSearch(
+                app.mainWindow,
+                xtreamQueries
+            );
+
+            const resultCard = xtreamSearchResultCards(app.mainWindow).first();
+            await expect(resultCard).toBeVisible({ timeout: 20000 });
+            await resultCard.click();
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/(?:vod|live|series)\/[^/]+\/[^/]+$/
+            );
+
+            await app.mainWindow.goBack();
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/search$/
+            );
+            await expectQueryParam(app.mainWindow, 'q', xtreamQuery);
+            await expect(
+                app.mainWindow.locator(headerSearchSelector)
+            ).toHaveValue(xtreamQuery);
+            await expect(
+                xtreamSearchResultCards(app.mainWindow).first()
+            ).toBeVisible({ timeout: 20000 });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @xtream filters playlist favorites from the workspace header', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const sample = await fetchXtreamVodFixture(request);
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                password: xtreamSearchPassword,
+                username: xtreamSearchUsername,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod$/
+            );
+
+            await clickCategoryByNameExact(app.mainWindow, sample.categoryName);
+            await expect(
+                app.mainWindow
+                    .locator('.category-content-layout mat-card')
+                    .first()
+            ).toBeVisible({ timeout: 20000 });
+            const resolvedTitles = await resolveVisibleXtreamTitles(
+                app.mainWindow,
+                sample
+            );
+            await clickGridListCardByTitle(
+                app.mainWindow,
+                resolvedTitles.targetTitle
+            );
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+\/[^/]+$/
+            );
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+$/
+            );
+
+            await clickGridListCardByTitle(
+                app.mainWindow,
+                resolvedTitles.controlTitle
+            );
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+\/[^/]+$/
+            );
+            await addCurrentDetailToFavorites(app.mainWindow);
+            await goBackFromDetail(app.mainWindow);
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+$/
+            );
+
+            await openWorkspaceSection(app.mainWindow, 'Favorites');
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await expect(
+                contentCardByTitle(
+                    app.mainWindow,
+                    resolvedTitles.targetTitle
+                ).first()
+            ).toBeVisible({ timeout: 20000 });
+            await expect(
+                contentCardByTitle(
+                    app.mainWindow,
+                    resolvedTitles.controlTitle
+                ).first()
+            ).toBeVisible({ timeout: 20000 });
+
+            await fillWorkspaceSearch(
+                app.mainWindow,
+                resolvedTitles.targetTitle
+            );
+
+            await expectQueryParam(
+                app.mainWindow,
+                'q',
+                resolvedTitles.targetTitle
+            );
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                'Global favorites'
+            );
+            await expect(
+                contentCardByTitle(
+                    app.mainWindow,
+                    resolvedTitles.targetTitle
+                ).first()
+            ).toBeVisible();
+            await expect(
+                contentCardByTitle(app.mainWindow, resolvedTitles.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @stalker sends category search through Electron IPC on the VOD route', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const sample = await fetchStalkerCategoryFixture(request, 'vod');
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+            await clickCategoryById(app.mainWindow, sample.categoryId);
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectPathname(
+                app.mainWindow,
+                new RegExp(
+                    `/workspace/stalker/[^/]+/vod/${escapeRegex(
+                        sample.categoryId
+                    )}$`
+                )
+            );
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                `Movies / ${sample.categoryName}`
+            );
+            await waitForPortalDebugEvent(app.mainWindow, {
+                provider: 'stalker',
+                operation: 'get_ordered_list',
+                predicate: (event) => {
+                    const requestPayload = event.request as {
+                        params?: Record<string, string | number>;
+                    };
+
+                    return (
+                        requestPayload.params?.['type'] === 'vod' &&
+                        String(requestPayload.params?.['category']) ===
+                            sample.categoryId &&
+                        requestPayload.params?.['search'] === sample.targetTitle
+                    );
+                },
+            });
+            const contentLayout = app.mainWindow.locator(
+                '.category-content-layout'
+            );
+            await expect(contentLayout).toContainText(
+                flexibleTextPattern(sample.targetTitle)
+            );
+            await expect(contentLayout).not.toContainText(
+                flexibleTextPattern(sample.controlTitle)
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @stalker sends category search through Electron IPC on the series route', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const sample = await fetchStalkerCategoryFixture(request, 'series');
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Series');
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/series$/
+            );
+            await clickCategoryById(app.mainWindow, sample.categoryId);
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectPathname(
+                app.mainWindow,
+                new RegExp(
+                    `/workspace/stalker/[^/]+/series/${escapeRegex(
+                        sample.categoryId
+                    )}$`
+                )
+            );
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                `Series / ${sample.categoryName}`
+            );
+            await waitForPortalDebugEvent(app.mainWindow, {
+                provider: 'stalker',
+                operation: 'get_ordered_list',
+                predicate: (event) => {
+                    const requestPayload = event.request as {
+                        params?: Record<string, string | number>;
+                    };
+
+                    return (
+                        requestPayload.params?.['type'] === 'series' &&
+                        String(requestPayload.params?.['category']) ===
+                            sample.categoryId &&
+                        requestPayload.params?.['search'] === sample.targetTitle
+                    );
+                },
+            });
+            const contentLayout = app.mainWindow.locator(
+                '.category-content-layout'
+            );
+            await expect(contentLayout).toContainText(
+                flexibleTextPattern(sample.targetTitle)
+            );
+            await expect(contentLayout).not.toContainText(
+                flexibleTextPattern(sample.controlTitle)
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @stalker drives advanced search from the workspace header without an inline form', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const sample = await fetchStalkerCategoryFixture(request, 'vod');
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Advanced search');
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/search$/
+            );
+            await expectWorkspaceSearchScope(app.mainWindow, 'Advanced search');
+            await expect(
+                app.mainWindow.locator('app-search-layout app-search-form')
+            ).toHaveCount(0);
+
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await waitForPortalDebugEvent(app.mainWindow, {
+                provider: 'stalker',
+                operation: 'get_ordered_list',
+                predicate: (event) => {
+                    const requestPayload = event.request as {
+                        params?: Record<string, string | number>;
+                    };
+
+                    return (
+                        requestPayload.params?.['type'] === 'vod' &&
+                        requestPayload.params?.['search'] === sample.targetTitle
+                    );
+                },
+            });
+            await expect(
+                contentCardByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible({ timeout: 20000 });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @stalker filters playlist favorites from the workspace header', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const sample = await fetchStalkerCategoryFixture(request, 'itv');
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+            await app.mainWindow
+                .getByRole('link', { name: 'Live TV', exact: true })
+                .click();
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/itv$/
+            );
+            await clickCategoryById(app.mainWindow, sample.categoryId);
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible({ timeout: 20000 });
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle).first()
+            ).toBeVisible({ timeout: 20000 });
+            await toggleFavoriteForChannel(app.mainWindow, sample.targetTitle);
+            await toggleFavoriteForChannel(app.mainWindow, sample.controlTitle);
+
+            await openWorkspaceSection(app.mainWindow, 'Favorites');
+            await expectPathname(app.mainWindow, /\/workspace\/global-favorites$/);
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible({ timeout: 20000 });
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle).first()
+            ).toBeVisible({ timeout: 20000 });
+
+            await fillWorkspaceSearch(app.mainWindow, sample.targetTitle);
+
+            await expectQueryParam(app.mainWindow, 'q', sample.targetTitle);
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                'Global favorites'
+            );
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('@search @stalker shows loaded-only scope and filters channels on ITV routes', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['stalker']);
+        const sample = await fetchStalkerCategoryFixture(request, 'itv');
+        const itvQuery = createUniquePrefix(
+            sample.targetTitle,
+            sample.controlTitle
+        );
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addStalkerPortal(app.mainWindow);
+            await waitForStalkerCatalog(app.mainWindow);
+            await app.mainWindow
+                .getByRole('link', { name: 'Live TV', exact: true })
+                .click();
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/itv$/
+            );
+
+            await clickCategoryById(app.mainWindow, sample.categoryId);
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle).first()
+            ).toBeVisible();
+
+            await fillWorkspaceSearch(app.mainWindow, itvQuery);
+
+            await expectPathname(
+                app.mainWindow,
+                /\/workspace\/stalker\/[^/]+\/itv$/
+            );
+            await expectQueryParam(app.mainWindow, 'q', itvQuery);
+            await expectWorkspaceSearchScope(
+                app.mainWindow,
+                `Live TV / ${sample.categoryName}`
+            );
+            await expectWorkspaceSearchStatus(
+                app.mainWindow,
+                'Loaded channels only'
+            );
+            await waitForPortalDebugEvent(app.mainWindow, {
+                provider: 'stalker',
+                operation: 'get_ordered_list',
+                predicate: (event) => {
+                    const requestPayload = event.request as {
+                        params?: Record<string, string | number>;
+                    };
+
+                    return (
+                        requestPayload.params?.['type'] === 'itv' &&
+                        String(requestPayload.params?.['category']) ===
+                            sample.categoryId &&
+                        requestPayload.params?.['search'] === itvQuery
+                    );
+                },
+            });
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.targetTitle).first()
+            ).toBeVisible();
+            await expect(
+                channelItemByTitle(app.mainWindow, sample.controlTitle)
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+async function fetchXtreamVodFixture(
+    request: APIRequestContext
+): Promise<XtreamVodFixture> {
+    return fetchXtreamFixture(request, {
+        categoriesAction: 'get_vod_categories',
+        itemsAction: 'get_vod_streams',
+    });
+}
+
+async function fetchXtreamSeriesFixture(
+    request: APIRequestContext
+): Promise<XtreamVodFixture> {
+    return fetchXtreamFixture(request, {
+        categoriesAction: 'get_series_categories',
+        itemsAction: 'get_series',
+    });
+}
+
+async function fetchXtreamFixture(
+    request: APIRequestContext,
+    options: {
+        categoriesAction: string;
+        itemsAction: string;
+    }
+): Promise<XtreamVodFixture> {
+    const { categoriesAction, itemsAction } = options;
+    const categories = await fetchJson<XtreamCategory[]>(
+        request,
+        `${xtreamMockServer}/player_api.php?action=${encodeURIComponent(
+            categoriesAction
+        )}&username=${encodeURIComponent(
+            xtreamSearchUsername
+        )}&password=${encodeURIComponent(xtreamSearchPassword)}`
+    );
+    if (categories.length === 0) {
+        throw new Error(
+            `Xtream mock server returned no categories for ${categoriesAction}.`
+        );
+    }
+    let fallbackFixture: XtreamVodFixture | null = null;
+
+    for (const category of categories) {
+        const items = await fetchJson<XtreamVodStream[]>(
+            request,
+            `${xtreamMockServer}/player_api.php?action=${encodeURIComponent(
+                itemsAction
+            )}&username=${encodeURIComponent(
+                xtreamSearchUsername
+            )}&password=${encodeURIComponent(
+                xtreamSearchPassword
+            )}&category_id=${encodeURIComponent(category.category_id)}`
+        );
+        const fixture = buildXtreamVodFixture(category, items);
+
+        if (!fixture) {
+            continue;
+        }
+
+        if (!fallbackFixture) {
+            fallbackFixture = fixture;
+        }
+
+        if (isStableXtreamSearchTitle(fixture.targetTitle)) {
+            return fixture;
+        }
+    }
+
+    if (fallbackFixture) {
+        return fallbackFixture;
+    }
+
+    throw new Error(
+        `Xtream mock server returned no usable fixture for ${itemsAction}.`
+    );
+}
+
+function buildXtreamVodFixture(
+    category: XtreamCategory,
+    items: XtreamVodStream[]
+): XtreamVodFixture | null {
+    try {
+        const distinctItems = items.filter((item, index, allItems) => {
+            const title = getXtreamTitle(item);
+            if (!title) {
+                return false;
+            }
+
+            return (
+                allItems.findIndex(
+                    (candidate) =>
+                        normalizeSearchText(getXtreamTitle(candidate)) ===
+                        normalizeSearchText(title)
+                ) === index
+            );
+        });
+        const [targetItem, controlItem] = pickDistinctItems(
+            distinctItems,
+            getXtreamTitle,
+            isStableXtreamSearchTitle
+        );
+        const itemId = getXtreamItemId(targetItem);
+
+        if (!itemId) {
+            return null;
+        }
+
+        return {
+            candidateTitles: distinctItems.map((item) => getXtreamTitle(item)),
+            categoryId: String(category.category_id),
+            categoryName: category.category_name,
+            controlTitle: getXtreamTitle(controlItem),
+            itemId,
+            targetTitle: getXtreamTitle(targetItem),
+        };
+    } catch {
+        return null;
+    }
+}
+
+async function fetchStalkerCategoryFixture(
+    request: APIRequestContext,
+    type: 'itv' | 'series' | 'vod'
+): Promise<StalkerCategoryFixture> {
+    const categoriesResponse = await fetchJson<
+        StalkerProxyPayload<StalkerCategory[]>
+    >(
+        request,
+        buildStalkerProxyUrl('get_categories', {
+            type,
+        })
+    );
+    const category = categoriesResponse.payload.js[0];
+
+    if (!category) {
+        throw new Error(`Stalker mock server returned no ${type} categories.`);
+    }
+
+    const itemsResponse = await fetchJson<
+        StalkerProxyPayload<StalkerOrderedList<StalkerContentItem>>
+    >(
+        request,
+        buildStalkerProxyUrl('get_ordered_list', {
+            category: category.id,
+            p: '1',
+            type,
+        })
+    );
+    const items = itemsResponse.payload.js.data ?? [];
+    const [targetItem, controlItem] = pickDistinctItems(items, getStalkerTitle);
+
+    return {
+        categoryId: String(category.id),
+        categoryName: category.title,
+        controlTitle: getStalkerTitle(controlItem),
+        targetTitle: getStalkerTitle(targetItem),
+    };
+}
+
+async function fetchJson<T>(
+    request: APIRequestContext,
+    url: string
+): Promise<T> {
+    const response = await request.get(url);
+
+    expect(response.ok()).toBeTruthy();
+
+    return (await response.json()) as T;
+}
+
+function buildStalkerProxyUrl(
+    action: string,
+    params: Record<string, string>
+): string {
+    const searchParams = new URLSearchParams({
+        action,
+        macAddress: defaultStalkerMacAddress,
+        url: `${stalkerMockServer}/portal.php`,
+        ...params,
+    });
+
+    return `${stalkerMockServer}/stalker?${searchParams.toString()}`;
+}
+
+function loadM3uSearchFixture(): M3uSearchFixture {
+    const items = parseM3uFixture(m3uFixturePath);
+    const groups = items.reduce<Map<string, M3uFixtureItem[]>>((acc, item) => {
+        const existing = acc.get(item.groupTitle) ?? [];
+        existing.push(item);
+        acc.set(item.groupTitle, existing);
+        return acc;
+    }, new Map<string, M3uFixtureItem[]>());
+
+    const groupedSample = [...groups.entries()].find(
+        ([groupTitle, channels]) =>
+            groupTitle.length > 0 && channels.length >= 2
+    );
+
+    if (!groupedSample) {
+        throw new Error(
+            'Expected the M3U fixture to contain at least one group with two channels.'
+        );
+    }
+
+    const [groupTitle, groupedChannels] = groupedSample;
+    const [sibling, target] = groupedChannels;
+    const control = items.find((item) => item.groupTitle !== groupTitle);
+
+    if (!target || !sibling || !control) {
+        throw new Error(
+            'Expected the M3U fixture to contain both grouped and cross-group channels.'
+        );
+    }
+
+    return {
+        controlTitle: control.name,
+        groupTitle,
+        siblingTitle: sibling.name,
+        targetTitle: target.name,
+    };
+}
+
+function parseM3uFixture(filePath: string): M3uFixtureItem[] {
+    const content = readFileSync(filePath, 'utf8');
+    const items: M3uFixtureItem[] = [];
+    const lines = content.split(/\r?\n/);
+    let pending:
+        | {
+              groupTitle: string;
+              name: string;
+          }
+        | undefined;
+
+    for (const rawLine of lines) {
+        const line = rawLine.trim();
+        if (!line) {
+            continue;
+        }
+
+        if (line.startsWith('#EXTINF:')) {
+            const groupTitle =
+                line.match(/group-title="([^"]*)"/)?.[1]?.trim() ?? '';
+            const name = line.split(',').at(-1)?.trim() ?? '';
+
+            pending = {
+                groupTitle,
+                name,
+            };
+            continue;
+        }
+
+        if (!pending || line.startsWith('#')) {
+            continue;
+        }
+
+        items.push({
+            ...pending,
+            url: line,
+        });
+        pending = undefined;
+    }
+
+    return items.filter((item) => item.name.length > 0);
+}
+
+async function clickCategoryById(
+    page: Page,
+    categoryId: string
+): Promise<void> {
+    const category = page.locator(
+        `app-workspace-context-panel .category-item[data-category-id="${categoryId}"]:visible`
+    );
+
+    await expect(category.first()).toBeVisible();
+    await category.first().click();
+    await expect
+        .poll(async () => {
+            const pathname = new URL(page.url()).pathname;
+            const isSelected =
+                (await category.first().getAttribute('aria-current')) ===
+                'true';
+
+            return (
+                isSelected ||
+                pathname.endsWith(`/${categoryId}`) ||
+                pathname.includes(`/${categoryId}/`)
+            );
+        })
+        .toBe(true);
+}
+
+async function clickCategoryByNameExact(
+    page: Page,
+    categoryName: string
+): Promise<void> {
+    const categories = page
+        .locator('app-workspace-context-panel .category-item:visible')
+        .filter({
+            has: page.locator('.nav-item-label', {
+                hasText: new RegExp(`^\\s*${escapeRegex(categoryName)}\\s*$`),
+            }),
+        });
+    const category = await pickPreferredCategory(categories);
+
+    await expect(category).toBeVisible();
+    await category.scrollIntoViewIfNeeded();
+    const categoryId =
+        (await category.getAttribute('data-category-id'))?.trim() ?? '';
+    await category.click();
+    await expect
+        .poll(async () => {
+            const pathname = new URL(page.url()).pathname;
+            const isSelected =
+                (await category.getAttribute('aria-current')) === 'true';
+
+            return (
+                isSelected ||
+                (categoryId.length > 0 &&
+                    (pathname.endsWith(`/${categoryId}`) ||
+                        pathname.includes(`/${categoryId}/`)))
+            );
+        })
+        .toBe(true);
+}
+
+async function openWorkspaceSection(page: Page, label: string): Promise<void> {
+    if (label === 'Favorites') {
+        await openGlobalFavorites(page);
+        return;
+    }
+
+    await page.getByRole('link', { name: label, exact: true }).click();
+}
+
+async function waitForXtreamWorkspaceReady(page: Page): Promise<void> {
+    await waitForXtreamCatalog(page);
+}
+
+function groupPanelHeader(page: Page, groupTitle: string) {
+    return page.locator('.group-nav-item').filter({
+        hasText: flexibleTextPattern(groupTitle),
+    });
+}
+
+async function ensureGroupSelected(
+    page: Page,
+    groupTitle: string
+): Promise<void> {
+    const header = groupPanelHeader(page, groupTitle).first();
+
+    await expect(header).toBeVisible();
+
+    if ((await header.getAttribute('aria-current')) !== 'true') {
+        await header.click();
+    }
+}
+
+function xtreamSearchResultCards(page: Page) {
+    return page.locator('app-search-results .results-grid .content-card');
+}
+
+function gridListCardByTitle(page: Page, title: string) {
+    return page.locator('.category-content-layout mat-card').filter({
+        has: page.locator('.title', {
+            hasText: flexibleTextPattern(title),
+        }),
+    });
+}
+
+async function clickGridListCardByTitle(
+    page: Page,
+    title: string
+): Promise<void> {
+    const card = gridListCardByTitle(page, title).first();
+
+    await expect(card).toBeVisible({ timeout: 20000 });
+    await card.click();
+}
+
+function contentCardByTitle(page: Page, title: string) {
+    return page.locator('app-content-card').filter({
+        has: page.locator('h3', {
+            hasText: flexibleTextPattern(title),
+        }),
+    });
+}
+
+async function resolveVisibleXtreamTitles(
+    page: Page,
+    fixture: XtreamVodFixture
+): Promise<{
+    controlTitle: string;
+    targetTitle: string;
+}> {
+    const visibleTitles = (
+        await page
+            .locator('.category-content-layout mat-card .title')
+            .allTextContents()
+    )
+        .map((title) => title.trim())
+        .filter((title) => title.length > 0);
+    const matchedTitles = fixture.candidateTitles
+        .map((title) => {
+            const normalizedTitle = normalizeSearchText(title);
+            return (
+                visibleTitles.find(
+                    (visibleTitle) =>
+                        normalizeSearchText(visibleTitle) === normalizedTitle
+                ) ?? null
+            );
+        })
+        .filter((title): title is string => Boolean(title));
+    const uniqueMatchedTitles = [...new Set(matchedTitles)];
+
+    if (uniqueMatchedTitles.length < 2) {
+        throw new Error(
+            `Expected at least two visible Xtream titles from fixture candidates ${fixture.candidateTitles.join(
+                ', '
+            )}, but found ${visibleTitles.join(', ')}`
+        );
+    }
+
+    return {
+        controlTitle: uniqueMatchedTitles[1],
+        targetTitle: uniqueMatchedTitles[0],
+    };
+}
+
+async function addCurrentDetailToFavorites(page: Page): Promise<void> {
+    const addButton = page
+        .locator('button.favorite-btn')
+        .filter({ hasText: /Add to favorites/i })
+        .first();
+
+    await expect(addButton).toBeVisible({ timeout: 20000 });
+    await addButton.click();
+    await expect(
+        page
+            .locator('button.favorite-btn.favorite-btn--active')
+            .filter({ hasText: /Remove from favorites/i })
+            .first()
+    ).toBeVisible({ timeout: 20000 });
+}
+
+async function goBackFromDetail(page: Page): Promise<void> {
+    const backButton = page
+        .locator('app-content-hero .hero__back-button')
+        .first();
+
+    await expect(backButton).toBeVisible({ timeout: 20000 });
+    await backButton.click();
+}
+
+async function pickPreferredCategory(categories: Locator): Promise<Locator> {
+    const count = await categories.count();
+    let fallback = categories.first();
+
+    for (let index = 0; index < count; index += 1) {
+        const candidate = categories.nth(index);
+
+        if (!(await candidate.isVisible())) {
+            continue;
+        }
+
+        fallback = candidate;
+
+        const countText =
+            (await candidate.locator('.item-count').first().textContent()) ??
+            '';
+        const itemCount = Number.parseInt(countText.trim(), 10);
+
+        if (Number.isFinite(itemCount) && itemCount > 0) {
+            return candidate;
+        }
+    }
+
+    return fallback;
+}
+
+async function performXtreamPlaylistSearch(
+    page: Page,
+    queries: string[]
+): Promise<string> {
+    for (let attempt = 0; attempt < 3; attempt += 1) {
+        for (const query of queries) {
+            await fillWorkspaceSearch(page, query, {
+                submit: true,
+            });
+            await expectPathname(page, /\/workspace\/xtreams\/[^/]+\/search$/);
+            await expectQueryParam(page, 'q', query);
+
+            try {
+                await expect(xtreamSearchResultCards(page).first()).toBeVisible(
+                    {
+                        timeout: 5000,
+                    }
+                );
+                return query;
+            } catch {
+                // Try the next candidate token.
+            }
+        }
+
+        if (attempt < 2) {
+            await page.waitForTimeout(1500);
+        }
+    }
+
+    throw new Error(
+        `Expected Xtream playlist search to return results for at least one candidate query: ${queries.join(
+            ', '
+        )}`
+    );
+}
+
+function channelItemByTitle(page: Page, title: string) {
+    return page.getByTestId('channel-item').filter({
+        has: page.locator('.channel-name', {
+            hasText: flexibleTextPattern(title),
+        }),
+    });
+}
+
+async function toggleFavoriteForChannel(
+    page: Page,
+    title: string
+): Promise<void> {
+    const item = channelItemByTitle(page, title).first();
+
+    await expect(item).toBeVisible();
+    await item.hover();
+    const favoriteButton = item.locator('.favorite-button').first();
+
+    await expect(favoriteButton).toBeVisible();
+    await favoriteButton.click();
+    await expect(favoriteButton.locator('mat-icon')).toHaveText(/star/);
+}
+
+function getXtreamTitle(item: XtreamVodStream): string {
+    return `${item.title ?? item.name ?? ''}`.trim();
+}
+
+function getXtreamItemId(item: XtreamVodStream): string {
+    return String(
+        item.xtream_id ?? item.series_id ?? item.stream_id ?? item.id ?? ''
+    ).trim();
+}
+
+function getStalkerTitle(item: StalkerContentItem): string {
+    return `${item.o_name ?? item.name ?? ''}`.trim();
+}
+
+function pickDistinctItems<T>(
+    items: T[],
+    getTitle: (item: T) => string,
+    preferredTitle?: (title: string) => boolean
+): [T, T] {
+    const titledItems = items.filter((item) => getTitle(item).length > 0);
+    const preferredItems = preferredTitle
+        ? titledItems.filter((item) => preferredTitle(getTitle(item)))
+        : titledItems;
+    const target = (preferredItems[0] ?? titledItems[0]) as T | undefined;
+
+    if (!target) {
+        throw new Error('Expected at least two items with distinct titles.');
+    }
+
+    const control =
+        preferredItems.find((item) => getTitle(item) !== getTitle(target)) ??
+        titledItems.find((item) => getTitle(item) !== getTitle(target));
+
+    if (!control) {
+        throw new Error('Expected at least two items with distinct titles.');
+    }
+
+    return [target, control];
+}
+
+function createUniquePrefix(targetTitle: string, controlTitle: string): string {
+    const normalizedControl = controlTitle.toLowerCase();
+    const trimmedTarget = targetTitle.trim();
+
+    for (let length = 3; length <= trimmedTarget.length; length += 1) {
+        const candidate = trimmedTarget.slice(0, length).trim();
+        if (candidate.length < 3) {
+            continue;
+        }
+
+        if (!normalizedControl.includes(candidate.toLowerCase())) {
+            return candidate;
+        }
+    }
+
+    return trimmedTarget;
+}
+
+function createUniqueSearchToken(
+    targetTitle: string,
+    controlTitle: string
+): string {
+    const normalizedControl = normalizeSearchText(controlTitle);
+    const targetWords = normalizeSearchText(targetTitle)
+        .split(/\s+/)
+        .filter((word) => word.length >= 3);
+
+    for (const word of targetWords) {
+        if (!normalizedControl.includes(word)) {
+            return word;
+        }
+    }
+
+    return createUniquePrefix(
+        normalizeSearchText(targetTitle),
+        normalizeSearchText(controlTitle)
+    );
+}
+
+function buildXtreamSearchQueries(
+    targetTitle: string,
+    controlTitle: string
+): string[] {
+    const normalizedTarget = normalizeSearchText(targetTitle);
+    const normalizedControl = normalizeSearchText(controlTitle);
+    const queries = new Set<string>();
+
+    queries.add(createUniqueSearchToken(targetTitle, controlTitle));
+
+    for (const word of normalizedTarget.split(/\s+/)) {
+        if (word.length < 3) {
+            continue;
+        }
+
+        if (!normalizedControl.includes(word)) {
+            queries.add(word);
+        }
+    }
+
+    for (const word of normalizedTarget.split(/\s+/)) {
+        if (word.length >= 3) {
+            queries.add(word);
+        }
+    }
+
+    queries.add(normalizedTarget);
+
+    return [...queries].filter((query) => query.trim().length >= 3);
+}
+
+function normalizeSearchText(value: string): string {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, ' ')
+        .trim();
+}
+
+function isStableXtreamSearchTitle(title: string): boolean {
+    return (
+        /^[a-z0-9 ]+$/i.test(title.trim()) &&
+        normalizeSearchText(title)
+            .split(/\s+/)
+            .some((word) => word.length >= 3)
+    );
+}
+
+function escapeRegex(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function flexibleTextPattern(value: string): RegExp {
+    return new RegExp(
+        value
+            .trim()
+            .split(/\s+/)
+            .map((part) => escapeRegex(part))
+            .join('\\s+')
+    );
+}
+
+async function expectPathname(page: Page, pattern: RegExp): Promise<void> {
+    await expect.poll(() => new URL(page.url()).pathname).toMatch(pattern);
+}
+
+async function expectQueryParam(
+    page: Page,
+    name: string,
+    value: string
+): Promise<void> {
+    await expect
+        .poll(() => new URL(page.url()).searchParams.get(name))
+        .toBe(value);
+}
diff --git a/apps/electron-backend-e2e/src/settings.e2e.ts b/apps/electron-backend-e2e/src/settings.e2e.ts
new file mode 100644
index 0000000..2b4fbda
--- /dev/null
+++ b/apps/electron-backend-e2e/src/settings.e2e.ts
@@ -0,0 +1,238 @@
+import { Page } from '@playwright/test';
+import {
+    addXtreamPortal,
+    clickCategoryByNameExact,
+    clickFirstGridListCard,
+    closeElectronApp,
+    createMutableTextServer,
+    enableRemoteControl,
+    expect,
+    launchElectronApp,
+    openGlobalRecent,
+    openSettings,
+    openWorkspaceSection,
+    resetMockServers,
+    restartElectronApp,
+    saveSettings,
+    test,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+import {
+    defaultXtreamPassword,
+    defaultXtreamUsername,
+} from './electron-test-fixtures';
+import { fetchXtreamVodFixture } from './portal-mock-fixtures';
+
+const epgFixtureXml = `<?xml version="1.0" encoding="UTF-8"?>
+<tv>
+  <channel id="news-1">
+    <display-name>News One</display-name>
+  </channel>
+  <programme start="20260328070000 +0000" stop="20260328080000 +0000" channel="news-1">
+    <title>Morning Bulletin</title>
+    <desc>Daily morning news.</desc>
+  </programme>
+</tv>
+`;
+
+test.describe('Electron Settings', () => {
+    test('persists changed desktop settings across app restart', async ({
+        dataDir,
+    }) => {
+        const epgServer = await createMutableTextServer(epgFixtureXml, {
+            contentType: 'application/xml; charset=utf-8',
+            resourcePath: '/settings-guide.xml',
+        });
+        const firstLaunch = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(firstLaunch.mainWindow);
+            await selectSettingsOption(
+                firstLaunch.mainWindow,
+                'select-language',
+                'de'
+            );
+            await firstLaunch.mainWindow
+                .locator('[data-test-id="DARK_THEME"]')
+                .click();
+            await selectSettingsOption(
+                firstLaunch.mainWindow,
+                'select-video-player',
+                'html5'
+            );
+            await selectSettingsOption(
+                firstLaunch.mainWindow,
+                'select-stream-format',
+                'ts'
+            );
+            await firstLaunch.mainWindow
+                .locator(
+                    'mat-checkbox[formcontrolname="showExternalPlaybackBar"] input[type="checkbox"]'
+                )
+                .uncheck();
+            await enableRemoteControl(firstLaunch.mainWindow, 8877);
+            await firstLaunch.mainWindow
+                .getByRole('button', { name: 'Add EPG source' })
+                .click();
+            await firstLaunch.mainWindow
+                .locator('.epg-source-row input')
+                .first()
+                .fill(epgServer.resourceUrl);
+            await saveSettings(firstLaunch.mainWindow);
+        } finally {
+            await closeElectronApp(firstLaunch);
+        }
+
+        const secondLaunch = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(secondLaunch.mainWindow);
+
+            await expect(
+                secondLaunch.mainWindow.getByTestId('select-language')
+            ).toContainText('Deutsch');
+            await expect(
+                secondLaunch.mainWindow.locator('[data-test-id="DARK_THEME"]')
+            ).toHaveAttribute('aria-checked', 'true');
+            await expect(
+                secondLaunch.mainWindow.getByTestId('select-video-player')
+            ).toContainText(/HTML5/i);
+            await expect(
+                secondLaunch.mainWindow.getByTestId('select-stream-format')
+            ).toContainText('ts');
+            await expect(
+                secondLaunch.mainWindow.locator(
+                    'mat-checkbox[formcontrolname="showExternalPlaybackBar"] input[type="checkbox"]'
+                )
+            ).not.toBeChecked();
+            await expect(
+                secondLaunch.mainWindow.locator(
+                    'mat-checkbox[formcontrolname="remoteControl"] input[type="checkbox"]'
+                )
+            ).toBeChecked();
+            await expect(
+                secondLaunch.mainWindow.locator('#remoteControlPort')
+            ).toHaveValue('8877');
+            await expect(
+                secondLaunch.mainWindow.locator('.epg-source-row input').first()
+            ).toHaveValue(epgServer.resourceUrl);
+        } finally {
+            await closeElectronApp(secondLaunch);
+            await epgServer.close();
+        }
+    });
+
+    test('starts on sources when dashboard is disabled', async ({ dataDir }) => {
+        const firstLaunch = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(firstLaunch.mainWindow);
+            await firstLaunch.mainWindow
+                .locator(
+                    'mat-checkbox[formcontrolname="showDashboard"] input[type="checkbox"]'
+                )
+                .uncheck();
+            await saveSettings(firstLaunch.mainWindow);
+        } finally {
+            await closeElectronApp(firstLaunch);
+        }
+
+        const secondLaunch = await launchElectronApp(dataDir);
+
+        try {
+            await secondLaunch.mainWindow.waitForURL(/\/workspace\/sources$/);
+            await expect(
+                secondLaunch.mainWindow.getByRole('link', {
+                    name: 'Dashboard',
+                    exact: true,
+                })
+            ).toHaveCount(0);
+            await expect(secondLaunch.mainWindow.locator('a.brand')).toHaveAttribute(
+                'href',
+                /\/workspace\/sources$/
+            );
+        } finally {
+            await closeElectronApp(secondLaunch);
+        }
+    });
+
+    test('restores the last section-level view across restart when configured', async ({
+        dataDir,
+    }) => {
+        let app = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(app.mainWindow);
+            await selectSettingsOption(
+                app.mainWindow,
+                'select-startup-behavior',
+                'restore-last-view'
+            );
+            await saveSettings(app.mainWindow);
+
+            await openGlobalRecent(app.mainWindow);
+        } finally {
+            app = await restartElectronApp(app, dataDir);
+        }
+
+        try {
+            await app.mainWindow.waitForURL(/\/workspace\/global-recent$/);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('ignores settings and restores only the section root after a detail route', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const vodFixture = await fetchXtreamVodFixture(request, {
+            password: defaultXtreamPassword,
+            username: defaultXtreamUsername,
+        });
+        let app = await launchElectronApp(dataDir);
+
+        try {
+            await openSettings(app.mainWindow);
+            await selectSettingsOption(
+                app.mainWindow,
+                'select-startup-behavior',
+                'restore-last-view'
+            );
+            await saveSettings(app.mainWindow);
+
+            await addXtreamPortal(app.mainWindow);
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await openWorkspaceSection(app.mainWindow, 'Movies');
+            await clickCategoryByNameExact(
+                app.mainWindow,
+                vodFixture.categoryName
+            );
+            await clickFirstGridListCard(app.mainWindow);
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+\/[^/]+$/
+            );
+
+            await openSettings(app.mainWindow);
+        } finally {
+            app = await restartElectronApp(app, dataDir);
+        }
+
+        try {
+            await app.mainWindow.waitForURL(/\/workspace\/xtreams\/[^/]+\/vod$/);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
+
+async function selectSettingsOption(
+    page: Page,
+    selectTestId: string,
+    optionTestId: string
+): Promise<void> {
+    await page.getByTestId(selectTestId).click();
+    await page.getByTestId(optionTestId).click();
+}
diff --git a/apps/electron-backend-e2e/src/smoke.e2e.ts b/apps/electron-backend-e2e/src/smoke.e2e.ts
new file mode 100644
index 0000000..5924bb4
--- /dev/null
+++ b/apps/electron-backend-e2e/src/smoke.e2e.ts
@@ -0,0 +1,81 @@
+import {
+    closeElectronApp,
+    expect,
+    launchElectronApp,
+    test,
+} from './electron-test-fixtures';
+
+test.describe('Electron App Smoke Test', () => {
+    test('app should start and display the dashboard', async ({ dataDir }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await expect
+                .poll(async () => app.mainWindow.title())
+                .toContain('IPTVnator');
+            await expect(
+                app.mainWindow.getByRole('link', {
+                    name: 'Dashboard',
+                    exact: true,
+                })
+            ).toBeVisible();
+            await expect(
+                app.mainWindow.getByRole('link', { name: 'Open settings' })
+            ).toBeVisible();
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('app should expose the expected main window properties', async ({
+        dataDir,
+    }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            const isVisible = await app.electronApp.evaluate(
+                async ({ BrowserWindow }) => {
+                    const mainWindow = BrowserWindow.getAllWindows()[0];
+                    return mainWindow ? mainWindow.isVisible() : false;
+                }
+            );
+
+            expect(isVisible).toBe(true);
+
+            const bounds = await app.electronApp.evaluate(
+                async ({ BrowserWindow }) => {
+                    const mainWindow = BrowserWindow.getAllWindows()[0];
+                    return mainWindow ? mainWindow.getBounds() : null;
+                }
+            );
+
+            expect(bounds).not.toBeNull();
+            expect(bounds?.width).toBeGreaterThan(800);
+            expect(bounds?.height).toBeGreaterThan(600);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('app should render workspace content', async ({ dataDir }) => {
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await expect(
+                app.mainWindow.getByRole('button', { name: 'Add playlist' })
+            ).toBeVisible();
+
+            const modifier =
+                process.platform === 'darwin' ? 'Meta' : 'Control';
+            await app.mainWindow.locator('body').focus();
+            await app.mainWindow.keyboard.press(`${modifier}+K`);
+            await expect(
+                app.mainWindow.locator(
+                    'mat-dialog-container app-workspace-command-palette'
+                )
+            ).toBeVisible();
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
diff --git a/apps/electron-backend-e2e/src/sources.e2e.ts b/apps/electron-backend-e2e/src/sources.e2e.ts
new file mode 100644
index 0000000..2deeb8b
--- /dev/null
+++ b/apps/electron-backend-e2e/src/sources.e2e.ts
@@ -0,0 +1,505 @@
+import {
+    addStalkerPortal,
+    addXtreamPortal,
+    closeElectronApp,
+    createMutableTextServer,
+    deleteSource,
+    dragSourceBefore,
+    expect,
+    expectPlaylistUpdatedToast,
+    expectSourceDialogValues,
+    getVisibleSourceTitles,
+    importM3uPlaylistFromNativeDialog,
+    importM3uPlaylistFromUrl,
+    launchElectronApp,
+    openSources,
+    openSourceEditor,
+    refreshSource,
+    resetMockServers,
+    restartElectronApp,
+    saveSourceDialog,
+    selectSourceSort,
+    selectSourceTypeFilter,
+    sourceRowByTitle,
+    test,
+    updateSourceDialog,
+    waitForM3uCatalog,
+    waitForPortalDebugEvent,
+    waitForXtreamCatalog,
+    waitForSourceRowIdle,
+    writeTemporaryM3uFile,
+} from './electron-test-fixtures';
+
+const localSourceFileName = 'alpha-local-source.m3u';
+const localSourceDisplayName = 'alpha-local-source';
+const urlSourceFileName = 'omega-url-source.m3u';
+const xtreamSourceName = 'Charlie Xtream Portal';
+const stalkerSourceName = 'Bravo Stalker Portal';
+const editableLocalSourceDisplayName = 'editable-local-source';
+const deletableLocalSourceDisplayName = 'deletable-local-source';
+const refreshLocalSourceDisplayName = 'refresh-local-source';
+
+test.describe('Electron Sources View', () => {
+    test('filters and sorts sources, including persisted custom order', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream', 'stalker']);
+        const localFilePath = writeTemporaryM3uFile(
+            dataDir,
+            localSourceFileName,
+            [
+                {
+                    groupTitle: 'News',
+                    name: 'Alpha Local News',
+                    url: 'https://streams.example.test/local-alpha.m3u8',
+                },
+            ]
+        );
+        const urlServer = await createMutableTextServer(
+            `#EXTM3U
+#EXTINF:-1 group-title="Sports",Omega URL Sports
+https://streams.example.test/url-omega.m3u8
+`,
+            {
+                contentType: 'application/vnd.apple.mpegurl',
+                resourcePath: `/${urlSourceFileName}`,
+            }
+        );
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localFilePath);
+            await importM3uPlaylistFromUrl(
+                app.mainWindow,
+                urlServer.resourceUrl
+            );
+            await addXtreamPortal(app.mainWindow, {
+                name: xtreamSourceName,
+            });
+            await addStalkerPortal(app.mainWindow, {
+                name: stalkerSourceName,
+            });
+            await openSources(app.mainWindow);
+
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toHaveLength(4);
+
+            await selectSourceTypeFilter(app.mainWindow, 'M3U');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([urlSourceFileName, localSourceDisplayName]);
+
+            await selectSourceTypeFilter(app.mainWindow, 'Xtream');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([xtreamSourceName]);
+
+            await selectSourceTypeFilter(app.mainWindow, 'Stalker');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([stalkerSourceName]);
+
+            await selectSourceTypeFilter(app.mainWindow, 'All');
+
+            await selectSourceSort(app.mainWindow, 'Date added (Oldest first)');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    localSourceDisplayName,
+                    urlSourceFileName,
+                    xtreamSourceName,
+                    stalkerSourceName,
+                ]);
+
+            await selectSourceSort(app.mainWindow, 'Name (A-Z)');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    localSourceDisplayName,
+                    stalkerSourceName,
+                    xtreamSourceName,
+                    urlSourceFileName,
+                ]);
+
+            await selectSourceSort(app.mainWindow, 'Name (Z-A)');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    urlSourceFileName,
+                    xtreamSourceName,
+                    stalkerSourceName,
+                    localSourceDisplayName,
+                ]);
+
+            await selectSourceSort(app.mainWindow, 'Date added (Newest first)');
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    stalkerSourceName,
+                    xtreamSourceName,
+                    urlSourceFileName,
+                    localSourceDisplayName,
+                ]);
+
+            await selectSourceSort(app.mainWindow, 'Custom order');
+            await dragSourceBefore(
+                app.mainWindow,
+                xtreamSourceName,
+                localSourceDisplayName
+            );
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    xtreamSourceName,
+                    localSourceDisplayName,
+                    urlSourceFileName,
+                    stalkerSourceName,
+                ]);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Dashboard', exact: true })
+                .click();
+            await openSources(app.mainWindow);
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    xtreamSourceName,
+                    localSourceDisplayName,
+                    urlSourceFileName,
+                    stalkerSourceName,
+                ]);
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+            await expect
+                .poll(() => getVisibleSourceTitles(app.mainWindow))
+                .toEqual([
+                    xtreamSourceName,
+                    localSourceDisplayName,
+                    urlSourceFileName,
+                    stalkerSourceName,
+                ]);
+        } finally {
+            await closeElectronApp(app);
+            await urlServer.close();
+        }
+    });
+
+    test('edits M3U, Xtream, and Stalker source details and keeps them after restart', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream', 'stalker']);
+        const localFilePath = writeTemporaryM3uFile(
+            dataDir,
+            'editable-local-source.m3u',
+            [
+                {
+                    groupTitle: 'Movies',
+                    name: 'Editable Local Channel',
+                    url: 'https://streams.example.test/editable-local.m3u8',
+                },
+            ]
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localFilePath);
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Editable Xtream Source',
+            });
+            await addStalkerPortal(app.mainWindow, {
+                name: 'Editable Stalker Source',
+            });
+            await openSources(app.mainWindow);
+
+            let dialog = await openSourceEditor(
+                app.mainWindow,
+                editableLocalSourceDisplayName
+            );
+            await updateSourceDialog(dialog, {
+                autoRefresh: true,
+                title: 'Edited Local Source',
+                userAgent: 'Electron E2E Local/1.0',
+            });
+            await saveSourceDialog(app.mainWindow, dialog);
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Editable Xtream Source'
+            );
+            await updateSourceDialog(dialog, {
+                password: 'pass1',
+                serverUrl: 'http://127.0.0.1:3211',
+                title: 'Edited Xtream Source',
+                username: 'user1',
+            });
+            await saveSourceDialog(app.mainWindow, dialog);
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Editable Stalker Source'
+            );
+            await updateSourceDialog(dialog, {
+                macAddress: '00:1A:79:00:00:99',
+                portalUrl: 'http://127.0.0.1:3210/portal.php',
+                title: 'Edited Stalker Source',
+            });
+            await saveSourceDialog(app.mainWindow, dialog);
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Edited Local Source'
+            );
+            await expectSourceDialogValues(dialog, {
+                autoRefresh: true,
+                title: 'Edited Local Source',
+                userAgent: 'Electron E2E Local/1.0',
+            });
+            await dialog
+                .getByRole('button', { name: 'Close', exact: true })
+                .click();
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Edited Xtream Source'
+            );
+            await expectSourceDialogValues(dialog, {
+                password: 'pass1',
+                serverUrl: 'http://127.0.0.1:3211',
+                title: 'Edited Xtream Source',
+                username: 'user1',
+            });
+            await dialog
+                .getByRole('button', { name: 'Close', exact: true })
+                .click();
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Edited Stalker Source'
+            );
+            await expectSourceDialogValues(dialog, {
+                macAddress: '00:1A:79:00:00:99',
+                portalUrl: 'http://127.0.0.1:3210/portal.php',
+                title: 'Edited Stalker Source',
+            });
+            await dialog
+                .getByRole('button', { name: 'Close', exact: true })
+                .click();
+
+            const restarted = await restartElectronApp(app, dataDir);
+            app.electronApp = restarted.electronApp;
+            app.mainWindow = restarted.mainWindow;
+
+            await openSources(app.mainWindow);
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Edited Local Source'
+            );
+            await expectSourceDialogValues(dialog, {
+                autoRefresh: true,
+                title: 'Edited Local Source',
+                userAgent: 'Electron E2E Local/1.0',
+            });
+            await dialog
+                .getByRole('button', { name: 'Close', exact: true })
+                .click();
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Edited Xtream Source'
+            );
+            await expectSourceDialogValues(dialog, {
+                password: 'pass1',
+                serverUrl: 'http://127.0.0.1:3211',
+                title: 'Edited Xtream Source',
+                username: 'user1',
+            });
+            await dialog
+                .getByRole('button', { name: 'Close', exact: true })
+                .click();
+
+            dialog = await openSourceEditor(
+                app.mainWindow,
+                'Edited Stalker Source'
+            );
+            await expectSourceDialogValues(dialog, {
+                macAddress: '00:1A:79:00:00:99',
+                portalUrl: 'http://127.0.0.1:3210/portal.php',
+                title: 'Edited Stalker Source',
+            });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('deletes M3U, Stalker, and Xtream sources from the sources view', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream', 'stalker']);
+        const localFilePath = writeTemporaryM3uFile(
+            dataDir,
+            'deletable-local-source.m3u',
+            [
+                {
+                    groupTitle: 'Live',
+                    name: 'Delete Me Local',
+                    url: 'https://streams.example.test/delete-local.m3u8',
+                },
+            ]
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localFilePath);
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Delete Me Xtream',
+            });
+            await addStalkerPortal(app.mainWindow, {
+                name: 'Delete Me Stalker',
+            });
+            await openSources(app.mainWindow);
+
+            await deleteSource(app.mainWindow, deletableLocalSourceDisplayName);
+            await expect(
+                sourceRowByTitle(
+                    app.mainWindow,
+                    deletableLocalSourceDisplayName
+                )
+            ).toHaveCount(0, {
+                timeout: 20000,
+            });
+
+            await deleteSource(app.mainWindow, 'Delete Me Stalker');
+            await expect(
+                sourceRowByTitle(app.mainWindow, 'Delete Me Stalker')
+            ).toHaveCount(0, {
+                timeout: 20000,
+            });
+
+            await deleteSource(app.mainWindow, 'Delete Me Xtream');
+            await expect(
+                sourceRowByTitle(app.mainWindow, 'Delete Me Xtream')
+            ).toHaveCount(0, {
+                timeout: 60000,
+            });
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('refreshes local-file M3U, URL M3U, and Xtream sources from the sources view', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const localFilePath = writeTemporaryM3uFile(
+            dataDir,
+            'refresh-local-source.m3u',
+            [
+                {
+                    groupTitle: 'News',
+                    name: 'Original Local Channel',
+                    url: 'https://streams.example.test/original-local.m3u8',
+                },
+            ]
+        );
+        const urlServer = await createMutableTextServer(
+            `#EXTM3U
+#EXTINF:-1 group-title="News",Original URL Channel
+https://streams.example.test/original-url.m3u8
+`,
+            {
+                contentType: 'application/vnd.apple.mpegurl',
+                resourcePath: '/refresh-url-source.m3u',
+            }
+        );
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await importM3uPlaylistFromNativeDialog(app, localFilePath);
+            await importM3uPlaylistFromUrl(
+                app.mainWindow,
+                urlServer.resourceUrl
+            );
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Refresh Xtream Source',
+            });
+            await openSources(app.mainWindow);
+
+            writeTemporaryM3uFile(dataDir, 'refresh-local-source.m3u', [
+                {
+                    groupTitle: 'News',
+                    name: 'Refreshed Local Channel',
+                    url: 'https://streams.example.test/refreshed-local.m3u8',
+                },
+            ]);
+            await refreshSource(app.mainWindow, refreshLocalSourceDisplayName);
+            await expectPlaylistUpdatedToast(app.mainWindow);
+            await sourceRowByTitle(
+                app.mainWindow,
+                refreshLocalSourceDisplayName
+            )
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await expect(
+                app.mainWindow.getByTestId('channel-item').filter({
+                    hasText: 'Refreshed Local Channel',
+                })
+            ).toHaveCount(1);
+            await openSources(app.mainWindow);
+
+            urlServer.setBody(
+                `#EXTM3U
+#EXTINF:-1 group-title="News",Refreshed URL Channel
+https://streams.example.test/refreshed-url.m3u8
+`
+            );
+            await refreshSource(app.mainWindow, 'refresh-url-source.m3u');
+            await expectPlaylistUpdatedToast(app.mainWindow);
+            await waitForSourceRowIdle(
+                app.mainWindow,
+                'refresh-url-source.m3u'
+            );
+            await sourceRowByTitle(app.mainWindow, 'refresh-url-source.m3u')
+                .first()
+                .click();
+            await waitForM3uCatalog(app.mainWindow);
+            await expect(
+                app.mainWindow.getByTestId('channel-item').filter({
+                    hasText: 'Refreshed URL Channel',
+                })
+            ).toHaveCount(1);
+            await openSources(app.mainWindow);
+
+            await refreshSource(app.mainWindow, 'Refresh Xtream Source', {
+                confirm: true,
+            });
+            await waitForXtreamCatalog(app.mainWindow);
+            await waitForPortalDebugEvent(app.mainWindow, {
+                operation: 'get_live_categories',
+                provider: 'xtream',
+                timeoutMs: 30000,
+            });
+            await openSources(app.mainWindow);
+            await waitForSourceRowIdle(app.mainWindow, 'Refresh Xtream Source');
+            await expect(
+                sourceRowByTitle(app.mainWindow, 'Refresh Xtream Source')
+                    .first()
+                    .locator('.meta')
+            ).toContainText('Updated:');
+        } finally {
+            await closeElectronApp(app);
+            await urlServer.close();
+        }
+    });
+});
diff --git a/apps/electron-backend-e2e/src/xtream-epg.e2e.ts b/apps/electron-backend-e2e/src/xtream-epg.e2e.ts
new file mode 100644
index 0000000..59876cc
--- /dev/null
+++ b/apps/electron-backend-e2e/src/xtream-epg.e2e.ts
@@ -0,0 +1,229 @@
+import {
+    addXtreamPortal,
+    channelItemByTitle,
+    clickCategoryByNameExact,
+    closeElectronApp,
+    expect,
+    launchElectronApp,
+    openWorkspaceSection,
+    resetMockServers,
+    test,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+import {
+    fetchXtreamEpgFixture,
+    XtreamEpgFixture,
+    XtreamNormalizedEpgListing,
+} from './portal-mock-fixtures';
+
+const epgPortalName = 'Xtream EPG Fixture';
+const epgCredentials = {
+    username: 'epg',
+    password: 'epg',
+};
+
+for (const timeZone of ['UTC', 'Europe/Berlin'] as const) {
+    test(`renders Xtream EPG previews and selected-channel schedule in ${timeZone}`, async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const fixture = await fetchXtreamEpgFixture(request, epgCredentials);
+        const currentProgram = fixture.shortEpg[0];
+        if (!currentProgram) {
+            throw new Error('Expected the Xtream EPG fixture to include a current program.');
+        }
+        const app = await launchElectronApp(dataDir, {
+            env: { TZ: timeZone },
+        });
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: `${epgPortalName} ${timeZone}`,
+                username: epgCredentials.username,
+                password: epgCredentials.password,
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+            await openWorkspaceSection(app.mainWindow, 'Live TV');
+            await clickCategoryByNameExact(app.mainWindow, fixture.categoryName);
+
+            const channelRow = channelItemByTitle(
+                app.mainWindow,
+                fixture.stream.name ?? ''
+            ).first();
+            await expect(channelRow).toBeVisible({ timeout: 20000 });
+
+            await expect
+                .poll(async () =>
+                    ((await channelRow.locator('.epg-title').textContent()) ?? '').trim()
+                )
+                .toBe(currentProgram.title);
+            await expect
+                .poll(async () => {
+                    return (await channelRow.locator('.epg-time').allInnerTexts()).map(
+                        (value) => value.trim()
+                    );
+                })
+                .toEqual([
+                    formatTimeInZone(currentProgram.startTimestamp, timeZone),
+                    formatTimeInZone(currentProgram.stopTimestamp, timeZone),
+                ]);
+            await expect
+                .poll(async () => getProgressWidthPercent(channelRow))
+                .toBeGreaterThan(0);
+
+            await channelRow.click();
+            await expect(app.mainWindow.locator('app-epg-list')).toBeVisible({
+                timeout: 20000,
+            });
+
+            const currentDateKey = formatDateKeyInZone(Date.now(), timeZone);
+            const currentDayTitles = visibleTitlesForCurrentDate(
+                fixture.fullEpg,
+                currentDateKey,
+                timeZone
+            );
+
+            await expect.poll(() => visibleProgramTitles(app.mainWindow)).toEqual(
+                currentDayTitles
+            );
+
+            const currentProgramRow = app.mainWindow
+                .locator('app-epg-list .program-item.current-program')
+                .first();
+            await expect(currentProgramRow).toBeVisible();
+            await expect(currentProgramRow.locator('.program-title')).toHaveText(
+                currentProgram.title
+            );
+            await expect(currentProgramRow.locator('.time')).toHaveText(
+                `${formatTimeInZone(
+                    currentProgram.startTimestamp,
+                    timeZone
+                )} - ${formatTimeInZone(currentProgram.stopTimestamp, timeZone)}`
+            );
+
+            const firstFutureDateKey = getFirstFutureDateKey(
+                fixture.fullEpg,
+                currentDateKey,
+                timeZone
+            );
+            expect(firstFutureDateKey).not.toBeNull();
+
+            const futureDayTitles = titlesForDate(
+                fixture.fullEpg,
+                firstFutureDateKey!,
+                timeZone
+            );
+            const nextDayClicks = dayDifference(currentDateKey, firstFutureDateKey!);
+
+            for (let index = 0; index < nextDayClicks; index += 1) {
+                await app.mainWindow.locator('app-epg-list .next-day').click();
+            }
+
+            await expect.poll(() => visibleProgramTitles(app.mainWindow)).toEqual(
+                futureDayTitles
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+}
+
+function formatTimeInZone(
+    timestampSeconds: number,
+    timeZone: string
+): string {
+    return new Intl.DateTimeFormat('en-US', {
+        timeZone,
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    }).format(new Date(timestampSeconds * 1000));
+}
+
+function formatDateKeyInZone(
+    timestampMilliseconds: number,
+    timeZone: string
+): string {
+    const parts = new Intl.DateTimeFormat('en-CA', {
+        timeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    }).formatToParts(new Date(timestampMilliseconds));
+
+    const year = parts.find((part) => part.type === 'year')?.value;
+    const month = parts.find((part) => part.type === 'month')?.value;
+    const day = parts.find((part) => part.type === 'day')?.value;
+
+    if (!year || !month || !day) {
+        throw new Error(`Failed to format a date key for timezone ${timeZone}.`);
+    }
+
+    return `${year}-${month}-${day}`;
+}
+
+function titlesForDate(
+    listings: XtreamNormalizedEpgListing[],
+    dateKey: string,
+    timeZone: string
+): string[] {
+    return listings
+        .filter(
+            (listing) =>
+                formatDateKeyInZone(listing.startTimestamp * 1000, timeZone) ===
+                dateKey
+        )
+        .map((listing) => listing.title);
+}
+
+function visibleTitlesForCurrentDate(
+    listings: XtreamNormalizedEpgListing[],
+    currentDateKey: string,
+    timeZone: string
+): string[] {
+    const nowSeconds = Math.floor(Date.now() / 1000);
+
+    return listings
+        .filter(
+            (listing) =>
+                formatDateKeyInZone(listing.startTimestamp * 1000, timeZone) ===
+                    currentDateKey && listing.stopTimestamp >= nowSeconds
+        )
+        .map((listing) => listing.title);
+}
+
+function getFirstFutureDateKey(
+    listings: XtreamNormalizedEpgListing[],
+    currentDateKey: string,
+    timeZone: string
+): string | null {
+    const uniqueDateKeys = Array.from(
+        new Set(
+            listings.map((listing) =>
+                formatDateKeyInZone(listing.startTimestamp * 1000, timeZone)
+            )
+        )
+    ).sort();
+
+    return uniqueDateKeys.find((dateKey) => dateKey > currentDateKey) ?? null;
+}
+
+function dayDifference(fromDateKey: string, toDateKey: string): number {
+    const from = Date.parse(`${fromDateKey}T00:00:00.000Z`);
+    const to = Date.parse(`${toDateKey}T00:00:00.000Z`);
+    return Math.round((to - from) / (24 * 60 * 60 * 1000));
+}
+
+async function visibleProgramTitles(page: Parameters<typeof channelItemByTitle>[0]) {
+    return page
+        .locator('app-epg-list .program-title')
+        .allInnerTexts()
+        .then((titles) => titles.map((title) => title.trim()).filter(Boolean));
+}
+
+async function getProgressWidthPercent(row: ReturnType<typeof channelItemByTitle>) {
+    const style = await row.locator('.epg-progress-fill').getAttribute('style');
+    const width = style?.match(/width:\s*([\d.]+)%/)?.[1] ?? '0';
+    return Number.parseFloat(width);
+}
diff --git a/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts b/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts
new file mode 100644
index 0000000..e2621d7
--- /dev/null
+++ b/apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts
@@ -0,0 +1,320 @@
+import {
+    addXtreamPortal,
+    closeElectronApp,
+    expect,
+    expectPortalDebugSuccess,
+    expectRendererFramesAdvance,
+    launchElectronApp,
+    resetMockServers,
+    test,
+    waitForDbOperationEvent,
+    waitForXtreamCatalog,
+    xtreamMockServer,
+} from './electron-test-fixtures';
+
+const stressPortalName = 'Stress Xtream Portal';
+const stressXtreamUsername = 'stress';
+const stressXtreamPassword = 'stress';
+const dbWorkerBatchDelayMs = '20';
+
+function playlistRowByName(name: string) {
+    return `app-playlist-item:has-text("${name}")`;
+}
+
+async function openSources(page: Parameters<typeof addXtreamPortal>[0]) {
+    await page.getByRole('link', { name: 'Sources', exact: true }).click();
+    await page.waitForURL(/\/workspace\/sources$/);
+}
+
+function xtreamBlockedStateTitle(page: Parameters<typeof addXtreamPortal>[0]) {
+    return page.locator('.xtream-content-gate .error-view__title');
+}
+
+test.describe('Electron Xtream Responsiveness', () => {
+    test.describe.configure({ mode: 'serial' });
+    test.setTimeout(120000);
+
+    test('keeps the UI responsive during large Xtream imports', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+
+        const app = await launchElectronApp(dataDir, {
+            env: {
+                IPTVNATOR_DB_WORKER_BATCH_DELAY_MS: dbWorkerBatchDelayMs,
+            },
+        });
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: stressPortalName,
+                password: stressXtreamPassword,
+                username: stressXtreamUsername,
+            });
+
+            const overlay = app.mainWindow.locator(
+                '.workspace-loading-overlay'
+            );
+            await expect(overlay).toBeVisible({ timeout: 15000 });
+            await expect(
+                overlay.getByRole('button', {
+                    name: /stop sync|cancel import/i,
+                })
+            ).toBeVisible({ timeout: 20000 });
+
+            await waitForDbOperationEvent(app.mainWindow, {
+                operation: 'save-content',
+                predicate: (event) =>
+                    event.status === 'progress' &&
+                    (event.current ?? 0) > 0 &&
+                    (event.total ?? 0) > 0,
+                timeoutMs: 30000,
+            });
+
+            await expect
+                .poll(
+                    async () =>
+                        (await app.mainWindow.evaluate(
+                            () =>
+                                (window.__dbOperationEvents ?? []).filter(
+                                    (event) =>
+                                        event.operation === 'save-content' &&
+                                        event.status === 'progress'
+                                ).length
+                        )) > 2,
+                    { timeout: 30000 }
+                )
+                .toBeTruthy();
+
+            await expectRendererFramesAdvance(app.mainWindow, {
+                minimumDelta: 5,
+                sampleMs: 400,
+            });
+
+            await expect
+                .poll(
+                    async () =>
+                        (await overlay.locator('p').allInnerTexts()).some(
+                            (text) =>
+                                /(Live TV|Movies|Series).*?\d+\s*\/\s*\d+/.test(
+                                    text
+                                )
+                        ),
+                    { timeout: 30000 }
+                )
+                .toBeTruthy();
+
+            await waitForXtreamCatalog(app.mainWindow);
+            await expectPortalDebugSuccess(app.mainWindow, 'xtream');
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('stops importing after cancel until the user explicitly retries', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+
+        const app = await launchElectronApp(dataDir, {
+            env: {
+                IPTVNATOR_DB_WORKER_BATCH_DELAY_MS: dbWorkerBatchDelayMs,
+            },
+        });
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: stressPortalName,
+                password: stressXtreamPassword,
+                username: stressXtreamUsername,
+            });
+
+            const overlay = app.mainWindow.locator(
+                '.workspace-loading-overlay'
+            );
+            const cancelButton = overlay.getByRole('button', {
+                name: /stop sync|cancel import/i,
+            });
+
+            await expect(overlay).toBeVisible({ timeout: 15000 });
+            await expect(cancelButton).toBeVisible({ timeout: 20000 });
+
+            await waitForDbOperationEvent(app.mainWindow, {
+                operation: 'save-content',
+                predicate: (event) =>
+                    event.status === 'progress' &&
+                    (event.current ?? 0) > 0 &&
+                    (event.total ?? 0) > 0,
+                timeoutMs: 30000,
+            });
+
+            await cancelButton.click();
+
+            await expect(overlay).toHaveCount(0, { timeout: 20000 });
+            await expect(xtreamBlockedStateTitle(app.mainWindow)).toHaveText(
+                'Import cancelled',
+                { timeout: 20000 }
+            );
+
+            await app.mainWindow.waitForTimeout(1200);
+            await expect(overlay).toHaveCount(0);
+
+            const retryButton = app.mainWindow.getByRole('button', {
+                name: 'Retry',
+                exact: true,
+            });
+            await retryButton.click();
+
+            await waitForXtreamCatalog(app.mainWindow);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('blocks expired and inactive Xtream accounts before import starts', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Expired Xtream Portal',
+                password: 'expired',
+                username: 'expired',
+            });
+
+            await expect(xtreamBlockedStateTitle(app.mainWindow)).toHaveText(
+                'Account expired',
+                { timeout: 20000 }
+            );
+            await expect(
+                app.mainWindow.locator('.workspace-loading-overlay')
+            ).toHaveCount(0);
+
+            await openSources(app.mainWindow);
+
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Inactive Xtream Portal',
+                password: 'inactive',
+                username: 'inactive',
+            });
+
+            await expect(xtreamBlockedStateTitle(app.mainWindow)).toHaveText(
+                'Account inactive',
+                { timeout: 20000 }
+            );
+            await expect(
+                app.mainWindow.locator('.workspace-loading-overlay')
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('blocks unreachable Xtream portals immediately without an import loop', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: 'Unavailable Xtream Portal',
+                password: stressXtreamPassword,
+                serverUrl: xtreamMockServer.replace(/:\d+$/, ':65530'),
+                username: stressXtreamUsername,
+            });
+
+            await expect(xtreamBlockedStateTitle(app.mainWindow)).toHaveText(
+                'Portal unavailable',
+                { timeout: 20000 }
+            );
+            await expect(
+                app.mainWindow.locator('.workspace-loading-overlay')
+            ).toHaveCount(0);
+            await app.mainWindow.waitForTimeout(1200);
+            await expect(
+                app.mainWindow.locator('.workspace-loading-overlay')
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+
+    test('keeps the UI responsive during large Xtream playlist deletion', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+
+        const app = await launchElectronApp(dataDir, {
+            env: {
+                IPTVNATOR_DB_WORKER_BATCH_DELAY_MS: dbWorkerBatchDelayMs,
+            },
+        });
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                name: stressPortalName,
+                password: stressXtreamPassword,
+                username: stressXtreamUsername,
+            });
+            await waitForXtreamCatalog(app.mainWindow);
+            await openSources(app.mainWindow);
+
+            const playlistRow = app.mainWindow.locator(
+                playlistRowByName(stressPortalName)
+            );
+            await expect(playlistRow).toBeVisible({ timeout: 20000 });
+
+            await playlistRow.locator('.delete-btn').click();
+
+            const confirmDialog = app.mainWindow.locator(
+                'mat-dialog-container'
+            );
+            await expect(confirmDialog).toBeVisible();
+            await confirmDialog
+                .getByRole('button', { name: 'Yes', exact: true })
+                .click();
+
+            await waitForDbOperationEvent(app.mainWindow, {
+                operation: 'delete-playlist',
+                status: 'started',
+                timeoutMs: 20000,
+            });
+
+            await expect(
+                playlistRow.locator('.busy-state__message')
+            ).toBeVisible({ timeout: 20000 });
+            await expect(playlistRow.locator('.cancel-btn')).toBeVisible();
+
+            await waitForDbOperationEvent(app.mainWindow, {
+                operation: 'delete-playlist',
+                predicate: (event) =>
+                    event.status === 'progress' &&
+                    (event.current ?? 0) > 0 &&
+                    (event.total ?? 0) > 0,
+                timeoutMs: 30000,
+            });
+
+            await expectRendererFramesAdvance(app.mainWindow, {
+                minimumDelta: 5,
+                sampleMs: 400,
+            });
+
+            await expect(playlistRow).toHaveCount(0, { timeout: 60000 });
+            await expect(
+                app.mainWindow.locator(playlistRowByName(stressPortalName))
+            ).toHaveCount(0);
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
diff --git a/apps/electron-backend-e2e/src/xtream-vod-details.e2e.ts b/apps/electron-backend-e2e/src/xtream-vod-details.e2e.ts
new file mode 100644
index 0000000..43c07c7
--- /dev/null
+++ b/apps/electron-backend-e2e/src/xtream-vod-details.e2e.ts
@@ -0,0 +1,75 @@
+import {
+    addXtreamPortal,
+    clickCategoryByNameExact,
+    clickGridListCardByTitle,
+    closeElectronApp,
+    expect,
+    launchElectronApp,
+    resetMockServers,
+    test,
+    waitForXtreamWorkspaceReady,
+} from './electron-test-fixtures';
+import {
+    fetchXtreamVodFixture,
+    getXtreamTitle,
+    pickDistinctTitles,
+} from './portal-mock-fixtures';
+
+const emptyMetadataCredentials = {
+    password: 'emptyvod',
+    username: 'emptyvod',
+};
+
+test.describe('Xtream VOD Details', () => {
+    test('shows a curated fallback when the portal returns empty VOD metadata', async ({
+        dataDir,
+        request,
+    }) => {
+        await resetMockServers(request, ['xtream']);
+        const vodFixture = await fetchXtreamVodFixture(
+            request,
+            emptyMetadataCredentials
+        );
+        const [movieTitle] = pickDistinctTitles(vodFixture.items, getXtreamTitle);
+        const app = await launchElectronApp(dataDir);
+
+        try {
+            await addXtreamPortal(app.mainWindow, {
+                ...emptyMetadataCredentials,
+                name: 'Xtream Empty Metadata',
+            });
+            await waitForXtreamWorkspaceReady(app.mainWindow);
+
+            await app.mainWindow
+                .getByRole('link', { name: 'Movies', exact: true })
+                .click();
+            await clickCategoryByNameExact(app.mainWindow, vodFixture.categoryName);
+            await clickGridListCardByTitle(app.mainWindow, movieTitle);
+
+            await app.mainWindow.waitForURL(
+                /\/workspace\/xtreams\/[^/]+\/vod\/[^/]+\/[^/]+$/
+            );
+            await expect(app.mainWindow.locator('app-content-hero')).toContainText(
+                movieTitle
+            );
+            await expect(
+                app.mainWindow.locator('[data-testid="xtream-vod-fallback-status"]')
+            ).toContainText('Portal metadata unavailable');
+            await expect(
+                app.mainWindow.locator('[data-testid="xtream-vod-fallback"]')
+            ).toContainText(
+                'Extended metadata was not provided by this portal.'
+            );
+
+            await expect(app.mainWindow.locator('button.play-btn')).toHaveCount(0);
+            await expect(app.mainWindow.locator('button.favorite-btn')).toHaveCount(
+                0
+            );
+            await expect(app.mainWindow.locator('button.download-btn')).toHaveCount(
+                0
+            );
+        } finally {
+            await closeElectronApp(app);
+        }
+    });
+});
diff --git a/apps/electron-backend-e2e/tsconfig.json b/apps/electron-backend-e2e/tsconfig.json
new file mode 100644
index 0000000..dcc6815
--- /dev/null
+++ b/apps/electron-backend-e2e/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "allowJs": true,
+        "outDir": "../../dist/out-tsc",
+        "sourceMap": false,
+        "module": "commonjs",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.js",
+        "playwright.config.ts",
+        "src/**/*.d.ts",
+        "src/**/*.e2e.ts"
+    ]
+}
diff --git a/apps/electron-backend/build-worker.js b/apps/electron-backend/build-worker.js
new file mode 100644
index 0000000..7d7d7c4
--- /dev/null
+++ b/apps/electron-backend/build-worker.js
@@ -0,0 +1,111 @@
+const esbuild = require('esbuild');
+const path = require('path');
+
+// Node.js built-in modules that should be externalized
+const nodeBuiltins = [
+    'assert', 'async_hooks', 'buffer', 'child_process', 'cluster',
+    'console', 'constants', 'crypto', 'dgram', 'dns', 'domain',
+    'events', 'fs', 'http', 'http2', 'https', 'inspector', 'module',
+    'net', 'os', 'path', 'perf_hooks', 'process', 'punycode',
+    'querystring', 'readline', 'repl', 'stream', 'string_decoder',
+    'sys', 'timers', 'tls', 'trace_events', 'tty', 'url', 'util',
+    'v8', 'vm', 'worker_threads', 'zlib'
+];
+
+// Native modules that must be externalized (loaded at runtime)
+const nativeModules = [
+    'better-sqlite3',
+];
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+async function buildWorker() {
+    try {
+        const workers = [
+            {
+                label: 'EPG parser worker',
+                entry: path.join(
+                    __dirname,
+                    'src/app/workers/epg-parser.worker.ts'
+                ),
+                outfile: path.join(
+                    __dirname,
+                    '../../dist/apps/electron-backend/workers/epg-parser.worker.js'
+                ),
+            },
+            {
+                label: 'database worker',
+                entry: path.join(
+                    __dirname,
+                    'src/app/workers/database.worker.ts'
+                ),
+                outfile: path.join(
+                    __dirname,
+                    '../../dist/apps/electron-backend/workers/database.worker.js'
+                ),
+            },
+            {
+                label: 'playlist refresh worker',
+                entry: path.join(
+                    __dirname,
+                    'src/app/workers/playlist-refresh.worker.ts'
+                ),
+                outfile: path.join(
+                    __dirname,
+                    '../../dist/apps/electron-backend/workers/playlist-refresh.worker.js'
+                ),
+            },
+        ];
+
+        for (const worker of workers) {
+            console.log(
+                `Building ${worker.label} with esbuild (${isProduction ? 'production' : 'development'})...`
+            );
+
+            await esbuild.build({
+                entryPoints: [worker.entry],
+                bundle: true,
+                platform: 'node',
+                target: 'node18',
+                format: 'cjs',
+                outfile: worker.outfile,
+                external: [
+                    ...nodeBuiltins.map((m) => `node:${m}`),
+                    ...nodeBuiltins,
+                    ...nativeModules,
+                ],
+                sourcemap: !isProduction,
+                minify: isProduction,
+                alias: {
+                    'shared-interfaces': path.join(
+                        __dirname,
+                        '../../libs/shared/interfaces/src/index.ts'
+                    ),
+                    'm3u-utils': path.join(
+                        __dirname,
+                        '../../libs/shared/m3u-utils/src/index.ts'
+                    ),
+                    'database': path.join(
+                        __dirname,
+                        '../../libs/shared/database/src/index.ts'
+                    ),
+                    'database-schema': path.join(
+                        __dirname,
+                        '../../libs/shared/database/src/lib/schema.ts'
+                    ),
+                    'database-path-utils': path.join(
+                        __dirname,
+                        '../../libs/shared/database/src/lib/path-utils.ts'
+                    ),
+                },
+            });
+        }
+
+        console.log('✅ Workers built successfully!');
+    } catch (error) {
+        console.error('❌ Worker build failed:', error);
+        process.exit(1);
+    }
+}
+
+buildWorker();
diff --git a/apps/electron-backend/eslint.config.mjs b/apps/electron-backend/eslint.config.mjs
new file mode 100644
index 0000000..b7f6277
--- /dev/null
+++ b/apps/electron-backend/eslint.config.mjs
@@ -0,0 +1,3 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [...baseConfig];
diff --git a/apps/electron-backend/jest.config.ts b/apps/electron-backend/jest.config.ts
new file mode 100644
index 0000000..9493414
--- /dev/null
+++ b/apps/electron-backend/jest.config.ts
@@ -0,0 +1,13 @@
+export default {
+    displayName: 'electron-backend',
+    preset: '../../jest.preset.js',
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.[tj]s$': [
+            'ts-jest',
+            { tsconfig: '<rootDir>/tsconfig.spec.json' },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../coverage/apps/electron-backend',
+};
diff --git a/apps/electron-backend/linux/com.fourgray.iptvnator.metainfo.xml b/apps/electron-backend/linux/com.fourgray.iptvnator.metainfo.xml
new file mode 100644
index 0000000..02ae895
--- /dev/null
+++ b/apps/electron-backend/linux/com.fourgray.iptvnator.metainfo.xml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop-application">
+  <id>com.fourgray.iptvnator</id>
+  <metadata_license>CC0-1.0</metadata_license>
+  <project_license>MIT</project_license>
+  <name>IPTVnator</name>
+  <developer_name>4gray</developer_name>
+  <update_contact>fourgray@proton.me</update_contact>
+  <summary>Open-source IPTV player for M3U, Xtream Codes, and Stalker portals</summary>
+  <launchable type="desktop-id">com.fourgray.iptvnator.desktop</launchable>
+
+  <description>
+    <p>IPTVnator is a cross-platform IPTV player for user-supplied playlists and portal connections.</p>
+    <p>It supports M3U and M3U8 playlists, Xtream Codes API, and Stalker portals with EPG, catch-up, favorites, and external player integration.</p>
+    <p>The app does not include channels, playlists, or media catalogs. Any IPTV sources, logos, metadata, and programme information come from services the user configures.</p>
+  </description>
+
+  <categories>
+    <category>AudioVideo</category>
+    <category>Player</category>
+    <category>Video</category>
+  </categories>
+
+  <keywords>
+    <keyword>IPTV</keyword>
+    <keyword>M3U</keyword>
+    <keyword>M3U8</keyword>
+    <keyword>EPG</keyword>
+    <keyword>Xtream</keyword>
+    <keyword>Stalker</keyword>
+  </keywords>
+
+  <url type="homepage">https://4gray.github.io/iptvnator/</url>
+  <url type="bugtracker">https://github.com/4gray/iptvnator/issues</url>
+  <url type="help">https://4gray.github.io/iptvnator/blog/</url>
+  <url type="donation">https://github.com/sponsors/4gray</url>
+
+  <content_rating type="oars-1.0"/>
+
+  <releases>
+    <release version="0.20.0" type="development" date="2026-02-21"/>
+    <release version="0.19.0" type="stable" date="2026-02-11"/>
+  </releases>
+
+  <screenshots>
+    <screenshot type="default">
+      <caption>Browse channels and watch live IPTV streams</caption>
+      <image type="source">https://4gray.github.io/iptvnator/appstream/player.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Manage playlists and switch between sources</caption>
+      <image type="source">https://4gray.github.io/iptvnator/appstream/playlists.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>View programme schedules in the integrated EPG</caption>
+      <image type="source">https://4gray.github.io/iptvnator/appstream/epg.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Adjust playback, interface, and provider settings</caption>
+      <image type="source">https://4gray.github.io/iptvnator/appstream/settings.png</image>
+    </screenshot>
+  </screenshots>
+
+  <provides>
+    <binary>iptvnator</binary>
+  </provides>
+</component>
diff --git a/apps/electron-backend/linux/com.kiracloud.kiratv.metainfo.xml b/apps/electron-backend/linux/com.kiracloud.kiratv.metainfo.xml
new file mode 100644
index 0000000..2a8a866
--- /dev/null
+++ b/apps/electron-backend/linux/com.kiracloud.kiratv.metainfo.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop-application">
+  <id>com.kiracloud.kiratv</id>
+  <metadata_license>CC0-1.0</metadata_license>
+  <project_license>MIT</project_license>
+  <name>KiraTV</name>
+  <developer_name>Kira Cloud</developer_name>
+  <update_contact>jnavajascordobes@gmail.com</update_contact>
+  <summary>Cliente de escritorio IPTV para Kira Cloud (Xtream Codes)</summary>
+  <launchable type="desktop-id">com.kiracloud.kiratv.desktop</launchable>
+
+  <description>
+    <p>KiraTV es un reproductor IPTV para Windows y Linux, orientado a la familia y preconfigurado para Kira Cloud.</p>
+    <p>Incluye soporte para Xtream Codes (TV en directo, VOD y series), EPG y favoritos.</p>
+    <p>La aplicación no incluye canales ni contenido: el usuario inicia sesión con las credenciales de su proveedor.</p>
+  </description>
+
+  <categories>
+    <category>AudioVideo</category>
+    <category>Player</category>
+    <category>Video</category>
+  </categories>
+
+  <keywords>
+    <keyword>IPTV</keyword>
+    <keyword>Xtream</keyword>
+    <keyword>KiraTV</keyword>
+  </keywords>
+
+  <url type="homepage">https://play.kiracloud.es</url>
+
+  <content_rating type="oars-1.0"/>
+
+  <releases>
+    <release version="0.20.0" type="stable" date="2026-05-03"/>
+  </releases>
+
+  <provides>
+    <binary>kiratv</binary>
+  </provides>
+</component>
diff --git a/apps/electron-backend/macos/entitlements.mac.inherit.plist b/apps/electron-backend/macos/entitlements.mac.inherit.plist
new file mode 100644
index 0000000..9a279dc
--- /dev/null
+++ b/apps/electron-backend/macos/entitlements.mac.inherit.plist
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.disable-library-validation</key>
+    <true/>
+  </dict>
+</plist>
diff --git a/apps/electron-backend/macos/entitlements.mac.plist b/apps/electron-backend/macos/entitlements.mac.plist
new file mode 100644
index 0000000..9a279dc
--- /dev/null
+++ b/apps/electron-backend/macos/entitlements.mac.plist
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.disable-library-validation</key>
+    <true/>
+  </dict>
+</plist>
diff --git a/apps/electron-backend/project.json b/apps/electron-backend/project.json
new file mode 100644
index 0000000..b3d2c8f
--- /dev/null
+++ b/apps/electron-backend/project.json
@@ -0,0 +1,128 @@
+{
+    "name": "electron-backend",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "apps/electron-backend/src",
+    "projectType": "application",
+    "targets": {
+        "build-worker": {
+            "executor": "nx:run-commands",
+            "outputs": ["{workspaceRoot}/dist/apps/electron-backend/workers"],
+            "options": {
+                "command": "node apps/electron-backend/build-worker.js"
+            }
+        },
+        "build": {
+            "dependsOn": [
+                "electron-backend:build-worker",
+                {
+                    "projects": ["web"],
+                    "target": "build",
+                    "params": "forward"
+                },
+                {
+                    "projects": ["remote-control-web"],
+                    "target": "build",
+                    "params": "forward"
+                }
+            ],
+            "executor": "nx-electron:build",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/apps/electron-backend",
+                "main": "apps/electron-backend/src/main.ts",
+                "tsConfig": "apps/electron-backend/tsconfig.app.json",
+                "assets": ["apps/electron-backend/src/assets"]
+            },
+            "configurations": {
+                "production": {
+                    "optimization": true,
+                    "extractLicenses": true,
+                    "inspect": false,
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/electron-backend/src/environments/environment.ts",
+                            "with": "apps/electron-backend/src/environments/environment.prod.ts"
+                        }
+                    ]
+                },
+                "kiratv": {
+                    "optimization": true,
+                    "extractLicenses": true,
+                    "inspect": false,
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/electron-backend/src/environments/environment.ts",
+                            "with": "apps/electron-backend/src/environments/environment.kiratv.ts"
+                        }
+                    ]
+                }
+            }
+        },
+        "build-e2e": {
+            "dependsOn": [
+                "electron-backend:build-worker",
+                {
+                    "projects": ["web"],
+                    "target": "build-e2e"
+                },
+                {
+                    "projects": ["remote-control-web"],
+                    "target": "build-e2e"
+                }
+            ],
+            "executor": "nx-electron:build",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/apps/electron-backend",
+                "main": "apps/electron-backend/src/main.ts",
+                "tsConfig": "apps/electron-backend/tsconfig.app.json",
+                "assets": ["apps/electron-backend/src/assets"]
+            }
+        },
+        "serve": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "nx run electron-backend:serve-electron"
+            }
+        },
+        "serve-electron": {
+            "executor": "nx-electron:execute",
+            "options": {
+                "buildTarget": "electron-backend:build",
+                "waitUntilTargets": ["web:serve"],
+                "remoteDebuggingPort": 9222
+            }
+        },
+        "package": {
+            "dependsOn": ["electron-backend:build"],
+            "executor": "nx-electron:package",
+            "options": {
+                "name": "electron-backend",
+                "frontendProject": "web",
+                "sourcePath": "dist/apps",
+                "outputPath": "dist/packages",
+                "prepackageOnly": true
+            }
+        },
+        "make": {
+            "dependsOn": ["electron-backend:build"],
+            "executor": "nx-electron:make",
+            "options": {
+                "name": "electron-backend",
+                "frontendProject": "web",
+                "sourcePath": "dist/apps",
+                "outputPath": "dist/executables"
+            }
+        },
+        "lint": {
+            "command": "eslint apps/electron-backend/**/*.ts"
+        },
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "apps/electron-backend/jest.config.ts"
+            }
+        }
+    }
+}
diff --git a/apps/electron-backend/src/app/api/main.preload.ts b/apps/electron-backend/src/app/api/main.preload.ts
new file mode 100644
index 0000000..a0cbd55
--- /dev/null
+++ b/apps/electron-backend/src/app/api/main.preload.ts
@@ -0,0 +1,666 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import type {
+    ExternalPlayerSession,
+    PlaylistRefreshEvent,
+    PlaylistRefreshPayload,
+    XtreamCategory,
+} from 'shared-interfaces';
+import {
+    DEBUG_TRACE_EVENT_CHANNEL,
+    isRendererApiTraceEnabled,
+    roundTraceDuration,
+    summarizeForTrace,
+} from '../services/debug-trace';
+
+const PORTAL_DEBUG_EVENT = 'PORTAL_DEBUG_EVENT';
+const EXTERNAL_PLAYER_SESSION_UPDATE = 'EXTERNAL_PLAYER_SESSION_UPDATE';
+const DB_OPERATION_EVENT = 'DB_OPERATION_EVENT';
+const PLAYLIST_REFRESH_EVENT = 'PLAYLIST:REFRESH_EVENT';
+
+type PortalDebugEvent = {
+    requestId: string;
+    provider: 'xtream' | 'stalker';
+    operation: string;
+    transport: 'electron-main' | 'electron-renderer' | 'pwa-http';
+    startedAt: string;
+    durationMs: number;
+    status: 'success' | 'error';
+    request: unknown;
+    response?: unknown;
+    error?: unknown;
+};
+
+type DbOperationEvent = {
+    operationId?: string;
+    operation: string;
+    playlistId?: string;
+    status: 'started' | 'progress' | 'completed' | 'cancelled' | 'error';
+    phase?: string;
+    current?: number;
+    total?: number;
+    increment?: number;
+    error?: string;
+};
+
+const dbSaveContentProgressListeners = new Set<
+    (event: Electron.IpcRendererEvent, data: DbOperationEvent) => void
+>();
+
+const shouldTraceRendererApi = isRendererApiTraceEnabled();
+
+function emitRendererTrace(payload: {
+    method: string;
+    phase: 'start' | 'success' | 'error';
+    args?: unknown;
+    durationMs?: number;
+    error?: unknown;
+    result?: unknown;
+}): void {
+    if (!shouldTraceRendererApi) {
+        return;
+    }
+
+    ipcRenderer.send(DEBUG_TRACE_EVENT_CHANNEL, payload);
+}
+
+function wrapElectronApi<T extends Record<string, unknown>>(api: T): T {
+    if (!shouldTraceRendererApi) {
+        return api;
+    }
+
+    return Object.fromEntries(
+        Object.entries(api).map(([name, value]) => {
+            if (
+                typeof value !== 'function' ||
+                name.startsWith('on') ||
+                name.startsWith('remove')
+            ) {
+                return [name, value];
+            }
+
+            const original = value as (...args: unknown[]) => unknown;
+
+            return [
+                name,
+                (...args: unknown[]) => {
+                    const startedAt =
+                        globalThis.performance?.now?.() ?? Date.now();
+                    emitRendererTrace({
+                        args: summarizeForTrace(args),
+                        method: name,
+                        phase: 'start',
+                    });
+
+                    try {
+                        const result = original(...args);
+
+                        if (
+                            result &&
+                            typeof (result as PromiseLike<unknown>).then ===
+                                'function'
+                        ) {
+                            return (result as Promise<unknown>)
+                                .then((resolvedValue) => {
+                                    emitRendererTrace({
+                                        durationMs: roundTraceDuration(
+                                            (globalThis.performance?.now?.() ??
+                                                Date.now()) - startedAt
+                                        ),
+                                        method: name,
+                                        phase: 'success',
+                                        result: summarizeForTrace(
+                                            resolvedValue
+                                        ),
+                                    });
+                                    return resolvedValue;
+                                })
+                                .catch((error: unknown) => {
+                                    emitRendererTrace({
+                                        durationMs: roundTraceDuration(
+                                            (globalThis.performance?.now?.() ??
+                                                Date.now()) - startedAt
+                                        ),
+                                        error: summarizeForTrace(error),
+                                        method: name,
+                                        phase: 'error',
+                                    });
+                                    throw error;
+                                });
+                        }
+
+                        emitRendererTrace({
+                            durationMs: roundTraceDuration(
+                                (globalThis.performance?.now?.() ??
+                                    Date.now()) - startedAt
+                            ),
+                            method: name,
+                            phase: 'success',
+                            result: summarizeForTrace(result),
+                        });
+
+                        return result;
+                    } catch (error) {
+                        emitRendererTrace({
+                            durationMs: roundTraceDuration(
+                                (globalThis.performance?.now?.() ??
+                                    Date.now()) - startedAt
+                            ),
+                            error: summarizeForTrace(error),
+                            method: name,
+                            phase: 'error',
+                        });
+                        throw error;
+                    }
+                },
+            ];
+        })
+    ) as T;
+}
+
+const electronApi = {
+    // Remote control channel change listener
+    onChannelChange: (
+        callback: (data: { direction: 'up' | 'down' }) => void
+    ) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data);
+        ipcRenderer.on('CHANNEL_CHANGE', handler);
+        return () => ipcRenderer.off('CHANNEL_CHANGE', handler);
+    },
+    onRemoteControlCommand: (
+        callback: (data: {
+            type:
+                | 'channel-select-number'
+                | 'volume-up'
+                | 'volume-down'
+                | 'volume-toggle-mute';
+            number?: number;
+        }) => void
+    ) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data);
+        ipcRenderer.on('REMOTE_CONTROL_COMMAND', handler);
+        return () => ipcRenderer.off('REMOTE_CONTROL_COMMAND', handler);
+    },
+    updateRemoteControlStatus: (status: any) => {
+        ipcRenderer.send('REMOTE_CONTROL_STATUS_UPDATE', status);
+    },
+    // Player error listener
+    onPlayerError: (
+        callback: (data: {
+            player: string;
+            error: string;
+            originalError: string;
+        }) => void
+    ) => {
+        ipcRenderer.on('player-error', (_event, data) => callback(data));
+    },
+    onPortalDebugEvent: (callback: (data: PortalDebugEvent) => void) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data as PortalDebugEvent);
+        ipcRenderer.on(PORTAL_DEBUG_EVENT, handler);
+        return () => ipcRenderer.off(PORTAL_DEBUG_EVENT, handler);
+    },
+    // EPG progress listener
+    onEpgProgress: (
+        callback: (data: {
+            url: string;
+            status: 'loading' | 'complete' | 'error';
+            stats?: { totalChannels: number; totalPrograms: number };
+            error?: string;
+        }) => void
+    ) => {
+        ipcRenderer.on('EPG_PROGRESS_UPDATE', (_event, data) => callback(data));
+    },
+    // Playback position update listener - returns unsubscribe function
+    onPlaybackPositionUpdate: (callback: (data: any) => void) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data);
+        ipcRenderer.on('playback-position-update', handler);
+        return () => ipcRenderer.off('playback-position-update', handler);
+    },
+    onExternalPlayerSessionUpdate: (
+        callback: (data: ExternalPlayerSession) => void
+    ) => {
+        const handler = (
+            _event: Electron.IpcRendererEvent,
+            data: ExternalPlayerSession
+        ) => callback(data);
+        ipcRenderer.on(EXTERNAL_PLAYER_SESSION_UPDATE, handler);
+        return () => ipcRenderer.off(EXTERNAL_PLAYER_SESSION_UPDATE, handler);
+    },
+    onDbOperationEvent: (callback: (data: DbOperationEvent) => void) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data as DbOperationEvent);
+        ipcRenderer.on(DB_OPERATION_EVENT, handler);
+        return () => ipcRenderer.off(DB_OPERATION_EVENT, handler);
+    },
+    onPlaylistRefreshEvent: (
+        callback: (data: PlaylistRefreshEvent) => void
+    ) => {
+        const handler = (_event: Electron.IpcRendererEvent, data: any) =>
+            callback(data as PlaylistRefreshEvent);
+        ipcRenderer.on(PLAYLIST_REFRESH_EVENT, handler);
+        return () => ipcRenderer.off(PLAYLIST_REFRESH_EVENT, handler);
+    },
+    // DB save content progress listener
+    onDbSaveContentProgress: (callback: (count: number) => void) => {
+        const handler = (
+            _event: Electron.IpcRendererEvent,
+            data: DbOperationEvent
+        ) => {
+            if (
+                data.operation !== 'save-content' ||
+                data.status !== 'progress'
+            ) {
+                return;
+            }
+
+            callback(data.increment ?? data.current ?? 0);
+        };
+
+        dbSaveContentProgressListeners.add(handler);
+        ipcRenderer.on(DB_OPERATION_EVENT, handler);
+    },
+    // Remove DB save content progress listener
+    removeDbSaveContentProgress: () => {
+        dbSaveContentProgressListeners.forEach((handler) => {
+            ipcRenderer.off(DB_OPERATION_EVENT, handler);
+        });
+        dbSaveContentProgressListeners.clear();
+    },
+    getAppVersion: () => ipcRenderer.invoke('get-app-version'),
+    platform: process.platform,
+    fetchPlaylistByUrl: (url: string, title?: string) =>
+        ipcRenderer.invoke('fetch-playlist-by-url', url, title),
+    updatePlaylistFromFilePath: (filePath: string, title: string) =>
+        ipcRenderer.invoke('update-playlist-from-file-path', filePath, title),
+    openPlaylistFromFile: () => ipcRenderer.invoke('open-playlist-from-file'),
+    saveFileDialog: (
+        defaultPath: string,
+        filters?: { name: string; extensions: string[] }[]
+    ) => ipcRenderer.invoke('save-file-dialog', defaultPath, filters),
+    writeFile: (filePath: string, content: string) =>
+        ipcRenderer.invoke('write-file', filePath, content),
+    setUserAgent: (userAgent: string, referer?: string) =>
+        ipcRenderer.invoke('set-user-agent', userAgent, referer),
+    openInMpv: (
+        url: string,
+        title: string,
+        thumbnail: string,
+        userAgent: string,
+        referer?: string,
+        origin?: string,
+        contentInfo?: any,
+        startTime?: number,
+        headers?: Record<string, string>
+    ): Promise<ExternalPlayerSession> =>
+        ipcRenderer.invoke(
+            'OPEN_MPV_PLAYER',
+            url,
+            title,
+            thumbnail,
+            userAgent,
+            referer,
+            origin,
+            contentInfo,
+            startTime,
+            headers
+        ),
+    openInVlc: (
+        url: string,
+        title: string,
+        thumbnail: string,
+        userAgent: string,
+        referer?: string,
+        origin?: string,
+        contentInfo?: any,
+        startTime?: number,
+        headers?: Record<string, string>
+    ): Promise<ExternalPlayerSession> =>
+        ipcRenderer.invoke(
+            'OPEN_VLC_PLAYER',
+            url,
+            title,
+            thumbnail,
+            userAgent,
+            referer,
+            origin,
+            contentInfo,
+            startTime,
+            headers
+        ),
+    closeExternalPlayerSession: (sessionId: string) =>
+        ipcRenderer.invoke('CLOSE_EXTERNAL_PLAYER_SESSION', sessionId),
+    autoUpdatePlaylists: (playlists) =>
+        ipcRenderer.invoke('AUTO_UPDATE', playlists),
+    fetchEpg: (urls: string[]) =>
+        ipcRenderer.invoke('FETCH_EPG', { url: urls }),
+    getChannelPrograms: (channelId: string) =>
+        ipcRenderer.invoke('GET_CHANNEL_PROGRAMS', { channelId }),
+    getEpgChannelMetadata: (channelIds: string[]) =>
+        ipcRenderer.invoke('EPG_GET_CHANNEL_METADATA', { channelIds }),
+    getEpgChannels: () => ipcRenderer.invoke('EPG_GET_CHANNELS'),
+    getEpgChannelsByRange: (skip: number, limit: number) =>
+        ipcRenderer.invoke('EPG_GET_CHANNELS_BY_RANGE', { skip, limit }),
+    forceFetchEpg: (url: string) => ipcRenderer.invoke('EPG_FORCE_FETCH', url),
+    clearEpgData: () => ipcRenderer.invoke('EPG_CLEAR_ALL'),
+    checkEpgFreshness: (urls: string[], maxAgeHours?: number) =>
+        ipcRenderer.invoke('EPG_CHECK_FRESHNESS', { urls, maxAgeHours }),
+    searchEpgPrograms: (searchTerm: string, limit?: number) =>
+        ipcRenderer.invoke('EPG_DB_SEARCH_PROGRAMS', searchTerm, limit),
+    setMpvPlayerPath: (mpvPlayerPath: string) =>
+        ipcRenderer.invoke('SET_MPV_PLAYER_PATH', mpvPlayerPath),
+    setVlcPlayerPath: (vlcPlayerPath: string) =>
+        ipcRenderer.invoke('SET_VLC_PLAYER_PATH', vlcPlayerPath),
+    updateSettings: (settings: any) =>
+        ipcRenderer.invoke('SETTINGS_UPDATE', settings),
+    getAiSettings: () => ipcRenderer.invoke('GET_AI_SETTINGS'),
+    stalkerRequest: (payload: {
+        url: string;
+        macAddress: string;
+        params: Record<string, string>;
+        token?: string;
+        serialNumber?: string;
+        requestId?: string;
+    }) => ipcRenderer.invoke('STALKER_REQUEST', payload),
+    xtreamRequest: (payload: {
+        url: string;
+        params: Record<string, string>;
+        requestId?: string;
+        sessionId?: string;
+        suppressErrorLog?: boolean;
+    }) => ipcRenderer.invoke('XTREAM_REQUEST', payload),
+    xtreamCancelSession: (sessionId: string) =>
+        ipcRenderer.invoke('XTREAM_CANCEL_SESSION', sessionId),
+    xtreamProbeUrl: (url: string, method?: 'GET' | 'HEAD') =>
+        ipcRenderer.invoke('XTREAM_PROBE_URL', { url, method }),
+    refreshPlaylist: (payload: PlaylistRefreshPayload) =>
+        ipcRenderer.invoke('PLAYLIST:REFRESH', payload),
+    cancelPlaylistRefresh: (operationId: string) =>
+        ipcRenderer.invoke('PLAYLIST:CANCEL_REFRESH', operationId),
+    // Database operations
+    dbCreatePlaylist: (playlist: any) =>
+        ipcRenderer.invoke('DB_CREATE_PLAYLIST', playlist),
+    dbGetPlaylist: (playlistId: string) =>
+        ipcRenderer.invoke('DB_GET_PLAYLIST', playlistId),
+    dbUpsertAppPlaylist: (playlist: any) =>
+        ipcRenderer.invoke('DB_UPSERT_APP_PLAYLIST', playlist),
+    dbUpsertAppPlaylists: (playlists: any[]) =>
+        ipcRenderer.invoke('DB_UPSERT_APP_PLAYLISTS', playlists),
+    dbGetAppPlaylists: () => ipcRenderer.invoke('DB_GET_APP_PLAYLISTS'),
+    dbGetAppPlaylist: (playlistId: string) =>
+        ipcRenderer.invoke('DB_GET_APP_PLAYLIST', playlistId),
+    dbUpdatePlaylist: (playlistId: string, updates: any) =>
+        ipcRenderer.invoke('DB_UPDATE_PLAYLIST', playlistId, updates),
+    dbDeletePlaylist: (playlistId: string, operationId?: string) =>
+        ipcRenderer.invoke('DB_DELETE_PLAYLIST', playlistId, operationId),
+    dbDeleteXtreamContent: (playlistId: string, operationId?: string) =>
+        ipcRenderer.invoke('DB_DELETE_XTREAM_CONTENT', playlistId, operationId),
+    dbRestoreXtreamUserData: (
+        playlistId: string,
+        favorites: unknown[],
+        recentlyViewed: unknown[],
+        operationId?: string
+    ) =>
+        ipcRenderer.invoke(
+            'DB_RESTORE_XTREAM_USER_DATA',
+            playlistId,
+            favorites,
+            recentlyViewed,
+            operationId
+        ),
+    dbHasCategories: (playlistId: string, type: string) =>
+        ipcRenderer.invoke('DB_HAS_CATEGORIES', playlistId, type),
+    dbGetCategories: (playlistId: string, type: string) =>
+        ipcRenderer.invoke('DB_GET_CATEGORIES', playlistId, type),
+    dbSaveCategories: (
+        playlistId: string,
+        categories: XtreamCategory[],
+        type: string,
+        hiddenCategoryXtreamIds?: number[]
+    ) =>
+        ipcRenderer.invoke(
+            'DB_SAVE_CATEGORIES',
+            playlistId,
+            categories,
+            type,
+            hiddenCategoryXtreamIds
+        ),
+    dbGetAllCategories: (playlistId: string, type: string) =>
+        ipcRenderer.invoke('DB_GET_ALL_CATEGORIES', playlistId, type),
+    dbUpdateCategoryVisibility: (categoryIds: number[], hidden: boolean) =>
+        ipcRenderer.invoke(
+            'DB_UPDATE_CATEGORY_VISIBILITY',
+            categoryIds,
+            hidden
+        ),
+    dbHasContent: (playlistId: string, type: string) =>
+        ipcRenderer.invoke('DB_HAS_CONTENT', playlistId, type),
+    dbGetContent: (playlistId: string, type: string) =>
+        ipcRenderer.invoke('DB_GET_CONTENT', playlistId, type),
+    dbSaveContent: (
+        playlistId: string,
+        streams: any[],
+        type: string,
+        operationId?: string
+    ) =>
+        ipcRenderer.invoke(
+            'DB_SAVE_CONTENT',
+            playlistId,
+            streams,
+            type,
+            operationId
+        ),
+    dbClearXtreamImportCache: (
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ) => ipcRenderer.invoke('DB_CLEAR_XTREAM_IMPORT_CACHE', playlistId, type),
+    dbSearchContent: (
+        playlistId: string,
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ) =>
+        ipcRenderer.invoke(
+            'DB_SEARCH_CONTENT',
+            playlistId,
+            searchTerm,
+            types,
+            excludeHidden
+        ),
+    dbGlobalSearch: (
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ) =>
+        ipcRenderer.invoke(
+            'DB_GLOBAL_SEARCH',
+            searchTerm,
+            types,
+            excludeHidden
+        ),
+    dbGetGlobalRecentlyAdded: (
+        kind: 'all' | 'vod' | 'series',
+        limit?: number,
+        playlistType?:
+            | 'xtream'
+            | 'stalker'
+            | 'm3u-file'
+            | 'm3u-text'
+            | 'm3u-url'
+    ) =>
+        ipcRenderer.invoke(
+            'DB_GET_GLOBAL_RECENTLY_ADDED',
+            kind,
+            limit,
+            playlistType
+        ),
+    dbGetRecentlyViewed: () => ipcRenderer.invoke('DB_GET_RECENTLY_VIEWED'),
+    dbClearRecentlyViewed: () => ipcRenderer.invoke('DB_CLEAR_RECENTLY_VIEWED'),
+    // Favorites
+    dbAddFavorite: (
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ) =>
+        ipcRenderer.invoke(
+            'DB_ADD_FAVORITE',
+            contentId,
+            playlistId,
+            backdropUrl
+        ),
+    dbRemoveFavorite: (contentId: number, playlistId: string) =>
+        ipcRenderer.invoke('DB_REMOVE_FAVORITE', contentId, playlistId),
+    dbIsFavorite: (contentId: number, playlistId: string) =>
+        ipcRenderer.invoke('DB_IS_FAVORITE', contentId, playlistId),
+    dbGetFavorites: (playlistId: string) =>
+        ipcRenderer.invoke('DB_GET_FAVORITES', playlistId),
+    dbGetGlobalFavorites: () => ipcRenderer.invoke('DB_GET_GLOBAL_FAVORITES'),
+    dbGetAllGlobalFavorites: () =>
+        ipcRenderer.invoke('DB_GET_ALL_GLOBAL_FAVORITES'),
+    dbReorderGlobalFavorites: (
+        updates: { content_id: number; position: number }[]
+    ) => ipcRenderer.invoke('DB_REORDER_GLOBAL_FAVORITES', updates),
+    // Recently viewed (playlist-specific)
+    dbGetRecentItems: (playlistId: string) =>
+        ipcRenderer.invoke('DB_GET_RECENT_ITEMS', playlistId),
+    dbAddRecentItem: (
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ) =>
+        ipcRenderer.invoke(
+            'DB_ADD_RECENT_ITEM',
+            contentId,
+            playlistId,
+            backdropUrl
+        ),
+    dbClearPlaylistRecentItems: (playlistId: string) =>
+        ipcRenderer.invoke('DB_CLEAR_PLAYLIST_RECENT_ITEMS', playlistId),
+    dbRemoveRecentItem: (contentId: number, playlistId: string) =>
+        ipcRenderer.invoke('DB_REMOVE_RECENT_ITEM', contentId, playlistId),
+    dbGetContentByXtreamId: (
+        xtreamId: number,
+        playlistId: string,
+        contentType?: 'live' | 'movie' | 'series'
+    ) =>
+        ipcRenderer.invoke(
+            'DB_GET_CONTENT_BY_XTREAM_ID',
+            xtreamId,
+            playlistId,
+            contentType
+        ),
+    dbSetContentBackdropIfMissing: (
+        contentId: number,
+        backdropUrl?: string
+    ) =>
+        ipcRenderer.invoke(
+            'DB_SET_CONTENT_BACKDROP_IF_MISSING',
+            contentId,
+            backdropUrl
+        ),
+    dbDeleteAllPlaylists: (operationId?: string) =>
+        ipcRenderer.invoke('DB_DELETE_ALL_PLAYLISTS', operationId),
+    dbCancelOperation: (operationId: string) =>
+        ipcRenderer.invoke('DB_CANCEL_OPERATION', operationId),
+    dbGetAppState: (key: string) => ipcRenderer.invoke('DB_GET_APP_STATE', key),
+    dbSetAppState: (key: string, value: string) =>
+        ipcRenderer.invoke('DB_SET_APP_STATE', key, value),
+    // Playback Positions
+    dbSavePlaybackPosition: (playlistId: string, data: any) =>
+        ipcRenderer.invoke('DB_SAVE_PLAYBACK_POSITION', playlistId, data),
+    dbGetPlaybackPosition: (
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ) =>
+        ipcRenderer.invoke(
+            'DB_GET_PLAYBACK_POSITION',
+            playlistId,
+            contentXtreamId,
+            contentType
+        ),
+    dbGetSeriesPlaybackPositions: (
+        playlistId: string,
+        seriesXtreamId: number
+    ) =>
+        ipcRenderer.invoke(
+            'DB_GET_SERIES_PLAYBACK_POSITIONS',
+            playlistId,
+            seriesXtreamId
+        ),
+    dbGetRecentPlaybackPositions: (playlistId: string, limit?: number) =>
+        ipcRenderer.invoke(
+            'DB_GET_RECENT_PLAYBACK_POSITIONS',
+            playlistId,
+            limit
+        ),
+    dbGetAllPlaybackPositions: (playlistId: string) =>
+        ipcRenderer.invoke('DB_GET_ALL_PLAYBACK_POSITIONS', playlistId),
+    dbClearAllPlaybackPositions: (playlistId: string) =>
+        ipcRenderer.invoke('DB_CLEAR_ALL_PLAYBACK_POSITIONS', playlistId),
+    dbClearPlaybackPosition: (
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ) =>
+        ipcRenderer.invoke(
+            'DB_CLEAR_PLAYBACK_POSITION',
+            playlistId,
+            contentXtreamId,
+            contentType
+        ),
+    getLocalIpAddresses: () => ipcRenderer.invoke('get-local-ip-addresses'),
+    // Downloads
+    downloadsStart: (data: {
+        playlistId: string;
+        xtreamId: number;
+        contentType: 'vod' | 'episode';
+        title: string;
+        url: string;
+        posterUrl?: string;
+        downloadFolder: string;
+        headers?: { userAgent?: string; referer?: string; origin?: string };
+        seriesXtreamId?: number;
+        seasonNumber?: number;
+        episodeNumber?: number;
+        // Playlist info for auto-creation if needed
+        playlistName?: string;
+        playlistType?:
+            | 'xtream'
+            | 'stalker'
+            | 'm3u-file'
+            | 'm3u-text'
+            | 'm3u-url';
+        serverUrl?: string;
+        portalUrl?: string;
+        macAddress?: string;
+    }) => ipcRenderer.invoke('DOWNLOADS_START', data),
+    downloadsCancel: (downloadId: number) =>
+        ipcRenderer.invoke('DOWNLOADS_CANCEL', downloadId),
+    downloadsRetry: (downloadId: number, downloadFolder: string) =>
+        ipcRenderer.invoke('DOWNLOADS_RETRY', downloadId, downloadFolder),
+    downloadsRemove: (downloadId: number) =>
+        ipcRenderer.invoke('DOWNLOADS_REMOVE', downloadId),
+    downloadsGetList: (playlistId?: string) =>
+        ipcRenderer.invoke('DOWNLOADS_GET_LIST', playlistId),
+    downloadsGet: (downloadId: number) =>
+        ipcRenderer.invoke('DOWNLOADS_GET', downloadId),
+    downloadsGetDefaultFolder: () =>
+        ipcRenderer.invoke('DOWNLOADS_GET_DEFAULT_FOLDER'),
+    downloadsSelectFolder: () => ipcRenderer.invoke('DOWNLOADS_SELECT_FOLDER'),
+    downloadsRevealFile: (filePath: string) =>
+        ipcRenderer.invoke('DOWNLOADS_REVEAL_FILE', filePath),
+    downloadsPlayFile: (filePath: string) =>
+        ipcRenderer.invoke('DOWNLOADS_PLAY_FILE', filePath),
+    downloadsClearCompleted: (playlistId?: string) =>
+        ipcRenderer.invoke('DOWNLOADS_CLEAR_COMPLETED', playlistId),
+    onDownloadsUpdate: (callback: () => void) => {
+        const handler = () => callback();
+        ipcRenderer.on('DOWNLOADS_UPDATE_EVENT', handler);
+        return () => ipcRenderer.off('DOWNLOADS_UPDATE_EVENT', handler);
+    },
+};
+
+contextBridge.exposeInMainWorld('electron', wrapElectronApi(electronApi));
diff --git a/apps/electron-backend/src/app/app.ts b/apps/electron-backend/src/app/app.ts
new file mode 100644
index 0000000..b1bd494
--- /dev/null
+++ b/apps/electron-backend/src/app/app.ts
@@ -0,0 +1,286 @@
+import { app, BrowserWindow, Menu, screen, shell } from 'electron';
+import { join } from 'path';
+import { rendererAppName, rendererAppPort } from './constants';
+import {
+    isRendererConsoleTraceEnabled,
+    isWindowTraceEnabled,
+    trace,
+} from './services/debug-trace';
+import { store, WINDOW_BOUNDS } from './services/store.service';
+import { environment } from '../environments/environment';
+
+function attachWindowTrace(mainWindow: Electron.BrowserWindow): void {
+    if (!isWindowTraceEnabled()) {
+        return;
+    }
+
+    const webContents = mainWindow.webContents;
+
+    trace('window', 'created', {
+        id: mainWindow.id,
+    });
+
+    mainWindow.on('unresponsive', () => {
+        trace('window', 'unresponsive', {
+            id: mainWindow.id,
+            url: webContents.getURL(),
+        });
+    });
+    mainWindow.on('responsive', () => {
+        trace('window', 'responsive', {
+            id: mainWindow.id,
+            url: webContents.getURL(),
+        });
+    });
+
+    webContents.on('did-start-loading', () => {
+        trace('window', 'did-start-loading', {
+            id: mainWindow.id,
+            url: webContents.getURL(),
+        });
+    });
+    webContents.on('dom-ready', () => {
+        trace('window', 'dom-ready', {
+            id: mainWindow.id,
+            url: webContents.getURL(),
+        });
+    });
+    webContents.on('did-finish-load', () => {
+        trace('window', 'did-finish-load', {
+            id: mainWindow.id,
+            url: webContents.getURL(),
+        });
+    });
+    webContents.on(
+        'did-fail-load',
+        (_event, errorCode, errorDescription, validatedURL) => {
+            trace('window', 'did-fail-load', {
+                errorCode,
+                errorDescription,
+                id: mainWindow.id,
+                validatedURL,
+            });
+        }
+    );
+    webContents.on('did-navigate', (_event, url) => {
+        trace('window', 'did-navigate', {
+            id: mainWindow.id,
+            url,
+        });
+    });
+    webContents.on('render-process-gone', (_event, details) => {
+        trace('window', 'render-process-gone', {
+            details,
+            id: mainWindow.id,
+            url: webContents.getURL(),
+        });
+    });
+
+    if (isRendererConsoleTraceEnabled()) {
+        webContents.on(
+            'console-message',
+            (_event, level, message, line, sourceId) => {
+                trace('renderer-console', 'message', {
+                    level,
+                    line,
+                    message,
+                    sourceId,
+                });
+            }
+        );
+    }
+}
+
+export default class App {
+    // Keep a global reference of the window object, if you don't, the window will
+    // be closed automatically when the JavaScript object is garbage collected.
+    static mainWindow: Electron.BrowserWindow;
+    static application: Electron.App;
+    static BrowserWindow;
+
+    private static shouldOpenDevTools() {
+        return process.env.ELECTRON_OPEN_DEVTOOLS === '1';
+    }
+
+    public static isDevelopmentMode() {
+        // First check ELECTRON_IS_DEV environment variable (used by E2E tests)
+        // This allows E2E tests to run in production mode without packaging
+        if ('ELECTRON_IS_DEV' in process.env) {
+            return parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;
+        }
+        // Fall back to Electron's built-in app.isPackaged
+        // This is the most reliable way to detect if the app is packaged
+        return !app.isPackaged;
+    }
+
+    private static onWindowAllClosed() {
+        if (process.platform !== 'darwin') {
+            App.application.quit();
+        }
+    }
+
+    private static onClose() {
+        // Dereference the window object, usually you would store windows
+        // in an array if your app supports multi windows, this is the time
+        // when you should delete the corresponding element.
+        App.mainWindow = null;
+    }
+
+    private static onRedirect(event: any, url: string) {
+        if (url !== App.mainWindow.webContents.getURL()) {
+            // this is a normal external redirect, open it in a new browser window
+            event.preventDefault();
+            shell.openExternal(url);
+        }
+    }
+
+    private static onReady() {
+        // This method will be called when Electron has finished
+        // initialization and is ready to create browser windows.
+        // Some APIs can only be used after this event occurs.
+        if (rendererAppName) {
+            App.initMainWindow();
+            App.loadMainWindow();
+        }
+    }
+
+    private static onActivate() {
+        // On macOS it's common to re-create a window in the app when the
+        // dock icon is clicked and there are no other windows open.
+        if (App.mainWindow === null) {
+            App.onReady();
+        }
+    }
+
+    private static initMainWindow() {
+        const workAreaSize = screen.getPrimaryDisplay().workAreaSize;
+        const width = Math.min(1280, workAreaSize.width || 1280);
+        const height = Math.min(720, workAreaSize.height || 720);
+
+        const savedWindowBounds = store.get(WINDOW_BOUNDS);
+
+        // Create the browser window.
+        App.mainWindow = new BrowserWindow({
+            title: environment.windowTitle,
+            width: width,
+            height: height,
+            show: false,
+            webPreferences: {
+                contextIsolation: true,
+                backgroundThrottling: false,
+                preload: join(__dirname, 'main.preload.js'),
+            },
+            ...savedWindowBounds,
+            minHeight: 600,
+            minWidth: 900,
+            ...(process.platform === 'darwin'
+                ? {
+                      titleBarStyle: 'hidden',
+                      titleBarOverlay: true,
+                      trafficLightPosition: { x: 16, y: 20 },
+                  }
+                : {}),
+        });
+        App.mainWindow.setMenu(null);
+        attachWindowTrace(App.mainWindow);
+        if (!savedWindowBounds) {
+            App.mainWindow.center();
+        }
+
+        // if main window is ready to show, close the splash window and show the main window
+        App.mainWindow.once('ready-to-show', () => {
+            App.mainWindow.show();
+        });
+
+        // Route target="_blank" / window.open() to the OS default browser
+        App.mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+            if (/^https?:\/\//.test(url)) {
+                shell.openExternal(url);
+            }
+            return { action: 'deny' };
+        });
+
+        // Emitted when the window is closed.
+        App.mainWindow.on('closed', () => {
+            // Dereference the window object, usually you would store windows
+            // in an array if your app supports multi windows, this is the time
+            // when you should delete the corresponding element.
+            App.mainWindow = null;
+        });
+
+        App.mainWindow.on('close', () => {
+            if (App.mainWindow) {
+                store.set(WINDOW_BOUNDS, App.mainWindow.getNormalBounds());
+            }
+        });
+
+        // Enable context menu for input fields only
+        App.mainWindow.webContents.on('context-menu', (event, params) => {
+            const { isEditable, editFlags } = params;
+
+            // Check if this is an editable field (input, textarea, contenteditable)
+            // editFlags.canPaste is a good indicator of an input field
+            if (isEditable && editFlags.canPaste) {
+                const menu = Menu.buildFromTemplate([
+                    {
+                        label: 'Cut',
+                        role: 'cut',
+                        enabled: editFlags.canCut,
+                    },
+                    {
+                        label: 'Copy',
+                        role: 'copy',
+                        enabled: editFlags.canCopy,
+                    },
+                    {
+                        label: 'Paste',
+                        role: 'paste',
+                        enabled: editFlags.canPaste,
+                    },
+                    {
+                        type: 'separator',
+                    },
+                    {
+                        label: 'Select All',
+                        role: 'selectAll',
+                        enabled: editFlags.canSelectAll,
+                    },
+                ]);
+
+                menu.popup();
+            }
+        });
+    }
+
+    private static loadMainWindow() {
+        // load the index.html of the app.
+        if (App.isDevelopmentMode()) {
+            App.mainWindow.loadURL(`http://localhost:${rendererAppPort}`);
+            if (App.shouldOpenDevTools()) {
+                App.mainWindow.webContents.openDevTools();
+            }
+        } else {
+            App.mainWindow.loadFile(
+                join(__dirname, '..', rendererAppName, 'index.html')
+            );
+        }
+    }
+
+    static main(app: Electron.App, browserWindow: typeof BrowserWindow) {
+        // we pass the Electron.App object and the
+        // Electron.BrowserWindow into this function
+        // so this class has no dependencies. This
+        // makes the code easier to write tests for
+
+        App.BrowserWindow = browserWindow;
+        App.application = app;
+
+        App.application.on('window-all-closed', App.onWindowAllClosed); // Quit when all windows are closed.
+        App.application.on('ready', App.onReady); // App is ready to load data
+        App.application.on('activate', App.onActivate); // App is activated
+        App.application.on('before-quit', () => {
+            if (App.mainWindow)
+                store.set(WINDOW_BOUNDS, App.mainWindow.getNormalBounds());
+        });
+    }
+}
diff --git a/apps/electron-backend/src/app/constants.ts b/apps/electron-backend/src/app/constants.ts
new file mode 100644
index 0000000..a61df2f
--- /dev/null
+++ b/apps/electron-backend/src/app/constants.ts
@@ -0,0 +1,4 @@
+export const rendererAppPort = 4200;
+export const rendererAppName = 'web'; // options.name.split('-')[0] + '-web'
+export const electronAppName = 'kiratv';
+export const updateServerUrl = 'https://deployment-server-url.com'; // TODO: insert your update server url here
diff --git a/apps/electron-backend/src/app/database/connection.ts b/apps/electron-backend/src/app/database/connection.ts
new file mode 100644
index 0000000..eaaff15
--- /dev/null
+++ b/apps/electron-backend/src/app/database/connection.ts
@@ -0,0 +1,14 @@
+/**
+ * Database connection re-export from shared library
+ * This file maintains backwards compatibility for existing imports
+ */
+
+export {
+  getDatabase,
+  initDatabase,
+  getDatabasePath,
+  closeDatabase,
+  type DatabaseInstance,
+  type DatabaseOptions,
+} from 'database';
+
diff --git a/apps/electron-backend/src/app/database/database.types.ts b/apps/electron-backend/src/app/database/database.types.ts
new file mode 100644
index 0000000..22a0af1
--- /dev/null
+++ b/apps/electron-backend/src/app/database/database.types.ts
@@ -0,0 +1,4 @@
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import * as schema from 'database-schema';
+
+export type AppDatabase = BetterSQLite3Database<typeof schema>;
diff --git a/apps/electron-backend/src/app/database/operations/category.operations.spec.ts b/apps/electron-backend/src/app/database/operations/category.operations.spec.ts
new file mode 100644
index 0000000..6992f28
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/category.operations.spec.ts
@@ -0,0 +1,98 @@
+import type { AppDatabase } from '../database.types';
+import { saveCategories } from './category.operations';
+
+function createDbMock(existingCount = 0) {
+    const where = jest.fn().mockResolvedValue([{ count: existingCount }]);
+    const from = jest.fn().mockReturnValue({ where });
+    const select = jest.fn().mockReturnValue({ from });
+    const onConflictDoNothing = jest.fn().mockResolvedValue(undefined);
+    const values = jest.fn().mockReturnValue({ onConflictDoNothing });
+    const insert = jest.fn().mockReturnValue({ values });
+
+    return {
+        db: {
+            select,
+            insert,
+        } as unknown as AppDatabase,
+        insert,
+        values,
+        onConflictDoNothing,
+        select,
+        from,
+        where,
+    };
+}
+
+describe('category.operations', () => {
+    it('restores hidden categories when Xtream API category IDs are strings', async () => {
+        const { db, values, insert } = createDbMock();
+
+        await saveCategories(
+            db,
+            'playlist-1',
+            [
+                { category_name: 'News', category_id: '101' },
+                { category_name: 'Sports', category_id: '102' },
+            ],
+            'live',
+            [102]
+        );
+
+        expect(insert).toHaveBeenCalled();
+        expect(values).toHaveBeenCalledWith([
+            {
+                playlistId: 'playlist-1',
+                name: 'News',
+                type: 'live',
+                xtreamId: 101,
+                hidden: false,
+            },
+            {
+                playlistId: 'playlist-1',
+                name: 'Sports',
+                type: 'live',
+                xtreamId: 102,
+                hidden: true,
+            },
+        ]);
+    });
+
+    it('skips categories whose Xtream IDs are not numeric', async () => {
+        const { db, values } = createDbMock();
+
+        await saveCategories(
+            db,
+            'playlist-1',
+            [
+                { category_name: 'Valid', category_id: '201' },
+                { category_name: 'Broken', category_id: 'not-a-number' },
+            ],
+            'movies',
+            [201]
+        );
+
+        expect(values).toHaveBeenCalledWith([
+            {
+                playlistId: 'playlist-1',
+                name: 'Valid',
+                type: 'movies',
+                xtreamId: 201,
+                hidden: true,
+            },
+        ]);
+    });
+
+    it('does not insert categories when all Xtream IDs are invalid', async () => {
+        const { db, insert } = createDbMock();
+
+        await saveCategories(
+            db,
+            'playlist-1',
+            [{ category_name: 'Broken', category_id: 'not-a-number' }],
+            'series',
+            [301]
+        );
+
+        expect(insert).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/electron-backend/src/app/database/operations/category.operations.ts b/apps/electron-backend/src/app/database/operations/category.operations.ts
new file mode 100644
index 0000000..bc9d182
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/category.operations.ts
@@ -0,0 +1,146 @@
+import { and, eq, inArray, sql } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+
+type XtreamCategoryInput = {
+    category_name: string;
+    category_id: string | number;
+};
+
+function normalizeXtreamCategoryId(rawCategoryId: string | number): number | null {
+    const xtreamId = Number.parseInt(String(rawCategoryId), 10);
+
+    return Number.isNaN(xtreamId) ? null : xtreamId;
+}
+
+export async function hasCategories(
+    db: AppDatabase,
+    playlistId: string,
+    type: 'live' | 'movies' | 'series'
+): Promise<boolean> {
+    const result = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(schema.categories)
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, type)
+            )
+        );
+
+    return result[0].count > 0;
+}
+
+export async function getCategories(
+    db: AppDatabase,
+    playlistId: string,
+    type: 'live' | 'movies' | 'series'
+) {
+    return db
+        .select()
+        .from(schema.categories)
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, type),
+                eq(schema.categories.hidden, false)
+            )
+        )
+        .orderBy(sql`name COLLATE NOCASE`);
+}
+
+export async function saveCategories(
+    db: AppDatabase,
+    playlistId: string,
+    categories: XtreamCategoryInput[],
+    type: 'live' | 'movies' | 'series',
+    hiddenCategoryXtreamIds?: number[]
+): Promise<{ success: boolean }> {
+    if (!categories || categories.length === 0) {
+        return { success: true };
+    }
+
+    const existingCategories = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(schema.categories)
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, type)
+            )
+        );
+
+    if ((existingCategories[0]?.count ?? 0) > 0) {
+        return { success: true };
+    }
+
+    const hiddenSet = new Set(hiddenCategoryXtreamIds || []);
+    const values = categories.flatMap((category) => {
+        const xtreamId = normalizeXtreamCategoryId(category.category_id);
+
+        if (xtreamId === null) {
+            return [];
+        }
+
+        return [
+            {
+                playlistId,
+                name: category.category_name,
+                type,
+                xtreamId,
+                hidden: hiddenSet.has(xtreamId),
+            },
+        ];
+    });
+
+    if (values.length === 0) {
+        return { success: true };
+    }
+
+    await db
+        .insert(schema.categories)
+        .values(values)
+        .onConflictDoNothing({
+            target: [
+                schema.categories.playlistId,
+                schema.categories.type,
+                schema.categories.xtreamId,
+            ],
+        });
+
+    return { success: true };
+}
+
+export async function getAllCategories(
+    db: AppDatabase,
+    playlistId: string,
+    type: 'live' | 'movies' | 'series'
+) {
+    return db
+        .select()
+        .from(schema.categories)
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, type)
+            )
+        )
+        .orderBy(sql`name COLLATE NOCASE`);
+}
+
+export async function updateCategoryVisibility(
+    db: AppDatabase,
+    categoryIds: number[],
+    hidden: boolean
+): Promise<{ success: boolean }> {
+    if (categoryIds.length === 0) {
+        return { success: true };
+    }
+
+    await db
+        .update(schema.categories)
+        .set({ hidden })
+        .where(inArray(schema.categories.id, categoryIds));
+
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/operations/content-backdrop.operations.spec.ts b/apps/electron-backend/src/app/database/operations/content-backdrop.operations.spec.ts
new file mode 100644
index 0000000..b7ba14c
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/content-backdrop.operations.spec.ts
@@ -0,0 +1,93 @@
+const andMock = jest.fn((...conditions: unknown[]) => ({
+    kind: 'and',
+    conditions,
+}));
+const eqMock = jest.fn((left: unknown, right: unknown) => ({
+    kind: 'eq',
+    left,
+    right,
+}));
+const sqlMock = jest.fn((strings: TemplateStringsArray, ...values: unknown[]) => ({
+    kind: 'sql',
+    strings,
+    values,
+}));
+
+jest.mock('drizzle-orm', () => ({
+    and: (...conditions: unknown[]) => andMock(...conditions),
+    eq: (left: unknown, right: unknown) => eqMock(left, right),
+    sql: (strings: TemplateStringsArray, ...values: unknown[]) =>
+        sqlMock(strings, ...values),
+}));
+
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+import { setContentBackdropIfMissing } from './content-backdrop.operations';
+
+function createDbMock() {
+    const where = jest.fn().mockResolvedValue(undefined);
+    const set = jest.fn().mockReturnValue({ where });
+    const update = jest.fn().mockReturnValue({ set });
+
+    return {
+        db: {
+            update,
+        } as unknown as AppDatabase,
+        set,
+        update,
+        where,
+    };
+}
+
+describe('content-backdrop.operations', () => {
+    beforeEach(() => {
+        andMock.mockClear();
+        eqMock.mockClear();
+        sqlMock.mockClear();
+    });
+
+    it('populates the content backdrop when a non-empty url is provided', async () => {
+        const { db, set, update, where } = createDbMock();
+
+        await expect(
+            setContentBackdropIfMissing(
+                db,
+                42,
+                ' https://example.com/backdrop.jpg '
+            )
+        ).resolves.toEqual({ success: true });
+
+        expect(update).toHaveBeenCalledWith(schema.content);
+        expect(set).toHaveBeenCalledWith({
+            backdropUrl: 'https://example.com/backdrop.jpg',
+        });
+        expect(eqMock).toHaveBeenCalledWith(schema.content.id, 42);
+        expect(where.mock.calls[0][0].conditions).toHaveLength(2);
+    });
+
+    it('skips blank urls without touching content or recency tables', async () => {
+        const { db, update } = createDbMock();
+
+        await expect(
+            setContentBackdropIfMissing(db, 42, '   ')
+        ).resolves.toEqual({ success: true });
+
+        expect(update).not.toHaveBeenCalled();
+    });
+
+    it('never updates recently viewed timestamps for backdrop-only backfill', async () => {
+        const { db, update } = createDbMock();
+
+        await setContentBackdropIfMissing(
+            db,
+            42,
+            'https://example.com/backdrop.jpg'
+        );
+
+        expect(update).toHaveBeenCalledTimes(1);
+        expect(update).toHaveBeenCalledWith(schema.content);
+        expect(update).not.toHaveBeenCalledWith(
+            schema.recentlyViewed as unknown as never
+        );
+    });
+});
diff --git a/apps/electron-backend/src/app/database/operations/content-backdrop.operations.ts b/apps/electron-backend/src/app/database/operations/content-backdrop.operations.ts
new file mode 100644
index 0000000..c3ccc56
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/content-backdrop.operations.ts
@@ -0,0 +1,33 @@
+import { and, eq, sql } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+
+export async function persistContentBackdropIfMissing(
+    db: AppDatabase,
+    contentId: number,
+    backdropUrl?: string
+): Promise<void> {
+    const normalizedBackdropUrl = backdropUrl?.trim();
+    if (!normalizedBackdropUrl) {
+        return;
+    }
+
+    await db
+        .update(schema.content)
+        .set({ backdropUrl: normalizedBackdropUrl })
+        .where(
+            and(
+                eq(schema.content.id, contentId),
+                sql`(${schema.content.backdropUrl} IS NULL OR ${schema.content.backdropUrl} = '')`
+            )
+        );
+}
+
+export async function setContentBackdropIfMissing(
+    db: AppDatabase,
+    contentId: number,
+    backdropUrl?: string
+): Promise<{ success: boolean }> {
+    await persistContentBackdropIfMissing(db, contentId, backdropUrl);
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/operations/content.operations.spec.ts b/apps/electron-backend/src/app/database/operations/content.operations.spec.ts
new file mode 100644
index 0000000..f09809d
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/content.operations.spec.ts
@@ -0,0 +1,94 @@
+const andMock = jest.fn((...conditions: unknown[]) => ({
+    kind: 'and',
+    conditions,
+}));
+const eqMock = jest.fn((left: unknown, right: unknown) => ({
+    kind: 'eq',
+    left,
+    right,
+}));
+
+jest.mock('drizzle-orm', () => ({
+    and: (...conditions: unknown[]) => andMock(...conditions),
+    asc: jest.fn(),
+    desc: jest.fn(),
+    eq: (left: unknown, right: unknown) => eqMock(left, right),
+    inArray: jest.fn(),
+    or: jest.fn(),
+    sql: jest.fn(),
+}));
+
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+import { getContentByXtreamId } from './content.operations';
+
+function createDbMock(result: unknown[] = []) {
+    const limit = jest.fn().mockResolvedValue(result);
+    const where = jest.fn().mockReturnValue({ limit });
+    const innerJoin = jest.fn().mockReturnValue({ where });
+    const from = jest.fn().mockReturnValue({ innerJoin });
+    const select = jest.fn().mockReturnValue({ from });
+
+    return {
+        db: {
+            select,
+        } as unknown as AppDatabase,
+        innerJoin,
+        limit,
+        select,
+        where,
+    };
+}
+
+describe('content.operations', () => {
+    beforeEach(() => {
+        andMock.mockClear();
+        eqMock.mockClear();
+    });
+
+    it('adds the content type filter when resolving by xtream ID', async () => {
+        const { db, where } = createDbMock([
+            {
+                title: 'Krypton',
+                type: 'series',
+                xtream_id: 290,
+            },
+        ]);
+
+        const result = await getContentByXtreamId(
+            db,
+            290,
+            'playlist-1',
+            'series'
+        );
+
+        expect(eqMock).toHaveBeenCalledWith(schema.content.xtreamId, 290);
+        expect(eqMock).toHaveBeenCalledWith(
+            schema.categories.playlistId,
+            'playlist-1'
+        );
+        expect(eqMock).toHaveBeenCalledWith(schema.content.type, 'series');
+        expect(where.mock.calls[0][0].conditions).toHaveLength(3);
+        expect(result).toEqual(
+            expect.objectContaining({
+                title: 'Krypton',
+                type: 'series',
+                xtream_id: 290,
+            })
+        );
+    });
+
+    it('keeps the legacy lookup path when no content type is provided', async () => {
+        const { db, where } = createDbMock();
+
+        await getContentByXtreamId(db, 290, 'playlist-1');
+
+        expect(eqMock).toHaveBeenCalledWith(schema.content.xtreamId, 290);
+        expect(eqMock).toHaveBeenCalledWith(
+            schema.categories.playlistId,
+            'playlist-1'
+        );
+        expect(eqMock).not.toHaveBeenCalledWith(schema.content.type, 'series');
+        expect(where.mock.calls[0][0].conditions).toHaveLength(2);
+    });
+});
diff --git a/apps/electron-backend/src/app/database/operations/content.operations.ts b/apps/electron-backend/src/app/database/operations/content.operations.ts
new file mode 100644
index 0000000..ed38fec
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/content.operations.ts
@@ -0,0 +1,501 @@
+import { and, asc, desc, eq, inArray, or, sql } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+import {
+    checkpointOperation,
+    chunkValues,
+    type OperationControl,
+    reportOperationProgress,
+} from './operation-control';
+
+function escapeLikePattern(term: string): string {
+    return term.replace(/[%_\\]/g, '\\$&');
+}
+
+function buildLikePatterns(term: string): string[] {
+    const variants = new Set<string>();
+    const titleCase =
+        term.length > 0
+            ? term.charAt(0).toLocaleUpperCase() +
+              term.slice(1).toLocaleLowerCase()
+            : term;
+
+    variants.add(term);
+    variants.add(term.toLocaleLowerCase());
+    variants.add(term.toLocaleUpperCase());
+    variants.add(titleCase);
+
+    return [...variants].map((value) => `%${escapeLikePattern(value)}%`);
+}
+
+export type GlobalRecentlyAddedKind = 'all' | 'vod' | 'series';
+
+function getRecentlyAddedContentTypes(
+    kind: GlobalRecentlyAddedKind
+): Array<'movie' | 'series'> {
+    if (kind === 'vod') {
+        return ['movie'];
+    }
+
+    if (kind === 'series') {
+        return ['series'];
+    }
+
+    return ['movie', 'series'];
+}
+
+function selectContentFields() {
+    return {
+        id: schema.content.id,
+        category_id: schema.content.categoryId,
+        title: schema.content.title,
+        rating: schema.content.rating,
+        added: schema.content.added,
+        poster_url: schema.content.posterUrl,
+        epg_channel_id: schema.content.epgChannelId,
+        tv_archive: schema.content.tvArchive,
+        tv_archive_duration: schema.content.tvArchiveDuration,
+        direct_source: schema.content.directSource,
+        xtream_id: schema.content.xtreamId,
+        type: schema.content.type,
+    };
+}
+
+export async function hasContent(
+    db: AppDatabase,
+    playlistId: string,
+    type: 'live' | 'movie' | 'series'
+): Promise<boolean> {
+    const result = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.content.type, type)
+            )
+        );
+
+    return result[0].count > 0;
+}
+
+export async function getContent(
+    db: AppDatabase,
+    playlistId: string,
+    type: 'live' | 'movie' | 'series'
+) {
+    const baseQuery = db
+        .select(selectContentFields())
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.content.type, type)
+            )
+        );
+
+    return type === 'live'
+        ? baseQuery.orderBy(asc(schema.content.id))
+        : baseQuery.orderBy(desc(schema.content.added));
+}
+
+export type RecentlyAddedPlaylistType =
+    | 'xtream'
+    | 'stalker'
+    | 'm3u-file'
+    | 'm3u-text'
+    | 'm3u-url';
+
+export async function getGlobalRecentlyAdded(
+    db: AppDatabase,
+    kind: GlobalRecentlyAddedKind = 'all',
+    limit = 200,
+    playlistType?: RecentlyAddedPlaylistType
+) {
+    const contentTypes = getRecentlyAddedContentTypes(kind);
+    const normalizedLimit = Number.isFinite(limit)
+        ? Math.min(Math.max(Math.trunc(limit), 1), 200)
+        : 200;
+    const addedOrder = sql<number>`CAST(${schema.content.added} AS INTEGER)`;
+
+    const whereConditions = [
+        inArray(schema.content.type, contentTypes),
+        eq(schema.categories.hidden, false),
+        sql`${schema.content.added} <> ''`,
+    ];
+
+    if (playlistType) {
+        whereConditions.push(eq(schema.playlists.type, playlistType));
+    }
+
+    return db
+        .select({
+            ...selectContentFields(),
+            added_at: schema.content.added,
+            playlist_id: schema.playlists.id,
+            playlist_name: schema.playlists.name,
+        })
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .innerJoin(
+            schema.playlists,
+            eq(schema.categories.playlistId, schema.playlists.id)
+        )
+        .where(and(...whereConditions))
+        .orderBy(desc(addedOrder))
+        .limit(normalizedLimit);
+}
+
+type XtreamContentValue = {
+    categoryId: number;
+    title: string;
+    rating: string;
+    added: string;
+    posterUrl: string;
+    epgChannelId?: string | null;
+    tvArchive?: number | null;
+    tvArchiveDuration?: number | null;
+    directSource?: string | null;
+    xtreamId: number;
+    type: 'live' | 'movie' | 'series';
+};
+
+type XtreamContentSource = Record<string, unknown> & {
+    category_id?: string | number;
+    rating?: string | number;
+    rating_imdb?: string;
+    last_modified?: string;
+    added?: string;
+    stream_icon?: string;
+        poster?: string;
+        cover?: string;
+        name?: string;
+        title?: string;
+        epg_channel_id?: string;
+        tv_archive?: string | number;
+        tv_archive_duration?: string | number;
+        direct_source?: string;
+        series_id?: string | number;
+        stream_id?: string | number;
+};
+
+function toXtreamContentValue(
+    stream: Record<string, unknown>,
+    type: 'live' | 'movie' | 'series',
+    categoryMap: Map<number, number>
+): XtreamContentValue | null {
+    const source = stream as XtreamContentSource;
+    const streamCategoryId =
+        type === 'series'
+            ? parseInt(String(source.category_id || '0'))
+            : parseInt(String(source.category_id));
+
+    const categoryId = categoryMap.get(streamCategoryId);
+    if (!categoryId) {
+        return null;
+    }
+
+    const title =
+        type === 'series'
+            ? source.title ||
+              source.name ||
+              `Unknown Series ${source.series_id ?? ''}`.trim()
+            : source.name ||
+              source.title ||
+              `Unknown Stream ${source.stream_id ?? ''}`.trim();
+
+    return {
+        categoryId,
+        title,
+        rating: String(source.rating || source.rating_imdb || ''),
+        added:
+            type === 'series'
+                ? String(source.last_modified || '')
+                : String(source.added || ''),
+        posterUrl: String(
+            source.stream_icon || source.poster || source.cover || ''
+        ),
+        epgChannelId:
+            type === 'live'
+                ? String(source.epg_channel_id ?? '').trim() || null
+                : null,
+        tvArchive:
+            type === 'live'
+                ? Number.parseInt(String(source.tv_archive ?? '0'), 10) || 0
+                : null,
+        tvArchiveDuration:
+            type === 'live'
+                ? Number.parseInt(
+                      String(source.tv_archive_duration ?? '0'),
+                      10
+                  ) || 0
+                : null,
+        directSource:
+            type === 'live'
+                ? String(source.direct_source ?? '').trim() || null
+                : null,
+        xtreamId:
+            type === 'series'
+                ? parseInt(String(source.series_id || '0'))
+                : parseInt(String(source.stream_id || '0')),
+        type,
+    };
+}
+
+export async function saveContent(
+    db: AppDatabase,
+    playlistId: string,
+    streams: Array<Record<string, unknown>>,
+    type: 'live' | 'movie' | 'series',
+    control?: OperationControl
+): Promise<{ success: boolean; count: number }> {
+    const dbType =
+        type === 'series' ? 'series' : type === 'movie' ? 'movies' : 'live';
+
+    const existingContent = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, dbType),
+                eq(schema.content.type, type)
+            )
+        );
+
+    if ((existingContent[0]?.count ?? 0) > 0) {
+        return { success: true, count: existingContent[0].count };
+    }
+
+    const categories = await db
+        .select({
+            id: schema.categories.id,
+            xtreamId: schema.categories.xtreamId,
+        })
+        .from(schema.categories)
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, dbType)
+            )
+        );
+
+    const categoryMap = new Map(categories.map((category) => [
+        category.xtreamId,
+        category.id,
+    ]));
+
+    const values = streams
+        .map((stream) => toXtreamContentValue(stream, type, categoryMap))
+        .filter((value): value is XtreamContentValue => value !== null);
+
+    const total = values.length;
+    const chunkSize = 100;
+    let totalInserted = 0;
+
+    for (let index = 0; index < values.length; index += chunkSize) {
+        await checkpointOperation(control);
+        const chunk = values.slice(index, index + chunkSize);
+        await db
+            .insert(schema.content)
+            .values(chunk)
+            .onConflictDoNothing({
+                target: [
+                    schema.content.categoryId,
+                    schema.content.type,
+                    schema.content.xtreamId,
+                ],
+            });
+        totalInserted += chunk.length;
+        await reportOperationProgress(control, {
+            phase: 'saving-content',
+            current: totalInserted,
+            total,
+            increment: chunk.length,
+        });
+    }
+
+    return { success: true, count: totalInserted };
+}
+
+export async function clearXtreamImportCache(
+    db: AppDatabase,
+    playlistId: string,
+    type: 'live' | 'movie' | 'series'
+): Promise<{ success: boolean }> {
+    const dbType =
+        type === 'series' ? 'series' : type === 'movie' ? 'movies' : 'live';
+
+    const categoryRows = await db
+        .select({ id: schema.categories.id })
+        .from(schema.categories)
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                eq(schema.categories.type, dbType)
+            )
+        );
+
+    const categoryIds = categoryRows.map((category) => category.id);
+    if (categoryIds.length === 0) {
+        return { success: true };
+    }
+
+    const contentRows = await db
+        .select({ id: schema.content.id })
+        .from(schema.content)
+        .where(inArray(schema.content.categoryId, categoryIds));
+
+    for (const chunk of chunkValues(
+        contentRows.map((row) => row.id),
+        100
+    )) {
+        await db.delete(schema.content).where(inArray(schema.content.id, chunk));
+    }
+
+    for (const chunk of chunkValues(categoryIds, 100)) {
+        await db
+            .delete(schema.categories)
+            .where(inArray(schema.categories.id, chunk));
+    }
+
+    return { success: true };
+}
+
+export async function getContentByXtreamId(
+    db: AppDatabase,
+    xtreamId: number,
+    playlistId: string,
+    contentType?: 'live' | 'movie' | 'series'
+) {
+    const conditions = [
+        eq(schema.content.xtreamId, xtreamId),
+        eq(schema.categories.playlistId, playlistId),
+    ];
+
+    if (contentType) {
+        conditions.push(eq(schema.content.type, contentType));
+    }
+
+    const result = await db
+        .select(selectContentFields())
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(and(...conditions))
+        .limit(1);
+
+    return result[0] || null;
+}
+
+export async function searchContent(
+    db: AppDatabase,
+    playlistId: string,
+    searchTerm: string,
+    types: string[],
+    excludeHidden = false
+) {
+    if (!types || types.length === 0) {
+        return [];
+    }
+
+    const searchTermLower = searchTerm.toLocaleLowerCase();
+    const likePatterns = buildLikePatterns(searchTerm);
+    const likeConditions = likePatterns.map(
+        (pattern) => sql`${schema.content.title} LIKE ${pattern} ESCAPE '\\'`
+    );
+
+    const conditions = [
+        eq(schema.categories.playlistId, playlistId),
+        inArray(schema.content.type, types as Array<'live' | 'movie' | 'series'>),
+        or(...likeConditions),
+    ];
+
+    if (excludeHidden) {
+        conditions.push(eq(schema.categories.hidden, false));
+    }
+
+    const candidates = await db
+        .select(selectContentFields())
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(and(...conditions))
+        .limit(200);
+
+    return candidates
+        .filter((item) =>
+            item.title?.toLocaleLowerCase().includes(searchTermLower)
+        )
+        .slice(0, 50);
+}
+
+export async function globalSearch(
+    db: AppDatabase,
+    searchTerm: string,
+    types: string[],
+    excludeHidden = false
+) {
+    if (!types || types.length === 0) {
+        return [];
+    }
+
+    const searchTermLower = searchTerm.toLocaleLowerCase();
+    const likePatterns = buildLikePatterns(searchTerm);
+    const likeConditions = likePatterns.map(
+        (pattern) => sql`${schema.content.title} LIKE ${pattern} ESCAPE '\\'`
+    );
+
+    const conditions = [
+        inArray(schema.content.type, types as Array<'live' | 'movie' | 'series'>),
+        or(...likeConditions),
+    ];
+
+    if (excludeHidden) {
+        conditions.push(eq(schema.categories.hidden, false));
+    }
+
+    const candidates = await db
+        .select({
+            ...selectContentFields(),
+            playlist_id: schema.categories.playlistId,
+            playlist_name: schema.playlists.name,
+        })
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .innerJoin(
+            schema.playlists,
+            eq(schema.categories.playlistId, schema.playlists.id)
+        )
+        .where(and(...conditions))
+        .orderBy(schema.content.title)
+        .limit(200);
+
+    return candidates
+        .filter((item) =>
+            item.title?.toLocaleLowerCase().includes(searchTermLower)
+        )
+        .slice(0, 50);
+}
diff --git a/apps/electron-backend/src/app/database/operations/favorites.operations.ts b/apps/electron-backend/src/app/database/operations/favorites.operations.ts
new file mode 100644
index 0000000..fb0ab1f
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/favorites.operations.ts
@@ -0,0 +1,191 @@
+import { and, asc, desc, eq, inArray, sql } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+import {
+    chunkValues,
+    checkpointOperation,
+    type OperationControl,
+    reportOperationProgress,
+} from './operation-control';
+import { persistContentBackdropIfMissing } from './content-backdrop.operations';
+
+const DEFAULT_BATCH_SIZE = 100;
+
+export async function addFavorite(
+    db: AppDatabase,
+    contentId: number,
+    playlistId: string,
+    options?: { backdropUrl?: string }
+): Promise<{ success: boolean }> {
+    await db.insert(schema.favorites).values({
+        contentId,
+        playlistId,
+    });
+
+    await persistContentBackdropIfMissing(db, contentId, options?.backdropUrl);
+
+    return { success: true };
+}
+
+export async function removeFavorite(
+    db: AppDatabase,
+    contentId: number,
+    playlistId: string
+): Promise<{ success: boolean }> {
+    await db
+        .delete(schema.favorites)
+        .where(
+            and(
+                eq(schema.favorites.contentId, contentId),
+                eq(schema.favorites.playlistId, playlistId)
+            )
+        );
+
+    return { success: true };
+}
+
+export async function isFavorite(
+    db: AppDatabase,
+    contentId: number,
+    playlistId: string
+): Promise<boolean> {
+    const result = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(schema.favorites)
+        .where(
+            and(
+                eq(schema.favorites.contentId, contentId),
+                eq(schema.favorites.playlistId, playlistId)
+            )
+        );
+
+    return result[0].count > 0;
+}
+
+export async function getFavorites(db: AppDatabase, playlistId: string) {
+    return db
+        .select({
+            id: schema.content.id,
+            category_id: schema.content.categoryId,
+            title: schema.content.title,
+            rating: schema.content.rating,
+            added: schema.content.added,
+            poster_url: schema.content.posterUrl,
+            xtream_id: schema.content.xtreamId,
+            type: schema.content.type,
+            added_at: schema.favorites.addedAt,
+            position: schema.favorites.position,
+        })
+        .from(schema.favorites)
+        .innerJoin(
+            schema.content,
+            eq(schema.favorites.contentId, schema.content.id)
+        )
+        .where(eq(schema.favorites.playlistId, playlistId))
+        .orderBy(
+            asc(schema.favorites.position),
+            desc(schema.favorites.addedAt)
+        );
+}
+
+export async function getGlobalFavorites(db: AppDatabase) {
+    return db
+        .select({
+            id: schema.content.id,
+            category_id: schema.content.categoryId,
+            title: schema.content.title,
+            rating: schema.content.rating,
+            added: schema.content.added,
+            poster_url: schema.content.posterUrl,
+            xtream_id: schema.content.xtreamId,
+            type: schema.content.type,
+            playlist_id: schema.playlists.id,
+            playlist_name: schema.playlists.name,
+            added_at: schema.favorites.addedAt,
+            position: schema.favorites.position,
+        })
+        .from(schema.favorites)
+        .innerJoin(
+            schema.content,
+            eq(schema.favorites.contentId, schema.content.id)
+        )
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .innerJoin(
+            schema.playlists,
+            eq(schema.categories.playlistId, schema.playlists.id)
+        )
+        .where(eq(schema.content.type, 'live'))
+        .orderBy(asc(schema.favorites.position), desc(schema.favorites.addedAt))
+        .limit(300);
+}
+
+export async function getAllGlobalFavorites(db: AppDatabase) {
+    return db
+        .select({
+            id: schema.content.id,
+            category_id: schema.content.categoryId,
+            title: schema.content.title,
+            rating: schema.content.rating,
+            added: schema.content.added,
+            poster_url: schema.content.posterUrl,
+            backdrop_url: schema.content.backdropUrl,
+            xtream_id: schema.content.xtreamId,
+            type: schema.content.type,
+            playlist_id: schema.playlists.id,
+            playlist_name: schema.playlists.name,
+            added_at: schema.favorites.addedAt,
+            position: schema.favorites.position,
+        })
+        .from(schema.favorites)
+        .innerJoin(
+            schema.content,
+            eq(schema.favorites.contentId, schema.content.id)
+        )
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .innerJoin(
+            schema.playlists,
+            eq(schema.categories.playlistId, schema.playlists.id)
+        )
+        .orderBy(asc(schema.favorites.position), desc(schema.favorites.addedAt))
+        .limit(500);
+}
+
+export async function reorderGlobalFavorites(
+    db: AppDatabase,
+    updates: { content_id: number; position: number }[],
+    control?: OperationControl
+): Promise<{ success: boolean }> {
+    if (!Array.isArray(updates) || updates.length === 0) {
+        return { success: true };
+    }
+
+    let current = 0;
+    const total = updates.length;
+
+    for (const chunk of chunkValues(updates, DEFAULT_BATCH_SIZE)) {
+        await checkpointOperation(control);
+
+        for (const { content_id, position } of chunk) {
+            await db
+                .update(schema.favorites)
+                .set({ position })
+                .where(eq(schema.favorites.contentId, content_id));
+        }
+
+        current += chunk.length;
+        await reportOperationProgress(control, {
+            phase: 'reordering-global-favorites',
+            current,
+            total,
+            increment: chunk.length,
+        });
+    }
+
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/operations/operation-control.ts b/apps/electron-backend/src/app/database/operations/operation-control.ts
new file mode 100644
index 0000000..bacc967
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/operation-control.ts
@@ -0,0 +1,40 @@
+export interface OperationProgressUpdate {
+    phase: string;
+    current?: number;
+    total?: number;
+    increment?: number;
+}
+
+export interface OperationControl {
+    checkpoint?: () => void | Promise<void>;
+    onProgress?: (
+        progress: OperationProgressUpdate
+    ) => void | Promise<void>;
+}
+
+export async function checkpointOperation(
+    control?: OperationControl
+): Promise<void> {
+    await control?.checkpoint?.();
+}
+
+export async function reportOperationProgress(
+    control: OperationControl | undefined,
+    progress: OperationProgressUpdate
+): Promise<void> {
+    await control?.onProgress?.(progress);
+    await checkpointOperation(control);
+}
+
+export function chunkValues<T>(
+    values: T[],
+    chunkSize: number
+): T[][] {
+    const chunks: T[][] = [];
+
+    for (let index = 0; index < values.length; index += chunkSize) {
+        chunks.push(values.slice(index, index + chunkSize));
+    }
+
+    return chunks;
+}
diff --git a/apps/electron-backend/src/app/database/operations/playback-position.operations.ts b/apps/electron-backend/src/app/database/operations/playback-position.operations.ts
new file mode 100644
index 0000000..3668a2c
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/playback-position.operations.ts
@@ -0,0 +1,173 @@
+import { and, desc, eq, sql } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+
+type PlaylistType = 'xtream' | 'stalker' | 'm3u-file' | 'm3u-text' | 'm3u-url';
+
+type PlaybackPositionPayload = {
+    contentXtreamId: number;
+    contentType: 'vod' | 'episode';
+    seriesXtreamId?: number;
+    seasonNumber?: number;
+    episodeNumber?: number;
+    positionSeconds: number;
+    durationSeconds?: number;
+    playlistType?: PlaylistType;
+};
+
+async function ensurePlaylistExists(
+    db: AppDatabase,
+    playlistId: string,
+    playlistType: PlaylistType = 'stalker'
+): Promise<void> {
+    const existing = await db
+        .select()
+        .from(schema.playlists)
+        .where(eq(schema.playlists.id, playlistId))
+        .limit(1);
+
+    if (existing.length === 0) {
+        await db.insert(schema.playlists).values({
+            id: playlistId,
+            name: 'Imported Playlist',
+            type: playlistType,
+        });
+    }
+}
+
+export async function savePlaybackPosition(
+    db: AppDatabase,
+    playlistId: string,
+    data: PlaybackPositionPayload
+): Promise<{ success: boolean }> {
+    await ensurePlaylistExists(db, playlistId, data.playlistType);
+
+    const values = {
+        playlistId,
+        contentXtreamId: data.contentXtreamId,
+        contentType: data.contentType,
+        seriesXtreamId: data.seriesXtreamId,
+        seasonNumber: data.seasonNumber,
+        episodeNumber: data.episodeNumber,
+        positionSeconds: data.positionSeconds,
+        durationSeconds: data.durationSeconds,
+        updatedAt: sql`CURRENT_TIMESTAMP`,
+    };
+
+    const existing = await db
+        .select()
+        .from(schema.playbackPositions)
+        .where(
+            and(
+                eq(schema.playbackPositions.playlistId, playlistId),
+                eq(
+                    schema.playbackPositions.contentXtreamId,
+                    data.contentXtreamId
+                ),
+                eq(schema.playbackPositions.contentType, data.contentType)
+            )
+        )
+        .limit(1);
+
+    if (existing.length > 0) {
+        await db
+            .update(schema.playbackPositions)
+            .set(values)
+            .where(eq(schema.playbackPositions.id, existing[0].id));
+    } else {
+        await db.insert(schema.playbackPositions).values(values);
+    }
+
+    return { success: true };
+}
+
+export async function getPlaybackPosition(
+    db: AppDatabase,
+    playlistId: string,
+    contentXtreamId: number,
+    contentType: 'vod' | 'episode'
+) {
+    const result = await db
+        .select()
+        .from(schema.playbackPositions)
+        .where(
+            and(
+                eq(schema.playbackPositions.playlistId, playlistId),
+                eq(schema.playbackPositions.contentXtreamId, contentXtreamId),
+                eq(schema.playbackPositions.contentType, contentType)
+            )
+        )
+        .limit(1);
+
+    return result[0] || null;
+}
+
+export async function getSeriesPlaybackPositions(
+    db: AppDatabase,
+    playlistId: string,
+    seriesXtreamId: number
+) {
+    return db
+        .select()
+        .from(schema.playbackPositions)
+        .where(
+            and(
+                eq(schema.playbackPositions.playlistId, playlistId),
+                eq(schema.playbackPositions.seriesXtreamId, seriesXtreamId),
+                eq(schema.playbackPositions.contentType, 'episode')
+            )
+        );
+}
+
+export async function getRecentPlaybackPositions(
+    db: AppDatabase,
+    playlistId: string,
+    limit = 20
+) {
+    return db
+        .select()
+        .from(schema.playbackPositions)
+        .where(eq(schema.playbackPositions.playlistId, playlistId))
+        .orderBy(desc(schema.playbackPositions.updatedAt))
+        .limit(limit);
+}
+
+export async function getAllPlaybackPositions(
+    db: AppDatabase,
+    playlistId: string
+) {
+    return db
+        .select()
+        .from(schema.playbackPositions)
+        .where(eq(schema.playbackPositions.playlistId, playlistId));
+}
+
+export async function clearAllPlaybackPositions(
+    db: AppDatabase,
+    playlistId: string
+): Promise<{ success: boolean }> {
+    await db
+        .delete(schema.playbackPositions)
+        .where(eq(schema.playbackPositions.playlistId, playlistId));
+
+    return { success: true };
+}
+
+export async function clearPlaybackPosition(
+    db: AppDatabase,
+    playlistId: string,
+    contentXtreamId: number,
+    contentType: 'vod' | 'episode'
+): Promise<{ success: boolean }> {
+    await db
+        .delete(schema.playbackPositions)
+        .where(
+            and(
+                eq(schema.playbackPositions.playlistId, playlistId),
+                eq(schema.playbackPositions.contentXtreamId, contentXtreamId),
+                eq(schema.playbackPositions.contentType, contentType)
+            )
+        );
+
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/operations/playlist.operations.spec.ts b/apps/electron-backend/src/app/database/operations/playlist.operations.spec.ts
new file mode 100644
index 0000000..6b34161
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/playlist.operations.spec.ts
@@ -0,0 +1,36 @@
+import { parseAppPlaylist } from './playlist.operations';
+
+describe('playlist.operations', () => {
+    it('hydrates updateDate from lastUpdated when payload is stale', async () => {
+        const parsed = parseAppPlaylist({
+            id: 'playlist-1',
+            name: 'Refresh Xtream Source',
+            serverUrl: 'http://localhost:8080',
+            username: 'demo',
+            password: 'secret',
+            dateCreated: '2026-04-03T08:00:00.000Z',
+            lastUpdated: '2026-04-03T11:15:00.000Z',
+            type: 'xtream',
+            autoRefresh: false,
+            count: 0,
+            importDate: '2026-04-03T08:00:00.000Z',
+            payload: JSON.stringify({
+                _id: 'playlist-1',
+                title: 'Refresh Xtream Source',
+                count: 0,
+                importDate: '2026-04-03T08:00:00.000Z',
+                autoRefresh: false,
+                serverUrl: 'http://localhost:8080',
+                username: 'demo',
+                password: 'secret',
+            }),
+        } as any);
+
+        expect(parsed).toEqual(
+            expect.objectContaining({
+                _id: 'playlist-1',
+                updateDate: new Date('2026-04-03T11:15:00.000Z').getTime(),
+            })
+        );
+    });
+});
diff --git a/apps/electron-backend/src/app/database/operations/playlist.operations.ts b/apps/electron-backend/src/app/database/operations/playlist.operations.ts
new file mode 100644
index 0000000..bd9e4cd
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/playlist.operations.ts
@@ -0,0 +1,504 @@
+import { eq, inArray } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+import {
+    checkpointOperation,
+    chunkValues,
+    type OperationControl,
+    reportOperationProgress,
+} from './operation-control';
+
+const PLAYLIST_TYPES = {
+    XTREAM: 'xtream',
+    STALKER: 'stalker',
+    M3U_FILE: 'm3u-file',
+    M3U_TEXT: 'm3u-text',
+    M3U_URL: 'm3u-url',
+} as const;
+
+const DEFAULT_BATCH_SIZE = 100;
+
+type PlaylistType = (typeof PLAYLIST_TYPES)[keyof typeof PLAYLIST_TYPES];
+const PLAYLIST_TYPE_VALUES = new Set<PlaylistType>(
+    Object.values(PLAYLIST_TYPES)
+);
+
+function getStringValue(value: unknown): string | undefined {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : undefined;
+}
+
+function getNumericValue(value: unknown): number | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+
+    if (typeof value === 'string' && value.trim() !== '') {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+
+    return undefined;
+}
+
+function parseJsonValue<T>(value: string | null | undefined, fallback: T): T {
+    if (!value) {
+        return fallback;
+    }
+
+    try {
+        return JSON.parse(value) as T;
+    } catch (error) {
+        console.warn('Failed to parse JSON value from DB:', error);
+        return fallback;
+    }
+}
+
+function inferPlaylistType(playlist: Record<string, unknown>): PlaylistType {
+    const explicitType = getStringValue(playlist.type);
+    if (
+        explicitType &&
+        PLAYLIST_TYPE_VALUES.has(explicitType as PlaylistType)
+    ) {
+        return explicitType as PlaylistType;
+    }
+
+    if (getStringValue(playlist.serverUrl)) {
+        return PLAYLIST_TYPES.XTREAM;
+    }
+
+    if (getStringValue(playlist.macAddress)) {
+        return PLAYLIST_TYPES.STALKER;
+    }
+
+    if (getStringValue(playlist.filePath)) {
+        return PLAYLIST_TYPES.M3U_FILE;
+    }
+
+    if (getStringValue(playlist.url)) {
+        return PLAYLIST_TYPES.M3U_URL;
+    }
+
+    return PLAYLIST_TYPES.M3U_TEXT;
+}
+
+function buildPlaylistRow(
+    playlist: Record<string, unknown>
+): schema.NewPlaylist | null {
+    const id = getStringValue(playlist._id) ?? getStringValue(playlist.id);
+    if (!id) {
+        return null;
+    }
+
+    const type = inferPlaylistType(playlist);
+    const portalUrl = getStringValue(playlist.portalUrl);
+    const url = getStringValue(playlist.url);
+    const nowIso = new Date().toISOString();
+    const updateDate = getNumericValue(playlist.updateDate);
+
+    return {
+        id,
+        name:
+            getStringValue(playlist.title) ??
+            getStringValue(playlist.name) ??
+            id,
+        serverUrl: getStringValue(playlist.serverUrl),
+        username: getStringValue(playlist.username),
+        password: getStringValue(playlist.password),
+        lastUpdated:
+            typeof updateDate === 'number'
+                ? new Date(updateDate).toISOString()
+                : getStringValue(playlist.lastUpdated),
+        type,
+        userAgent: getStringValue(playlist.userAgent),
+        origin: getStringValue(playlist.origin),
+        referrer: getStringValue(playlist.referrer),
+        filePath: getStringValue(playlist.filePath),
+        autoRefresh: Boolean(playlist.autoRefresh),
+        macAddress: getStringValue(playlist.macAddress),
+        url: type === PLAYLIST_TYPES.STALKER ? (portalUrl ?? url) : url,
+        portalUrl,
+        count: getNumericValue(playlist.count),
+        importDate: getStringValue(playlist.importDate),
+        updateDate,
+        position: getNumericValue(playlist.position),
+        favorites:
+            playlist.favorites !== undefined
+                ? JSON.stringify(playlist.favorites)
+                : undefined,
+        recentlyViewed:
+            playlist.recentlyViewed !== undefined
+                ? JSON.stringify(playlist.recentlyViewed)
+                : undefined,
+        payload: JSON.stringify(playlist),
+        lastUsage: getStringValue(playlist.lastUsage) ?? nowIso,
+    };
+}
+
+export function parseAppPlaylist(row: schema.Playlist): Record<string, unknown> {
+    const payload = parseJsonValue<Record<string, unknown> | null>(
+        row.payload,
+        null
+    );
+    const base = payload && typeof payload === 'object' ? payload : {};
+    const favorites = parseJsonValue<unknown[]>(row.favorites, []);
+    const recentlyViewed = parseJsonValue<unknown[]>(row.recentlyViewed, []);
+    const importDate =
+        row.importDate ?? row.dateCreated ?? new Date().toISOString();
+    const portalUrl =
+        row.portalUrl ??
+        (row.type === PLAYLIST_TYPES.STALKER ? row.url : null);
+    const updateDate =
+        row.updateDate ??
+        (row.lastUpdated ? new Date(row.lastUpdated).getTime() : undefined);
+
+    return {
+        ...base,
+        _id: row.id,
+        title:
+            getStringValue(base.title) ??
+            getStringValue(base.name) ??
+            row.name,
+        count: row.count ?? getNumericValue(base.count) ?? 0,
+        importDate: getStringValue(base.importDate) ?? importDate,
+        lastUsage:
+            row.lastUsage ??
+            getStringValue(base.lastUsage) ??
+            getStringValue(base.importDate) ??
+            importDate,
+        favorites,
+        recentlyViewed,
+        autoRefresh: row.autoRefresh ?? Boolean(base.autoRefresh),
+        url:
+            row.type === PLAYLIST_TYPES.M3U_URL
+                ? row.url ?? getStringValue(base.url)
+                : getStringValue(base.url),
+        filePath: row.filePath ?? getStringValue(base.filePath),
+        userAgent: row.userAgent ?? getStringValue(base.userAgent),
+        referrer: row.referrer ?? getStringValue(base.referrer),
+        origin: row.origin ?? getStringValue(base.origin),
+        updateDate,
+        position: row.position ?? getNumericValue(base.position),
+        serverUrl: row.serverUrl ?? getStringValue(base.serverUrl),
+        username: row.username ?? getStringValue(base.username),
+        password: row.password ?? getStringValue(base.password),
+        macAddress: row.macAddress ?? getStringValue(base.macAddress),
+        portalUrl: portalUrl ?? getStringValue(base.portalUrl),
+    };
+}
+
+export async function createPlaylist(
+    db: AppDatabase,
+    playlist: {
+        id: string;
+        name: string;
+        serverUrl?: string;
+        username?: string;
+        password?: string;
+        macAddress?: string;
+        url?: string;
+        type: string;
+    }
+): Promise<{ success: boolean }> {
+    await db.insert(schema.playlists).values({
+        id: playlist.id,
+        name: playlist.name,
+        serverUrl: playlist.serverUrl,
+        username: playlist.username,
+        password: playlist.password,
+        macAddress: playlist.macAddress,
+        url: playlist.url,
+        portalUrl:
+            playlist.type === PLAYLIST_TYPES.STALKER ? playlist.url : undefined,
+        type: playlist.type as PlaylistType,
+    });
+
+    return { success: true };
+}
+
+export async function upsertAppPlaylist(
+    db: AppDatabase,
+    playlist: Record<string, unknown>
+): Promise<{ success: boolean }> {
+    const row = buildPlaylistRow(playlist);
+    if (!row) {
+        throw new Error('Playlist ID is required for upsert');
+    }
+
+    await db
+        .insert(schema.playlists)
+        .values(row)
+        .onConflictDoUpdate({
+            target: schema.playlists.id,
+            set: row,
+        });
+
+    return { success: true };
+}
+
+export async function upsertAppPlaylists(
+    db: AppDatabase,
+    playlists: Record<string, unknown>[]
+): Promise<{ success: boolean; count: number }> {
+    if (!Array.isArray(playlists) || playlists.length === 0) {
+        return { success: true, count: 0 };
+    }
+
+    let count = 0;
+
+    for (const playlist of playlists) {
+        const row = buildPlaylistRow(playlist);
+        if (!row) {
+            continue;
+        }
+
+        await db
+            .insert(schema.playlists)
+            .values(row)
+            .onConflictDoUpdate({
+                target: schema.playlists.id,
+                set: row,
+            });
+
+        count += 1;
+    }
+
+    return { success: true, count };
+}
+
+export async function getAppPlaylists(db: AppDatabase) {
+    const rows = await db.select().from(schema.playlists);
+    return rows.map((row) => parseAppPlaylist(row));
+}
+
+export async function getAppPlaylist(db: AppDatabase, playlistId: string) {
+    const rows = await db
+        .select()
+        .from(schema.playlists)
+        .where(eq(schema.playlists.id, playlistId))
+        .limit(1);
+
+    return rows[0] ? parseAppPlaylist(rows[0]) : null;
+}
+
+export async function getPlaylist(db: AppDatabase, playlistId: string) {
+    const result = await db
+        .select()
+        .from(schema.playlists)
+        .where(eq(schema.playlists.id, playlistId))
+        .limit(1);
+
+    return result[0] || null;
+}
+
+export async function updatePlaylist(
+    db: AppDatabase,
+    playlistId: string,
+    updates: {
+        name?: string;
+        username?: string;
+        password?: string;
+        serverUrl?: string;
+        lastUpdated?: string;
+    }
+): Promise<{ success: boolean }> {
+    await db
+        .update(schema.playlists)
+        .set(updates)
+        .where(eq(schema.playlists.id, playlistId));
+
+    return { success: true };
+}
+
+export async function deletePlaylist(
+    db: AppDatabase,
+    playlistId: string,
+    control?: OperationControl
+): Promise<{ success: boolean }> {
+    const [favoriteRows, recentlyViewedRows, playbackPositionRows, downloadRows] =
+        await Promise.all([
+            db
+                .select({ id: schema.favorites.id })
+                .from(schema.favorites)
+                .where(eq(schema.favorites.playlistId, playlistId)),
+            db
+                .select({ id: schema.recentlyViewed.id })
+                .from(schema.recentlyViewed)
+                .where(eq(schema.recentlyViewed.playlistId, playlistId)),
+            db
+                .select({ id: schema.playbackPositions.id })
+                .from(schema.playbackPositions)
+                .where(eq(schema.playbackPositions.playlistId, playlistId)),
+            db
+                .select({ id: schema.downloads.id })
+                .from(schema.downloads)
+                .where(eq(schema.downloads.playlistId, playlistId)),
+        ]);
+
+    const categoryRows = await db
+        .select({ id: schema.categories.id })
+        .from(schema.categories)
+        .where(eq(schema.categories.playlistId, playlistId));
+    const categoryIds = categoryRows.map((category) => category.id);
+    const contentRows =
+        categoryIds.length > 0
+            ? await db
+                  .select({ id: schema.content.id })
+                  .from(schema.content)
+                  .where(inArray(schema.content.categoryId, categoryIds))
+            : [];
+
+    for (const [phase, ids, column, table] of [
+        [
+            'deleting-favorites',
+            favoriteRows.map((row) => row.id),
+            schema.favorites.id,
+            schema.favorites,
+        ],
+        [
+            'deleting-recently-viewed',
+            recentlyViewedRows.map((row) => row.id),
+            schema.recentlyViewed.id,
+            schema.recentlyViewed,
+        ],
+        [
+            'deleting-playback-positions',
+            playbackPositionRows.map((row) => row.id),
+            schema.playbackPositions.id,
+            schema.playbackPositions,
+        ],
+        [
+            'deleting-downloads',
+            downloadRows.map((row) => row.id),
+            schema.downloads.id,
+            schema.downloads,
+        ],
+        [
+            'deleting-content',
+            contentRows.map((row) => row.id),
+            schema.content.id,
+            schema.content,
+        ],
+        [
+            'deleting-categories',
+            categoryIds,
+            schema.categories.id,
+            schema.categories,
+        ],
+    ] as const) {
+        let current = 0;
+        const total = ids.length;
+
+        for (const chunk of chunkValues(ids, DEFAULT_BATCH_SIZE)) {
+            await checkpointOperation(control);
+            await db.delete(table).where(inArray(column, chunk));
+            current += chunk.length;
+            await reportOperationProgress(control, {
+                phase,
+                current,
+                total,
+                increment: chunk.length,
+            });
+        }
+    }
+
+    await checkpointOperation(control);
+    await db.delete(schema.playlists).where(eq(schema.playlists.id, playlistId));
+    await reportOperationProgress(control, {
+        phase: 'deleting-playlist',
+        current: 1,
+        total: 1,
+        increment: 1,
+    });
+
+    return { success: true };
+}
+
+export async function getAppState(db: AppDatabase, key: string) {
+    const rows = await db
+        .select()
+        .from(schema.appState)
+        .where(eq(schema.appState.key, key))
+        .limit(1);
+
+    return rows[0]?.value ?? null;
+}
+
+export async function setAppState(
+    db: AppDatabase,
+    key: string,
+    value: string
+): Promise<{ success: boolean }> {
+    const updatedAt = new Date().toISOString();
+
+    await db
+        .insert(schema.appState)
+        .values({
+            key,
+            value,
+            updatedAt,
+        })
+        .onConflictDoUpdate({
+            target: schema.appState.key,
+            set: { value, updatedAt },
+        });
+
+    return { success: true };
+}
+
+export async function deleteAllPlaylists(
+    db: AppDatabase,
+    control?: OperationControl
+): Promise<{ success: boolean }> {
+    const deleteStages = [
+        {
+            phase: 'deleting-favorites',
+            execute: () => db.delete(schema.favorites),
+        },
+        {
+            phase: 'deleting-recently-viewed',
+            execute: () => db.delete(schema.recentlyViewed),
+        },
+        {
+            phase: 'deleting-playback-positions',
+            execute: () => db.delete(schema.playbackPositions),
+        },
+        {
+            phase: 'deleting-downloads',
+            execute: () => db.delete(schema.downloads),
+        },
+        {
+            phase: 'deleting-content',
+            execute: () => db.delete(schema.content),
+        },
+        {
+            phase: 'deleting-categories',
+            execute: () => db.delete(schema.categories),
+        },
+        {
+            phase: 'deleting-playlists',
+            execute: () => db.delete(schema.playlists),
+        },
+    ] as const;
+
+    let current = 0;
+    const total = deleteStages.length;
+
+    for (const stage of deleteStages) {
+        await checkpointOperation(control);
+        await stage.execute();
+        current += 1;
+        await reportOperationProgress(control, {
+            phase: stage.phase,
+            current,
+            total,
+            increment: 1,
+        });
+    }
+
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/operations/recently-viewed.operations.ts b/apps/electron-backend/src/app/database/operations/recently-viewed.operations.ts
new file mode 100644
index 0000000..854153c
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/recently-viewed.operations.ts
@@ -0,0 +1,152 @@
+import { and, desc, eq, inArray, sql } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type { AppDatabase } from '../database.types';
+import { persistContentBackdropIfMissing } from './content-backdrop.operations';
+
+export async function getRecentlyViewed(db: AppDatabase) {
+    return db
+        .select({
+            id: schema.content.id,
+            category_id: schema.content.categoryId,
+            title: schema.content.title,
+            rating: schema.content.rating,
+            added: schema.content.added,
+            poster_url: schema.content.posterUrl,
+            backdrop_url: schema.content.backdropUrl,
+            xtream_id: schema.content.xtreamId,
+            type: schema.content.type,
+            playlist_id: schema.categories.playlistId,
+            playlist_name: schema.playlists.name,
+            viewed_at: schema.recentlyViewed.viewedAt,
+        })
+        .from(schema.recentlyViewed)
+        .innerJoin(
+            schema.content,
+            eq(schema.recentlyViewed.contentId, schema.content.id)
+        )
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .innerJoin(
+            schema.playlists,
+            eq(schema.categories.playlistId, schema.playlists.id)
+        )
+        .orderBy(desc(schema.recentlyViewed.viewedAt))
+        .limit(100);
+}
+
+export async function clearRecentlyViewed(
+    db: AppDatabase
+): Promise<{ success: boolean }> {
+    await db.delete(schema.recentlyViewed);
+    return { success: true };
+}
+
+export async function getRecentItems(
+    db: AppDatabase,
+    playlistId: string
+) {
+    return db
+        .select({
+            id: schema.content.id,
+            category_id: schema.content.categoryId,
+            title: schema.content.title,
+            rating: schema.content.rating,
+            added: schema.content.added,
+            poster_url: schema.content.posterUrl,
+            backdrop_url: schema.content.backdropUrl,
+            xtream_id: schema.content.xtreamId,
+            type: schema.content.type,
+            viewed_at: schema.recentlyViewed.viewedAt,
+        })
+        .from(schema.recentlyViewed)
+        .innerJoin(
+            schema.content,
+            eq(schema.recentlyViewed.contentId, schema.content.id)
+        )
+        .where(eq(schema.recentlyViewed.playlistId, playlistId))
+        .orderBy(desc(schema.recentlyViewed.viewedAt))
+        .limit(100);
+}
+
+export async function addRecentItem(
+    db: AppDatabase,
+    contentId: number,
+    playlistId: string,
+    options?: { backdropUrl?: string }
+): Promise<{ success: boolean }> {
+    const existing = await db
+        .select()
+        .from(schema.recentlyViewed)
+        .where(
+            and(
+                eq(schema.recentlyViewed.contentId, contentId),
+                eq(schema.recentlyViewed.playlistId, playlistId)
+            )
+        )
+        .limit(1);
+
+    if (existing.length > 0) {
+        await db
+            .update(schema.recentlyViewed)
+            .set({ viewedAt: sql`CURRENT_TIMESTAMP` })
+            .where(
+                and(
+                    eq(schema.recentlyViewed.contentId, contentId),
+                    eq(schema.recentlyViewed.playlistId, playlistId)
+                )
+            );
+    } else {
+        await db.insert(schema.recentlyViewed).values({
+            contentId,
+            playlistId,
+        });
+    }
+
+    await persistContentBackdropIfMissing(db, contentId, options?.backdropUrl);
+
+    return { success: true };
+}
+
+export async function clearPlaylistRecentItems(
+    db: AppDatabase,
+    playlistId: string
+): Promise<{ success: boolean }> {
+    const contentIds = await db
+        .select({ id: schema.content.id })
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(eq(schema.categories.playlistId, playlistId));
+
+    if (contentIds.length > 0) {
+        await db.delete(schema.recentlyViewed).where(
+            inArray(
+                schema.recentlyViewed.contentId,
+                contentIds.map((content) => content.id)
+            )
+        );
+    }
+
+    return { success: true };
+}
+
+export async function removeRecentItem(
+    db: AppDatabase,
+    contentId: number,
+    playlistId: string
+): Promise<{ success: boolean }> {
+    await db
+        .delete(schema.recentlyViewed)
+        .where(
+            and(
+                eq(schema.recentlyViewed.contentId, contentId),
+                eq(schema.recentlyViewed.playlistId, playlistId)
+            )
+        );
+
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/operations/xtream.operations.ts b/apps/electron-backend/src/app/database/operations/xtream.operations.ts
new file mode 100644
index 0000000..7b51ec8
--- /dev/null
+++ b/apps/electron-backend/src/app/database/operations/xtream.operations.ts
@@ -0,0 +1,319 @@
+import { and, eq, inArray } from 'drizzle-orm';
+import * as schema from 'database-schema';
+import type {
+    XtreamBackupFavoriteItem,
+    XtreamBackupHiddenCategory,
+    XtreamBackupRecentlyViewedItem,
+} from 'shared-interfaces';
+import type { AppDatabase } from '../database.types';
+import {
+    checkpointOperation,
+    chunkValues,
+    type OperationControl,
+    reportOperationProgress,
+} from './operation-control';
+
+const DEFAULT_BATCH_SIZE = 100;
+
+type ContentIdentity = {
+    id: number;
+    xtreamId: number;
+    contentType: XtreamBackupFavoriteItem['contentType'];
+};
+
+function toContentIdentityKey(
+    contentType: XtreamBackupFavoriteItem['contentType'],
+    xtreamId: number
+): string {
+    return `${contentType}:${xtreamId}`;
+}
+
+export async function deleteXtreamContent(
+    db: AppDatabase,
+    playlistId: string,
+    control?: OperationControl
+): Promise<{
+    success: boolean;
+    favorites: XtreamBackupFavoriteItem[];
+    recentlyViewed: XtreamBackupRecentlyViewedItem[];
+    hiddenCategories: XtreamBackupHiddenCategory[];
+}> {
+    const categories = await db
+        .select({
+            id: schema.categories.id,
+            xtreamId: schema.categories.xtreamId,
+            type: schema.categories.type,
+            hidden: schema.categories.hidden,
+        })
+        .from(schema.categories)
+        .where(eq(schema.categories.playlistId, playlistId));
+
+    const categoryIds = categories.map((category) => category.id);
+    const hiddenCategories = categories
+        .filter((category) => category.hidden)
+        .map((category) => ({
+            xtreamId: category.xtreamId,
+            categoryType: category.type,
+        }));
+
+    let favorites: XtreamBackupFavoriteItem[] = [];
+    let recentlyViewed: XtreamBackupRecentlyViewedItem[] = [];
+
+    if (categoryIds.length > 0) {
+        const favoritedContent = await db
+            .select({
+                xtreamId: schema.content.xtreamId,
+                contentType: schema.content.type,
+                addedAt: schema.favorites.addedAt,
+                position: schema.favorites.position,
+            })
+            .from(schema.favorites)
+            .innerJoin(
+                schema.content,
+                eq(schema.favorites.contentId, schema.content.id)
+            )
+            .where(
+                and(
+                    eq(schema.favorites.playlistId, playlistId),
+                    inArray(schema.content.categoryId, categoryIds)
+                )
+            );
+
+        favorites = favoritedContent.map((favorite) => ({
+            xtreamId: favorite.xtreamId,
+            contentType: favorite.contentType,
+            addedAt: favorite.addedAt ?? undefined,
+            position: favorite.position,
+        }));
+
+        const recentlyViewedContent = await db
+            .select({
+                xtreamId: schema.content.xtreamId,
+                contentType: schema.content.type,
+                viewedAt: schema.recentlyViewed.viewedAt,
+            })
+            .from(schema.recentlyViewed)
+            .innerJoin(
+                schema.content,
+                eq(schema.recentlyViewed.contentId, schema.content.id)
+            )
+            .where(
+                and(
+                    eq(schema.recentlyViewed.playlistId, playlistId),
+                    inArray(schema.content.categoryId, categoryIds)
+                )
+            );
+
+        recentlyViewed = recentlyViewedContent.map((item) => ({
+            xtreamId: item.xtreamId,
+            contentType: item.contentType,
+            viewedAt: item.viewedAt || new Date().toISOString(),
+        }));
+
+        const contentRows = await db
+            .select({ id: schema.content.id })
+            .from(schema.content)
+            .where(inArray(schema.content.categoryId, categoryIds));
+
+        let deletedContent = 0;
+        const totalContent = contentRows.length;
+
+        for (const chunk of chunkValues(
+            contentRows.map((content) => content.id),
+            DEFAULT_BATCH_SIZE
+        )) {
+            await checkpointOperation(control);
+            await db
+                .delete(schema.content)
+                .where(inArray(schema.content.id, chunk));
+            deletedContent += chunk.length;
+            await reportOperationProgress(control, {
+                phase: 'deleting-content',
+                current: deletedContent,
+                total: totalContent,
+                increment: chunk.length,
+            });
+        }
+    }
+
+    let deletedCategories = 0;
+    const totalCategories = categoryIds.length;
+
+    for (const chunk of chunkValues(categoryIds, DEFAULT_BATCH_SIZE)) {
+        await checkpointOperation(control);
+        await db
+            .delete(schema.categories)
+            .where(inArray(schema.categories.id, chunk));
+        deletedCategories += chunk.length;
+        await reportOperationProgress(control, {
+            phase: 'deleting-categories',
+            current: deletedCategories,
+            total: totalCategories,
+            increment: chunk.length,
+        });
+    }
+
+    return {
+        success: true,
+        favorites,
+        recentlyViewed,
+        hiddenCategories,
+    };
+}
+
+async function getContentIdentityMap(
+    db: AppDatabase,
+    playlistId: string,
+    identities: Array<{
+        contentType: XtreamBackupFavoriteItem['contentType'];
+        xtreamId: number;
+    }>
+): Promise<Map<string, number>> {
+    const xtreamIds = Array.from(
+        new Set(identities.map((item) => item.xtreamId))
+    );
+
+    if (xtreamIds.length === 0) {
+        return new Map();
+    }
+
+    const content = await db
+        .select({
+            id: schema.content.id,
+            xtreamId: schema.content.xtreamId,
+            contentType: schema.content.type,
+        })
+        .from(schema.content)
+        .innerJoin(
+            schema.categories,
+            eq(schema.content.categoryId, schema.categories.id)
+        )
+        .where(
+            and(
+                eq(schema.categories.playlistId, playlistId),
+                inArray(schema.content.xtreamId, xtreamIds)
+            )
+        );
+
+    return new Map(
+        content.map((item: ContentIdentity) => [
+            toContentIdentityKey(item.contentType, item.xtreamId),
+            item.id,
+        ])
+    );
+}
+
+export async function restoreXtreamUserData(
+    db: AppDatabase,
+    playlistId: string,
+    favorites: XtreamBackupFavoriteItem[],
+    recentlyViewed: XtreamBackupRecentlyViewedItem[],
+    control?: OperationControl
+): Promise<{ success: boolean }> {
+    await checkpointOperation(control);
+    await db
+        .delete(schema.favorites)
+        .where(eq(schema.favorites.playlistId, playlistId));
+
+    await checkpointOperation(control);
+    await db
+        .delete(schema.recentlyViewed)
+        .where(eq(schema.recentlyViewed.playlistId, playlistId));
+
+    const contentByIdentity = await getContentIdentityMap(db, playlistId, [
+        ...favorites.map((item) => ({
+            contentType: item.contentType,
+            xtreamId: item.xtreamId,
+        })),
+        ...recentlyViewed.map((item) => ({
+            contentType: item.contentType,
+            xtreamId: item.xtreamId,
+        })),
+    ]);
+
+    const favoriteValues = favorites
+        .map((item, index) => {
+            const contentId = contentByIdentity.get(
+                toContentIdentityKey(item.contentType, item.xtreamId)
+            );
+
+            if (!contentId) {
+                return null;
+            }
+
+            return {
+                contentId,
+                playlistId,
+                addedAt: item.addedAt ?? new Date().toISOString(),
+                position: item.position ?? index,
+            };
+        })
+        .filter(
+            (
+                value
+            ): value is {
+                contentId: number;
+                playlistId: string;
+                addedAt: string;
+                position: number | null;
+            } => value !== null
+        );
+
+    let restoredFavorites = 0;
+    const totalFavorites = favoriteValues.length;
+
+    for (const chunk of chunkValues(favoriteValues, DEFAULT_BATCH_SIZE)) {
+        await checkpointOperation(control);
+        await db.insert(schema.favorites).values(chunk);
+        restoredFavorites += chunk.length;
+        await reportOperationProgress(control, {
+            phase: 'restoring-favorites',
+            current: restoredFavorites,
+            total: totalFavorites,
+            increment: chunk.length,
+        });
+    }
+
+    const recentlyViewedValues = recentlyViewed
+        .map((item) => {
+            const contentId = contentByIdentity.get(
+                toContentIdentityKey(item.contentType, item.xtreamId)
+            );
+
+            if (!contentId) {
+                return null;
+            }
+
+            return {
+                contentId,
+                playlistId,
+                viewedAt: item.viewedAt,
+            };
+        })
+        .filter(
+            (
+                value
+            ): value is {
+                contentId: number;
+                playlistId: string;
+                viewedAt: string;
+            } => value !== null
+        );
+
+    let restoredRecentlyViewed = 0;
+    const totalRecentlyViewed = recentlyViewedValues.length;
+
+    for (const chunk of chunkValues(recentlyViewedValues, DEFAULT_BATCH_SIZE)) {
+        await checkpointOperation(control);
+        await db.insert(schema.recentlyViewed).values(chunk);
+        restoredRecentlyViewed += chunk.length;
+        await reportOperationProgress(control, {
+            phase: 'restoring-recently-viewed',
+            current: restoredRecentlyViewed,
+            total: totalRecentlyViewed,
+            increment: chunk.length,
+        });
+    }
+
+    return { success: true };
+}
diff --git a/apps/electron-backend/src/app/database/schema.ts b/apps/electron-backend/src/app/database/schema.ts
new file mode 100644
index 0000000..26b3035
--- /dev/null
+++ b/apps/electron-backend/src/app/database/schema.ts
@@ -0,0 +1,39 @@
+/**
+ * Database schema re-export from shared library
+ * This file maintains backwards compatibility for existing imports
+ */
+
+export {
+  // Tables
+  playlists,
+  categories,
+  content,
+  recentlyViewed,
+  favorites,
+  epgChannels,
+  epgPrograms,
+  playbackPositions,
+  downloads,
+  appState,
+  // Types
+  type Playlist,
+  type NewPlaylist,
+  type AppState,
+  type NewAppState,
+  type Category,
+  type NewCategory,
+  type Content,
+  type NewContent,
+  type RecentlyViewed,
+  type NewRecentlyViewed,
+  type Favorite,
+  type NewFavorite,
+  type EpgChannel,
+  type NewEpgChannel,
+  type EpgProgramDb,
+  type NewEpgProgramDb,
+  type PlaybackPosition,
+  type NewPlaybackPosition,
+  type Download,
+  type NewDownload,
+} from 'database';
diff --git a/apps/electron-backend/src/app/events/database.events.ts b/apps/electron-backend/src/app/events/database.events.ts
new file mode 100644
index 0000000..4147839
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database.events.ts
@@ -0,0 +1,22 @@
+/**
+ * Database IPC event handlers for Electron
+ * Provides database operations to the renderer process
+ */
+
+import { ipcMain } from 'electron';
+
+import './database/category.events';
+import './database/content.events';
+import './database/downloads.events';
+import './database/epg-db.events';
+import './database/favorites.events';
+import './database/playback-position.events';
+import './database/playlist.events';
+import './database/recently-viewed.events';
+import './database/xtream.events';
+
+export default class DatabaseEvents {
+    static bootstrapDatabaseEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
diff --git a/apps/electron-backend/src/app/events/database/category.events.ts b/apps/electron-backend/src/app/events/database/category.events.ts
new file mode 100644
index 0000000..e25d97b
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/category.events.ts
@@ -0,0 +1,56 @@
+/**
+ * Category IPC event handlers
+ * Operations for managing categories within playlists
+ */
+
+import { handleWorkerRequest } from './worker-events.utils';
+
+handleWorkerRequest(
+    'DB_HAS_CATEGORIES',
+    (playlistId: string, type: 'live' | 'movies' | 'series') => ({
+        playlistId,
+        type,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_CATEGORIES',
+    (playlistId: string, type: 'live' | 'movies' | 'series') => ({
+        playlistId,
+        type,
+    })
+);
+
+handleWorkerRequest(
+    'DB_SAVE_CATEGORIES',
+    (
+        playlistId: string,
+        categories: Array<{
+            category_name: string;
+            category_id: string | number;
+        }>,
+        type: 'live' | 'movies' | 'series',
+        hiddenCategoryXtreamIds?: number[]
+    ) => ({
+        playlistId,
+        categories,
+        type,
+        hiddenCategoryXtreamIds,
+    })
+);
+
+handleWorkerRequest(
+    'DB_UPDATE_CATEGORY_VISIBILITY',
+    (categoryIds: number[], hidden: boolean) => ({
+        categoryIds,
+        hidden,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_ALL_CATEGORIES',
+    (playlistId: string, type: 'live' | 'movies' | 'series') => ({
+        playlistId,
+        type,
+    })
+);
diff --git a/apps/electron-backend/src/app/events/database/content.events.ts b/apps/electron-backend/src/app/events/database/content.events.ts
new file mode 100644
index 0000000..5fff694
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/content.events.ts
@@ -0,0 +1,124 @@
+/**
+ * Content IPC event handlers
+ * Operations for managing and searching content (streams, movies, series)
+ */
+
+import { ipcMain } from 'electron';
+import {
+    handleWorkerRequest,
+    requestWorkerWithEvents,
+} from './worker-events.utils';
+
+handleWorkerRequest(
+    'DB_HAS_CONTENT',
+    (playlistId: string, type: 'live' | 'movie' | 'series') => ({
+        playlistId,
+        type,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_CONTENT',
+    (playlistId: string, type: 'live' | 'movie' | 'series') => ({
+        playlistId,
+        type,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_GLOBAL_RECENTLY_ADDED',
+    (
+        kind: 'all' | 'vod' | 'series' = 'all',
+        limit = 200,
+        playlistType?:
+            | 'xtream'
+            | 'stalker'
+            | 'm3u-file'
+            | 'm3u-text'
+            | 'm3u-url'
+    ) => ({
+        kind,
+        limit,
+        playlistType,
+    })
+);
+
+ipcMain.handle(
+    'DB_SAVE_CONTENT',
+    async (
+        event,
+        playlistId: string,
+        streams: Array<Record<string, unknown>>,
+        type: 'live' | 'movie' | 'series',
+        operationId?: string
+    ) => {
+        try {
+            return await requestWorkerWithEvents(
+                event,
+                'DB_SAVE_CONTENT',
+                {
+                    playlistId,
+                    streams,
+                    type,
+                    operationId,
+                }
+            );
+        } catch (error) {
+            console.error('Error handling DB_SAVE_CONTENT:', error);
+            throw error;
+        }
+    }
+);
+
+handleWorkerRequest(
+    'DB_CLEAR_XTREAM_IMPORT_CACHE',
+    (playlistId: string, type: 'live' | 'movie' | 'series') => ({
+        playlistId,
+        type,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_CONTENT_BY_XTREAM_ID',
+    (
+        xtreamId: number,
+        playlistId: string,
+        contentType?: 'live' | 'movie' | 'series'
+    ) => ({
+        xtreamId,
+        playlistId,
+        contentType,
+    })
+);
+
+handleWorkerRequest(
+    'DB_SET_CONTENT_BACKDROP_IF_MISSING',
+    (contentId: number, backdropUrl?: string) => ({
+        contentId,
+        backdropUrl,
+    })
+);
+
+handleWorkerRequest(
+    'DB_SEARCH_CONTENT',
+    (
+        playlistId: string,
+        searchTerm: string,
+        types: string[],
+        excludeHidden = false
+    ) => ({
+        playlistId,
+        searchTerm,
+        types,
+        excludeHidden,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GLOBAL_SEARCH',
+    (searchTerm: string, types: string[], excludeHidden = false) => ({
+        searchTerm,
+        types,
+        excludeHidden,
+    })
+);
diff --git a/apps/electron-backend/src/app/events/database/downloads.events.ts b/apps/electron-backend/src/app/events/database/downloads.events.ts
new file mode 100644
index 0000000..c451f6b
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/downloads.events.ts
@@ -0,0 +1,649 @@
+/**
+ * Downloads IPC event handlers
+ * Uses electron-dl for download management with queue control and progress tracking
+ */
+
+import { and, eq, inArray, sql } from 'drizzle-orm';
+import { app, BrowserWindow, dialog, ipcMain, shell } from 'electron';
+import { download, File as ElectronDlFile } from 'electron-dl';
+import { existsSync, unlinkSync } from 'fs';
+import { basename, extname, join } from 'path';
+import { getDatabase } from '../../database/connection';
+import * as schema from '../../database/schema';
+
+type DownloadStatus = 'queued' | 'downloading' | 'completed' | 'failed' | 'canceled';
+
+interface DownloadTask {
+    id: number;
+    url: string;
+    fileName: string;
+    directory: string;
+    headers?: Record<string, string>;
+    downloadItem?: ElectronDlFile;
+}
+
+// Download queue management
+const downloadQueue: DownloadTask[] = [];
+let activeDownload: DownloadTask | null = null;
+let mainWindow: BrowserWindow | null = null;
+
+/**
+ * Set the main window reference for sending updates
+ */
+export function setMainWindow(win: BrowserWindow) {
+    mainWindow = win;
+}
+
+/**
+ * Broadcast download updates to renderer
+ */
+function broadcastUpdate() {
+    if (mainWindow && !mainWindow.isDestroyed()) {
+        mainWindow.webContents.send('DOWNLOADS_UPDATE_EVENT');
+    }
+}
+
+/**
+ * Get file extension from URL
+ */
+function getExtensionFromUrl(url: string): string {
+    try {
+        const urlObj = new URL(url);
+        const pathname = urlObj.pathname;
+        const ext = extname(pathname);
+        return ext || '.mp4';
+    } catch {
+        return '.mp4';
+    }
+}
+
+/**
+ * Sanitize filename for filesystem
+ */
+function sanitizeFilename(name: string): string {
+    return name.replace(/[<>:"/\\|?*]/g, '_').trim();
+}
+
+/**
+ * Process the download queue - starts next download if none active
+ */
+async function processQueue() {
+    if (activeDownload || downloadQueue.length === 0) {
+        return;
+    }
+
+    const task = downloadQueue.shift();
+    if (!task) return;
+
+    activeDownload = task;
+    await startDownload(task);
+}
+
+/**
+ * Start a download using electron-dl
+ */
+async function startDownload(task: DownloadTask) {
+    const db = await getDatabase();
+
+    // Update status to downloading
+    await db
+        .update(schema.downloads)
+        .set({
+            status: 'downloading',
+            updatedAt: sql`CURRENT_TIMESTAMP`,
+        })
+        .where(eq(schema.downloads.id, task.id));
+
+    broadcastUpdate();
+
+    if (!mainWindow || mainWindow.isDestroyed()) {
+        console.error('[Downloads] No main window available');
+        await db
+            .update(schema.downloads)
+            .set({
+                status: 'failed',
+                errorMessage: 'No window available for download',
+                updatedAt: sql`CURRENT_TIMESTAMP`,
+            })
+            .where(eq(schema.downloads.id, task.id));
+        activeDownload = null;
+        broadcastUpdate();
+        processQueue();
+        return;
+    }
+
+    let lastProgressUpdate = 0;
+    const PROGRESS_THROTTLE_MS = 500;
+
+    try {
+        const downloadOptions: Parameters<typeof download>[2] = {
+            directory: task.directory,
+            filename: task.fileName,
+            overwrite: true,
+            onStarted: (item) => {
+                console.log(`[Downloads] Started: ${task.fileName}`);
+                task.downloadItem = item as unknown as ElectronDlFile;
+            },
+            onProgress: async (progress) => {
+                const now = Date.now();
+                if (now - lastProgressUpdate < PROGRESS_THROTTLE_MS) {
+                    return;
+                }
+                lastProgressUpdate = now;
+
+                await db
+                    .update(schema.downloads)
+                    .set({
+                        bytesDownloaded: progress.transferredBytes,
+                        totalBytes: progress.totalBytes,
+                        updatedAt: sql`CURRENT_TIMESTAMP`,
+                    })
+                    .where(eq(schema.downloads.id, task.id));
+
+                broadcastUpdate();
+            },
+            onCompleted: async (file) => {
+                console.log(`[Downloads] Completed: ${task.fileName}`);
+                await db
+                    .update(schema.downloads)
+                    .set({
+                        status: 'completed',
+                        filePath: file.path,
+                        fileName: file.filename,
+                        bytesDownloaded: file.fileSize,
+                        totalBytes: file.fileSize,
+                        updatedAt: sql`CURRENT_TIMESTAMP`,
+                    })
+                    .where(eq(schema.downloads.id, task.id));
+
+                activeDownload = null;
+                broadcastUpdate();
+                processQueue();
+            },
+            onCancel: async () => {
+                console.log(`[Downloads] Canceled: ${task.fileName}`);
+                // Delete partial file if it exists
+                const partialPath = join(task.directory, task.fileName);
+                if (existsSync(partialPath)) {
+                    try {
+                        unlinkSync(partialPath);
+                    } catch (e) {
+                        console.error('[Downloads] Failed to delete partial file:', e);
+                    }
+                }
+
+                await db
+                    .update(schema.downloads)
+                    .set({
+                        status: 'canceled',
+                        updatedAt: sql`CURRENT_TIMESTAMP`,
+                    })
+                    .where(eq(schema.downloads.id, task.id));
+
+                activeDownload = null;
+                broadcastUpdate();
+                processQueue();
+            },
+        };
+
+        // Add headers if provided (user-agent, referer, origin)
+        if (task.headers) {
+            (downloadOptions as any).headers = task.headers;
+        }
+
+        await download(mainWindow, task.url, downloadOptions);
+    } catch (error) {
+        console.error(`[Downloads] Error downloading ${task.fileName}:`, error);
+
+        // Delete partial file if it exists
+        const partialPath = join(task.directory, task.fileName);
+        if (existsSync(partialPath)) {
+            try {
+                unlinkSync(partialPath);
+            } catch (e) {
+                console.error('[Downloads] Failed to delete partial file:', e);
+            }
+        }
+
+        await db
+            .update(schema.downloads)
+            .set({
+                status: 'failed',
+                errorMessage: error instanceof Error ? error.message : String(error),
+                updatedAt: sql`CURRENT_TIMESTAMP`,
+            })
+            .where(eq(schema.downloads.id, task.id));
+
+        activeDownload = null;
+        broadcastUpdate();
+        processQueue();
+    }
+}
+
+/**
+ * Enqueue a new download
+ */
+ipcMain.handle(
+    'DOWNLOADS_START',
+    async (
+        _event,
+        data: {
+            playlistId: string;
+            xtreamId: number;
+            contentType: 'vod' | 'episode';
+            title: string;
+            url: string;
+            posterUrl?: string;
+            downloadFolder: string;
+            headers?: { userAgent?: string; referer?: string; origin?: string };
+            seriesXtreamId?: number;
+            seasonNumber?: number;
+            episodeNumber?: number;
+            // Playlist info for auto-creation if needed
+            playlistName?: string;
+            playlistType?: 'xtream' | 'stalker' | 'm3u-file' | 'm3u-text' | 'm3u-url';
+            serverUrl?: string;
+            portalUrl?: string;
+            macAddress?: string;
+        }
+    ) => {
+        try {
+            console.log('[Downloads] Enqueue download:', data.title);
+            const db = await getDatabase();
+
+            // Ensure playlist exists in database (required for foreign key constraint)
+            if (data.playlistId) {
+                const existingPlaylist = await db
+                    .select()
+                    .from(schema.playlists)
+                    .where(eq(schema.playlists.id, data.playlistId))
+                    .limit(1);
+
+                if (existingPlaylist.length === 0) {
+                    // Create playlist entry for downloads to work
+                    console.log('[Downloads] Creating playlist entry for:', data.playlistId);
+                    await db.insert(schema.playlists).values({
+                        id: data.playlistId,
+                        name: data.playlistName || 'Unknown Playlist',
+                        type: data.playlistType || 'stalker',
+                        serverUrl: data.serverUrl,
+                        macAddress: data.macAddress,
+                        url: data.portalUrl,
+                    });
+                }
+            } else {
+                throw new Error('playlistId is required for downloads');
+            }
+
+            // Check if already exists
+            const existing = await db
+                .select()
+                .from(schema.downloads)
+                .where(
+                    and(
+                        eq(schema.downloads.playlistId, data.playlistId),
+                        eq(schema.downloads.xtreamId, data.xtreamId),
+                        eq(schema.downloads.contentType, data.contentType)
+                    )
+                )
+                .limit(1);
+
+            if (existing.length > 0) {
+                const item = existing[0];
+                // If completed or failed/canceled, allow retry by updating
+                if (['completed', 'failed', 'canceled'].includes(item.status)) {
+                    await db
+                        .update(schema.downloads)
+                        .set({
+                            status: 'queued',
+                            url: data.url,
+                            bytesDownloaded: 0,
+                            totalBytes: null,
+                            errorMessage: null,
+                            updatedAt: sql`CURRENT_TIMESTAMP`,
+                        })
+                        .where(eq(schema.downloads.id, item.id));
+
+                    const ext = getExtensionFromUrl(data.url);
+                    const fileName = sanitizeFilename(data.title) + ext;
+
+                    downloadQueue.push({
+                        id: item.id,
+                        url: data.url,
+                        fileName,
+                        directory: data.downloadFolder,
+                        headers: data.headers
+                            ? {
+                                  'User-Agent': data.headers.userAgent || '',
+                                  Referer: data.headers.referer || '',
+                                  Origin: data.headers.origin || '',
+                              }
+                            : undefined,
+                    });
+
+                    broadcastUpdate();
+                    processQueue();
+                    return { success: true, id: item.id };
+                }
+
+                // Already queued or downloading
+                return { success: false, error: 'Download already in progress', id: item.id };
+            }
+
+            // Create new download entry
+            const ext = getExtensionFromUrl(data.url);
+            const fileName = sanitizeFilename(data.title) + ext;
+
+            const result = await db.insert(schema.downloads).values({
+                playlistId: data.playlistId,
+                xtreamId: data.xtreamId,
+                contentType: data.contentType,
+                title: data.title,
+                url: data.url,
+                posterUrl: data.posterUrl,
+                fileName,
+                status: 'queued',
+                seriesXtreamId: data.seriesXtreamId,
+                seasonNumber: data.seasonNumber,
+                episodeNumber: data.episodeNumber,
+            });
+
+            const insertedId = Number(result.lastInsertRowid);
+
+            downloadQueue.push({
+                id: insertedId,
+                url: data.url,
+                fileName,
+                directory: data.downloadFolder,
+                headers: data.headers
+                    ? {
+                          'User-Agent': data.headers.userAgent || '',
+                          Referer: data.headers.referer || '',
+                          Origin: data.headers.origin || '',
+                      }
+                    : undefined,
+            });
+
+            broadcastUpdate();
+            processQueue();
+
+            return { success: true, id: insertedId };
+        } catch (error) {
+            console.error('[Downloads] Error enqueuing download:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Cancel a download
+ */
+ipcMain.handle('DOWNLOADS_CANCEL', async (_event, downloadId: number) => {
+    try {
+        console.log('[Downloads] Cancel download:', downloadId);
+        const db = await getDatabase();
+
+        // Check if it's the active download
+        if (activeDownload && activeDownload.id === downloadId) {
+            if (activeDownload.downloadItem) {
+                (activeDownload.downloadItem as any).cancel?.();
+            }
+            return { success: true };
+        }
+
+        // Remove from queue
+        const queueIndex = downloadQueue.findIndex((t) => t.id === downloadId);
+        if (queueIndex !== -1) {
+            downloadQueue.splice(queueIndex, 1);
+            await db
+                .update(schema.downloads)
+                .set({
+                    status: 'canceled',
+                    updatedAt: sql`CURRENT_TIMESTAMP`,
+                })
+                .where(eq(schema.downloads.id, downloadId));
+
+            broadcastUpdate();
+            return { success: true };
+        }
+
+        return { success: false, error: 'Download not found in queue' };
+    } catch (error) {
+        console.error('[Downloads] Error canceling download:', error);
+        throw error;
+    }
+});
+
+/**
+ * Retry a failed/canceled download
+ */
+ipcMain.handle(
+    'DOWNLOADS_RETRY',
+    async (_event, downloadId: number, downloadFolder: string) => {
+        try {
+            console.log('[Downloads] Retry download:', downloadId);
+            const db = await getDatabase();
+
+            const existing = await db
+                .select()
+                .from(schema.downloads)
+                .where(eq(schema.downloads.id, downloadId))
+                .limit(1);
+
+            if (existing.length === 0) {
+                return { success: false, error: 'Download not found' };
+            }
+
+            const item = existing[0];
+            if (!['failed', 'canceled'].includes(item.status)) {
+                return { success: false, error: 'Can only retry failed or canceled downloads' };
+            }
+
+            await db
+                .update(schema.downloads)
+                .set({
+                    status: 'queued',
+                    bytesDownloaded: 0,
+                    totalBytes: null,
+                    errorMessage: null,
+                    updatedAt: sql`CURRENT_TIMESTAMP`,
+                })
+                .where(eq(schema.downloads.id, downloadId));
+
+            const ext = getExtensionFromUrl(item.url);
+            const fileName = sanitizeFilename(item.title) + ext;
+
+            downloadQueue.push({
+                id: item.id,
+                url: item.url,
+                fileName,
+                directory: downloadFolder,
+            });
+
+            broadcastUpdate();
+            processQueue();
+
+            return { success: true };
+        } catch (error) {
+            console.error('[Downloads] Error retrying download:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Remove a download from the list
+ */
+ipcMain.handle('DOWNLOADS_REMOVE', async (_event, downloadId: number) => {
+    try {
+        console.log('[Downloads] Remove download:', downloadId);
+        const db = await getDatabase();
+
+        // Cancel if active
+        if (activeDownload && activeDownload.id === downloadId) {
+            if (activeDownload.downloadItem) {
+                (activeDownload.downloadItem as any).cancel?.();
+            }
+        }
+
+        // Remove from queue
+        const queueIndex = downloadQueue.findIndex((t) => t.id === downloadId);
+        if (queueIndex !== -1) {
+            downloadQueue.splice(queueIndex, 1);
+        }
+
+        // Delete from database
+        await db.delete(schema.downloads).where(eq(schema.downloads.id, downloadId));
+
+        broadcastUpdate();
+        return { success: true };
+    } catch (error) {
+        console.error('[Downloads] Error removing download:', error);
+        throw error;
+    }
+});
+
+/**
+ * Get all downloads for a playlist
+ */
+ipcMain.handle('DOWNLOADS_GET_LIST', async (_event, playlistId?: string) => {
+    try {
+        const db = await getDatabase();
+
+        if (playlistId) {
+            const result = await db
+                .select()
+                .from(schema.downloads)
+                .where(eq(schema.downloads.playlistId, playlistId))
+                .orderBy(schema.downloads.createdAt);
+            return result;
+        }
+
+        const result = await db
+            .select()
+            .from(schema.downloads)
+            .orderBy(schema.downloads.createdAt);
+        return result;
+    } catch (error) {
+        console.error('[Downloads] Error getting download list:', error);
+        throw error;
+    }
+});
+
+/**
+ * Get download by ID
+ */
+ipcMain.handle('DOWNLOADS_GET', async (_event, downloadId: number) => {
+    try {
+        const db = await getDatabase();
+        const result = await db
+            .select()
+            .from(schema.downloads)
+            .where(eq(schema.downloads.id, downloadId))
+            .limit(1);
+        return result[0] || null;
+    } catch (error) {
+        console.error('[Downloads] Error getting download:', error);
+        throw error;
+    }
+});
+
+/**
+ * Get default download folder
+ */
+ipcMain.handle('DOWNLOADS_GET_DEFAULT_FOLDER', async () => {
+    return app.getPath('downloads');
+});
+
+/**
+ * Select download folder via dialog
+ */
+ipcMain.handle('DOWNLOADS_SELECT_FOLDER', async () => {
+    const result = await dialog.showOpenDialog({
+        properties: ['openDirectory', 'createDirectory'],
+        title: 'Select Download Folder',
+        defaultPath: app.getPath('downloads'),
+    });
+
+    if (result.canceled || result.filePaths.length === 0) {
+        return null;
+    }
+
+    return result.filePaths[0];
+});
+
+/**
+ * Reveal file in system file manager
+ */
+ipcMain.handle('DOWNLOADS_REVEAL_FILE', async (_event, filePath: string) => {
+    if (existsSync(filePath)) {
+        shell.showItemInFolder(filePath);
+        return { success: true };
+    }
+    return { success: false, error: 'File not found' };
+});
+
+/**
+ * Play downloaded file
+ */
+ipcMain.handle('DOWNLOADS_PLAY_FILE', async (_event, filePath: string) => {
+    if (existsSync(filePath)) {
+        await shell.openPath(filePath);
+        return { success: true };
+    }
+    return { success: false, error: 'File not found' };
+});
+
+/**
+ * Clear all completed downloads
+ */
+ipcMain.handle('DOWNLOADS_CLEAR_COMPLETED', async (_event, playlistId?: string) => {
+    try {
+        const db = await getDatabase();
+
+        if (playlistId) {
+            await db
+                .delete(schema.downloads)
+                .where(
+                    and(
+                        eq(schema.downloads.playlistId, playlistId),
+                        inArray(schema.downloads.status, ['completed', 'failed', 'canceled'])
+                    )
+                );
+        } else {
+            await db
+                .delete(schema.downloads)
+                .where(
+                    inArray(schema.downloads.status, ['completed', 'failed', 'canceled'])
+                );
+        }
+
+        broadcastUpdate();
+        return { success: true };
+    } catch (error) {
+        console.error('[Downloads] Error clearing completed:', error);
+        throw error;
+    }
+});
+
+/**
+ * Reset stale downloads on startup (downloading -> failed)
+ */
+export async function resetStaleDownloads() {
+    try {
+        const db = await getDatabase();
+        await db
+            .update(schema.downloads)
+            .set({
+                status: 'failed',
+                errorMessage: 'Download interrupted by application restart',
+                updatedAt: sql`CURRENT_TIMESTAMP`,
+            })
+            .where(
+                inArray(schema.downloads.status, ['queued', 'downloading'])
+            );
+        console.log('[Downloads] Reset stale downloads');
+    } catch (error) {
+        console.error('[Downloads] Error resetting stale downloads:', error);
+    }
+}
diff --git a/apps/electron-backend/src/app/events/database/epg-db.events.ts b/apps/electron-backend/src/app/events/database/epg-db.events.ts
new file mode 100644
index 0000000..1b7edb4
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/epg-db.events.ts
@@ -0,0 +1,362 @@
+/**
+ * EPG Database IPC event handlers
+ * Operations for storing and querying EPG data in SQLite with FTS5 support
+ */
+
+import { and, eq, gte, lte, sql } from 'drizzle-orm';
+import { ipcMain } from 'electron';
+import { getDatabase } from '../../database/connection';
+import * as schema from '../../database/schema';
+
+const loggerLabel = '[EPG DB]';
+
+/**
+ * Save EPG channels in bulk (upsert)
+ */
+ipcMain.handle(
+    'EPG_DB_SAVE_CHANNELS',
+    async (
+        _event,
+        sourceUrl: string,
+        channels: Array<{
+            id: string;
+            displayName: string;
+            iconUrl?: string;
+            url?: string;
+        }>
+    ) => {
+        try {
+            const db = await getDatabase();
+
+            // Delete existing channels from this source first
+            await db
+                .delete(schema.epgChannels)
+                .where(eq(schema.epgChannels.sourceUrl, sourceUrl));
+
+            if (channels.length === 0) return { success: true, count: 0 };
+
+            // Insert in chunks
+            const CHUNK_SIZE = 500;
+            let totalInserted = 0;
+
+            for (let i = 0; i < channels.length; i += CHUNK_SIZE) {
+                const chunk = channels.slice(i, i + CHUNK_SIZE);
+                const values = chunk.map((ch) => ({
+                    id: ch.id,
+                    displayName: ch.displayName,
+                    iconUrl: ch.iconUrl || null,
+                    url: ch.url || null,
+                    sourceUrl,
+                }));
+
+                await db.insert(schema.epgChannels).values(values);
+                totalInserted += chunk.length;
+            }
+
+            console.log(
+                loggerLabel,
+                `Saved ${totalInserted} channels from ${sourceUrl}`
+            );
+            return { success: true, count: totalInserted };
+        } catch (error) {
+            console.error(loggerLabel, 'Error saving EPG channels:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Save EPG programs in bulk
+ */
+ipcMain.handle(
+    'EPG_DB_SAVE_PROGRAMS',
+    async (
+        _event,
+        programs: Array<{
+            channelId: string;
+            start: string;
+            stop: string;
+            title: string;
+            description?: string;
+            category?: string;
+            iconUrl?: string;
+            rating?: string;
+            episodeNum?: string;
+        }>
+    ) => {
+        try {
+            const db = await getDatabase();
+
+            if (programs.length === 0) return { success: true, count: 0 };
+
+            // Insert in chunks for better performance
+            const CHUNK_SIZE = 500;
+            let totalInserted = 0;
+
+            for (let i = 0; i < programs.length; i += CHUNK_SIZE) {
+                const chunk = programs.slice(i, i + CHUNK_SIZE);
+                const values = chunk.map((prog) => ({
+                    channelId: prog.channelId,
+                    start: prog.start,
+                    stop: prog.stop,
+                    title: prog.title,
+                    description: prog.description || null,
+                    category: prog.category || null,
+                    iconUrl: prog.iconUrl || null,
+                    rating: prog.rating || null,
+                    episodeNum: prog.episodeNum || null,
+                }));
+
+                await db.insert(schema.epgPrograms).values(values);
+                totalInserted += chunk.length;
+            }
+
+            console.log(loggerLabel, `Saved ${totalInserted} programs`);
+            return { success: true, count: totalInserted };
+        } catch (error) {
+            console.error(loggerLabel, 'Error saving EPG programs:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Get programs for a specific channel
+ */
+ipcMain.handle(
+    'EPG_DB_GET_CHANNEL_PROGRAMS',
+    async (_event, channelId: string, fromTime?: string, toTime?: string) => {
+        try {
+            const db = await getDatabase();
+
+            let query;
+
+            // Apply time filters if provided
+            if (fromTime && toTime) {
+                query = db
+                    .select()
+                    .from(schema.epgPrograms)
+                    .where(
+                        and(
+                            eq(schema.epgPrograms.channelId, channelId),
+                            gte(schema.epgPrograms.stop, fromTime),
+                            lte(schema.epgPrograms.start, toTime)
+                        )
+                    );
+            } else {
+                // Return all programs for this channel
+                query = db
+                    .select()
+                    .from(schema.epgPrograms)
+                    .where(eq(schema.epgPrograms.channelId, channelId));
+            }
+
+            const results = await query.orderBy(schema.epgPrograms.start);
+            return results;
+        } catch (error) {
+            console.error(
+                loggerLabel,
+                'Error getting channel programs:',
+                error
+            );
+            throw error;
+        }
+    }
+);
+
+/**
+ * Get current program for a channel (what's on now)
+ */
+ipcMain.handle(
+    'EPG_DB_GET_CURRENT_PROGRAM',
+    async (_event, channelId: string) => {
+        try {
+            const db = await getDatabase();
+            const now = new Date().toISOString();
+
+            const result = await db
+                .select()
+                .from(schema.epgPrograms)
+                .where(
+                    and(
+                        eq(schema.epgPrograms.channelId, channelId),
+                        lte(schema.epgPrograms.start, now),
+                        gte(schema.epgPrograms.stop, now)
+                    )
+                )
+                .limit(1);
+
+            return result[0] || null;
+        } catch (error) {
+            console.error(loggerLabel, 'Error getting current program:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Full-text search EPG programs using FTS5 with LIKE fallback
+ * Handles Cyrillic and other Unicode text properly
+ * Includes channel display name via JOIN
+ */
+ipcMain.handle(
+    'EPG_DB_SEARCH_PROGRAMS',
+    async (_event, searchTerm: string, limit = 50) => {
+        try {
+            const db = await getDatabase();
+            const trimmedTerm = searchTerm.trim();
+
+            if (!trimmedTerm) {
+                return [];
+            }
+
+            // Use LIKE for substring matching (works better with Cyrillic)
+            // This is more intuitive for users expecting exact substring matches
+            const likePattern = `%${trimmedTerm}%`;
+
+            // JOIN with epg_channels to get channel display name
+            // Include all programs (past and future) for catchup/archive feature
+            const results = await db.all(sql`
+                SELECT
+                    p.*,
+                    c.display_name as channel_name
+                FROM epg_programs p
+                LEFT JOIN epg_channels c ON p.channel_id = c.id
+                WHERE (
+                    p.title LIKE ${likePattern}
+                    OR p.description LIKE ${likePattern}
+                    OR p.category LIKE ${likePattern}
+                )
+                ORDER BY p.start
+                LIMIT ${limit}
+            `);
+
+            return results;
+        } catch (error) {
+            console.error(loggerLabel, 'Error searching EPG programs:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Get all EPG channels
+ */
+ipcMain.handle('EPG_DB_GET_CHANNELS', async () => {
+    try {
+        const db = await getDatabase();
+        const results = await db
+            .select()
+            .from(schema.epgChannels)
+            .orderBy(schema.epgChannels.displayName);
+        return results;
+    } catch (error) {
+        console.error(loggerLabel, 'Error getting EPG channels:', error);
+        throw error;
+    }
+});
+
+/**
+ * Get channel by ID or display name
+ */
+ipcMain.handle(
+    'EPG_DB_GET_CHANNEL',
+    async (_event, channelIdOrName: string) => {
+        try {
+            const db = await getDatabase();
+
+            // Try exact ID match first
+            let result = await db
+                .select()
+                .from(schema.epgChannels)
+                .where(eq(schema.epgChannels.id, channelIdOrName))
+                .limit(1);
+
+            if (result.length > 0) return result[0];
+
+            // Try display name match (case-insensitive)
+            result = await db
+                .select()
+                .from(schema.epgChannels)
+                .where(
+                    sql`LOWER(${schema.epgChannels.displayName}) = LOWER(${channelIdOrName})`
+                )
+                .limit(1);
+
+            return result[0] || null;
+        } catch (error) {
+            console.error(loggerLabel, 'Error getting EPG channel:', error);
+            throw error;
+        }
+    }
+);
+
+/**
+ * Clear all EPG data for a specific source URL
+ */
+ipcMain.handle('EPG_DB_CLEAR_SOURCE', async (_event, sourceUrl: string) => {
+    try {
+        const db = await getDatabase();
+
+        // Deleting channels will cascade delete programs due to foreign key
+        await db
+            .delete(schema.epgChannels)
+            .where(eq(schema.epgChannels.sourceUrl, sourceUrl));
+
+        console.log(loggerLabel, `Cleared EPG data for source: ${sourceUrl}`);
+        return { success: true };
+    } catch (error) {
+        console.error(loggerLabel, 'Error clearing EPG source:', error);
+        throw error;
+    }
+});
+
+/**
+ * Clear all EPG data
+ */
+ipcMain.handle('EPG_DB_CLEAR_ALL', async () => {
+    try {
+        const db = await getDatabase();
+
+        await db.delete(schema.epgPrograms);
+        await db.delete(schema.epgChannels);
+
+        console.log(loggerLabel, 'Cleared all EPG data');
+        return { success: true };
+    } catch (error) {
+        console.error(loggerLabel, 'Error clearing all EPG data:', error);
+        throw error;
+    }
+});
+
+/**
+ * Get EPG statistics
+ */
+ipcMain.handle('EPG_DB_GET_STATS', async () => {
+    try {
+        const db = await getDatabase();
+
+        const channelCount = await db
+            .select({ count: sql<number>`count(*)` })
+            .from(schema.epgChannels);
+
+        const programCount = await db
+            .select({ count: sql<number>`count(*)` })
+            .from(schema.epgPrograms);
+
+        const now = new Date().toISOString();
+        const futureProgramCount = await db
+            .select({ count: sql<number>`count(*)` })
+            .from(schema.epgPrograms)
+            .where(gte(schema.epgPrograms.stop, now));
+
+        return {
+            channels: channelCount[0].count,
+            programs: programCount[0].count,
+            futurePrograms: futureProgramCount[0].count,
+        };
+    } catch (error) {
+        console.error(loggerLabel, 'Error getting EPG stats:', error);
+        throw error;
+    }
+});
diff --git a/apps/electron-backend/src/app/events/database/favorites.events.ts b/apps/electron-backend/src/app/events/database/favorites.events.ts
new file mode 100644
index 0000000..a0c77ae
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/favorites.events.ts
@@ -0,0 +1,45 @@
+/**
+ * Favorites IPC event handlers
+ * Operations for managing user's favorite content
+ */
+
+import { handleWorkerRequest } from './worker-events.utils';
+
+handleWorkerRequest(
+    'DB_ADD_FAVORITE',
+    (contentId: number, playlistId: string, backdropUrl?: string) => ({
+        contentId,
+        playlistId,
+        backdropUrl,
+    })
+);
+
+handleWorkerRequest(
+    'DB_REMOVE_FAVORITE',
+    (contentId: number, playlistId: string) => ({
+        contentId,
+        playlistId,
+    })
+);
+
+handleWorkerRequest(
+    'DB_IS_FAVORITE',
+    (contentId: number, playlistId: string) => ({
+        contentId,
+        playlistId,
+    })
+);
+
+handleWorkerRequest('DB_GET_FAVORITES', (playlistId: string) => ({
+    playlistId,
+}));
+
+handleWorkerRequest('DB_GET_GLOBAL_FAVORITES', () => ({}));
+handleWorkerRequest('DB_GET_ALL_GLOBAL_FAVORITES', () => ({}));
+
+handleWorkerRequest(
+    'DB_REORDER_GLOBAL_FAVORITES',
+    (updates: { content_id: number; position: number }[]) => ({
+        updates,
+    })
+);
diff --git a/apps/electron-backend/src/app/events/database/playback-position.events.ts b/apps/electron-backend/src/app/events/database/playback-position.events.ts
new file mode 100644
index 0000000..ae007c9
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/playback-position.events.ts
@@ -0,0 +1,67 @@
+/**
+ * Playback Position IPC event handlers
+ * Operations for managing video playback progress
+ */
+
+import { handleWorkerRequest } from './worker-events.utils';
+
+handleWorkerRequest(
+    'DB_SAVE_PLAYBACK_POSITION',
+    (playlistId: string, data: unknown) => ({
+        playlistId,
+        data,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_PLAYBACK_POSITION',
+    (
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ) => ({
+        playlistId,
+        contentXtreamId,
+        contentType,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_SERIES_PLAYBACK_POSITIONS',
+    (playlistId: string, seriesXtreamId: number) => ({
+        playlistId,
+        seriesXtreamId,
+    })
+);
+
+handleWorkerRequest(
+    'DB_GET_RECENT_PLAYBACK_POSITIONS',
+    (playlistId: string, limit?: number) => ({
+        playlistId,
+        limit,
+    })
+);
+
+handleWorkerRequest('DB_GET_ALL_PLAYBACK_POSITIONS', (playlistId: string) => ({
+    playlistId,
+}));
+
+handleWorkerRequest(
+    'DB_CLEAR_ALL_PLAYBACK_POSITIONS',
+    (playlistId: string) => ({
+        playlistId,
+    })
+);
+
+handleWorkerRequest(
+    'DB_CLEAR_PLAYBACK_POSITION',
+    (
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ) => ({
+        playlistId,
+        contentXtreamId,
+        contentType,
+    })
+);
diff --git a/apps/electron-backend/src/app/events/database/playlist.events.ts b/apps/electron-backend/src/app/events/database/playlist.events.ts
new file mode 100644
index 0000000..e1b369a
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/playlist.events.ts
@@ -0,0 +1,93 @@
+/**
+ * Playlist IPC event handlers
+ * CRUD operations for playlists
+ */
+
+import { ipcMain } from 'electron';
+import { databaseWorkerClient } from '../../services/database-worker-client';
+import {
+    handleWorkerRequest,
+    requestWorkerWithEvents,
+} from './worker-events.utils';
+
+handleWorkerRequest('DB_CREATE_PLAYLIST', (playlist: Record<string, unknown>) => playlist);
+handleWorkerRequest(
+    'DB_UPSERT_APP_PLAYLIST',
+    (playlist: Record<string, unknown>) => playlist
+);
+handleWorkerRequest(
+    'DB_UPSERT_APP_PLAYLISTS',
+    (playlists: Record<string, unknown>[]) => playlists
+);
+handleWorkerRequest('DB_GET_APP_PLAYLISTS', () => ({}));
+handleWorkerRequest('DB_GET_APP_PLAYLIST', (playlistId: string) => ({ playlistId }));
+handleWorkerRequest('DB_GET_PLAYLIST', (playlistId: string) => ({ playlistId }));
+handleWorkerRequest(
+    'DB_UPDATE_PLAYLIST',
+    (
+        playlistId: string,
+        updates: {
+            name?: string;
+            username?: string;
+            password?: string;
+            serverUrl?: string;
+            lastUpdated?: string;
+        }
+    ) => ({
+        playlistId,
+        updates,
+    })
+);
+handleWorkerRequest('DB_GET_APP_STATE', (key: string) => ({ key }));
+handleWorkerRequest('DB_SET_APP_STATE', (key: string, value: string) => ({
+    key,
+    value,
+}));
+
+ipcMain.handle(
+    'DB_DELETE_PLAYLIST',
+    async (
+        event,
+        playlistId: string,
+        operationId?: string
+    ) => {
+        try {
+            return await requestWorkerWithEvents(
+                event,
+                'DB_DELETE_PLAYLIST',
+                {
+                    playlistId,
+                    operationId,
+                }
+            );
+        } catch (error) {
+            console.error('Error handling DB_DELETE_PLAYLIST:', error);
+            throw error;
+        }
+    }
+);
+
+ipcMain.handle(
+    'DB_DELETE_ALL_PLAYLISTS',
+    async (event, operationId?: string) => {
+        try {
+            return await requestWorkerWithEvents(
+                event,
+                'DB_DELETE_ALL_PLAYLISTS',
+                { operationId }
+            );
+        } catch (error) {
+            console.error('Error handling DB_DELETE_ALL_PLAYLISTS:', error);
+            throw error;
+        }
+    }
+);
+
+ipcMain.handle('DB_CANCEL_OPERATION', async (_event, operationId: string) => {
+    try {
+        return await databaseWorkerClient.cancel(operationId);
+    } catch (error) {
+        console.error('Error handling DB_CANCEL_OPERATION:', error);
+        throw error;
+    }
+});
diff --git a/apps/electron-backend/src/app/events/database/recently-viewed.events.ts b/apps/electron-backend/src/app/events/database/recently-viewed.events.ts
new file mode 100644
index 0000000..9a871f2
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/recently-viewed.events.ts
@@ -0,0 +1,37 @@
+/**
+ * Recently Viewed IPC event handlers
+ * Operations for managing user's recently viewed content
+ */
+
+import { handleWorkerRequest } from './worker-events.utils';
+
+handleWorkerRequest('DB_GET_RECENTLY_VIEWED', () => ({}));
+handleWorkerRequest('DB_CLEAR_RECENTLY_VIEWED', () => ({}));
+
+handleWorkerRequest('DB_GET_RECENT_ITEMS', (playlistId: string) => ({
+    playlistId,
+}));
+
+handleWorkerRequest(
+    'DB_ADD_RECENT_ITEM',
+    (contentId: number, playlistId: string, backdropUrl?: string) => ({
+        contentId,
+        playlistId,
+        backdropUrl,
+    })
+);
+
+handleWorkerRequest(
+    'DB_CLEAR_PLAYLIST_RECENT_ITEMS',
+    (playlistId: string) => ({
+        playlistId,
+    })
+);
+
+handleWorkerRequest(
+    'DB_REMOVE_RECENT_ITEM',
+    (contentId: number, playlistId: string) => ({
+        contentId,
+        playlistId,
+    })
+);
diff --git a/apps/electron-backend/src/app/events/database/worker-events.utils.ts b/apps/electron-backend/src/app/events/database/worker-events.utils.ts
new file mode 100644
index 0000000..4a4b2f8
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/worker-events.utils.ts
@@ -0,0 +1,44 @@
+import { ipcMain } from 'electron';
+import { databaseWorkerClient } from '../../services/database-worker-client';
+import type {
+    DbOperationEvent,
+    DbWorkerOperation,
+} from '../../workers/database-worker.types';
+
+export function forwardWorkerEvent(
+    event: Electron.IpcMainInvokeEvent,
+    workerEvent: DbOperationEvent
+): void {
+    if (event.sender.isDestroyed()) {
+        return;
+    }
+
+    event.sender.send('DB_OPERATION_EVENT', workerEvent);
+}
+
+export function handleWorkerRequest<TArgs extends unknown[]>(
+    channel: DbWorkerOperation,
+    buildPayload: (...args: TArgs) => unknown
+): void {
+    ipcMain.handle(channel, async (_event, ...args: TArgs) => {
+        try {
+            return await databaseWorkerClient.request(
+                channel,
+                buildPayload(...args)
+            );
+        } catch (error) {
+            console.error(`Error handling ${channel}:`, error);
+            throw error;
+        }
+    });
+}
+
+export async function requestWorkerWithEvents<TResult, TPayload>(
+    event: Electron.IpcMainInvokeEvent,
+    channel: DbWorkerOperation,
+    payload: TPayload
+): Promise<TResult> {
+    return databaseWorkerClient.request<TResult>(channel, payload, {
+        onEvent: (workerEvent) => forwardWorkerEvent(event, workerEvent),
+    });
+}
diff --git a/apps/electron-backend/src/app/events/database/xtream.events.ts b/apps/electron-backend/src/app/events/database/xtream.events.ts
new file mode 100644
index 0000000..e1933ee
--- /dev/null
+++ b/apps/electron-backend/src/app/events/database/xtream.events.ts
@@ -0,0 +1,53 @@
+/**
+ * Xtream-specific IPC event handlers
+ * Operations for refreshing and managing Xtream playlist data
+ */
+
+import { ipcMain } from 'electron';
+import { requestWorkerWithEvents } from './worker-events.utils';
+
+ipcMain.handle(
+    'DB_DELETE_XTREAM_CONTENT',
+    async (event, playlistId: string, operationId?: string) => {
+        try {
+            return await requestWorkerWithEvents(
+                event,
+                'DB_DELETE_XTREAM_CONTENT',
+                {
+                    playlistId,
+                    operationId,
+                }
+            );
+        } catch (error) {
+            console.error('Error handling DB_DELETE_XTREAM_CONTENT:', error);
+            throw error;
+        }
+    }
+);
+
+ipcMain.handle(
+    'DB_RESTORE_XTREAM_USER_DATA',
+    async (
+        event,
+        playlistId: string,
+        favorites: unknown[],
+        recentlyViewed: unknown[],
+        operationId?: string
+    ) => {
+        try {
+            return await requestWorkerWithEvents(
+                event,
+                'DB_RESTORE_XTREAM_USER_DATA',
+                {
+                    playlistId,
+                    favorites,
+                    recentlyViewed,
+                    operationId,
+                }
+            );
+        } catch (error) {
+            console.error('Error handling DB_RESTORE_XTREAM_USER_DATA:', error);
+            throw error;
+        }
+    }
+);
diff --git a/apps/electron-backend/src/app/events/electron.events.ts b/apps/electron-backend/src/app/events/electron.events.ts
new file mode 100644
index 0000000..b01b177
--- /dev/null
+++ b/apps/electron-backend/src/app/events/electron.events.ts
@@ -0,0 +1,60 @@
+/**
+ * This module is responsible on handling all the inter process communications
+ * between the frontend to the electron backend.
+ */
+
+import { app, ipcMain } from 'electron';
+import * as os from 'os';
+import { environment } from '../../environments/environment';
+import {
+    DEBUG_TRACE_EVENT_CHANNEL,
+    isRendererApiTraceEnabled,
+    trace,
+} from '../services/debug-trace';
+
+export default class ElectronEvents {
+  static bootstrapElectronEvents(): Electron.IpcMain {
+    return ipcMain;
+  }
+}
+
+// Retrieve app version
+ipcMain.handle('get-app-version', (event) => {
+  console.log(`Fetching application version... [v${environment.version}]`);
+
+  return environment.version;
+});
+
+// Handle App termination
+ipcMain.on('quit', (event, code) => {
+  app.exit(code);
+});
+
+ipcMain.on(DEBUG_TRACE_EVENT_CHANNEL, (event, payload) => {
+  if (!isRendererApiTraceEnabled()) {
+    return;
+  }
+
+  trace('renderer-api', 'event', {
+    payload,
+    senderId: event.sender.id,
+    url: event.sender.getURL(),
+  });
+});
+
+// Get local IP addresses for remote control URL display
+ipcMain.handle('get-local-ip-addresses', () => {
+  const interfaces = os.networkInterfaces();
+  const addresses: string[] = [];
+
+  for (const name of Object.keys(interfaces)) {
+    for (const iface of interfaces[name] || []) {
+      // Skip internal (loopback) and non-IPv4 addresses
+      if (iface.family === 'IPv4' && !iface.internal) {
+        addresses.push(iface.address);
+      }
+    }
+  }
+
+  return addresses;
+});
diff --git a/apps/electron-backend/src/app/events/epg.events.spec.ts b/apps/electron-backend/src/app/events/epg.events.spec.ts
new file mode 100644
index 0000000..ee0f84e
--- /dev/null
+++ b/apps/electron-backend/src/app/events/epg.events.spec.ts
@@ -0,0 +1,278 @@
+import type EpgEventsType from './epg.events';
+
+const mockWorkerInstances: any[] = [];
+const resolveWorkerRuntimeBootstrap = jest.fn();
+const getDatabase = jest.fn();
+
+jest.mock('electron', () => ({
+    app: {
+        isPackaged: false,
+        getAppPath: () => '/mock/app.asar',
+    },
+    BrowserWindow: {
+        getAllWindows: () => [],
+    },
+    ipcMain: {
+        handle: jest.fn(),
+    },
+}));
+
+jest.mock('worker_threads', () => {
+    const { EventEmitter } = require('events');
+
+    class MockWorker extends EventEmitter {
+        postMessage = jest.fn();
+        terminate = jest.fn().mockResolvedValue(0);
+    }
+
+    return {
+        Worker: jest.fn().mockImplementation(() => {
+            const worker = new MockWorker();
+            mockWorkerInstances.push(worker);
+            return worker;
+        }),
+    };
+});
+
+jest.mock('../workers/worker-runtime-paths', () => ({
+    resolveWorkerRuntimeBootstrap: (...args: unknown[]) =>
+        resolveWorkerRuntimeBootstrap(...args),
+}));
+
+jest.mock('../database/connection', () => ({
+    getDatabase: (...args: unknown[]) => getDatabase(...args),
+}));
+
+describe('EpgEvents', () => {
+    let EpgEvents: typeof EpgEventsType;
+    let consoleLogSpy: jest.SpyInstance;
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(async () => {
+        jest.resetModules();
+        mockWorkerInstances.length = 0;
+        consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
+        consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+        resolveWorkerRuntimeBootstrap.mockReset();
+        resolveWorkerRuntimeBootstrap.mockReturnValue({
+            workerPath: '/mock/workers/epg-parser.worker.js',
+            workerPathCandidates: ['/mock/workers/epg-parser.worker.js'],
+            nativeModuleSearchPaths: [
+                '/mock/resources/app.asar.unpacked/node_modules',
+            ],
+        });
+
+        ({ default: EpgEvents } = await import('./epg.events'));
+    });
+
+    afterEach(() => {
+        consoleLogSpy.mockRestore();
+        consoleErrorSpy.mockRestore();
+        getDatabase.mockReset();
+    });
+
+    async function flushPromises(): Promise<void> {
+        await new Promise((resolve) => setImmediate(resolve));
+    }
+
+    it('uses the shared worker bootstrap and passes native module search paths to the EPG worker', async () => {
+        const fetchPromise = (EpgEvents as unknown as Record<string, any>)[
+            'fetchEpgFromUrl'
+        ]('https://example.com/guide.xml');
+        const worker = mockWorkerInstances[0];
+        const { Worker } = jest.requireMock('worker_threads');
+
+        expect(resolveWorkerRuntimeBootstrap).toHaveBeenCalledWith(
+            expect.objectContaining({
+                workerFilename: 'epg-parser.worker.js',
+                developmentWorkerDir: expect.stringContaining('workers'),
+            })
+        );
+        expect(Worker).toHaveBeenCalledWith(expect.any(URL), {
+            resourceLimits: {
+                maxOldGenerationSizeMb: 4096,
+                maxYoungGenerationSizeMb: 512,
+            },
+            workerData: {
+                nativeModuleSearchPaths: [
+                    '/mock/resources/app.asar.unpacked/node_modules',
+                ],
+            },
+        });
+
+        worker.emit('message', { type: 'READY' });
+        await flushPromises();
+
+        expect(worker.postMessage).toHaveBeenCalledWith({
+            type: 'FETCH_EPG',
+            url: 'https://example.com/guide.xml',
+        });
+
+        worker.emit('message', {
+            type: 'EPG_COMPLETE',
+            stats: { totalChannels: 1, totalPrograms: 2 },
+        });
+
+        await expect(fetchPromise).resolves.toBeUndefined();
+    });
+
+    it('rejects with actionable worker path errors', async () => {
+        resolveWorkerRuntimeBootstrap.mockImplementation(() => {
+            const error = new Error(
+                'Unable to resolve worker "epg-parser.worker.js".\nTried:\n- /missing/epg-parser.worker.js'
+            );
+            error.name = 'WorkerPathResolutionError';
+            throw error;
+        });
+
+        await expect(EpgEvents.clearEpgData()).rejects.toMatchObject({
+            name: 'WorkerPathResolutionError',
+            message: expect.stringContaining('epg-parser.worker.js'),
+        });
+    });
+
+    it('falls back to case-insensitive channel id lookup for EPG programs', async () => {
+        const select = jest.fn();
+        const programLimitExact = jest.fn().mockResolvedValue([]);
+        const channelLimit = jest
+            .fn()
+            .mockResolvedValue([{ id: 'BBC.ONE.UK', displayName: 'BBC One' }]);
+        const programLimitResolved = jest.fn().mockResolvedValue([
+            {
+                id: 1,
+                channelId: 'BBC.ONE.UK',
+                start: '2026-04-14T10:00:00Z',
+                stop: '2026-04-14T11:00:00Z',
+                title: 'News',
+                description: null,
+                category: null,
+                iconUrl: null,
+                rating: null,
+                episodeNum: null,
+            },
+        ]);
+
+        const from = jest
+            .fn()
+            .mockReturnValueOnce({
+                where: jest.fn().mockReturnValue({
+                    orderBy: jest.fn().mockReturnValue({
+                        limit: programLimitExact,
+                    }),
+                }),
+            })
+            .mockReturnValueOnce({
+                where: jest.fn().mockReturnValue({
+                    limit: channelLimit,
+                }),
+            })
+            .mockReturnValueOnce({
+                where: jest.fn().mockReturnValue({
+                    orderBy: jest.fn().mockReturnValue({
+                        limit: programLimitResolved,
+                    }),
+                }),
+            });
+
+        select.mockImplementation(() => ({ from }));
+
+        getDatabase.mockResolvedValue({ select });
+
+        const programs = await (EpgEvents as unknown as Record<string, any>)[
+            'handleGetChannelPrograms'
+        ]('bbc.one.uk');
+
+        expect(programs).toHaveLength(1);
+        expect(programs[0].channel).toBe('BBC.ONE.UK');
+    });
+
+    it('resolves channel metadata using exact id, case-insensitive id, and display name fallback', async () => {
+        const where = jest.fn().mockResolvedValue([
+            {
+                id: 'BBC.ONE.UK',
+                displayName: 'BBC One',
+                iconUrl: 'https://example.com/bbc-one.png',
+            },
+            {
+                id: 'guide-news',
+                displayName: 'Guide News',
+                iconUrl: 'https://example.com/guide-news.png',
+            },
+        ]);
+        const from = jest.fn().mockReturnValue({ where });
+        const select = jest.fn().mockReturnValue({ from });
+
+        getDatabase.mockResolvedValue({ select });
+
+        const metadata = await (EpgEvents as unknown as Record<string, any>)[
+            'handleGetChannelMetadata'
+        ](['BBC.ONE.UK', 'bbc.one.uk', 'Guide News', 'Missing Channel']);
+
+        expect(metadata).toEqual({
+            'BBC.ONE.UK': {
+                id: 'BBC.ONE.UK',
+                displayName: 'BBC One',
+                iconUrl: 'https://example.com/bbc-one.png',
+            },
+            'bbc.one.uk': {
+                id: 'BBC.ONE.UK',
+                displayName: 'BBC One',
+                iconUrl: 'https://example.com/bbc-one.png',
+            },
+            'Guide News': {
+                id: 'guide-news',
+                displayName: 'Guide News',
+                iconUrl: 'https://example.com/guide-news.png',
+            },
+            'Missing Channel': null,
+        });
+    });
+
+    it('drops malformed EPG rows with invalid stop dates', async () => {
+        const select = jest.fn();
+        const from = jest.fn();
+        const where = jest.fn();
+        const orderBy = jest.fn();
+        const limit = jest.fn();
+
+        select.mockImplementation(() => ({ from }));
+        from.mockReturnValue({ where });
+        where.mockReturnValue({ orderBy });
+        orderBy.mockReturnValue({ limit });
+        limit.mockResolvedValue([
+            {
+                id: 1,
+                channelId: 'id2e2cd03c90ad',
+                start: '2026-04-14T20:00:00+00:00',
+                stop: '2026-04-14T21:00:00+00:00',
+                title: 'valid',
+                description: null,
+                category: null,
+                iconUrl: null,
+                rating: null,
+                episodeNum: null,
+            },
+            {
+                id: 2,
+                channelId: 'id2e2cd03c90ad',
+                start: '2026-04-14T21:00:00+00:00',
+                stop: '',
+                title: 'invalid',
+                description: null,
+                category: null,
+                iconUrl: null,
+                rating: null,
+                episodeNum: null,
+            },
+        ]);
+
+        getDatabase.mockResolvedValue({ select });
+
+        const programs = await (EpgEvents as unknown as Record<string, any>)[
+            'handleGetChannelPrograms'
+        ]('id2e2cd03c90ad');
+
+        expect(programs).toHaveLength(1);
+        expect(programs[0].title).toBe('valid');
+    });
+});
diff --git a/apps/electron-backend/src/app/events/epg.events.ts b/apps/electron-backend/src/app/events/epg.events.ts
new file mode 100644
index 0000000..ee8000e
--- /dev/null
+++ b/apps/electron-backend/src/app/events/epg.events.ts
@@ -0,0 +1,835 @@
+import { eq, sql } from 'drizzle-orm';
+import { app, BrowserWindow, ipcMain } from 'electron';
+import * as path from 'path';
+import { EpgChannelMetadata, EpgProgram } from 'shared-interfaces';
+import { pathToFileURL } from 'url';
+import { Worker } from 'worker_threads';
+import { getDatabase } from '../database/connection';
+import * as schema from '../database/schema';
+import { resolveWorkerRuntimeBootstrap } from '../workers/worker-runtime-paths';
+
+/**
+ * EPG Events Handler
+ * Manages EPG data fetching and querying using worker threads.
+ * Database operations are performed in the worker thread to avoid blocking the main thread.
+ */
+export default class EpgEvents {
+    private static fetchedUrls: Set<string> = new Set();
+    private static workers: Map<string, Worker> = new Map();
+    private static readonly loggerLabel = '[EPG Events]';
+    private static readonly FETCH_TIMEOUT_MS = 5 * 60 * 1000;
+
+    private static createEpgWorker(): Worker {
+        const bootstrap = resolveWorkerRuntimeBootstrap({
+            isPackaged: app.isPackaged,
+            workerFilename: 'epg-parser.worker.js',
+            developmentWorkerDir: path.join(__dirname, 'workers'),
+            resourcesPath: (
+                process as NodeJS.Process & { resourcesPath?: string }
+            ).resourcesPath,
+            appPath: app.getAppPath(),
+        });
+
+        const workerURL = pathToFileURL(bootstrap.workerPath);
+        return new Worker(workerURL, {
+            resourceLimits: {
+                maxOldGenerationSizeMb: 4096,
+                maxYoungGenerationSizeMb: 512,
+            },
+            workerData: {
+                nativeModuleSearchPaths: bootstrap.nativeModuleSearchPaths,
+            },
+        });
+    }
+
+    /**
+     * Send EPG progress to all renderer windows
+     */
+    private static sendProgressToRenderer(
+        url: string,
+        status: 'queued' | 'loading' | 'complete' | 'error',
+        stats?: { totalChannels: number; totalPrograms: number },
+        error?: string,
+        queuePosition?: number
+    ): void {
+        const windows = BrowserWindow.getAllWindows();
+        windows.forEach((win) => {
+            win.webContents.send('EPG_PROGRESS_UPDATE', {
+                url,
+                status,
+                stats,
+                error,
+                queuePosition,
+            });
+        });
+    }
+
+    /**
+     * Bootstrap EPG events
+     */
+    static bootstrapEpgEvents(): Electron.IpcMain {
+        // Fetch EPG from URLs
+        ipcMain.handle('FETCH_EPG', async (_event, args: { url: string[] }) => {
+            return await this.handleFetchEpg(args.url);
+        });
+
+        // Get programs for a specific channel
+        ipcMain.handle(
+            'GET_CHANNEL_PROGRAMS',
+            async (_event, args: { channelId: string }) => {
+                return this.handleGetChannelPrograms(args.channelId);
+            }
+        );
+
+        // Get all channels from database
+        ipcMain.handle('EPG_GET_CHANNELS', async () => {
+            return this.handleGetAllChannels();
+        });
+
+        ipcMain.handle(
+            'EPG_GET_CHANNEL_METADATA',
+            async (_event, args: { channelIds: string[] }) => {
+                return this.handleGetChannelMetadata(args.channelIds);
+            }
+        );
+
+        // Get channels by range (pagination)
+        ipcMain.handle(
+            'EPG_GET_CHANNELS_BY_RANGE',
+            async (_event, args: { skip: number; limit: number }) => {
+                return this.handleGetChannelsByRange(args.skip, args.limit);
+            }
+        );
+
+        // Force fetch (ignore cache)
+        ipcMain.handle('EPG_FORCE_FETCH', async (_event, url: string) => {
+            this.fetchedUrls.delete(url);
+            return await this.handleFetchEpg([url]);
+        });
+
+        // Clear all EPG data
+        ipcMain.handle('EPG_CLEAR_ALL', async () => {
+            await this.clearEpgData();
+            return { success: true };
+        });
+
+        // Check if EPG data for URLs is fresh (not stale)
+        ipcMain.handle(
+            'EPG_CHECK_FRESHNESS',
+            async (
+                _event,
+                args: { urls: string[]; maxAgeHours?: number }
+            ): Promise<{ staleUrls: string[]; freshUrls: string[] }> => {
+                return this.checkEpgFreshness(
+                    args.urls,
+                    args.maxAgeHours ?? 12
+                );
+            }
+        );
+
+        return ipcMain;
+    }
+
+    /**
+     * Check which EPG URLs have fresh data vs stale/missing data
+     * @param urls - EPG source URLs to check
+     * @param maxAgeHours - Maximum age in hours before data is considered stale
+     */
+    private static async checkEpgFreshness(
+        urls: string[],
+        maxAgeHours: number
+    ): Promise<{ staleUrls: string[]; freshUrls: string[] }> {
+        const staleUrls: string[] = [];
+        const freshUrls: string[] = [];
+        const cutoffTime = new Date(
+            Date.now() - maxAgeHours * 60 * 60 * 1000
+        ).toISOString();
+
+        try {
+            const db = await getDatabase();
+
+            for (const url of urls) {
+                if (!url?.trim()) continue;
+
+                const result = await db
+                    .select({ updatedAt: schema.epgChannels.updatedAt })
+                    .from(schema.epgChannels)
+                    .where(eq(schema.epgChannels.sourceUrl, url))
+                    .limit(1);
+
+                const isFresh =
+                    result.length > 0 &&
+                    result[0].updatedAt &&
+                    result[0].updatedAt >= cutoffTime;
+
+                if (isFresh) {
+                    freshUrls.push(url);
+                    this.fetchedUrls.add(url);
+                } else {
+                    staleUrls.push(url);
+                }
+            }
+        } catch (error) {
+            console.error(
+                this.loggerLabel,
+                'Error checking EPG freshness:',
+                error
+            );
+            return { staleUrls: urls, freshUrls: [] };
+        }
+
+        // Log summary
+        if (freshUrls.length > 0) {
+            console.log(
+                this.loggerLabel,
+                `EPG fresh (skipping): ${freshUrls.length} source(s)`
+            );
+        }
+        if (staleUrls.length > 0) {
+            console.log(
+                this.loggerLabel,
+                `EPG stale (will fetch): ${staleUrls.length} source(s)`
+            );
+        }
+
+        return { staleUrls, freshUrls };
+    }
+
+    /**
+     * Handle EPG fetch from URLs
+     * Automatically skips URLs with fresh data (less than 12 hours old)
+     * Processes URLs sequentially to avoid SQLite database locking issues
+     */
+    private static async handleFetchEpg(
+        urls: string[]
+    ): Promise<{ success: boolean; message?: string; skipped?: string[] }> {
+        const validUrls = urls.filter((url) => url?.trim());
+
+        if (validUrls.length === 0) {
+            return { success: false, message: 'No valid URLs provided' };
+        }
+
+        // Check which URLs have fresh data and can be skipped
+        const { staleUrls, freshUrls } = await this.checkEpgFreshness(
+            validUrls,
+            12
+        );
+
+        if (staleUrls.length === 0) {
+            return {
+                success: true,
+                message: 'All EPG data is fresh',
+                skipped: freshUrls,
+            };
+        }
+
+        // Exclude URLs already processed this session — otherwise the loop sends
+        // a 'queued' status, then fetchEpgFromUrl silently skips the URL and no
+        // completion update ever arrives, leaving the UI stuck at "queued".
+        const urlsToFetch = staleUrls.filter(
+            (url) => !this.fetchedUrls.has(url)
+        );
+
+        if (urlsToFetch.length === 0) {
+            console.log(
+                this.loggerLabel,
+                `All ${staleUrls.length} stale URL(s) already fetched this session; skipping`
+            );
+            return { success: true, skipped: freshUrls };
+        }
+
+        // Send queued status for URLs that will actually be fetched
+        urlsToFetch.forEach((url, index) => {
+            this.sendProgressToRenderer(
+                url,
+                'queued',
+                undefined,
+                undefined,
+                index + 1
+            );
+        });
+
+        // Process URLs sequentially to avoid database locking
+        const errors: string[] = [];
+        for (let i = 0; i < urlsToFetch.length; i++) {
+            const url = urlsToFetch[i];
+            try {
+                await this.fetchEpgFromUrl(url);
+            } catch (error) {
+                console.error(
+                    this.loggerLabel,
+                    `Error fetching EPG from ${url}:`,
+                    error
+                );
+                errors.push(
+                    error instanceof Error ? error.message : String(error)
+                );
+            }
+        }
+
+        if (errors.length > 0) {
+            return {
+                success: errors.length < urlsToFetch.length, // Partial success if some worked
+                message: errors.join('; '),
+                skipped: freshUrls,
+            };
+        }
+
+        return { success: true, skipped: freshUrls };
+    }
+
+    /**
+     * Fetch EPG from a single URL using worker thread
+     * The worker handles both parsing AND database operations
+     */
+    private static async fetchEpgFromUrl(url: string): Promise<void> {
+        // Skip if already fetched this session
+        if (this.fetchedUrls.has(url)) {
+            console.log(
+                this.loggerLabel,
+                `Skipping already fetched URL: ${url}`
+            );
+            return;
+        }
+
+        return new Promise((resolve, reject) => {
+            let worker: Worker;
+            try {
+                worker = this.createEpgWorker();
+            } catch (error) {
+                console.error(
+                    this.loggerLabel,
+                    'Failed to create worker:',
+                    error
+                );
+                reject(error);
+                return;
+            }
+
+            this.workers.set(url, worker);
+
+            // Guards against double-settling and keeps the outer loop moving
+            // when the worker dies or hangs without sending EPG_COMPLETE/EPG_ERROR.
+            let settled = false;
+            const settle = (fn: () => void) => {
+                if (settled) return;
+                settled = true;
+                clearTimeout(timeoutId);
+                fn();
+            };
+
+            const timeoutId = setTimeout(() => {
+                const errorMessage = `EPG fetch timed out after ${
+                    this.FETCH_TIMEOUT_MS / 1000
+                }s`;
+                console.error(this.loggerLabel, `${errorMessage}: ${url}`);
+                this.sendProgressToRenderer(
+                    url,
+                    'error',
+                    undefined,
+                    errorMessage
+                );
+                worker.terminate();
+                this.workers.delete(url);
+                settle(() => reject(new Error(errorMessage)));
+            }, this.FETCH_TIMEOUT_MS);
+
+            worker.on(
+                'message',
+                async (message: {
+                    type: string;
+                    error?: string;
+                    url?: string;
+                    stats?: { totalChannels: number; totalPrograms: number };
+                }) => {
+                    try {
+                        switch (message.type) {
+                            case 'READY':
+                                // Notify renderer that loading started
+                                this.sendProgressToRenderer(url, 'loading', {
+                                    totalChannels: 0,
+                                    totalPrograms: 0,
+                                });
+                                worker.postMessage({ type: 'FETCH_EPG', url });
+                                break;
+
+                            case 'EPG_PROGRESS':
+                                if (message.stats) {
+                                    // Forward progress to renderer
+                                    this.sendProgressToRenderer(
+                                        url,
+                                        'loading',
+                                        message.stats
+                                    );
+                                }
+                                break;
+
+                            case 'EPG_COMPLETE':
+                                console.log(
+                                    this.loggerLabel,
+                                    `EPG parsing complete for ${url}:`,
+                                    message.stats
+                                );
+                                // Notify renderer of completion
+                                this.sendProgressToRenderer(
+                                    url,
+                                    'complete',
+                                    message.stats
+                                );
+                                this.fetchedUrls.add(url);
+                                worker.terminate();
+                                this.workers.delete(url);
+                                settle(() => resolve());
+                                break;
+
+                            case 'EPG_ERROR':
+                                console.error(
+                                    this.loggerLabel,
+                                    'Worker error:',
+                                    message.error
+                                );
+                                // Notify renderer of error
+                                this.sendProgressToRenderer(
+                                    url,
+                                    'error',
+                                    undefined,
+                                    message.error
+                                );
+                                worker.terminate();
+                                this.workers.delete(url);
+                                settle(() =>
+                                    reject(
+                                        new Error(
+                                            message.error || 'Unknown error'
+                                        )
+                                    )
+                                );
+                                break;
+                        }
+                    } catch (err) {
+                        console.error(
+                            this.loggerLabel,
+                            'Error handling message:',
+                            err
+                        );
+                        this.sendProgressToRenderer(
+                            url,
+                            'error',
+                            undefined,
+                            err instanceof Error ? err.message : String(err)
+                        );
+                        worker.terminate();
+                        this.workers.delete(url);
+                        settle(() => reject(err));
+                    }
+                }
+            );
+
+            worker.on('error', (error) => {
+                console.error(this.loggerLabel, 'Worker error event:', error);
+                this.sendProgressToRenderer(
+                    url,
+                    'error',
+                    undefined,
+                    error.message
+                );
+                worker.terminate();
+                this.workers.delete(url);
+                settle(() => reject(error));
+            });
+
+            worker.on('exit', (code) => {
+                // If the worker exits without emitting EPG_COMPLETE/EPG_ERROR,
+                // settle the promise so the outer sequential loop can advance
+                // instead of hanging forever.
+                if (settled) return;
+                const errorMessage = `Worker exited unexpectedly (code ${code})`;
+                console.error(this.loggerLabel, `${errorMessage}: ${url}`);
+                this.sendProgressToRenderer(
+                    url,
+                    'error',
+                    undefined,
+                    errorMessage
+                );
+                this.workers.delete(url);
+                settle(() => reject(new Error(errorMessage)));
+            });
+        });
+    }
+
+    private static normalizeChannelLookupKeys(channelIds: string[]): string[] {
+        return Array.from(
+            new Set(
+                channelIds
+                    .map((channelId) => channelId.trim())
+                    .filter((channelId) => channelId.length > 0)
+            )
+        );
+    }
+
+    private static resolveChannelMetadataCandidate(
+        channelId: string,
+        candidates: EpgChannelMetadata[]
+    ): EpgChannelMetadata | null {
+        const lowerChannelId = channelId.toLowerCase();
+
+        const exactIdMatch =
+            candidates.find((candidate) => candidate.id === channelId) ?? null;
+        if (exactIdMatch) {
+            return exactIdMatch;
+        }
+
+        const caseInsensitiveIdMatch =
+            candidates.find(
+                (candidate) => candidate.id.toLowerCase() === lowerChannelId
+            ) ?? null;
+        if (caseInsensitiveIdMatch) {
+            return caseInsensitiveIdMatch;
+        }
+
+        const exactDisplayNameMatch =
+            candidates.find(
+                (candidate) => candidate.displayName === channelId
+            ) ?? null;
+        if (exactDisplayNameMatch) {
+            return exactDisplayNameMatch;
+        }
+
+        return (
+            candidates.find(
+                (candidate) =>
+                    candidate.displayName.toLowerCase() === lowerChannelId
+            ) ?? null
+        );
+    }
+
+    /**
+     * Transform database row to flat EpgProgram interface
+     */
+    private static transformDbRowToEpgProgram(row: {
+        id: number;
+        channelId: string;
+        start: string;
+        stop: string;
+        title: string;
+        description: string | null;
+        category: string | null;
+        iconUrl: string | null;
+        rating: string | null;
+        episodeNum: string | null;
+    }) {
+        return {
+            start: row.start,
+            stop: row.stop,
+            channel: row.channelId,
+            title: row.title,
+            desc: row.description,
+            category: row.category,
+            iconUrl: row.iconUrl,
+            rating: row.rating,
+            episodeNum: row.episodeNum,
+        };
+    }
+
+    private static isValidEpgProgram(program: EpgProgram): boolean {
+        return Boolean(
+            program.start &&
+                program.stop &&
+                !Number.isNaN(new Date(program.start).getTime()) &&
+                !Number.isNaN(new Date(program.stop).getTime())
+        );
+    }
+
+    /**
+     * Get programs for a specific channel from database
+     */
+    private static async handleGetChannelPrograms(
+        channelId: string
+    ): Promise<EpgProgram[]> {
+        try {
+            const db = await getDatabase();
+            const trimmedChannelId = channelId.trim();
+
+            if (!trimmedChannelId) {
+                return [];
+            }
+
+            // Try exact channel ID match first
+            let results = await db
+                .select()
+                .from(schema.epgPrograms)
+                .where(eq(schema.epgPrograms.channelId, trimmedChannelId))
+                .orderBy(schema.epgPrograms.start)
+                .limit(500);
+
+            if (results.length > 0) {
+                return results
+                    .map(this.transformDbRowToEpgProgram)
+                    .filter(this.isValidEpgProgram);
+            }
+
+            // Some playlists provide the right tvg-id with different casing than
+            // the XMLTV feed. Resolve the canonical channel row before giving up.
+            let channel = await db
+                .select()
+                .from(schema.epgChannels)
+                .where(
+                    sql`${schema.epgChannels.id} = ${trimmedChannelId} COLLATE NOCASE`
+                )
+                .limit(1);
+
+            if (channel.length > 0) {
+                results = await db
+                    .select()
+                    .from(schema.epgPrograms)
+                    .where(eq(schema.epgPrograms.channelId, channel[0].id))
+                    .orderBy(schema.epgPrograms.start)
+                    .limit(500);
+
+                if (results.length > 0) {
+                    return results
+                        .map(this.transformDbRowToEpgProgram)
+                        .filter(this.isValidEpgProgram);
+                }
+            }
+
+            // Try exact display name match before giving up. Using wildcard LIKE
+            // here can scan the whole table on the Electron main process.
+            channel = await db
+                .select()
+                .from(schema.epgChannels)
+                .where(eq(schema.epgChannels.displayName, trimmedChannelId))
+                .limit(1);
+
+            if (channel.length === 0) {
+                channel = await db
+                    .select()
+                    .from(schema.epgChannels)
+                    .where(
+                        sql`${schema.epgChannels.displayName} = ${trimmedChannelId} COLLATE NOCASE`
+                    )
+                    .limit(1);
+            }
+
+            if (channel.length > 0) {
+                results = await db
+                    .select()
+                    .from(schema.epgPrograms)
+                    .where(eq(schema.epgPrograms.channelId, channel[0].id))
+                    .orderBy(schema.epgPrograms.start)
+                    .limit(500);
+
+                return results
+                    .map(this.transformDbRowToEpgProgram)
+                    .filter(this.isValidEpgProgram);
+            }
+
+            return [];
+        } catch (error) {
+            console.error(
+                this.loggerLabel,
+                'Error getting channel programs:',
+                error
+            );
+            return [];
+        }
+    }
+
+    /**
+     * Get all channels from database
+     */
+    private static async handleGetAllChannels(): Promise<{
+        channels: Array<{ id: string; displayName: string }>;
+        programs: never[];
+    }> {
+        try {
+            const db = await getDatabase();
+            const channels = await db
+                .select({
+                    id: schema.epgChannels.id,
+                    displayName: schema.epgChannels.displayName,
+                })
+                .from(schema.epgChannels)
+                .orderBy(schema.epgChannels.displayName);
+
+            return { channels, programs: [] };
+        } catch (error) {
+            console.error(
+                this.loggerLabel,
+                'Error getting all channels:',
+                error
+            );
+            return { channels: [], programs: [] };
+        }
+    }
+
+    /**
+     * Resolve EPG channel metadata for a batch of lookup keys.
+     *
+     * Lookup precedence per key:
+     * 1. exact channel id
+     * 2. case-insensitive channel id
+     * 3. exact display name
+     * 4. case-insensitive display name
+     */
+    private static async handleGetChannelMetadata(
+        channelIds: string[]
+    ): Promise<Record<string, EpgChannelMetadata | null>> {
+        try {
+            const normalizedChannelIds =
+                this.normalizeChannelLookupKeys(channelIds);
+
+            if (normalizedChannelIds.length === 0) {
+                return {};
+            }
+
+            const db = await getDatabase();
+            const lowerKeys = Array.from(
+                new Set(
+                    normalizedChannelIds.map((channelId) =>
+                        channelId.toLowerCase()
+                    )
+                )
+            );
+            const lowerKeyValues = lowerKeys.map((key) => sql`${key}`);
+
+            const candidates = await db
+                .select({
+                    id: schema.epgChannels.id,
+                    displayName: schema.epgChannels.displayName,
+                    iconUrl: schema.epgChannels.iconUrl,
+                })
+                .from(schema.epgChannels)
+                .where(sql`
+                    LOWER(${schema.epgChannels.id}) IN (${sql.join(lowerKeyValues, sql`, `)})
+                    OR LOWER(${schema.epgChannels.displayName}) IN (${sql.join(lowerKeyValues, sql`, `)})
+                `);
+
+            return Object.fromEntries(
+                normalizedChannelIds.map((channelId) => [
+                    channelId,
+                    this.resolveChannelMetadataCandidate(channelId, candidates),
+                ])
+            );
+        } catch (error) {
+            console.error(
+                this.loggerLabel,
+                'Error getting channel metadata:',
+                error
+            );
+            return {};
+        }
+    }
+
+    /**
+     * Get channels by range (for pagination) with their programs
+     */
+    private static async handleGetChannelsByRange(
+        skip: number,
+        limit: number
+    ): Promise<
+        Array<{
+            id: string;
+            displayName: string;
+            iconUrl: string | null;
+            programs: EpgProgram[];
+        }>
+    > {
+        try {
+            const db = await getDatabase();
+            const channels = await db
+                .select({
+                    id: schema.epgChannels.id,
+                    displayName: schema.epgChannels.displayName,
+                    iconUrl: schema.epgChannels.iconUrl,
+                })
+                .from(schema.epgChannels)
+                .orderBy(schema.epgChannels.displayName)
+                .offset(skip)
+                .limit(limit);
+
+            // Fetch programs for each channel
+            const channelsWithPrograms = await Promise.all(
+                channels.map(async (channel) => {
+                    const programs = await db
+                        .select()
+                        .from(schema.epgPrograms)
+                        .where(eq(schema.epgPrograms.channelId, channel.id))
+                        .orderBy(schema.epgPrograms.start);
+
+                    return {
+                        ...channel,
+                        programs: programs.map(this.transformDbRowToEpgProgram),
+                    };
+                })
+            );
+
+            return channelsWithPrograms;
+        } catch (error) {
+            console.error(
+                this.loggerLabel,
+                'Error getting channels by range:',
+                error
+            );
+            return [];
+        }
+    }
+
+    /**
+     * Clear all EPG data using worker thread to avoid blocking main thread
+     */
+    static async clearEpgData(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            let worker: Worker;
+            try {
+                worker = this.createEpgWorker();
+            } catch (error) {
+                console.error(
+                    this.loggerLabel,
+                    'Failed to create worker for clear:',
+                    error
+                );
+                reject(error);
+                return;
+            }
+
+            worker.on(
+                'message',
+                (message: { type: string; error?: string }) => {
+                    if (message.type === 'READY') {
+                        worker.postMessage({ type: 'CLEAR_EPG' });
+                    } else if (message.type === 'CLEAR_COMPLETE') {
+                        console.log(
+                            this.loggerLabel,
+                            'EPG data cleared via worker'
+                        );
+                        this.fetchedUrls.clear();
+                        // Terminate any running fetch workers
+                        this.workers.forEach((w) => w.terminate());
+                        this.workers.clear();
+                        worker.terminate();
+                        resolve();
+                    } else if (message.type === 'EPG_ERROR') {
+                        console.error(
+                            this.loggerLabel,
+                            'Worker clear error:',
+                            message.error
+                        );
+                        worker.terminate();
+                        reject(new Error(message.error || 'Clear failed'));
+                    }
+                }
+            );
+
+            worker.on('error', (error) => {
+                console.error(
+                    this.loggerLabel,
+                    'Worker error during clear:',
+                    error
+                );
+                worker.terminate();
+                reject(error);
+            });
+        });
+    }
+}
diff --git a/apps/electron-backend/src/app/events/external-player-session-registry.spec.ts b/apps/electron-backend/src/app/events/external-player-session-registry.spec.ts
new file mode 100644
index 0000000..00842f6
--- /dev/null
+++ b/apps/electron-backend/src/app/events/external-player-session-registry.spec.ts
@@ -0,0 +1,63 @@
+import { ExternalPlayerSession } from 'shared-interfaces';
+import { ExternalPlayerSessionRegistry } from './external-player-session-registry';
+
+describe('ExternalPlayerSessionRegistry', () => {
+    let updates: ExternalPlayerSession[];
+    let registry: ExternalPlayerSessionRegistry;
+
+    beforeEach(() => {
+        updates = [];
+        registry = new ExternalPlayerSessionRegistry((session) => {
+            updates.push(session);
+        });
+    });
+
+    it('creates launching sessions and marks them opened', () => {
+        const session = registry.beginSession({
+            player: 'mpv',
+            title: 'Example',
+            streamUrl: 'https://example.com/video.m3u8',
+        });
+
+        expect(session.status).toBe('launching');
+        expect(registry.getActiveSessionId()).toBe(session.id);
+
+        const opened = registry.markOpened(session.id);
+        expect(opened?.status).toBe('opened');
+        expect(updates.at(-1)?.status).toBe('opened');
+    });
+
+    it('keeps close capability and closes the session explicitly', async () => {
+        const close = jest.fn();
+        const session = registry.beginSession({
+            player: 'vlc',
+            title: 'Example',
+            streamUrl: 'https://example.com/video.m3u8',
+        });
+
+        registry.attachCloser(session.id, close);
+
+        expect(registry.getSession(session.id)?.canClose).toBe(true);
+
+        const closed = await registry.closeSession(session.id);
+
+        expect(close).toHaveBeenCalled();
+        expect(closed?.status).toBe('closed');
+        expect(closed?.canClose).toBe(false);
+        expect(registry.getActiveSessionId()).toBeNull();
+    });
+
+    it('marks runtime failures as errors without clearing the active id', () => {
+        const session = registry.beginSession({
+            player: 'mpv',
+            title: 'Example',
+            streamUrl: 'https://example.com/video.m3u8',
+        });
+
+        const errored = registry.markError(session.id, 'Failed to launch');
+
+        expect(errored?.status).toBe('error');
+        expect(errored?.error).toBe('Failed to launch');
+        expect(registry.getActiveSessionId()).toBe(session.id);
+    });
+});
diff --git a/apps/electron-backend/src/app/events/external-player-session-registry.ts b/apps/electron-backend/src/app/events/external-player-session-registry.ts
new file mode 100644
index 0000000..cf4828e
--- /dev/null
+++ b/apps/electron-backend/src/app/events/external-player-session-registry.ts
@@ -0,0 +1,137 @@
+import {
+    ExternalPlayerName,
+    ExternalPlayerSession,
+    PlayerContentInfo,
+} from 'shared-interfaces';
+
+interface CreateExternalPlayerSessionOptions {
+    player: ExternalPlayerName;
+    title: string;
+    thumbnail?: string | null;
+    streamUrl: string;
+    contentInfo?: PlayerContentInfo;
+}
+
+interface UpdateExternalPlayerSessionOptions {
+    status?: ExternalPlayerSession['status'];
+    error?: string;
+    canClose?: boolean;
+}
+
+interface ExternalPlayerSessionRuntime {
+    snapshot: ExternalPlayerSession;
+    close?: () => Promise<void> | void;
+}
+
+export class ExternalPlayerSessionRegistry {
+    private readonly sessions = new Map<string, ExternalPlayerSessionRuntime>();
+    private activeSessionId: string | null = null;
+
+    constructor(
+        private readonly onUpdate: (session: ExternalPlayerSession) => void
+    ) {}
+
+    beginSession(
+        options: CreateExternalPlayerSessionOptions
+    ): ExternalPlayerSession {
+        const startedAt = new Date().toISOString();
+        const session: ExternalPlayerSession = {
+            id: crypto.randomUUID(),
+            player: options.player,
+            status: 'launching',
+            title: options.title,
+            thumbnail: options.thumbnail ?? null,
+            streamUrl: options.streamUrl,
+            contentInfo: options.contentInfo,
+            startedAt,
+            updatedAt: startedAt,
+            canClose: false,
+        };
+
+        this.sessions.set(session.id, { snapshot: session });
+        this.activeSessionId = session.id;
+        this.onUpdate(session);
+        return session;
+    }
+
+    getActiveSessionId(): string | null {
+        return this.activeSessionId;
+    }
+
+    getSession(id: string): ExternalPlayerSession | null {
+        return this.sessions.get(id)?.snapshot ?? null;
+    }
+
+    attachCloser(
+        id: string,
+        close: () => Promise<void> | void
+    ): ExternalPlayerSession | null {
+        const runtime = this.sessions.get(id);
+        if (!runtime) {
+            return null;
+        }
+
+        runtime.close = close;
+        return this.updateSession(id, { canClose: true });
+    }
+
+    updateSession(
+        id: string,
+        options: UpdateExternalPlayerSessionOptions
+    ): ExternalPlayerSession | null {
+        const runtime = this.sessions.get(id);
+        if (!runtime) {
+            return null;
+        }
+
+        const next: ExternalPlayerSession = {
+            ...runtime.snapshot,
+            ...options,
+            updatedAt: new Date().toISOString(),
+        };
+        runtime.snapshot = next;
+        this.onUpdate(next);
+        return next;
+    }
+
+    markOpened(id: string): ExternalPlayerSession | null {
+        return this.updateSession(id, { status: 'opened' });
+    }
+
+    markPlaying(id: string): ExternalPlayerSession | null {
+        const current = this.getSession(id);
+        if (!current || current.status === 'playing') {
+            return current;
+        }
+
+        return this.updateSession(id, { status: 'playing' });
+    }
+
+    markClosed(id: string): ExternalPlayerSession | null {
+        if (this.activeSessionId === id) {
+            this.activeSessionId = null;
+        }
+        return this.updateSession(id, { status: 'closed', canClose: false });
+    }
+
+    markError(id: string, error: string): ExternalPlayerSession | null {
+        return this.updateSession(id, {
+            status: 'error',
+            error,
+            canClose: false,
+        });
+    }
+
+    async closeSession(id: string): Promise<ExternalPlayerSession | null> {
+        const runtime = this.sessions.get(id);
+        if (!runtime) {
+            return null;
+        }
+
+        try {
+            await runtime.close?.();
+        } finally {
+            return this.markClosed(id);
+        }
+    }
+}
diff --git a/apps/electron-backend/src/app/events/player.events.spec.ts b/apps/electron-backend/src/app/events/player.events.spec.ts
new file mode 100644
index 0000000..016b0c5
--- /dev/null
+++ b/apps/electron-backend/src/app/events/player.events.spec.ts
@@ -0,0 +1,172 @@
+jest.mock('electron', () => ({
+    ipcMain: {
+        handle: jest.fn(),
+    },
+}));
+
+jest.mock('../app', () => ({
+    __esModule: true,
+    default: {
+        mainWindow: null,
+    },
+}));
+
+jest.mock('../services/store.service', () => ({
+    MPV_PLAYER_PATH: 'MPV_PLAYER_PATH',
+    MPV_REUSE_INSTANCE: 'MPV_REUSE_INSTANCE',
+    VLC_PLAYER_PATH: 'VLC_PLAYER_PATH',
+    store: {
+        get: jest.fn(),
+        set: jest.fn(),
+    },
+}));
+
+jest.mock('../services/stalker-playback-context.service', () => ({
+    getStalkerPlaybackContextHeaders: jest.fn(() => undefined),
+}));
+
+import {
+    buildExternalPlayerSpawnSpec,
+    isRunningInFlatpak,
+    parseVlcRcPlaybackState,
+    parseVlcRcNumericResponse,
+    resolveExternalPlayerLaunchContext,
+    shouldReuseMpvInstance,
+    shouldUseMpvSocketBridge,
+} from './player.events';
+
+function createPathExists(existingPaths: string[]) {
+    return (candidatePath: string) => existingPaths.includes(candidatePath);
+}
+
+describe('player.events Flatpak launch helpers', () => {
+    it('detects Flatpak only on Linux when /.flatpak-info exists', () => {
+        expect(isRunningInFlatpak(createPathExists(['/.flatpak-info']), 'linux')).toBe(
+            true
+        );
+        expect(isRunningInFlatpak(createPathExists(['/.flatpak-info']), 'darwin')).toBe(
+            false
+        );
+        expect(isRunningInFlatpak(createPathExists([]), 'linux')).toBe(false);
+    });
+
+    it('keeps direct Linux player launching outside Flatpak', () => {
+        const launchContext = resolveExternalPlayerLaunchContext('mpv', undefined, {
+            platform: 'linux',
+            isFlatpak: false,
+            pathExists: createPathExists(['/usr/local/bin/mpv']),
+        });
+        const spawnSpec = buildExternalPlayerSpawnSpec(launchContext, [
+            '--ytdl=no',
+            'https://example.com/stream.m3u8',
+        ]);
+
+        expect(launchContext).toEqual({
+            mode: 'direct',
+            playerPath: '/usr/local/bin/mpv',
+            command: '/usr/local/bin/mpv',
+            argsPrefix: [],
+        });
+        expect(spawnSpec).toEqual({
+            mode: 'direct',
+            playerPath: '/usr/local/bin/mpv',
+            command: '/usr/local/bin/mpv',
+            args: ['--ytdl=no', 'https://example.com/stream.m3u8'],
+        });
+    });
+
+    it('builds Flatpak host launches with bare player names by default', () => {
+        const launchContext = resolveExternalPlayerLaunchContext('vlc', undefined, {
+            platform: 'linux',
+            isFlatpak: true,
+            pathExists: createPathExists(['/usr/bin/vlc']),
+        });
+        const spawnSpec = buildExternalPlayerSpawnSpec(launchContext, [
+            '--extraintf=rc',
+            'https://example.com/stream.m3u8',
+        ]);
+
+        expect(launchContext).toEqual({
+            mode: 'flatpak-host',
+            playerPath: 'vlc',
+            command: 'flatpak-spawn',
+            argsPrefix: ['--host', '--watch-bus', 'vlc'],
+        });
+        expect(spawnSpec.args).toEqual([
+            '--host',
+            '--watch-bus',
+            'vlc',
+            '--extraintf=rc',
+            'https://example.com/stream.m3u8',
+        ]);
+    });
+
+    it('passes custom host player paths through Flatpak launching unchanged', () => {
+        const launchContext = resolveExternalPlayerLaunchContext(
+            'mpv',
+            '/opt/mpv/bin/mpv',
+            {
+                platform: 'linux',
+                isFlatpak: true,
+            }
+        );
+
+        expect(launchContext).toEqual({
+            mode: 'flatpak-host',
+            playerPath: '/opt/mpv/bin/mpv',
+            command: 'flatpak-spawn',
+            argsPrefix: ['--host', '--watch-bus', '/opt/mpv/bin/mpv'],
+        });
+    });
+
+    it('disables MPV reuse and socket bridging only in Flatpak', () => {
+        expect(shouldReuseMpvInstance(true, true)).toBe(false);
+        expect(shouldUseMpvSocketBridge(true)).toBe(false);
+
+        expect(shouldReuseMpvInstance(true, false)).toBe(true);
+        expect(shouldReuseMpvInstance(false, false)).toBe(false);
+        expect(shouldUseMpvSocketBridge(false)).toBe(true);
+    });
+
+    it('parses numeric VLC RC responses that include the prompt prefix', () => {
+        expect(
+            parseVlcRcNumericResponse(`VLC media player 3.0.20 Vetinari
+Command Line Interface initialized. Type \`help' for help.
+> 20
+> `)
+        ).toBe('20');
+
+        expect(
+            parseVlcRcNumericResponse(`VLC media player 3.0.20 Vetinari
+Command Line Interface initialized. Type \`help' for help.
+> 9281
+> `)
+        ).toBe('9281');
+    });
+
+    it('returns an empty string for non-numeric VLC RC responses', () => {
+        expect(
+            parseVlcRcNumericResponse(`VLC media player 3.0.20 Vetinari
+Command Line Interface initialized. Type \`help' for help.
+> ( state playing )
+> `)
+        ).toBe('');
+    });
+
+    it('parses VLC RC playback states from status output', () => {
+        expect(
+            parseVlcRcPlaybackState(`VLC media player 3.0.20 Vetinari
+Command Line Interface initialized. Type \`help' for help.
+> ( audio volume: 196 )
+( state playing )
+> `)
+        ).toBe('playing');
+
+        expect(
+            parseVlcRcPlaybackState(`VLC media player 3.0.20 Vetinari
+Command Line Interface initialized. Type \`help' for help.
+> ( state stopped )
+> `)
+        ).toBe('stopped');
+    });
+});
diff --git a/apps/electron-backend/src/app/events/player.events.ts b/apps/electron-backend/src/app/events/player.events.ts
new file mode 100644
index 0000000..52d1845
--- /dev/null
+++ b/apps/electron-backend/src/app/events/player.events.ts
@@ -0,0 +1,1432 @@
+import { app, ipcMain } from 'electron';
+import {
+    CLOSE_EXTERNAL_PLAYER_SESSION,
+    EXTERNAL_PLAYER_SESSION_UPDATE,
+    ExternalPlayerName,
+    ExternalPlayerSession,
+} from 'shared-interfaces';
+import App from '../app';
+import {
+    MPV_PLAYER_PATH,
+    MPV_REUSE_INSTANCE,
+    store,
+    VLC_PLAYER_PATH,
+} from '../services/store.service';
+
+import { ChildProcess, spawn } from 'child_process';
+import { existsSync } from 'fs';
+import { AddressInfo, createConnection, createServer } from 'net';
+import path from 'path';
+import { getStalkerPlaybackContextHeaders } from '../services/stalker-playback-context.service';
+import { ExternalPlayerSessionRegistry } from './external-player-session-registry';
+
+export default class PlayerEvents {
+    static bootstrapPlayerEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
+
+// Keep track of the running MPV process for reuse
+let mpvProcess: ChildProcess | null = null;
+let mpvSocketPath: string | null = null;
+let positionPollingInterval: NodeJS.Timeout | null = null;
+
+interface ExternalPlaybackSnapshot {
+    positionSeconds: number;
+    durationSeconds: number | null;
+}
+
+function sendExternalPlayerSessionUpdate(session: ExternalPlayerSession) {
+    if (App.mainWindow && !App.mainWindow.isDestroyed()) {
+        App.mainWindow.webContents.send(EXTERNAL_PLAYER_SESSION_UPDATE, session);
+    }
+}
+
+const externalPlayerSessions = new ExternalPlayerSessionRegistry(
+    sendExternalPlayerSessionUpdate
+);
+
+type PathExists = (path: string) => boolean;
+
+type ExternalPlayerLaunchMode = 'direct' | 'flatpak-host';
+
+interface PlayerPathOptions {
+    platform?: NodeJS.Platform;
+    isFlatpak?: boolean;
+    pathExists?: PathExists;
+}
+
+interface ExternalPlayerLaunchContext {
+    mode: ExternalPlayerLaunchMode;
+    playerPath: string;
+    command: string;
+    argsPrefix: string[];
+}
+
+interface ExternalPlayerSpawnSpec {
+    mode: ExternalPlayerLaunchMode;
+    playerPath: string;
+    command: string;
+    args: string[];
+}
+
+export function isRunningInFlatpak(
+    pathExists: PathExists = existsSync,
+    platform: NodeJS.Platform = process.platform
+): boolean {
+    return platform === 'linux' && pathExists('/.flatpak-info');
+}
+
+function normalizeCustomPlayerPath(value: string | undefined): string | null {
+    const trimmedValue = value?.trim();
+    return trimmedValue ? trimmedValue : null;
+}
+
+function getDefaultPlayerPath(
+    player: ExternalPlayerName,
+    options: PlayerPathOptions = {}
+): string {
+    const {
+        platform = process.platform,
+        isFlatpak = isRunningInFlatpak(),
+        pathExists = existsSync,
+    } = options;
+
+    if (platform === 'linux' && isFlatpak) {
+        return player;
+    }
+
+    if (player === 'mpv') {
+        return getDefaultMpvPath({ platform, isFlatpak, pathExists });
+    }
+
+    return getDefaultVlcPath({ platform, isFlatpak, pathExists });
+}
+
+export function resolveExternalPlayerLaunchContext(
+    player: ExternalPlayerName,
+    customPlayerPath?: string,
+    options: PlayerPathOptions = {}
+): ExternalPlayerLaunchContext {
+    const {
+        platform = process.platform,
+        isFlatpak = isRunningInFlatpak(),
+        pathExists = existsSync,
+    } = options;
+    const playerPath =
+        normalizeCustomPlayerPath(customPlayerPath) ??
+        getDefaultPlayerPath(player, {
+            platform,
+            isFlatpak,
+            pathExists,
+        });
+
+    if (platform === 'linux' && isFlatpak) {
+        return {
+            mode: 'flatpak-host',
+            playerPath,
+            command: 'flatpak-spawn',
+            argsPrefix: ['--host', '--watch-bus', playerPath],
+        };
+    }
+
+    return {
+        mode: 'direct',
+        playerPath,
+        command: playerPath,
+        argsPrefix: [],
+    };
+}
+
+export function buildExternalPlayerSpawnSpec(
+    launchContext: ExternalPlayerLaunchContext,
+    playerArgs: string[]
+): ExternalPlayerSpawnSpec {
+    return {
+        mode: launchContext.mode,
+        playerPath: launchContext.playerPath,
+        command: launchContext.command,
+        args: [...launchContext.argsPrefix, ...playerArgs],
+    };
+}
+
+export function shouldReuseMpvInstance(
+    requestedReuseInstance: boolean,
+    isFlatpak: boolean = isRunningInFlatpak()
+): boolean {
+    return !isFlatpak && requestedReuseInstance;
+}
+
+export function shouldUseMpvSocketBridge(
+    isFlatpak: boolean = isRunningInFlatpak()
+): boolean {
+    return !isFlatpak;
+}
+
+function buildPlayerStartError(
+    player: 'MPV' | 'VLC',
+    error: Error,
+    launchContext: ExternalPlayerLaunchContext
+): Error {
+    const guidance =
+        launchContext.mode === 'flatpak-host'
+            ? `Make sure ${player} is installed on the host system and reachable via Flatpak host spawning at '${launchContext.playerPath}'.`
+            : `Make sure ${player} is installed and the path '${launchContext.playerPath}' is correct.`;
+
+    return new Error(
+        `Failed to start ${player} player: ${error.message}. ${guidance}`
+    );
+}
+
+// Helper function to send error notifications to the renderer
+function sendPlayerErrorNotification(player: 'MPV' | 'VLC', error: string) {
+    if (App.mainWindow && !App.mainWindow.isDestroyed()) {
+        // Make error message more user-friendly
+        let userMessage = error;
+
+        if (error.includes('Failed to open')) {
+            userMessage =
+                'Failed to open stream. The URL may be invalid or the server is not responding.';
+        } else if (
+            error.includes('Protocol not found') ||
+            error.includes('Unsupported protocol')
+        ) {
+            userMessage =
+                'Unsupported stream protocol. Please check the stream URL.';
+        } else if (
+            error.includes('Connection refused') ||
+            error.includes('Could not connect')
+        ) {
+            userMessage =
+                'Cannot connect to the stream server. Please check your internet connection.';
+        } else if (error.includes('403') || error.includes('Forbidden')) {
+            userMessage =
+                'Access denied. The stream may require valid credentials or headers.';
+        } else if (error.includes('404') || error.includes('Not Found')) {
+            userMessage =
+                'Stream not found. The URL may be incorrect or expired.';
+        } else if (error.includes('Timed out') || error.includes('timeout')) {
+            userMessage = 'Connection timed out. The server is not responding.';
+        }
+
+        App.mainWindow.webContents.send('player-error', {
+            player,
+            error: userMessage,
+            originalError: error,
+        });
+    }
+}
+
+function sendPlaybackPositionUpdate(
+    sessionId: string,
+    contentInfo: any,
+    snapshot: ExternalPlaybackSnapshot
+) {
+    if (!App.mainWindow || App.mainWindow.isDestroyed()) {
+        return;
+    }
+
+    externalPlayerSessions.markPlaying(sessionId);
+    App.mainWindow.webContents.send('playback-position-update', {
+        sessionId,
+        positionSeconds: snapshot.positionSeconds,
+        durationSeconds: snapshot.durationSeconds,
+        ...contentInfo,
+    });
+}
+
+// Query MPV property via IPC
+async function getMpvProperty(
+    socketPath: string,
+    property: string
+): Promise<number | null> {
+    return new Promise((resolve) => {
+        const client = createConnection(socketPath);
+        const request =
+            JSON.stringify({
+                command: ['get_property', property],
+            }) + '\n';
+
+        let data = '';
+
+        client.on('connect', () => {
+            // console.log('[PlayerEvents] MPV IPC connected, sending:', request.trim());
+            client.write(request);
+        });
+
+        const timeoutHandle = setTimeout(() => {
+            client.destroy();
+            resolve(null);
+        }, 2000);
+
+        client.on('data', (chunk) => {
+            data += chunk.toString();
+            if (data.includes('\n')) {
+                clearTimeout(timeoutHandle);
+                try {
+                    const lines = data.split('\n');
+                    for (const line of lines) {
+                        if (!line.trim()) continue;
+                        const response = JSON.parse(line);
+                        if (response.data !== undefined) {
+                            client.destroy();
+                            resolve(response.data);
+                            return;
+                        }
+                    }
+                } catch (e) {
+                    // ignore parse errors
+                }
+            }
+        });
+
+        client.on('end', () => {
+            clearTimeout(timeoutHandle);
+            // Fallback if no newline was detected but connection closed
+            if (data && !data.includes('\n')) {
+                try {
+                    const response = JSON.parse(data);
+                    resolve(response.data ?? null);
+                } catch (e) {
+                    resolve(null);
+                }
+            }
+        });
+
+        client.on('error', (err) => {
+            clearTimeout(timeoutHandle);
+            resolve(null);
+        });
+    });
+}
+
+export function parseVlcRcNumericResponse(data: string): string {
+    const match = data.match(/>\s*(-?\d+(?:\.\d+)?)/);
+    return match ? match[1] : '';
+}
+
+export function parseVlcRcPlaybackState(data: string): string | null {
+    const match = data.match(/\(\s*state\s+([^)]+)\s*\)/i);
+    return match ? match[1].trim().toLowerCase() : null;
+}
+
+function stopPositionPolling() {
+    if (positionPollingInterval) {
+        clearInterval(positionPollingInterval);
+        positionPollingInterval = null;
+    }
+}
+
+function maskUrlForLogs(rawUrl: string): string {
+    try {
+        const parsed = new URL(rawUrl);
+        return `${parsed.origin}${parsed.pathname}`;
+    } catch {
+        return rawUrl;
+    }
+}
+
+function shouldIgnoreMpvStdoutLine(line: string): boolean {
+    // Suppress MPV realtime progress spam.
+    return /^(\(Paused\)\s*)?AV:\s/.test(line);
+}
+
+function buildHttpHeaderFields(
+    origin?: string,
+    headers?: Record<string, string>
+): string[] {
+    const fields: string[] = [];
+    const normalizedHeaders = headers ?? {};
+
+    if (
+        origin &&
+        normalizedHeaders['Origin'] === undefined &&
+        normalizedHeaders['origin'] === undefined
+    ) {
+        fields.push(`Origin: ${origin}`);
+    }
+
+    Object.entries(normalizedHeaders).forEach(([name, value]) => {
+        if (!name || value === undefined || value === null) return;
+        const trimmedValue = String(value).trim();
+        if (!trimmedValue) return;
+        fields.push(`${name}: ${trimmedValue}`);
+    });
+
+    return fields;
+}
+
+function isStalkerDirectStreamProfile(
+    headers: Record<string, string>
+): boolean {
+    const icyMetaData = headers['Icy-MetaData'] ?? headers['icy-metadata'];
+    const userAgent = headers['User-Agent'] ?? headers['user-agent'];
+
+    return String(icyMetaData).trim() === '1' &&
+        String(userAgent).trim().toLowerCase() === 'ksplayer';
+}
+
+function startPositionPolling(
+    socketPath: string,
+    contentInfo: any,
+    sessionId: string
+) {
+    stopPositionPolling();
+
+    // Initial delay to let video load
+    setTimeout(() => {
+        // console.log('[PlayerEvents] Starting position polling interval');
+        positionPollingInterval = setInterval(async () => {
+            try {
+                const position = await getMpvProperty(socketPath, 'time-pos');
+                const duration = await getMpvProperty(socketPath, 'duration');
+
+                // console.log(`[PlayerEvents] Polling MPV: pos=${position}, dur=${duration}`);
+
+                if (position !== null && App.mainWindow) {
+                    sendPlaybackPositionUpdate(sessionId, contentInfo, {
+                        positionSeconds: Math.floor(position),
+                        durationSeconds: duration ? Math.floor(duration) : null,
+                    });
+                }
+            } catch (err) {
+                // console.error('[PlayerEvents] Error during polling:', err);
+                // MPV may have closed, stop polling
+                stopPositionPolling();
+            }
+        }, 5000); // Changed to 5 seconds for debugging
+    }, 2000); // Reduced initial delay
+}
+
+// VLC Polling
+let vlcPollingInterval: NodeJS.Timeout | null = null;
+
+function stopVlcPositionPolling() {
+    if (vlcPollingInterval) {
+        clearInterval(vlcPollingInterval);
+        vlcPollingInterval = null;
+    }
+}
+
+async function getVlcCommandResponse(
+    port: number,
+    command: string
+): Promise<string> {
+    return new Promise((resolve) => {
+        const client = createConnection({ port, host: '127.0.0.1' });
+        let data = '';
+        let resolved = false;
+
+        const done = (result: string) => {
+            if (resolved) return;
+            resolved = true;
+            clearTimeout(timeoutHandle);
+            if (!client.destroyed) client.destroy();
+            resolve(result);
+        };
+
+        const timeoutHandle = setTimeout(() => done(''), 2000);
+
+        client.on('connect', () => {
+            client.write(command + '\n');
+        });
+
+        client.on('data', (chunk) => {
+            data += chunk.toString();
+            // VLC prompt '>' means command finished
+            if (data.includes('>')) {
+                done(data);
+            }
+        });
+
+        client.on('error', () => done(''));
+    });
+}
+
+async function getVlcProperty(port: number, command: string): Promise<string> {
+    return parseVlcRcNumericResponse(
+        await getVlcCommandResponse(port, command)
+    );
+}
+
+async function getVlcPlaybackState(port: number): Promise<string | null> {
+    return parseVlcRcPlaybackState(
+        await getVlcCommandResponse(port, 'status')
+    );
+}
+
+async function getVlcPlaybackSnapshot(
+    port: number
+): Promise<ExternalPlaybackSnapshot | null> {
+    const timeStr = await getVlcProperty(port, 'get_time');
+    const lenStr = await getVlcProperty(port, 'get_length');
+
+    const position = parseInt(timeStr, 10);
+    const duration = parseInt(lenStr, 10);
+
+    if (isNaN(position)) {
+        return null;
+    }
+
+    return {
+        positionSeconds: position,
+        durationSeconds: !isNaN(duration) ? duration : null,
+    };
+}
+
+function startVlcPositionPolling(
+    port: number,
+    contentInfo: any,
+    sessionId: string,
+    onSnapshot?: (snapshot: ExternalPlaybackSnapshot) => void,
+    onStopped?: () => void
+) {
+    stopVlcPositionPolling();
+
+    // VLC needs time to start and bind port
+    setTimeout(() => {
+        /*
+        console.log(
+            `[PlayerEvents] Starting VLC polling on port ${port}`,
+            contentInfo
+        );
+        */
+        vlcPollingInterval = setInterval(async () => {
+            try {
+                const snapshot = await getVlcPlaybackSnapshot(port);
+
+                if (snapshot && App.mainWindow) {
+                    onSnapshot?.(snapshot);
+                    sendPlaybackPositionUpdate(
+                        sessionId,
+                        contentInfo,
+                        snapshot
+                    );
+                    return;
+                }
+
+                const playbackState = await getVlcPlaybackState(port);
+                if (playbackState === 'stopped') {
+                    onStopped?.();
+                    stopVlcPositionPolling();
+                }
+            } catch (err) {
+                // console.error('[PlayerEvents] VLC polling error:', err);
+                stopVlcPositionPolling();
+            }
+        }, 2000);
+    }, 1500);
+}
+
+// Helper function to send command to MPV via IPC
+function sendMpvCommand(command: string, args: Array<string | number>): Promise<void> {
+    return new Promise((resolve, reject) => {
+        if (!mpvSocketPath) {
+            reject(new Error('No MPV socket path available'));
+            return;
+        }
+
+        const client = createConnection(mpvSocketPath);
+        // MPV expects commands in the format: { "command": ["cmd", "arg1", "arg2"] }
+        const request = JSON.stringify({ command: [command, ...args] }) + '\n';
+
+        client.on('connect', () => {
+            console.log('Connected to MPV socket, sending command:', request);
+            client.write(request);
+            client.end();
+            resolve();
+        });
+
+        client.on('error', (err) => {
+            console.error('MPV socket error:', err);
+            reject(err);
+        });
+    });
+}
+
+ipcMain.handle(
+    'OPEN_MPV_PLAYER',
+    async (
+        event,
+        url: string,
+        title: string,
+        thumbnail?: string,
+        userAgent?: string,
+        referer?: string,
+        origin?: string,
+        contentInfo?: any,
+        startTime?: number,
+        headers?: Record<string, string>
+    ) => {
+        const session = externalPlayerSessions.beginSession({
+            player: 'mpv',
+            title,
+            thumbnail,
+            streamUrl: url,
+            contentInfo,
+        });
+
+        try {
+            const isFlatpak = isRunningInFlatpak();
+            const mpvLaunchContext = resolveExternalPlayerLaunchContext(
+                'mpv',
+                getMpvPath({ isFlatpak }),
+                { isFlatpak }
+            );
+            const requestedReuseInstance = store.get(MPV_REUSE_INSTANCE, false);
+            const reuseInstance = shouldReuseMpvInstance(
+                requestedReuseInstance,
+                isFlatpak
+            );
+            const useMpvSocketBridge = shouldUseMpvSocketBridge(isFlatpak);
+            const fallbackHeaders = getStalkerPlaybackContextHeaders(url) ?? {};
+            const mergedHeaders = isStalkerDirectStreamProfile(fallbackHeaders)
+                ? fallbackHeaders
+                : {
+                      ...fallbackHeaders,
+                      ...(headers ?? {}),
+                  };
+            const effectiveOrigin =
+                origin ??
+                mergedHeaders['Origin'] ??
+                mergedHeaders['origin'] ??
+                undefined;
+            const effectiveReferer =
+                referer ??
+                mergedHeaders['Referer'] ??
+                mergedHeaders['referer'] ??
+                undefined;
+            const effectiveUserAgent =
+                userAgent ??
+                mergedHeaders['User-Agent'] ??
+                mergedHeaders['user-agent'] ??
+                undefined;
+            const headerFields = buildHttpHeaderFields(
+                effectiveOrigin,
+                mergedHeaders
+            );
+
+            console.log('[MPV] Opening player', {
+                path: mpvLaunchContext.playerPath,
+                launchMode: mpvLaunchContext.mode,
+                requestedReuseInstance,
+                reuseInstance,
+                stream: maskUrlForLogs(url),
+                hasUserAgent: Boolean(effectiveUserAgent),
+                hasReferer: Boolean(effectiveReferer),
+                hasOrigin: Boolean(effectiveOrigin),
+                headerCount: headerFields.length,
+                hasContentInfo: Boolean(contentInfo),
+                startTime: startTime ?? null,
+            });
+
+            // If reuse is enabled and there's an existing process, try to use it
+            if (
+                reuseInstance &&
+                mpvProcess &&
+                !mpvProcess.killed &&
+                mpvSocketPath
+            ) {
+                console.log('Reusing existing MPV instance');
+                try {
+                    if (effectiveUserAgent) {
+                        await sendMpvCommand('set_property', [
+                            'user-agent',
+                            effectiveUserAgent,
+                        ]);
+                    }
+                    if (effectiveReferer) {
+                        await sendMpvCommand('set_property', [
+                            'referrer',
+                            effectiveReferer,
+                        ]);
+                    }
+                    if (headerFields.length > 0) {
+                        await sendMpvCommand('set_property', [
+                            'http-header-fields',
+                            headerFields.join(','),
+                        ]);
+                    }
+
+                    const loadFileArgs: Array<string | number> = [
+                        url,
+                        'replace',
+                    ];
+                    const loadFileOptions: string[] = [];
+
+                    // loadfile args are: url, flags, index, options
+                    // Index must be numeric; options are a comma-separated key=value list.
+                    if (title) {
+                        loadFileOptions.push(`force-media-title=${title}`);
+                    }
+                    if (loadFileOptions.length > 0) {
+                        loadFileArgs.push(-1, loadFileOptions.join(','));
+                    }
+
+                    await sendMpvCommand('loadfile', loadFileArgs);
+                    console.log(
+                        'Successfully loaded new URL in existing MPV instance'
+                    );
+
+                    externalPlayerSessions.attachCloser(session.id, async () => {
+                        try {
+                            await sendMpvCommand('quit', []);
+                        } catch {
+                            if (mpvProcess && !mpvProcess.killed) {
+                                mpvProcess.kill();
+                            }
+                        }
+                    });
+
+                    // Seek if startTime provided
+                    if (startTime) {
+                        await sendMpvCommand('seek', [
+                            String(startTime),
+                            'absolute',
+                        ]);
+                    }
+
+                    // Restart polling with new content info
+                    if (contentInfo) {
+                        startPositionPolling(
+                            mpvSocketPath,
+                            contentInfo,
+                            session.id
+                        );
+                    } else {
+                        stopPositionPolling();
+                    }
+
+                    return (
+                        externalPlayerSessions.markOpened(session.id) ?? session
+                    );
+                } catch (err) {
+                    console.error(
+                        'Failed to send command to existing MPV:',
+                        err
+                    );
+                    // If it fails, clear the reference and create a new one
+                    mpvProcess = null;
+                    mpvSocketPath = null;
+                    stopPositionPolling();
+                    // Fall through to create new instance
+                }
+            }
+
+            // Create new MPV process
+            console.log('Creating new MPV instance');
+
+            let socketPath: string | null = null;
+            const args: string[] = [];
+
+            if (useMpvSocketBridge) {
+                socketPath =
+                    process.platform === 'win32'
+                        ? `\\\\.\\pipe\\mpv-${Date.now()}`
+                        : `/tmp/mpvsocket-${Date.now()}`;
+                args.push(`--input-ipc-server=${socketPath}`, '--idle=yes');
+            }
+
+            // IPTV URLs often look like generic web pages to ytdl_hook and can fail with 403.
+            // Force MPV to open them directly instead of probing via yt-dlp/youtube-dl.
+            args.push('--ytdl=no');
+
+            // Add user agent if provided
+            if (effectiveUserAgent) {
+                args.push(`--user-agent=${effectiveUserAgent}`);
+            }
+
+            // Add referer if provided
+            if (effectiveReferer) {
+                args.push(`--referrer=${effectiveReferer}`);
+            }
+
+            if (headerFields.length > 0) {
+                args.push(`--http-header-fields=${headerFields.join(',')}`);
+            }
+
+            // Add title if provided
+            if (title) {
+                args.push(`--force-media-title=${title}`);
+            }
+
+            // Add start time if provided
+            if (startTime) {
+                args.push(`--start=${startTime}`);
+            }
+
+            // Add URL last
+            args.push(url);
+
+            // Wrap spawn in a promise to catch startup errors
+            await new Promise<void>((resolve, reject) => {
+                const spawnSpec = buildExternalPlayerSpawnSpec(
+                    mpvLaunchContext,
+                    args
+                );
+                const proc = spawn(spawnSpec.command, spawnSpec.args, {
+                    shell: false,
+                    detached: !reuseInstance,
+                    // Only pipe stdio when reusing instance; use 'ignore' for detached to allow clean shutdown
+                    stdio: reuseInstance
+                        ? ['ignore', 'pipe', 'pipe']
+                        : 'ignore',
+                });
+
+                // Capture stdout
+                if (proc.stdout) {
+                    proc.stdout.on('data', (data) => {
+                        const lines = data
+                            .toString()
+                            .split('\n')
+                            .map((line) => line.trim())
+                            .filter(Boolean);
+
+                        for (const output of lines) {
+                            if (shouldIgnoreMpvStdoutLine(output)) {
+                                continue;
+                            }
+
+                            console.log('[MPV stdout]:', output);
+
+                            // MPV sometimes outputs errors to stdout instead of stderr
+                            if (
+                                output.includes('Failed to open') ||
+                                output.includes('Error opening') ||
+                                output.includes('Protocol not found') ||
+                                output.includes('Connection refused') ||
+                                output.includes('error') ||
+                                output.includes('403') ||
+                                output.includes('404')
+                            ) {
+                                console.error(
+                                    '[MPV ERROR from stdout]:',
+                                    output
+                                );
+                                sendPlayerErrorNotification('MPV', output);
+                            }
+                        }
+                    });
+                }
+
+                // Capture stderr (MPV outputs most messages here)
+                if (proc.stderr) {
+                    proc.stderr.on('data', (data) => {
+                        const output = data.toString().trim();
+                        if (output) {
+                            console.error('[MPV stderr]:', output);
+
+                            // Check for common error patterns and send notifications
+                            if (
+                                output.includes('Failed to open') ||
+                                output.includes(
+                                    'Exiting... (Errors when loading file)'
+                                ) ||
+                                output.includes('Error opening') ||
+                                output.includes('Protocol not found') ||
+                                output.includes('Connection refused') ||
+                                output.includes('error') ||
+                                output.includes('403') ||
+                                output.includes('404')
+                            ) {
+                                console.error('[MPV ERROR]:', output);
+                                sendPlayerErrorNotification('MPV', output);
+                            }
+                        }
+                    });
+                }
+
+                proc.on('error', (err) => {
+                    console.error('Failed to start MPV player:', err);
+                    mpvProcess = null;
+                    mpvSocketPath = null;
+                    stopPositionPolling();
+                    externalPlayerSessions.markError(
+                        session.id,
+                        `Failed to start MPV player: ${err.message}`
+                    );
+                    reject(buildPlayerStartError('MPV', err, mpvLaunchContext));
+                });
+
+                proc.on('exit', (code) => {
+                    console.log(`MPV exited with code ${code}`);
+                    mpvProcess = null;
+                    mpvSocketPath = null;
+                    stopPositionPolling();
+
+                    // Log non-zero exit codes as errors and notify user
+                    if (code !== 0 && code !== null) {
+                        console.error(
+                            `[MPV ERROR] MPV exited with error code ${code}`
+                        );
+                        sendPlayerErrorNotification(
+                            'MPV',
+                            `MPV player closed unexpectedly (exit code: ${code})`
+                        );
+                        externalPlayerSessions.markError(
+                            session.id,
+                            `MPV player closed unexpectedly (exit code: ${code})`
+                        );
+                        return;
+                    }
+
+                    externalPlayerSessions.markClosed(session.id);
+                });
+
+                // Store the process reference if reuse is enabled
+                if (reuseInstance && socketPath) {
+                    mpvProcess = proc;
+                    mpvSocketPath = socketPath;
+                    console.log(
+                        'Stored MPV process for reuse with socket:',
+                        socketPath
+                    );
+                } else {
+                    // Detach the process so it can continue running independently
+                    proc.unref();
+                }
+
+                externalPlayerSessions.attachCloser(session.id, async () => {
+                    if (!proc.killed) {
+                        proc.kill();
+                    }
+                });
+
+                // Start polling if content info is provided
+                if (useMpvSocketBridge && contentInfo && socketPath) {
+                    startPositionPolling(socketPath, contentInfo, session.id);
+                }
+
+                // Resolve immediately if spawn succeeds (error event would fire if it fails)
+                // Give a small window to catch immediate spawn errors
+                setTimeout(() => {
+                    if (!proc.killed) {
+                        resolve();
+                    }
+                }, 100);
+            });
+
+            return externalPlayerSessions.markOpened(session.id) ?? session;
+        } catch (error) {
+            console.error('Error opening MPV player:', error);
+            mpvProcess = null;
+            mpvSocketPath = null;
+            stopPositionPolling();
+            externalPlayerSessions.markError(
+                session.id,
+                error instanceof Error ? error.message : String(error)
+            );
+            throw error;
+        }
+    }
+);
+
+ipcMain.handle('SET_MPV_PLAYER_PATH', (_event, mpvPlayerPath) => {
+    console.log('... setting mpv player path', mpvPlayerPath);
+    store.set(MPV_PLAYER_PATH, mpvPlayerPath);
+});
+
+ipcMain.handle('SET_MPV_REUSE_INSTANCE', (_event, reuseInstance: boolean) => {
+    console.log('... setting mpv reuse instance', reuseInstance);
+    store.set(MPV_REUSE_INSTANCE, reuseInstance);
+
+    // If disabling reuse, kill the existing process
+    if (!reuseInstance && mpvProcess && !mpvProcess.killed) {
+        console.log('Disabling reuse, cleaning up existing MPV process');
+        mpvProcess.kill();
+        mpvProcess = null;
+        mpvSocketPath = null;
+    }
+});
+
+ipcMain.handle(
+    'OPEN_VLC_PLAYER',
+    async (
+        event,
+        url: string,
+        title: string,
+        thumbnail?: string,
+        userAgent?: string,
+        referer?: string,
+        origin?: string,
+        contentInfo?: any,
+        startTime?: number,
+        headers?: Record<string, string>
+    ) => {
+        const session = externalPlayerSessions.beginSession({
+            player: 'vlc',
+            title,
+            thumbnail,
+            streamUrl: url,
+            contentInfo,
+        });
+
+        try {
+            const isFlatpak = isRunningInFlatpak();
+            const vlcLaunchContext = resolveExternalPlayerLaunchContext(
+                'vlc',
+                getVlcPath({ isFlatpak }),
+                { isFlatpak }
+            );
+            const fallbackHeaders = getStalkerPlaybackContextHeaders(url) ?? {};
+            const mergedHeaders = isStalkerDirectStreamProfile(fallbackHeaders)
+                ? fallbackHeaders
+                : {
+                      ...fallbackHeaders,
+                      ...(headers ?? {}),
+                  };
+            const effectiveOrigin =
+                origin ??
+                mergedHeaders['Origin'] ??
+                mergedHeaders['origin'] ??
+                undefined;
+            const effectiveReferer =
+                referer ??
+                mergedHeaders['Referer'] ??
+                mergedHeaders['referer'] ??
+                undefined;
+            const effectiveUserAgent =
+                userAgent ??
+                mergedHeaders['User-Agent'] ??
+                mergedHeaders['user-agent'] ??
+                undefined;
+            console.log('Opening VLC player with path:', vlcLaunchContext.playerPath);
+            console.log('VLC launch mode:', vlcLaunchContext.mode);
+            console.log('URL:', url);
+            // console.log('User-Agent:', userAgent);
+            // console.log('Referer:', referer);
+            // console.log('Origin:', origin);
+            // console.log('Start Time:', startTime);
+
+            // Get free port for RC interface
+            let rcPort = 0;
+            if (contentInfo) {
+                try {
+                    rcPort = await getFreePort();
+                    console.log('Using VLC RC port:', rcPort);
+                } catch (e) {
+                    console.error('Failed to get free port for VLC:', e);
+                }
+            }
+
+            const args: string[] = [];
+
+            if (rcPort > 0) {
+                args.push('--extraintf=rc');
+                args.push(`--rc-host=127.0.0.1:${rcPort}`);
+                // args.push('--rc-quiet'); // Suppress status messages in stdout
+            }
+
+            // Add user agent if provided (VLC uses :http-user-agent= format)
+            if (effectiveUserAgent) {
+                args.push(`:http-user-agent=${effectiveUserAgent}`);
+            }
+
+            // Add referer if provided (VLC uses :http-referrer= format)
+            if (effectiveReferer) {
+                args.push(`:http-referrer=${effectiveReferer}`);
+            }
+
+            // Note: VLC doesn't have a direct origin option, but origin is typically
+            // included in referer for most IPTV use cases
+            if (effectiveOrigin && !effectiveReferer) {
+                args.push(`:http-referrer=${effectiveOrigin}`);
+            }
+
+            if (Object.keys(mergedHeaders).length > 0) {
+                Object.entries(mergedHeaders).forEach(([name, value]) => {
+                    if (!name || value === undefined || value === null) return;
+                    const trimmedValue = String(value).trim();
+                    if (!trimmedValue) return;
+                    args.push(`:http-header=${name}: ${trimmedValue}`);
+                });
+            }
+
+            // Add start time if provided
+            if (startTime) {
+                args.push(`--start-time=${startTime}`);
+            }
+
+            // Add URL and per-input options last
+            args.push(url);
+            if (title) {
+                args.push(`:meta-title=${title}`);
+            }
+
+            console.log('VLC Args:', args);
+            let lastVlcSnapshot: ExternalPlaybackSnapshot | null = null;
+
+            // Wrap spawn in a promise to catch startup errors
+            await new Promise<void>((resolve, reject) => {
+                const spawnVlc = (playerArgs: string[], isRetry = false) => {
+                    const spawnSpec = buildExternalPlayerSpawnSpec(
+                        vlcLaunchContext,
+                        playerArgs
+                    );
+                    const proc = spawn(spawnSpec.command, spawnSpec.args, {
+                        shell: false,
+                        detached: true,
+                        stdio: 'ignore', // Use 'ignore' for detached to allow clean shutdown
+                    });
+
+                    const markVlcSessionClosed = () => {
+                        if (
+                            externalPlayerSessions.getSession(session.id)?.status ===
+                            'closed'
+                        ) {
+                            return;
+                        }
+
+                        if (lastVlcSnapshot && contentInfo) {
+                            sendPlaybackPositionUpdate(
+                                session.id,
+                                contentInfo,
+                                lastVlcSnapshot
+                            );
+                        }
+
+                        externalPlayerSessions.markClosed(session.id);
+                    };
+
+                    const flushVlcPlaybackPosition = async () => {
+                        if (isRetry || rcPort <= 0 || !contentInfo) {
+                            return;
+                        }
+
+                        const snapshot =
+                            (await getVlcPlaybackSnapshot(rcPort)) ??
+                            lastVlcSnapshot;
+                        if (!snapshot) {
+                            return;
+                        }
+
+                        lastVlcSnapshot = snapshot;
+                        sendPlaybackPositionUpdate(
+                            session.id,
+                            contentInfo,
+                            snapshot
+                        );
+                    };
+
+                    externalPlayerSessions.attachCloser(session.id, async () => {
+                        await flushVlcPlaybackPosition();
+                        if (!proc.killed) {
+                            proc.kill();
+                        }
+                    });
+
+                    // Start polling if we have port and content info and NOT retrying (RC disabled on retry)
+                        if (!isRetry && rcPort > 0 && contentInfo) {
+                            startVlcPositionPolling(
+                                rcPort,
+                                contentInfo,
+                                session.id,
+                                (snapshot) => {
+                                    lastVlcSnapshot = snapshot;
+                                },
+                                () => {
+                                    markVlcSessionClosed();
+                                }
+                            );
+                        }
+
+                    // Capture stdout
+                    if (proc.stdout) {
+                        proc.stdout.on('data', (data) => {
+                            const output = data.toString().trim();
+                            if (output) {
+                                console.log('[VLC stdout]:', output);
+                            }
+                        });
+                    }
+
+                    // Capture stderr
+                    if (proc.stderr) {
+                        proc.stderr.on('data', (data) => {
+                            const output = data.toString().trim();
+                            if (output) {
+                                console.error('[VLC stderr]:', output);
+                            }
+                        });
+                    }
+
+                    proc.on('error', (err) => {
+                        console.error('Failed to start VLC player:', err);
+                        if (!isRetry && rcPort > 0) {
+                            console.log('Retrying VLC without RC interface...');
+                            // Retry without RC args
+                            const retryArgs = playerArgs.filter(
+                                (arg) =>
+                                    !arg.includes('--extraintf') &&
+                                    !arg.includes('--rc-host') &&
+                                    !arg.includes('--rc-quiet')
+                            );
+                            spawnVlc(retryArgs, true);
+                        } else {
+                            externalPlayerSessions.markError(
+                                session.id,
+                                `Failed to start VLC player: ${err.message}`
+                            );
+                            reject(
+                                buildPlayerStartError(
+                                    'VLC',
+                                    err,
+                                    vlcLaunchContext
+                                )
+                            );
+                        }
+                    });
+
+                    proc.on('exit', (code) => {
+                        console.log(`VLC exited with code ${code}`);
+                        stopVlcPositionPolling();
+
+                        if (
+                            lastVlcSnapshot &&
+                            contentInfo &&
+                            externalPlayerSessions.getSession(session.id)
+                                ?.status !== 'closed'
+                        ) {
+                            sendPlaybackPositionUpdate(
+                                session.id,
+                                contentInfo,
+                                lastVlcSnapshot
+                            );
+                        }
+
+                        if (code === 1 && !isRetry && rcPort > 0) {
+                            console.log(
+                                'VLC exited with error, retrying without RC interface...'
+                            );
+                            stopVlcPositionPolling();
+                            const retryArgs = playerArgs.filter(
+                                (arg) =>
+                                    !arg.includes('--extraintf') &&
+                                    !arg.includes('--rc-host') &&
+                                    !arg.includes('--rc-quiet')
+                            );
+                            spawnVlc(retryArgs, true);
+                            return;
+                        }
+
+                        // Log non-zero exit codes as errors and notify user
+                        if (code !== 0 && code !== null) {
+                            console.error(
+                                `[VLC ERROR] VLC exited with error code ${code}`
+                            );
+                            sendPlayerErrorNotification(
+                                'VLC',
+                                `VLC player closed unexpectedly (exit code: ${code})`
+                            );
+                            externalPlayerSessions.markError(
+                                session.id,
+                                `VLC player closed unexpectedly (exit code: ${code})`
+                            );
+                            return;
+                        }
+
+                        externalPlayerSessions.markClosed(session.id);
+                    });
+
+                    proc.unref();
+                };
+
+                spawnVlc(args);
+                resolve();
+            });
+
+            return externalPlayerSessions.markOpened(session.id) ?? session;
+        } catch (error) {
+            console.error('Error opening VLC player:', error);
+            externalPlayerSessions.markError(
+                session.id,
+                error instanceof Error ? error.message : String(error)
+            );
+            throw error;
+        }
+    }
+);
+
+ipcMain.handle('SET_VLC_PLAYER_PATH', (_event, vlcPlayerPath) => {
+    console.log('... setting vlc player path', vlcPlayerPath);
+    store.set(VLC_PLAYER_PATH, vlcPlayerPath);
+});
+
+ipcMain.handle(
+    CLOSE_EXTERNAL_PLAYER_SESSION,
+    async (_event, sessionId: string) => {
+        return externalPlayerSessions.closeSession(sessionId);
+    }
+);
+
+function getMpvPath(options: PlayerPathOptions = {}) {
+    return (
+        normalizeCustomPlayerPath(store.get(MPV_PLAYER_PATH)) ??
+        getDefaultMpvPath(options)
+    );
+}
+
+function getVlcPath(options: PlayerPathOptions = {}) {
+    return (
+        normalizeCustomPlayerPath(store.get(VLC_PLAYER_PATH)) ??
+        getDefaultVlcPath(options)
+    );
+}
+
+/** VLC shipped next to the app (electron-builder extraResources → resources/vlc). */
+function getBundledVlcPathWin(pathExists: PathExists): string | null {
+    if (process.platform !== 'win32') {
+        return null;
+    }
+    try {
+        if (app?.isPackaged && process.resourcesPath) {
+            const bundled = path.join(process.resourcesPath, 'vlc', 'vlc.exe');
+            if (pathExists(bundled)) {
+                return bundled;
+            }
+        }
+    } catch {
+        // app may not be ready in edge startup paths
+    }
+    return null;
+}
+
+function getDefaultMpvPath(options: PlayerPathOptions = {}) {
+    const {
+        platform = process.platform,
+        isFlatpak = isRunningInFlatpak(),
+        pathExists = existsSync,
+    } = options;
+
+    if (platform === 'linux' && isFlatpak) {
+        return 'mpv';
+    }
+
+    if (platform === 'win32') {
+        // Check multiple common Windows paths
+        const windowsPaths = [
+            path.join('C:', 'Program Files', 'mpv', 'mpv.exe'),
+            path.join('C:', 'Program Files (x86)', 'mpv', 'mpv.exe'),
+        ];
+
+        // Check if any of the paths exist
+        for (const mpvPath of windowsPaths) {
+            if (pathExists(mpvPath)) {
+                return mpvPath;
+            }
+        }
+        // Default to just 'mpv' if it's in PATH
+        return 'mpv';
+    } else if (platform === 'linux') {
+        // Check multiple common Linux paths
+        const linuxPaths = [
+            '/usr/bin/mpv',
+            '/usr/local/bin/mpv',
+            '/snap/bin/mpv',
+        ];
+
+        for (const mpvPath of linuxPaths) {
+            if (pathExists(mpvPath)) {
+                return mpvPath;
+            }
+        }
+        return 'mpv';
+    } else if (platform === 'darwin') {
+        // Check multiple common macOS paths
+        const macosPaths = [
+            '/Applications/mpv.app/Contents/MacOS/mpv',
+            '/opt/homebrew/bin/mpv',
+            '/usr/local/bin/mpv',
+        ];
+
+        for (const mpvPath of macosPaths) {
+            if (pathExists(mpvPath)) {
+                return mpvPath;
+            }
+        }
+        return 'mpv';
+    }
+
+    // Fallback to just 'mpv' hoping it's in PATH
+    return 'mpv';
+}
+
+function getDefaultVlcPath(options: PlayerPathOptions = {}) {
+    const {
+        platform = process.platform,
+        isFlatpak = isRunningInFlatpak(),
+        pathExists = existsSync,
+    } = options;
+
+    if (platform === 'linux' && isFlatpak) {
+        return 'vlc';
+    }
+
+    if (platform === 'win32') {
+        const bundled = getBundledVlcPathWin(pathExists);
+        if (bundled) {
+            return bundled;
+        }
+        // Check multiple common Windows paths (64-bit and 32-bit)
+        const windowsPaths = [
+            path.join('C:', 'Program Files', 'VideoLAN', 'VLC', 'vlc.exe'),
+            path.join(
+                'C:',
+                'Program Files (x86)',
+                'VideoLAN',
+                'VLC',
+                'vlc.exe'
+            ),
+        ];
+
+        for (const vlcPath of windowsPaths) {
+            if (pathExists(vlcPath)) {
+                return vlcPath;
+            }
+        }
+        return 'vlc';
+    } else if (platform === 'linux') {
+        // Check multiple common Linux paths
+        const linuxPaths = [
+            '/usr/bin/vlc',
+            '/usr/local/bin/vlc',
+            '/snap/bin/vlc',
+        ];
+
+        for (const vlcPath of linuxPaths) {
+            if (pathExists(vlcPath)) {
+                return vlcPath;
+            }
+        }
+        return 'vlc';
+    } else if (platform === 'darwin') {
+        // Check multiple common macOS paths
+        const macosPaths = [
+            '/Applications/VLC.app/Contents/MacOS/VLC',
+            '/opt/homebrew/Caskroom/vlc/*/VLC.app/Contents/MacOS/VLC',
+        ];
+
+        for (const vlcPath of macosPaths) {
+            if (pathExists(vlcPath)) {
+                return vlcPath;
+            }
+        }
+        return 'vlc';
+    }
+    return 'vlc';
+}
+
+function getFreePort(): Promise<number> {
+    return new Promise((resolve, reject) => {
+        const server = createServer();
+        server.unref();
+        server.on('error', reject);
+        server.listen(0, '127.0.0.1', () => {
+            const address = server.address() as AddressInfo;
+            const port = address.port;
+            server.close(() => {
+                resolve(port);
+            });
+        });
+    });
+}
diff --git a/apps/electron-backend/src/app/events/playlist.events.ts b/apps/electron-backend/src/app/events/playlist.events.ts
new file mode 100644
index 0000000..c0035df
--- /dev/null
+++ b/apps/electron-backend/src/app/events/playlist.events.ts
@@ -0,0 +1,361 @@
+/**
+ * This module is responsible on handling all the inter process communications
+ * between the frontend to the electron backend.
+ */
+
+import axios from 'axios';
+import { app, dialog, ipcMain, WebContents } from 'electron';
+import { parse } from 'iptv-playlist-parser';
+import { createPlaylistObject, getFilenameFromUrl } from 'm3u-utils';
+import { readFile, writeFile } from 'node:fs/promises';
+import { basename } from 'node:path';
+import { pathToFileURL } from 'url';
+import { Worker } from 'worker_threads';
+import {
+    AUTO_UPDATE_PLAYLISTS,
+    PLAYLIST_CANCEL_REFRESH,
+    PLAYLIST_REFRESH,
+    PLAYLIST_REFRESH_EVENT,
+    Playlist,
+    PlaylistRefreshEvent,
+    PlaylistRefreshPayload,
+} from 'shared-interfaces';
+import { resolveWorkerRuntimeBootstrap } from '../workers/worker-runtime-paths';
+import type {
+    PlaylistRefreshWorkerMessage,
+    PlaylistRefreshWorkerResponseMessage,
+} from '../workers/playlist-refresh.worker.types';
+
+export default class PlaylistEvents {
+    static bootstrapPlaylistEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
+
+const https = require('https');
+
+type ActivePlaylistRefresh = {
+    reject: (reason?: unknown) => void;
+    resolve: (value: Playlist) => void;
+    sender: WebContents;
+    worker: Worker;
+};
+
+const activePlaylistRefreshes = new Map<string, ActivePlaylistRefresh>();
+
+/**
+ * Fetches and parses a playlist from a URL
+ * @param url - The URL to fetch the playlist from
+ * @param title - Optional title for the playlist
+ * @returns Parsed playlist object
+ */
+async function fetchPlaylistFromUrl(
+    url: string,
+    title?: string
+): Promise<any> {
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+    const result = await axios.get(url, { httpsAgent: agent });
+    const parsedPlaylist = parse(result.data);
+
+    const extractedName =
+        url && url.length > 1 ? getFilenameFromUrl(url) : '';
+    const playlistName =
+        !extractedName || extractedName === 'Untitled playlist'
+            ? 'Imported from URL'
+            : extractedName;
+
+    const playlistObject = createPlaylistObject(
+        title ?? playlistName,
+        parsedPlaylist,
+        url,
+        'URL'
+    );
+
+    return playlistObject;
+}
+
+/**
+ * Reads and parses a playlist from a file path
+ * @param filePath - The path to the playlist file
+ * @param title - Title for the playlist
+ * @returns Parsed playlist object
+ */
+async function fetchPlaylistFromFile(
+    filePath: string,
+    title: string
+): Promise<any> {
+    const fileContent = await readFile(filePath, 'utf-8');
+    const parsedPlaylist = parse(fileContent);
+    const playlistObject = createPlaylistObject(
+        title,
+        parsedPlaylist,
+        filePath,
+        'FILE'
+    );
+    return playlistObject;
+}
+
+function resolvePlaylistRefreshWorker(): Worker {
+    const bootstrap = resolveWorkerRuntimeBootstrap({
+        isPackaged: app.isPackaged,
+        workerFilename: 'playlist-refresh.worker.js',
+        developmentWorkerDir: __dirname + '/workers',
+        resourcesPath: (
+            process as NodeJS.Process & { resourcesPath?: string }
+        ).resourcesPath,
+        appPath: app.getAppPath(),
+    });
+
+    return new Worker(pathToFileURL(bootstrap.workerPath), {
+        workerData: {
+            nativeModuleSearchPaths: bootstrap.nativeModuleSearchPaths,
+        },
+    });
+}
+
+function emitPlaylistRefreshEvent(
+    sender: WebContents,
+    event: PlaylistRefreshEvent
+): void {
+    if (sender.isDestroyed()) {
+        return;
+    }
+
+    sender.send(PLAYLIST_REFRESH_EVENT, event);
+}
+
+function createPlaylistRefreshError(error: {
+    message: string;
+    name?: string;
+    stack?: string;
+}): Error {
+    const workerError = new Error(error.message);
+    workerError.name = error.name || 'PlaylistRefreshWorkerError';
+    workerError.stack = error.stack || workerError.stack;
+    return workerError;
+}
+
+ipcMain.handle('fetch-playlist-by-url', async (event, url, title?: string) => {
+    try {
+        return await fetchPlaylistFromUrl(url, title);
+    } catch (error) {
+        console.error('Error fetching playlist:', error);
+        throw error;
+    }
+});
+
+ipcMain.handle(
+    'update-playlist-from-file-path',
+    async (event, filePath, title) => {
+        try {
+            return await fetchPlaylistFromFile(filePath, title);
+        } catch (error) {
+            console.error('Error reading playlist from file:', error);
+            throw error;
+        }
+    }
+);
+
+ipcMain.handle('open-playlist-from-file', async () => {
+    const { canceled, filePaths } = await dialog.showOpenDialog({
+        properties: ['openFile'],
+        filters: [
+            { name: 'Playlists', extensions: ['m3u', 'm3u8', 'pls', 'txt'] },
+            { name: 'All Files', extensions: ['*'] },
+        ],
+    });
+
+    if (canceled || filePaths.length === 0) {
+        console.log('User canceled file open dialog.');
+        return null;
+    }
+
+    const filePath = filePaths[0];
+
+    try {
+        // Extract filename from path and remove extension for a clean title
+        const filename = basename(filePath);
+        const title = filename.replace(/\.(m3u8?|pls|txt)$/i, '') || 'from file';
+
+        return await fetchPlaylistFromFile(filePath, title);
+    } catch (error) {
+        console.error('Error reading or parsing the file:', error);
+        throw new Error('Failed to process the selected file.');
+    }
+});
+
+ipcMain.handle(AUTO_UPDATE_PLAYLISTS, async (event, playlists) => {
+    console.log(`Auto-updating ${playlists.length} playlist(s)...`);
+
+    const updatedPlaylists = [];
+
+    for (const playlist of playlists) {
+        try {
+            let playlistObject;
+
+            if (playlist.importDate && playlist.url) {
+                // Update from URL
+                console.log(
+                    `Updating playlist "${playlist.title}" from URL: ${playlist.url}`
+                );
+                playlistObject = await fetchPlaylistFromUrl(
+                    playlist.url,
+                    playlist.title
+                );
+            } else if (playlist.filePath) {
+                // Update from file path
+                console.log(
+                    `Updating playlist "${playlist.title}" from file: ${playlist.filePath}`
+                );
+                playlistObject = await fetchPlaylistFromFile(
+                    playlist.filePath,
+                    playlist.title
+                );
+            } else {
+                console.warn(
+                    `Skipping playlist "${playlist.title}": no URL or file path found`
+                );
+                continue;
+            }
+
+            // Preserve user data when updating playlist
+            updatedPlaylists.push({
+                ...playlistObject,
+                _id: playlist._id,
+                autoRefresh: playlist.autoRefresh,
+                favorites: playlist.favorites || [], // Preserve favorites
+                userAgent: playlist.userAgent, // Preserve custom user agent
+            });
+
+            console.log(`Successfully updated playlist "${playlist.title}"`);
+        } catch (error) {
+            console.error(
+                `Failed to update playlist "${playlist.title}":`,
+                error
+            );
+            // Continue with other playlists even if one fails
+        }
+    }
+
+    console.log(`Auto-update completed: ${updatedPlaylists.length} updated`);
+    return updatedPlaylists;
+});
+
+ipcMain.handle(PLAYLIST_REFRESH, async (event, payload: PlaylistRefreshPayload) => {
+    const worker = resolvePlaylistRefreshWorker();
+
+    return await new Promise<Playlist>((resolve, reject) => {
+        const cleanup = async (): Promise<void> => {
+            activePlaylistRefreshes.delete(payload.operationId);
+            worker.removeAllListeners();
+            await worker.terminate().catch(() => undefined);
+        };
+
+        activePlaylistRefreshes.set(payload.operationId, {
+            worker,
+            sender: event.sender,
+            resolve,
+            reject,
+        });
+
+        worker.on('message', async (message: PlaylistRefreshWorkerMessage<Playlist>) => {
+            if (message.type === 'ready') {
+                worker.postMessage({
+                    type: 'request',
+                    payload,
+                });
+                return;
+            }
+
+            if (message.type === 'event') {
+                emitPlaylistRefreshEvent(event.sender, message.event);
+                return;
+            }
+
+            await cleanup();
+
+            const response = message as PlaylistRefreshWorkerResponseMessage<Playlist>;
+            if (response.success && response.result) {
+                resolve(response.result);
+                return;
+            }
+
+            reject(
+                createPlaylistRefreshError(
+                    response.error ?? {
+                        message: 'Playlist refresh worker request failed',
+                    }
+                )
+            );
+        });
+
+        worker.on('error', async (error) => {
+            await cleanup();
+            reject(error);
+        });
+
+        worker.on('exit', async (code) => {
+            if (!activePlaylistRefreshes.has(payload.operationId)) {
+                return;
+            }
+
+            await cleanup();
+            reject(
+                new Error(
+                    code === 0
+                        ? 'Playlist refresh worker exited unexpectedly'
+                        : `Playlist refresh worker stopped with exit code ${code}`
+                )
+            );
+        });
+    });
+});
+
+ipcMain.handle(
+    PLAYLIST_CANCEL_REFRESH,
+    async (_event, operationId: string): Promise<{ success: boolean }> => {
+        const activeRefresh = activePlaylistRefreshes.get(operationId);
+        if (!activeRefresh) {
+            return { success: false };
+        }
+
+        activeRefresh.worker.postMessage({
+            type: 'cancel',
+            operationId,
+        });
+
+        return { success: true };
+    }
+);
+
+ipcMain.handle('save-file-dialog', async (event, defaultPath, filters) => {
+    try {
+        const { canceled, filePath } = await dialog.showSaveDialog({
+            defaultPath,
+            filters: filters || [
+                { name: 'All Files', extensions: ['*'] },
+            ],
+        });
+
+        if (canceled || !filePath) {
+            return null;
+        }
+
+        return filePath;
+    } catch (error) {
+        console.error('Error showing save dialog:', error);
+        throw error;
+    }
+});
+
+ipcMain.handle('write-file', async (event, filePath, content) => {
+    try {
+        await writeFile(filePath, content, 'utf-8');
+        return { success: true };
+    } catch (error) {
+        console.error('Error writing file:', error);
+        throw error;
+    }
+});
diff --git a/apps/electron-backend/src/app/events/portal-debug.events.spec.ts b/apps/electron-backend/src/app/events/portal-debug.events.spec.ts
new file mode 100644
index 0000000..9912c78
--- /dev/null
+++ b/apps/electron-backend/src/app/events/portal-debug.events.spec.ts
@@ -0,0 +1,90 @@
+jest.mock('electron', () => ({
+    BrowserWindow: {
+        getAllWindows: () => [],
+    },
+}));
+
+jest.mock('../../environments/environment', () => ({
+    environment: {
+        production: false,
+    },
+}));
+
+import { sanitizePortalDebugEvent } from './portal-debug.events';
+
+describe('sanitizePortalDebugEvent', () => {
+    it('turns Error objects into plain serializable data', () => {
+        const error = new Error('boom');
+        (error as Error & { code?: string }).code = 'ECONNREFUSED';
+
+        const event = sanitizePortalDebugEvent({
+            requestId: 'req-1',
+            provider: 'xtream',
+            operation: 'get_account_info',
+            transport: 'electron-main',
+            startedAt: new Date().toISOString(),
+            durationMs: 12,
+            status: 'error',
+            request: { url: 'http://localhost:3211/player_api.php' },
+            error,
+        });
+
+        expect(event.error).toEqual(
+            expect.objectContaining({
+                name: 'Error',
+                message: 'boom',
+                code: 'ECONNREFUSED',
+            })
+        );
+    });
+
+    it('replaces circular references with markers', () => {
+        const request: Record<string, unknown> = {
+            method: 'GET',
+        };
+        request['self'] = request;
+
+        const event = sanitizePortalDebugEvent({
+            requestId: 'req-2',
+            provider: 'stalker',
+            operation: 'get_profile',
+            transport: 'electron-main',
+            startedAt: new Date().toISOString(),
+            durationMs: 4,
+            status: 'success',
+            request,
+            response: { ok: true },
+        });
+
+        expect(event.request).toEqual({
+            method: 'GET',
+            self: '[Circular]',
+        });
+    });
+
+    it('strips functions from nested debug payloads', () => {
+        const event = sanitizePortalDebugEvent({
+            requestId: 'req-3',
+            provider: 'xtream',
+            operation: 'test',
+            transport: 'electron-main',
+            startedAt: new Date().toISOString(),
+            durationMs: 1,
+            status: 'success',
+            request: {
+                headers: {
+                    Accept: 'application/json',
+                    toJSON: () => 'nope',
+                },
+            },
+            response: undefined,
+        });
+
+        expect(event.request).toEqual({
+            headers: {
+                Accept: 'application/json',
+                toJSON: undefined,
+            },
+        });
+    });
+});
diff --git a/apps/electron-backend/src/app/events/portal-debug.events.ts b/apps/electron-backend/src/app/events/portal-debug.events.ts
new file mode 100644
index 0000000..c1acfd2
--- /dev/null
+++ b/apps/electron-backend/src/app/events/portal-debug.events.ts
@@ -0,0 +1,128 @@
+import { BrowserWindow } from 'electron';
+import { PORTAL_DEBUG_EVENT, PortalDebugEvent } from 'shared-interfaces';
+import { environment } from '../../environments/environment';
+
+const MAX_DEBUG_DEPTH = 6;
+
+function sanitizePortalDebugValue(
+    value: unknown,
+    seen = new WeakSet<object>(),
+    depth = 0
+): unknown {
+    if (
+        value == null ||
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean'
+    ) {
+        return value;
+    }
+
+    if (typeof value === 'bigint') {
+        return value.toString();
+    }
+
+    if (
+        typeof value === 'function' ||
+        typeof value === 'symbol'
+    ) {
+        return undefined;
+    }
+
+    if (depth >= MAX_DEBUG_DEPTH) {
+        return '[MaxDepth]';
+    }
+
+    if (value instanceof Error) {
+        const baseError = {
+            name: value.name,
+            message: value.message,
+            stack: value.stack,
+        } as Record<string, unknown>;
+
+        for (const [key, entry] of Object.entries(
+            value as unknown as Record<string, unknown>
+        )) {
+            baseError[key] = sanitizePortalDebugValue(
+                entry,
+                seen,
+                depth + 1
+            );
+        }
+
+        return baseError;
+    }
+
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+
+    if (value instanceof URL) {
+        return value.toString();
+    }
+
+    if (Array.isArray(value)) {
+        return value.map((entry) =>
+            sanitizePortalDebugValue(entry, seen, depth + 1)
+        );
+    }
+
+    if (value instanceof Map) {
+        return Object.fromEntries(
+            [...value.entries()].map(([key, entry]) => [
+                String(key),
+                sanitizePortalDebugValue(entry, seen, depth + 1),
+            ])
+        );
+    }
+
+    if (value instanceof Set) {
+        return [...value].map((entry) =>
+            sanitizePortalDebugValue(entry, seen, depth + 1)
+        );
+    }
+
+    if (typeof value === 'object') {
+        if (seen.has(value)) {
+            return '[Circular]';
+        }
+
+        seen.add(value);
+
+        const entries = Object.entries(value as Record<string, unknown>).map(
+            ([key, entry]) => [
+                key,
+                sanitizePortalDebugValue(entry, seen, depth + 1),
+            ]
+        );
+
+        seen.delete(value);
+
+        return Object.fromEntries(entries);
+    }
+
+    return String(value);
+}
+
+export function sanitizePortalDebugEvent(
+    event: PortalDebugEvent
+): PortalDebugEvent {
+    return {
+        ...event,
+        request: sanitizePortalDebugValue(event.request),
+        response: sanitizePortalDebugValue(event.response),
+        error: sanitizePortalDebugValue(event.error),
+    };
+}
+
+export function emitPortalDebugEvent(event: PortalDebugEvent): void {
+    if (environment.production) {
+        return;
+    }
+
+    const serializedEvent = sanitizePortalDebugEvent(event);
+    const windows = BrowserWindow.getAllWindows();
+    for (const window of windows) {
+        window.webContents.send(PORTAL_DEBUG_EVENT, serializedEvent);
+    }
+}
diff --git a/apps/electron-backend/src/app/events/remote-control.events.ts b/apps/electron-backend/src/app/events/remote-control.events.ts
new file mode 100644
index 0000000..366284a
--- /dev/null
+++ b/apps/electron-backend/src/app/events/remote-control.events.ts
@@ -0,0 +1,311 @@
+import { BrowserWindow, ipcMain } from 'electron';
+import * as http from 'http';
+import { httpServer } from '../server/http-server';
+import { store } from '../services/store.service';
+
+interface RemoteControlCommand {
+    type:
+        | 'channel-select-number'
+        | 'volume-up'
+        | 'volume-down'
+        | 'volume-toggle-mute';
+    number?: number;
+}
+
+interface RemoteControlStatus {
+    portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
+    isLiveView: boolean;
+    channelName?: string;
+    channelNumber?: number;
+    epgTitle?: string;
+    epgStart?: string;
+    epgEnd?: string;
+    supportsVolume?: boolean;
+    volume?: number;
+    muted?: boolean;
+    updatedAt?: string;
+}
+
+class RemoteControlEvents {
+    private remoteControlStatus: RemoteControlStatus = {
+        portal: 'unknown',
+        isLiveView: false,
+        supportsVolume: false,
+        updatedAt: new Date().toISOString(),
+    };
+
+    /**
+     * Bootstrap remote control events
+     */
+    bootstrapRemoteControlEvents(): void {
+        // Register HTTP API endpoints
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/channel/up',
+            this.handleChannelUp.bind(this)
+        );
+
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/channel/down',
+            this.handleChannelDown.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/channel/select-number',
+            this.handleChannelSelectNumber.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/volume/up',
+            this.handleVolumeUp.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/volume/down',
+            this.handleVolumeDown.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/volume/toggle-mute',
+            this.handleToggleMute.bind(this)
+        );
+        httpServer.registerRemoteControlHandler(
+            '/api/remote-control/status',
+            this.handleGetStatus.bind(this)
+        );
+
+        // Start HTTP server if remote control is enabled in settings
+        const remoteControlEnabled = store.get('remoteControl', false);
+        const remoteControlPort = store.get('remoteControlPort', 8765);
+        if (remoteControlEnabled) {
+            httpServer.start(remoteControlPort);
+        }
+
+        // Register IPC handlers (for when the main app wants to use remote control)
+        ipcMain.handle('REMOTE_CONTROL_CHANNEL_UP', () => {
+            return this.changeChannelUp();
+        });
+
+        ipcMain.handle('REMOTE_CONTROL_CHANNEL_DOWN', () => {
+            return this.changeChannelDown();
+        });
+
+        ipcMain.on(
+            'REMOTE_CONTROL_STATUS_UPDATE',
+            (_event, status: Partial<RemoteControlStatus>) => {
+                this.remoteControlStatus = {
+                    ...this.remoteControlStatus,
+                    ...status,
+                    updatedAt: new Date().toISOString(),
+                };
+            }
+        );
+    }
+
+    /**
+     * HTTP handler for channel up
+     */
+    private handleChannelUp(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.changeChannelUp();
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    /**
+     * HTTP handler for channel down
+     */
+    private handleChannelDown(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.changeChannelDown();
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    /**
+     * HTTP handler for selecting channel by number
+     */
+    private handleChannelSelectNumber(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.readJsonBody(req, res, (body) => {
+            const value = Number(body?.number);
+            if (!Number.isFinite(value) || value < 1) {
+                res.writeHead(400, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Invalid channel number' }));
+                return;
+            }
+
+            this.sendRemoteCommandToRenderer({
+                type: 'channel-select-number',
+                number: Math.floor(value),
+            });
+
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ success: true }));
+        });
+    }
+
+    private handleVolumeUp(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.sendRemoteCommandToRenderer({ type: 'volume-up' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    private handleVolumeDown(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.sendRemoteCommandToRenderer({ type: 'volume-down' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    private handleToggleMute(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'POST') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        this.sendRemoteCommandToRenderer({ type: 'volume-toggle-mute' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true }));
+    }
+
+    private handleGetStatus(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        if (req.method !== 'GET') {
+            res.writeHead(405, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Method not allowed' }));
+            return;
+        }
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify(this.remoteControlStatus));
+    }
+
+    /**
+     * Change to the next channel
+     */
+    private changeChannelUp(): void {
+        console.log('Channel UP requested');
+        this.sendChannelChangeToRenderer('up');
+    }
+
+    /**
+     * Change to the previous channel
+     */
+    private changeChannelDown(): void {
+        console.log('Channel DOWN requested');
+        this.sendChannelChangeToRenderer('down');
+    }
+
+    /**
+     * Send channel change message to the renderer process
+     */
+    private sendChannelChangeToRenderer(direction: 'up' | 'down'): void {
+        const windows = BrowserWindow.getAllWindows();
+        if (windows.length > 0) {
+            windows[0].webContents.send('CHANNEL_CHANGE', { direction });
+            console.log(`Sent CHANNEL_CHANGE ${direction} to renderer`);
+        } else {
+            console.warn('No browser windows found to send channel change');
+        }
+    }
+
+    private sendRemoteCommandToRenderer(command: RemoteControlCommand): void {
+        const windows = BrowserWindow.getAllWindows();
+        if (windows.length > 0) {
+            windows[0].webContents.send('REMOTE_CONTROL_COMMAND', command);
+            console.log(
+                `Sent REMOTE_CONTROL_COMMAND ${command.type} to renderer`
+            );
+        } else {
+            console.warn('No browser windows found to send remote command');
+        }
+    }
+
+    private readJsonBody(
+        req: http.IncomingMessage,
+        res: http.ServerResponse,
+        callback: (body: any) => void
+    ): void {
+        let data = '';
+        let totalSize = 0;
+        let payloadTooLarge = false;
+        const MAX_BODY_SIZE = 10 * 1024; // 10KB
+
+        req.on('data', (chunk: Buffer) => {
+            if (payloadTooLarge) return;
+
+            totalSize += chunk.length;
+            if (totalSize > MAX_BODY_SIZE) {
+                payloadTooLarge = true;
+                res.writeHead(413, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Payload too large' }));
+                req.destroy();
+                return;
+            }
+
+            data += chunk.toString();
+        });
+        req.on('end', () => {
+            if (payloadTooLarge) return;
+
+            if (!data) {
+                callback({});
+                return;
+            }
+
+            try {
+                callback(JSON.parse(data));
+            } catch {
+                res.writeHead(400, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Invalid JSON payload' }));
+            }
+        });
+    }
+}
+
+export default new RemoteControlEvents();
diff --git a/apps/electron-backend/src/app/events/settings.events.ts b/apps/electron-backend/src/app/events/settings.events.ts
new file mode 100644
index 0000000..4d50233
--- /dev/null
+++ b/apps/electron-backend/src/app/events/settings.events.ts
@@ -0,0 +1,38 @@
+import { ipcMain } from 'electron';
+import {
+    MPV_REUSE_INSTANCE,
+    store,
+} from '../services/store.service';
+import { httpServer } from '../server/http-server';
+
+export default class SettingsEvents {
+    static bootstrapSettingsEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
+
+ipcMain.handle('SETTINGS_UPDATE', (_event, arg) => {
+    console.log('Received SETTINGS_UPDATE with data:', arg);
+
+    // Only set values that are defined
+    if (arg.mpvReuseInstance !== undefined) {
+        store.set(MPV_REUSE_INSTANCE, arg.mpvReuseInstance);
+    }
+
+    // Handle remote control settings
+    if (arg.remoteControl !== undefined || arg.remoteControlPort !== undefined) {
+        const enabled = arg.remoteControl ?? store.get('remoteControl', false);
+        const port = arg.remoteControlPort ?? store.get('remoteControlPort', 8765);
+
+        // Save to store
+        if (arg.remoteControl !== undefined) {
+            store.set('remoteControl', enabled);
+        }
+        if (arg.remoteControlPort !== undefined) {
+            store.set('remoteControlPort', port);
+        }
+
+        // Update HTTP server
+        httpServer.updateSettings(enabled, port);
+    }
+});
diff --git a/apps/electron-backend/src/app/events/shared.events.ts b/apps/electron-backend/src/app/events/shared.events.ts
new file mode 100644
index 0000000..faf62e1
--- /dev/null
+++ b/apps/electron-backend/src/app/events/shared.events.ts
@@ -0,0 +1,39 @@
+import { ipcMain, session } from 'electron';
+
+export default class SharedEvents {
+    static bootstrapSharedEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
+
+ipcMain.handle('set-user-agent', (event, userAgent, referer) => {
+    setUserAgent(userAgent, referer); // TODO: test if defaults needed
+    return true;
+});
+
+/**
+ * Sets the user agent header for all http requests
+ * @param userAgent user agent to use
+ * @param referer referer to use
+ */
+export function setUserAgent(userAgent: string, referer?: string): void {
+    if (userAgent === undefined || userAgent === null || userAgent === '') {
+        userAgent = this.defaultUserAgent;
+    }
+
+    // Remove trailing slash from referer if it exists
+    let originURL: string;
+    if (referer?.endsWith('/')) {
+        originURL = referer.slice(0, -1);
+    }
+
+    session.defaultSession.webRequest.onBeforeSendHeaders(
+        (details, callback) => {
+            details.requestHeaders['User-Agent'] = userAgent;
+            details.requestHeaders['Referer'] = referer as string;
+            details.requestHeaders['Origin'] = originURL as string;
+            callback({ requestHeaders: details.requestHeaders });
+        }
+    );
+    console.log(`Success: Set "${userAgent}" as user agent header`);
+}
diff --git a/apps/electron-backend/src/app/events/squirrel.events.ts b/apps/electron-backend/src/app/events/squirrel.events.ts
new file mode 100644
index 0000000..d8ac332
--- /dev/null
+++ b/apps/electron-backend/src/app/events/squirrel.events.ts
@@ -0,0 +1,73 @@
+/**
+ * This module is responsible on handling all the setup events that is submitted by squirrel.
+ */
+
+import { app } from 'electron';
+import { spawn } from 'child_process';
+import { resolve, join, basename } from 'path';
+import { environment } from '../../environments/environment';
+
+export default class SquirrelEvents {
+  private static isAppFirstRun = false;
+
+  // app paths
+  private static appFolder = resolve(process.execPath, '..');
+  private static appRootFolder = resolve(SquirrelEvents.appFolder, '..');
+  private static updateExe = resolve(
+    join(SquirrelEvents.appRootFolder, 'Update.exe')
+  );
+  private static exeName = resolve(
+    join(
+      SquirrelEvents.appRootFolder,
+      'app-' + environment.version,
+      basename(process.execPath)
+    )
+  );
+
+  static handleEvents(): boolean {
+    if (process.argv.length === 1 || process.platform !== 'win32') {
+      return false;
+    }
+
+    switch (process.argv[1]) {
+      case '--squirrel-install':
+      case '--squirrel-updated':
+        // Install desktop and start menu shortcuts
+        SquirrelEvents.update(['--createShortcut', SquirrelEvents.exeName]);
+
+        return true;
+
+      case '--squirrel-uninstall':
+        // Remove desktop and start menu shortcuts
+        SquirrelEvents.update(['--removeShortcut', SquirrelEvents.exeName]);
+
+        return true;
+
+      case '--squirrel-obsolete':
+        app.quit();
+        return true;
+
+      case '--squirrel-firstrun':
+        // Check if it the first run of the software
+        SquirrelEvents.isAppFirstRun = true;
+        return false;
+    }
+
+    return false;
+  }
+
+  static isFirstRun(): boolean {
+    return SquirrelEvents.isAppFirstRun;
+  }
+
+  private static update(args: Array<string>) {
+    try {
+      spawn(SquirrelEvents.updateExe, args, { detached: true }).on(
+        'close',
+        () => setTimeout(app.quit, 1000)
+      );
+    } catch (error) {
+      setTimeout(app.quit, 1000);
+    }
+  }
+}
diff --git a/apps/electron-backend/src/app/events/stalker.events.ts b/apps/electron-backend/src/app/events/stalker.events.ts
new file mode 100644
index 0000000..d05e3e0
--- /dev/null
+++ b/apps/electron-backend/src/app/events/stalker.events.ts
@@ -0,0 +1,263 @@
+/**
+ * This module handles all Stalker portal related IPC communications
+ * between the frontend and the electron backend.
+ */
+
+import axios, { AxiosRequestConfig } from 'axios';
+import { createHash } from 'crypto';
+import { ipcMain } from 'electron';
+import { PortalDebugEvent, STALKER_REQUEST } from 'shared-interfaces';
+import { rememberStalkerPlaybackContext } from '../services/stalker-playback-context.service';
+import { emitPortalDebugEvent } from './portal-debug.events';
+
+const LEGACY_DEFAULT_SERIAL = 'BEDACD4569BAF';
+
+function deriveStalkerIdentity(
+    macAddress: string,
+    providedSerial?: string
+): { serialNumber: string; cfduid: string } {
+    const normalizedMac = String(macAddress ?? '').trim().toUpperCase();
+    const md5 = createHash('md5').update(normalizedMac).digest('hex');
+    const derivedSerial = md5.slice(0, 13).toUpperCase();
+
+    const normalizedProvided = String(providedSerial ?? '')
+        .trim()
+        .toUpperCase();
+    const useProvidedSerial =
+        normalizedProvided.length > 0 &&
+        normalizedProvided !== LEGACY_DEFAULT_SERIAL;
+
+    const serialNumber = useProvidedSerial ? normalizedProvided : derivedSerial;
+
+    // Keep serial and __cfduid coherent: serial as prefix + stable MAC hash tail.
+    const serialPrefix = serialNumber.toLowerCase().replace(/[^a-f0-9]/g, '');
+    const cfduid = `${serialPrefix}${md5.slice(serialPrefix.length)}`.slice(
+        0,
+        32
+    );
+
+    return { serialNumber, cfduid };
+}
+
+export default class StalkerEvents {
+    static bootstrapStalkerEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
+
+/**
+ * Handle Stalker API requests with MAC address cookie and optional Bearer token
+ */
+ipcMain.handle(
+    STALKER_REQUEST,
+    async (
+        event,
+        payload: {
+            url: string;
+            macAddress: string;
+            params: Record<string, string>;
+            token?: string;
+            serialNumber?: string;
+            requestId?: string;
+        }
+    ) => {
+        const startedAt = Date.now();
+        let debugRequest: Record<string, unknown> | undefined;
+        try {
+            const { url, macAddress, params, token, serialNumber, requestId } =
+                payload;
+            const identity = deriveStalkerIdentity(macAddress, serialNumber);
+            const effectiveSerialNumber = identity.serialNumber;
+            const requestParams = { ...params };
+
+            // Some providers validate sn/metrics strongly in get_profile.
+            if (
+                requestParams.type === 'stb' &&
+                requestParams.action === 'get_profile'
+            ) {
+                requestParams.sn = effectiveSerialNumber;
+
+                if (typeof requestParams.metrics === 'string') {
+                    try {
+                        const parsedMetrics = JSON.parse(requestParams.metrics);
+                        requestParams.metrics = JSON.stringify({
+                            ...(parsedMetrics ?? {}),
+                            sn: effectiveSerialNumber,
+                        });
+                    } catch {
+                        // Keep original metrics payload when malformed.
+                    }
+                }
+            }
+
+            // Build URL with query parameters
+            // Note: For 'cmd' parameter, we need to use encodeURI (not encodeURIComponent)
+            // to preserve forward slashes, matching stalker-to-m3u implementation
+            const urlObject = new URL(url);
+            const queryParts: string[] = [];
+
+            Object.entries(requestParams).forEach(([key, value]) => {
+                if (key === 'cmd') {
+                    // Don't encode cmd - it's already a path like /media/12345.mpg
+                    // Encoding would break the path format expected by the server
+                    queryParts.push(`${key}=${String(value)}`);
+                } else {
+                    // Use encodeURIComponent for other params
+                    queryParts.push(
+                        `${key}=${encodeURIComponent(String(value))}`
+                    );
+                }
+            });
+
+            // Always add JsHttpRequest parameter if not present (required by Stalker API)
+            if (!requestParams['JsHttpRequest']) {
+                queryParts.push('JsHttpRequest=1-xml');
+            }
+
+            // Build final URL with manually constructed query string
+            const fullUrl = `${urlObject.origin}${urlObject.pathname}?${queryParts.join('&')}`;
+
+            // Build cookie string matching the working curl example format
+            // Format: mac=XX:XX:XX:XX:XX:XX; stb_lang=de_DE; timezone=Europe/Berlin; __cfduid=...
+            // The __cfduid cookie uses the serial number lowercase + random suffix
+            const cookieString = `mac=${macAddress}; stb_lang=en_US@rg=dezzzz; timezone=Europe/Berlin; __cfduid=${identity.cfduid}`;
+
+            // Build headers - using MAG250 User-Agent that stalker-to-m3u uses
+            const headers: Record<string, string> = {
+                Cookie: cookieString,
+                // Use MAG250 User-Agent matching stalker-to-m3u implementation
+                'User-Agent':
+                    'Mozilla/5.0 (QtEmbedded; U; Linux; C) AppleWebKit/533.3 (KHTML, like Gecko) MAG250',
+                'X-User-Agent':
+                    'Mozilla/5.0 (QtEmbedded; U; Linux; C) AppleWebKit/533.3 (KHTML, like Gecko) MAG250',
+                Accept: '*/*',
+                Connection: 'keep-alive',
+                'Accept-Language': 'en-US,en;q=0.9',
+            };
+
+            // Add SN (serial number) header if provided - required by some portals
+            if (effectiveSerialNumber) {
+                headers['SN'] = effectiveSerialNumber;
+            }
+
+            // Add Authorization header if token is provided
+            if (token) {
+                headers['Authorization'] = `Bearer ${token}`;
+            }
+
+            // Determine timeout based on action type
+            // create_link requests can take longer as server generates stream URL
+            const isCreateLink = requestParams.action === 'create_link';
+            const requestTimeout = isCreateLink ? 30000 : 15000;
+
+            // Configure axios request
+            const config: AxiosRequestConfig = {
+                method: 'GET',
+                url: fullUrl,
+                headers,
+                timeout: requestTimeout,
+                validateStatus: (status) => status < 500, // Don't throw on 4xx errors
+            };
+            debugRequest = {
+                method: config.method ?? 'GET',
+                url: fullUrl,
+                headers,
+                timeout: requestTimeout,
+                params: requestParams,
+            };
+
+            const response = await axios(config);
+
+            // Check if response is successful
+            if (response.status >= 400) {
+                console.error(
+                    '[StalkerEvents] HTTP Error:',
+                    response.status,
+                    response.statusText
+                );
+                throw {
+                    message: `HTTP Error: ${response.statusText}`,
+                    status: response.status,
+                };
+            }
+
+            // Return the response data
+            if (
+                params.action === 'create_link' &&
+                response.data?.js?.cmd &&
+                typeof response.data.js.cmd === 'string'
+            ) {
+                rememberStalkerPlaybackContext({
+                    streamUrl: response.data.js.cmd,
+                    portalUrl: url,
+                    macAddress,
+                    serialNumber: effectiveSerialNumber,
+                    token,
+                });
+            }
+
+            if (requestId) {
+                const debugEvent: PortalDebugEvent = {
+                    requestId,
+                    provider: 'stalker',
+                    operation: params.action ?? 'unknown',
+                    transport: 'electron-main',
+                    startedAt: new Date(startedAt).toISOString(),
+                    durationMs: Date.now() - startedAt,
+                    status: 'success',
+                    request: debugRequest,
+                    response: response.data,
+                };
+                emitPortalDebugEvent(debugEvent);
+            }
+
+            return response.data;
+        } catch (error) {
+            if (payload.requestId) {
+                const debugEvent: PortalDebugEvent = {
+                    requestId: payload.requestId,
+                    provider: 'stalker',
+                    operation: payload.params?.action ?? 'unknown',
+                    transport: 'electron-main',
+                    startedAt: new Date(startedAt).toISOString(),
+                    durationMs: Date.now() - startedAt,
+                    status: 'error',
+                    request: debugRequest ?? {
+                        method: 'GET',
+                        url: payload.url,
+                        params: payload.params,
+                    },
+                    error,
+                };
+                emitPortalDebugEvent(debugEvent);
+            }
+
+            console.error('[StalkerEvents] Request error:', error);
+
+            // Format error response
+            if (axios.isAxiosError(error)) {
+                const errorResponse = {
+                    type: 'ERROR',
+                    message:
+                        error.response?.data?.message ||
+                        error.message ||
+                        'Failed to fetch data from Stalker portal',
+                    status: error.response?.status || 500,
+                };
+                throw errorResponse;
+            } else if (
+                error &&
+                typeof error === 'object' &&
+                'message' in error
+            ) {
+                throw error;
+            } else {
+                throw {
+                    type: 'ERROR',
+                    message: 'An unknown error occurred',
+                    status: 500,
+                };
+            }
+        }
+    }
+);
diff --git a/apps/electron-backend/src/app/events/update.events.ts b/apps/electron-backend/src/app/events/update.events.ts
new file mode 100644
index 0000000..e31496e
--- /dev/null
+++ b/apps/electron-backend/src/app/events/update.events.ts
@@ -0,0 +1,69 @@
+import { app, autoUpdater, dialog, MessageBoxOptions } from 'electron';
+import { platform, arch } from 'os';
+import { updateServerUrl } from '../constants';
+import App from '../app';
+
+export default class UpdateEvents {
+  // initialize auto update service - most be invoked only in production
+  static initAutoUpdateService() {
+    const platform_arch =
+      platform() === 'win32' ? platform() : platform() + '_' + arch();
+    const version = app.getVersion();
+    const feed: Electron.FeedURLOptions = {
+      url: `${updateServerUrl}/update/${platform_arch}/${version}`,
+    };
+
+    if (!App.isDevelopmentMode()) {
+      console.log('Initializing auto update service...\n');
+
+      autoUpdater.setFeedURL(feed);
+      UpdateEvents.checkForUpdates();
+    }
+  }
+
+  // check for updates - most be invoked after initAutoUpdateService() and only in production
+  static checkForUpdates() {
+    if (!App.isDevelopmentMode() && autoUpdater.getFeedURL() !== '') {
+      autoUpdater.checkForUpdates();
+    }
+  }
+}
+
+autoUpdater.on(
+  'update-downloaded',
+  (event, releaseNotes, releaseName, releaseDate) => {
+    const dialogOpts: MessageBoxOptions = {
+      type: 'info' as const,
+      buttons: ['Restart', 'Later'],
+      title: 'Application Update',
+      message: process.platform === 'win32' ? releaseNotes : releaseName,
+      detail:
+        'A new version has been downloaded. Restart the application to apply the updates.',
+    };
+
+    dialog.showMessageBox(dialogOpts).then((returnValue) => {
+      if (returnValue.response === 0) autoUpdater.quitAndInstall();
+    });
+  }
+);
+
+autoUpdater.on('checking-for-update', () => {
+  console.log('Checking for updates...\n');
+});
+
+autoUpdater.on('update-available', () => {
+  console.log('New update available!\n');
+});
+
+autoUpdater.on('update-not-available', () => {
+  console.log('Up to date!\n');
+});
+
+autoUpdater.on('before-quit-for-update', () => {
+  console.log('Application update is about to begin...\n');
+});
+
+autoUpdater.on('error', (message) => {
+  console.error('There was a problem updating the application');
+  console.error(message, '\n');
+});
diff --git a/apps/electron-backend/src/app/events/xtream.events.spec.ts b/apps/electron-backend/src/app/events/xtream.events.spec.ts
new file mode 100644
index 0000000..743338f
--- /dev/null
+++ b/apps/electron-backend/src/app/events/xtream.events.spec.ts
@@ -0,0 +1,168 @@
+import { XTREAM_CANCEL_SESSION } from 'shared-interfaces';
+
+const registeredHandlers = new Map<string, (...args: unknown[]) => unknown>();
+const axiosMock = Object.assign(jest.fn(), {
+    isAxiosError: jest.fn(),
+});
+
+function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return { promise, resolve, reject };
+}
+
+jest.mock('electron', () => ({
+    ipcMain: {
+        handle: jest.fn((channel: string, handler: (...args: unknown[]) => unknown) => {
+            registeredHandlers.set(channel, handler);
+        }),
+    },
+}));
+
+jest.mock('axios', () => ({
+    __esModule: true,
+    default: axiosMock,
+}));
+
+jest.mock('./portal-debug.events', () => ({
+    emitPortalDebugEvent: jest.fn(),
+}));
+
+describe('XtreamEvents session cancellation', () => {
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(async () => {
+        jest.resetModules();
+        registeredHandlers.clear();
+        axiosMock.mockReset();
+        axiosMock.isAxiosError.mockReset();
+        consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+
+        await import('./xtream.events');
+    });
+
+    afterEach(() => {
+        consoleErrorSpy.mockRestore();
+    });
+
+    it('aborts requests that were registered with only a session id', async () => {
+        const requestHandler = registeredHandlers.get('XTREAM_REQUEST');
+        const cancelHandler = registeredHandlers.get(XTREAM_CANCEL_SESSION);
+        const pendingRequest = createDeferred<{ status: number; data: unknown }>();
+        const cancelError = Object.assign(new Error('cancelled'), {
+            code: 'ERR_CANCELED',
+        });
+        let abortSignal: AbortSignal | undefined;
+
+        expect(requestHandler).toBeDefined();
+        expect(cancelHandler).toBeDefined();
+
+        axiosMock.mockImplementation((config: { signal?: AbortSignal }) => {
+            abortSignal = config.signal;
+            return pendingRequest.promise;
+        });
+        axiosMock.isAxiosError.mockImplementation(
+            (error: unknown) => error === cancelError
+        );
+
+        const requestPromise = requestHandler?.({}, {
+            url: 'http://localhost:3211',
+            params: {
+                action: 'get_live_categories',
+                password: 'secret',
+                username: 'user1',
+            },
+            sessionId: 'session-1',
+            suppressErrorLog: true,
+        }) as Promise<unknown>;
+
+        expect(abortSignal?.aborted).toBe(false);
+
+        const cancelResult = (await cancelHandler?.(
+            {},
+            'session-1'
+        )) as { success: boolean; cancelled: number };
+
+        expect(cancelResult).toEqual({ success: true, cancelled: 1 });
+        expect(abortSignal?.aborted).toBe(true);
+
+        pendingRequest.reject(cancelError);
+
+        await expect(requestPromise).rejects.toMatchObject({
+            name: 'AbortError',
+            status: 499,
+        });
+    });
+
+    it('counts every matching in-flight request for the same session', async () => {
+        const requestHandler = registeredHandlers.get('XTREAM_REQUEST');
+        const cancelHandler = registeredHandlers.get(XTREAM_CANCEL_SESSION);
+        const firstRequest = createDeferred<{ status: number; data: unknown }>();
+        const secondRequest = createDeferred<{ status: number; data: unknown }>();
+        const cancelError = Object.assign(new Error('cancelled'), {
+            code: 'ERR_CANCELED',
+        });
+        const abortSignals: AbortSignal[] = [];
+
+        expect(requestHandler).toBeDefined();
+        expect(cancelHandler).toBeDefined();
+
+        axiosMock
+            .mockImplementationOnce((config: { signal?: AbortSignal }) => {
+                if (config.signal) {
+                    abortSignals.push(config.signal);
+                }
+                return firstRequest.promise;
+            })
+            .mockImplementationOnce((config: { signal?: AbortSignal }) => {
+                if (config.signal) {
+                    abortSignals.push(config.signal);
+                }
+                return secondRequest.promise;
+            });
+        axiosMock.isAxiosError.mockImplementation(
+            (error: unknown) => error === cancelError
+        );
+
+        const firstPromise = requestHandler?.({}, {
+            url: 'http://localhost:3211',
+            params: {
+                action: 'get_live_categories',
+                password: 'secret',
+                username: 'user1',
+            },
+            sessionId: 'session-2',
+            suppressErrorLog: true,
+        }) as Promise<unknown>;
+        const secondPromise = requestHandler?.({}, {
+            url: 'http://localhost:3211',
+            params: {
+                action: 'get_vod_streams',
+                password: 'secret',
+                username: 'user1',
+            },
+            sessionId: 'session-2',
+            suppressErrorLog: true,
+        }) as Promise<unknown>;
+
+        const cancelResult = (await cancelHandler?.(
+            {},
+            'session-2'
+        )) as { success: boolean; cancelled: number };
+
+        expect(cancelResult).toEqual({ success: true, cancelled: 2 });
+        expect(abortSignals).toHaveLength(2);
+        expect(abortSignals.every((signal) => signal.aborted)).toBe(true);
+
+        firstRequest.reject(cancelError);
+        secondRequest.reject(cancelError);
+
+        await expect(firstPromise).rejects.toMatchObject({ name: 'AbortError' });
+        await expect(secondPromise).rejects.toMatchObject({ name: 'AbortError' });
+    });
+});
diff --git a/apps/electron-backend/src/app/events/xtream.events.ts b/apps/electron-backend/src/app/events/xtream.events.ts
new file mode 100644
index 0000000..c117bc1
--- /dev/null
+++ b/apps/electron-backend/src/app/events/xtream.events.ts
@@ -0,0 +1,290 @@
+/**
+ * This module handles all Xtream Codes API related IPC communications
+ * between the frontend and the electron backend.
+ */
+
+import axios, { AxiosRequestConfig } from 'axios';
+import { ipcMain } from 'electron';
+import { PortalDebugEvent, XTREAM_CANCEL_SESSION } from 'shared-interfaces';
+import { emitPortalDebugEvent } from './portal-debug.events';
+
+export default class XtreamEvents {
+    static bootstrapXtreamEvents(): Electron.IpcMain {
+        return ipcMain;
+    }
+}
+
+function formatXtreamError(error: unknown, requestUrl: string, action?: string) {
+    const parsedUrl = new URL(requestUrl);
+    const base = {
+        action,
+        host: parsedUrl.host,
+        pathname: parsedUrl.pathname,
+    };
+
+    if (axios.isAxiosError(error)) {
+        return {
+            ...base,
+            type: 'AxiosError',
+            code: error.code,
+            status: error.response?.status,
+            message: error.message,
+            syscall: (error as NodeJS.ErrnoException).syscall,
+            hostname: (error as any).hostname,
+        };
+    }
+
+    if (error && typeof error === 'object') {
+        const errObj = error as Record<string, unknown>;
+        return {
+            ...base,
+            type: 'ErrorObject',
+            status: errObj.status,
+            message: errObj.message,
+        };
+    }
+
+    return {
+        ...base,
+        type: 'UnknownError',
+        message: String(error),
+    };
+}
+
+/**
+ * Handle Xtream Codes API requests
+ */
+ipcMain.handle(
+    'XTREAM_REQUEST',
+    async (
+        event,
+        payload: {
+            url: string;
+            params: Record<string, string>;
+            requestId?: string;
+            sessionId?: string;
+            suppressErrorLog?: boolean;
+        }
+    ) => {
+        const startedAt = Date.now();
+        let activeRequestKey: string | null = null;
+        try {
+            const { url, params, requestId, sessionId } = payload;
+
+            // Build URL with query parameters
+            // Xtream API endpoint is always at /player_api.php
+            const apiUrl = new URL(`${url}/player_api.php`);
+            Object.entries(params).forEach(([key, value]) => {
+                apiUrl.searchParams.append(key, value);
+            });
+
+            const controller = new AbortController();
+            if (requestId || sessionId) {
+                activeRequestKey = requestId ?? crypto.randomUUID();
+                activeXtreamRequests.set(activeRequestKey, {
+                    controller,
+                    sessionId,
+                });
+            }
+
+            // Configure axios request
+            const config: AxiosRequestConfig = {
+                method: 'GET',
+                url: apiUrl.toString(),
+                headers: {
+                    'User-Agent':
+                        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+                    Accept: 'application/json',
+                },
+                timeout: 30000, // 30 seconds timeout for Xtream API
+                validateStatus: (status) => status < 500, // Don't throw on 4xx errors
+                signal: controller.signal,
+            };
+
+            const response = await axios(config);
+
+            // Check if response is successful
+            if (response.status >= 400) {
+                throw {
+                    message: `HTTP Error: ${response.statusText}`,
+                    status: response.status,
+                };
+            }
+
+            if (requestId) {
+                const debugEvent: PortalDebugEvent = {
+                    requestId,
+                    provider: 'xtream',
+                    operation: params.action ?? 'unknown',
+                    transport: 'electron-main',
+                    startedAt: new Date(startedAt).toISOString(),
+                    durationMs: Date.now() - startedAt,
+                    status: 'success',
+                    request: {
+                        method: config.method ?? 'GET',
+                        url: apiUrl.toString(),
+                        headers: config.headers,
+                        timeout: config.timeout,
+                        params,
+                    },
+                    response: response.data,
+                };
+                emitPortalDebugEvent(debugEvent);
+            }
+
+            // Xtream API returns JSON data
+            return {
+                payload: response.data,
+                action: params.action,
+            };
+        } catch (error) {
+            const requestId = payload.requestId;
+            if (requestId) {
+                const apiUrl = new URL(`${payload.url}/player_api.php`);
+                Object.entries(payload.params ?? {}).forEach(([key, value]) => {
+                    apiUrl.searchParams.append(key, value);
+                });
+
+                const debugEvent: PortalDebugEvent = {
+                    requestId,
+                    provider: 'xtream',
+                    operation: payload.params?.action ?? 'unknown',
+                    transport: 'electron-main',
+                    startedAt: new Date(startedAt).toISOString(),
+                    durationMs: Date.now() - startedAt,
+                    status: 'error',
+                    request: {
+                        method: 'GET',
+                        url: apiUrl.toString(),
+                        headers: {
+                            'User-Agent':
+                                'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+                            Accept: 'application/json',
+                        },
+                        timeout: 30000,
+                        params: payload.params,
+                    },
+                    error,
+                };
+                emitPortalDebugEvent(debugEvent);
+            }
+
+            if (!payload.suppressErrorLog) {
+                console.error(
+                    '[XTREAM_REQUEST] Failed',
+                    formatXtreamError(error, payload.url, payload.params?.action)
+                );
+            }
+
+            // Format error response
+            if (axios.isAxiosError(error)) {
+                if (error.code === 'ERR_CANCELED') {
+                    throw {
+                        type: 'ERROR',
+                        name: 'AbortError',
+                        message: 'Xtream request cancelled',
+                        status: 499,
+                    };
+                }
+                const errorResponse = {
+                    type: 'ERROR',
+                    message:
+                        error.response?.data?.message ||
+                        error.message ||
+                        'Failed to fetch data from Xtream server',
+                    status: error.response?.status || 500,
+                };
+                throw errorResponse;
+            } else if (
+                error &&
+                typeof error === 'object' &&
+                'message' in error
+            ) {
+                throw error;
+            } else {
+                throw {
+                    type: 'ERROR',
+                    message: 'An unknown error occurred',
+                    status: 500,
+                };
+            }
+        } finally {
+            if (activeRequestKey) {
+                activeXtreamRequests.delete(activeRequestKey);
+            }
+        }
+    }
+);
+
+ipcMain.handle(
+    XTREAM_CANCEL_SESSION,
+    async (_event, sessionId: string): Promise<{ success: boolean; cancelled: number }> => {
+        if (!sessionId) {
+            return { success: false, cancelled: 0 };
+        }
+
+        let cancelled = 0;
+        for (const activeRequest of activeXtreamRequests.values()) {
+            if (activeRequest.sessionId !== sessionId) {
+                continue;
+            }
+
+            activeRequest.controller.abort();
+            cancelled += 1;
+        }
+
+        return {
+            success: cancelled > 0,
+            cancelled,
+        };
+    }
+);
+type ActiveXtreamRequest = {
+    controller: AbortController;
+    sessionId?: string;
+};
+
+const activeXtreamRequests = new Map<string, ActiveXtreamRequest>();
+
+ipcMain.handle(
+    'XTREAM_PROBE_URL',
+    async (
+        _event,
+        payload: {
+            url: string;
+            method?: 'GET' | 'HEAD';
+        }
+    ) => {
+        const config: AxiosRequestConfig = {
+            method: payload.method ?? 'HEAD',
+            url: payload.url,
+            headers: {
+                'User-Agent':
+                    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+            },
+            timeout: 10000,
+            maxRedirects: 5,
+            validateStatus: () => true,
+        };
+
+        try {
+            const response = await axios(config);
+            return {
+                status: response.status,
+                url: payload.url,
+            };
+        } catch (error) {
+            if (axios.isAxiosError(error) && error.response) {
+                return {
+                    status: error.response.status,
+                    url: payload.url,
+                };
+            }
+
+            return {
+                status: 0,
+                url: payload.url,
+            };
+        }
+    }
+);
diff --git a/apps/electron-backend/src/app/options/maker.options.json b/apps/electron-backend/src/app/options/maker.options.json
new file mode 100644
index 0000000..54de4c1
--- /dev/null
+++ b/apps/electron-backend/src/app/options/maker.options.json
@@ -0,0 +1,3 @@
+{
+  "$schema": "../../../../../node_modules/nx-electron/src/validation/maker.schema.json"
+}
diff --git a/apps/electron-backend/src/app/server/http-server.ts b/apps/electron-backend/src/app/server/http-server.ts
new file mode 100644
index 0000000..23a2351
--- /dev/null
+++ b/apps/electron-backend/src/app/server/http-server.ts
@@ -0,0 +1,208 @@
+import { app } from 'electron';
+import * as fs from 'fs';
+import * as http from 'http';
+import * as path from 'path';
+
+/**
+ * HTTP server for serving the remote control web app and providing REST API endpoints
+ */
+export class HttpServer {
+    private server: http.Server | null = null;
+    private port = 8765;
+    private isEnabled = false;
+    private distPath: string | null = null;
+    private remoteControlHandlers: Map<
+        string,
+        (req: http.IncomingMessage, res: http.ServerResponse) => void
+    > = new Map();
+
+    /**
+     * Get the path to the remote-control-web static files.
+     * Lazily computed to avoid calling Electron APIs before app is ready.
+     */
+    private getDistPath(): string {
+        if (this.distPath) {
+            return this.distPath;
+        }
+
+        // Path to the built remote-control-web app
+        // In development: use workspace root
+        // In production: use app path
+        const appPath = app.getAppPath();
+        const isDev = !app.isPackaged;
+
+        if (isDev) {
+            // Development mode - use workspace root
+            this.distPath = path.join(
+                process.cwd(),
+                'dist',
+                'apps',
+                'remote-control-web',
+                'browser'
+            );
+        } else {
+            // Production mode - files are bundled with the app
+            // electron-builder copies remote-control-web/**/* directly to app root
+            this.distPath = path.join(
+                appPath,
+                'remote-control-web',
+                'browser'
+            );
+        }
+
+        console.log('[HTTP Server] Serving from:', this.distPath);
+        return this.distPath;
+    }
+
+    /**
+     * Start the HTTP server
+     */
+    start(port?: number): void {
+        if (port) {
+            this.port = port;
+        }
+
+        if (this.server) {
+            console.log('HTTP server is already running');
+            return;
+        }
+
+        this.server = http.createServer((req, res) => {
+            this.handleRequest(req, res);
+        });
+
+        this.server.listen(this.port, () => {
+            console.log(`HTTP server listening on port ${this.port}`);
+            console.log(
+                `Remote control available at: http://localhost:${this.port}`
+            );
+        });
+
+        this.isEnabled = true;
+    }
+
+    /**
+     * Stop the HTTP server
+     */
+    stop(): void {
+        if (!this.server) {
+            return;
+        }
+
+        this.server.close(() => {
+            console.log('HTTP server stopped');
+        });
+
+        this.server = null;
+        this.isEnabled = false;
+    }
+
+    /**
+     * Update server settings
+     */
+    updateSettings(enabled: boolean, port: number): void {
+        const needsRestart = this.isEnabled && enabled && this.port !== port;
+
+        if (!enabled && this.isEnabled) {
+            this.stop();
+        } else if (enabled && !this.isEnabled) {
+            this.start(port);
+        } else if (needsRestart) {
+            this.stop();
+            this.start(port);
+        }
+    }
+
+    /**
+     * Register a handler for remote control API endpoints
+     */
+    registerRemoteControlHandler(
+        path: string,
+        handler: (req: http.IncomingMessage, res: http.ServerResponse) => void
+    ): void {
+        this.remoteControlHandlers.set(path, handler);
+    }
+
+    /**
+     * Handle incoming HTTP requests
+     */
+    private handleRequest(
+        req: http.IncomingMessage,
+        res: http.ServerResponse
+    ): void {
+        const url = req.url || '/';
+
+        // Handle API requests
+        if (url.startsWith('/api/remote-control/')) {
+            const handler = this.remoteControlHandlers.get(url);
+            if (handler) {
+                handler(req, res);
+                return;
+            }
+
+            res.writeHead(404, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Endpoint not found' }));
+            return;
+        }
+
+        // Serve static files from the remote-control-web app
+        this.serveStaticFile(url, res);
+    }
+
+    /**
+     * Serve static files
+     */
+    private serveStaticFile(url: string, res: http.ServerResponse): void {
+        // Default to index.html for root path
+        let filePath = url === '/' ? '/index.html' : url;
+
+        // Security: prevent directory traversal
+        filePath = path.normalize(filePath).replace(/^(\.\.[/\\])+/, '');
+
+        const fullPath = path.join(this.getDistPath(), filePath);
+
+        fs.readFile(fullPath, (err, data) => {
+            if (err) {
+                // If file not found, try serving index.html (for Angular routing)
+                if (err.code === 'ENOENT' && filePath !== '/index.html') {
+                    this.serveStaticFile('/', res);
+                    return;
+                }
+
+                res.writeHead(404, { 'Content-Type': 'text/plain' });
+                res.end('404 Not Found');
+                return;
+            }
+
+            // Determine content type
+            const contentType = this.getContentType(fullPath);
+            res.writeHead(200, { 'Content-Type': contentType });
+            res.end(data);
+        });
+    }
+
+    /**
+     * Get content type based on file extension
+     */
+    private getContentType(filePath: string): string {
+        const ext = path.extname(filePath).toLowerCase();
+        const contentTypes: Record<string, string> = {
+            '.html': 'text/html',
+            '.js': 'application/javascript',
+            '.css': 'text/css',
+            '.json': 'application/json',
+            '.png': 'image/png',
+            '.jpg': 'image/jpeg',
+            '.gif': 'image/gif',
+            '.svg': 'image/svg+xml',
+            '.ico': 'image/x-icon',
+            '.woff': 'font/woff',
+            '.woff2': 'font/woff2',
+            '.ttf': 'font/ttf',
+        };
+
+        return contentTypes[ext] || 'application/octet-stream';
+    }
+}
+
+export const httpServer = new HttpServer();
diff --git a/apps/electron-backend/src/app/services/database-worker-client.spec.ts b/apps/electron-backend/src/app/services/database-worker-client.spec.ts
new file mode 100644
index 0000000..429cb7e
--- /dev/null
+++ b/apps/electron-backend/src/app/services/database-worker-client.spec.ts
@@ -0,0 +1,293 @@
+import type { DatabaseWorkerClient as DatabaseWorkerClientType } from './database-worker-client';
+
+const mockWorkerInstances: any[] = [];
+const resolveWorkerRuntimeBootstrap = jest.fn();
+
+jest.mock('electron', () => ({
+    app: {
+        isPackaged: false,
+        getAppPath: () => '/mock/app.asar',
+    },
+}));
+
+jest.mock('worker_threads', () => {
+    const { EventEmitter } = require('events');
+
+    class MockWorker extends EventEmitter {
+        postMessage = jest.fn();
+        terminate = jest.fn().mockResolvedValue(0);
+    }
+
+    return {
+        Worker: jest.fn().mockImplementation(() => {
+            const worker = new MockWorker();
+            mockWorkerInstances.push(worker);
+            return worker;
+        }),
+    };
+});
+
+jest.mock('../workers/worker-runtime-paths', () => ({
+    resolveWorkerRuntimeBootstrap: (...args: unknown[]) =>
+        resolveWorkerRuntimeBootstrap(...args),
+}));
+
+describe('DatabaseWorkerClient', () => {
+    let DatabaseWorkerClient: typeof DatabaseWorkerClientType;
+    let clients: DatabaseWorkerClientType[];
+
+    beforeEach(async () => {
+        jest.resetModules();
+        mockWorkerInstances.length = 0;
+        resolveWorkerRuntimeBootstrap.mockReset();
+        resolveWorkerRuntimeBootstrap.mockReturnValue({
+            workerPath: '/mock/workers/database.worker.js',
+            workerPathCandidates: ['/mock/workers/database.worker.js'],
+            nativeModuleSearchPaths: [
+                '/mock/resources/app.asar.unpacked/node_modules',
+            ],
+        });
+        clients = [];
+        ({ DatabaseWorkerClient } = await import('./database-worker-client'));
+    });
+
+    afterEach(async () => {
+        await Promise.all(
+            clients.map((client) => client.shutdown().catch(() => undefined))
+        );
+    });
+
+    function createClient(): DatabaseWorkerClientType {
+        const client = new DatabaseWorkerClient();
+        clients.push(client);
+        return client;
+    }
+
+    async function flushPromises(): Promise<void> {
+        await new Promise((resolve) => setImmediate(resolve));
+    }
+
+    it('resolves requests after the worker reports ready and returns a response', async () => {
+        const client = createClient();
+        const requestPromise = client.request('DB_GLOBAL_SEARCH', {
+            searchTerm: 'matrix',
+        });
+        const worker = mockWorkerInstances[0];
+        const { Worker } = jest.requireMock('worker_threads');
+
+        expect(resolveWorkerRuntimeBootstrap).toHaveBeenCalledWith(
+            expect.objectContaining({
+                workerFilename: 'database.worker.js',
+                developmentWorkerDir: expect.stringContaining('workers'),
+            })
+        );
+        expect(Worker).toHaveBeenCalledWith(expect.any(URL), {
+            workerData: {
+                nativeModuleSearchPaths: [
+                    '/mock/resources/app.asar.unpacked/node_modules',
+                ],
+            },
+        });
+
+        worker.emit('message', { type: 'ready' });
+        await flushPromises();
+
+        expect(worker.postMessage).toHaveBeenCalledTimes(1);
+        const request = worker.postMessage.mock.calls[0][0];
+
+        worker.emit('message', {
+            type: 'response',
+            requestId: request.requestId,
+            success: true,
+            result: [{ id: 1 }],
+        });
+
+        await expect(requestPromise).resolves.toEqual([{ id: 1 }]);
+    });
+
+    it('forwards worker events to the pending request callback', async () => {
+        const client = createClient();
+        const onEvent = jest.fn();
+        const requestPromise = client.request(
+            'DB_SAVE_CONTENT',
+            { playlistId: 'xtream-1', streams: [], type: 'movie' },
+            { onEvent }
+        );
+        const worker = mockWorkerInstances[0];
+
+        worker.emit('message', { type: 'ready' });
+        await flushPromises();
+
+        const request = worker.postMessage.mock.calls[0][0];
+        const event = {
+            operationId: 'op-1',
+            operation: 'save-content',
+            status: 'progress',
+            current: 10,
+            total: 100,
+        };
+
+        worker.emit('message', {
+            type: 'event',
+            requestId: request.requestId,
+            event,
+        });
+
+        expect(onEvent).toHaveBeenCalledWith(event);
+
+        worker.emit('message', {
+            type: 'response',
+            requestId: request.requestId,
+            success: true,
+            result: { success: true, count: 10 },
+        });
+
+        await expect(requestPromise).resolves.toEqual({
+            success: true,
+            count: 10,
+        });
+    });
+
+    it('turns serialized worker errors into rejected Error instances', async () => {
+        const client = createClient();
+        const requestPromise = client.request('DB_DELETE_PLAYLIST', {
+            playlistId: 'xtream-1',
+        });
+        const worker = mockWorkerInstances[0];
+
+        worker.emit('message', { type: 'ready' });
+        await flushPromises();
+
+        const request = worker.postMessage.mock.calls[0][0];
+        worker.emit('message', {
+            type: 'response',
+            requestId: request.requestId,
+            success: false,
+            error: {
+                name: 'SqliteBusyError',
+                message: 'database is locked',
+                stack: 'stack-trace',
+            },
+        });
+
+        await expect(requestPromise).rejects.toMatchObject({
+            name: 'SqliteBusyError',
+            message: 'database is locked',
+        });
+    });
+
+    it('preserves AbortError responses from the worker', async () => {
+        const client = createClient();
+        const requestPromise = client.request('DB_SAVE_CONTENT', {
+            playlistId: 'xtream-1',
+            streams: [],
+            type: 'movie',
+        });
+        const worker = mockWorkerInstances[0];
+
+        worker.emit('message', { type: 'ready' });
+        await flushPromises();
+
+        const request = worker.postMessage.mock.calls[0][0];
+        worker.emit('message', {
+            type: 'response',
+            requestId: request.requestId,
+            success: false,
+            error: {
+                name: 'AbortError',
+                message: 'Operation "save-content" was cancelled',
+            },
+        });
+
+        await expect(requestPromise).rejects.toMatchObject({
+            name: 'AbortError',
+            message: 'Operation "save-content" was cancelled',
+        });
+    });
+
+    it('posts cancel messages to the current worker', async () => {
+        const client = createClient();
+        const requestPromise = client.request('DB_DELETE_PLAYLIST', {
+            playlistId: 'xtream-1',
+        });
+        const worker = mockWorkerInstances[0];
+
+        worker.emit('message', { type: 'ready' });
+        await flushPromises();
+
+        await expect(client.cancel('operation-123')).resolves.toEqual({
+            success: true,
+        });
+
+        expect(worker.postMessage).toHaveBeenCalledWith({
+            type: 'cancel',
+            operationId: 'operation-123',
+        });
+
+        const request = worker.postMessage.mock.calls[0][0];
+        worker.emit('message', {
+            type: 'response',
+            requestId: request.requestId,
+            success: true,
+            result: { success: true },
+        });
+
+        await expect(requestPromise).resolves.toEqual({ success: true });
+    });
+
+    it('rejects pending work on worker exit and starts a fresh worker for the next request', async () => {
+        const client = createClient();
+        const firstRequest = client.request('DB_SEARCH_CONTENT', {
+            playlistId: 'xtream-1',
+            searchTerm: 'matrix',
+            types: ['movie'],
+        });
+        const firstWorker = mockWorkerInstances[0];
+
+        firstWorker.emit('message', { type: 'ready' });
+        await flushPromises();
+        firstWorker.emit('exit', 1);
+
+        await expect(firstRequest).rejects.toThrow(
+            'Database worker stopped with exit code 1'
+        );
+
+        const secondRequest = client.request('DB_SEARCH_CONTENT', {
+            playlistId: 'xtream-1',
+            searchTerm: 'neo',
+            types: ['movie'],
+        });
+        const secondWorker = mockWorkerInstances[1];
+
+        secondWorker.emit('message', { type: 'ready' });
+        await flushPromises();
+
+        const request = secondWorker.postMessage.mock.calls[0][0];
+        secondWorker.emit('message', {
+            type: 'response',
+            requestId: request.requestId,
+            success: true,
+            result: [],
+        });
+
+        await expect(secondRequest).resolves.toEqual([]);
+    });
+
+    it('rejects requests with actionable worker path errors', async () => {
+        const client = createClient();
+        resolveWorkerRuntimeBootstrap.mockImplementation(() => {
+            const error = new Error(
+                'Unable to resolve worker "database.worker.js".\nTried:\n- /missing/database.worker.js'
+            );
+            error.name = 'WorkerPathResolutionError';
+            throw error;
+        });
+
+        await expect(
+            client.request('DB_GLOBAL_SEARCH', { searchTerm: 'matrix' })
+        ).rejects.toMatchObject({
+            name: 'WorkerPathResolutionError',
+            message: expect.stringContaining('database.worker.js'),
+        });
+    });
+});
diff --git a/apps/electron-backend/src/app/services/database-worker-client.ts b/apps/electron-backend/src/app/services/database-worker-client.ts
new file mode 100644
index 0000000..a7b8294
--- /dev/null
+++ b/apps/electron-backend/src/app/services/database-worker-client.ts
@@ -0,0 +1,293 @@
+import { app } from 'electron';
+import { randomUUID } from 'crypto';
+import * as path from 'path';
+import { pathToFileURL } from 'url';
+import { Worker } from 'worker_threads';
+import type {
+    DbOperationEvent,
+    DbWorkerMessage,
+    DbWorkerOperation,
+} from '../workers/database-worker.types';
+import {
+    isDbTraceEnabled,
+    roundTraceDuration,
+    summarizeForTrace,
+    trace,
+} from './debug-trace';
+import { resolveWorkerRuntimeBootstrap } from '../workers/worker-runtime-paths';
+
+type PendingRequest = {
+    resolve: (value: unknown) => void;
+    reject: (reason?: unknown) => void;
+    onEvent?: (event: DbOperationEvent) => void;
+    operation: DbWorkerOperation;
+    startedAt: number;
+};
+
+type RequestOptions = {
+    onEvent?: (event: DbOperationEvent) => void;
+};
+
+function createWorkerError(error: {
+    message: string;
+    name?: string;
+    stack?: string;
+}): Error {
+    const workerError = new Error(error.message);
+    workerError.name = error.name || 'DatabaseWorkerError';
+    workerError.stack = error.stack || workerError.stack;
+    return workerError;
+}
+
+export class DatabaseWorkerClient {
+    private worker: Worker | null = null;
+    private readyPromise: Promise<void> | null = null;
+    private readyResolve: (() => void) | null = null;
+    private readyReject: ((reason?: unknown) => void) | null = null;
+    private pendingRequests = new Map<string, PendingRequest>();
+    private shuttingDown = false;
+
+    async request<TResult>(
+        operation: DbWorkerOperation,
+        payload: unknown,
+        options?: RequestOptions
+    ): Promise<TResult> {
+        await this.ensureWorker();
+
+        const requestId = randomUUID();
+        const startedAt = Date.now();
+
+        if (isDbTraceEnabled()) {
+            trace('db-request', 'dispatch', {
+                operation,
+                payload: summarizeForTrace(payload),
+                requestId,
+            });
+        }
+
+        return new Promise<TResult>((resolve, reject) => {
+            this.pendingRequests.set(requestId, {
+                resolve: resolve as (value: unknown) => void,
+                reject,
+                onEvent: options?.onEvent,
+                operation,
+                startedAt,
+            });
+
+            this.worker?.postMessage({
+                type: 'request',
+                requestId,
+                operation,
+                payload,
+            });
+        });
+    }
+
+    async cancel(operationId: string): Promise<{ success: boolean }> {
+        if (!operationId) {
+            return { success: false };
+        }
+
+        await this.ensureWorker();
+        this.worker?.postMessage({
+            type: 'cancel',
+            operationId,
+        });
+
+        return { success: true };
+    }
+
+    async shutdown(): Promise<void> {
+        this.shuttingDown = true;
+        this.readyResolve = null;
+        this.readyReject = null;
+        this.readyPromise = null;
+
+        if (!this.worker) {
+            return;
+        }
+
+        const currentWorker = this.worker;
+        this.worker = null;
+        this.rejectAllPending(new Error('Database worker shut down'));
+
+        try {
+            await currentWorker.terminate();
+        } finally {
+            this.shuttingDown = false;
+        }
+    }
+
+    private async ensureWorker(): Promise<void> {
+        if (this.worker && this.readyPromise) {
+            return this.readyPromise;
+        }
+
+        this.createWorker();
+        return this.readyPromise!;
+    }
+
+    private createWorker(): void {
+        const bootstrap = resolveWorkerRuntimeBootstrap({
+            isPackaged: app.isPackaged,
+            workerFilename: 'database.worker.js',
+            developmentWorkerDir: path.join(__dirname, 'workers'),
+            resourcesPath: (
+                process as NodeJS.Process & { resourcesPath?: string }
+            ).resourcesPath,
+            appPath: app.getAppPath(),
+        });
+
+        this.readyPromise = new Promise<void>((resolve, reject) => {
+            this.readyResolve = resolve;
+            this.readyReject = reject;
+        });
+
+        try {
+            const workerURL = pathToFileURL(bootstrap.workerPath);
+
+            if (isDbTraceEnabled()) {
+                trace('db-worker', 'create', {
+                    nativeModuleSearchPaths:
+                        bootstrap.nativeModuleSearchPaths?.length ?? 0,
+                    workerPath: bootstrap.workerPath,
+                });
+            }
+
+            this.worker = new Worker(workerURL, {
+                workerData: {
+                    nativeModuleSearchPaths: bootstrap.nativeModuleSearchPaths,
+                },
+            });
+        } catch (error) {
+            this.readyReject?.(error);
+            this.resetWorkerState();
+            throw error;
+        }
+
+        this.worker.on('message', (message: DbWorkerMessage) => {
+            this.handleMessage(message);
+        });
+        this.worker.on('error', (error) => {
+            this.handleWorkerFailure(error);
+        });
+        this.worker.on('exit', (code) => {
+            this.handleWorkerExit(code);
+        });
+    }
+
+    private handleMessage(message: DbWorkerMessage): void {
+        if (message.type === 'ready') {
+            if (isDbTraceEnabled()) {
+                trace('db-worker', 'ready');
+            }
+            this.readyResolve?.();
+            this.readyResolve = null;
+            this.readyReject = null;
+            return;
+        }
+
+        if (message.type === 'event') {
+            if (isDbTraceEnabled()) {
+                trace('db-event', 'worker-event', {
+                    event: message.event,
+                    requestId: message.requestId,
+                });
+            }
+            this.pendingRequests.get(message.requestId)?.onEvent?.(message.event);
+            return;
+        }
+
+        const pendingRequest = this.pendingRequests.get(message.requestId);
+        if (!pendingRequest) {
+            return;
+        }
+
+        this.pendingRequests.delete(message.requestId);
+
+        if (message.success) {
+            if (isDbTraceEnabled()) {
+                trace('db-request', 'resolved', {
+                    durationMs: roundTraceDuration(
+                        Date.now() - pendingRequest.startedAt
+                    ),
+                    operation: pendingRequest.operation,
+                    requestId: message.requestId,
+                    result: summarizeForTrace(message.result),
+                });
+            }
+            pendingRequest.resolve(message.result);
+            return;
+        }
+
+        if (isDbTraceEnabled()) {
+            trace('db-request', 'failed', {
+                durationMs: roundTraceDuration(
+                    Date.now() - pendingRequest.startedAt
+                ),
+                error: message.error,
+                operation: pendingRequest.operation,
+                requestId: message.requestId,
+            });
+        }
+
+        pendingRequest.reject(
+            createWorkerError(
+                message.error ?? { message: 'Database worker request failed' }
+            )
+        );
+    }
+
+    private handleWorkerFailure(error: Error): void {
+        if (isDbTraceEnabled()) {
+            trace('db-worker', 'error', error);
+        }
+
+        if (this.readyReject) {
+            this.readyReject(error);
+        }
+
+        this.resetWorkerState();
+        this.rejectAllPending(error);
+    }
+
+    private handleWorkerExit(code: number): void {
+        if (this.shuttingDown) {
+            return;
+        }
+
+        if (isDbTraceEnabled()) {
+            trace('db-worker', 'exit', { code });
+        }
+
+        const error =
+            code === 0
+                ? new Error('Database worker exited unexpectedly')
+                : new Error(`Database worker stopped with exit code ${code}`);
+
+        if (this.readyReject) {
+            this.readyReject(error);
+        }
+
+        this.resetWorkerState();
+        this.rejectAllPending(error);
+    }
+
+    private resetWorkerState(): void {
+        this.worker = null;
+        this.readyPromise = null;
+        this.readyResolve = null;
+        this.readyReject = null;
+    }
+
+    private rejectAllPending(error: Error): void {
+        const pendingRequests = [...this.pendingRequests.values()];
+        this.pendingRequests.clear();
+
+        pendingRequests.forEach((request) => {
+            request.reject(error);
+        });
+    }
+}
+
+export const databaseWorkerClient = new DatabaseWorkerClient();
diff --git a/apps/electron-backend/src/app/services/debug-trace.ts b/apps/electron-backend/src/app/services/debug-trace.ts
new file mode 100644
index 0000000..8a24806
--- /dev/null
+++ b/apps/electron-backend/src/app/services/debug-trace.ts
@@ -0,0 +1,178 @@
+const TRACE_ENV_TRUE_VALUES = new Set(['1', 'true', 'yes', 'on']);
+const TRACE_PREFIX = '[IPTVnator Trace]';
+const MAX_TRACE_ARRAY_ITEMS = 5;
+const MAX_TRACE_OBJECT_KEYS = 8;
+const MAX_TRACE_STRING_LENGTH = 180;
+const MAX_TRACE_DEPTH = 2;
+
+export const DEBUG_TRACE_EVENT_CHANNEL = 'IPTVNATOR_DEBUG_TRACE_EVENT';
+
+function readFlag(name: string): boolean {
+    const value = process.env[name]?.trim().toLowerCase();
+    return value ? TRACE_ENV_TRUE_VALUES.has(value) : false;
+}
+
+function truncateString(value: string): string {
+    if (value.length <= MAX_TRACE_STRING_LENGTH) {
+        return value;
+    }
+
+    return `${value.slice(0, MAX_TRACE_STRING_LENGTH - 3)}...`;
+}
+
+function summarizeObject(
+    value: Record<string, unknown>,
+    depth: number
+): Record<string, unknown> {
+    const entries = Object.entries(value);
+    const summary: Record<string, unknown> = {};
+
+    if (
+        value.constructor?.name &&
+        value.constructor.name !== 'Object'
+    ) {
+        summary.__type = value.constructor.name;
+    }
+
+    entries.slice(0, MAX_TRACE_OBJECT_KEYS).forEach(([key, entryValue]) => {
+        summary[key] = summarizeForTrace(entryValue, depth + 1);
+    });
+
+    if (entries.length > MAX_TRACE_OBJECT_KEYS) {
+        summary.__moreKeys = entries.length - MAX_TRACE_OBJECT_KEYS;
+    }
+
+    return summary;
+}
+
+export function isStartupTraceEnabled(): boolean {
+    return readFlag('IPTVNATOR_TRACE_STARTUP');
+}
+
+export function isRendererApiTraceEnabled(): boolean {
+    return isStartupTraceEnabled() || readFlag('IPTVNATOR_TRACE_IPC');
+}
+
+export function isDbTraceEnabled(): boolean {
+    return isStartupTraceEnabled() || readFlag('IPTVNATOR_TRACE_DB');
+}
+
+export function isSqlTraceEnabled(): boolean {
+    return (
+        isStartupTraceEnabled() ||
+        readFlag('IPTVNATOR_TRACE_DB') ||
+        readFlag('IPTVNATOR_TRACE_SQL')
+    );
+}
+
+export function isWindowTraceEnabled(): boolean {
+    return isStartupTraceEnabled() || readFlag('IPTVNATOR_TRACE_WINDOW');
+}
+
+export function isRendererConsoleTraceEnabled(): boolean {
+    return readFlag('IPTVNATOR_TRACE_RENDERER_CONSOLE');
+}
+
+export function roundTraceDuration(durationMs: number): number {
+    return Math.round(durationMs * 10) / 10;
+}
+
+export function compactSqlForTrace(sql: string): string {
+    return truncateString(sql.replace(/\s+/g, ' ').trim());
+}
+
+export function summarizeForTrace(
+    value: unknown,
+    depth = 0
+): unknown {
+    if (
+        value == null ||
+        typeof value === 'boolean' ||
+        typeof value === 'number'
+    ) {
+        return value;
+    }
+
+    if (typeof value === 'string') {
+        return truncateString(value);
+    }
+
+    if (typeof value === 'bigint') {
+        return value.toString();
+    }
+
+    if (typeof value === 'function') {
+        return '[Function]';
+    }
+
+    if (value instanceof Error) {
+        return {
+            name: value.name,
+            message: truncateString(value.message),
+        };
+    }
+
+    if (depth >= MAX_TRACE_DEPTH) {
+        if (Array.isArray(value)) {
+            return {
+                type: 'array',
+                length: value.length,
+            };
+        }
+
+        return typeof value === 'object'
+            ? {
+                  type:
+                      (value as { constructor?: { name?: string } }).constructor
+                          ?.name ?? 'object',
+              }
+            : String(value);
+    }
+
+    if (Array.isArray(value)) {
+        return {
+            type: 'array',
+            length: value.length,
+            items: value
+                .slice(0, MAX_TRACE_ARRAY_ITEMS)
+                .map((entry) => summarizeForTrace(entry, depth + 1)),
+        };
+    }
+
+    if (typeof value === 'object') {
+        return summarizeObject(value as Record<string, unknown>, depth);
+    }
+
+    return String(value);
+}
+
+export function safeStringifyForTrace(payload: unknown): string {
+    try {
+        return JSON.stringify(payload);
+    } catch (error) {
+        return JSON.stringify({
+            fallback: summarizeForTrace(payload),
+            stringifyError:
+                error instanceof Error
+                    ? truncateString(error.message)
+                    : String(error),
+        });
+    }
+}
+
+export function trace(
+    scope: string,
+    message: string,
+    payload?: unknown
+): void {
+    if (payload === undefined) {
+        console.log(`${TRACE_PREFIX}[${scope}] ${message}`);
+        return;
+    }
+
+    console.log(
+        `${TRACE_PREFIX}[${scope}] ${message} ${safeStringifyForTrace(
+            summarizeForTrace(payload)
+        )}`
+    );
+}
diff --git a/apps/electron-backend/src/app/services/stalker-playback-context.service.ts b/apps/electron-backend/src/app/services/stalker-playback-context.service.ts
new file mode 100644
index 0000000..7e77854
--- /dev/null
+++ b/apps/electron-backend/src/app/services/stalker-playback-context.service.ts
@@ -0,0 +1,152 @@
+const STALKER_MAG_USER_AGENT =
+    'Mozilla/5.0 (QtEmbedded; U; Linux; C) AppleWebKit/533.3 (KHTML, like Gecko) MAG250';
+const STALKER_STREAM_USER_AGENT = 'KSPlayer';
+const STALKER_STREAM_RANGE_HEADER = 'bytes=0-';
+
+const CONTEXT_TTL_MS = 15 * 60 * 1000;
+
+type PlaybackContext = {
+    headers: Record<string, string>;
+    createdAt: number;
+};
+
+const playbackContextByStream = new Map<string, PlaybackContext>();
+const playbackContextByOrigin = new Map<string, PlaybackContext>();
+
+function normalizeStreamUrl(streamUrl: string): string {
+    const normalized = String(streamUrl ?? '').trim();
+    if (!normalized) return '';
+
+    const spaceIndex = normalized.indexOf(' ');
+    const maybeWrapped =
+        spaceIndex > 0 ? normalized.slice(spaceIndex + 1).trim() : normalized;
+
+    try {
+        const parsed = new URL(maybeWrapped);
+        return `${parsed.origin}${parsed.pathname}`;
+    } catch {
+        return maybeWrapped.split('?')[0];
+    }
+}
+
+function getOrigin(streamUrl: string): string {
+    const normalized = String(streamUrl ?? '').trim();
+    if (!normalized) return '';
+    const spaceIndex = normalized.indexOf(' ');
+    const maybeWrapped =
+        spaceIndex > 0 ? normalized.slice(spaceIndex + 1).trim() : normalized;
+    try {
+        return new URL(maybeWrapped).origin;
+    } catch {
+        return '';
+    }
+}
+
+function removeExpiredContextEntries() {
+    const now = Date.now();
+    for (const [key, value] of playbackContextByStream.entries()) {
+        if (now - value.createdAt > CONTEXT_TTL_MS) {
+            playbackContextByStream.delete(key);
+        }
+    }
+    for (const [key, value] of playbackContextByOrigin.entries()) {
+        if (now - value.createdAt > CONTEXT_TTL_MS) {
+            playbackContextByOrigin.delete(key);
+        }
+    }
+}
+
+export function rememberStalkerPlaybackContext(input: {
+    streamUrl: string;
+    portalUrl: string;
+    macAddress: string;
+    serialNumber?: string;
+    token?: string;
+}) {
+    const streamKey = normalizeStreamUrl(input.streamUrl);
+    if (!streamKey || !input.macAddress) return;
+
+    const cookieParts = [
+        `mac=${input.macAddress}`,
+        'stb_lang=en_US@rg=dezzzz',
+        'timezone=Europe/Berlin',
+    ];
+
+    if (input.serialNumber) {
+        cookieParts.push(
+            `__cfduid=${input.serialNumber.toLowerCase()}e030245495acd6ebfc1`
+        );
+    }
+
+    const streamOrigin = getOrigin(input.streamUrl) || undefined;
+
+    let portalOrigin: string | undefined;
+    try {
+        portalOrigin = new URL(input.portalUrl).origin;
+    } catch {
+        portalOrigin = undefined;
+    }
+
+    const crossOriginStream =
+        Boolean(streamOrigin) &&
+        Boolean(portalOrigin) &&
+        streamOrigin !== portalOrigin;
+
+    const headers: Record<string, string> = crossOriginStream
+        ? {
+              // Align with known working clients for direct tokenized stream URLs.
+              'User-Agent': STALKER_STREAM_USER_AGENT,
+              Accept: '*/*',
+              Range: STALKER_STREAM_RANGE_HEADER,
+              'Icy-MetaData': '1',
+              Connection: 'keep-alive',
+          }
+        : {
+              Cookie: cookieParts.join('; '),
+              'User-Agent': STALKER_MAG_USER_AGENT,
+              'X-User-Agent': STALKER_MAG_USER_AGENT,
+          };
+
+    if (!crossOriginStream && portalOrigin) {
+        headers['Origin'] = portalOrigin;
+        headers['Referer'] = portalOrigin;
+    }
+
+    if (!crossOriginStream && input.serialNumber) {
+        headers['SN'] = input.serialNumber;
+    }
+
+    if (!crossOriginStream && input.token) {
+        headers['Authorization'] = `Bearer ${input.token}`;
+    }
+
+    playbackContextByStream.set(streamKey, {
+        headers,
+        createdAt: Date.now(),
+    });
+    if (streamOrigin) {
+        playbackContextByOrigin.set(streamOrigin, {
+            headers,
+            createdAt: Date.now(),
+        });
+    }
+    removeExpiredContextEntries();
+}
+
+export function getStalkerPlaybackContextHeaders(
+    streamUrl: string
+): Record<string, string> | null {
+    removeExpiredContextEntries();
+    const streamKey = normalizeStreamUrl(streamUrl);
+    if (streamKey) {
+        const entry = playbackContextByStream.get(streamKey);
+        if (entry) {
+            return { ...entry.headers };
+        }
+    }
+
+    const origin = getOrigin(streamUrl);
+    if (!origin) return null;
+    const originEntry = playbackContextByOrigin.get(origin);
+    return originEntry ? { ...originEntry.headers } : null;
+}
diff --git a/apps/electron-backend/src/app/services/store.service.ts b/apps/electron-backend/src/app/services/store.service.ts
new file mode 100644
index 0000000..1b026af
--- /dev/null
+++ b/apps/electron-backend/src/app/services/store.service.ts
@@ -0,0 +1,22 @@
+import { Conf } from 'electron-conf/main';
+import { getElectronConfigDirectory } from 'database';
+
+export const WINDOW_BOUNDS = 'WINDOW_BOUNDS';
+export const MPV_PLAYER_PATH = 'MPV_PLAYER_PATH';
+export const VLC_PLAYER_PATH = 'VLC_PLAYER_PATH';
+export const MPV_REUSE_INSTANCE = 'MPV_REUSE_INSTANCE';
+
+export type StoreType = {
+    [WINDOW_BOUNDS]: Electron.Rectangle;
+    [MPV_PLAYER_PATH]: string;
+    [VLC_PLAYER_PATH]: string;
+    [MPV_REUSE_INSTANCE]: boolean;
+};
+
+// Export singleton store instance
+const electronConfigDirectory = getElectronConfigDirectory();
+const storeOptions = electronConfigDirectory
+    ? { dir: electronConfigDirectory }
+    : {};
+
+export const store = new Conf<StoreType>(storeOptions);
diff --git a/apps/electron-backend/src/app/workers/database-worker.types.ts b/apps/electron-backend/src/app/workers/database-worker.types.ts
new file mode 100644
index 0000000..f8fe3a9
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/database-worker.types.ts
@@ -0,0 +1,142 @@
+export const DB_WORKER_OPERATIONS = [
+    'DB_HAS_CATEGORIES',
+    'DB_GET_CATEGORIES',
+    'DB_SAVE_CATEGORIES',
+    'DB_GET_ALL_CATEGORIES',
+    'DB_UPDATE_CATEGORY_VISIBILITY',
+    'DB_HAS_CONTENT',
+    'DB_GET_CONTENT',
+    'DB_GET_GLOBAL_RECENTLY_ADDED',
+    'DB_SAVE_CONTENT',
+    'DB_CLEAR_XTREAM_IMPORT_CACHE',
+    'DB_GET_CONTENT_BY_XTREAM_ID',
+    'DB_SET_CONTENT_BACKDROP_IF_MISSING',
+    'DB_SEARCH_CONTENT',
+    'DB_GLOBAL_SEARCH',
+    'DB_CREATE_PLAYLIST',
+    'DB_UPSERT_APP_PLAYLIST',
+    'DB_UPSERT_APP_PLAYLISTS',
+    'DB_GET_APP_PLAYLISTS',
+    'DB_GET_APP_PLAYLIST',
+    'DB_GET_PLAYLIST',
+    'DB_UPDATE_PLAYLIST',
+    'DB_DELETE_PLAYLIST',
+    'DB_GET_APP_STATE',
+    'DB_SET_APP_STATE',
+    'DB_DELETE_ALL_PLAYLISTS',
+    'DB_DELETE_XTREAM_CONTENT',
+    'DB_RESTORE_XTREAM_USER_DATA',
+    'DB_ADD_FAVORITE',
+    'DB_REMOVE_FAVORITE',
+    'DB_IS_FAVORITE',
+    'DB_GET_FAVORITES',
+    'DB_GET_GLOBAL_FAVORITES',
+    'DB_GET_ALL_GLOBAL_FAVORITES',
+    'DB_REORDER_GLOBAL_FAVORITES',
+    'DB_GET_RECENTLY_VIEWED',
+    'DB_CLEAR_RECENTLY_VIEWED',
+    'DB_GET_RECENT_ITEMS',
+    'DB_ADD_RECENT_ITEM',
+    'DB_CLEAR_PLAYLIST_RECENT_ITEMS',
+    'DB_REMOVE_RECENT_ITEM',
+    'DB_SAVE_PLAYBACK_POSITION',
+    'DB_GET_PLAYBACK_POSITION',
+    'DB_GET_SERIES_PLAYBACK_POSITIONS',
+    'DB_GET_RECENT_PLAYBACK_POSITIONS',
+    'DB_GET_ALL_PLAYBACK_POSITIONS',
+    'DB_CLEAR_ALL_PLAYBACK_POSITIONS',
+    'DB_CLEAR_PLAYBACK_POSITION',
+] as const;
+
+export type DbWorkerOperation = (typeof DB_WORKER_OPERATIONS)[number];
+
+export const DB_OPERATION_NAMES = {
+    SAVE_CONTENT: 'save-content',
+    DELETE_XTREAM_CONTENT: 'delete-xtream-content',
+    RESTORE_XTREAM_USER_DATA: 'restore-xtream-user-data',
+    DELETE_PLAYLIST: 'delete-playlist',
+    DELETE_ALL_PLAYLISTS: 'delete-all-playlists',
+} as const;
+
+export type DbOperationName =
+    (typeof DB_OPERATION_NAMES)[keyof typeof DB_OPERATION_NAMES];
+
+export const DB_OPERATION_PHASES = {
+    PREPARING_CONTENT: 'preparing-content',
+    SAVING_CONTENT: 'saving-content',
+    COLLECTING_USER_DATA: 'collecting-user-data',
+    DELETING_FAVORITES: 'deleting-favorites',
+    DELETING_RECENTLY_VIEWED: 'deleting-recently-viewed',
+    DELETING_PLAYBACK_POSITIONS: 'deleting-playback-positions',
+    DELETING_DOWNLOADS: 'deleting-downloads',
+    DELETING_CONTENT: 'deleting-content',
+    DELETING_CATEGORIES: 'deleting-categories',
+    DELETING_PLAYLIST: 'deleting-playlist',
+    DELETING_PLAYLISTS: 'deleting-playlists',
+    RESTORING_FAVORITES: 'restoring-favorites',
+    RESTORING_RECENTLY_VIEWED: 'restoring-recently-viewed',
+} as const;
+
+export type DbOperationStatus =
+    | 'started'
+    | 'progress'
+    | 'completed'
+    | 'cancelled'
+    | 'error';
+
+export interface DbOperationEvent {
+    operationId?: string;
+    operation: DbOperationName | string;
+    playlistId?: string;
+    status: DbOperationStatus;
+    phase?: string;
+    current?: number;
+    total?: number;
+    increment?: number;
+    error?: string;
+}
+
+export interface SerializedWorkerError {
+    name?: string;
+    message: string;
+    stack?: string;
+}
+
+export interface DbWorkerRequestMessage<TPayload = unknown> {
+    type: 'request';
+    requestId: string;
+    operation: DbWorkerOperation;
+    payload: TPayload;
+}
+
+export interface DbWorkerCancelMessage {
+    type: 'cancel';
+    operationId: string;
+}
+
+export interface DbWorkerReadyMessage {
+    type: 'ready';
+}
+
+export interface DbWorkerEventMessage {
+    type: 'event';
+    requestId: string;
+    event: DbOperationEvent;
+}
+
+export interface DbWorkerResponseMessage<TResult = unknown> {
+    type: 'response';
+    requestId: string;
+    success: boolean;
+    result?: TResult;
+    error?: SerializedWorkerError;
+}
+
+export type DbWorkerIncomingMessage =
+    | DbWorkerRequestMessage
+    | DbWorkerCancelMessage;
+
+export type DbWorkerMessage =
+    | DbWorkerReadyMessage
+    | DbWorkerEventMessage
+    | DbWorkerResponseMessage;
diff --git a/apps/electron-backend/src/app/workers/database.worker-connection.ts b/apps/electron-backend/src/app/workers/database.worker-connection.ts
new file mode 100644
index 0000000..8e6d79d
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/database.worker-connection.ts
@@ -0,0 +1,107 @@
+import type BetterSqlite3 from 'better-sqlite3';
+import * as schema from 'database-schema';
+import { getIptvnatorDatabasePath } from 'database-path-utils';
+import { workerData } from 'worker_threads';
+import type { AppDatabase } from '../database/database.types';
+import {
+    getNativeModuleSearchPaths,
+    getWorkerDataNativeModuleSearchPaths,
+    loadNativeModuleFromSearchPaths,
+    registerNativeModuleSearchPaths,
+} from './worker-runtime-paths';
+import {
+    compactSqlForTrace,
+    isSqlTraceEnabled,
+    trace,
+} from '../services/debug-trace';
+
+let Database: typeof BetterSqlite3;
+let drizzleFactory:
+    | (typeof import('drizzle-orm/better-sqlite3'))['drizzle']
+    | undefined;
+
+const nativeModuleSearchPaths = [
+    ...getWorkerDataNativeModuleSearchPaths(workerData),
+    ...getNativeModuleSearchPaths({
+        resourcesPath: (
+            process as NodeJS.Process & { resourcesPath?: string }
+        ).resourcesPath,
+    }),
+];
+
+registerNativeModuleSearchPaths(nativeModuleSearchPaths);
+
+function loadBetterSqlite3(): typeof BetterSqlite3 {
+    return loadNativeModuleFromSearchPaths({
+        moduleName: 'better-sqlite3',
+        loggerLabel: '[DB Worker]',
+        searchPaths: nativeModuleSearchPaths,
+        fallbackRequire: () =>
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            require('better-sqlite3') as typeof BetterSqlite3,
+    });
+}
+
+function getDrizzleFactory(): (typeof import('drizzle-orm/better-sqlite3'))['drizzle'] {
+    if (drizzleFactory) {
+        return drizzleFactory;
+    }
+
+    // Require drizzle only after native lookup paths have been registered.
+    // Its better-sqlite3 driver resolves the native package at module load time.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    drizzleFactory = require('drizzle-orm/better-sqlite3').drizzle as (
+        typeof import('drizzle-orm/better-sqlite3')
+    )['drizzle'];
+
+    return drizzleFactory;
+}
+
+Database = loadBetterSqlite3();
+
+let db: AppDatabase | null = null;
+let sqlite: BetterSqlite3.Database | null = null;
+
+export async function getWorkerDatabase(): Promise<AppDatabase> {
+    if (db) {
+        return db;
+    }
+
+    const filePath = getIptvnatorDatabasePath();
+    sqlite = new Database(filePath, {
+        verbose: isSqlTraceEnabled()
+            ? (sql: string) => {
+                  trace('sql-worker', 'query', {
+                      sql: compactSqlForTrace(sql),
+                  });
+              }
+            : undefined,
+    });
+    sqlite.pragma('foreign_keys = ON');
+    sqlite.pragma('journal_mode = WAL');
+    sqlite.pragma('busy_timeout = 5000');
+
+    if (isSqlTraceEnabled()) {
+        trace('sql-worker', 'open', {
+            filePath,
+        });
+    }
+
+    db = getDrizzleFactory()(sqlite, { schema });
+    return db;
+}
+
+export function closeWorkerDatabase(): void {
+    if (!sqlite) {
+        return;
+    }
+
+    sqlite.close();
+
+    if (isSqlTraceEnabled()) {
+        trace('sql-worker', 'close');
+    }
+
+    sqlite = null;
+    db = null;
+}
diff --git a/apps/electron-backend/src/app/workers/database.worker.ts b/apps/electron-backend/src/app/workers/database.worker.ts
new file mode 100644
index 0000000..c5b53c8
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/database.worker.ts
@@ -0,0 +1,886 @@
+import {
+    closeWorkerDatabase,
+    getWorkerDatabase,
+} from './database.worker-connection';
+import { parentPort } from 'worker_threads';
+import type {
+    XtreamBackupFavoriteItem,
+    XtreamBackupRecentlyViewedItem,
+} from 'shared-interfaces';
+import type {
+    DbOperationEvent,
+    DbWorkerIncomingMessage,
+    DbWorkerMessage,
+    DbWorkerRequestMessage,
+} from './database-worker.types';
+import {
+    DB_OPERATION_NAMES,
+    DB_OPERATION_PHASES,
+} from './database-worker.types';
+import {
+    getAllCategories,
+    getCategories,
+    hasCategories,
+    saveCategories,
+    updateCategoryVisibility,
+} from '../database/operations/category.operations';
+import {
+    addFavorite,
+    getAllGlobalFavorites,
+    getFavorites,
+    getGlobalFavorites,
+    isFavorite,
+    removeFavorite,
+    reorderGlobalFavorites,
+} from '../database/operations/favorites.operations';
+import {
+    clearXtreamImportCache,
+    getContent,
+    getContentByXtreamId,
+    getGlobalRecentlyAdded,
+    globalSearch,
+    hasContent,
+    saveContent,
+    searchContent,
+} from '../database/operations/content.operations';
+import { setContentBackdropIfMissing } from '../database/operations/content-backdrop.operations';
+import {
+    clearAllPlaybackPositions,
+    clearPlaybackPosition,
+    getAllPlaybackPositions,
+    getPlaybackPosition,
+    getRecentPlaybackPositions,
+    getSeriesPlaybackPositions,
+    savePlaybackPosition,
+} from '../database/operations/playback-position.operations';
+import {
+    createPlaylist,
+    deleteAllPlaylists,
+    deletePlaylist,
+    getAppPlaylist,
+    getAppPlaylists,
+    getAppState,
+    getPlaylist,
+    setAppState,
+    updatePlaylist,
+    upsertAppPlaylist,
+    upsertAppPlaylists,
+} from '../database/operations/playlist.operations';
+import {
+    addRecentItem,
+    clearPlaylistRecentItems,
+    clearRecentlyViewed,
+    getRecentItems,
+    getRecentlyViewed,
+    removeRecentItem,
+} from '../database/operations/recently-viewed.operations';
+import {
+    deleteXtreamContent,
+    restoreXtreamUserData,
+} from '../database/operations/xtream.operations';
+
+const loggerLabel = '[DB Worker]';
+const batchDelayMs = Number.parseInt(
+    process.env['IPTVNATOR_DB_WORKER_BATCH_DELAY_MS'] ?? '0',
+    10
+);
+
+type ActiveOperationState = {
+    cancelled: boolean;
+};
+
+type OperationController = {
+    control: {
+        checkpoint: () => Promise<void>;
+        onProgress: (progress: {
+            phase: string;
+            current?: number;
+            total?: number;
+            increment?: number;
+        }) => Promise<void>;
+    };
+    emitStarted: (event: Partial<DbOperationEvent> & { phase: string }) => void;
+    emitCompleted: (
+        event?: Partial<DbOperationEvent> & { phase?: string }
+    ) => void;
+    emitCancelled: (
+        event?: Partial<DbOperationEvent> & { phase?: string }
+    ) => void;
+    emitError: (
+        error: unknown,
+        event?: Partial<DbOperationEvent> & { phase?: string }
+    ) => void;
+    cleanup: () => void;
+};
+
+const activeOperations = new Map<string, ActiveOperationState>();
+
+if (!parentPort) {
+    throw new Error('Database worker must be started with a parent port');
+}
+
+function createAbortError(message: string): Error {
+    const error = new Error(message);
+    error.name = 'AbortError';
+    return error;
+}
+
+function isAbortError(error: unknown): boolean {
+    return error instanceof Error && error.name === 'AbortError';
+}
+
+function serializeError(error: unknown) {
+    if (error instanceof Error) {
+        return {
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+        };
+    }
+
+    return {
+        message: String(error),
+    };
+}
+
+function postMessage(message: DbWorkerMessage): void {
+    parentPort?.postMessage(message);
+}
+
+function postEvent(requestId: string, event: DbOperationEvent): void {
+    postMessage({
+        type: 'event',
+        requestId,
+        event,
+    });
+}
+
+async function pauseBetweenBatches(): Promise<void> {
+    if (batchDelayMs <= 0) {
+        return;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, batchDelayMs));
+}
+
+function createOperationController(config: {
+    operationId?: string;
+    operation: string;
+    playlistId?: string;
+    requestId: string;
+    cancellable?: boolean;
+}): OperationController {
+    const { operationId, operation, playlistId, requestId } = config;
+    const cancellable = config.cancellable ?? true;
+    const activeState =
+        operationId && cancellable ? { cancelled: false } : null;
+
+    if (operationId && activeState) {
+        activeOperations.set(operationId, activeState);
+    }
+
+    let lastEvent: Partial<DbOperationEvent> = {};
+
+    const send = (
+        status: DbOperationEvent['status'],
+        event: Partial<DbOperationEvent> = {}
+    ): void => {
+        const mergedEvent: DbOperationEvent = {
+            operationId,
+            operation,
+            playlistId,
+            status,
+            phase: event.phase ?? lastEvent.phase,
+            current: event.current ?? lastEvent.current,
+            total: event.total ?? lastEvent.total,
+            increment: event.increment,
+            error: event.error,
+        };
+
+        lastEvent = {
+            phase: mergedEvent.phase,
+            current: mergedEvent.current,
+            total: mergedEvent.total,
+        };
+        postEvent(requestId, mergedEvent);
+    };
+
+    const checkpoint = async (): Promise<void> => {
+        if (activeState?.cancelled) {
+            throw createAbortError(`Operation "${operation}" was cancelled`);
+        }
+
+        await pauseBetweenBatches();
+
+        if (activeState?.cancelled) {
+            throw createAbortError(`Operation "${operation}" was cancelled`);
+        }
+    };
+
+    return {
+        control: {
+            checkpoint,
+            onProgress: async (progress) => {
+                send('progress', progress);
+            },
+        },
+        emitStarted: (event) => {
+            send('started', event);
+        },
+        emitCompleted: (event) => {
+            send('completed', event);
+        },
+        emitCancelled: (event) => {
+            send('cancelled', event);
+        },
+        emitError: (error, event) => {
+            send('error', {
+                ...event,
+                error: error instanceof Error ? error.message : String(error),
+            });
+        },
+        cleanup: () => {
+            if (operationId) {
+                activeOperations.delete(operationId);
+            }
+        },
+    };
+}
+
+async function executeTrackedOperation<TResult>(
+    config: Parameters<typeof createOperationController>[0],
+    handler: (controller: OperationController) => Promise<TResult>
+): Promise<TResult> {
+    const controller = createOperationController(config);
+
+    try {
+        return await handler(controller);
+    } catch (error) {
+        if (isAbortError(error)) {
+            controller.emitCancelled();
+        } else {
+            controller.emitError(error);
+        }
+        throw error;
+    } finally {
+        controller.cleanup();
+    }
+}
+
+async function executeRequest(message: DbWorkerRequestMessage) {
+    const db = await getWorkerDatabase();
+
+    switch (message.operation) {
+        case 'DB_HAS_CATEGORIES': {
+            const payload = message.payload as {
+                playlistId: string;
+                type: 'live' | 'movies' | 'series';
+            };
+            return hasCategories(db, payload.playlistId, payload.type);
+        }
+
+        case 'DB_GET_CATEGORIES': {
+            const payload = message.payload as {
+                playlistId: string;
+                type: 'live' | 'movies' | 'series';
+            };
+            return getCategories(db, payload.playlistId, payload.type);
+        }
+
+        case 'DB_SAVE_CATEGORIES': {
+            const payload = message.payload as {
+                playlistId: string;
+                categories: Array<{
+                    category_name: string;
+                    category_id: string | number;
+                }>;
+                type: 'live' | 'movies' | 'series';
+                hiddenCategoryXtreamIds?: number[];
+            };
+            return saveCategories(
+                db,
+                payload.playlistId,
+                payload.categories,
+                payload.type,
+                payload.hiddenCategoryXtreamIds
+            );
+        }
+
+        case 'DB_GET_ALL_CATEGORIES': {
+            const payload = message.payload as {
+                playlistId: string;
+                type: 'live' | 'movies' | 'series';
+            };
+            return getAllCategories(db, payload.playlistId, payload.type);
+        }
+
+        case 'DB_UPDATE_CATEGORY_VISIBILITY': {
+            const payload = message.payload as {
+                categoryIds: number[];
+                hidden: boolean;
+            };
+            return updateCategoryVisibility(
+                db,
+                payload.categoryIds,
+                payload.hidden
+            );
+        }
+
+        case 'DB_HAS_CONTENT': {
+            const payload = message.payload as {
+                playlistId: string;
+                type: 'live' | 'movie' | 'series';
+            };
+            return hasContent(db, payload.playlistId, payload.type);
+        }
+
+        case 'DB_GET_CONTENT': {
+            const payload = message.payload as {
+                playlistId: string;
+                type: 'live' | 'movie' | 'series';
+            };
+            return getContent(db, payload.playlistId, payload.type);
+        }
+
+        case 'DB_GET_GLOBAL_RECENTLY_ADDED': {
+            const payload = message.payload as {
+                kind?: 'all' | 'vod' | 'series';
+                limit?: number;
+                playlistType?:
+                    | 'xtream'
+                    | 'stalker'
+                    | 'm3u-file'
+                    | 'm3u-text'
+                    | 'm3u-url';
+            };
+            return getGlobalRecentlyAdded(
+                db,
+                payload.kind,
+                payload.limit,
+                payload.playlistType
+            );
+        }
+
+        case 'DB_SAVE_CONTENT': {
+            const payload = message.payload as {
+                playlistId: string;
+                streams: Array<Record<string, unknown>>;
+                type: 'live' | 'movie' | 'series';
+                operationId?: string;
+            };
+
+            return executeTrackedOperation(
+                {
+                    requestId: message.requestId,
+                    operation: DB_OPERATION_NAMES.SAVE_CONTENT,
+                    operationId: payload.operationId,
+                    playlistId: payload.playlistId,
+                },
+                async (controller) => {
+                    controller.emitStarted({
+                        phase: DB_OPERATION_PHASES.PREPARING_CONTENT,
+                        current: 0,
+                        total: payload.streams.length,
+                    });
+
+                    const result = await saveContent(
+                        db,
+                        payload.playlistId,
+                        payload.streams,
+                        payload.type,
+                        controller.control
+                    );
+
+                    controller.emitCompleted({
+                        phase: DB_OPERATION_PHASES.SAVING_CONTENT,
+                        current: result.count,
+                        total: result.count,
+                    });
+
+                    return result;
+                }
+            );
+        }
+
+        case 'DB_CLEAR_XTREAM_IMPORT_CACHE': {
+            const payload = message.payload as {
+                playlistId: string;
+                type: 'live' | 'movie' | 'series';
+            };
+
+            return clearXtreamImportCache(db, payload.playlistId, payload.type);
+        }
+
+        case 'DB_GET_CONTENT_BY_XTREAM_ID': {
+            const payload = message.payload as {
+                xtreamId: number;
+                playlistId: string;
+                contentType?: 'live' | 'movie' | 'series';
+            };
+            return getContentByXtreamId(
+                db,
+                payload.xtreamId,
+                payload.playlistId,
+                payload.contentType
+            );
+        }
+
+        case 'DB_SET_CONTENT_BACKDROP_IF_MISSING': {
+            const payload = message.payload as {
+                contentId: number;
+                backdropUrl?: string;
+            };
+            return setContentBackdropIfMissing(
+                db,
+                payload.contentId,
+                payload.backdropUrl
+            );
+        }
+
+        case 'DB_SEARCH_CONTENT': {
+            const payload = message.payload as {
+                playlistId: string;
+                searchTerm: string;
+                types: string[];
+                excludeHidden?: boolean;
+            };
+            return searchContent(
+                db,
+                payload.playlistId,
+                payload.searchTerm,
+                payload.types,
+                payload.excludeHidden
+            );
+        }
+
+        case 'DB_GLOBAL_SEARCH': {
+            const payload = message.payload as {
+                searchTerm: string;
+                types: string[];
+                excludeHidden?: boolean;
+            };
+            return globalSearch(
+                db,
+                payload.searchTerm,
+                payload.types,
+                payload.excludeHidden
+            );
+        }
+
+        case 'DB_CREATE_PLAYLIST': {
+            return createPlaylist(
+                db,
+                message.payload as {
+                    id: string;
+                    name: string;
+                    serverUrl?: string;
+                    username?: string;
+                    password?: string;
+                    macAddress?: string;
+                    url?: string;
+                    type: string;
+                }
+            );
+        }
+
+        case 'DB_UPSERT_APP_PLAYLIST': {
+            return upsertAppPlaylist(
+                db,
+                message.payload as Record<string, unknown>
+            );
+        }
+
+        case 'DB_UPSERT_APP_PLAYLISTS': {
+            return upsertAppPlaylists(
+                db,
+                message.payload as Record<string, unknown>[]
+            );
+        }
+
+        case 'DB_GET_APP_PLAYLISTS':
+            return getAppPlaylists(db);
+
+        case 'DB_GET_APP_PLAYLIST': {
+            const payload = message.payload as { playlistId: string };
+            return getAppPlaylist(db, payload.playlistId);
+        }
+
+        case 'DB_GET_PLAYLIST': {
+            const payload = message.payload as { playlistId: string };
+            return getPlaylist(db, payload.playlistId);
+        }
+
+        case 'DB_UPDATE_PLAYLIST': {
+            const payload = message.payload as {
+                playlistId: string;
+                updates: {
+                    name?: string;
+                    username?: string;
+                    password?: string;
+                    serverUrl?: string;
+                    lastUpdated?: string;
+                };
+            };
+            return updatePlaylist(db, payload.playlistId, payload.updates);
+        }
+
+        case 'DB_DELETE_PLAYLIST': {
+            const payload = message.payload as {
+                playlistId: string;
+                operationId?: string;
+            };
+
+            return executeTrackedOperation(
+                {
+                    requestId: message.requestId,
+                    operation: DB_OPERATION_NAMES.DELETE_PLAYLIST,
+                    operationId: payload.operationId,
+                    playlistId: payload.playlistId,
+                },
+                async (controller) => {
+                    controller.emitStarted({
+                        phase: DB_OPERATION_PHASES.DELETING_FAVORITES,
+                        current: 0,
+                    });
+
+                    const result = await deletePlaylist(
+                        db,
+                        payload.playlistId,
+                        controller.control
+                    );
+
+                    controller.emitCompleted({
+                        phase: DB_OPERATION_PHASES.DELETING_PLAYLIST,
+                        current: 1,
+                        total: 1,
+                    });
+
+                    return result;
+                }
+            );
+        }
+
+        case 'DB_GET_APP_STATE': {
+            const payload = message.payload as { key: string };
+            return getAppState(db, payload.key);
+        }
+
+        case 'DB_SET_APP_STATE': {
+            const payload = message.payload as { key: string; value: string };
+            return setAppState(db, payload.key, payload.value);
+        }
+
+        case 'DB_DELETE_ALL_PLAYLISTS': {
+            const payload = message.payload as { operationId?: string };
+
+            return executeTrackedOperation(
+                {
+                    requestId: message.requestId,
+                    operation: DB_OPERATION_NAMES.DELETE_ALL_PLAYLISTS,
+                    operationId: payload.operationId,
+                    cancellable: false,
+                },
+                async (controller) => {
+                    controller.emitStarted({
+                        phase: DB_OPERATION_PHASES.DELETING_FAVORITES,
+                        current: 0,
+                        total: 7,
+                    });
+
+                    const result = await deleteAllPlaylists(
+                        db,
+                        controller.control
+                    );
+
+                    controller.emitCompleted({
+                        phase: DB_OPERATION_PHASES.DELETING_PLAYLISTS,
+                        current: 7,
+                        total: 7,
+                    });
+
+                    return result;
+                }
+            );
+        }
+
+        case 'DB_DELETE_XTREAM_CONTENT': {
+            const payload = message.payload as {
+                playlistId: string;
+                operationId?: string;
+            };
+
+            return executeTrackedOperation(
+                {
+                    requestId: message.requestId,
+                    operation: DB_OPERATION_NAMES.DELETE_XTREAM_CONTENT,
+                    operationId: payload.operationId,
+                    playlistId: payload.playlistId,
+                },
+                async (controller) => {
+                    controller.emitStarted({
+                        phase: DB_OPERATION_PHASES.COLLECTING_USER_DATA,
+                        current: 0,
+                    });
+
+                    const result = await deleteXtreamContent(
+                        db,
+                        payload.playlistId,
+                        controller.control
+                    );
+
+                    controller.emitCompleted({
+                        phase: DB_OPERATION_PHASES.DELETING_CATEGORIES,
+                    });
+
+                    return result;
+                }
+            );
+        }
+
+        case 'DB_RESTORE_XTREAM_USER_DATA': {
+            const payload = message.payload as {
+                playlistId: string;
+                favorites: XtreamBackupFavoriteItem[];
+                recentlyViewed: XtreamBackupRecentlyViewedItem[];
+                operationId?: string;
+            };
+
+            return executeTrackedOperation(
+                {
+                    requestId: message.requestId,
+                    operation: DB_OPERATION_NAMES.RESTORE_XTREAM_USER_DATA,
+                    operationId: payload.operationId,
+                    playlistId: payload.playlistId,
+                },
+                async (controller) => {
+                    const totalItems =
+                        payload.favorites.length +
+                        payload.recentlyViewed.length;
+                    controller.emitStarted({
+                        phase: DB_OPERATION_PHASES.RESTORING_FAVORITES,
+                        current: 0,
+                        total: totalItems,
+                    });
+
+                    const result = await restoreXtreamUserData(
+                        db,
+                        payload.playlistId,
+                        payload.favorites,
+                        payload.recentlyViewed,
+                        controller.control
+                    );
+
+                    controller.emitCompleted({
+                        phase: DB_OPERATION_PHASES.RESTORING_RECENTLY_VIEWED,
+                        current: totalItems,
+                        total: totalItems,
+                    });
+
+                    return result;
+                }
+            );
+        }
+
+        case 'DB_ADD_FAVORITE': {
+            const payload = message.payload as {
+                contentId: number;
+                playlistId: string;
+                backdropUrl?: string;
+            };
+            return addFavorite(db, payload.contentId, payload.playlistId, {
+                backdropUrl: payload.backdropUrl,
+            });
+        }
+
+        case 'DB_REMOVE_FAVORITE': {
+            const payload = message.payload as {
+                contentId: number;
+                playlistId: string;
+            };
+            return removeFavorite(db, payload.contentId, payload.playlistId);
+        }
+
+        case 'DB_IS_FAVORITE': {
+            const payload = message.payload as {
+                contentId: number;
+                playlistId: string;
+            };
+            return isFavorite(db, payload.contentId, payload.playlistId);
+        }
+
+        case 'DB_GET_FAVORITES': {
+            const payload = message.payload as { playlistId: string };
+            return getFavorites(db, payload.playlistId);
+        }
+
+        case 'DB_GET_GLOBAL_FAVORITES':
+            return getGlobalFavorites(db);
+
+        case 'DB_GET_ALL_GLOBAL_FAVORITES':
+            return getAllGlobalFavorites(db);
+
+        case 'DB_REORDER_GLOBAL_FAVORITES': {
+            const payload = message.payload as {
+                updates: { content_id: number; position: number }[];
+            };
+            return reorderGlobalFavorites(db, payload.updates);
+        }
+
+        case 'DB_GET_RECENTLY_VIEWED':
+            return getRecentlyViewed(db);
+
+        case 'DB_CLEAR_RECENTLY_VIEWED':
+            return clearRecentlyViewed(db);
+
+        case 'DB_GET_RECENT_ITEMS': {
+            const payload = message.payload as { playlistId: string };
+            return getRecentItems(db, payload.playlistId);
+        }
+
+        case 'DB_ADD_RECENT_ITEM': {
+            const payload = message.payload as {
+                contentId: number;
+                playlistId: string;
+                backdropUrl?: string;
+            };
+            return addRecentItem(db, payload.contentId, payload.playlistId, {
+                backdropUrl: payload.backdropUrl,
+            });
+        }
+
+        case 'DB_CLEAR_PLAYLIST_RECENT_ITEMS': {
+            const payload = message.payload as { playlistId: string };
+            return clearPlaylistRecentItems(db, payload.playlistId);
+        }
+
+        case 'DB_REMOVE_RECENT_ITEM': {
+            const payload = message.payload as {
+                contentId: number;
+                playlistId: string;
+            };
+            return removeRecentItem(db, payload.contentId, payload.playlistId);
+        }
+
+        case 'DB_SAVE_PLAYBACK_POSITION': {
+            const payload = message.payload as {
+                playlistId: string;
+                data: {
+                    contentXtreamId: number;
+                    contentType: 'vod' | 'episode';
+                    seriesXtreamId?: number;
+                    seasonNumber?: number;
+                    episodeNumber?: number;
+                    positionSeconds: number;
+                    durationSeconds?: number;
+                    playlistType?:
+                        | 'xtream'
+                        | 'stalker'
+                        | 'm3u-file'
+                        | 'm3u-text'
+                        | 'm3u-url';
+                };
+            };
+            return savePlaybackPosition(db, payload.playlistId, payload.data);
+        }
+
+        case 'DB_GET_PLAYBACK_POSITION': {
+            const payload = message.payload as {
+                playlistId: string;
+                contentXtreamId: number;
+                contentType: 'vod' | 'episode';
+            };
+            return getPlaybackPosition(
+                db,
+                payload.playlistId,
+                payload.contentXtreamId,
+                payload.contentType
+            );
+        }
+
+        case 'DB_GET_SERIES_PLAYBACK_POSITIONS': {
+            const payload = message.payload as {
+                playlistId: string;
+                seriesXtreamId: number;
+            };
+            return getSeriesPlaybackPositions(
+                db,
+                payload.playlistId,
+                payload.seriesXtreamId
+            );
+        }
+
+        case 'DB_GET_RECENT_PLAYBACK_POSITIONS': {
+            const payload = message.payload as {
+                playlistId: string;
+                limit?: number;
+            };
+            return getRecentPlaybackPositions(
+                db,
+                payload.playlistId,
+                payload.limit
+            );
+        }
+
+        case 'DB_GET_ALL_PLAYBACK_POSITIONS': {
+            const payload = message.payload as { playlistId: string };
+            return getAllPlaybackPositions(db, payload.playlistId);
+        }
+
+        case 'DB_CLEAR_ALL_PLAYBACK_POSITIONS': {
+            const payload = message.payload as { playlistId: string };
+            return clearAllPlaybackPositions(db, payload.playlistId);
+        }
+
+        case 'DB_CLEAR_PLAYBACK_POSITION': {
+            const payload = message.payload as {
+                playlistId: string;
+                contentXtreamId: number;
+                contentType: 'vod' | 'episode';
+            };
+            return clearPlaybackPosition(
+                db,
+                payload.playlistId,
+                payload.contentXtreamId,
+                payload.contentType
+            );
+        }
+    }
+}
+
+parentPort.on('message', async (message: DbWorkerIncomingMessage) => {
+    if (message.type === 'cancel') {
+        const activeOperation = activeOperations.get(message.operationId);
+        if (activeOperation) {
+            activeOperation.cancelled = true;
+        }
+        return;
+    }
+
+    try {
+        const result = await executeRequest(message);
+        postMessage({
+            type: 'response',
+            requestId: message.requestId,
+            success: true,
+            result,
+        });
+    } catch (error) {
+        console.error(
+            loggerLabel,
+            `Error handling ${message.operation}:`,
+            error
+        );
+        postMessage({
+            type: 'response',
+            requestId: message.requestId,
+            success: false,
+            error: serializeError(error),
+        });
+    }
+});
+
+process.on('exit', () => {
+    closeWorkerDatabase();
+});
+
+postMessage({ type: 'ready' });
diff --git a/apps/electron-backend/src/app/workers/epg-parser.worker.ts b/apps/electron-backend/src/app/workers/epg-parser.worker.ts
new file mode 100644
index 0000000..0751708
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/epg-parser.worker.ts
@@ -0,0 +1,423 @@
+import type BetterSqlite3 from 'better-sqlite3';
+import { existsSync, mkdirSync } from 'fs';
+import { getIptvnatorDatabasePath } from 'database-path-utils';
+import { Readable } from 'stream';
+import { parentPort, workerData } from 'worker_threads';
+import { createGunzip } from 'zlib';
+import {
+    ParsedChannel,
+    ParsedProgram,
+    StreamingEpgParser,
+} from './epg-streaming-parser';
+import { shouldGunzipEpgResponse } from './epg-response-utils';
+import {
+    getNativeModuleSearchPaths,
+    getWorkerDataNativeModuleSearchPaths,
+    loadNativeModuleFromSearchPaths,
+    registerNativeModuleSearchPaths,
+} from './worker-runtime-paths';
+
+let Database: typeof BetterSqlite3;
+
+const nativeModuleSearchPaths = [
+    ...getWorkerDataNativeModuleSearchPaths(workerData),
+    ...getNativeModuleSearchPaths({
+        resourcesPath: (
+            process as NodeJS.Process & { resourcesPath?: string }
+        ).resourcesPath,
+    }),
+];
+
+registerNativeModuleSearchPaths(nativeModuleSearchPaths);
+
+function loadBetterSqlite3(): typeof BetterSqlite3 {
+    return loadNativeModuleFromSearchPaths({
+        moduleName: 'better-sqlite3',
+        loggerLabel: '[EPG Worker]',
+        searchPaths: nativeModuleSearchPaths,
+        fallbackRequire: () =>
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            require('better-sqlite3') as typeof BetterSqlite3,
+    });
+}
+
+Database = loadBetterSqlite3();
+
+/**
+ * Streaming EPG Parser Worker
+ * Uses SAX parsing to process XML incrementally without loading entire file into memory.
+ * Supports both regular and gzipped EPG files.
+ * Performs database operations directly to avoid blocking the main thread.
+ */
+
+interface WorkerMessage {
+    type: 'FETCH_EPG' | 'FORCE_FETCH' | 'CLEAR_EPG';
+    url?: string;
+}
+
+interface WorkerResponse {
+    type:
+        | 'EPG_COMPLETE'
+        | 'EPG_ERROR'
+        | 'EPG_PROGRESS'
+        | 'CLEAR_COMPLETE'
+        | 'READY';
+    error?: string;
+    url?: string;
+    stats?: {
+        totalChannels: number;
+        totalPrograms: number;
+    };
+}
+
+const loggerLabel = '[EPG Worker]';
+
+// Batch size for database inserts
+const CHANNEL_BATCH_SIZE = 100;
+const PROGRAM_BATCH_SIZE = 1000;
+
+/**
+ * Database helper class for EPG operations
+ * Creates its own connection to avoid blocking main thread
+ */
+class EpgDatabase {
+    private db: BetterSqlite3.Database;
+    private knownChannelIds: Set<string> = new Set();
+
+    // Prepared statements for better performance
+    private insertChannelStmt: BetterSqlite3.Statement;
+    private insertProgramStmt: BetterSqlite3.Statement;
+    private deleteChannelsStmt: BetterSqlite3.Statement;
+
+    constructor() {
+        const dbPath = getIptvnatorDatabasePath();
+        this.db = new Database(dbPath);
+        this.db.pragma('foreign_keys = ON');
+        this.db.pragma('journal_mode = WAL'); // Better concurrent write performance
+        this.db.pragma('busy_timeout = 5000');
+
+        // Prepare statements
+        // Use INSERT OR REPLACE to update existing channels and refresh updated_at
+        // Use strftime with ISO format for consistent date comparison
+        this.insertChannelStmt = this.db.prepare(`
+            INSERT INTO epg_channels (id, display_name, icon_url, url, source_url, updated_at)
+            VALUES (?, ?, ?, ?, ?, strftime('%Y-%m-%dT%H:%M:%SZ', 'now'))
+            ON CONFLICT(id) DO UPDATE SET
+                display_name = excluded.display_name,
+                icon_url = excluded.icon_url,
+                url = excluded.url,
+                source_url = excluded.source_url,
+                updated_at = strftime('%Y-%m-%dT%H:%M:%SZ', 'now')
+        `);
+
+        this.insertProgramStmt = this.db.prepare(`
+            INSERT INTO epg_programs (channel_id, start, stop, title, description, category, icon_url, rating, episode_num)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+        `);
+
+        this.deleteChannelsStmt = this.db.prepare(`
+            DELETE FROM epg_channels WHERE source_url = ?
+        `);
+    }
+
+    /**
+     * Clear existing EPG data for a source URL
+     */
+    clearSourceData(sourceUrl: string): void {
+        this.deleteChannelsStmt.run(sourceUrl);
+        this.knownChannelIds.clear();
+    }
+
+    /**
+     * Insert a batch of channels. When `clearFirst` is true, the existing rows
+     * for `sourceUrl` are deleted inside the same transaction as the insert so
+     * old data is preserved if the fetch/parse never produces any channels.
+     */
+    insertChannels(
+        channels: ParsedChannel[],
+        sourceUrl: string,
+        clearFirst = false
+    ): void {
+        const insertMany = this.db.transaction((channels: ParsedChannel[]) => {
+            if (clearFirst) {
+                this.deleteChannelsStmt.run(sourceUrl);
+                this.knownChannelIds.clear();
+            }
+            for (const channel of channels) {
+                const displayName =
+                    channel.displayName?.[0]?.value || channel.id;
+                const iconUrl = channel.icon?.[0]?.src || null;
+                const url = channel.url?.[0] || null;
+
+                this.insertChannelStmt.run(
+                    channel.id,
+                    displayName,
+                    iconUrl,
+                    url,
+                    sourceUrl
+                );
+                this.knownChannelIds.add(channel.id);
+            }
+        });
+
+        insertMany(channels);
+    }
+
+    /**
+     * Insert a batch of programs
+     * Only inserts programs for known channels to avoid FK constraint failures
+     */
+    insertPrograms(programs: ParsedProgram[]): number {
+        let insertedCount = 0;
+
+        const insertMany = this.db.transaction((programs: ParsedProgram[]) => {
+            for (const prog of programs) {
+                // Skip if channel not known
+                if (!this.knownChannelIds.has(prog.channel)) continue;
+
+                const title = prog.title?.[0]?.value || 'Unknown';
+                const description = prog.desc?.[0]?.value || null;
+                const category = prog.category?.[0]?.value || null;
+                const iconUrl = prog.icon?.[0]?.src || null;
+                const rating = prog.rating?.[0]?.value || null;
+                const episodeNum = prog.episodeNum?.[0]?.value || null;
+
+                try {
+                    this.insertProgramStmt.run(
+                        prog.channel,
+                        prog.start,
+                        prog.stop,
+                        title,
+                        description,
+                        category,
+                        iconUrl,
+                        rating,
+                        episodeNum
+                    );
+                    insertedCount++;
+                } catch (err) {
+                    // Skip individual failures (e.g., FK constraint)
+                }
+            }
+        });
+
+        insertMany(programs);
+        return insertedCount;
+    }
+
+    /**
+     * Close the database connection
+     */
+    close(): void {
+        this.db.close();
+    }
+}
+
+/**
+ * Fetches and parses EPG data from URL using streaming
+ * Inserts directly into SQLite to avoid blocking main thread
+ */
+async function fetchAndParseEpgStreaming(url: string): Promise<void> {
+    console.log(loggerLabel, `Fetching EPG from ${url}`);
+
+    // Create database connection in worker
+    const epgDb = new EpgDatabase();
+
+    // Old rows for this source are retained until the first successful insert
+    // batch arrives — see `hasClearedSource` below. That way, a fetch or parse
+    // that yields zero channels leaves the existing data intact instead of
+    // wiping it and leaving the URL permanently stale.
+    let hasClearedSource = false;
+
+    try {
+        const response = await fetch(url.trim());
+        const isGzipped = shouldGunzipEpgResponse(url, response);
+
+        if (response.url && response.url !== url) {
+            console.log(
+                loggerLabel,
+                `Resolved EPG redirect: ${url} -> ${response.url}`
+            );
+        }
+
+        console.log(
+            loggerLabel,
+            `EPG response detected as gzipped: ${isGzipped}`
+        );
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        if (!response.body) {
+            throw new Error('Response body is null');
+        }
+
+        const parser = new StreamingEpgParser(
+            (channels) => {
+                // Clear old rows in the same transaction as the first insert
+                // so we never end up with zero rows on a failed/empty parse.
+                epgDb.insertChannels(channels, url, !hasClearedSource);
+                hasClearedSource = true;
+            },
+            (programs) => {
+                // Insert programs directly into database
+                epgDb.insertPrograms(programs);
+            },
+            (totalChannels, totalPrograms) => {
+                // Send progress to main thread (lightweight)
+                const response: WorkerResponse = {
+                    type: 'EPG_PROGRESS',
+                    stats: { totalChannels, totalPrograms },
+                };
+                parentPort?.postMessage(response);
+            },
+            CHANNEL_BATCH_SIZE,
+            PROGRAM_BATCH_SIZE
+        );
+
+        // Convert web stream to Node.js stream
+        const nodeStream = Readable.fromWeb(response.body as any);
+
+        return new Promise((resolve, reject) => {
+            let dataStream: Readable = nodeStream;
+
+            if (isGzipped) {
+                const gunzip = createGunzip();
+                dataStream = nodeStream.pipe(gunzip);
+
+                gunzip.on('error', (err) => {
+                    console.error(loggerLabel, 'Gunzip error:', err);
+                    epgDb.close();
+                    reject(err);
+                });
+            }
+
+            dataStream.on('data', (chunk: Buffer) => {
+                try {
+                    parser.write(chunk.toString('utf-8'));
+                } catch (err) {
+                    console.error(loggerLabel, 'Parse error:', err);
+                    epgDb.close();
+                    reject(err);
+                }
+            });
+
+            dataStream.on('end', () => {
+                try {
+                    const stats = parser.finish();
+                    console.log(
+                        loggerLabel,
+                        `Parsing complete: ${stats.totalChannels} channels, ${stats.totalPrograms} programs`
+                    );
+
+                    // Close database connection
+                    epgDb.close();
+
+                    // Treat empty results as failure rather than silently
+                    // marking the URL as fetched — that causes the freshness
+                    // check to re-trigger a fetch every session and hides the
+                    // real problem (unreachable feed, SAX parse failure, etc.).
+                    if (stats.totalChannels === 0) {
+                        const errorMessage = `EPG parse produced 0 channels — feed may be unreachable or unsupported`;
+                        console.error(loggerLabel, `${errorMessage}: ${url}`);
+                        const response: WorkerResponse = {
+                            type: 'EPG_ERROR',
+                            url,
+                            error: errorMessage,
+                        };
+                        parentPort?.postMessage(response);
+                        reject(new Error(errorMessage));
+                        return;
+                    }
+
+                    const response: WorkerResponse = {
+                        type: 'EPG_COMPLETE',
+                        url,
+                        stats: {
+                            totalChannels: stats.totalChannels,
+                            totalPrograms: stats.totalPrograms,
+                        },
+                    };
+                    parentPort?.postMessage(response);
+                    resolve();
+                } catch (err) {
+                    epgDb.close();
+                    reject(err);
+                }
+            });
+
+            dataStream.on('error', (err) => {
+                console.error(loggerLabel, 'Stream error:', err);
+                epgDb.close();
+                reject(err);
+            });
+        });
+    } catch (error) {
+        epgDb.close();
+        throw error;
+    }
+}
+
+/**
+ * Clears all EPG data from the database
+ * Runs in worker thread to avoid blocking main thread
+ */
+function clearAllEpgData(): void {
+    const dbPath = getIptvnatorDatabasePath();
+    const db = new Database(dbPath);
+
+    try {
+        console.log(loggerLabel, 'Clearing all EPG data...');
+
+        // Delete programs first (foreign key constraint)
+        db.exec('DELETE FROM epg_programs');
+        // Then delete channels
+        db.exec('DELETE FROM epg_channels');
+
+        console.log(loggerLabel, 'All EPG data cleared');
+
+        const response: WorkerResponse = { type: 'CLEAR_COMPLETE' };
+        parentPort?.postMessage(response);
+    } catch (error) {
+        console.error(loggerLabel, 'Error clearing EPG data:', error);
+        const errorResponse: WorkerResponse = {
+            type: 'EPG_ERROR',
+            error: error instanceof Error ? error.message : String(error),
+        };
+        parentPort?.postMessage(errorResponse);
+    } finally {
+        db.close();
+    }
+}
+
+/**
+ * Worker message handler
+ */
+if (parentPort) {
+    parentPort.on('message', async (message: WorkerMessage) => {
+        try {
+            if (
+                message.type === 'FETCH_EPG' ||
+                message.type === 'FORCE_FETCH'
+            ) {
+                await fetchAndParseEpgStreaming(message.url!);
+            } else if (message.type === 'CLEAR_EPG') {
+                clearAllEpgData();
+            }
+        } catch (error) {
+            console.error(loggerLabel, 'Worker error:', error);
+            const errorResponse: WorkerResponse = {
+                type: 'EPG_ERROR',
+                error: error instanceof Error ? error.message : String(error),
+                url: message.url,
+            };
+            parentPort?.postMessage(errorResponse);
+        }
+    });
+
+    // Notify parent that worker is ready
+    parentPort.postMessage({ type: 'READY' });
+} else {
+    console.error(loggerLabel, 'parentPort is not available!');
+}
diff --git a/apps/electron-backend/src/app/workers/epg-response-utils.spec.ts b/apps/electron-backend/src/app/workers/epg-response-utils.spec.ts
new file mode 100644
index 0000000..99962c7
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/epg-response-utils.spec.ts
@@ -0,0 +1,59 @@
+import { shouldGunzipEpgResponse } from './epg-response-utils';
+
+describe('shouldGunzipEpgResponse', () => {
+    it('returns true for original .gz URLs', () => {
+        expect(
+            shouldGunzipEpgResponse('https://example.com/guide.xml.gz', {
+                headers: new Headers(),
+                url: 'https://example.com/guide.xml.gz',
+            })
+        ).toBe(true);
+    });
+
+    it('returns true when a redirect lands on a .gz URL', () => {
+        expect(
+            shouldGunzipEpgResponse('http://epg.vcboy.com', {
+                headers: new Headers(),
+                url: 'http://iptv-worker.sapireli.workers.dev/epg.xml.gz',
+            })
+        ).toBe(true);
+    });
+
+    it('returns false for gzip content-encoding without a gzip payload', () => {
+        expect(
+            shouldGunzipEpgResponse('https://example.com/guide', {
+                headers: new Headers([['content-encoding', 'gzip']]),
+                url: 'https://example.com/guide',
+            })
+        ).toBe(false);
+    });
+
+    it('returns true for gzip mime types', () => {
+        expect(
+            shouldGunzipEpgResponse('https://example.com/guide', {
+                headers: new Headers([['content-type', 'application/gzip']]),
+                url: 'https://example.com/guide',
+            })
+        ).toBe(true);
+    });
+
+    it('returns true when content-disposition advertises a .gz filename', () => {
+        expect(
+            shouldGunzipEpgResponse('https://example.com/guide', {
+                headers: new Headers([
+                    ['content-disposition', 'attachment; filename="guide.xml.gz"'],
+                ]),
+                url: 'https://example.com/guide',
+            })
+        ).toBe(true);
+    });
+
+    it('returns false for plain XML responses', () => {
+        expect(
+            shouldGunzipEpgResponse('https://example.com/guide.xml', {
+                headers: new Headers([['content-type', 'application/xml']]),
+                url: 'https://example.com/guide.xml',
+            })
+        ).toBe(false);
+    });
+});
diff --git a/apps/electron-backend/src/app/workers/epg-response-utils.ts b/apps/electron-backend/src/app/workers/epg-response-utils.ts
new file mode 100644
index 0000000..55db43d
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/epg-response-utils.ts
@@ -0,0 +1,39 @@
+function hasGzipPath(url: string | null | undefined): boolean {
+    if (!url) {
+        return false;
+    }
+
+    try {
+        return new URL(url).pathname.toLowerCase().endsWith('.gz');
+    } catch {
+        return url.toLowerCase().endsWith('.gz');
+    }
+}
+
+/**
+ * Detect whether an EPG response should be gunzipped.
+ * Some providers redirect plain-looking URLs to a `.gz` payload.
+ */
+export function shouldGunzipEpgResponse(
+    originalUrl: string,
+    response: { headers: Headers; url?: string }
+): boolean {
+    if (hasGzipPath(originalUrl) || hasGzipPath(response.url)) {
+        return true;
+    }
+
+    const contentType = response.headers.get('content-type');
+    if (
+        contentType &&
+        /(application\/gzip|application\/x-gzip)/i.test(contentType)
+    ) {
+        return true;
+    }
+
+    const contentDisposition = response.headers.get('content-disposition');
+    if (contentDisposition?.toLowerCase().includes('.gz')) {
+        return true;
+    }
+
+    return false;
+}
diff --git a/apps/electron-backend/src/app/workers/epg-streaming-parser.spec.ts b/apps/electron-backend/src/app/workers/epg-streaming-parser.spec.ts
new file mode 100644
index 0000000..a36a332
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/epg-streaming-parser.spec.ts
@@ -0,0 +1,57 @@
+import {
+    parseXmltvDate,
+    StreamingEpgParser,
+    type ParsedChannel,
+    type ParsedProgram,
+} from './epg-streaming-parser';
+
+describe('parseXmltvDate', () => {
+    it('normalizes XMLTV timestamps with timezone offsets', () => {
+        expect(parseXmltvDate('20260415053700 +0000')).toBe(
+            '2026-04-15T05:37:00+00:00'
+        );
+    });
+});
+
+describe('StreamingEpgParser', () => {
+    it('flushes pending channels before the first programme batch', () => {
+        const callbackOrder: string[] = [];
+        const channelIdsByBatch: string[][] = [];
+        const programmeChannelsByBatch: string[][] = [];
+
+        const parser = new StreamingEpgParser(
+            (channels: ParsedChannel[]) => {
+                callbackOrder.push('channels');
+                channelIdsByBatch.push(channels.map((channel) => channel.id));
+            },
+            (programs: ParsedProgram[]) => {
+                callbackOrder.push('programs');
+                programmeChannelsByBatch.push(
+                    programs.map((program) => program.channel)
+                );
+            },
+            () => undefined
+        );
+
+        const xml = [
+            '<?xml version="1.0" encoding="UTF-8"?>',
+            '<tv>',
+            ...Array.from({ length: 101 }, (_, index) => {
+                const id = `channel-${index + 1}`;
+                return `<channel id="${id}"><display-name>${id}</display-name></channel>`;
+            }),
+            '<programme start="20260415053700 +0000" stop="20260415062100 +0000" channel="channel-101"><title>Late channel</title></programme>',
+            '</tv>',
+        ].join('');
+
+        parser.write(xml);
+        parser.finish();
+
+        expect(callbackOrder).toEqual(['channels', 'channels', 'programs']);
+        expect(channelIdsByBatch).toEqual([
+            Array.from({ length: 100 }, (_, index) => `channel-${index + 1}`),
+            ['channel-101'],
+        ]);
+        expect(programmeChannelsByBatch).toEqual([['channel-101']]);
+    });
+});
diff --git a/apps/electron-backend/src/app/workers/epg-streaming-parser.ts b/apps/electron-backend/src/app/workers/epg-streaming-parser.ts
new file mode 100644
index 0000000..7c82e7d
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/epg-streaming-parser.ts
@@ -0,0 +1,309 @@
+import { SaxesParser, SaxesTagPlain } from 'saxes';
+
+export interface ParsedTextValue {
+    lang: string;
+    value: string;
+}
+
+export interface ParsedIcon {
+    src: string;
+    width?: number;
+    height?: number;
+}
+
+export interface ParsedRating {
+    system: string;
+    value: string;
+}
+
+export interface ParsedEpisodeNum {
+    system: string;
+    value: string;
+}
+
+export interface ParsedChannel {
+    id: string;
+    displayName: ParsedTextValue[];
+    icon: ParsedIcon[];
+    url: string[];
+}
+
+export interface ParsedProgram {
+    start: string;
+    stop: string;
+    channel: string;
+    title: ParsedTextValue[];
+    desc: ParsedTextValue[];
+    category: ParsedTextValue[];
+    date: string;
+    episodeNum: ParsedEpisodeNum[];
+    icon: ParsedIcon[];
+    rating: ParsedRating[];
+}
+
+/**
+ * Parse XMLTV datetime format to ISO string
+ * Format: YYYYMMDDHHmmss +HHMM or YYYYMMDDHHmmss
+ */
+export function parseXmltvDate(dateStr: string): string {
+    if (!dateStr) return '';
+
+    const match = dateStr.match(
+        /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})\s*([+-]\d{4})?$/
+    );
+
+    if (!match) return dateStr;
+
+    const [, year, month, day, hour, minute, second, tz] = match;
+
+    let isoString = `${year}-${month}-${day}T${hour}:${minute}:${second}`;
+
+    if (tz) {
+        isoString += `${tz.slice(0, 3)}:${tz.slice(3)}`;
+    } else {
+        isoString += 'Z';
+    }
+
+    return isoString;
+}
+
+/**
+ * Streaming EPG parser using SAX
+ */
+export class StreamingEpgParser {
+    private parser: SaxesParser;
+    private channels: ParsedChannel[] = [];
+    private programs: ParsedProgram[] = [];
+    private totalChannels = 0;
+    private totalPrograms = 0;
+
+    // Current element being parsed
+    private currentChannel: Partial<ParsedChannel> | null = null;
+    private currentProgram: Partial<ParsedProgram> | null = null;
+    private currentTextContent = '';
+    private currentLang = '';
+
+    // For nested elements
+    private elementStack: string[] = [];
+
+    constructor(
+        private readonly onChannelsBatch: (channels: ParsedChannel[]) => void,
+        private readonly onProgramsBatch: (programs: ParsedProgram[]) => void,
+        private readonly onProgress: (channels: number, programs: number) => void,
+        private readonly channelBatchSize = 100,
+        private readonly programBatchSize = 1000
+    ) {
+        this.parser = new SaxesParser();
+        this.setupParser();
+    }
+
+    private setupParser(): void {
+        this.parser.on('opentag', (tag: SaxesTagPlain) => {
+            this.elementStack.push(tag.name);
+            this.currentTextContent = '';
+
+            switch (tag.name) {
+                case 'channel':
+                    this.currentChannel = {
+                        id: (tag.attributes['id'] as string) || '',
+                        displayName: [],
+                        icon: [],
+                        url: [],
+                    };
+                    break;
+
+                case 'programme':
+                    // XMLTV feeds typically emit all <channel> entries before
+                    // the first <programme>. Flush any pending channel batch
+                    // so downstream program consumers can resolve late-channel
+                    // IDs immediately instead of dropping the first rows.
+                    this.flushChannels();
+                    this.currentProgram = {
+                        start: parseXmltvDate(
+                            (tag.attributes['start'] as string) || ''
+                        ),
+                        stop: parseXmltvDate(
+                            (tag.attributes['stop'] as string) || ''
+                        ),
+                        channel: (tag.attributes['channel'] as string) || '',
+                        title: [],
+                        desc: [],
+                        category: [],
+                        date: '',
+                        episodeNum: [],
+                        icon: [],
+                        rating: [],
+                    };
+                    break;
+
+                case 'icon':
+                    if (this.currentChannel) {
+                        this.currentChannel.icon!.push({
+                            src: (tag.attributes['src'] as string) || '',
+                            width: tag.attributes['width']
+                                ? parseInt(tag.attributes['width'] as string)
+                                : undefined,
+                            height: tag.attributes['height']
+                                ? parseInt(tag.attributes['height'] as string)
+                                : undefined,
+                        });
+                    } else if (this.currentProgram) {
+                        this.currentProgram.icon!.push({
+                            src: (tag.attributes['src'] as string) || '',
+                            width: tag.attributes['width']
+                                ? parseInt(tag.attributes['width'] as string)
+                                : undefined,
+                            height: tag.attributes['height']
+                                ? parseInt(tag.attributes['height'] as string)
+                                : undefined,
+                        });
+                    }
+                    break;
+
+                case 'display-name':
+                case 'title':
+                case 'desc':
+                case 'category':
+                    this.currentLang = (tag.attributes['lang'] as string) || '';
+                    break;
+
+                case 'rating':
+                    if (this.currentProgram) {
+                        const system =
+                            (tag.attributes['system'] as string) || '';
+                        this.currentProgram.rating!.push({ system, value: '' });
+                    }
+                    break;
+
+                case 'episode-num':
+                    if (this.currentProgram) {
+                        const system =
+                            (tag.attributes['system'] as string) || '';
+                        this.currentProgram.episodeNum!.push({
+                            system,
+                            value: '',
+                        });
+                    }
+                    break;
+            }
+        });
+
+        this.parser.on('text', (text: string) => {
+            this.currentTextContent += text;
+        });
+
+        this.parser.on('closetag', (tag: SaxesTagPlain) => {
+            const text = this.currentTextContent.trim();
+
+            if (this.currentChannel) {
+                switch (tag.name) {
+                    case 'display-name':
+                        this.currentChannel.displayName!.push({
+                            lang: this.currentLang,
+                            value: text,
+                        });
+                        break;
+                    case 'url':
+                        if (text) this.currentChannel.url!.push(text);
+                        break;
+                    case 'channel':
+                        this.channels.push(this.currentChannel as ParsedChannel);
+                        this.totalChannels++;
+                        this.currentChannel = null;
+
+                        if (this.channels.length >= this.channelBatchSize) {
+                            this.flushChannels();
+                        }
+                        break;
+                }
+            }
+
+            if (this.currentProgram) {
+                switch (tag.name) {
+                    case 'title':
+                        this.currentProgram.title!.push({
+                            lang: this.currentLang,
+                            value: text,
+                        });
+                        break;
+                    case 'desc':
+                        this.currentProgram.desc!.push({
+                            lang: this.currentLang,
+                            value: text,
+                        });
+                        break;
+                    case 'category':
+                        this.currentProgram.category!.push({
+                            lang: this.currentLang,
+                            value: text,
+                        });
+                        break;
+                    case 'date':
+                        this.currentProgram.date = text;
+                        break;
+                    case 'value':
+                        if (
+                            this.elementStack.includes('rating') &&
+                            this.currentProgram.rating!.length > 0
+                        ) {
+                            this.currentProgram.rating![
+                                this.currentProgram.rating!.length - 1
+                            ].value = text;
+                        }
+                        break;
+                    case 'episode-num':
+                        if (this.currentProgram.episodeNum!.length > 0) {
+                            this.currentProgram.episodeNum![
+                                this.currentProgram.episodeNum!.length - 1
+                            ].value = text;
+                        }
+                        break;
+                    case 'programme':
+                        this.programs.push(this.currentProgram as ParsedProgram);
+                        this.totalPrograms++;
+
+                        if (this.programs.length >= this.programBatchSize) {
+                            this.flushChannels();
+                            this.flushPrograms();
+                        }
+                        this.currentProgram = null;
+                        break;
+                }
+            }
+
+            this.elementStack.pop();
+            this.currentTextContent = '';
+        });
+    }
+
+    private flushChannels(): void {
+        if (this.channels.length > 0) {
+            this.onChannelsBatch([...this.channels]);
+            this.channels = [];
+            this.onProgress(this.totalChannels, this.totalPrograms);
+        }
+    }
+
+    private flushPrograms(): void {
+        if (this.programs.length > 0) {
+            this.onProgramsBatch([...this.programs]);
+            this.programs = [];
+            this.onProgress(this.totalChannels, this.totalPrograms);
+        }
+    }
+
+    write(chunk: string): void {
+        this.parser.write(chunk);
+    }
+
+    finish(): { totalChannels: number; totalPrograms: number } {
+        this.parser.close();
+        this.flushChannels();
+        this.flushPrograms();
+
+        return {
+            totalChannels: this.totalChannels,
+            totalPrograms: this.totalPrograms,
+        };
+    }
+}
diff --git a/apps/electron-backend/src/app/workers/playlist-refresh.worker.ts b/apps/electron-backend/src/app/workers/playlist-refresh.worker.ts
new file mode 100644
index 0000000..959ce6b
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/playlist-refresh.worker.ts
@@ -0,0 +1,188 @@
+import axios from 'axios';
+import { parentPort } from 'worker_threads';
+import { parse } from 'iptv-playlist-parser';
+import { readFile } from 'node:fs/promises';
+import { createPlaylistObject, getFilenameFromUrl } from 'm3u-utils';
+import type {
+    Playlist,
+    PlaylistRefreshEvent,
+    PlaylistRefreshPayload,
+} from 'shared-interfaces';
+import type {
+    PlaylistRefreshWorkerIncomingMessage,
+    PlaylistRefreshWorkerMessage,
+} from './playlist-refresh.worker.types';
+
+const https = require('https');
+
+type ActiveRefreshState = {
+    cancelled: boolean;
+    controller: AbortController;
+};
+
+const activeRefreshes = new Map<string, ActiveRefreshState>();
+
+if (!parentPort) {
+    throw new Error('Playlist refresh worker must be started with a parent port');
+}
+
+function postMessage(message: PlaylistRefreshWorkerMessage<Playlist>): void {
+    parentPort?.postMessage(message);
+}
+
+function serializeError(error: unknown) {
+    if (error instanceof Error) {
+        return {
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+        };
+    }
+
+    return {
+        message: String(error),
+    };
+}
+
+function createAbortError(operationId: string): Error {
+    const error = new Error(`Playlist refresh "${operationId}" was cancelled`);
+    error.name = 'AbortError';
+    return error;
+}
+
+function emitEvent(
+    payload: PlaylistRefreshPayload,
+    partial: Omit<PlaylistRefreshEvent, 'operationId' | 'playlistId'>
+): void {
+    postMessage({
+        type: 'event',
+        event: {
+            operationId: payload.operationId,
+            playlistId: payload.playlistId,
+            ...partial,
+        },
+    });
+}
+
+function checkpoint(payload: PlaylistRefreshPayload): void {
+    const active = activeRefreshes.get(payload.operationId);
+    if (active?.cancelled) {
+        throw createAbortError(payload.operationId);
+    }
+}
+
+async function fetchPlaylistFromUrl(
+    payload: PlaylistRefreshPayload,
+    controller: AbortController
+): Promise<Playlist> {
+    emitEvent(payload, { status: 'started', phase: 'fetching' });
+    checkpoint(payload);
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+    const result = await axios.get(payload.url!, {
+        httpsAgent: agent,
+        signal: controller.signal,
+        timeout: 30000,
+    });
+
+    checkpoint(payload);
+    emitEvent(payload, { status: 'progress', phase: 'parsing' });
+    const parsedPlaylist = parse(result.data);
+    checkpoint(payload);
+
+    const extractedName =
+        payload.url && payload.url.length > 1
+            ? getFilenameFromUrl(payload.url)
+            : '';
+    const playlistName =
+        !extractedName || extractedName === 'Untitled playlist'
+            ? 'Imported from URL'
+            : extractedName;
+
+    return createPlaylistObject(
+        payload.title || playlistName,
+        parsedPlaylist,
+        payload.url,
+        'URL'
+    );
+}
+
+async function fetchPlaylistFromFile(
+    payload: PlaylistRefreshPayload
+): Promise<Playlist> {
+    emitEvent(payload, { status: 'started', phase: 'reading-file' });
+    checkpoint(payload);
+    const fileContent = await readFile(payload.filePath!, 'utf-8');
+    checkpoint(payload);
+
+    emitEvent(payload, { status: 'progress', phase: 'parsing' });
+    const parsedPlaylist = parse(fileContent);
+    checkpoint(payload);
+
+    return createPlaylistObject(
+        payload.title,
+        parsedPlaylist,
+        payload.filePath,
+        'FILE'
+    );
+}
+
+async function executeRefresh(payload: PlaylistRefreshPayload): Promise<Playlist> {
+    const controller = new AbortController();
+    activeRefreshes.set(payload.operationId, {
+        cancelled: false,
+        controller,
+    });
+
+    try {
+        const playlist = payload.url
+            ? await fetchPlaylistFromUrl(payload, controller)
+            : await fetchPlaylistFromFile(payload);
+
+        checkpoint(payload);
+        return playlist;
+    } finally {
+        activeRefreshes.delete(payload.operationId);
+    }
+}
+
+parentPort.on('message', async (message: PlaylistRefreshWorkerIncomingMessage) => {
+    if (message.type === 'cancel') {
+        const active = activeRefreshes.get(message.operationId);
+        if (active) {
+            active.cancelled = true;
+            active.controller.abort();
+        }
+        return;
+    }
+
+    try {
+        const result = await executeRefresh(message.payload);
+        postMessage({
+            type: 'response',
+            success: true,
+            result,
+        });
+    } catch (error) {
+        const payload = message.payload;
+        if (error instanceof Error && error.name === 'AbortError') {
+            emitEvent(payload, { status: 'cancelled', phase: 'parsing' });
+        } else {
+            emitEvent(payload, {
+                status: 'error',
+                phase: payload.url ? 'fetching' : 'reading-file',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+
+        postMessage({
+            type: 'response',
+            success: false,
+            error: serializeError(error),
+        });
+    }
+});
+
+postMessage({ type: 'ready' });
diff --git a/apps/electron-backend/src/app/workers/playlist-refresh.worker.types.ts b/apps/electron-backend/src/app/workers/playlist-refresh.worker.types.ts
new file mode 100644
index 0000000..ed66073
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/playlist-refresh.worker.types.ts
@@ -0,0 +1,40 @@
+import type { PlaylistRefreshEvent, PlaylistRefreshPayload } from 'shared-interfaces';
+
+export interface PlaylistRefreshWorkerRequestMessage {
+    type: 'request';
+    payload: PlaylistRefreshPayload;
+}
+
+export interface PlaylistRefreshWorkerCancelMessage {
+    type: 'cancel';
+    operationId: string;
+}
+
+export interface PlaylistRefreshWorkerReadyMessage {
+    type: 'ready';
+}
+
+export interface PlaylistRefreshWorkerEventMessage {
+    type: 'event';
+    event: PlaylistRefreshEvent;
+}
+
+export interface PlaylistRefreshWorkerResponseMessage<TResult = unknown> {
+    type: 'response';
+    success: boolean;
+    result?: TResult;
+    error?: {
+        name?: string;
+        message: string;
+        stack?: string;
+    };
+}
+
+export type PlaylistRefreshWorkerIncomingMessage =
+    | PlaylistRefreshWorkerRequestMessage
+    | PlaylistRefreshWorkerCancelMessage;
+
+export type PlaylistRefreshWorkerMessage<TResult = unknown> =
+    | PlaylistRefreshWorkerReadyMessage
+    | PlaylistRefreshWorkerEventMessage
+    | PlaylistRefreshWorkerResponseMessage<TResult>;
diff --git a/apps/electron-backend/src/app/workers/worker-runtime-paths.spec.ts b/apps/electron-backend/src/app/workers/worker-runtime-paths.spec.ts
new file mode 100644
index 0000000..70d7691
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/worker-runtime-paths.spec.ts
@@ -0,0 +1,180 @@
+import * as path from 'path';
+import {
+    getNativeModuleSearchPaths,
+    loadNativeModuleFromSearchPaths,
+    registerNativeModuleSearchPaths,
+    resolveWorkerRuntimeBootstrap,
+} from './worker-runtime-paths';
+
+describe('worker-runtime-paths', () => {
+    it('resolves the development worker path when the worker file exists', () => {
+        const bootstrap = resolveWorkerRuntimeBootstrap({
+            isPackaged: false,
+            workerFilename: 'database.worker.js',
+            developmentWorkerDir: '/workspace/dist/apps/electron-backend/workers',
+            fileExists: (filePath) =>
+                filePath ===
+                '/workspace/dist/apps/electron-backend/workers/database.worker.js',
+        });
+
+        expect(bootstrap).toEqual({
+            workerPath:
+                '/workspace/dist/apps/electron-backend/workers/database.worker.js',
+            workerPathCandidates: [
+                '/workspace/dist/apps/electron-backend/workers/database.worker.js',
+            ],
+        });
+    });
+
+    it('prefers process.resourcesPath for packaged worker resolution', () => {
+        const bootstrap = resolveWorkerRuntimeBootstrap({
+            isPackaged: true,
+            workerFilename: 'epg-parser.worker.js',
+            developmentWorkerDir: '/unused',
+            resourcesPath: '/Applications/IPTVnator.app/Contents/Resources',
+            appPath:
+                '/Applications/IPTVnator.app/Contents/Resources/app.asar',
+            fileExists: (filePath) =>
+                filePath ===
+                '/Applications/IPTVnator.app/Contents/Resources/dist/apps/electron-backend/workers/epg-parser.worker.js',
+        });
+
+        expect(bootstrap.workerPath).toBe(
+            '/Applications/IPTVnator.app/Contents/Resources/dist/apps/electron-backend/workers/epg-parser.worker.js'
+        );
+        expect(bootstrap.nativeModuleSearchPaths).toEqual([
+            '/Applications/IPTVnator.app/Contents/Resources/app.asar.unpacked/node_modules',
+            '/Applications/IPTVnator.app/Contents/Resources/app.asar.unpacked/electron-backend/node_modules',
+            '/Applications/IPTVnator.app/Contents/Resources/app.asar.unpacked/dist/apps/electron-backend/node_modules',
+        ]);
+    });
+
+    it('falls back to appPath dirname when the resourcesPath candidate is missing', () => {
+        const bootstrap = resolveWorkerRuntimeBootstrap({
+            isPackaged: true,
+            workerFilename: 'database.worker.js',
+            developmentWorkerDir: '/unused',
+            resourcesPath: '/tmp/runtime-resources',
+            appPath: '/opt/IPTVnator/resources/app.asar',
+            fileExists: (filePath) =>
+                filePath ===
+                '/opt/IPTVnator/resources/dist/apps/electron-backend/workers/database.worker.js',
+        });
+
+        expect(bootstrap.workerPath).toBe(
+            '/opt/IPTVnator/resources/dist/apps/electron-backend/workers/database.worker.js'
+        );
+        expect(bootstrap.workerPathCandidates).toEqual([
+            '/tmp/runtime-resources/dist/apps/electron-backend/workers/database.worker.js',
+            '/opt/IPTVnator/resources/dist/apps/electron-backend/workers/database.worker.js',
+        ]);
+    });
+
+    it('throws actionable errors when the worker file cannot be resolved', () => {
+        expect(() =>
+            resolveWorkerRuntimeBootstrap({
+                isPackaged: true,
+                workerFilename: 'database.worker.js',
+                developmentWorkerDir: '/unused',
+                resourcesPath: '/resources',
+                appPath: '/opt/IPTVnator/resources/app.asar',
+                fileExists: () => false,
+            })
+        ).toThrow(
+            [
+                'Unable to resolve worker "database.worker.js".',
+                'Tried:',
+                '- /resources/dist/apps/electron-backend/workers/database.worker.js',
+                '- /opt/IPTVnator/resources/dist/apps/electron-backend/workers/database.worker.js',
+            ].join('\n')
+        );
+    });
+
+    it('de-duplicates native module search paths when resource roots match', () => {
+        expect(
+            getNativeModuleSearchPaths({
+                resourcesPath: '/resources',
+                appPath: '/resources/app.asar',
+            })
+        ).toEqual([
+            '/resources/app.asar.unpacked/node_modules',
+            '/resources/app.asar.unpacked/electron-backend/node_modules',
+            '/resources/app.asar.unpacked/dist/apps/electron-backend/node_modules',
+        ]);
+    });
+
+    it('loads native modules from the first working candidate path', () => {
+        const requireFactory = jest.fn((entryPath: string) => {
+            if (entryPath === path.join('/second', 'index.js')) {
+                return ((moduleName: string) => ({
+                    moduleName,
+                    entryPath,
+                })) as NodeRequire;
+            }
+
+            throw new Error('bad path');
+        });
+
+        const moduleValue = loadNativeModuleFromSearchPaths({
+            moduleName: 'better-sqlite3',
+            loggerLabel: '[Worker]',
+            searchPaths: ['/first', '/second'],
+            fileExists: (searchPath) => searchPath !== '/first-missing',
+            requireFactory,
+        });
+
+        expect(moduleValue).toEqual({
+            moduleName: 'better-sqlite3',
+            entryPath: path.join('/second', 'index.js'),
+        });
+    });
+
+    it('registers native module search paths in NODE_PATH and module globalPaths', () => {
+        const env: NodeJS.ProcessEnv = {};
+        const moduleApi = {
+            globalPaths: ['/global'],
+        };
+
+        const registeredPaths = registerNativeModuleSearchPaths(
+            ['/first', '/second', '/global'],
+            {
+                env,
+                moduleApi,
+            }
+        );
+
+        expect(registeredPaths).toEqual(['/first', '/second', '/global']);
+        expect(env.NODE_PATH).toBe(
+            ['/first', '/second', '/global'].join(path.delimiter)
+        );
+        expect(moduleApi.globalPaths).toEqual(['/first', '/second', '/global']);
+    });
+
+    it('throws aggregated errors when no native module candidate works', () => {
+        expect(() =>
+            loadNativeModuleFromSearchPaths({
+                moduleName: 'better-sqlite3',
+                loggerLabel: '[Worker]',
+                searchPaths: ['/missing', '/broken'],
+                fileExists: (searchPath) => searchPath === '/broken',
+                requireFactory: () => {
+                    throw new Error('Cannot find module');
+                },
+                fallbackRequire: () => {
+                    throw new Error('fallback failed');
+                },
+            })
+        ).toThrow(
+            [
+                '[Worker] Unable to load native module "better-sqlite3".',
+                'Tried:',
+                '- /missing',
+                '- /broken',
+                'Failures:',
+                '- /missing (missing)',
+                '- /broken (Cannot find module)',
+                '- require(better-sqlite3) (fallback failed)',
+            ].join('\n')
+        );
+    });
+});
diff --git a/apps/electron-backend/src/app/workers/worker-runtime-paths.ts b/apps/electron-backend/src/app/workers/worker-runtime-paths.ts
new file mode 100644
index 0000000..030edc0
--- /dev/null
+++ b/apps/electron-backend/src/app/workers/worker-runtime-paths.ts
@@ -0,0 +1,261 @@
+import { existsSync } from 'fs';
+import { createRequire } from 'module';
+import * as path from 'path';
+
+const WORKER_RELATIVE_PATH = [
+    'dist',
+    'apps',
+    'electron-backend',
+    'workers',
+] as const;
+
+const NATIVE_MODULE_RELATIVE_PATHS = [
+    ['app.asar.unpacked', 'node_modules'],
+    ['app.asar.unpacked', 'electron-backend', 'node_modules'],
+    ['app.asar.unpacked', 'dist', 'apps', 'electron-backend', 'node_modules'],
+] as const;
+
+type FileExists = (filePath: string) => boolean;
+type ModuleRequireFactory = typeof createRequire;
+type NodeModuleApi = {
+    globalPaths: string[];
+    _initPaths?: () => void;
+};
+
+export interface WorkerBootstrapData {
+    nativeModuleSearchPaths?: string[];
+}
+
+export interface ResolveWorkerRuntimeBootstrapOptions {
+    isPackaged: boolean;
+    workerFilename: string;
+    developmentWorkerDir: string;
+    resourcesPath?: string;
+    appPath?: string;
+    fileExists?: FileExists;
+}
+
+export interface WorkerRuntimeBootstrap {
+    workerPath: string;
+    workerPathCandidates: string[];
+    nativeModuleSearchPaths?: string[];
+}
+
+export interface LoadNativeModuleOptions<TModule> {
+    moduleName: string;
+    searchPaths: string[];
+    loggerLabel: string;
+    fallbackRequire?: () => TModule;
+    fileExists?: FileExists;
+    requireFactory?: ModuleRequireFactory;
+}
+
+function dedupePaths(paths: Array<string | undefined>): string[] {
+    return [...new Set(paths.filter((value): value is string => Boolean(value)))];
+}
+
+export function registerNativeModuleSearchPaths(
+    searchPaths: string[],
+    options?: {
+        env?: NodeJS.ProcessEnv;
+        moduleApi?: NodeModuleApi;
+    }
+): string[] {
+    const env = options?.env ?? process.env;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const moduleApi =
+        options?.moduleApi ??
+        (require('module') as NodeModuleApi);
+
+    const mergedPaths = dedupePaths([
+        ...searchPaths,
+        ...(env.NODE_PATH?.split(path.delimiter) ?? []),
+        ...moduleApi.globalPaths,
+    ]);
+
+    if (mergedPaths.length === 0) {
+        return [];
+    }
+
+    env.NODE_PATH = mergedPaths.join(path.delimiter);
+
+    if (typeof moduleApi._initPaths === 'function') {
+        moduleApi._initPaths();
+    } else {
+        moduleApi.globalPaths.splice(0, moduleApi.globalPaths.length, ...mergedPaths);
+    }
+
+    for (let index = mergedPaths.length - 1; index >= 0; index -= 1) {
+        const currentPath = mergedPaths[index];
+
+        if (!moduleApi.globalPaths.includes(currentPath)) {
+            moduleApi.globalPaths.unshift(currentPath);
+        }
+    }
+
+    return mergedPaths;
+}
+
+export function getPackagedResourceRoots(options: {
+    resourcesPath?: string;
+    appPath?: string;
+}): string[] {
+    return dedupePaths([
+        options.resourcesPath,
+        options.appPath ? path.dirname(options.appPath) : undefined,
+    ]);
+}
+
+export function getNativeModuleSearchPaths(options: {
+    resourcesPath?: string;
+    appPath?: string;
+}): string[] {
+    return dedupePaths(
+        getPackagedResourceRoots(options).flatMap((root) =>
+            NATIVE_MODULE_RELATIVE_PATHS.map((segments) =>
+                path.join(root, ...segments)
+            )
+        )
+    );
+}
+
+export function getPackagedWorkerPathCandidates(options: {
+    workerFilename: string;
+    resourcesPath?: string;
+    appPath?: string;
+}): string[] {
+    return dedupePaths(
+        getPackagedResourceRoots(options).map((root) =>
+            path.join(root, ...WORKER_RELATIVE_PATH, options.workerFilename)
+        )
+    );
+}
+
+function createWorkerResolutionError(
+    workerFilename: string,
+    workerPathCandidates: string[]
+): Error {
+    const error = new Error(
+        [
+            `Unable to resolve worker "${workerFilename}".`,
+            'Tried:',
+            ...workerPathCandidates.map((candidate) => `- ${candidate}`),
+        ].join('\n')
+    );
+    error.name = 'WorkerPathResolutionError';
+    return error;
+}
+
+export function resolveWorkerRuntimeBootstrap(
+    options: ResolveWorkerRuntimeBootstrapOptions
+): WorkerRuntimeBootstrap {
+    const fileExists = options.fileExists ?? existsSync;
+
+    if (!options.isPackaged) {
+        const workerPath = path.join(
+            options.developmentWorkerDir,
+            options.workerFilename
+        );
+        const workerPathCandidates = [workerPath];
+
+        if (!fileExists(workerPath)) {
+            throw createWorkerResolutionError(
+                options.workerFilename,
+                workerPathCandidates
+            );
+        }
+
+        return { workerPath, workerPathCandidates };
+    }
+
+    const workerPathCandidates = getPackagedWorkerPathCandidates(options);
+    const workerPath = workerPathCandidates.find((candidate) =>
+        fileExists(candidate)
+    );
+
+    if (!workerPath) {
+        throw createWorkerResolutionError(
+            options.workerFilename,
+            workerPathCandidates
+        );
+    }
+
+    return {
+        workerPath,
+        workerPathCandidates,
+        nativeModuleSearchPaths: getNativeModuleSearchPaths(options),
+    };
+}
+
+export function getWorkerDataNativeModuleSearchPaths(
+    value: unknown
+): string[] {
+    if (!value || typeof value !== 'object') {
+        return [];
+    }
+
+    if (!('nativeModuleSearchPaths' in value)) {
+        return [];
+    }
+
+    const searchPaths = value.nativeModuleSearchPaths;
+    if (!Array.isArray(searchPaths)) {
+        return [];
+    }
+
+    return dedupePaths(
+        searchPaths.filter(
+            (searchPath): searchPath is string => typeof searchPath === 'string'
+        )
+    );
+}
+
+export function loadNativeModuleFromSearchPaths<TModule>(
+    options: LoadNativeModuleOptions<TModule>
+): TModule {
+    const fileExists = options.fileExists ?? existsSync;
+    const requireFactory = options.requireFactory ?? createRequire;
+    const attemptedPaths: string[] = [];
+    const failedPaths: string[] = [];
+
+    for (const searchPath of dedupePaths(options.searchPaths)) {
+        attemptedPaths.push(searchPath);
+
+        if (!fileExists(searchPath)) {
+            failedPaths.push(`${searchPath} (missing)`);
+            continue;
+        }
+
+        try {
+            const nativeRequire = requireFactory(
+                path.join(searchPath, 'index.js')
+            );
+            return nativeRequire(options.moduleName) as TModule;
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error);
+            failedPaths.push(`${searchPath} (${message})`);
+        }
+    }
+
+    if (options.fallbackRequire) {
+        try {
+            return options.fallbackRequire();
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error);
+            failedPaths.push(`require(${options.moduleName}) (${message})`);
+        }
+    }
+
+    const error = new Error(
+        [
+            `${options.loggerLabel} Unable to load native module "${options.moduleName}".`,
+            'Tried:',
+            ...attemptedPaths.map((searchPath) => `- ${searchPath}`),
+            ...(failedPaths.length > 0 ? ['Failures:', ...failedPaths.map((failure) => `- ${failure}`)] : []),
+        ].join('\n')
+    );
+    error.name = 'NativeModuleResolutionError';
+    throw error;
+}
diff --git a/apps/electron-backend/src/assets/gitkeep_tmpl_ b/apps/electron-backend/src/assets/gitkeep_tmpl_
new file mode 100644
index 0000000..353debc
--- /dev/null
+++ b/apps/electron-backend/src/assets/gitkeep_tmpl_
@@ -0,0 +1 @@
+Assets Folder
\ No newline at end of file
diff --git a/apps/electron-backend/src/environments/environment.kiratv.ts b/apps/electron-backend/src/environments/environment.kiratv.ts
new file mode 100644
index 0000000..b029319
--- /dev/null
+++ b/apps/electron-backend/src/environments/environment.kiratv.ts
@@ -0,0 +1,7 @@
+declare const __BUILD_VERSION__: string;
+
+export const environment = {
+    production: true,
+    version: __BUILD_VERSION__,
+    windowTitle: 'KiraTV',
+};
diff --git a/apps/electron-backend/src/environments/environment.prod.ts b/apps/electron-backend/src/environments/environment.prod.ts
new file mode 100644
index 0000000..0b83699
--- /dev/null
+++ b/apps/electron-backend/src/environments/environment.prod.ts
@@ -0,0 +1,7 @@
+declare const __BUILD_VERSION__: string;
+
+export const environment = {
+  production: true,
+  version: __BUILD_VERSION__,
+  windowTitle: 'IPTVnator',
+};
diff --git a/apps/electron-backend/src/environments/environment.ts b/apps/electron-backend/src/environments/environment.ts
new file mode 100644
index 0000000..f6eb03e
--- /dev/null
+++ b/apps/electron-backend/src/environments/environment.ts
@@ -0,0 +1,7 @@
+declare const __BUILD_VERSION__: string;
+
+export const environment = {
+  production: false,
+  version: __BUILD_VERSION__,
+  windowTitle: 'IPTVnator',
+};
diff --git a/apps/electron-backend/src/main.ts b/apps/electron-backend/src/main.ts
new file mode 100644
index 0000000..bba772f
--- /dev/null
+++ b/apps/electron-backend/src/main.ts
@@ -0,0 +1,109 @@
+import { app, BrowserWindow } from 'electron';
+import { getElectronUserDataPath } from 'database';
+import fixPath from 'fix-path';
+import App from './app/app';
+import { initDatabase } from './app/database/connection';
+import DatabaseEvents from './app/events/database.events';
+import {
+    resetStaleDownloads,
+    setMainWindow as setDownloadsMainWindow,
+} from './app/events/database/downloads.events';
+import ElectronEvents from './app/events/electron.events';
+import EpgEvents from './app/events/epg.events';
+import PlayerEvents from './app/events/player.events';
+import PlaylistEvents from './app/events/playlist.events';
+import RemoteControlEvents from './app/events/remote-control.events';
+import SettingsEvents from './app/events/settings.events';
+import SharedEvents from './app/events/shared.events';
+import SquirrelEvents from './app/events/squirrel.events';
+import StalkerEvents from './app/events/stalker.events';
+import { isStartupTraceEnabled, trace } from './app/services/debug-trace';
+import { databaseWorkerClient } from './app/services/database-worker-client';
+import XtreamEvents from './app/events/xtream.events';
+
+app.setName('iptvnator');
+
+const electronUserDataPath = getElectronUserDataPath();
+
+if (electronUserDataPath) {
+    app.setPath('userData', electronUserDataPath);
+}
+
+export default class Main {
+    static initialize() {
+        if (SquirrelEvents.handleEvents()) {
+            // squirrel event handled (except first run event) and app will exit in 1000ms, so don't do anything else
+            app.quit();
+        }
+    }
+
+    static bootstrapApp() {
+        if (isStartupTraceEnabled()) {
+            trace('startup', 'bootstrap-app');
+        }
+        App.main(app, BrowserWindow);
+    }
+
+    static async bootstrapAppEvents() {
+        if (isStartupTraceEnabled()) {
+            trace('startup', 'bootstrap-events:start');
+        }
+
+        // Initialize database before other events
+        await initDatabase();
+
+        if (isStartupTraceEnabled()) {
+            trace('startup', 'init-database:done');
+        }
+
+        ElectronEvents.bootstrapElectronEvents();
+        PlaylistEvents.bootstrapPlaylistEvents();
+        SharedEvents.bootstrapSharedEvents();
+        PlayerEvents.bootstrapPlayerEvents();
+        SettingsEvents.bootstrapSettingsEvents();
+        StalkerEvents.bootstrapStalkerEvents();
+        XtreamEvents.bootstrapXtreamEvents();
+        DatabaseEvents.bootstrapDatabaseEvents();
+        EpgEvents.bootstrapEpgEvents();
+        RemoteControlEvents.bootstrapRemoteControlEvents();
+
+        // Set main window for downloads and reset stale downloads
+        if (App.mainWindow) {
+            setDownloadsMainWindow(App.mainWindow);
+        }
+        await resetStaleDownloads();
+
+        if (isStartupTraceEnabled()) {
+            trace('startup', 'reset-stale-downloads:done');
+        }
+
+        // initialize auto updater service
+        if (!App.isDevelopmentMode()) {
+            // UpdateEvents.initAutoUpdateService();
+        }
+
+        if (isStartupTraceEnabled()) {
+            trace('startup', 'bootstrap-events:done');
+        }
+    }
+}
+
+fixPath();
+
+// handle setup events as quickly as possible
+Main.initialize();
+
+// bootstrap app
+Main.bootstrapApp();
+
+// Bootstrap app events after Electron app is ready
+app.whenReady().then(async () => {
+    if (isStartupTraceEnabled()) {
+        trace('startup', 'app.whenReady');
+    }
+    await Main.bootstrapAppEvents();
+});
+
+app.on('before-quit', () => {
+    void databaseWorkerClient.shutdown();
+});
diff --git a/apps/electron-backend/tsconfig.app.json b/apps/electron-backend/tsconfig.app.json
new file mode 100644
index 0000000..edca259
--- /dev/null
+++ b/apps/electron-backend/tsconfig.app.json
@@ -0,0 +1,16 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "types": ["node"]
+    },
+    "files": ["../../global.d.ts"],
+    "exclude": [
+        "**/*.spec.ts",
+        "**/*.test.ts",
+        "jest.config.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": ["**/*.ts"]
+}
diff --git a/apps/electron-backend/tsconfig.json b/apps/electron-backend/tsconfig.json
new file mode 100644
index 0000000..16f3e16
--- /dev/null
+++ b/apps/electron-backend/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "types": ["node"],
+        "moduleResolution": "nodenext",
+        "module": "NodeNext"
+    },
+    "include": ["**/*.ts"]
+}
diff --git a/apps/electron-backend/tsconfig.spec.json b/apps/electron-backend/tsconfig.spec.json
new file mode 100644
index 0000000..976a701
--- /dev/null
+++ b/apps/electron-backend/tsconfig.spec.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/apps/remote-control-web/README.md b/apps/remote-control-web/README.md
new file mode 100644
index 0000000..b7469b2
--- /dev/null
+++ b/apps/remote-control-web/README.md
@@ -0,0 +1,185 @@
+# Remote Control Web App
+
+A lightweight, mobile-optimized web application that provides remote control functionality for IPTVnator. Control live channel switching from your phone or tablet on the same network.
+
+## Overview
+
+This is a standalone Angular application designed to be served by IPTVnator's Electron backend via an HTTP server. It provides a beautiful, Apple TV-inspired remote control interface that communicates with the main IPTVnator desktop application to change channels.
+
+## Features
+
+- **Apple TV-Inspired Design** - Premium dark theme with glass morphism effects
+- **Mobile-Optimized** - Touch-friendly interface designed for phones and tablets
+- **Real-time Control** - Instant channel switching via REST API
+- **Multi-Portal Support** - Works with M3U playlists, Xtream Live TV, and Stalker ITV sections
+- **Numeric Channel Input** - Enter channel numbers directly from the web remote
+- **Live Status Panel** - Displays active channel and current EPG program when available
+- **Volume Controls** - Volume up/down/mute when the active player supports remote volume
+- **Minimal & Fast** - Lightweight app (~55 KB compressed) with no external dependencies
+- **Responsive** - Adapts to different screen sizes (320px - 480px+)
+
+## How It Works
+
+### Architecture
+
+```
+┌─────────────────┐         HTTP          ┌──────────────────┐
+│   Phone/Tablet  │ ◄──────────────────► │  HTTP Server     │
+│  (Browser App)  │    REST API calls    │  (Electron Main) │
+└─────────────────┘                       └──────────────────┘
+                                                    │ IPC
+                                                    ▼
+                                          ┌──────────────────┐
+                                          │  Main App        │
+                                          │  (Renderer)      │
+                                          └──────────────────┘
+```
+
+1. **HTTP Server**: Electron backend starts an HTTP server (default port: 8765)
+2. **Static Files**: Serves this Angular app's built files
+3. **REST API**: Exposes channel/volume/status endpoints for the web remote
+4. **IPC Communication**: HTTP server sends events to the main Electron window
+5. **Channel Switching**: Main app receives events and switches to next/previous live channel in the active live view
+
+### API Endpoints
+
+- `GET /` - Serves the remote control web interface
+- `POST /api/remote-control/channel/up` - Switch to previous channel
+- `POST /api/remote-control/channel/down` - Switch to next channel
+- `POST /api/remote-control/channel/select-number` - Switch by channel number
+- `POST /api/remote-control/volume/up` - Increase volume
+- `POST /api/remote-control/volume/down` - Decrease volume
+- `POST /api/remote-control/volume/toggle-mute` - Toggle mute
+- `GET /api/remote-control/status` - Get current playback status for remote UI
+
+## Usage
+
+### Enable Remote Control
+
+1. Open IPTVnator desktop app
+2. Go to **Settings**
+3. Enable **"Remote Control"** checkbox
+4. Optionally change the port (default: 8765)
+5. The HTTP server starts automatically
+
+### Access from Mobile Device
+
+1. Ensure your phone/tablet is on the **same network** as your computer
+2. Find your computer's IP address:
+   - **Windows**: `ipconfig` (look for IPv4)
+   - **macOS**: `ifconfig` or System Preferences → Network
+   - **Linux**: `ip addr` or `hostname -I`
+3. Open browser on your mobile device
+4. Navigate to: `http://<YOUR_IP>:8765`
+   - Example: `http://192.168.1.100:8765`
+
+### Controls
+
+- **Top half of circle**: Previous channel (Channel Up)
+- **Bottom half of circle**: Next channel (Channel Down)
+- **Center blue dot**: Status indicator (glowing = ready)
+
+## Development
+
+### Build
+
+```bash
+# Production build
+nx build remote-control-web --configuration=production
+
+# Development build
+nx build remote-control-web
+```
+
+Built files are output to `dist/apps/remote-control-web/browser/`
+
+### Serve Locally
+
+The app is designed to be served by the Electron backend's HTTP server. To test:
+
+```bash
+# Start Electron backend (includes HTTP server)
+nx serve electron-backend
+
+# Access at http://localhost:8765
+```
+
+### Project Structure
+
+```
+apps/remote-control-web/
+├── src/
+│   ├── app/
+│   │   ├── app.component.ts       # Root component
+│   │   ├── app.config.ts          # Angular configuration
+│   │   └── app.routes.ts          # Routes (single route)
+│   ├── assets/                    # Static assets (if any)
+│   ├── index.html                 # HTML entry point
+│   └── main.ts                    # Bootstrap Angular app
+├── project.json                   # Nx project configuration
+├── tsconfig.json                  # TypeScript config
+└── README.md                      # This file
+```
+
+## Shared UI Library
+
+The remote control component is located in:
+```
+libs/ui/remote-control/
+├── src/lib/remote-control/
+│   ├── remote-control.component.ts    # Main component logic
+│   ├── remote-control.component.html  # Template
+│   ├── remote-control.component.scss  # Apple TV-inspired styles
+│   └── remote-control.service.ts      # HTTP service for API calls
+```
+
+This library is shared and can be reused in other applications if needed.
+
+## Technical Details
+
+- **Framework**: Angular 18+ (Standalone components)
+- **HTTP Client**: Angular HttpClient
+- **Styling**: SCSS with BEM methodology
+- **Design System**: Apple TV-inspired with glass morphism
+- **Animations**: CSS-only (no JavaScript animations)
+- **Bundle Size**: ~55 KB gzipped (production build)
+- **Browser Support**: Modern browsers (Chrome, Safari, Firefox, Edge)
+
+## Design Philosophy
+
+The interface is inspired by Apple TV's remote control:
+- **Minimalism**: Clean, uncluttered design with essential controls only
+- **Glass Morphism**: Frosted glass effects with subtle reflections
+- **Touch-Optimized**: Large touch targets (50% of circle per button)
+- **Feedback**: Visual feedback on hover/press with ripple effects
+- **Accessibility**: Supports reduced motion preferences
+
+## Security Considerations
+
+- **Local Network Only**: The HTTP server should only be accessible on your local network
+- **No Authentication**: Currently no authentication - ensure your network is trusted
+- **CORS**: Server accepts requests from any origin on the local network
+
+## Future Enhancements
+
+Potential improvements:
+- Volume control
+- Play/pause functionality
+- Channel search
+- Favorites quick access
+- Authentication/PIN protection
+- WebSocket for real-time status updates
+- Multi-device support with channel sync
+
+## Related Files
+
+- **HTTP Server**: `apps/electron-backend/src/app/server/http-server.ts`
+- **Remote Control Events**: `apps/electron-backend/src/app/events/remote-control.events.ts`
+- **M3U Handler**: `apps/web/src/app/home/video-player/video-player.component.ts` (handleRemoteChannelChange method)
+- **Xtream Live Handler**: `apps/web/src/app/xtream-electron/live-stream-layout/live-stream-layout.component.ts`
+- **Stalker ITV Handler**: `apps/web/src/app/stalker/stalker-live-stream-layout/stalker-live-stream-layout.component.ts`
+- **Settings UI**: `apps/web/src/app/settings/settings.component.html`
+
+## License
+
+Same as IPTVnator main project.
diff --git a/apps/remote-control-web/eslint.config.mjs b/apps/remote-control-web/eslint.config.mjs
new file mode 100644
index 0000000..43bac6e
--- /dev/null
+++ b/apps/remote-control-web/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'app',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'app',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/apps/remote-control-web/jest.config.ts b/apps/remote-control-web/jest.config.ts
new file mode 100644
index 0000000..98cc580
--- /dev/null
+++ b/apps/remote-control-web/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'remote-control-web',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../coverage/apps/remote-control-web',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/apps/remote-control-web/project.json b/apps/remote-control-web/project.json
new file mode 100644
index 0000000..53cf789
--- /dev/null
+++ b/apps/remote-control-web/project.json
@@ -0,0 +1,107 @@
+{
+    "name": "remote-control-web",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "prefix": "app",
+    "sourceRoot": "apps/remote-control-web/src",
+    "cli": {
+        "cache": {
+            "enabled": false
+        }
+    },
+    "tags": [],
+    "targets": {
+        "build": {
+            "executor": "@angular/build:application",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/apps/remote-control-web",
+                "browser": "apps/remote-control-web/src/main.ts",
+                "polyfills": ["zone.js"],
+                "tsConfig": "apps/remote-control-web/tsconfig.app.json",
+                "inlineStyleLanguage": "scss",
+                "assets": [
+                    {
+                        "glob": "**/*",
+                        "input": "apps/remote-control-web/public"
+                    },
+                    {
+                        "glob": "**/*",
+                        "input": "apps/web/src/assets/i18n",
+                        "output": "assets/i18n"
+                    }
+                ],
+                "styles": ["apps/remote-control-web/src/styles.scss"]
+            },
+            "configurations": {
+                "production": {
+                    "budgets": [
+                        {
+                            "type": "initial",
+                            "maximumWarning": "500kb",
+                            "maximumError": "1mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "4kb",
+                            "maximumError": "8kb"
+                        }
+                    ],
+                    "outputHashing": "all"
+                },
+                "development": {
+                    "optimization": false,
+                    "extractLicenses": false,
+                    "sourceMap": true
+                }
+            },
+            "defaultConfiguration": "production"
+        },
+        "build-e2e": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "pnpm nx run remote-control-web:build:development"
+            }
+        },
+        "serve": {
+            "continuous": true,
+            "executor": "@angular/build:dev-server",
+            "configurations": {
+                "production": {
+                    "buildTarget": "remote-control-web:build:production"
+                },
+                "development": {
+                    "buildTarget": "remote-control-web:build:development"
+                }
+            },
+            "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+            "executor": "@angular/build:extract-i18n",
+            "options": {
+                "buildTarget": "remote-control-web:build"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        },
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "apps/remote-control-web/jest.config.ts",
+                "tsConfig": "apps/remote-control-web/tsconfig.spec.json"
+            }
+        },
+        "serve-static": {
+            "continuous": true,
+            "executor": "@nx/web:file-server",
+            "options": {
+                "buildTarget": "remote-control-web:build",
+                "port": 4200,
+                "staticFilePath": "dist/apps/remote-control-web/browser",
+                "spa": true
+            }
+        }
+    }
+}
diff --git a/apps/remote-control-web/public/favicon.ico b/apps/remote-control-web/public/favicon.ico
new file mode 100644
index 0000000..317ebcb
Binary files /dev/null and b/apps/remote-control-web/public/favicon.ico differ
diff --git a/apps/remote-control-web/src/app/app.config.ts b/apps/remote-control-web/src/app/app.config.ts
new file mode 100644
index 0000000..ad40068
--- /dev/null
+++ b/apps/remote-control-web/src/app/app.config.ts
@@ -0,0 +1,32 @@
+import {
+    ApplicationConfig,
+    importProvidersFrom,
+    provideBrowserGlobalErrorListeners,
+    provideZoneChangeDetection,
+} from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+
+export function HttpLoaderFactory(http: HttpClient) {
+    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideBrowserGlobalErrorListeners(),
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideHttpClient(),
+        importProvidersFrom(
+            TranslateModule.forRoot({
+                defaultLanguage: 'en',
+                loader: {
+                    provide: TranslateLoader,
+                    useFactory: HttpLoaderFactory,
+                    deps: [HttpClient],
+                },
+            })
+        ),
+    ],
+};
diff --git a/apps/remote-control-web/src/app/app.html b/apps/remote-control-web/src/app/app.html
new file mode 100644
index 0000000..1051dd1
--- /dev/null
+++ b/apps/remote-control-web/src/app/app.html
@@ -0,0 +1 @@
+<lib-remote-control />
diff --git a/apps/remote-control-web/src/app/app.scss b/apps/remote-control-web/src/app/app.scss
new file mode 100644
index 0000000..f859093
--- /dev/null
+++ b/apps/remote-control-web/src/app/app.scss
@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    height: 100vh;
+}
diff --git a/apps/remote-control-web/src/app/app.ts b/apps/remote-control-web/src/app/app.ts
new file mode 100644
index 0000000..0ba58f2
--- /dev/null
+++ b/apps/remote-control-web/src/app/app.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { RemoteControlComponent } from 'remote-control';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+    imports: [RemoteControlComponent],
+    selector: 'app-root',
+    templateUrl: './app.html',
+    styleUrl: './app.scss',
+})
+export class App implements OnInit {
+    private translate = inject(TranslateService);
+
+    ngOnInit() {
+        // Set default language
+        this.translate.setDefaultLang('en');
+        this.translate.use('en');
+    }
+}
diff --git a/apps/remote-control-web/src/index.html b/apps/remote-control-web/src/index.html
new file mode 100644
index 0000000..69b4ac5
--- /dev/null
+++ b/apps/remote-control-web/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>remote-control-web</title>
+        <base href="/" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    </head>
+    <body>
+        <app-root></app-root>
+    </body>
+</html>
diff --git a/apps/remote-control-web/src/main.ts b/apps/remote-control-web/src/main.ts
new file mode 100644
index 0000000..190f341
--- /dev/null
+++ b/apps/remote-control-web/src/main.ts
@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));
diff --git a/apps/remote-control-web/src/styles.scss b/apps/remote-control-web/src/styles.scss
new file mode 100644
index 0000000..57526dc
--- /dev/null
+++ b/apps/remote-control-web/src/styles.scss
@@ -0,0 +1,11 @@
+/* You can add global styles to this file, and also import other style files */
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    overflow-x: hidden;
+}
diff --git a/apps/remote-control-web/src/test-setup.ts b/apps/remote-control-web/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/apps/remote-control-web/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/apps/remote-control-web/tsconfig.app.json b/apps/remote-control-web/tsconfig.app.json
new file mode 100644
index 0000000..231df7c
--- /dev/null
+++ b/apps/remote-control-web/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": [
+        "jest.config.ts",
+        "src/test-setup.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts"
+    ]
+}
diff --git a/apps/remote-control-web/tsconfig.json b/apps/remote-control-web/tsconfig.json
new file mode 100644
index 0000000..b81a1f7
--- /dev/null
+++ b/apps/remote-control-web/tsconfig.json
@@ -0,0 +1,32 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "isolatedModules": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/apps/remote-control-web/tsconfig.spec.json b/apps/remote-control-web/tsconfig.spec.json
new file mode 100644
index 0000000..cc26179
--- /dev/null
+++ b/apps/remote-control-web/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/apps/stalker-mock-server/README.md b/apps/stalker-mock-server/README.md
new file mode 100644
index 0000000..68a7161
--- /dev/null
+++ b/apps/stalker-mock-server/README.md
@@ -0,0 +1,144 @@
+# Stalker Mock Server
+
+A local mock implementation of the Stalker/Ministra portal API for development and end-to-end testing of IPTVnator.
+
+## Overview
+
+The mock server speaks the same `portal.php` HTTP protocol as a real Stalker portal, generating deterministic fake data using `@faker-js/faker` seeded from the connecting MAC address. This means:
+
+- The **same MAC address always returns the same data** (consistent across page refreshes and test runs).
+- **Different MAC addresses produce different datasets** — use predefined scenario MACs for specific test conditions.
+- Data is generated once per MAC on first request and cached in memory for the server's lifetime. **Restart to regenerate.**
+
+## Quick Start
+
+```bash
+# Start the mock server (port 3210)
+nx serve stalker-mock-server
+
+# Or with file watching (auto-restarts on source changes)
+nx run stalker-mock-server:serve-with-watch
+
+# Or run both the mock server + Angular dev server in parallel
+nx run-many --targets=serve --projects=stalker-mock-server,web
+```
+
+Then in IPTVnator, add a new Stalker portal:
+
+- **Portal URL**: `http://localhost:3210/portal.php`
+- **MAC Address**: one of the predefined scenarios below (or any MAC for auto-generated data)
+
+## Predefined Scenario MAC Addresses
+
+| MAC Address | Scenario | Description |
+|---|---|---|
+| `00:1A:79:00:00:01` | **default** | 8 categories per type, 40 items each — the balanced go-to for daily dev |
+| `00:1A:79:FF:FF:FF` | **large** | 20 categories, 200 items each — stress-test pagination and virtual scroll |
+| `00:1A:79:00:00:02` | **series-heavy** | 15 series categories with 6 seasons × 10 episodes — test deep series navigation |
+| `00:1A:79:00:00:03` | **minimal** | 2 categories, 5 items — edge case testing (empty states, single items) |
+| `00:1A:79:00:00:04` | **is-series** | 60% of VOD items have `is_series=1` — tests the Ministra lazy-season flow |
+| `00:1A:79:00:00:05` | **embedded-series** | 50% of VOD items have embedded `series[]` arrays — tests the embedded series flow |
+| `<any other MAC>` | **auto** | MAC bytes used as seed → deterministic unique dataset |
+
+## Configuration
+
+| Environment Variable | Default | Description |
+|---|---|---|
+| `PORT` | `3210` | HTTP port the server listens on |
+| `NODE_ENV` | `development` | Node environment |
+
+## Utility Endpoints
+
+| Endpoint | Method | Description |
+|---|---|---|
+| `/health` | `GET` | Health check — returns `{ status: "ok" }` |
+| `/reset` | `POST` | Clear all in-memory data and favorites (useful between test runs) |
+
+## API Coverage
+
+All endpoints are served at `GET /portal.php?action=<action>&...` matching the real Stalker protocol:
+
+| Action | Description |
+|---|---|
+| `handshake` | Returns a mock Bearer token |
+| `do_auth` | Returns a mock user profile |
+| `get_categories` | Category list filtered by `type` (itv/vod/series) |
+| `get_genres` | Genre list (mirrors categories) |
+| `get_ordered_list` | Paginated content list; if `movie_id` is present → returns seasons |
+| `create_link` | Returns a real public HLS stream URL for playback |
+| `favorites` | Add / remove / get favorites (in-memory, resets on restart) |
+| `get_short_epg` | Current-and-upcoming EPG window for a channel (`ch_id`, `size`) |
+| `get_epg_info` | Bulk EPG keyed by channel id for a requested `period` window |
+
+## Cover Images
+
+Cover images and logos use [Picsum Photos](https://picsum.photos) (e.g. `https://picsum.photos/seed/{id}/300/200`). These are real images served from a CDN — no local setup required, but an internet connection is needed for images to display.
+
+## Stream URLs
+
+`create_link` returns real public HLS test streams so video actually plays:
+
+- `https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8`
+- `https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8`
+- `https://playertest.longtailvideo.com/adaptive/oceans/oceans.m3u8`
+- `https://playertest.longtailvideo.com/adaptive/bbbfull/bbbfull.m3u8`
+
+The stream chosen for a given item is deterministic based on the item's `cmd` string.
+
+## Using with Playwright E2E Tests
+
+The Playwright config in `apps/web-e2e/playwright.config.ts` starts the mock server automatically alongside the Angular dev server when running e2e tests. See `apps/web-e2e/src/stalker.e2e.ts` for example stalker tests.
+
+```bash
+# Run all e2e tests (starts mock server automatically)
+nx e2e web-e2e
+
+# Or run only stalker-specific e2e tests
+nx e2e web-e2e --grep "@stalker"
+```
+
+The test suite uses `00:1A:79:00:00:01` (default scenario) for most tests, and calls `POST /reset` in `beforeEach` to ensure a clean state between tests.
+
+## EPG Behavior
+
+The mock server generates a 7-day EPG schedule for every ITV channel using
+2-hour slots starting at the current UTC day boundary.
+
+- `get_short_epg` returns the current program and upcoming items from that
+  schedule, limited by `size`
+- `get_epg_info` returns bulk data in the shape
+  `{ js: { data: Record<channelId, program[]> } }`
+- `get_epg_info` filters the bulk response from the current UTC day start through
+  `now + period`
+
+## Architecture
+
+See [`docs/architecture/stalker-mock-server.md`](../../docs/architecture/stalker-mock-server.md) for full implementation details.
+
+## Project Structure
+
+```
+apps/stalker-mock-server/
+├── src/
+│   ├── main.ts                            # Express bootstrap
+│   └── app/
+│       ├── scenarios.ts                   # MAC → scenario config mapping
+│       ├── data-generator.ts              # Seeded faker data generation
+│       ├── data-store.ts                  # Lazy per-MAC in-memory cache
+│       └── routes/
+│           ├── portal.route.ts            # /portal.php dispatcher
+│           └── handlers/
+│               ├── handshake.handler.ts
+│               ├── do-auth.handler.ts
+│               ├── get-categories.handler.ts
+│               ├── get-ordered-list.handler.ts
+│               ├── get-seasons.handler.ts
+│               ├── create-link.handler.ts
+│               ├── favorites.handler.ts
+│               ├── get-epg-info.handler.ts
+│               ├── get-short-epg.handler.ts
+│               └── get-genres.handler.ts
+├── project.json
+├── tsconfig.json
+└── README.md
+```
diff --git a/apps/stalker-mock-server/project.json b/apps/stalker-mock-server/project.json
new file mode 100644
index 0000000..61e02ec
--- /dev/null
+++ b/apps/stalker-mock-server/project.json
@@ -0,0 +1,38 @@
+{
+    "name": "stalker-mock-server",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/stalker-mock-server/src",
+    "tags": ["scope:dev-tools"],
+    "targets": {
+        "serve": {
+            "continuous": true,
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "pnpm tsx apps/stalker-mock-server/src/main.ts",
+                "cwd": "{workspaceRoot}",
+                "color": true,
+                "env": {
+                    "PORT": "3210",
+                    "NODE_ENV": "development"
+                }
+            }
+        },
+        "serve-with-watch": {
+            "continuous": true,
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "pnpm tsx watch apps/stalker-mock-server/src/main.ts",
+                "cwd": "{workspaceRoot}",
+                "color": true,
+                "env": {
+                    "PORT": "3210",
+                    "NODE_ENV": "development"
+                }
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/apps/stalker-mock-server/src/app/data-generator.ts b/apps/stalker-mock-server/src/app/data-generator.ts
new file mode 100644
index 0000000..321e917
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/data-generator.ts
@@ -0,0 +1,434 @@
+import { faker } from '@faker-js/faker';
+import { ScenarioConfig } from './scenarios.js';
+
+// ---------------------------------------------------------------------------
+// Shared types (mirror the Stalker API response shapes)
+// ---------------------------------------------------------------------------
+
+export interface RawCategory {
+    id: string;
+    title: string;
+    alias: string;
+}
+
+export interface RawChannel {
+    id: string;
+    name: string;
+    o_name: string;
+    cmd: string;
+    logo: string;
+    category_id: string;
+    tv_genre_id: string;
+    xmltv_id: string;
+}
+
+export interface RawVodItem {
+    id: string;
+    name: string;
+    o_name: string;
+    title: string;
+    cmd: string;
+    screenshot_uri: string;
+    cover: string;
+    description: string;
+    actors: string;
+    director: string;
+    year: string;
+    genre: string;
+    genres_str: string;
+    rating_imdb: string;
+    rating_kinopoisk: string;
+    category_id: string;
+    is_series: 0 | 1 | '1';
+    has_files: number;
+    series?: RawEmbeddedEpisode[];
+}
+
+export interface RawSeriesItem {
+    id: string;
+    name: string;
+    o_name: string;
+    title: string;
+    cmd: string;
+    screenshot_uri: string;
+    cover: string;
+    description: string;
+    actors: string;
+    director: string;
+    year: string;
+    genres_str: string;
+    rating_imdb: string;
+    rating_kinopoisk: string;
+    category_id: string;
+    is_series: 0;
+    has_files: 0;
+}
+
+export interface RawSeason {
+    id: string;
+    name: string;
+    cmd: string;
+    description: string;
+    director: string;
+    actors: string;
+    year: string;
+    genres_str: string;
+    age: string;
+    rating_imdb: string;
+    rating_kinopoisk: string;
+    screenshot_uri: string;
+    added: string;
+    series: string[];
+}
+
+export interface RawEmbeddedEpisode {
+    id: number;
+    name: string;
+    cmd: string;
+}
+
+export interface RawEpgProgram {
+    id: string;
+    name: string;
+    start: string;
+    stop: string;
+    start_timestamp: number;
+    stop_timestamp: number;
+    descr: string;
+    category: string;
+}
+
+export interface GeneratedPortalData {
+    itvCategories: RawCategory[];
+    vodCategories: RawCategory[];
+    seriesCategories: RawCategory[];
+    channels: Map<string, RawChannel[]>; // categoryId -> channels
+    vod: Map<string, RawVodItem[]>;       // categoryId -> items
+    series: Map<string, RawSeriesItem[]>; // categoryId -> items
+    seasons: Map<string, RawSeason[]>;    // seriesItemId -> seasons
+    epg: Map<string, RawEpgProgram[]>;    // channelId -> programs
+}
+
+// ---------------------------------------------------------------------------
+// Public test HLS streams used for create_link responses
+// ---------------------------------------------------------------------------
+const TEST_HLS_STREAMS = [
+    'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    'https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8',
+    'https://playertest.longtailvideo.com/adaptive/oceans/oceans.m3u8',
+    'https://playertest.longtailvideo.com/adaptive/bbbfull/bbbfull.m3u8',
+];
+
+function pickStream(index: number): string {
+    return TEST_HLS_STREAMS[index % TEST_HLS_STREAMS.length];
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function coverUrl(seed: string, width = 300, height = 200): string {
+    return `https://picsum.photos/seed/${seed}/${width}/${height}`;
+}
+
+function logoUrl(seed: string): string {
+    return `https://picsum.photos/seed/logo-${seed}/100/100`;
+}
+
+// ---------------------------------------------------------------------------
+// Generator
+// ---------------------------------------------------------------------------
+
+export function generatePortalData(config: ScenarioConfig): GeneratedPortalData {
+    faker.seed(config.seed);
+
+    const data: GeneratedPortalData = {
+        itvCategories: [],
+        vodCategories: [],
+        seriesCategories: [],
+        channels: new Map(),
+        vod: new Map(),
+        series: new Map(),
+        seasons: new Map(),
+        epg: new Map(),
+    };
+
+    // ------ ITV categories + channels ------
+    data.itvCategories = generateCategories('itv', config.categoryCount.itv);
+    let channelIndex = 0;
+    for (const cat of data.itvCategories) {
+        const channels = generateChannels(cat.id, config.itemsPerCategory, channelIndex);
+        data.channels.set(cat.id, channels);
+        for (const ch of channels) {
+            data.epg.set(ch.id, generateEpg(ch.name));
+        }
+        channelIndex += config.itemsPerCategory;
+    }
+
+    // ------ VOD categories + items ------
+    data.vodCategories = generateCategories('vod', config.categoryCount.vod);
+    let vodIndex = 0;
+    for (const cat of data.vodCategories) {
+        const items = generateVodItems(
+            cat.id,
+            config.itemsPerCategory,
+            vodIndex,
+            config.isSeriesFraction,
+            config.embeddedSeriesFraction,
+            config.seasonsPerSeries,
+            config.episodesPerSeason
+        );
+        data.vod.set(cat.id, items);
+        vodIndex += config.itemsPerCategory;
+    }
+
+    // ------ Series categories + items ------
+    data.seriesCategories = generateCategories('series', config.categoryCount.series);
+    let seriesIndex = 0;
+    for (const cat of data.seriesCategories) {
+        const items = generateSeriesItems(cat.id, config.itemsPerCategory, seriesIndex);
+        data.series.set(cat.id, items);
+        for (const item of items) {
+            data.seasons.set(item.id, generateSeasons(item, config.seasonsPerSeries, config.episodesPerSeason));
+        }
+        seriesIndex += config.itemsPerCategory;
+    }
+
+    return data;
+}
+
+// ---------------------------------------------------------------------------
+// Category generators
+// ---------------------------------------------------------------------------
+
+const ITV_GENRE_NAMES = [
+    'News', 'Sports', 'Movies', 'Entertainment', 'Kids',
+    'Documentary', 'Music', 'Comedy', 'Drama', 'Reality TV',
+    'Lifestyle', 'Travel', 'Food', 'Tech', 'Science',
+    'History', 'Nature', 'Animation', 'Gaming', 'Shopping',
+];
+
+const VOD_GENRE_NAMES = [
+    'Action', 'Comedy', 'Drama', 'Horror', 'Thriller',
+    'Romance', 'Sci-Fi', 'Fantasy', 'Animation', 'Documentary',
+    'Biography', 'Crime', 'Mystery', 'Adventure', 'Family',
+    'War', 'Western', 'Musical', 'Sport', 'History',
+];
+
+const SERIES_GENRE_NAMES = [
+    'Drama Series', 'Comedy Series', 'Crime Series', 'Sci-Fi Series',
+    'Reality Shows', 'Anime', 'Soap Opera', 'Mini Series',
+    'Documentary Series', 'Kids Shows', 'Action Series', 'Fantasy Series',
+    'Medical', 'Legal', 'Political', 'Romance Series', 'Historical',
+    'Thriller Series', 'Horror Series', 'Western Series',
+];
+
+function getGenreNames(type: 'itv' | 'vod' | 'series'): string[] {
+    if (type === 'itv') return ITV_GENRE_NAMES;
+    if (type === 'vod') return VOD_GENRE_NAMES;
+    return SERIES_GENRE_NAMES;
+}
+
+function generateCategories(type: 'itv' | 'vod' | 'series', count: number): RawCategory[] {
+    const names = getGenreNames(type);
+    return Array.from({ length: count }, (_, i) => {
+        const id = String((type === 'itv' ? 1000 : type === 'vod' ? 2000 : 3000) + i + 1);
+        const title = names[i % names.length];
+        return { id, title, alias: title.toLowerCase().replace(/\s+/g, '_') };
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Channel generators
+// ---------------------------------------------------------------------------
+
+function generateChannels(categoryId: string, count: number, startIndex: number): RawChannel[] {
+    return Array.from({ length: count }, (_, i) => {
+        const globalIndex = startIndex + i;
+        const id = String(10000 + globalIndex);
+        const name = `${faker.company.name()} TV`;
+        return {
+            id,
+            name,
+            o_name: name,
+            cmd: `ffrt4://ch/live/${id}/index.m3u8`,
+            logo: logoUrl(`ch-${id}`),
+            category_id: categoryId,
+            tv_genre_id: categoryId,
+            xmltv_id: `channel-${id}.example`,
+        };
+    });
+}
+
+// ---------------------------------------------------------------------------
+// VOD generators
+// ---------------------------------------------------------------------------
+
+function generateVodItems(
+    categoryId: string,
+    count: number,
+    startIndex: number,
+    isSeriesFraction: number,
+    embeddedSeriesFraction: number,
+    seasonsPerSeries: number,
+    episodesPerSeason: number
+): RawVodItem[] {
+    return Array.from({ length: count }, (_, i) => {
+        const globalIndex = startIndex + i;
+        const id = String(20000 + globalIndex);
+        const title = faker.music.songName() + ': ' + faker.lorem.words(2);
+        const isSeries = i / count < isSeriesFraction;
+        const hasEmbeddedSeries = !isSeries && (i / count < isSeriesFraction + embeddedSeriesFraction);
+
+        const item: RawVodItem = {
+            id,
+            name: title,
+            o_name: title,
+            title,
+            cmd: `ffrt4://vod/${id}/index.m3u8`,
+            screenshot_uri: coverUrl(`vod-${id}`),
+            cover: coverUrl(`vod-cover-${id}`, 300, 450),
+            description: faker.lorem.paragraph(),
+            actors: Array.from({ length: 4 }, () => faker.person.fullName()).join(', '),
+            director: faker.person.fullName(),
+            year: String(faker.date.past({ years: 20 }).getFullYear()),
+            genre: faker.music.genre(),
+            genres_str: [faker.music.genre(), faker.music.genre()].join(', '),
+            rating_imdb: (Math.random() * 4 + 5).toFixed(1),
+            rating_kinopoisk: (Math.random() * 4 + 5).toFixed(1),
+            category_id: categoryId,
+            is_series: isSeries ? '1' : 0,
+            has_files: isSeries ? 0 : 1,
+        };
+
+        if (hasEmbeddedSeries) {
+            item.series = generateEmbeddedEpisodes(id, seasonsPerSeries * episodesPerSeason);
+        }
+
+        return item;
+    });
+}
+
+function generateEmbeddedEpisodes(parentId: string, count: number): RawEmbeddedEpisode[] {
+    return Array.from({ length: count }, (_, i) => ({
+        id: parseInt(parentId) * 100 + i,
+        name: `Episode ${i + 1}`,
+        cmd: `ffrt4://vod/${parentId}/ep${i + 1}/index.m3u8`,
+    }));
+}
+
+// ---------------------------------------------------------------------------
+// Series generators
+// ---------------------------------------------------------------------------
+
+function generateSeriesItems(categoryId: string, count: number, startIndex: number): RawSeriesItem[] {
+    return Array.from({ length: count }, (_, i) => {
+        const globalIndex = startIndex + i;
+        const id = String(30000 + globalIndex);
+        const title = faker.company.catchPhrase();
+        return {
+            id,
+            name: title,
+            o_name: title,
+            title,
+            cmd: `ffrt4://series/${id}`,
+            screenshot_uri: coverUrl(`series-${id}`),
+            cover: coverUrl(`series-cover-${id}`, 300, 450),
+            description: faker.lorem.paragraph(),
+            actors: Array.from({ length: 4 }, () => faker.person.fullName()).join(', '),
+            director: faker.person.fullName(),
+            year: String(faker.date.past({ years: 10 }).getFullYear()),
+            genres_str: [faker.music.genre(), faker.music.genre()].join(', '),
+            rating_imdb: (Math.random() * 4 + 5).toFixed(1),
+            rating_kinopoisk: (Math.random() * 4 + 5).toFixed(1),
+            category_id: categoryId,
+            is_series: 0,
+            has_files: 0,
+        };
+    });
+}
+
+export function generateSeasons(
+    series: RawSeriesItem,
+    seasonCount: number,
+    episodesPerSeason: number
+): RawSeason[] {
+    return Array.from({ length: seasonCount }, (_, s) => {
+        const seasonId = `${series.id}-s${s + 1}`;
+        const episodes = Array.from({ length: episodesPerSeason }, (_, e) =>
+            String(e + 1)
+        );
+        return {
+            id: seasonId,
+            name: `Season ${s + 1}`,
+            cmd: `ffrt4://series/${series.id}/season/${s + 1}`,
+            description: faker.lorem.sentence(),
+            director: series.director,
+            actors: series.actors,
+            year: series.year,
+            genres_str: series.genres_str,
+            age: '16',
+            rating_imdb: series.rating_imdb,
+            rating_kinopoisk: series.rating_kinopoisk,
+            screenshot_uri: coverUrl(`${seasonId}`),
+            added: new Date(Date.now() - Math.random() * 1e10).toISOString(),
+            series: episodes,
+        };
+    });
+}
+
+// ---------------------------------------------------------------------------
+// EPG generator
+// ---------------------------------------------------------------------------
+
+const EPG_PROGRAM_TYPES = [
+    'News',
+    'Movie',
+    'Documentary',
+    'Entertainment',
+    'Sports',
+    'Kids',
+    'Series',
+];
+
+export function generateEpg(channelName: string): RawEpgProgram[] {
+    const programs: RawEpgProgram[] = [];
+    const SLOT_MINUTES = 120;
+    const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+    const TOTAL_DAYS = 7;
+    const dayStart = new Date();
+    dayStart.setUTCHours(0, 0, 0, 0);
+
+    for (let i = 0; i < SLOTS_PER_DAY * TOTAL_DAYS; i++) {
+        const startDate = new Date(
+            dayStart.getTime() + i * SLOT_MINUTES * 60 * 1000
+        );
+        const stopDate = new Date(
+            startDate.getTime() + SLOT_MINUTES * 60 * 1000
+        );
+        const category = EPG_PROGRAM_TYPES[i % EPG_PROGRAM_TYPES.length];
+        programs.push({
+            id: String(i + 1),
+            name: `${channelName}: ${faker.company.catchPhrase()}`,
+            start: startDate.toISOString(),
+            stop: stopDate.toISOString(),
+            start_timestamp: Math.floor(startDate.getTime() / 1000),
+            stop_timestamp: Math.floor(stopDate.getTime() / 1000),
+            descr: faker.lorem.sentence(),
+            category,
+        });
+    }
+
+    return programs;
+}
+
+// ---------------------------------------------------------------------------
+// create_link helper
+// ---------------------------------------------------------------------------
+
+export function resolveStreamUrl(cmd: string, itemIndex: number): string {
+    if (cmd.startsWith('ffrt4://')) {
+        return pickStream(itemIndex);
+    }
+    return pickStream(0);
+}
diff --git a/apps/stalker-mock-server/src/app/data-store.ts b/apps/stalker-mock-server/src/app/data-store.ts
new file mode 100644
index 0000000..52a16a7
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/data-store.ts
@@ -0,0 +1,51 @@
+import { generatePortalData, GeneratedPortalData } from './data-generator.js';
+import { getScenario } from './scenarios.js';
+
+/**
+ * Lazy per-MAC in-memory store.
+ * Data is generated once on first access for each MAC and cached for the
+ * lifetime of the server process. Restart the server to get fresh data.
+ */
+const portalCache = new Map<string, GeneratedPortalData>();
+
+export function getPortalData(mac: string): GeneratedPortalData {
+    const key = mac.toLowerCase();
+    if (!portalCache.has(key)) {
+        const scenario = getScenario(key);
+        console.log(
+            `[DataStore] Generating data for MAC ${mac} (scenario: ${scenario.name}, seed: ${scenario.seed})`
+        );
+        portalCache.set(key, generatePortalData(scenario));
+    }
+    return portalCache.get(key)!;
+}
+
+/** In-memory favorites store per MAC. Resets on server restart. */
+const favoritesStore = new Map<string, Set<string>>();
+
+export function getFavorites(mac: string): Set<string> {
+    const key = mac.toLowerCase();
+    if (!favoritesStore.has(key)) {
+        favoritesStore.set(key, new Set());
+    }
+    return favoritesStore.get(key)!;
+}
+
+export function addFavorite(mac: string, itemId: string): void {
+    getFavorites(mac).add(itemId);
+}
+
+export function removeFavorite(mac: string, itemId: string): void {
+    getFavorites(mac).delete(itemId);
+}
+
+/** Reset favorites for a MAC (exposed via /reset endpoint). */
+export function resetFavorites(mac: string): void {
+    favoritesStore.delete(mac.toLowerCase());
+}
+
+/** Reset all cached data (exposed via /reset endpoint). */
+export function resetAll(): void {
+    portalCache.clear();
+    favoritesStore.clear();
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/create-link.handler.ts b/apps/stalker-mock-server/src/app/handlers/create-link.handler.ts
new file mode 100644
index 0000000..5d083e5
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/create-link.handler.ts
@@ -0,0 +1,33 @@
+import { Request, Response } from 'express';
+import { resolveStreamUrl } from '../data-generator.js';
+import { extractMac } from './get-categories.handler.js';
+
+/**
+ * Stalker create_link — returns a playable stream URL.
+ *
+ * Query params:
+ *   cmd: the ffrt4:// or similar command from the content item
+ *   type: itv | vod | series
+ */
+export function handleCreateLink(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const cmd = (req.query['cmd'] as string) ?? '';
+
+    // Use a stable index derived from the cmd string so the same item
+    // always returns the same test stream URL.
+    const itemIndex = cmd
+        .split('')
+        .reduce((acc, ch) => acc + ch.charCodeAt(0), 0);
+    const streamUrl = resolveStreamUrl(cmd, itemIndex);
+
+    console.log(`[create_link] MAC=${mac} cmd=${cmd} → ${streamUrl}`);
+
+    res.json({
+        js: {
+            cmd: streamUrl,
+            streamer_id: '1',
+            load: '',
+            error: '',
+        },
+    });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/do-auth.handler.ts b/apps/stalker-mock-server/src/app/handlers/do-auth.handler.ts
new file mode 100644
index 0000000..51afe2a
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/do-auth.handler.ts
@@ -0,0 +1,25 @@
+import { Request, Response } from 'express';
+
+/**
+ * Stalker do_auth — returns user profile / account info.
+ */
+export function handleDoAuth(req: Request, res: Response): void {
+    res.json({
+        js: {
+            id: '1',
+            name: 'Mock User',
+            login: 'mockuser',
+            password: '',
+            status: 'active',
+            tariff_expired_date: '2099-12-31',
+            phone: '',
+            ls: '0',
+            created: new Date().toISOString(),
+            updated: new Date().toISOString(),
+            blocked: '0',
+            acc_enabled: '1',
+            max_connections: '1',
+            active_connections: '0',
+        },
+    });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/favorites.handler.ts b/apps/stalker-mock-server/src/app/handlers/favorites.handler.ts
new file mode 100644
index 0000000..5d9c1e9
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/favorites.handler.ts
@@ -0,0 +1,75 @@
+import { Request, Response } from 'express';
+import {
+    addFavorite,
+    getFavorites,
+    getPortalData,
+    removeFavorite,
+} from '../data-store.js';
+import { extractMac } from './get-categories.handler.js';
+import { RawChannel, RawSeriesItem, RawVodItem } from '../data-generator.js';
+
+/**
+ * Stalker favorites endpoint.
+ *
+ * Query params:
+ *   action: favorites
+ *   fav_action: get | add | remove (some portals use set/unset)
+ *   item_id: the item id to add/remove
+ *   type: itv | vod | series
+ */
+export function handleFavorites(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const favAction = (req.query['fav_action'] as string) ?? 'get';
+    const itemId = req.query['item_id'] as string;
+
+    if (favAction === 'add' || favAction === 'set') {
+        if (itemId) addFavorite(mac, itemId);
+        res.json({ js: { error: '' } });
+        return;
+    }
+
+    if (favAction === 'remove' || favAction === 'unset') {
+        if (itemId) removeFavorite(mac, itemId);
+        res.json({ js: { error: '' } });
+        return;
+    }
+
+    // fav_action === 'get' — return all favorited items
+    const favIds = getFavorites(mac);
+    const data = getPortalData(mac);
+
+    type AnyItem = RawChannel | RawVodItem | RawSeriesItem;
+    const result: AnyItem[] = [];
+
+    for (const id of favIds) {
+        // Search across all content types
+        const found = findItemById(data, id);
+        if (found) result.push(found);
+    }
+
+    res.json({
+        js: {
+            data: result,
+            total_items: result.length,
+        },
+    });
+}
+
+function findItemById(
+    data: ReturnType<typeof getPortalData>,
+    id: string
+): RawChannel | RawVodItem | RawSeriesItem | undefined {
+    for (const items of data.channels.values()) {
+        const found = items.find((i) => i.id === id);
+        if (found) return found;
+    }
+    for (const items of data.vod.values()) {
+        const found = items.find((i) => i.id === id);
+        if (found) return found;
+    }
+    for (const items of data.series.values()) {
+        const found = items.find((i) => i.id === id);
+        if (found) return found;
+    }
+    return undefined;
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/get-categories.handler.ts b/apps/stalker-mock-server/src/app/handlers/get-categories.handler.ts
new file mode 100644
index 0000000..8f57a0e
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/get-categories.handler.ts
@@ -0,0 +1,33 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+
+/**
+ * Stalker get_categories — returns category list filtered by type (itv/vod/series).
+ */
+export function handleGetCategories(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const type = (req.query['type'] as string) ?? 'vod';
+    const data = getPortalData(mac);
+
+    let categories;
+    if (type === 'itv') {
+        categories = data.itvCategories;
+    } else if (type === 'series') {
+        categories = data.seriesCategories;
+    } else {
+        categories = data.vodCategories;
+    }
+
+    res.json({ js: categories });
+}
+
+export function extractMac(req: Request): string {
+    const cookie = req.headers['cookie'] ?? '';
+    return (
+        cookie
+            .split(';')
+            .find((c) => c.trim().startsWith('mac='))
+            ?.split('=')[1]
+            ?.trim() ?? '00:00:00:00:00:00'
+    );
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/get-epg-info.handler.ts b/apps/stalker-mock-server/src/app/handlers/get-epg-info.handler.ts
new file mode 100644
index 0000000..7c89386
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/get-epg-info.handler.ts
@@ -0,0 +1,37 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+import { extractMac } from './get-categories.handler.js';
+
+/**
+ * Stalker get_epg_info — returns bulk EPG keyed by channel id.
+ *
+ * Query params:
+ *   period: number of future hours to include (default 168)
+ */
+export function handleGetEpgInfo(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const period = parseInt((req.query['period'] as string) ?? '168', 10);
+    const data = getPortalData(mac);
+    const now = Math.floor(Date.now() / 1000);
+    const currentDayStart = new Date();
+    currentDayStart.setUTCHours(0, 0, 0, 0);
+    const startTimestamp = Math.floor(currentDayStart.getTime() / 1000);
+    const endTimestamp = now + Math.max(period, 1) * 60 * 60;
+
+    const epgByChannel = Object.fromEntries(
+        [...data.epg.entries()].map(([channelId, programs]) => [
+            channelId,
+            programs.filter(
+                (program) =>
+                    program.stop_timestamp >= startTimestamp &&
+                    program.start_timestamp <= endTimestamp
+            ),
+        ])
+    );
+
+    res.json({
+        js: {
+            data: epgByChannel,
+        },
+    });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/get-genres.handler.ts b/apps/stalker-mock-server/src/app/handlers/get-genres.handler.ts
new file mode 100644
index 0000000..1c82ad1
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/get-genres.handler.ts
@@ -0,0 +1,31 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+import { extractMac } from './get-categories.handler.js';
+
+/**
+ * Stalker get_genres — returns genre list for a content type.
+ * Genres mirror the categories for our mock portal.
+ */
+export function handleGetGenres(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const type = (req.query['type'] as string) ?? 'vod';
+    const data = getPortalData(mac);
+
+    let categories;
+    if (type === 'itv') {
+        categories = data.itvCategories;
+    } else if (type === 'series') {
+        categories = data.seriesCategories;
+    } else {
+        categories = data.vodCategories;
+    }
+
+    const genres = categories.map((cat) => ({
+        id: cat.id,
+        title: cat.title,
+        alias: cat.alias,
+        censored: '0',
+    }));
+
+    res.json({ js: genres });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/get-ordered-list.handler.ts b/apps/stalker-mock-server/src/app/handlers/get-ordered-list.handler.ts
new file mode 100644
index 0000000..a7affa3
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/get-ordered-list.handler.ts
@@ -0,0 +1,80 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+import { extractMac } from './get-categories.handler.js';
+import { RawChannel, RawSeriesItem, RawVodItem } from '../data-generator.js';
+
+const PAGE_SIZE = 14;
+
+type AnyItem = RawChannel | RawVodItem | RawSeriesItem;
+
+/**
+ * Stalker get_ordered_list — returns paginated content for a category.
+ *
+ * Query params:
+ *   type:     itv | vod | series
+ *   category: category_id (or "*" for all)
+ *   genre:    same as category for itv
+ *   p:        page number (1-based)
+ *   search:   optional search phrase
+ */
+export function handleGetOrderedList(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const type = (req.query['type'] as string) ?? 'vod';
+    const categoryId = (req.query['category'] as string) ?? '*';
+    const page = parseInt((req.query['p'] as string) ?? '1', 10);
+    const search = ((req.query['search'] as string) ?? '').toLowerCase();
+    const data = getPortalData(mac);
+
+    let allItems: AnyItem[] = [];
+
+    if (type === 'itv') {
+        if (categoryId === '*') {
+            for (const items of data.channels.values()) {
+                allItems.push(...items);
+            }
+        } else {
+            allItems = data.channels.get(categoryId) ?? [];
+        }
+    } else if (type === 'series') {
+        if (categoryId === '*') {
+            for (const items of data.series.values()) {
+                allItems.push(...items);
+            }
+        } else {
+            allItems = data.series.get(categoryId) ?? [];
+        }
+    } else {
+        // vod (default)
+        if (categoryId === '*') {
+            for (const items of data.vod.values()) {
+                allItems.push(...items);
+            }
+        } else {
+            allItems = data.vod.get(categoryId) ?? [];
+        }
+    }
+
+    // Apply search filter
+    if (search) {
+        allItems = allItems.filter((item) => {
+            const name = ('name' in item ? item.name : '') ?? '';
+            return name.toLowerCase().includes(search);
+        });
+    }
+
+    const totalItems = allItems.length;
+    const totalPages = Math.ceil(totalItems / PAGE_SIZE);
+    const offset = (page - 1) * PAGE_SIZE;
+    const pageItems = allItems.slice(offset, offset + PAGE_SIZE);
+
+    res.json({
+        js: {
+            data: pageItems,
+            total_items: totalItems,
+            max_page_items: PAGE_SIZE,
+            cur_page: page,
+            total_pages: totalPages,
+            selected_item: 0,
+        },
+    });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/get-seasons.handler.ts b/apps/stalker-mock-server/src/app/handlers/get-seasons.handler.ts
new file mode 100644
index 0000000..88a6e37
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/get-seasons.handler.ts
@@ -0,0 +1,55 @@
+import { Request, Response } from 'express';
+import { generateSeasons } from '../data-generator.js';
+import { getPortalData } from '../data-store.js';
+import { getScenario } from '../scenarios.js';
+import { extractMac } from './get-categories.handler.js';
+
+/**
+ * Stalker get_ordered_list with type=series for seasons/episodes.
+ * When a series item is opened, the frontend requests seasons via
+ * get_ordered_list?action=get_ordered_list&type=series&movie_id=<id>
+ *
+ * This handler is invoked from the main portal router when movie_id is present.
+ */
+export function handleGetSeasons(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const seriesId = req.query['movie_id'] as string;
+    const data = getPortalData(mac);
+    const scenario = getScenario(mac);
+
+    // Try the precomputed seasons map first
+    if (data.seasons.has(seriesId)) {
+        res.json({ js: data.seasons.get(seriesId) });
+        return;
+    }
+
+    // Series id might belong to a VOD item with is_series=1 — generate seasons on demand
+    let foundItem: { id: string; name: string; o_name: string; title: string; cmd: string; screenshot_uri: string; cover: string; description: string; actors: string; director: string; year: string; genres_str: string; rating_imdb: string; rating_kinopoisk: string; category_id: string; is_series: 0; has_files: 0 } | undefined;
+
+    for (const items of data.vod.values()) {
+        const match = items.find((i) => i.id === seriesId);
+        if (match) {
+            foundItem = {
+                ...match,
+                genres_str: match.genres_str ?? match.genre ?? '',
+                is_series: 0,
+                has_files: 0,
+            };
+            break;
+        }
+    }
+
+    if (!foundItem) {
+        res.json({ js: [] });
+        return;
+    }
+
+    const seasons = generateSeasons(
+        foundItem,
+        scenario.seasonsPerSeries,
+        scenario.episodesPerSeason
+    );
+    data.seasons.set(seriesId, seasons);
+
+    res.json({ js: seasons });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/get-short-epg.handler.ts b/apps/stalker-mock-server/src/app/handlers/get-short-epg.handler.ts
new file mode 100644
index 0000000..441631f
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/get-short-epg.handler.ts
@@ -0,0 +1,38 @@
+import { Request, Response } from 'express';
+import { generateEpg } from '../data-generator.js';
+import { getPortalData } from '../data-store.js';
+import { extractMac } from './get-categories.handler.js';
+
+/**
+ * Stalker get_short_epg — returns EPG programs for a channel.
+ *
+ * Query params:
+ *   ch_id: channel id
+ *   size:  number of programs to return (default 12)
+ */
+export function handleGetShortEpg(req: Request, res: Response): void {
+    const mac = extractMac(req);
+    const channelId = req.query['ch_id'] as string;
+    const size = parseInt((req.query['size'] as string) ?? '12', 10);
+    const data = getPortalData(mac);
+
+    let programs = data.epg.get(channelId);
+
+    if (!programs) {
+        // Channel not found — generate on-the-fly
+        programs = generateEpg(`Channel ${channelId}`);
+        data.epg.set(channelId, programs);
+    }
+
+    const now = Math.floor(Date.now() / 1000);
+    const currentIndex = programs.findIndex(
+        (program) => program.stop_timestamp > now
+    );
+    const startIndex = currentIndex >= 0 ? currentIndex : 0;
+
+    res.json({
+        js: {
+            data: programs.slice(startIndex, startIndex + size),
+        },
+    });
+}
diff --git a/apps/stalker-mock-server/src/app/handlers/handshake.handler.ts b/apps/stalker-mock-server/src/app/handlers/handshake.handler.ts
new file mode 100644
index 0000000..c183548
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/handlers/handshake.handler.ts
@@ -0,0 +1,24 @@
+import { Request, Response } from 'express';
+
+/**
+ * Stalker handshake — returns a Bearer token.
+ * Real portals return a JWT; we return a deterministic fake token.
+ */
+export function handleHandshake(req: Request, res: Response): void {
+    const mac = (req.headers['cookie'] ?? '')
+        .split(';')
+        .find((c) => c.trim().startsWith('mac='))
+        ?.split('=')[1]
+        ?.trim() ?? 'unknown';
+
+    res.json({
+        js: {
+            token: `mock-token-${Buffer.from(mac).toString('base64')}`,
+            keep_alive: 180,
+            servertime: Math.floor(Date.now() / 1000),
+            servertimezone: 'Europe/Berlin',
+            version: '5.6.2',
+            revision: '1',
+        },
+    });
+}
diff --git a/apps/stalker-mock-server/src/app/routes/dispatch.ts b/apps/stalker-mock-server/src/app/routes/dispatch.ts
new file mode 100644
index 0000000..507ad1b
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/routes/dispatch.ts
@@ -0,0 +1,58 @@
+import { Request, Response } from 'express';
+import { handleHandshake } from '../handlers/handshake.handler.js';
+import { handleDoAuth } from '../handlers/do-auth.handler.js';
+import { handleGetCategories } from '../handlers/get-categories.handler.js';
+import { handleGetOrderedList } from '../handlers/get-ordered-list.handler.js';
+import { handleGetSeasons } from '../handlers/get-seasons.handler.js';
+import { handleCreateLink } from '../handlers/create-link.handler.js';
+import { handleFavorites } from '../handlers/favorites.handler.js';
+import { handleGetEpgInfo } from '../handlers/get-epg-info.handler.js';
+import { handleGetShortEpg } from '../handlers/get-short-epg.handler.js';
+import { handleGetGenres } from '../handlers/get-genres.handler.js';
+
+/**
+ * Shared Stalker action dispatcher.
+ * Used by both the direct /portal.php route and the /stalker CORS proxy route.
+ */
+export default function dispatchPortalAction(req: Request, res: Response): void {
+    const action = req.query['action'] as string;
+
+    switch (action) {
+        case 'handshake':
+            handleHandshake(req, res);
+            break;
+        case 'do_auth':
+            handleDoAuth(req, res);
+            break;
+        case 'get_categories':
+        case 'get_genres_vod':
+        case 'get_genres_itv':
+            handleGetCategories(req, res);
+            break;
+        case 'get_genres':
+            handleGetGenres(req, res);
+            break;
+        case 'get_ordered_list':
+            if (req.query['movie_id']) {
+                handleGetSeasons(req, res);
+            } else {
+                handleGetOrderedList(req, res);
+            }
+            break;
+        case 'create_link':
+            handleCreateLink(req, res);
+            break;
+        case 'favorites':
+            handleFavorites(req, res);
+            break;
+        case 'get_short_epg':
+            handleGetShortEpg(req, res);
+            break;
+        case 'get_epg_info':
+            handleGetEpgInfo(req, res);
+            break;
+        default:
+            console.warn(`[portal] Unknown action: ${action}`);
+            res.json({ js: { error: `Unknown action: ${action}` } });
+    }
+}
diff --git a/apps/stalker-mock-server/src/app/routes/portal.route.ts b/apps/stalker-mock-server/src/app/routes/portal.route.ts
new file mode 100644
index 0000000..e65f1e4
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/routes/portal.route.ts
@@ -0,0 +1,14 @@
+import { Router, Request, Response } from 'express';
+import dispatchPortalAction from './dispatch.js';
+
+const router = Router();
+
+/**
+ * Main Stalker API dispatcher.
+ * All requests arrive as GET /portal.php?action=<action>&...
+ */
+router.get('/', (req: Request, res: Response) => {
+    dispatchPortalAction(req, res);
+});
+
+export default router;
diff --git a/apps/stalker-mock-server/src/app/scenarios.ts b/apps/stalker-mock-server/src/app/scenarios.ts
new file mode 100644
index 0000000..3a0454b
--- /dev/null
+++ b/apps/stalker-mock-server/src/app/scenarios.ts
@@ -0,0 +1,121 @@
+export interface ScenarioConfig {
+    name: string;
+    description: string;
+    seed: number;
+    categoryCount: {
+        itv: number;
+        vod: number;
+        series: number;
+    };
+    itemsPerCategory: number;
+    seasonsPerSeries: number;
+    episodesPerSeason: number;
+    /** Fraction of VOD items that have is_series=1 (Ministra mode) */
+    isSeriesFraction: number;
+    /** Fraction of VOD items that have embedded series[] array */
+    embeddedSeriesFraction: number;
+}
+
+/**
+ * Predefined scenarios keyed by MAC address (lowercase, colon-separated).
+ * Any unknown MAC uses its bytes as the seed for deterministic-but-unique data.
+ */
+export const SCENARIOS: Record<string, ScenarioConfig> = {
+    '00:1a:79:00:00:01': {
+        name: 'default',
+        description: 'Balanced portal — 8 categories, 40 items each',
+        seed: 1001,
+        categoryCount: { itv: 8, vod: 8, series: 8 },
+        itemsPerCategory: 40,
+        seasonsPerSeries: 3,
+        episodesPerSeason: 8,
+        isSeriesFraction: 0,
+        embeddedSeriesFraction: 0,
+    },
+    '00:1a:79:ff:ff:ff': {
+        name: 'large',
+        description: 'Large catalog — 20 categories, 200 items each',
+        seed: 9999,
+        categoryCount: { itv: 20, vod: 20, series: 20 },
+        itemsPerCategory: 200,
+        seasonsPerSeries: 5,
+        episodesPerSeason: 12,
+        isSeriesFraction: 0,
+        embeddedSeriesFraction: 0,
+    },
+    '00:1a:79:00:00:02': {
+        name: 'series-heavy',
+        description: 'Series-heavy portal — many series with deep seasons',
+        seed: 2002,
+        categoryCount: { itv: 3, vod: 5, series: 15 },
+        itemsPerCategory: 30,
+        seasonsPerSeries: 6,
+        episodesPerSeason: 10,
+        isSeriesFraction: 0,
+        embeddedSeriesFraction: 0,
+    },
+    '00:1a:79:00:00:03': {
+        name: 'minimal',
+        description: 'Minimal portal — 2 categories, 5 items (edge case testing)',
+        seed: 3003,
+        categoryCount: { itv: 2, vod: 2, series: 2 },
+        itemsPerCategory: 5,
+        seasonsPerSeries: 1,
+        episodesPerSeason: 3,
+        isSeriesFraction: 0,
+        embeddedSeriesFraction: 0,
+    },
+    '00:1a:79:00:00:04': {
+        name: 'is-series',
+        description: 'VOD with is_series=1 flag (Ministra plugin flow testing)',
+        seed: 4004,
+        categoryCount: { itv: 4, vod: 6, series: 4 },
+        itemsPerCategory: 20,
+        seasonsPerSeries: 3,
+        episodesPerSeason: 6,
+        isSeriesFraction: 0.6, // 60% of VOD items are is_series=1
+        embeddedSeriesFraction: 0,
+    },
+    '00:1a:79:00:00:05': {
+        name: 'embedded-series',
+        description: 'VOD with embedded series[] arrays',
+        seed: 5005,
+        categoryCount: { itv: 4, vod: 6, series: 4 },
+        itemsPerCategory: 20,
+        seasonsPerSeries: 2,
+        episodesPerSeason: 5,
+        isSeriesFraction: 0,
+        embeddedSeriesFraction: 0.5, // 50% of VOD items have embedded series[]
+    },
+};
+
+/**
+ * Convert a MAC address string to a numeric seed for unknown MACs.
+ * e.g. "AA:BB:CC:DD:EE:FF" -> sum of byte values
+ */
+export function macToSeed(mac: string): number {
+    return mac
+        .toLowerCase()
+        .split(':')
+        .reduce((acc, byte) => acc + parseInt(byte, 16), 0);
+}
+
+/** Return the scenario config for a given MAC, falling back to a seeded default. */
+export function getScenario(mac: string): ScenarioConfig {
+    const normalizedMac = mac.toLowerCase();
+    if (SCENARIOS[normalizedMac]) {
+        return SCENARIOS[normalizedMac];
+    }
+    // Unknown MAC: use MAC bytes as seed, default shape
+    return {
+        name: 'auto',
+        description: `Auto-generated from MAC ${mac}`,
+        seed: macToSeed(mac),
+        categoryCount: { itv: 6, vod: 6, series: 6 },
+        itemsPerCategory: 30,
+        seasonsPerSeries: 3,
+        episodesPerSeason: 8,
+        isSeriesFraction: 0,
+        embeddedSeriesFraction: 0,
+    };
+}
diff --git a/apps/stalker-mock-server/src/main.ts b/apps/stalker-mock-server/src/main.ts
new file mode 100644
index 0000000..2e8eed6
--- /dev/null
+++ b/apps/stalker-mock-server/src/main.ts
@@ -0,0 +1,143 @@
+import http from 'http';
+import express, { Request, Response } from 'express';
+import cors from 'cors';
+import portalRouter from './app/routes/portal.route.js';
+import dispatchPortalAction from './app/routes/dispatch.js';
+import { resetAll } from './app/data-store.js';
+import { SCENARIOS } from './app/scenarios.js';
+
+const PORT = parseInt(process.env['PORT'] ?? '3210', 10);
+const app = express();
+
+// ---------------------------------------------------------------------------
+// Middleware
+// ---------------------------------------------------------------------------
+app.use(cors());
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Log every request
+app.use((req, _res, next) => {
+    const action = req.query['action'] ?? '-';
+    const mac =
+        (req.headers['cookie'] ?? '')
+            .split(';')
+            .find((c) => c.trim().startsWith('mac='))
+            ?.split('=')[1]
+            ?.trim() ?? (req.query['macAddress'] as string) ?? 'no-mac';
+    console.log(
+        `[${new Date().toISOString()}] ${req.method} ${req.path} action=${action} mac=${mac}`
+    );
+    next();
+});
+
+// ---------------------------------------------------------------------------
+// Routes
+// ---------------------------------------------------------------------------
+
+// Stalker portal.php endpoint (direct portal protocol, Electron mode)
+app.use('/portal.php', portalRouter);
+
+/**
+ * CORS proxy compatibility endpoint — mirrors the IPTVnator backend API shape:
+ *   GET /stalker?url=<portal_url>&macAddress=<mac>&action=<action>&...
+ *   → { payload: <stalker_response> }
+ *
+ * The IPTVnator PWA sends Stalker requests to AppConfig.BACKEND_URL/stalker.
+ * Playwright tests redirect those calls to this endpoint using page.route(),
+ * so no app code changes are required.
+ */
+app.get('/stalker', (req: Request, res: Response) => {
+    const { macAddress, url: _url, ...rest } = req.query as Record<string, string>;
+    const mac = macAddress ?? '00:1a:79:00:00:01';
+
+    // Build a lightweight synthetic request. We need a fresh object with mutable
+    // `query` and a Cookie header containing the MAC for the handler helpers.
+    const syntheticReq = {
+        query: rest,
+        headers: { cookie: `mac=${mac}` },
+        params: {},
+    } as unknown as Request;
+
+    // Capture the JSON response and wrap it in the proxy envelope { payload: ... }
+    let captured: unknown;
+    const syntheticRes = {
+        json: (data: unknown) => {
+            captured = data;
+        },
+    } as unknown as Response;
+
+    dispatchPortalAction(syntheticReq, syntheticRes);
+    res.json({ payload: captured });
+});
+
+// Health check
+app.get('/health', (_req: Request, res: Response) => {
+    res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// Reset all in-memory data (useful between Playwright test runs)
+app.post('/reset', (_req: Request, res: Response) => {
+    resetAll();
+    res.json({ status: 'reset', timestamp: new Date().toISOString() });
+});
+
+// ---------------------------------------------------------------------------
+// Start
+// ---------------------------------------------------------------------------
+const server = http.createServer(app);
+
+server.on('error', (err: NodeJS.ErrnoException) => {
+    if (err.code === 'EADDRINUSE') {
+        console.error(`[stalker-mock] Port ${PORT} is already in use.`);
+    } else {
+        console.error('[stalker-mock] Server error:', err.message);
+    }
+    process.exit(1);
+});
+
+const shutdown = () => {
+    console.log('\n[stalker-mock] Shutting down...');
+    server.close(() => process.exit(0));
+};
+
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);
+process.on('uncaughtException', (err) => {
+    console.error('[stalker-mock] Uncaught exception:', err);
+    process.exit(1);
+});
+process.on('unhandledRejection', (reason) => {
+    console.error('[stalker-mock] Unhandled rejection:', reason);
+    process.exit(1);
+});
+
+// When Nx (or any process manager) closes stdin, prevent auto-exit.
+// The HTTP server handle is what keeps the process alive.
+process.stdin.resume();
+process.stdin.on('end', () => { /* ignore stdin close */ });
+
+server.listen(PORT, () => {
+    const divider = '─'.repeat(62);
+    console.log(`\n${divider}`);
+    console.log(`  🎬  Stalker Mock Server  →  http://localhost:${PORT}`);
+    console.log(divider);
+    console.log('  Portal URL (Electron/direct):');
+    console.log(`    http://localhost:${PORT}/portal.php`);
+    console.log('');
+    console.log('  CORS proxy URL (PWA/Playwright e2e):');
+    console.log(`    http://localhost:${PORT}/stalker?url=...&macAddress=...`);
+    console.log('');
+    console.log('  Predefined scenario MACs:');
+    for (const [mac, scenario] of Object.entries(SCENARIOS)) {
+        console.log(
+            `    ${mac}  →  ${scenario.name.padEnd(16)} ${scenario.description}`
+        );
+    }
+    console.log('');
+    console.log('  Any other MAC generates deterministic unique data from MAC bytes.');
+    console.log(`  Utilities:`);
+    console.log(`    GET  http://localhost:${PORT}/health`);
+    console.log(`    POST http://localhost:${PORT}/reset    (clears favorites + cache)`);
+    console.log(`${divider}\n`);
+});
diff --git a/apps/stalker-mock-server/tsconfig.json b/apps/stalker-mock-server/tsconfig.json
new file mode 100644
index 0000000..2406aa3
--- /dev/null
+++ b/apps/stalker-mock-server/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "CommonJS",
+        "moduleResolution": "node",
+        "lib": ["ES2022"],
+        "outDir": "../../dist/apps/stalker-mock-server",
+        "rootDir": "src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "resolveJsonModule": true
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["node_modules", "dist"]
+}
diff --git a/apps/web-e2e/eslint.config.mjs b/apps/web-e2e/eslint.config.mjs
new file mode 100644
index 0000000..b2e9fac
--- /dev/null
+++ b/apps/web-e2e/eslint.config.mjs
@@ -0,0 +1,12 @@
+import playwright from 'eslint-plugin-playwright';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  playwright.configs['flat/recommended'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.js'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/apps/web-e2e/playwright.config.ts b/apps/web-e2e/playwright.config.ts
new file mode 100644
index 0000000..c104540
--- /dev/null
+++ b/apps/web-e2e/playwright.config.ts
@@ -0,0 +1,86 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    ...nxE2EPreset(__filename, { testDir: './src' }),
+    testMatch: ['**/*.e2e.ts'],
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        baseURL,
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+    /* Run local dev servers before starting the tests.
+     * Both the Angular app and the Stalker mock server start in parallel.
+     * Set MOCK_PORT to override the default mock server port (3210).
+     */
+    webServer: [
+        {
+            command: 'pnpm nx run web:serve',
+            url: 'http://localhost:4200',
+            reuseExistingServer: !process.env['CI'],
+            cwd: workspaceRoot,
+        },
+        {
+            command: 'pnpm nx run stalker-mock-server:serve',
+            url: `http://localhost:${process.env['MOCK_PORT'] ?? '3210'}/health`,
+            reuseExistingServer: !process.env['CI'],
+            cwd: workspaceRoot,
+        },
+        {
+            command: 'pnpm nx run xtream-mock-server:serve',
+            url: `http://localhost:${process.env['XTREAM_MOCK_PORT'] ?? '3211'}/health`,
+            reuseExistingServer: !process.env['CI'],
+            cwd: workspaceRoot,
+        },
+    ],
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+
+        // Uncomment for mobile browsers support
+        /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+        // Uncomment for branded browsers
+        /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+    ],
+});
diff --git a/apps/web-e2e/project.json b/apps/web-e2e/project.json
new file mode 100644
index 0000000..b741735
--- /dev/null
+++ b/apps/web-e2e/project.json
@@ -0,0 +1,15 @@
+{
+    "name": "web-e2e",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/web-e2e/src",
+    "implicitDependencies": [
+        "web",
+        "stalker-mock-server",
+        "xtream-mock-server"
+    ],
+    "// targets": "to see all targets run: nx show project web-e2e --web",
+    "targets": {
+        "e2e": {}
+    }
+}
diff --git a/apps/web-e2e/src/basic.e2e.ts b/apps/web-e2e/src/basic.e2e.ts
new file mode 100644
index 0000000..6a6262a
--- /dev/null
+++ b/apps/web-e2e/src/basic.e2e.ts
@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+import { join } from 'path';
+
+const fixturePath = join(__dirname, 'fixtures/test.m3u');
+
+test('basic test', async ({ page }) => {
+    await page.goto('/');
+
+    // Basic checks
+    expect(await page.title()).toBe('IPTVnator');
+
+    // Upload playlist test
+    await page.getByRole('button', { name: 'Add playlist' }).click();
+    const dialog = page.locator('mat-dialog-container');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('tab', { name: 'Add via file upload' }).click();
+    await page.setInputFiles('input[type="file"]', fixturePath);
+    const addButton = dialog.getByRole('button', {
+        name: 'Add playlist',
+        exact: true,
+    });
+    await expect(addButton).toBeEnabled();
+    await Promise.all([
+        page.waitForURL(/\/workspace\/playlists\/.+\/all$/),
+        addButton.click(),
+    ]);
+    await expect(page.getByText('test', { exact: true })).toBeVisible();
+    await expect(page.getByText('4 channels')).toBeVisible();
+    await expect(page.getByText('1. Channel 1')).toBeVisible();
+    await expect(page.getByText('4. HappyKids TV')).toBeVisible();
+});
diff --git a/apps/web-e2e/src/fixtures/test.m3u b/apps/web-e2e/src/fixtures/test.m3u
new file mode 100644
index 0000000..2c1783f
--- /dev/null
+++ b/apps/web-e2e/src/fixtures/test.m3u
@@ -0,0 +1,11 @@
+#EXTM3U url-tvg="http://xml-url/path/full.xml.gz"
+#EXTINF:0 tvg-id="1" tvg-logo="http://channel.icons.url/img/1.png" catchup="shift" catchup-days="3" timeshift="3" group-title="News", Channel 1
+#EXTGRP:News
+https://example.channels/path-to-file/1.m3u8
+#EXTINF:0 tvg-id="2" tvg-logo="http://channel.icons.url/img/2.png" catchup="shift" catchup-days="3" timeshift="3" group-title="News", Positive News TV
+#EXTGRP:News
+https://example.channels/path-to-file/2.m3u8
+#EXTINF:0 tvg-id="3" tvg-logo="http://channel.icons.url/img/3.png" catchup="shift" catchup-days="3" timeshift="3" group-title="Sport", Sport TVX
+#EXTGRP:Sport
+https://example.channels/path-to-file/3.m3u8
+#EXTINF:0 tvg-id="4" tvg-logo="http://channel.icons.url/img/4.png" catchup="shift" catchup-days="3" timeshift="3" group-title="Kids", HappyKids TV
\ No newline at end of file
diff --git a/apps/web-e2e/src/settings.e2e.ts b/apps/web-e2e/src/settings.e2e.ts
new file mode 100644
index 0000000..3b18bc6
--- /dev/null
+++ b/apps/web-e2e/src/settings.e2e.ts
@@ -0,0 +1,94 @@
+import { expect, Page, test } from '@playwright/test';
+import { join } from 'path';
+
+async function openSettings(page: Page) {
+    await page.locator('a[href$="/workspace/settings"]').click();
+    await page.waitForURL(/\/workspace\/settings$/);
+    await expect(page.locator('.settings-container')).toBeVisible();
+    await expect(page.locator('.settings-back-button')).toBeVisible();
+}
+
+async function saveSettings(page: Page) {
+    const saveButton = page.locator('[data-test-id="save-settings"]');
+
+    await saveButton.click();
+    await expect(saveButton).toBeDisabled();
+}
+
+test.describe('Settings', () => {
+    test.beforeEach(async ({ page }) => {
+        // Playwright creates a fresh browser context per test, so extra
+        // IndexedDB cleanup here only risks racing with app-managed DB handles.
+        await page.goto('/');
+    });
+
+    test('Check settings page', async ({ page }) => {
+        await openSettings(page);
+        await page.locator('.settings-back-button').click();
+    });
+
+    test('Change video player', async ({ page }) => {
+        await openSettings(page);
+
+        const playerSelect = page.locator('[data-test-id="select-video-player"]');
+
+        await expect(playerSelect).toContainText(
+            /Video\.js/i
+        );
+        await playerSelect.click();
+        await page.locator('mat-option[data-test-id="html5"]').click();
+
+        await saveSettings(page);
+        await page.reload();
+        await openSettings(page);
+
+        await expect(playerSelect).toContainText(
+            /HTML5/i
+        );
+    });
+
+    test('Change app theme', async ({ page }) => {
+        await openSettings(page);
+        await expect(
+            page.getByRole('radio', { name: 'System theme' })
+        ).toHaveAttribute('aria-checked', 'true');
+        await page.getByRole('radio', { name: 'Dark theme' }).click();
+
+        await saveSettings(page);
+        await page.reload();
+        await openSettings(page);
+
+        await expect(
+            page.getByRole('radio', { name: 'Dark theme' })
+        ).toHaveAttribute('aria-checked', 'true');
+    });
+
+    test('Change app language', async ({ page }) => {
+        await openSettings(page);
+        const languageSelect = page.locator('[data-test-id="select-language"]');
+
+        await expect(languageSelect).toContainText(
+            'English'
+        );
+        await languageSelect.click();
+        await page.locator('mat-option[data-test-id="de"]').click();
+
+        await saveSettings(page);
+        await page.reload();
+        await openSettings(page);
+
+        await expect(languageSelect).toContainText(
+            'Deutsch'
+        );
+    });
+
+    test.afterEach(async ({ page }, testInfo) => {
+        await page.screenshot({
+            path: join(
+                process.cwd(),
+                'dist/.playwright/apps/web-e2e/screenshots/settings',
+                `${testInfo.title}.png`
+            ),
+        });
+    });
+});
diff --git a/apps/web-e2e/src/stalker.e2e.ts b/apps/web-e2e/src/stalker.e2e.ts
new file mode 100644
index 0000000..57e6e54
--- /dev/null
+++ b/apps/web-e2e/src/stalker.e2e.ts
@@ -0,0 +1,309 @@
+import { expect, Locator, Page, test } from '@playwright/test';
+
+/**
+ * Stalker Portal E2E Tests
+ *
+ * These tests use the stalker-mock-server (apps/stalker-mock-server) to simulate
+ * a real Stalker portal. The mock server starts automatically alongside the Angular
+ * dev server when running e2e tests (see playwright.config.ts).
+ *
+ * Default scenario MAC (00:1A:79:00:00:01) provides:
+ *   - 8 categories per content type (VOD / Series / ITV)
+ *   - 40 items per category
+ *   - 3 seasons × 8 episodes per series item
+ *
+ * Tag: @stalker — run only stalker tests with: nx e2e web-e2e --grep "@stalker"
+ */
+
+const MOCK_PORT = process.env['MOCK_PORT'] ?? '3210';
+const MOCK_SERVER = `http://localhost:${MOCK_PORT}`;
+const PORTAL_URL = `${MOCK_SERVER}/portal.php`;
+const BACKEND_PROXY = `${MOCK_SERVER}/stalker`;
+
+/** Default scenario MAC — balanced catalog, 8 categories, 40 items */
+const DEFAULT_MAC = '00:1A:79:00:00:01';
+
+/** Minimal scenario MAC — 2 categories, 5 items (edge case testing) */
+const MINIMAL_MAC = '00:1A:79:00:00:03';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Intercept calls to the Angular dev backend (/stalker proxy) and redirect
+ * them to the mock server. This avoids needing a real backend or changing
+ * any app environment configuration.
+ */
+async function interceptStalkerRequests(page: Page): Promise<void> {
+    await page.route('**/localhost:3000/stalker**', async (route) => {
+        const originalUrl = new URL(route.request().url());
+        const mockUrl = new URL(BACKEND_PROXY);
+        // Forward all query params unchanged
+        originalUrl.searchParams.forEach((value, key) => {
+            mockUrl.searchParams.set(key, value);
+        });
+        await route.continue({ url: mockUrl.toString() });
+    });
+}
+
+async function setInputValue(input: Locator, value: string): Promise<void> {
+    await input.fill('');
+    await input.fill(value);
+
+    if ((await input.inputValue()) === value) {
+        return;
+    }
+
+    await input.click();
+    await input.press('ControlOrMeta+A');
+    await input.press('Backspace');
+    await input.type(value);
+    await expect(input).toHaveValue(value);
+}
+
+/**
+ * Add a Stalker portal via the UI:
+ * 1. Click the "add playlist" button to open the unified dialog
+ * 2. Select "Stalker" toggle
+ * 3. Fill in the form and submit
+ */
+async function addStalkerPortal(
+    page: Page,
+    options: { name?: string; mac?: string } = {}
+): Promise<void> {
+    const { name = 'Mock Stalker Portal', mac = DEFAULT_MAC } = options;
+
+    await page.getByRole('button', { name: 'Add playlist' }).click();
+    const dialog = page.locator('mat-dialog-container');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('tab', { name: 'Stalker', exact: true }).click();
+
+    await setInputValue(dialog.locator('input#title'), name);
+    await setInputValue(dialog.locator('input#portalUrl'), PORTAL_URL);
+    await setInputValue(dialog.locator('input#macAddress'), mac);
+
+    const addButton = dialog.getByRole('button', { name: 'Add', exact: true });
+    await expect(addButton).toBeEnabled({ timeout: 10_000 });
+    await addButton.click();
+    // Wait for dialog to close
+    await page.waitForSelector('mat-dialog-container', { state: 'detached' });
+    await page.waitForURL(/stalker.*vod/);
+}
+
+// ---------------------------------------------------------------------------
+// Test setup
+// ---------------------------------------------------------------------------
+
+test.beforeEach(async ({ page, request }) => {
+    // Reset mock server state (clears in-memory favorites and cache)
+    await request.post(`${MOCK_SERVER}/reset`);
+
+    // Playwright creates a fresh browser context per test, so extra
+    // IndexedDB cleanup here only risks racing with app-managed DB handles.
+    await page.goto('/');
+
+    // Redirect backend proxy calls to the mock server
+    await interceptStalkerRequests(page);
+});
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+test('@stalker health check — mock server is running', async ({ request }) => {
+    const response = await request.get(`${MOCK_SERVER}/health`);
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+    expect(body.status).toBe('ok');
+});
+
+test('@stalker add a Stalker portal and see it in the playlist list', async ({
+    page,
+}) => {
+    await addStalkerPortal(page, { name: 'My Test Portal' });
+
+    // Portal card should appear on the home page
+    await expect(
+        page.getByText('My Test Portal', { exact: false })
+    ).toBeVisible();
+});
+
+test('@stalker VOD — categories load from mock server', async ({ page }) => {
+    await addStalkerPortal(page);
+
+    // Default scenario has 8 VOD categories (+ 1 "All categories" prepended by the store)
+    const categoryItems = page.locator('.category-item');
+    await expect(categoryItems.first()).toBeVisible({ timeout: 10_000 });
+    const count = await categoryItems.count();
+    expect(count).toBeGreaterThanOrEqual(9);
+});
+
+test('@stalker VOD — content list loads after selecting a category', async ({
+    page,
+}) => {
+    await addStalkerPortal(page);
+
+    // Click the first non-"All" category
+    const categories = page.locator('.category-item');
+    await categories.nth(1).click();
+
+    // Content grid / list should appear with items
+    const contentItems = page.locator(
+        '.content-card, [data-test-id="channel-item"], mat-card'
+    );
+    await expect(contentItems.first()).toBeVisible({ timeout: 10_000 });
+    const itemCount = await contentItems.count();
+    expect(itemCount).toBeGreaterThan(0);
+});
+
+test('@stalker minimal scenario — correct item counts', async ({ page }) => {
+    await addStalkerPortal(page, {
+        name: 'Minimal Portal',
+        mac: MINIMAL_MAC,
+    });
+
+    // Minimal scenario: 2 categories (+ "All" = 3 visible)
+    const categories = page.locator('.category-item');
+    await expect(categories.first()).toBeVisible({ timeout: 10_000 });
+    const count = await categories.count();
+    // At least 2 real categories
+    expect(count).toBeGreaterThanOrEqual(2);
+});
+
+test('@stalker EPG data loads for ITV channel', async ({ page }) => {
+    await addStalkerPortal(page);
+
+    const shortEpgRequests: string[] = [];
+    page.on('request', (request) => {
+        if (request.url().includes('action=get_short_epg')) {
+            shortEpgRequests.push(request.url());
+        }
+    });
+
+    // Navigate to ITV tab
+    await page.getByRole('link', { name: /live|itv/i }).click();
+    await page.waitForURL(/stalker.*itv/);
+
+    // ITV view requires an explicit category selection before channels render
+    const categories = page.locator('.category-item');
+    await expect(categories.nth(1)).toBeVisible({ timeout: 10_000 });
+    await categories.nth(1).click();
+
+    // Wait for channels to appear
+    const channels = page.locator('[data-test-id="channel-item"]');
+    await expect(channels.first()).toBeVisible({ timeout: 20_000 });
+    expect(shortEpgRequests).toHaveLength(0);
+
+    // Click a channel — EPG info should appear
+    await channels.first().click();
+    await expect(channels.first()).toHaveClass(/active/, { timeout: 20_000 });
+    await expect(page.locator('app-epg-list')).toBeVisible({
+        timeout: 20_000,
+    });
+    await expect(page.locator('app-epg-list .selected-date')).toBeVisible({
+        timeout: 20_000,
+    });
+});
+
+test('@stalker bulk EPG is fetched once and reused across channel switches', async ({
+    page,
+}) => {
+    await addStalkerPortal(page);
+
+    const epgInfoRequests: string[] = [];
+    const shortEpgRequests: string[] = [];
+    page.on('request', (request) => {
+        if (request.url().includes('action=get_epg_info')) {
+            epgInfoRequests.push(request.url());
+        }
+        if (request.url().includes('action=get_short_epg')) {
+            shortEpgRequests.push(request.url());
+        }
+    });
+
+    await page.getByRole('link', { name: /live|itv/i }).click();
+    await page.waitForURL(/stalker.*itv/);
+
+    const categories = page.locator('.category-item');
+    await expect(categories.nth(1)).toBeVisible({ timeout: 10_000 });
+    await categories.nth(1).click();
+
+    const channels = page.locator('[data-test-id="channel-item"]');
+    await expect(channels.nth(1)).toBeVisible({ timeout: 20_000 });
+    expect(shortEpgRequests).toHaveLength(0);
+
+    await channels.first().click();
+    await expect(page.locator('app-epg-list')).toBeVisible({
+        timeout: 20_000,
+    });
+    await expect
+        .poll(() => epgInfoRequests.length, { timeout: 20_000 })
+        .toBe(1);
+
+    await channels.nth(1).click();
+    await expect(channels.nth(1)).toHaveClass(/active/, { timeout: 20_000 });
+    await expect
+        .poll(() => epgInfoRequests.length, { timeout: 20_000 })
+        .toBe(1);
+    expect(shortEpgRequests).toHaveLength(0);
+});
+
+test('@stalker mock server reset clears cached state', async ({ request }) => {
+    // Generate data for default MAC
+    const before = await request.get(
+        `${MOCK_SERVER}/stalker?action=get_categories&type=vod&macAddress=${DEFAULT_MAC}`
+    );
+    expect(before.ok()).toBeTruthy();
+
+    // Reset
+    const reset = await request.post(`${MOCK_SERVER}/reset`);
+    expect(reset.ok()).toBeTruthy();
+
+    // Data is regenerated identically (deterministic seed)
+    const after = await request.get(
+        `${MOCK_SERVER}/stalker?action=get_categories&type=vod&macAddress=${DEFAULT_MAC}`
+    );
+    const beforeBody = (await before.json()).payload.js;
+    const afterBody = (await after.json()).payload.js;
+    expect(afterBody).toEqual(beforeBody);
+});
+
+test('@stalker create_link returns a playable stream URL', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/stalker?action=create_link&cmd=ffrt4://vod/20001/index.m3u8&macAddress=${DEFAULT_MAC}`
+    );
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+    const streamUrl: string = body.payload.js.cmd;
+    expect(streamUrl).toMatch(/^https?:\/\//);
+    expect(streamUrl).toMatch(/\.m3u8$/);
+});
+
+test('@stalker series — seasons load for a series item', async ({
+    request,
+}) => {
+    // First fetch a series item to get its ID
+    const listResponse = await request.get(
+        `${MOCK_SERVER}/stalker?action=get_ordered_list&type=series&category=3001&p=1&macAddress=${DEFAULT_MAC}&JsHttpRequest=1-xml`
+    );
+    const listBody = await listResponse.json();
+    const firstItem = listBody.payload.js.data[0];
+    expect(firstItem).toBeDefined();
+
+    // Fetch seasons for the first series item
+    const seasonsResponse = await request.get(
+        `${MOCK_SERVER}/stalker?action=get_ordered_list&type=series&movie_id=${firstItem.id}&macAddress=${DEFAULT_MAC}`
+    );
+    const seasonsBody = await seasonsResponse.json();
+    const seasons = seasonsBody.payload.js;
+    expect(Array.isArray(seasons)).toBeTruthy();
+    // Default scenario has 3 seasons per series
+    expect(seasons.length).toBe(3);
+    expect(seasons[0].name).toBe('Season 1');
+    expect(Array.isArray(seasons[0].series)).toBeTruthy();
+    // Default scenario has 8 episodes per season
+    expect(seasons[0].series.length).toBe(8);
+});
diff --git a/apps/web-e2e/src/xtream.e2e.ts b/apps/web-e2e/src/xtream.e2e.ts
new file mode 100644
index 0000000..71df92d
--- /dev/null
+++ b/apps/web-e2e/src/xtream.e2e.ts
@@ -0,0 +1,488 @@
+import { APIRequestContext, test, expect, Page } from '@playwright/test';
+
+/**
+ * Xtream Codes E2E Tests
+ *
+ * These tests use the xtream-mock-server (apps/xtream-mock-server) to simulate
+ * a real Xtream Codes API portal. The mock server starts automatically alongside
+ * the Angular dev server when running e2e tests (see playwright.config.ts).
+ *
+ * Default scenario (user1:pass1) provides:
+ *   - 8 categories per content type (live / VOD / series)
+ *   - 40 items per category
+ *   - 3 seasons × 8 episodes per series item
+ *
+ * Tag: @xtream — run only Xtream tests with: nx e2e web-e2e --grep "@xtream"
+ */
+
+const XTREAM_MOCK_PORT = process.env['XTREAM_MOCK_PORT'] ?? '3211';
+const MOCK_SERVER = `http://localhost:${XTREAM_MOCK_PORT}`;
+
+/** Default scenario credentials */
+const DEFAULT_USERNAME = 'user1';
+const DEFAULT_PASSWORD = 'pass1';
+const EPG_USERNAME = 'epg';
+const EPG_PASSWORD = 'epg';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Intercept calls from the Angular PWA proxy (/xtream) and redirect them
+ * to the mock server. This avoids any real backend requirement.
+ */
+async function interceptXtreamRequests(page: Page): Promise<void> {
+    await page.route('**/localhost:3000/xtream**', async (route) => {
+        const originalUrl = new URL(route.request().url());
+        const mockUrl = new URL(`${MOCK_SERVER}/xtream`);
+        originalUrl.searchParams.forEach((value, key) => {
+            mockUrl.searchParams.set(key, value);
+        });
+        await route.continue({ url: mockUrl.toString() });
+    });
+}
+
+/**
+ * Add an Xtream portal via the UI.
+ */
+async function addXtreamPortal(
+    page: Page,
+    options: { name?: string; username?: string; password?: string } = {}
+): Promise<void> {
+    const {
+        name = 'Mock Xtream Portal',
+        username = DEFAULT_USERNAME,
+        password = DEFAULT_PASSWORD,
+    } = options;
+
+    await page.getByRole('button', { name: 'Add playlist' }).click();
+    const dialog = page.locator('mat-dialog-container');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('tab', { name: 'Xtream', exact: true }).click();
+
+    await dialog.locator('#title').fill(name);
+    await dialog.locator('#serverUrl').fill(MOCK_SERVER);
+    await dialog.locator('#username').fill(username);
+    await dialog.locator('#password').fill(password);
+
+    await dialog.getByRole('button', { name: 'Add', exact: true }).click();
+    await page.waitForSelector('mat-dialog-container', { state: 'detached' });
+    await page.waitForURL(/xtreams.*vod/);
+}
+
+// ---------------------------------------------------------------------------
+// Test setup
+// ---------------------------------------------------------------------------
+
+test.beforeEach(async ({ page, request }) => {
+    await request.post(`${MOCK_SERVER}/reset`);
+
+    // Playwright creates a fresh browser context per test, so extra
+    // IndexedDB cleanup here only risks racing with app-managed DB handles.
+    await page.goto('/');
+
+    await interceptXtreamRequests(page);
+});
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+test('@xtream health check — mock server is running', async ({ request }) => {
+    const response = await request.get(`${MOCK_SERVER}/health`);
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+    expect(body.status).toBe('ok');
+    expect(body.server).toBe('xtream-mock-server');
+});
+
+test('@xtream get_account_info — active account returns correct fields', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}`
+    );
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+
+    expect(body.user_info.username).toBe(DEFAULT_USERNAME);
+    expect(body.user_info.status).toBe('Active');
+    expect(body.server_info.url).toBeDefined();
+    expect(Array.isArray(body.user_info.allowed_output_formats)).toBeTruthy();
+});
+
+test('@xtream get_account_info — expired account returns Expired status', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=expired&password=expired`
+    );
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+    // Expired scenario: still returns 'Active' but exp_date is in the past
+    // The app's portal-status.service.ts detects expiry via exp_date, not status string
+    expect(body.user_info.status).toBe('Active');
+    const expDate = new Date(parseInt(body.user_info.exp_date) * 1000);
+    expect(expDate.getFullYear()).toBe(2020);
+});
+
+test('@xtream get_live_categories — returns expected category count', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_live_categories`
+    );
+    expect(response.ok()).toBeTruthy();
+    const categories = await response.json();
+    expect(Array.isArray(categories)).toBeTruthy();
+    // Default scenario: 8 live categories
+    expect(categories.length).toBe(8);
+    expect(categories[0]).toHaveProperty('category_id');
+    expect(categories[0]).toHaveProperty('category_name');
+});
+
+test('@xtream get_live_streams — streams have required fields', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_live_streams`
+    );
+    expect(response.ok()).toBeTruthy();
+    const streams = await response.json();
+    expect(Array.isArray(streams)).toBeTruthy();
+    expect(streams.length).toBeGreaterThan(0);
+
+    const first = streams[0];
+    expect(first.stream_type).toBe('live');
+    expect(first.stream_id).toBeGreaterThan(0);
+    expect(first.epg_channel_id).toMatch(/channel-\d+\.mock/);
+});
+
+test('@xtream get_vod_streams — streams have rating and container_extension', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_vod_streams`
+    );
+    expect(response.ok()).toBeTruthy();
+    const streams = await response.json();
+    expect(Array.isArray(streams)).toBeTruthy();
+
+    const first = streams[0];
+    expect(first.stream_type).toBe('movie');
+    expect(typeof first.rating).toBe('number');
+    expect(['mkv', 'mp4', 'avi']).toContain(first.container_extension);
+});
+
+test('@xtream get_series — series list has correct structure', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_series`
+    );
+    expect(response.ok()).toBeTruthy();
+    const series = await response.json();
+    expect(Array.isArray(series)).toBeTruthy();
+    expect(series.length).toBeGreaterThan(0);
+
+    const first = series[0];
+    expect(first.series_id).toBeGreaterThan(0);
+    expect(typeof first.name).toBe('string');
+    expect(typeof first.cover).toBe('string');
+    expect(Array.isArray(first.backdrop_path)).toBeTruthy();
+});
+
+test('@xtream get_series_info — seasons and episodes present', async ({
+    request,
+}) => {
+    // Get a series ID first
+    const listResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_series`
+    );
+    const series = await listResponse.json();
+    const firstSeriesId = series[0].series_id;
+
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_series_info&series_id=${firstSeriesId}`
+    );
+    expect(response.ok()).toBeTruthy();
+    const info = await response.json();
+
+    expect(Array.isArray(info.seasons)).toBeTruthy();
+    // Default scenario: 3 seasons per series
+    expect(info.seasons.length).toBe(3);
+    expect(info.seasons[0].name).toBe('Season 1');
+
+    // Episodes are keyed by season number string
+    expect(info.episodes['1']).toBeDefined();
+    expect(Array.isArray(info.episodes['1'])).toBeTruthy();
+    // Default scenario: 8 episodes per season
+    expect(info.episodes['1'].length).toBe(8);
+    expect(info.episodes['1'][0].episode_num).toBe(1);
+});
+
+test('@xtream get_vod_info — returns full movie details', async ({
+    request,
+}) => {
+    // Get a VOD stream ID first
+    const listResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_vod_streams`
+    );
+    const streams = await listResponse.json();
+    const firstVodId = streams[0].stream_id;
+
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_vod_info&vod_id=${firstVodId}`
+    );
+    expect(response.ok()).toBeTruthy();
+    const details = await response.json();
+
+    expect(details.info).toBeDefined();
+    expect(details.movie_data).toBeDefined();
+    expect(details.info.duration_secs).toBeGreaterThan(0);
+    expect(details.movie_data.stream_id).toBe(firstVodId);
+});
+
+test('@xtream get_short_epg — returns base64-encoded listings', async ({
+    request,
+}) => {
+    // Get a live stream ID first
+    const listResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_live_streams`
+    );
+    const streams = await listResponse.json();
+    const streamId = streams[0].stream_id;
+
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_short_epg&stream_id=${streamId}`
+    );
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+
+    expect(Array.isArray(body.epg_listings)).toBeTruthy();
+    expect(body.epg_listings.length).toBeGreaterThan(0);
+
+    const listing = body.epg_listings[0];
+    // Verify base64 encoding — decode and check it's valid text
+    const decodedTitle = Buffer.from(listing.title, 'base64').toString('utf-8');
+    expect(decodedTitle.length).toBeGreaterThan(0);
+    expect(listing.start_timestamp).toBeDefined();
+    expect(listing.stop_timestamp).toBeDefined();
+});
+
+test('@xtream epg fixture — short epg starts at the current program, respects limit, and exposes timestamp-vs-string mismatches', async ({
+    request,
+}) => {
+    const stream = await getEpgFixtureStream(request);
+
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${EPG_USERNAME}&password=${EPG_PASSWORD}&action=get_short_epg&stream_id=${stream.stream_id}&limit=2`
+    );
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+
+    expect(body.epg_listings).toHaveLength(2);
+
+    const [currentListing, nextListing] = body.epg_listings;
+    expect(decodeXtreamText(currentListing.title)).toBe('Global Headlines');
+    expect(decodeXtreamText(nextListing.title)).toBe('Market Wrap');
+
+    const now = Math.floor(Date.now() / 1000);
+    expect(Number.parseInt(currentListing.start_timestamp, 10)).toBeLessThanOrEqual(
+        now
+    );
+    expect(Number.parseInt(currentListing.stop_timestamp, 10)).toBeGreaterThanOrEqual(
+        now
+    );
+    expect(currentListing.start).not.toBe(
+        formatXtreamDateTime(
+            Number.parseInt(currentListing.start_timestamp, 10)
+        )
+    );
+    expect(currentListing.end).not.toBe(
+        formatXtreamDateTime(
+            Number.parseInt(currentListing.stop_timestamp, 10)
+        )
+    );
+});
+
+test('@xtream epg fixture — full epg and legacy alias return the same ordered schedule with a midnight boundary program', async ({
+    request,
+}) => {
+    const stream = await getEpgFixtureStream(request);
+
+    const fullResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${EPG_USERNAME}&password=${EPG_PASSWORD}&action=get_simple_data_table&stream_id=${stream.stream_id}`
+    );
+    const aliasResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${EPG_USERNAME}&password=${EPG_PASSWORD}&action=get_simple_date_table&stream_id=${stream.stream_id}`
+    );
+
+    expect(fullResponse.ok()).toBeTruthy();
+    expect(aliasResponse.ok()).toBeTruthy();
+
+    const fullBody = await fullResponse.json();
+    const aliasBody = await aliasResponse.json();
+
+    expect(aliasBody).toEqual(fullBody);
+
+    const titles = fullBody.epg_listings.map((listing: XtreamRawEpgListing) =>
+        decodeXtreamText(listing.title)
+    );
+    expect(titles).toEqual([
+        'Earlier Bulletin',
+        'Global Headlines',
+        'Market Wrap',
+        'Overnight Update',
+        'Late Edition',
+        'After Midnight',
+    ]);
+
+    const boundaryListing = fullBody.epg_listings.find(
+        (listing: XtreamRawEpgListing) =>
+            decodeXtreamText(listing.title) === 'Late Edition'
+    );
+    if (!boundaryListing) {
+        throw new Error('Expected the full EPG fixture to include Late Edition.');
+    }
+
+    const boundaryStart = new Date(
+        Number.parseInt(boundaryListing.start_timestamp, 10) * 1000
+    );
+    const boundaryStop = new Date(
+        Number.parseInt(boundaryListing.stop_timestamp, 10) * 1000
+    );
+
+    expect(boundaryStart.getUTCDate()).not.toBe(boundaryStop.getUTCDate());
+});
+
+test('@xtream reset — data regenerates identically after reset', async ({
+    request,
+}) => {
+    const url = `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_live_categories`;
+
+    const before = await (await request.get(url)).json();
+    await request.post(`${MOCK_SERVER}/reset`);
+    const after = await (await request.get(url)).json();
+
+    // Data is deterministic: same after reset
+    expect(after).toEqual(before);
+});
+
+test('@xtream proxy endpoint — returns payload wrapper', async ({
+    request,
+}) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/xtream?url=${MOCK_SERVER}&username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_vod_categories`
+    );
+    expect(response.ok()).toBeTruthy();
+    const body = await response.json();
+
+    expect(body.action).toBe('get_vod_categories');
+    expect(Array.isArray(body.payload)).toBeTruthy();
+    expect(body.payload.length).toBeGreaterThan(0);
+});
+
+test('@xtream category filter — get_live_streams filtered by category_id', async ({
+    request,
+}) => {
+    // Get categories to find a real ID
+    const catResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_live_categories`
+    );
+    const categories = await catResponse.json();
+    const categoryId = categories[0].category_id;
+
+    // Fetch streams filtered by that category
+    const streamResponse = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=${DEFAULT_USERNAME}&password=${DEFAULT_PASSWORD}&action=get_live_streams&category_id=${categoryId}`
+    );
+    const streams = await streamResponse.json();
+    expect(Array.isArray(streams)).toBeTruthy();
+    expect(streams.length).toBeGreaterThan(0);
+
+    // All returned streams should belong to this category
+    for (const s of streams) {
+        expect(String(s.category_id)).toBe(String(categoryId));
+    }
+});
+
+test('@xtream add portal and see it in the playlist list', async ({ page }) => {
+    await addXtreamPortal(page, { name: 'My Xtream Test Portal' });
+
+    await expect(
+        page.getByText('My Xtream Test Portal', { exact: false })
+    ).toBeVisible();
+});
+
+test('@xtream minimal scenario — reduced item count', async ({ request }) => {
+    const response = await request.get(
+        `${MOCK_SERVER}/player_api.php?username=minimal&password=minimal&action=get_live_categories`
+    );
+    const categories = await response.json();
+    // Minimal scenario: 2 categories
+    expect(categories.length).toBe(2);
+
+    const streams = await (
+        await request.get(
+            `${MOCK_SERVER}/player_api.php?username=minimal&password=minimal&action=get_live_streams`
+        )
+    ).json();
+    // 2 categories × 5 items = 10
+    expect(streams.length).toBe(10);
+});
+
+type XtreamLiveStream = {
+    category_id: string;
+    name: string;
+    stream_id: number;
+};
+
+type XtreamRawEpgListing = {
+    end: string;
+    start: string;
+    start_timestamp: string;
+    stop_timestamp: string;
+    title: string;
+};
+
+async function getEpgFixtureStream(
+    request: APIRequestContext
+): Promise<XtreamLiveStream> {
+    const categories = (await (
+        await request.get(
+            `${MOCK_SERVER}/player_api.php?username=${EPG_USERNAME}&password=${EPG_PASSWORD}&action=get_live_categories`
+        )
+    ).json()) as Array<{ category_id: string; category_name: string }>;
+
+    const epgCategory = categories.find(
+        (category) => category.category_name === 'EPG Focus'
+    );
+    if (!epgCategory) {
+        throw new Error('Expected the EPG fixture category to exist.');
+    }
+
+    const streams = (await (
+        await request.get(
+            `${MOCK_SERVER}/player_api.php?username=${EPG_USERNAME}&password=${EPG_PASSWORD}&action=get_live_streams&category_id=${epgCategory.category_id}`
+        )
+    ).json()) as XtreamLiveStream[];
+
+    const stream = streams.find((item) => item.name === 'Timezone News');
+    if (!stream) {
+        throw new Error('Expected the EPG fixture stream to exist.');
+    }
+    return stream;
+}
+
+function decodeXtreamText(value: string): string {
+    return Buffer.from(value, 'base64').toString('utf-8');
+}
+
+function formatXtreamDateTime(timestampSeconds: number): string {
+    return new Date(timestampSeconds * 1000)
+        .toISOString()
+        .replace('T', ' ')
+        .replace('.000Z', '');
+}
diff --git a/apps/web-e2e/tsconfig.json b/apps/web-e2e/tsconfig.json
new file mode 100644
index 0000000..dcc6815
--- /dev/null
+++ b/apps/web-e2e/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "allowJs": true,
+        "outDir": "../../dist/out-tsc",
+        "sourceMap": false,
+        "module": "commonjs",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.js",
+        "playwright.config.ts",
+        "src/**/*.d.ts",
+        "src/**/*.e2e.ts"
+    ]
+}
diff --git a/apps/web/eslint.config.mjs b/apps/web/eslint.config.mjs
new file mode 100644
index 0000000..cd8ecd4
--- /dev/null
+++ b/apps/web/eslint.config.mjs
@@ -0,0 +1,37 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'app',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'app',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {
+            '@angular-eslint/template/click-events-have-key-events': 'off',
+            '@angular-eslint/template/interactive-supports-focus': 'off',
+        },
+    },
+];
diff --git a/apps/web/jest.config.ts b/apps/web/jest.config.ts
new file mode 100644
index 0000000..af48003
--- /dev/null
+++ b/apps/web/jest.config.ts
@@ -0,0 +1,41 @@
+import { nxPreset } from '@nx/jest/preset.js';
+import { createEsmPreset } from 'jest-preset-angular/presets/index.js';
+
+const angularEsmPreset = createEsmPreset({
+  diagnostics: false,
+  tsconfig: '<rootDir>/tsconfig.spec.json',
+});
+
+export default {
+  ...nxPreset,
+  ...angularEsmPreset,
+  displayName: 'web',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/apps/web',
+  resolver: nxPreset.resolver,
+  moduleFileExtensions: Array.from(
+    new Set([
+      ...(nxPreset.moduleFileExtensions ?? []),
+      ...(angularEsmPreset.moduleFileExtensions ?? []),
+    ])
+  ),
+  testMatch: nxPreset.testMatch,
+  testEnvironmentOptions: {},
+  snapshotSerializers: angularEsmPreset.snapshotSerializers,
+  moduleNameMapper: {
+    ...(angularEsmPreset.moduleNameMapper ?? {}),
+    '^@iptvnator/portal/xtream/feature$':
+      '<rootDir>/src/test-stubs/xtream-feature.stub.ts',
+    tslib: 'tslib/tslib.es6.js',
+    '^iptv-playlist-parser$':
+      '<rootDir>/src/test-stubs/iptv-playlist-parser.mjs',
+    '^rxjs': '<rootDir>/../../node_modules/rxjs/dist/bundles/rxjs.umd.js',
+    '^uuid$': '<rootDir>/../../node_modules/uuid/wrapper.mjs',
+  },
+  transform: angularEsmPreset.transform,
+  transformIgnorePatterns: [],
+  extensionsToTreatAsEsm: angularEsmPreset.extensionsToTreatAsEsm,
+  coverageReporters: [
+    ...(nxPreset.coverageReporters ?? []),
+  ],
+};
diff --git a/apps/web/project.json b/apps/web/project.json
new file mode 100644
index 0000000..02db5df
--- /dev/null
+++ b/apps/web/project.json
@@ -0,0 +1,201 @@
+{
+    "name": "web",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "prefix": "app",
+    "sourceRoot": "apps/web/src",
+    "cli": {
+        "cache": {
+            "enabled": false
+        }
+    },
+    "tags": ["scope:app", "type:app"],
+    "targets": {
+        "build": {
+            "executor": "@angular/build:application",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": {
+                    "base": "dist/apps/web",
+                    "browser": ""
+                },
+                "polyfills": ["zone.js"],
+                "tsConfig": "apps/web/tsconfig.app.json",
+                "inlineStyleLanguage": "scss",
+                "assets": [
+                    "apps/web/src/favicon.ico",
+                    "apps/web/src/assets",
+                    "apps/web/src/manifest.webmanifest"
+                ],
+                "styles": [
+                    "apps/web/src/styles.scss",
+                    "apps/web/src/m3-theme.scss",
+                    "./node_modules/video.js/dist/video-js.css"
+                ],
+                "allowedCommonJsDependencies": [
+                    "qrcode",
+                    "iptv-playlist-parser",
+                    "mpegts.js",
+                    "videojs-contrib-quality-levels",
+                    "videojs-quality-selector-hls",
+                    "global/window",
+                    "global/document",
+                    "@videojs/xhr",
+                    "videojs-vtt.js",
+                    "mux.js/lib/tools/parse-sidx",
+                    "mux.js/lib/utils/clock",
+                    "keycode",
+                    "safe-json-parse/tuple",
+                    "@xmldom/xmldom",
+                    "url-toolkit"
+                ]
+            },
+            "configurations": {
+                "production": {
+                    "baseHref": "./",
+                    "budgets": [
+                        {
+                            "type": "initial",
+                            "maximumWarning": "4.5mb",
+                            "maximumError": "5mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "12.5kb",
+                            "maximumError": "15kb"
+                        }
+                    ],
+                    "outputHashing": "all",
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/web/src/environments/environment.ts",
+                            "with": "apps/web/src/environments/environment.prod.ts"
+                        }
+                    ]
+                },
+                "pwa": {
+                    "baseHref": "/",
+                    "budgets": [
+                        {
+                            "type": "initial",
+                            "maximumWarning": "4.5mb",
+                            "maximumError": "5mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "12.5kb",
+                            "maximumError": "15kb"
+                        }
+                    ],
+                    "outputHashing": "all",
+                    "optimization": true,
+                    "extractLicenses": true,
+                    "sourceMap": false,
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/web/src/environments/environment.ts",
+                            "with": "apps/web/src/environments/environment.prod.ts"
+                        }
+                    ]
+                },
+                "development": {
+                    "optimization": false,
+                    "extractLicenses": false,
+                    "sourceMap": true
+                },
+                "electron-e2e": {
+                    "baseHref": "./",
+                    "optimization": false,
+                    "extractLicenses": false,
+                    "sourceMap": true
+                },
+                "kiratv": {
+                    "baseHref": "./",
+                    "budgets": [
+                        {
+                            "type": "initial",
+                            "maximumWarning": "4.5mb",
+                            "maximumError": "5mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "12.5kb",
+                            "maximumError": "15kb"
+                        }
+                    ],
+                    "outputHashing": "all",
+                    "fileReplacements": [
+                        {
+                            "replace": "apps/web/src/environments/environment.ts",
+                            "with": "apps/web/src/environments/environment.kiratv.ts"
+                        }
+                    ]
+                }
+            },
+            "defaultConfiguration": "production"
+        },
+        "build-e2e": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "pnpm nx run web:build:electron-e2e"
+            }
+        },
+        "serve": {
+            "continuous": true,
+            "executor": "@angular/build:dev-server",
+            "configurations": {
+                "production": {
+                    "buildTarget": "web:build:production"
+                },
+                "pwa": {
+                    "buildTarget": "web:build:pwa"
+                },
+                "development": {
+                    "buildTarget": "web:build:development"
+                },
+                "kiratv": {
+                    "buildTarget": "web:build:kiratv"
+                }
+            },
+            "defaultConfiguration": "development",
+            "options": {
+                "proxyConfig": "apps/web/proxy.conf.json"
+            }
+        },
+        "extract-i18n": {
+            "executor": "@angular/build:extract-i18n",
+            "options": {
+                "buildTarget": "web:build"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        },
+        "test": {
+            "executor": "nx:run-commands",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "command": [
+                    "node",
+                    "./node_modules/jest/bin/jest.js",
+                    "--config",
+                    "apps/web/jest.config.ts"
+                ],
+                "env": {
+                    "NODE_OPTIONS": "--experimental-vm-modules"
+                },
+                "forwardAllArgs": true
+            }
+        },
+        "serve-static": {
+            "continuous": true,
+            "executor": "@nx/web:file-server",
+            "options": {
+                "buildTarget": "web:build",
+                "port": 4200,
+                "staticFilePath": "dist/apps/web/browser",
+                "spa": true
+            }
+        }
+    }
+}
diff --git a/apps/web/proxy.conf.json b/apps/web/proxy.conf.json
new file mode 100644
index 0000000..63dd627
--- /dev/null
+++ b/apps/web/proxy.conf.json
@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}
diff --git a/apps/web/src/_settings-theme.scss b/apps/web/src/_settings-theme.scss
new file mode 100644
index 0000000..437c549
--- /dev/null
+++ b/apps/web/src/_settings-theme.scss
@@ -0,0 +1,324 @@
+.settings-container {
+    --settings-safe-bottom: env(safe-area-inset-bottom, 0px);
+    --settings-action-bar-offset: 24px;
+    --settings-action-bar-space: 112px;
+    --settings-page-header-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-low) 94%,
+        rgba(255, 255, 255, 0.98)
+    );
+    --settings-page-header-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 72%,
+        transparent
+    );
+    --settings-page-header-shadow:
+        0 10px 20px -28px rgba(15, 23, 42, 0.16),
+        0 1px 0 rgba(255, 255, 255, 0.68) inset;
+    --settings-group-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface) 96%,
+        rgba(255, 255, 255, 0.96)
+    );
+    --settings-group-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 78%,
+        transparent
+    );
+    --settings-group-shadow: 0 14px 28px -32px rgba(15, 23, 42, 0.14);
+    --settings-group-active-bg: color-mix(
+        in srgb,
+        var(--app-selection-color) 2%,
+        rgba(255, 255, 255, 0.98)
+    );
+    --settings-group-active-ring: color-mix(
+        in srgb,
+        var(--app-selection-border) 68%,
+        var(--settings-group-border)
+    );
+    --settings-group-active-glow: color-mix(
+        in srgb,
+        var(--app-selection-glow) 28%,
+        transparent
+    );
+    --settings-group-active-shadow:
+        inset 0 0 0 1px var(--settings-group-active-ring),
+        0 12px 24px -28px var(--settings-group-active-glow);
+    --settings-item-border: var(--app-separator);
+    --settings-item-danger-bg: color-mix(
+        in srgb,
+        var(--mat-sys-error) 4%,
+        rgba(255, 255, 255, 0.96)
+    );
+    --settings-item-danger-border: color-mix(
+        in srgb,
+        var(--mat-sys-error) 14%,
+        transparent
+    );
+    --settings-action-bar-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-low) 94%,
+        rgba(255, 255, 255, 0.9)
+    );
+    --settings-action-bar-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 62%,
+        transparent
+    );
+    --settings-action-bar-shadow: 0 10px 26px -26px rgba(15, 23, 42, 0.22);
+    --settings-muted: color-mix(
+        in srgb,
+        var(--mat-sys-on-surface) 64%,
+        transparent
+    );
+}
+
+:where(.dark-theme, [data-theme='dark'], .mat-app-background.dark)
+    .settings-container {
+    --settings-page-header-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 92%,
+        rgba(12, 16, 24, 0.94)
+    );
+    --settings-page-header-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 38%,
+        transparent
+    );
+    --settings-page-header-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.05),
+        0 16px 26px -34px rgba(0, 0, 0, 0.4);
+    --settings-group-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 94%,
+        rgba(10, 14, 22, 0.82)
+    );
+    --settings-group-border: rgba(255, 255, 255, 0.08);
+    --settings-group-shadow: 0 16px 28px -32px rgba(0, 0, 0, 0.42);
+    --settings-group-active-bg: color-mix(
+        in srgb,
+        var(--app-selection-surface) 24%,
+        rgba(255, 255, 255, 0.015)
+    );
+    --settings-group-active-ring: color-mix(
+        in srgb,
+        var(--app-selection-border) 54%,
+        rgba(255, 255, 255, 0.08)
+    );
+    --settings-group-active-glow: color-mix(
+        in srgb,
+        var(--app-selection-glow) 22%,
+        transparent
+    );
+    --settings-group-active-shadow:
+        inset 0 0 0 1px var(--settings-group-active-ring),
+        0 10px 22px -28px var(--settings-group-active-glow);
+    --settings-item-danger-bg: color-mix(
+        in srgb,
+        var(--mat-sys-error) 8%,
+        rgba(24, 10, 12, 0.86)
+    );
+    --settings-item-danger-border: color-mix(
+        in srgb,
+        var(--mat-sys-error) 24%,
+        transparent
+    );
+    --settings-action-bar-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 92%,
+        transparent
+    );
+    --settings-action-bar-border: rgba(255, 255, 255, 0.08);
+    --settings-action-bar-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
+    --settings-muted: color-mix(
+        in srgb,
+        var(--mat-sys-on-surface) 68%,
+        transparent
+    );
+}
+
+.settings-container {
+    .support-card {
+        width: 100%;
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        padding: 18px;
+        border-radius: 18px;
+        border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
+        background:
+            radial-gradient(
+                120% 140% at 0% 0%,
+                color-mix(in srgb, #ff4d6d 16%, transparent) 0%,
+                transparent 55%
+            ),
+            radial-gradient(
+                120% 140% at 100% 100%,
+                color-mix(in srgb, #ffb347 14%, transparent) 0%,
+                transparent 60%
+            ),
+            color-mix(
+                in srgb,
+                var(--mat-sys-surface-container-low) 92%,
+                transparent
+            );
+        overflow: hidden;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background: radial-gradient(
+                80% 100% at 50% -10%,
+                color-mix(in srgb, #ff4d6d 12%, transparent) 0%,
+                transparent 70%
+            );
+            opacity: 0.8;
+        }
+    }
+
+    .support-card__intro {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        z-index: 1;
+    }
+
+    .support-card__emblem {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border-radius: 14px;
+        background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
+        color: #fff;
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.35),
+            0 10px 18px -10px rgba(255, 77, 109, 0.55);
+
+        mat-icon {
+            font-size: 22px;
+            width: 22px;
+            height: 22px;
+        }
+    }
+
+    .support-card__copy {
+        min-width: 0;
+        flex: 1 1 auto;
+
+        h4 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 700;
+            letter-spacing: -0.01em;
+        }
+
+        p {
+            margin: 4px 0 0;
+            color: var(--settings-muted);
+            font-size: 0.86rem;
+            line-height: 1.5;
+            max-width: 64ch;
+        }
+    }
+
+    .support-card__actions {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .support-btn {
+        flex: 1 1 220px;
+        display: inline-flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 14px;
+        border-radius: 14px;
+        border: 1px solid transparent;
+        text-decoration: none;
+        color: #fff;
+        transition:
+            transform 0.18s ease,
+            box-shadow 0.18s ease,
+            filter 0.18s ease;
+
+        &:hover {
+            transform: translateY(-1px);
+            filter: brightness(1.04);
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow:
+                0 0 0 2px var(--mat-sys-surface),
+                0 0 0 4px
+                    color-mix(
+                        in srgb,
+                        var(--app-selection-color) 40%,
+                        transparent
+                    );
+        }
+    }
+
+    .support-btn__glyph {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.18);
+        color: #fff;
+        flex: 0 0 auto;
+
+        svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    .support-btn__text {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        strong {
+            font-size: 0.92rem;
+            font-weight: 700;
+            letter-spacing: -0.01em;
+        }
+
+        small {
+            color: rgba(255, 255, 255, 0.82);
+            font-size: 0.75rem;
+            line-height: 1.3;
+        }
+    }
+
+    .support-btn--sponsors {
+        background: linear-gradient(135deg, #d4337a, #ff4d6d);
+        box-shadow: 0 12px 22px -18px rgba(212, 51, 122, 0.7);
+    }
+
+    .support-btn--kofi {
+        background: linear-gradient(135deg, #13c3ff, #29abe0);
+        box-shadow: 0 12px 22px -18px rgba(19, 195, 255, 0.7);
+    }
+}
diff --git a/apps/web/src/app/app-date-locales.ts b/apps/web/src/app/app-date-locales.ts
new file mode 100644
index 0000000..a9fdbb7
--- /dev/null
+++ b/apps/web/src/app/app-date-locales.ts
@@ -0,0 +1,46 @@
+import { registerLocaleData } from '@angular/common';
+import localeAr from '@angular/common/locales/ar';
+import localeArMa from '@angular/common/locales/ar-MA';
+import localeBe from '@angular/common/locales/be';
+import localeDe from '@angular/common/locales/de';
+import localeEl from '@angular/common/locales/el';
+import localeEs from '@angular/common/locales/es';
+import localeFr from '@angular/common/locales/fr';
+import localeIt from '@angular/common/locales/it';
+import localeJa from '@angular/common/locales/ja';
+import localeKo from '@angular/common/locales/ko';
+import localeNl from '@angular/common/locales/nl';
+import localePl from '@angular/common/locales/pl';
+import localePt from '@angular/common/locales/pt';
+import localeRu from '@angular/common/locales/ru';
+import localeTr from '@angular/common/locales/tr';
+import localeZh from '@angular/common/locales/zh';
+import localeZhHant from '@angular/common/locales/zh-Hant';
+
+let localesRegistered = false;
+
+export function registerAppDateLocales(): void {
+    if (localesRegistered) {
+        return;
+    }
+
+    registerLocaleData(localeAr, 'ar');
+    registerLocaleData(localeArMa, 'ar-MA');
+    registerLocaleData(localeBe, 'be');
+    registerLocaleData(localeDe, 'de');
+    registerLocaleData(localeEl, 'el');
+    registerLocaleData(localeEs, 'es');
+    registerLocaleData(localeFr, 'fr');
+    registerLocaleData(localeIt, 'it');
+    registerLocaleData(localeJa, 'ja');
+    registerLocaleData(localeKo, 'ko');
+    registerLocaleData(localeNl, 'nl');
+    registerLocaleData(localePl, 'pl');
+    registerLocaleData(localePt, 'pt');
+    registerLocaleData(localeRu, 'ru');
+    registerLocaleData(localeTr, 'tr');
+    registerLocaleData(localeZh, 'zh');
+    registerLocaleData(localeZhHant, 'zh-Hant');
+
+    localesRegistered = true;
+}
diff --git a/apps/web/src/app/app.component.html b/apps/web/src/app/app.component.html
new file mode 100644
index 0000000..b118156
--- /dev/null
+++ b/apps/web/src/app/app.component.html
@@ -0,0 +1,3 @@
+<router-outlet />
+
+<app-epg-progress-panel />
diff --git a/apps/web/src/app/app.component.spec.ts b/apps/web/src/app/app.component.spec.ts
new file mode 100644
index 0000000..7792752
--- /dev/null
+++ b/apps/web/src/app/app.component.spec.ts
@@ -0,0 +1,210 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Actions } from '@ngrx/effects';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { TranslateService } from '@ngx-translate/core';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { WORKSPACE_SHELL_ACTIONS } from '@iptvnator/workspace/shell/util';
+import { MockProvider } from 'ng-mocks';
+import { EMPTY, of } from 'rxjs';
+import { DataService } from 'services';
+import {
+    Language,
+    Settings,
+    StartupBehavior,
+    STORE_KEY,
+    StreamFormat,
+    Theme,
+    VideoPlayer,
+} from 'shared-interfaces';
+import { PlaylistActions } from 'm3u-state';
+import { AppComponent } from './app.component';
+import { ElectronServiceStub } from './services/electron.service.stub';
+import { SettingsService } from './services/settings.service';
+
+jest.spyOn(global.console, 'error').mockImplementation(() => {
+    // suppress console.error output during tests
+});
+
+class MockSettingsService {
+    getValueFromLocalStorage = jest.fn().mockReturnValue(of(undefined));
+    changeTheme = jest.fn();
+}
+
+const DEFAULT_SETTINGS: Settings = {
+    player: VideoPlayer.VideoJs,
+    epgUrl: [],
+    streamFormat: StreamFormat.M3u8StreamFormat,
+    language: Language.ENGLISH,
+    showCaptions: false,
+    showDashboard: true,
+    startupBehavior: StartupBehavior.FirstView,
+    showExternalPlaybackBar: true,
+    theme: Theme.SystemTheme,
+    mpvPlayerPath: '',
+    mpvReuseInstance: false,
+    vlcPlayerPath: '',
+    remoteControl: false,
+    remoteControlPort: 8765,
+    downloadFolder: '',
+};
+
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+    let epgService: EpgService;
+    let router: Router;
+    let settingsService: MockSettingsService;
+    let snackBar: MatSnackBar;
+    let store: MockStore;
+    let translateService: TranslateService;
+    const originalElectron = window.electron;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [AppComponent],
+            providers: [
+                provideMockStore(),
+                {
+                    provide: Actions,
+                    useValue: new Actions(EMPTY),
+                },
+                {
+                    provide: DataService,
+                    useClass: ElectronServiceStub,
+                },
+                {
+                    provide: SettingsService,
+                    useClass: MockSettingsService,
+                },
+                MockProvider(EpgService, {
+                    fetchEpg: jest.fn(),
+                }),
+                MockProvider(Router, {
+                    navigateByUrl: jest.fn(),
+                }),
+                MockProvider(MatSnackBar, {
+                    open: jest.fn(),
+                }),
+                MockProvider(TranslateService, {
+                    instant: jest.fn((key: string) => key),
+                    setDefaultLang: jest.fn(),
+                    use: jest.fn(),
+                }),
+                {
+                    provide: WORKSPACE_SHELL_ACTIONS,
+                    useValue: {
+                        openAddPlaylistDialog: jest.fn(),
+                        openGlobalRecent: jest.fn(),
+                        openGlobalSearch: jest.fn(),
+                        openAccountInfo: jest.fn(),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(AppComponent, {
+                set: {
+                    template: '',
+                },
+            })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        window.electron = {
+            checkEpgFreshness: jest.fn().mockResolvedValue({
+                freshUrls: [],
+                staleUrls: [],
+            }),
+        } as unknown as typeof window.electron;
+
+        fixture = TestBed.createComponent(AppComponent);
+        epgService = TestBed.inject(EpgService);
+        router = TestBed.inject(Router);
+        settingsService = TestBed.inject(
+            SettingsService
+        ) as unknown as MockSettingsService;
+        snackBar = TestBed.inject(MatSnackBar);
+        store = TestBed.inject(MockStore);
+        translateService = TestBed.inject(TranslateService);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        window.electron = originalElectron;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should init component', () => {
+        const storeDispatchSpy = jest.spyOn(store, 'dispatch');
+        jest.spyOn(translateService, 'setDefaultLang');
+        jest.spyOn(component, 'initSettings');
+
+        component.ngOnInit();
+        expect(storeDispatchSpy).toHaveBeenCalledWith(
+            PlaylistActions.loadPlaylists()
+        );
+        expect(translateService.setDefaultLang).toHaveBeenCalledWith(
+            Language.ENGLISH
+        );
+        expect(component.initSettings).toHaveBeenCalledTimes(1);
+    });
+
+    it('should navigate to the provided route', () => {
+        const route = '/add-playlists';
+        jest.spyOn(router, 'navigateByUrl');
+
+        component.navigateToRoute(route);
+
+        expect(router.navigateByUrl).toHaveBeenCalledWith(route);
+    });
+
+    it('should apply system theme when no settings are stored', () => {
+        jest.spyOn(settingsService, 'changeTheme');
+
+        component.initSettings();
+
+        expect(settingsService.getValueFromLocalStorage).toHaveBeenCalledWith(
+            STORE_KEY.Settings
+        );
+        expect(settingsService.changeTheme).toHaveBeenCalledWith(
+            Theme.SystemTheme
+        );
+    });
+
+    it('should apply saved settings and fetch stale epg data only', async () => {
+        const settings: Settings = {
+            ...DEFAULT_SETTINGS,
+            epgUrl: ['https://example.com/epg.xml'],
+            language: Language.SPANISH,
+            theme: Theme.DarkTheme,
+        };
+        const checkEpgFreshness = jest.fn().mockResolvedValue({
+            freshUrls: [],
+            staleUrls: settings.epgUrl,
+        });
+
+        window.electron = {
+            ...window.electron,
+            checkEpgFreshness,
+        } as unknown as typeof window.electron;
+        settingsService.getValueFromLocalStorage.mockReturnValue(of(settings));
+        jest.spyOn(settingsService, 'changeTheme');
+        jest.spyOn(translateService, 'use');
+
+        component.initSettings();
+        await fixture.whenStable();
+
+        expect(translateService.use).toHaveBeenCalledWith(Language.SPANISH);
+        expect(settingsService.changeTheme).toHaveBeenCalledWith(
+            Theme.DarkTheme
+        );
+        expect(checkEpgFreshness).toHaveBeenCalledWith(settings.epgUrl, 12);
+        expect(epgService.fetchEpg).toHaveBeenCalledWith(settings.epgUrl);
+        expect(snackBar.open).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts
new file mode 100644
index 0000000..688391b
--- /dev/null
+++ b/apps/web/src/app/app.component.ts
@@ -0,0 +1,227 @@
+import { Component, HostBinding, inject, OnInit } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router, RouterOutlet } from '@angular/router';
+import { Actions, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { WORKSPACE_SHELL_ACTIONS } from '@iptvnator/workspace/shell/util';
+import { EpgProgressPanelComponent } from '@iptvnator/ui/epg/progress-panel';
+import { PlaylistActions, selectAllPlaylistsMeta } from 'm3u-state';
+import { filter, take } from 'rxjs';
+import { DataService } from 'services';
+import { AppConfig } from '../environments/environment';
+import {
+    AUTO_UPDATE_PLAYLISTS,
+    Language,
+    OPEN_FILE,
+    Settings,
+    STORE_KEY,
+    Theme,
+} from 'shared-interfaces';
+import { SettingsService } from './services/settings.service';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    imports: [EpgProgressPanelComponent, RouterOutlet],
+})
+export class AppComponent implements OnInit {
+    @HostBinding('class.macos-platform') get isMacOS() {
+        return (
+            window.electron && navigator.platform.toLowerCase().includes('mac')
+        );
+    }
+    private actions$ = inject(Actions);
+    private dataService = inject(DataService);
+    private epgService = inject(EpgService);
+    private snackBar = inject(MatSnackBar);
+    private router = inject(Router);
+    private store = inject(Store);
+    private translate = inject(TranslateService);
+    private settingsService = inject(SettingsService);
+    private readonly workspaceShellActions = inject(WORKSPACE_SHELL_ACTIONS);
+
+    private readonly defaultUiLang: Language =
+        AppConfig.product?.defaultLanguage ??
+        (AppConfig.defaultTranslateLang === 'es'
+            ? Language.SPANISH
+            : Language.ENGLISH);
+
+    constructor() {
+        if (
+            ((this.dataService.isElectron &&
+                this.dataService?.remote?.process.platform === 'linux') ||
+                this.dataService?.remote?.process.platform === 'win32') &&
+            this.dataService.remote.process.argv.length > 2
+        ) {
+            const filePath = this.dataService.remote.process.argv.find(
+                (filepath) =>
+                    filepath.endsWith('.m3u') || filepath.endsWith('.m3u8')
+            );
+            if (filePath) {
+                const filePathsArray = filePath.split('/');
+                const fileName = filePathsArray[filePathsArray.length - 1];
+                this.dataService.sendIpcEvent(OPEN_FILE, {
+                    filePath,
+                    fileName,
+                });
+            }
+        }
+        if (window.electron) {
+            document.addEventListener('keydown', (event) => {
+                if (event.ctrlKey || event.metaKey) {
+                    if (event.key === 'f') {
+                        event.preventDefault();
+                        this.workspaceShellActions.openGlobalSearch();
+                    } else if (event.key === 'r') {
+                        event.preventDefault();
+                        this.workspaceShellActions.openGlobalRecent();
+                    }
+                }
+            });
+        }
+
+        if (AppConfig.product?.indexHtmlLang) {
+            document.documentElement.lang = AppConfig.product.indexHtmlLang;
+        }
+        if (AppConfig.product?.appDisplayName) {
+            document.title = AppConfig.product.appDisplayName;
+        }
+    }
+
+    ngOnInit() {
+        this.store.dispatch(PlaylistActions.loadPlaylists());
+        /** English is the translation fallback (see TranslateModule defaultLanguage / useDefaultLang). */
+        this.translate.setDefaultLang(Language.ENGLISH);
+
+        this.initSettings();
+        this.triggerAutoUpdatePlaylists();
+    }
+
+    /**
+     * Reads the settings object from local storage and initializes the
+     * application based on them
+     */
+    initSettings(): void {
+        this.settingsService
+            .getValueFromLocalStorage(STORE_KEY.Settings)
+            .subscribe((settings: Settings) => {
+                if (settings && Object.keys(settings).length > 0) {
+                    // No need to send settings to Electron on init
+                    // Settings are stored in IndexedDB and loaded by the settings store
+                    // Only specific Electron settings (MPV/VLC paths) are sent when changed in settings component
+
+                    this.translate.use(
+                        settings.language ?? this.defaultUiLang
+                    );
+
+                    // Fetch EPG if URLs are configured (only fetch stale data)
+                    if (
+                        window.electron &&
+                        settings.epgUrl?.length > 0 &&
+                        settings.epgUrl?.some((u) => u !== '')
+                    ) {
+                        this.fetchStaleEpgData(settings.epgUrl);
+                    }
+
+                    if (settings.theme) {
+                        this.settingsService.changeTheme(settings.theme);
+                    } else {
+                        this.detectDarkMode();
+                    }
+                } else {
+                    this.translate.use(this.defaultUiLang);
+                    this.detectDarkMode();
+                }
+            });
+    }
+
+    /**
+     * Applies the operating system color scheme when no explicit theme is set
+     */
+    detectDarkMode(): void {
+        this.settingsService.changeTheme(Theme.SystemTheme);
+    }
+
+    /**
+     * Navigate to the specified route
+     * @param route route to navigate to
+     */
+    navigateToRoute(route: string) {
+        this.router.navigateByUrl(route);
+    }
+
+    /**
+     * Fetches EPG data only for URLs that have stale or missing data.
+     * Data is considered fresh if updated within the last 12 hours.
+     */
+    private async fetchStaleEpgData(urls: string[]): Promise<void> {
+        try {
+            const result = await window.electron.checkEpgFreshness(urls, 12);
+
+            if (result.freshUrls.length > 0) {
+                console.log(
+                    `EPG: ${result.freshUrls.length} source(s) already fresh, skipping fetch`
+                );
+                // Show snackbar if all EPG sources are fresh (no stale URLs)
+                if (result.staleUrls.length === 0) {
+                    this.snackBar.open(
+                        this.translate.instant('EPG.UP_TO_DATE'),
+                        this.translate.instant('CLOSE'),
+                        { duration: 3000 }
+                    );
+                }
+            }
+
+            if (result.staleUrls.length > 0) {
+                console.log(
+                    `EPG: Fetching ${result.staleUrls.length} stale source(s)`
+                );
+                this.epgService.fetchEpg(result.staleUrls);
+            }
+        } catch (error) {
+            console.error('Error checking EPG freshness, fetching all:', error);
+            // Fallback: fetch all URLs if freshness check fails
+            this.epgService.fetchEpg(urls);
+        }
+    }
+
+    /**
+     * Triggers auto-update for playlists that have autoRefresh enabled
+     */
+    private triggerAutoUpdatePlaylists(): void {
+        // Wait for playlists to be loaded successfully
+        this.actions$
+            .pipe(
+                ofType(PlaylistActions.loadPlaylistsSuccess),
+                take(1) // Only trigger once on app startup
+            )
+            .subscribe(() => {
+                // Get all playlists from store
+                this.store
+                    .select(selectAllPlaylistsMeta)
+                    .pipe(
+                        take(1),
+                        filter((playlists) => playlists.length > 0)
+                    )
+                    .subscribe((playlists) => {
+                        // Filter playlists with autoRefresh enabled
+                        const playlistsToUpdate = playlists.filter(
+                            (playlist) => playlist.autoRefresh === true
+                        );
+
+                        // Trigger auto-update if there are playlists to update
+                        if (playlistsToUpdate.length > 0) {
+                            console.log(
+                                `Auto-updating ${playlistsToUpdate.length} playlist(s) on startup`
+                            );
+                            this.dataService.sendIpcEvent(
+                                AUTO_UPDATE_PLAYLISTS,
+                                playlistsToUpdate
+                            );
+                        }
+                    });
+            });
+    }
+}
diff --git a/apps/web/src/app/app.config.ts b/apps/web/src/app/app.config.ts
new file mode 100644
index 0000000..ccfc870
--- /dev/null
+++ b/apps/web/src/app/app.config.ts
@@ -0,0 +1,133 @@
+import {
+    HttpClient,
+    provideHttpClient,
+    withInterceptorsFromDi,
+} from '@angular/common/http';
+import {
+    ApplicationConfig,
+    importProvidersFrom,
+    provideZoneChangeDetection,
+} from '@angular/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { provideServiceWorker } from '@angular/service-worker';
+import { provideEffects } from '@ngrx/effects';
+import { provideRouterStore, routerReducer } from '@ngrx/router-store';
+import { provideStore } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PlaylistEffects, playlistReducer } from 'm3u-state';
+import { NgxIndexedDBModule, NgxIndexedDBService } from 'ngx-indexed-db';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYER,
+} from '@iptvnator/portal/shared/util';
+import { PLAYLIST_PLAYER_ACTIONS } from '@iptvnator/playlist/shared/util';
+import { provideXtreamDataSource } from '@iptvnator/portal/xtream/data-access';
+import { DataService, WORKSPACE_PRODUCT_BRANDING } from 'services';
+import { dbConfig } from 'shared-interfaces';
+import { AppConfig } from '../environments/environment';
+import { routes } from './app.routes';
+import { ElectronService } from './services/electron.service';
+import { ExternalPlaybackService } from './services/external-playback.service';
+import { PlayerService } from './services/player.service';
+import {
+    AppPortalNavigationActionsService,
+    providePortalNavigationActions,
+} from './services/portal-navigation-actions.service';
+import { providePortalPlaybackPositions } from './services/portal-playback-positions.service';
+import { PwaService } from './services/pwa.service';
+import { provideWorkspaceShellActions } from './services/workspace-shell-actions.service';
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
+    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+/**
+ * Conditionally provides the necessary service based on the current environment
+ */
+export function DataFactory() {
+    if (window.electron) {
+        return new ElectronService();
+    }
+    return new PwaService();
+}
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideRouter(routes, withComponentInputBinding()),
+        provideAnimations(),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideStore({
+            router: routerReducer,
+            playlistState: playlistReducer,
+        }),
+        provideEffects([PlaylistEffects]),
+        provideRouterStore(),
+        provideStoreDevtools({
+            maxAge: 25,
+            logOnly: AppConfig.production,
+        }),
+        provideServiceWorker('ngsw-worker.js', {
+            enabled: AppConfig.production && !!window.electron,
+            registrationStrategy: 'registerWhenStable:30000',
+        }),
+        importProvidersFrom(
+            AppConfig.environment === 'WEB'
+                ? NgxIndexedDBModule.forRoot(dbConfig)
+                : [],
+            NgxIndexedDBModule.forRoot(dbConfig),
+            NgxSkeletonLoaderModule.forRoot({
+                animation: 'pulse',
+                loadingText:
+                    AppConfig.defaultTranslateLang === 'es'
+                        ? 'Cargando…'
+                        : 'This item is actually loading...',
+            }),
+            TranslateModule.forRoot({
+                /** Fallback when the active locale file is missing a key (avoids raw keys like WORKSPACE.SHELL.*). */
+                defaultLanguage: 'en',
+                useDefaultLang: true,
+                loader: {
+                    provide: TranslateLoader,
+                    useFactory: HttpLoaderFactory,
+                    deps: [HttpClient],
+                },
+            })
+        ),
+        {
+            provide: DataService,
+            useFactory: DataFactory,
+            deps: [NgxIndexedDBService, HttpClient],
+        },
+        {
+            provide: PORTAL_PLAYER,
+            useExisting: PlayerService,
+        },
+        {
+            provide: PORTAL_EXTERNAL_PLAYBACK,
+            useExisting: ExternalPlaybackService,
+        },
+        ...providePortalPlaybackPositions(),
+        ...providePortalNavigationActions(),
+        {
+            provide: PLAYLIST_PLAYER_ACTIONS,
+            useExisting: AppPortalNavigationActionsService,
+        },
+        ...provideWorkspaceShellActions(),
+        ...provideXtreamDataSource(),
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },
+        },
+        {
+            provide: WORKSPACE_PRODUCT_BRANDING,
+            useValue: AppConfig.product,
+        },
+    ],
+};
diff --git a/apps/web/src/app/app.routes.spec.ts b/apps/web/src/app/app.routes.spec.ts
new file mode 100644
index 0000000..9005534
--- /dev/null
+++ b/apps/web/src/app/app.routes.spec.ts
@@ -0,0 +1,73 @@
+describe('app routes', () => {
+    let workspaceChildren: Array<{
+        canActivate?: unknown[];
+        data?: Record<string, unknown>;
+        loadComponent?: unknown;
+        path?: string;
+        redirectTo?: unknown;
+    }> = [];
+
+    beforeAll(async () => {
+        jest.resetModules();
+        jest.unstable_mockModule('@iptvnator/playlist/m3u/feature-player', () => ({
+            M3uCollectionRouteComponent: class {},
+            VideoPlayerComponent: class {},
+            provideM3uWorkspaceRouteSession: () => [],
+        }));
+
+        const { routes } = await import('./app.routes');
+        const workspaceRoute = routes.find((route) => route.path === 'workspace');
+        workspaceChildren = workspaceRoute?.children ?? [];
+    });
+
+    it('routes M3U favorites and recent pages through the shared collection wrapper', async () => {
+        const favoritesRoute = workspaceChildren.find(
+            (route) => route.path === 'playlists/:id/favorites'
+        );
+        const recentRoute = workspaceChildren.find(
+            (route) => route.path === 'playlists/:id/recent'
+        );
+
+        expect(favoritesRoute?.data).toEqual({
+            mode: 'favorites',
+            portalType: 'm3u',
+            defaultScope: 'playlist',
+        });
+        expect(recentRoute?.data).toEqual({
+            mode: 'recent',
+            portalType: 'm3u',
+            defaultScope: 'playlist',
+        });
+
+        expect(typeof favoritesRoute?.loadComponent).toBe('function');
+        expect(typeof recentRoute?.loadComponent).toBe('function');
+    });
+
+    it('adds a shared /workspace/global-recent route', async () => {
+        const globalRecentRoute = workspaceChildren.find(
+            (route) => route.path === 'global-recent'
+        );
+
+        expect(globalRecentRoute?.data).toEqual({
+            mode: 'recent',
+            defaultScope: 'all',
+        });
+        expect(typeof globalRecentRoute?.loadComponent).toBe('function');
+    });
+
+    it('uses a dynamic redirect for the default /workspace child route', async () => {
+        const workspaceDefaultRoute = workspaceChildren.find(
+            (route) => route.path === ''
+        );
+
+        expect(typeof workspaceDefaultRoute?.redirectTo).toBe('function');
+    });
+
+    it('protects the dashboard route behind a visibility guard', async () => {
+        const dashboardRoute = workspaceChildren.find(
+            (route) => route.path === 'dashboard'
+        );
+
+        expect(dashboardRoute?.canActivate).toHaveLength(1);
+    });
+});
diff --git a/apps/web/src/app/app.routes.ts b/apps/web/src/app/app.routes.ts
new file mode 100644
index 0000000..3f056aa
--- /dev/null
+++ b/apps/web/src/app/app.routes.ts
@@ -0,0 +1,155 @@
+import { inject } from '@angular/core';
+import { Router, Routes } from '@angular/router';
+import { provideM3uWorkspaceRouteSession } from '@iptvnator/playlist/m3u/feature-player';
+import { WorkspaceStartupPreferencesService } from '@iptvnator/workspace/shell/util';
+
+const workspaceEntryRedirect = async () =>
+    inject(WorkspaceStartupPreferencesService).resolveInitialWorkspacePath();
+
+const dashboardAccessGuard = async () => {
+    const startupPreferences = inject(WorkspaceStartupPreferencesService);
+    const router = inject(Router);
+    const redirectPath = await startupPreferences.resolveDashboardPath();
+
+    return redirectPath === '/workspace/dashboard'
+        ? true
+        : router.parseUrl(redirectPath);
+};
+
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'workspace',
+    },
+    {
+        path: 'workspace',
+        data: {
+            layout: 'workspace',
+        },
+        loadComponent: () =>
+            import('@iptvnator/workspace/shell/feature').then(
+                (c) => c.WorkspaceShellComponent
+            ),
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: workspaceEntryRedirect,
+            },
+            {
+                path: 'dashboard',
+                canActivate: [dashboardAccessGuard],
+                loadComponent: () =>
+                    import('workspace-dashboard-feature').then(
+                        (c) => c.WorkspaceDashboardRailsComponent
+                    ),
+            },
+            {
+                path: 'sources',
+                loadComponent: () =>
+                    import('@iptvnator/workspace/shell/feature').then(
+                        (c) => c.WorkspaceSourcesComponent
+                    ),
+            },
+            {
+                path: 'playlists/:id',
+                pathMatch: 'full',
+                redirectTo: 'playlists/:id/all',
+            },
+            {
+                path: 'playlists/:id/favorites',
+                providers: provideM3uWorkspaceRouteSession(),
+                loadComponent: () =>
+                    import('@iptvnator/playlist/m3u/feature-player').then(
+                        (c) => c.M3uCollectionRouteComponent
+                    ),
+                data: {
+                    mode: 'favorites',
+                    portalType: 'm3u',
+                    defaultScope: 'playlist',
+                },
+            },
+            {
+                path: 'playlists/:id/recent',
+                providers: provideM3uWorkspaceRouteSession(),
+                loadComponent: () =>
+                    import('@iptvnator/playlist/m3u/feature-player').then(
+                        (c) => c.M3uCollectionRouteComponent
+                    ),
+                data: {
+                    mode: 'recent',
+                    portalType: 'm3u',
+                    defaultScope: 'playlist',
+                },
+            },
+            {
+                path: 'playlists/:id/:view',
+                providers: provideM3uWorkspaceRouteSession(),
+                loadComponent: () =>
+                    import('@iptvnator/playlist/m3u/feature-player').then(
+                        (c) => c.VideoPlayerComponent
+                    ),
+            },
+            {
+                path: 'global-favorites',
+                data: {
+                    mode: 'favorites',
+                    defaultScope: 'all',
+                },
+                loadComponent: () =>
+                    import('./global-collection-route.component').then(
+                        (c) => c.GlobalCollectionRouteComponent
+                    ),
+            },
+            {
+                path: 'global-recent',
+                data: {
+                    mode: 'recent',
+                    defaultScope: 'all',
+                },
+                loadComponent: () =>
+                    import('./global-collection-route.component').then(
+                        (c) => c.GlobalCollectionRouteComponent
+                    ),
+            },
+            {
+                path: 'downloads',
+                loadComponent: () =>
+                    import('@iptvnator/portal/downloads/feature').then(
+                        (c) => c.DownloadsComponent
+                    ),
+            },
+            {
+                path: '',
+                loadChildren: () =>
+                    import('@iptvnator/portal/xtream/feature').then((m) =>
+                        m.createXtreamRoutes()
+                    ),
+            },
+            {
+                path: '',
+                loadChildren: () =>
+                    import('@iptvnator/portal/stalker/feature').then((m) =>
+                        m.createStalkerRoutes()
+                    ),
+            },
+            {
+                path: 'settings',
+                loadComponent: () =>
+                    import('./settings/settings.component').then(
+                        (c) => c.SettingsComponent
+                    ),
+            },
+        ],
+    },
+    {
+        path: 'settings',
+        redirectTo: '/workspace/settings',
+        pathMatch: 'full',
+    },
+    {
+        path: '**',
+        redirectTo: '',
+    },
+];
diff --git a/apps/web/src/app/global-collection-route.component.ts b/apps/web/src/app/global-collection-route.component.ts
new file mode 100644
index 0000000..f2a7f5e
--- /dev/null
+++ b/apps/web/src/app/global-collection-route.component.ts
@@ -0,0 +1,122 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { selectAllPlaylistsMeta } from 'm3u-state';
+import { EmptyStateComponent } from '@iptvnator/playlist/shared/ui';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    UnifiedCollectionDetailDirective,
+    UnifiedCollectionPageComponent,
+} from '@iptvnator/portal/shared/ui';
+import { CollectionScope, PortalProvider } from '@iptvnator/portal/shared/util';
+import { StalkerCollectionDetailComponent } from '@iptvnator/portal/stalker/feature';
+import { XtreamCollectionDetailComponent } from '@iptvnator/portal/xtream/feature';
+import { WORKSPACE_SHELL_ACTIONS } from '@iptvnator/workspace/shell/util';
+
+type UnifiedPortalType = 'm3u' | 'xtream' | 'stalker';
+type CollectionMode = 'favorites' | 'recent';
+
+const EMPTY_STATE_BY_MODE: Record<
+    CollectionMode,
+    { icon: string; titleKey: string; descriptionKey: string }
+> = {
+    favorites: {
+        icon: 'favorite_border',
+        titleKey: 'WORKSPACE.GLOBAL_FAVORITES.NO_PLAYLISTS_TITLE',
+        descriptionKey: 'WORKSPACE.GLOBAL_FAVORITES.NO_PLAYLISTS_BODY',
+    },
+    recent: {
+        icon: 'history_toggle_off',
+        titleKey: 'WORKSPACE.GLOBAL_RECENT.NO_PLAYLISTS_TITLE',
+        descriptionKey: 'WORKSPACE.GLOBAL_RECENT.NO_PLAYLISTS_BODY',
+    },
+};
+
+function providerToPortalType(provider: PortalProvider): UnifiedPortalType {
+    if (provider === 'playlists') return 'm3u';
+    if (provider === 'xtreams') return 'xtream';
+    return 'stalker';
+}
+
+@Component({
+    selector: 'app-global-collection-route',
+    imports: [
+        EmptyStateComponent,
+        StalkerCollectionDetailComponent,
+        UnifiedCollectionDetailDirective,
+        UnifiedCollectionPageComponent,
+        XtreamCollectionDetailComponent,
+    ],
+    template: `
+        @if (hasNoPlaylists()) {
+            <app-empty-state
+                type="no-data"
+                [icon]="emptyState().icon"
+                [titleKey]="emptyState().titleKey"
+                [descriptionKey]="emptyState().descriptionKey"
+                primaryActionLabelKey="HOME.PLAYLISTS.ADD_YOUR_FIRST"
+                secondaryActionLabelKey="WORKSPACE.SHELL.GO_TO_DASHBOARD"
+                (primaryActionClicked)="addPlaylist()"
+                (secondaryActionClicked)="goToDashboard()"
+            />
+        } @else {
+            <app-unified-collection-page
+                [mode]="mode()"
+                [playlistId]="activePlaylistId() ?? undefined"
+                [portalType]="activePortalType() ?? undefined"
+                [defaultScope]="effectiveDefaultScope()"
+            >
+                <ng-template unifiedCollectionDetail let-item let-close="close">
+                    @if (item.sourceType === 'xtream') {
+                        <app-xtream-collection-detail [item]="item" />
+                    } @else if (item.sourceType === 'stalker') {
+                        <app-stalker-collection-detail
+                            [item]="item"
+                            (closeRequested)="close()"
+                        />
+                    }
+                </ng-template>
+            </app-unified-collection-page>
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GlobalCollectionRouteComponent {
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly store = inject(Store);
+    private readonly shellActions = inject(WORKSPACE_SHELL_ACTIONS);
+    private readonly router = inject(Router);
+
+    readonly mode = input<CollectionMode>('favorites');
+    readonly defaultScope = input<CollectionScope | undefined>(undefined);
+
+    private readonly playlists = this.store.selectSignal(selectAllPlaylistsMeta);
+    readonly hasNoPlaylists = computed(() => this.playlists().length === 0);
+
+    readonly emptyState = computed(() => EMPTY_STATE_BY_MODE[this.mode()]);
+
+    readonly activePlaylistId = computed(
+        () => this.playlistContext.activePlaylist()?._id ?? null
+    );
+    readonly activePortalType = computed<UnifiedPortalType | null>(() => {
+        const provider = this.playlistContext.activeProvider();
+        return provider ? providerToPortalType(provider) : null;
+    });
+    readonly effectiveDefaultScope = computed<CollectionScope | undefined>(() =>
+        this.activePlaylistId() ? 'playlist' : (this.defaultScope() ?? 'all')
+    );
+
+    addPlaylist(): void {
+        this.shellActions.openAddPlaylistDialog();
+    }
+
+    goToDashboard(): void {
+        void this.router.navigate(['/workspace', 'dashboard']);
+    }
+}
diff --git a/apps/web/src/app/services/downloads.service.ts b/apps/web/src/app/services/downloads.service.ts
new file mode 100644
index 0000000..23f7206
--- /dev/null
+++ b/apps/web/src/app/services/downloads.service.ts
@@ -0,0 +1,5 @@
+export {
+    DownloadsService,
+    type DownloadItem,
+    type DownloadStatus,
+} from 'services';
diff --git a/apps/web/src/app/services/electron.service.stub.ts b/apps/web/src/app/services/electron.service.stub.ts
new file mode 100644
index 0000000..6dd1f9e
--- /dev/null
+++ b/apps/web/src/app/services/electron.service.stub.ts
@@ -0,0 +1,46 @@
+export class ElectronServiceStub {
+    ipcRenderer = {
+        send: jest.fn(),
+        on: jest.fn(),
+        removeAllListeners: jest.fn(),
+    };
+    remote = {
+        process: {
+            platform: 'linux',
+            argv: [0, 1],
+        },
+        app: {
+            getVersion: jest.fn(() => '1.0.0'),
+        },
+    };
+
+    isElectron = true;
+
+    removeAllListeners(_type: string): void {
+        void _type;
+        return undefined;
+    }
+
+    getAppVersion() {
+        return this.remote.app.getVersion();
+    }
+
+    sendIpcEvent<T = unknown>(_type: string, _payload?: unknown): T {
+        void _type;
+        void _payload;
+        return undefined as T;
+    }
+
+    listenOn(
+        _command: string,
+        _callback: (...args: unknown[]) => void
+    ): void {
+        void _command;
+        void _callback;
+        return undefined;
+    }
+
+    getAppEnvironment() {
+        return 'electron';
+    }
+}
diff --git a/apps/web/src/app/services/electron.service.ts b/apps/web/src/app/services/electron.service.ts
new file mode 100644
index 0000000..d2af6be
--- /dev/null
+++ b/apps/web/src/app/services/electron.service.ts
@@ -0,0 +1,585 @@
+import { inject, Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistActions } from 'm3u-state';
+import { DataService } from 'services';
+import {
+    AUTO_UPDATE_PLAYLISTS,
+    ERROR,
+    Playlist,
+    PLAYLIST_PARSE_BY_URL,
+    PLAYLIST_UPDATE,
+    XTREAM_REQUEST,
+    XTREAM_RESPONSE,
+    XtreamCodeActions,
+} from 'shared-interfaces';
+import { AppConfig } from '../../environments/environment';
+import {
+    createPortalDebugRequestContext,
+    logPortalDebugEvent,
+} from '@iptvnator/portal/shared/util';
+
+interface PlayerLaunchPayload {
+    readonly headers?: Record<string, string>;
+    readonly origin?: string;
+    readonly referer?: string;
+    readonly startTime?: number;
+    readonly thumbnail?: string;
+    readonly title?: string;
+    readonly url: string;
+    readonly ['user-agent']?: string;
+    readonly contentInfo?: unknown;
+}
+
+interface ErrorStatus {
+    readonly message?: string;
+    readonly status?: number;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ElectronService extends DataService {
+    private eventListeners: { [key: string]: () => void } = {};
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly store = inject(Store);
+    private readonly translateService = inject(TranslateService);
+    private readonly silentXtreamActions = new Set<string>([
+        XtreamCodeActions.GetAccountInfo,
+        XtreamCodeActions.GetLiveCategories,
+        XtreamCodeActions.GetVodCategories,
+        XtreamCodeActions.GetSeriesCategories,
+        XtreamCodeActions.GetShortEpg,
+        XtreamCodeActions.GetSimpleDataTable,
+        XtreamCodeActions.GetSimpleDateTable,
+    ]);
+
+    constructor() {
+        super();
+        console.log('Electron service initialized...');
+        this.setupPlayerErrorListener();
+        this.setupPortalDebugListener();
+    }
+
+    private setupPlayerErrorListener() {
+        // Listen for player errors from the backend
+        if (window.electron?.onPlayerError) {
+            window.electron.onPlayerError(
+                (data: {
+                    player: string;
+                    error: string;
+                    originalError: string;
+                }) => {
+                    console.error(`${data.player} Error:`, data.originalError);
+                    this.snackBar.open(
+                        `${data.player} Error: ${data.error}`,
+                        'Close',
+                        {
+                            duration: 7000,
+                            panelClass: ['error-snackbar'],
+                        }
+                    );
+                }
+            );
+        }
+    }
+
+    private setupPortalDebugListener() {
+        const onPortalDebugEvent = (
+            window.electron as {
+                onPortalDebugEvent?: (
+                    callback: (
+                        event: Parameters<typeof logPortalDebugEvent>[0]
+                    ) => void
+                ) => void;
+            }
+        ).onPortalDebugEvent;
+
+        if (AppConfig.production || !onPortalDebugEvent) {
+            return;
+        }
+
+        onPortalDebugEvent((event) => {
+            logPortalDebugEvent(
+                event as Parameters<typeof logPortalDebugEvent>[0]
+            );
+        });
+    }
+
+    getAppVersion(): string {
+        return AppConfig.version;
+    }
+
+    async sendIpcEvent<T = unknown>(
+        type: string,
+        payload?: unknown
+    ): Promise<T> {
+        if (type === PLAYLIST_PARSE_BY_URL) {
+            this.fetchM3uPlaylistFromUrl(payload);
+            return undefined as T;
+        }
+
+        if (type === PLAYLIST_UPDATE) {
+            this.updateM3uPlaylistFromFile(
+                payload as {
+                    id: string;
+                    filePath?: string;
+                    url?: string;
+                    title: string;
+                }
+            );
+            return undefined as T;
+        }
+
+        if (type === XTREAM_REQUEST) {
+            return (await this.forwardXtreamRequest(
+                payload as { url: string; params: Record<string, string> }
+            )) as T;
+        }
+
+        if (type === 'STALKER_REQUEST') {
+            return (await this.fetchStalkerData(
+                payload as {
+                    url: string;
+                    macAddress: string;
+                    params: Record<string, string>;
+                }
+            )) as T;
+        }
+
+        if (type === 'OPEN_MPV_PLAYER') {
+            const data = payload as PlayerLaunchPayload;
+            try {
+                return (await window.electron.openInMpv(
+                    data.url,
+                    data.title ?? '',
+                    data.thumbnail ?? '',
+                    data['user-agent'] ?? undefined,
+                    data.referer ?? undefined,
+                    data.origin ?? undefined,
+                    data.contentInfo,
+                    data.startTime,
+                    data.headers ?? undefined
+                )) as T;
+            } catch (error: unknown) {
+                const errorMessage =
+                    this.getErrorDetails(error)?.message ?? String(error);
+                this.snackBar.open(
+                    `Error launching MPV: ${errorMessage}`,
+                    'Close',
+                    {
+                        duration: 5000,
+                    }
+                );
+                console.error('MPV launch error:', error);
+                throw error;
+            }
+        }
+
+        if (type === 'OPEN_VLC_PLAYER') {
+            const data = payload as PlayerLaunchPayload;
+            try {
+                return (await window.electron.openInVlc(
+                    data.url,
+                    data.title ?? '',
+                    data.thumbnail ?? '',
+                    data['user-agent'] ?? undefined,
+                    data.referer ?? undefined,
+                    data.origin ?? undefined,
+                    data.contentInfo,
+                    data.startTime,
+                    data.headers ?? undefined
+                )) as T;
+            } catch (error: unknown) {
+                const errorMessage =
+                    this.getErrorDetails(error)?.message ?? String(error);
+                this.snackBar.open(
+                    `Error launching VLC: ${errorMessage}`,
+                    'Close',
+                    {
+                        duration: 5000,
+                    }
+                );
+                console.error('VLC launch error:', error);
+                throw error;
+            }
+        }
+
+        if (type === AUTO_UPDATE_PLAYLISTS) {
+            const data = payload as Playlist[];
+            const playlists = await window.electron.autoUpdatePlaylists(data);
+            this.store.dispatch(
+                PlaylistActions.updateManyPlaylists({
+                    playlists,
+                })
+            );
+            this.snackBar.open(
+                this.translateService.instant(
+                    'HOME.PLAYLISTS.AUTO_REFRESH_UPDATE_SUCCESS'
+                ),
+                null,
+                { duration: 2000 }
+            );
+            return playlists as T;
+        }
+
+        console.log('Unknown type', type);
+        return undefined as T;
+    }
+
+    private async fetchStalkerData(payload: {
+        url: string;
+        macAddress: string;
+        params: Record<string, string>;
+        requestId?: string;
+        token?: string;
+        serialNumber?: string;
+    }) {
+        const context = createPortalDebugRequestContext({
+            provider: 'stalker',
+            operation: payload.params?.action ?? 'unknown',
+            transport: 'electron-renderer',
+            request: payload,
+        });
+
+        try {
+            // Use Electron IPC to make the Stalker request
+            const response = await window.electron.stalkerRequest({
+                ...payload,
+                requestId: context.requestId,
+            });
+            return response;
+        } catch (err: unknown) {
+            const errorInfo = this.getErrorDetails(err);
+            console.error('Stalker request error:', err);
+            this.snackBar.open(
+                `Error: ${errorInfo?.message ?? ' Not found'}, status: ${errorInfo?.status ?? 404}`,
+                'Close',
+                {
+                    duration: 5000,
+                }
+            );
+            throw err;
+        }
+    }
+
+    private async fetchM3uPlaylistFromUrl(payload: Partial<Playlist>) {
+        const title = payload.title?.trim() || undefined;
+
+        window.electron
+            .fetchPlaylistByUrl(payload.url, title)
+            .then((result) => {
+                this.store.dispatch(
+                    PlaylistActions.handleAddingPlaylistByUrl({
+                        isTemporary: !!payload?.isTemporary,
+                        playlist: result,
+                    })
+                );
+            })
+            .catch((error: unknown) => {
+                const statusCode = this.extractHttpStatusCode(error);
+                let messageKey = 'HOME.URL_UPLOAD.ERROR_FETCH_FAILED';
+                if (statusCode === 403) {
+                    messageKey = 'HOME.URL_UPLOAD.ERROR_403';
+                } else if (statusCode === 404) {
+                    messageKey = 'HOME.URL_UPLOAD.ERROR_404';
+                } else if (statusCode === 401) {
+                    messageKey = 'HOME.URL_UPLOAD.ERROR_401';
+                }
+                this.snackBar.open(
+                    this.translateService.instant(messageKey),
+                    this.translateService.instant('CLOSE'),
+                    { duration: 5000 }
+                );
+            });
+    }
+
+    private extractHttpStatusCode(error: unknown): number | null {
+        if (
+            error &&
+            typeof error === 'object' &&
+            'response' in error &&
+            error.response &&
+            typeof error.response === 'object' &&
+            'status' in error.response
+        ) {
+            return error.response.status as number;
+        }
+        // Parse status from error message string (IPC serialization)
+        const msg = String((error as { message?: string })?.message ?? error);
+        const match = msg.match(/status code (\d{3})/);
+        return match ? parseInt(match[1], 10) : null;
+    }
+
+    private async updateM3uPlaylistFromFile(data: {
+        id: string;
+        url?: string;
+        filePath?: string;
+        title: string;
+    }) {
+        try {
+            let playlistObject: Playlist;
+            if (data.url && !data.filePath) {
+                playlistObject = await window.electron.fetchPlaylistByUrl(
+                    data.url,
+                    data.title
+                );
+            } else if (data.filePath && !data.url) {
+                playlistObject =
+                    await window.electron.updatePlaylistFromFilePath(
+                        data.filePath,
+                        data.title
+                    );
+            } else {
+                console.error(
+                    'Either url or filePath must be provided, but not both.'
+                );
+                return;
+            }
+
+            this.store.dispatch(
+                PlaylistActions.updatePlaylist({
+                    playlist: {
+                        ...playlistObject,
+                        _id: data.id,
+                    },
+                    playlistId: data.id,
+                })
+            );
+
+            this.snackBar.open(
+                this.translateService.instant(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_SUCCESS'
+                ),
+                null,
+                { duration: 2000 }
+            );
+        } catch (error: unknown) {
+            console.error('Playlist refresh error:', error);
+            this.snackBar.open(
+                this.getPlaylistRefreshErrorMessage(error, data),
+                this.translateService.instant('CLOSE'),
+                { duration: 5000 }
+            );
+        }
+    }
+
+    private getPlaylistRefreshErrorMessage(
+        error: unknown,
+        data: { url?: string; filePath?: string }
+    ): string {
+        if (data.filePath) {
+            const errorMessage = String(
+                this.getErrorDetails(error)?.message ?? error ?? ''
+            );
+
+            if (
+                /(ENOENT|no such file or directory|not found)/i.test(
+                    errorMessage
+                )
+            ) {
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_FILE_NOT_FOUND',
+                    'Playlist refresh failed. The local file is no longer available. Check the file path or re-import the playlist.'
+                );
+            }
+
+            if (/(EACCES|EPERM|permission denied)/i.test(errorMessage)) {
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_FILE_ACCESS_ERROR',
+                    'Playlist refresh failed. The app can no longer access the local file.'
+                );
+            }
+
+            return this.translateService.instant(
+                'HOME.PLAYLISTS.PLAYLIST_UPDATE_ERROR'
+            );
+        }
+
+        const statusCode = this.extractHttpStatusCode(error);
+        if (statusCode === 404) {
+            return this.translateService.instant('HOME.URL_UPLOAD.ERROR_404');
+        }
+        if (statusCode === 403) {
+            return this.translateService.instant('HOME.URL_UPLOAD.ERROR_403');
+        }
+        if (statusCode === 401) {
+            return this.translateService.instant('HOME.URL_UPLOAD.ERROR_401');
+        }
+        return this.translateService.instant(
+            'HOME.URL_UPLOAD.ERROR_FETCH_FAILED'
+        );
+    }
+
+    private translateWithFallback(key: string, fallback: string): string {
+        const translated = this.translateService.instant(key);
+        return translated === key ? fallback : translated;
+    }
+
+    /* private getErrorMessageByStatusCode(status: number) {
+        let message = 'Something went wrong';
+        switch (status) {
+            case 0:
+                message = 'The backend is not reachable';
+                break;
+            case 413:
+                message =
+                    'This file is too big. Use standalone or self-hosted version of the app.';
+                break;
+            default:
+                break;
+        }
+        return message;
+    } */
+
+    private async forwardXtreamRequest(payload: {
+        url: string;
+        params: Record<string, string>;
+        requestId?: string;
+        sessionId?: string;
+        suppressErrorLog?: boolean;
+    }) {
+        const context = createPortalDebugRequestContext({
+            provider: 'xtream',
+            operation: payload.params?.action ?? 'unknown',
+            transport: 'electron-renderer',
+            request: payload,
+        });
+
+        try {
+            // Use Electron IPC to make the Xtream request
+            const response = await window.electron.xtreamRequest({
+                ...payload,
+                requestId: context.requestId,
+            });
+
+            const result = {
+                type: XTREAM_RESPONSE,
+                payload: response.payload,
+                action: response.action,
+            };
+            window.postMessage(result);
+            return result;
+        } catch (error: unknown) {
+            const action = payload.params?.action;
+            const isSilentAction =
+                payload.suppressErrorLog === true ||
+                (action ? this.silentXtreamActions.has(action) : false);
+            const normalizedMessage = this.getReadableXtreamErrorMessage(error);
+            const errorInfo = this.getErrorDetails(error);
+
+            // Log error to console
+            if (isSilentAction) {
+                console.log(
+                    `Background Xtream action failed (${action ?? 'unknown'}):`,
+                    normalizedMessage
+                );
+            } else {
+                console.error('Xtream request error:', normalizedMessage);
+            }
+
+            // Only show snackbar for user-triggered Xtream requests
+            if (!isSilentAction) {
+                this.snackBar.open(
+                    `Xtream request failed: ${normalizedMessage}`,
+                    'Close',
+                    {
+                        duration: 5000,
+                    }
+                );
+            }
+
+            return {
+                type: ERROR,
+                status: errorInfo?.status ?? 500,
+                message: normalizedMessage,
+            };
+        }
+    }
+
+    private getReadableXtreamErrorMessage(error: unknown): string {
+        const fallback = 'Failed to connect to Xtream server';
+        if (!error) {
+            return fallback;
+        }
+
+        const maybeError = error as {
+            message?: unknown;
+            statusText?: unknown;
+            status?: unknown;
+            error?: unknown;
+        };
+
+        if (typeof maybeError.message === 'string') {
+            if (maybeError.message.includes('[object Object]')) {
+                if (typeof maybeError.error === 'string') {
+                    return maybeError.error;
+                }
+                if (
+                    maybeError.error &&
+                    typeof maybeError.error === 'object' &&
+                    'message' in
+                        (maybeError.error as Record<string, unknown>) &&
+                    typeof (maybeError.error as Record<string, unknown>)
+                        .message === 'string'
+                ) {
+                    return (maybeError.error as Record<string, string>).message;
+                }
+                return fallback;
+            }
+            return maybeError.message;
+        }
+
+        if (typeof maybeError.statusText === 'string') {
+            return maybeError.statusText;
+        }
+
+        if (typeof error === 'string') {
+            return error;
+        }
+
+        return fallback;
+    }
+
+    private getErrorDetails(error: unknown): ErrorStatus | null {
+        if (error && typeof error === 'object') {
+            return error as ErrorStatus;
+        }
+        return null;
+    }
+
+    removeAllListeners(type: string): void {
+        if (type === 'all') {
+            // Unsubscribe from all event listeners
+            Object.values(this.eventListeners).forEach((unsubscribe) =>
+                unsubscribe()
+            );
+            this.eventListeners = {};
+        } else if (this.eventListeners[type]) {
+            // Unsubscribe from a specific event
+            this.eventListeners[type]();
+            delete this.eventListeners[type];
+        }
+
+        // Also remove any window message listeners
+        window.removeEventListener('message', this.getListenerForCommand(type));
+    }
+
+    private getListenerForCommand(_command: string): EventListener {
+        void _command;
+        // This is a placeholder. In a real implementation, you would need to
+        // store the actual listener functions to be able to remove them
+        return () => undefined;
+    }
+
+    listenOn(command: string, callback: (...args: unknown[]) => void): void {
+        // For Electron, use window message events
+        void command;
+        window.addEventListener('message', callback);
+    }
+
+    getAppEnvironment(): string {
+        return 'electron';
+    }
+}
diff --git a/apps/web/src/app/services/external-playback.service.spec.ts b/apps/web/src/app/services/external-playback.service.spec.ts
new file mode 100644
index 0000000..059a31c
--- /dev/null
+++ b/apps/web/src/app/services/external-playback.service.spec.ts
@@ -0,0 +1,150 @@
+import { ExternalPlayerSession } from 'shared-interfaces';
+import { ExternalPlaybackService } from './external-playback.service';
+
+describe('ExternalPlaybackService', () => {
+    let listener:
+        | ((session: ExternalPlayerSession) => void)
+        | undefined;
+    let closeExternalPlayerSession: jest.Mock;
+    let service: ExternalPlaybackService;
+
+    const createSession = (
+        overrides: Partial<ExternalPlayerSession> = {}
+    ): ExternalPlayerSession => ({
+        id: 'session-1',
+        player: 'mpv',
+        status: 'launching',
+        title: 'Example',
+        streamUrl: 'https://example.com/video.m3u8',
+        contentInfo: {
+            playlistId: 'playlist-1',
+            contentXtreamId: 42,
+            contentType: 'vod',
+        },
+        startedAt: '2026-03-07T10:00:00.000Z',
+        updatedAt: '2026-03-07T10:00:00.000Z',
+        canClose: true,
+        ...overrides,
+    });
+
+    beforeEach(() => {
+        listener = undefined;
+        closeExternalPlayerSession = jest.fn().mockResolvedValue(null);
+
+        Object.defineProperty(window, 'electron', {
+            configurable: true,
+            value: {
+                onExternalPlayerSessionUpdate: jest.fn((callback) => {
+                    listener = callback;
+                    return () => undefined;
+                }),
+                closeExternalPlayerSession,
+            },
+        });
+
+        service = new ExternalPlaybackService();
+    });
+
+    it('tracks the latest launch and hides dismissed sessions until the next launch', () => {
+        const first = createSession();
+        listener?.(first);
+
+        expect(service.activeSession()).toEqual(first);
+        expect(service.visibleSession()).toEqual(first);
+
+        service.dismissActiveSession();
+        expect(service.visibleSession()).toBeNull();
+
+        const next = createSession({
+            id: 'session-2',
+            title: 'Another Example',
+        });
+        listener?.(next);
+
+        expect(service.visibleSession()).toEqual(next);
+    });
+
+    it('matches only active non-error sessions to content info', () => {
+        const playing = createSession({
+            status: 'playing',
+            updatedAt: '2026-03-07T10:00:05.000Z',
+        });
+        listener?.(playing);
+
+        expect(
+            service.findMatchingSession({
+                playlistId: 'playlist-1',
+                contentXtreamId: 42,
+                contentType: 'vod',
+            })
+        ).toEqual(playing);
+
+        listener?.(
+            createSession({
+                status: 'error',
+                error: 'Launch failed',
+                updatedAt: '2026-03-07T10:00:06.000Z',
+            })
+        );
+
+        expect(
+            service.findMatchingSession({
+                playlistId: 'playlist-1',
+                contentXtreamId: 42,
+                contentType: 'vod',
+            })
+        ).toBeNull();
+        expect(service.visibleSession()).toBeNull();
+    });
+
+    it('delegates close requests for closable sessions', async () => {
+        const session = createSession({ status: 'opened' });
+        listener?.(session);
+
+        closeExternalPlayerSession.mockResolvedValue(
+            createSession({
+                ...session,
+                status: 'closed',
+                canClose: false,
+                updatedAt: '2026-03-07T10:00:10.000Z',
+            })
+        );
+
+        await service.closeActiveSession();
+
+        expect(closeExternalPlayerSession).toHaveBeenCalledWith(session.id);
+        expect(service.visibleSession()).toBeNull();
+    });
+
+    it('can close a specific session directly', async () => {
+        const session = createSession({ id: 'session-2', status: 'playing' });
+
+        closeExternalPlayerSession.mockResolvedValue(
+            createSession({
+                ...session,
+                status: 'closed',
+                canClose: false,
+                updatedAt: '2026-03-07T10:00:12.000Z',
+            })
+        );
+
+        await service.closeSession(session);
+
+        expect(closeExternalPlayerSession).toHaveBeenCalledWith('session-2');
+    });
+
+    it('hides terminal sessions from the dock', () => {
+        listener?.(createSession({ status: 'closed', canClose: false }));
+        expect(service.visibleSession()).toBeNull();
+
+        listener?.(
+            createSession({
+                id: 'session-3',
+                status: 'error',
+                error: 'Launch failed',
+                canClose: false,
+            })
+        );
+        expect(service.visibleSession()).toBeNull();
+    });
+});
diff --git a/apps/web/src/app/services/external-playback.service.ts b/apps/web/src/app/services/external-playback.service.ts
new file mode 100644
index 0000000..3cedd66
--- /dev/null
+++ b/apps/web/src/app/services/external-playback.service.ts
@@ -0,0 +1,128 @@
+import { computed, Injectable, signal } from '@angular/core';
+import { ExternalPlayerSession, PlayerContentInfo } from 'shared-interfaces';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ExternalPlaybackService {
+    readonly activeSession = signal<ExternalPlayerSession | null>(null);
+    private readonly dismissedSessionId = signal<string | null>(null);
+
+    readonly visibleSession = computed(() => {
+        const session = this.activeSession();
+        if (
+            !session ||
+            session.status === 'closed' ||
+            session.status === 'error'
+        ) {
+            return null;
+        }
+
+        if (this.dismissedSessionId() === session.id) {
+            return null;
+        }
+
+        return session;
+    });
+
+    constructor() {
+        window.electron?.onExternalPlayerSessionUpdate?.((session) => {
+            this.handleSessionUpdate(session);
+        });
+    }
+
+    dismissActiveSession(): void {
+        const session = this.activeSession();
+        if (!session) {
+            return;
+        }
+
+        this.dismissedSessionId.set(session.id);
+    }
+
+    async closeActiveSession(): Promise<void> {
+        await this.closeSession(this.activeSession());
+    }
+
+    async closeSession(
+        session: ExternalPlayerSession | null | undefined
+    ): Promise<void> {
+        if (!session) {
+            return;
+        }
+
+        if (!session.canClose || !window.electron?.closeExternalPlayerSession) {
+            this.dismissedSessionId.set(session.id);
+            return;
+        }
+
+        const previousDismissedSessionId = this.dismissedSessionId();
+        this.dismissedSessionId.set(session.id);
+
+        try {
+            const updatedSession = await window.electron.closeExternalPlayerSession(
+                session.id
+            );
+            if (updatedSession) {
+                this.handleSessionUpdate(updatedSession);
+                return;
+            }
+
+            this.activeSession.update((current) =>
+                current?.id === session.id
+                    ? {
+                          ...current,
+                          status: 'closed',
+                          canClose: false,
+                          updatedAt: new Date().toISOString(),
+                      }
+                    : current
+            );
+        } catch (error) {
+            if (this.dismissedSessionId() === session.id) {
+                this.dismissedSessionId.set(previousDismissedSessionId);
+            }
+            throw error;
+        }
+    }
+
+    findMatchingSession(
+        contentInfo: PlayerContentInfo | null | undefined
+    ): ExternalPlayerSession | null {
+        const session = this.activeSession();
+        if (!contentInfo || !session?.contentInfo) {
+            return null;
+        }
+
+        if (session.status === 'error' || session.status === 'closed') {
+            return null;
+        }
+
+        return this.matchesContent(contentInfo, session.contentInfo)
+            ? session
+            : null;
+    }
+
+    private handleSessionUpdate(session: ExternalPlayerSession): void {
+        const current = this.activeSession();
+
+        if (!current || current.id === session.id || session.status === 'launching') {
+            this.activeSession.set(session);
+        }
+
+        if (session.status === 'launching') {
+            this.dismissedSessionId.set(null);
+        }
+    }
+
+    private matchesContent(
+        left: PlayerContentInfo,
+        right: PlayerContentInfo
+    ): boolean {
+        return (
+            left.playlistId === right.playlistId &&
+            left.contentType === right.contentType &&
+            left.contentXtreamId === right.contentXtreamId
+        );
+    }
+}
diff --git a/apps/web/src/app/services/player.service.spec.ts b/apps/web/src/app/services/player.service.spec.ts
new file mode 100644
index 0000000..843d648
--- /dev/null
+++ b/apps/web/src/app/services/player.service.spec.ts
@@ -0,0 +1,92 @@
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { DataService } from 'services';
+import { ExternalPlayerSession, VideoPlayer } from 'shared-interfaces';
+import { SettingsStore } from './settings-store.service';
+import { PlayerService } from './player.service';
+
+describe('PlayerService', () => {
+    let service: PlayerService;
+    const dialog = {
+        open: jest.fn(),
+    };
+    const dataService = {
+        sendIpcEvent: jest.fn(),
+    };
+    const settingsStore = {
+        player: jest.fn(() => VideoPlayer.VideoJs),
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PlayerService,
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+                {
+                    provide: DataService,
+                    useValue: dataService,
+                },
+                {
+                    provide: SettingsStore,
+                    useValue: settingsStore,
+                },
+            ],
+        });
+
+        service = TestBed.inject(PlayerService);
+        dialog.open.mockReset();
+        dataService.sendIpcEvent.mockReset();
+        settingsStore.player.mockReset();
+        settingsStore.player.mockReturnValue(VideoPlayer.VideoJs);
+    });
+
+    it('identifies embedded players', () => {
+        expect(service.isEmbeddedPlayer(VideoPlayer.VideoJs)).toBe(true);
+        expect(service.isEmbeddedPlayer(VideoPlayer.Html5Player)).toBe(true);
+        expect(service.isEmbeddedPlayer(VideoPlayer.ArtPlayer)).toBe(true);
+        expect(service.isEmbeddedPlayer(VideoPlayer.MPV)).toBe(false);
+        expect(service.isEmbeddedPlayer(VideoPlayer.VLC)).toBe(false);
+    });
+
+    it('uses the dialog fallback for embedded players', async () => {
+        await service.openResolvedPlayback({
+            streamUrl: 'https://example.com/video.mp4',
+            title: 'Example Video',
+        });
+
+        expect(dialog.open).toHaveBeenCalled();
+        expect(dataService.sendIpcEvent).not.toHaveBeenCalled();
+    });
+
+    it('forwards external playback launches through IPC', async () => {
+        const session: ExternalPlayerSession = {
+            id: 'session-1',
+            player: 'mpv',
+            status: 'opened',
+            title: 'Example Video',
+            streamUrl: 'https://example.com/video.mp4',
+            startedAt: '2026-03-07T10:00:00.000Z',
+            updatedAt: '2026-03-07T10:00:00.000Z',
+            canClose: true,
+        };
+        settingsStore.player.mockReturnValue(VideoPlayer.MPV);
+        dataService.sendIpcEvent.mockResolvedValue(session);
+
+        const result = await service.openResolvedPlayback({
+            streamUrl: 'https://example.com/video.mp4',
+            title: 'Example Video',
+        });
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            'OPEN_MPV_PLAYER',
+            expect.objectContaining({
+                url: 'https://example.com/video.mp4',
+                title: 'Example Video',
+            })
+        );
+        expect(result).toEqual(session);
+    });
+});
diff --git a/apps/web/src/app/services/player.service.ts b/apps/web/src/app/services/player.service.ts
new file mode 100644
index 0000000..17aea2d
--- /dev/null
+++ b/apps/web/src/app/services/player.service.ts
@@ -0,0 +1,129 @@
+import { Injectable, inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ExternalPlayerInfoDialogComponent } from '@iptvnator/ui/playback/external-player-info-dialog';
+import { DataService } from 'services';
+import {
+    ExternalPlayerSession,
+    OPEN_MPV_PLAYER,
+    OPEN_VLC_PLAYER,
+    PlayerContentInfo,
+    ResolvedPortalPlayback,
+    VideoPlayer,
+} from 'shared-interfaces';
+import { SettingsStore } from './settings-store.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PlayerService {
+    private dialog = inject(MatDialog);
+    private dataService = inject(DataService);
+    private settingsStore = inject(SettingsStore);
+
+    isEmbeddedPlayer(
+        player = this.settingsStore.player() ?? VideoPlayer.VideoJs
+    ): boolean {
+        return (
+            player === VideoPlayer.VideoJs ||
+            player === VideoPlayer.Html5Player ||
+            player === VideoPlayer.ArtPlayer
+        );
+    }
+
+    openPlayer(
+        streamUrl: string,
+        title: string,
+        thumbnail?: string,
+        hideExternalInfoDialog = true,
+        _isLiveContent = false,
+        userAgent?: string,
+        referer?: string,
+        origin?: string,
+        contentInfo?: PlayerContentInfo,
+        startTime?: number,
+        headers?: Record<string, string>
+    ): Promise<ExternalPlayerSession | void> {
+        void _isLiveContent;
+        return this.openResolvedPlayback(
+            {
+                streamUrl,
+                title,
+                thumbnail,
+                startTime,
+                contentInfo,
+                headers,
+                userAgent,
+                referer,
+                origin,
+            },
+            hideExternalInfoDialog
+        );
+    }
+
+    async openResolvedPlayback(
+        playback: ResolvedPortalPlayback,
+        hideExternalInfoDialog = true
+    ): Promise<ExternalPlayerSession | void> {
+        const player = this.settingsStore.player() ?? VideoPlayer.VideoJs;
+        const {
+            streamUrl,
+            title,
+            thumbnail,
+            userAgent,
+            referer,
+            origin,
+            headers,
+            contentInfo,
+            startTime,
+        } = playback;
+
+        if (player === VideoPlayer.MPV) {
+            if (!hideExternalInfoDialog) {
+                this.dialog.open(ExternalPlayerInfoDialogComponent);
+            }
+            return await this.dataService.sendIpcEvent<ExternalPlayerSession>(
+                OPEN_MPV_PLAYER,
+                {
+                url: streamUrl,
+                title,
+                thumbnail,
+                'user-agent': userAgent,
+                referer: referer,
+                origin: origin,
+                headers,
+                contentInfo,
+                startTime,
+                }
+            );
+        } else if (player === VideoPlayer.VLC) {
+            if (!hideExternalInfoDialog) {
+                this.dialog.open(ExternalPlayerInfoDialogComponent);
+            }
+            return await this.dataService.sendIpcEvent<ExternalPlayerSession>(
+                OPEN_VLC_PLAYER,
+                {
+                url: streamUrl,
+                title,
+                thumbnail,
+                'user-agent': userAgent,
+                referer: referer,
+                origin: origin,
+                headers,
+                contentInfo,
+                startTime,
+                }
+            );
+        }
+
+        return import('@iptvnator/portal/xtream/feature').then(
+            ({ PlayerDialogComponent }) => {
+                this.dialog.open(PlayerDialogComponent, {
+                    data: { streamUrl, title, contentInfo, startTime },
+                    width: '80%',
+                    maxWidth: '1200px',
+                    maxHeight: '90vh',
+                });
+            }
+        );
+    }
+}
diff --git a/apps/web/src/app/services/portal-navigation-actions.service.ts b/apps/web/src/app/services/portal-navigation-actions.service.ts
new file mode 100644
index 0000000..f573b6f
--- /dev/null
+++ b/apps/web/src/app/services/portal-navigation-actions.service.ts
@@ -0,0 +1,64 @@
+import { inject, Injectable, Provider } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PlaylistInfoComponent } from '@iptvnator/playlist/shared/ui';
+import {
+    PORTAL_NAVIGATION_ACTIONS,
+    PortalNavigationActions,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { Playlist } from 'shared-interfaces';
+import { SettingsComponent } from '../settings/settings.component';
+
+@Injectable({ providedIn: 'root' })
+export class AppPortalNavigationActionsService
+    implements PortalNavigationActions
+{
+    private readonly dialog = inject(MatDialog);
+    private readonly xtreamStore = inject(XtreamStore);
+
+    openAccountInfo(): void {
+        const data = {
+            vodStreamsCount: this.xtreamStore.vodStreams().length,
+            liveStreamsCount: this.xtreamStore.liveStreams().length,
+            seriesCount: this.xtreamStore.serialStreams().length,
+        };
+
+        void import('@iptvnator/portal/xtream/feature').then(
+            ({ AccountInfoComponent }) => {
+                this.dialog.open(AccountInfoComponent, {
+                    width: '80%',
+                    maxWidth: '1200px',
+                    maxHeight: '90vh',
+                    data,
+                });
+            }
+        );
+    }
+
+    openPlaylistInfo(playlist: Playlist | null | undefined): void {
+        this.dialog.open(PlaylistInfoComponent, {
+            data: playlist ?? null,
+        });
+    }
+
+    openSettings(): void {
+        this.dialog.open(SettingsComponent, {
+            width: '1200px',
+            maxWidth: '96vw',
+            maxHeight: '92vh',
+            data: {
+                isDialog: true,
+            },
+        });
+    }
+}
+
+export function providePortalNavigationActions(): Provider[] {
+    return [
+        AppPortalNavigationActionsService,
+        {
+            provide: PORTAL_NAVIGATION_ACTIONS,
+            useExisting: AppPortalNavigationActionsService,
+        },
+    ];
+}
diff --git a/apps/web/src/app/services/portal-playback-positions.service.ts b/apps/web/src/app/services/portal-playback-positions.service.ts
new file mode 100644
index 0000000..ba987aa
--- /dev/null
+++ b/apps/web/src/app/services/portal-playback-positions.service.ts
@@ -0,0 +1,72 @@
+import { Injectable, inject } from '@angular/core';
+import {
+    PORTAL_PLAYBACK_POSITIONS,
+    PortalPlaybackPositions,
+} from '@iptvnator/portal/shared/util';
+import {
+    PlaybackPositionData,
+    XTREAM_DATA_SOURCE,
+} from '@iptvnator/portal/xtream/data-access';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppPortalPlaybackPositionsService
+    implements PortalPlaybackPositions
+{
+    private readonly dataSource = inject(XTREAM_DATA_SOURCE);
+
+    async savePlaybackPosition(
+        playlistId: string,
+        data: PlaybackPositionData
+    ): Promise<void> {
+        await this.dataSource.savePlaybackPosition(playlistId, data);
+    }
+
+    async getPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<PlaybackPositionData | null> {
+        return this.dataSource.getPlaybackPosition(
+            playlistId,
+            contentXtreamId,
+            contentType
+        );
+    }
+
+    async getSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<PlaybackPositionData[]> {
+        return this.dataSource.getSeriesPlaybackPositions(
+            playlistId,
+            seriesXtreamId
+        );
+    }
+
+    async getAllPlaybackPositions(
+        playlistId: string
+    ): Promise<PlaybackPositionData[]> {
+        return this.dataSource.getAllPlaybackPositions(playlistId);
+    }
+
+    async clearPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<void> {
+        await this.dataSource.clearPlaybackPosition(
+            playlistId,
+            contentXtreamId,
+            contentType
+        );
+    }
+}
+
+export const providePortalPlaybackPositions = () => [
+    {
+        provide: PORTAL_PLAYBACK_POSITIONS,
+        useExisting: AppPortalPlaybackPositionsService,
+    },
+];
diff --git a/apps/web/src/app/services/pwa.service.ts b/apps/web/src/app/services/pwa.service.ts
new file mode 100644
index 0000000..3f7a26c
--- /dev/null
+++ b/apps/web/src/app/services/pwa.service.ts
@@ -0,0 +1,514 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SwUpdate } from '@angular/service-worker';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistActions } from 'm3u-state';
+import { catchError, firstValueFrom, throwError } from 'rxjs';
+import { DataService } from 'services';
+import {
+    ERROR,
+    Playlist,
+    PLAYLIST_PARSE_BY_URL,
+    PLAYLIST_UPDATE,
+    STALKER_REQUEST,
+    XtreamCodeActions,
+    XTREAM_REQUEST,
+    XTREAM_RESPONSE,
+} from 'shared-interfaces';
+import { AppConfig } from '../../environments/environment';
+import {
+    createPortalDebugErrorEvent,
+    createPortalDebugRequestContext,
+    createPortalDebugSuccessEvent,
+    logPortalDebugEvent,
+    logPortalDebugRequest,
+} from '@iptvnator/portal/shared/util';
+
+interface PwaXtreamResponse {
+    readonly payload?: unknown;
+    readonly status?: number;
+}
+
+interface PwaXtreamResult {
+    readonly action: string;
+    readonly payload: unknown;
+    readonly type: typeof XTREAM_RESPONSE;
+}
+
+interface PwaErrorResult {
+    readonly message: string;
+    readonly status: number;
+    readonly type: typeof ERROR;
+}
+
+interface ErrorStatus {
+    readonly message?: string;
+    readonly status?: number;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PwaService extends DataService {
+    private readonly http = inject(HttpClient);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly store = inject(Store);
+    private readonly swUpdate = inject(SwUpdate);
+    private readonly translateService = inject(TranslateService);
+    private readonly silentXtreamActions = new Set<string>([
+        XtreamCodeActions.GetAccountInfo,
+        XtreamCodeActions.GetLiveCategories,
+        XtreamCodeActions.GetVodCategories,
+        XtreamCodeActions.GetSeriesCategories,
+        XtreamCodeActions.GetShortEpg,
+        XtreamCodeActions.GetSimpleDataTable,
+        XtreamCodeActions.GetSimpleDateTable,
+    ]);
+
+    /** Proxy URL to avoid CORS issues */
+    corsProxyUrl = AppConfig.BACKEND_URL;
+
+    constructor() {
+        super();
+        console.log('PWA service initialized...');
+    }
+
+    /** Uses service worker mechanism to check for available application updates */
+    checkUpdates() {
+        this.swUpdate.versionUpdates.subscribe(() => {
+            this.snackBar
+                .open(
+                    this.translateService.instant('UPDATE_AVAILABLE'),
+                    this.translateService.instant('REFRESH')
+                )
+                .onAction()
+                .subscribe(() => {
+                    window.location.reload();
+                });
+        });
+    }
+
+    getAppVersion(): string {
+        return AppConfig.version;
+    }
+
+    /**
+     * Handles incoming IPC commands
+     * @param type ipc command type
+     * @param payload payload
+     */
+    sendIpcEvent<T = unknown>(type: string, payload?: unknown): T {
+        if (type === PLAYLIST_PARSE_BY_URL) {
+            this.fetchFromUrl(payload);
+            return undefined as T;
+        }
+
+        if (type === PLAYLIST_UPDATE) {
+            this.refreshPlaylist(payload);
+            return undefined as T;
+        }
+
+        if (type === XTREAM_REQUEST) {
+            return this.forwardXtreamRequest(
+                payload as { url: string; params: Record<string, string> }
+            ) as T;
+        }
+
+        if (type === STALKER_REQUEST) {
+            return this.forwardStalkerRequest(
+                payload as {
+                    url: string;
+                    macAddress: string;
+                    params: Record<string, string>;
+                }
+            ) as T;
+        }
+
+        return undefined as T;
+    }
+
+    refreshPlaylist(payload: Partial<Playlist & { id: string }>) {
+        this.getPlaylistFromUrl(payload.url)
+            .pipe(
+                catchError((error) => {
+                    this.snackBar.open(
+                        this.getPlaylistRefreshErrorMessage(error),
+                        this.translateService.instant('CLOSE'),
+                        {
+                            duration: 5000,
+                        }
+                    );
+                    return throwError(() => error);
+                })
+            )
+            .subscribe((playlist: Playlist) => {
+                this.store.dispatch(
+                    PlaylistActions.updatePlaylist({
+                        playlist,
+                        playlistId: payload.id,
+                    })
+                );
+
+                this.snackBar.open(
+                    this.translateService.instant(
+                        'HOME.PLAYLISTS.PLAYLIST_UPDATE_SUCCESS'
+                    ),
+                    null,
+                    { duration: 2000 }
+                );
+            });
+    }
+
+    private getPlaylistRefreshErrorMessage(error: unknown): string {
+        const statusCode =
+            this.getErrorDetails(error)?.status ??
+            this.extractHttpStatusCode(error);
+
+        if (statusCode === 404) {
+            return this.translateService.instant('HOME.URL_UPLOAD.ERROR_404');
+        }
+        if (statusCode === 403) {
+            return this.translateService.instant('HOME.URL_UPLOAD.ERROR_403');
+        }
+        if (statusCode === 401) {
+            return this.translateService.instant('HOME.URL_UPLOAD.ERROR_401');
+        }
+        return this.translateService.instant(
+            'HOME.URL_UPLOAD.ERROR_FETCH_FAILED'
+        );
+    }
+
+    /**
+     * Fetches playlist from the specified url
+     * @param payload playlist payload
+     */
+    fetchFromUrl(payload: Partial<Playlist>): void {
+        const title = payload.title?.trim() || undefined;
+
+        this.getPlaylistFromUrl(payload.url)
+            .pipe(
+                catchError((error) => {
+                    this.snackBar.open(
+                        this.getErrorMessageByStatusCode(error.status),
+                        'Close',
+                        {
+                            duration: 5000,
+                        }
+                    );
+                    return throwError(() => error);
+                })
+            )
+            .subscribe((response: Playlist) => {
+                const playlist = title
+                    ? {
+                          ...response,
+                          filename: title,
+                          title,
+                      }
+                    : response;
+
+                this.store.dispatch(
+                    PlaylistActions.handleAddingPlaylistByUrl({
+                        isTemporary: !!payload?.isTemporary,
+                        playlist,
+                    })
+                );
+            });
+    }
+
+    getErrorMessageByStatusCode(status: number) {
+        let messageKey = 'HOME.URL_UPLOAD.ERROR_FETCH_FAILED';
+        switch (status) {
+            case 413:
+                return 'This file is too big. Use standalone or self-hosted version of the app.';
+            case 403:
+                messageKey = 'HOME.URL_UPLOAD.ERROR_403';
+                break;
+            case 404:
+                messageKey = 'HOME.URL_UPLOAD.ERROR_404';
+                break;
+            case 401:
+                messageKey = 'HOME.URL_UPLOAD.ERROR_401';
+                break;
+            default:
+                break;
+        }
+        return this.translateService.instant(messageKey);
+    }
+
+    private extractHttpStatusCode(error: unknown): number | null {
+        if (
+            error &&
+            typeof error === 'object' &&
+            'status' in error &&
+            typeof error.status === 'number'
+        ) {
+            return error.status;
+        }
+
+        const msg = String((error as { message?: string })?.message ?? error);
+        const match = msg.match(/status code (\d{3})/);
+        return match ? parseInt(match[1], 10) : null;
+    }
+
+    async forwardXtreamRequest(payload: {
+        url: string;
+        params: Record<string, string>;
+        macAddress?: string;
+        requestId?: string;
+        sessionId?: string;
+        suppressErrorLog?: boolean;
+    }) {
+        const headers = payload.macAddress
+            ? {
+                  headers: {
+                      Cookie: `mac=${payload.macAddress}`,
+                  },
+              }
+            : {};
+        const requestPayload = {
+            method: 'GET',
+            url: `${this.corsProxyUrl}/xtream`,
+            params: {
+                url: payload.url,
+                ...payload.params,
+            },
+            ...(payload.macAddress
+                ? {
+                      headers: {
+                          Cookie: `mac=${payload.macAddress}`,
+                      },
+                  }
+                : {}),
+        };
+        const context = createPortalDebugRequestContext({
+            provider: 'xtream',
+            operation: payload.params?.action ?? 'unknown',
+            transport: 'pwa-http',
+            request: requestPayload,
+        });
+        logPortalDebugRequest(context);
+
+        try {
+            let result: PwaErrorResult | PwaXtreamResult;
+            const response = (await firstValueFrom(
+                this.http.get<PwaXtreamResponse>(
+                    `${this.corsProxyUrl}/xtream`,
+                    {
+                        params: {
+                            url: payload.url,
+                            ...payload.params,
+                        },
+                        ...headers,
+                    }
+                )
+            )) as PwaXtreamResponse;
+
+            if (!response.payload) {
+                const action = payload.params.action;
+                const isSilentAction =
+                    payload.suppressErrorLog === true ||
+                    this.silentXtreamActions.has(action);
+                const normalizedMessage =
+                    this.getReadableXtreamErrorMessage(response);
+                logPortalDebugEvent(
+                    createPortalDebugErrorEvent(context, response)
+                );
+
+                if (isSilentAction) {
+                    console.log(
+                        `Background Xtream action failed (${action ?? 'unknown'}):`,
+                        normalizedMessage
+                    );
+                    return {
+                        type: ERROR,
+                        status: response.status ?? 500,
+                        message: normalizedMessage,
+                    };
+                }
+
+                result = {
+                    type: ERROR,
+                    status: response.status ?? 500,
+                    message: normalizedMessage,
+                };
+                window.postMessage(result);
+            } else {
+                result = {
+                    type: XTREAM_RESPONSE,
+                    payload: response.payload,
+                    action: payload.params.action,
+                };
+                logPortalDebugEvent(
+                    createPortalDebugSuccessEvent(context, response)
+                );
+                window.postMessage(result);
+            }
+            return result;
+        } catch (error: unknown) {
+            logPortalDebugEvent(createPortalDebugErrorEvent(context, error));
+            const action = payload.params.action;
+            const isSilentAction =
+                payload.suppressErrorLog === true ||
+                this.silentXtreamActions.has(action);
+            const normalizedMessage = this.getReadableXtreamErrorMessage(error);
+            const errorInfo = this.getErrorDetails(error);
+
+            // Log error to console
+            if (isSilentAction) {
+                console.log(
+                    `Background Xtream action failed (${action ?? 'unknown'}):`,
+                    normalizedMessage
+                );
+                return {
+                    type: ERROR,
+                    status: errorInfo?.status ?? 500,
+                    message: normalizedMessage,
+                };
+            }
+
+            console.error('Xtream request error:', normalizedMessage);
+            this.snackBar.open(
+                `Xtream request failed: ${normalizedMessage}`,
+                'Close',
+                {
+                    duration: 5000,
+                }
+            );
+            return {
+                type: ERROR,
+                status: errorInfo?.status ?? 500,
+                message: normalizedMessage,
+            };
+        }
+    }
+
+    private getReadableXtreamErrorMessage(error: unknown): string {
+        const fallback = 'Failed to connect to Xtream server';
+        if (!error) {
+            return fallback;
+        }
+
+        const maybeError = error as {
+            message?: unknown;
+            statusText?: unknown;
+            error?: unknown;
+        };
+
+        if (typeof maybeError.message === 'string') {
+            if (maybeError.message.includes('[object Object]')) {
+                if (typeof maybeError.error === 'string') {
+                    return maybeError.error;
+                }
+                if (
+                    maybeError.error &&
+                    typeof maybeError.error === 'object' &&
+                    'message' in
+                        (maybeError.error as Record<string, unknown>) &&
+                    typeof (maybeError.error as Record<string, unknown>)
+                        .message === 'string'
+                ) {
+                    return (maybeError.error as Record<string, string>).message;
+                }
+                return fallback;
+            }
+            return maybeError.message;
+        }
+
+        if (typeof maybeError.statusText === 'string') {
+            return maybeError.statusText;
+        }
+
+        if (typeof error === 'string') {
+            return error;
+        }
+
+        return fallback;
+    }
+
+    private getErrorDetails(error: unknown): ErrorStatus | null {
+        if (error && typeof error === 'object') {
+            return error as ErrorStatus;
+        }
+        return null;
+    }
+
+    async forwardStalkerRequest(payload: {
+        url: string;
+        params: Record<string, string>;
+        macAddress: string;
+    }) {
+        const params = new URLSearchParams({
+            url: payload.url,
+            ...payload.params,
+            macAddress: payload.macAddress,
+        });
+        const requestUrl = `${this.corsProxyUrl}/stalker?${params.toString()}`;
+        const context = createPortalDebugRequestContext({
+            provider: 'stalker',
+            operation: payload.params?.action ?? 'unknown',
+            transport: 'pwa-http',
+            request: {
+                method: 'GET',
+                url: requestUrl,
+                params: {
+                    url: payload.url,
+                    ...payload.params,
+                    macAddress: payload.macAddress,
+                },
+            },
+        });
+        logPortalDebugRequest(context);
+
+        try {
+            // Make the fetch request
+            const response = await fetch(requestUrl);
+
+            if (!response.ok) {
+                throw new Error(
+                    `Error: ${response.statusText} (Status: ${response.status})`
+                );
+            }
+
+            // Parse and return the JSON response
+            const responseBody = await response.json();
+            logPortalDebugEvent(
+                createPortalDebugSuccessEvent(context, responseBody)
+            );
+            return responseBody.payload;
+        } catch (err: unknown) {
+            const errorInfo = this.getErrorDetails(err);
+            logPortalDebugEvent(createPortalDebugErrorEvent(context, err));
+            console.error('Stalker request error:', err);
+
+            this.snackBar.open(
+                `Error: ${errorInfo?.message ?? ' Not found'}, status: ${errorInfo?.status ?? 404}`,
+                'Close',
+                {
+                    duration: 5000,
+                }
+            );
+            throw err;
+        }
+    }
+
+    getPlaylistFromUrl(url: string) {
+        return this.http.get(`${this.corsProxyUrl}/parse`, {
+            params: { url },
+        });
+    }
+
+    removeAllListeners(): void {
+        // not implemented
+    }
+
+    listenOn(_command: string, callback: (...args: unknown[]) => void): void {
+        window.addEventListener('message', callback);
+    }
+
+    getAppEnvironment(): string {
+        return 'pwa';
+    }
+}
diff --git a/apps/web/src/app/services/settings-store.service.ts b/apps/web/src/app/services/settings-store.service.ts
new file mode 100644
index 0000000..74279bf
--- /dev/null
+++ b/apps/web/src/app/services/settings-store.service.ts
@@ -0,0 +1 @@
+export { SettingsStore } from 'services';
diff --git a/apps/web/src/app/services/settings.service.spec.ts b/apps/web/src/app/services/settings.service.spec.ts
new file mode 100644
index 0000000..336dfc3
--- /dev/null
+++ b/apps/web/src/app/services/settings.service.spec.ts
@@ -0,0 +1,124 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { inject, TestBed } from '@angular/core/testing';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { of } from 'rxjs';
+import { STORE_KEY, Theme } from 'shared-interfaces';
+import { SettingsService } from './settings.service';
+
+describe('Service: Settings', () => {
+    let systemThemeListeners: Array<(event: MediaQueryListEvent) => void>;
+
+    beforeEach(() => {
+        systemThemeListeners = [];
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockImplementation(() => ({
+                matches: true,
+                addEventListener: jest.fn(
+                    (
+                        _event: 'change',
+                        listener: (event: MediaQueryListEvent) => void
+                    ) => {
+                        systemThemeListeners.push(listener);
+                    }
+                ),
+                removeEventListener: jest.fn(
+                    (
+                        _event: 'change',
+                        listener: (event: MediaQueryListEvent) => void
+                    ) => {
+                        systemThemeListeners = systemThemeListeners.filter(
+                            (registeredListener) =>
+                                registeredListener !== listener
+                        );
+                    }
+                ),
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+            })),
+        });
+
+        TestBed.configureTestingModule({
+            providers: [SettingsService],
+            imports: [HttpClientTestingModule],
+        });
+    });
+
+    it('should create a service instance', inject(
+        [SettingsService],
+        (service: SettingsService) => {
+            expect(service).toBeTruthy();
+        }
+    ));
+
+    it('should set key/value pair', inject(
+        [SettingsService, StorageMap],
+        (service: SettingsService, storage: StorageMap) => {
+            const version = '2.1.0';
+            jest.spyOn(storage, 'set').mockReturnValue(of(undefined));
+            service.setValueToLocalStorage(STORE_KEY.Version, version);
+            expect(storage.set).toHaveBeenCalledWith(
+                STORE_KEY.Version,
+                version
+            );
+        }
+    ));
+
+    it('should get value from the local storage', inject(
+        [SettingsService],
+        (service: SettingsService) => {
+            const version = '2.1.0';
+            service.setValueToLocalStorage(STORE_KEY.Version, version);
+            service
+                .getValueFromLocalStorage(STORE_KEY.Version)
+                .subscribe((value) => {
+                    expect(value).toBe(version);
+                });
+        }
+    ));
+
+    describe('Test theme switch', () => {
+        let spyOnAdd, spyOnRemove;
+        beforeEach(() => {
+            spyOnAdd = jest.spyOn(document.body.classList, 'add');
+            spyOnRemove = jest.spyOn(document.body.classList, 'remove');
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        it('should switch to the dark theme', inject(
+            [SettingsService],
+            (service: SettingsService) => {
+                service.changeTheme(Theme.DarkTheme);
+                expect(spyOnRemove).toHaveBeenCalledTimes(0);
+                expect(spyOnAdd).toHaveBeenCalledTimes(1);
+            }
+        ));
+
+        it('should switch to the light theme', inject(
+            [SettingsService],
+            (service: SettingsService) => {
+                service.changeTheme(Theme.LightTheme);
+                expect(spyOnRemove).toHaveBeenCalledTimes(1);
+                expect(spyOnAdd).toHaveBeenCalledTimes(0);
+            }
+        ));
+
+        it('should follow the system theme', inject(
+            [SettingsService],
+            (service: SettingsService) => {
+                service.changeTheme(Theme.SystemTheme);
+
+                expect(spyOnAdd).toHaveBeenCalledWith('dark-theme');
+
+                systemThemeListeners[0]?.({
+                    matches: false,
+                } as MediaQueryListEvent);
+
+                expect(spyOnRemove).toHaveBeenCalledWith('dark-theme');
+            }
+        ));
+    });
+});
diff --git a/apps/web/src/app/services/settings.service.ts b/apps/web/src/app/services/settings.service.ts
new file mode 100644
index 0000000..0d17b5b
--- /dev/null
+++ b/apps/web/src/app/services/settings.service.ts
@@ -0,0 +1,235 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { catchError, map, Observable } from 'rxjs';
+import { STORE_KEY, Theme } from 'shared-interfaces';
+
+const PRERELEASE_KEYWORDS = [
+    'beta',
+    'alpha',
+    'rc',
+    'preview',
+    'dev',
+    'canary',
+    'nightly',
+] as const;
+
+interface ParsedVersion {
+    major: number;
+    minor: number;
+    patch: number;
+    prerelease: boolean;
+}
+
+type LegacyMediaQueryList = MediaQueryList & {
+    addListener?: (listener: (event: MediaQueryListEvent) => void) => void;
+    removeListener?: (listener: (event: MediaQueryListEvent) => void) => void;
+};
+
+function parseVersion(input: string): ParsedVersion | null {
+    const normalized = input.trim().replace(/^v/i, '');
+    const match = normalized.match(
+        /(\d+)(?:\.(\d+))?(?:\.(\d+))?(?:[-+]?([0-9A-Za-z.-]+))?/
+    );
+
+    if (!match) {
+        return null;
+    }
+
+    return {
+        major: Number(match[1] ?? 0),
+        minor: Number(match[2] ?? 0),
+        patch: Number(match[3] ?? 0),
+        prerelease: Boolean(match[4]),
+    };
+}
+
+function hasPrereleaseKeyword(value: string): boolean {
+    const normalized = value.toLowerCase();
+    return PRERELEASE_KEYWORDS.some((keyword) => normalized.includes(keyword));
+}
+
+function compareVersions(a: ParsedVersion, b: ParsedVersion): number {
+    if (a.major !== b.major) {
+        return a.major - b.major;
+    }
+    if (a.minor !== b.minor) {
+        return a.minor - b.minor;
+    }
+    return a.patch - b.patch;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class SettingsService {
+    private http = inject(HttpClient);
+    private storage = inject(StorageMap);
+    private readonly systemThemeMediaQuery =
+        typeof window !== 'undefined' && 'matchMedia' in window
+            ? window.matchMedia('(prefers-color-scheme: dark)')
+            : null;
+    private readonly systemThemeChangeHandler = (
+        event: MediaQueryListEvent
+    ): void => {
+        this.applyResolvedTheme(
+            event.matches ? Theme.DarkTheme : Theme.LightTheme
+        );
+    };
+    private isSystemThemeSyncActive = false;
+
+    /**
+     * Changes the visual theme of the application
+     * @param selectedTheme theme to set
+     */
+    changeTheme(selectedTheme: Theme): void {
+        this.stopSystemThemeSync();
+
+        if (selectedTheme === Theme.SystemTheme) {
+            this.startSystemThemeSync();
+            this.applyResolvedTheme(
+                this.systemThemeMediaQuery?.matches
+                    ? Theme.DarkTheme
+                    : Theme.LightTheme
+            );
+            return;
+        }
+
+        this.applyResolvedTheme(selectedTheme);
+    }
+
+    private applyResolvedTheme(selectedTheme: Theme): void {
+        if (selectedTheme === Theme.DarkTheme) {
+            document.body.classList.add('dark-theme');
+            return;
+        }
+
+        document.body.classList.remove('dark-theme');
+    }
+
+    private startSystemThemeSync(): void {
+        if (!this.systemThemeMediaQuery || this.isSystemThemeSyncActive) {
+            return;
+        }
+
+        const mediaQuery = this.systemThemeMediaQuery as LegacyMediaQueryList;
+
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', this.systemThemeChangeHandler);
+        } else {
+            mediaQuery.addListener?.(this.systemThemeChangeHandler);
+        }
+
+        this.isSystemThemeSyncActive = true;
+    }
+
+    private stopSystemThemeSync(): void {
+        if (!this.systemThemeMediaQuery || !this.isSystemThemeSyncActive) {
+            return;
+        }
+
+        const mediaQuery = this.systemThemeMediaQuery as LegacyMediaQueryList;
+
+        if (mediaQuery.removeEventListener) {
+            mediaQuery.removeEventListener(
+                'change',
+                this.systemThemeChangeHandler
+            );
+        } else {
+            mediaQuery.removeListener?.(this.systemThemeChangeHandler);
+        }
+
+        this.isSystemThemeSyncActive = false;
+    }
+
+    /**
+     * Returns the value of the given key from the local storage
+     * @param key key to get
+     * @returns returns the value of the given key
+     */
+    getValueFromLocalStorage(key: STORE_KEY) {
+        return this.storage.get(key);
+    }
+
+    /**
+     * Sets the given key/value pair in the local storage
+     * @param key key to set
+     * @param value value to set
+     * @param withCallback if true, the callback will be called after the value is set
+     */
+    setValueToLocalStorage(
+        key: STORE_KEY,
+        value: unknown,
+        withCallback = false
+    ): Observable<unknown> | void {
+        if (withCallback) {
+            return this.storage.set(key, value);
+        }
+
+        this.storage.set(key, value).subscribe();
+    }
+
+    /**
+     * Returns the version of the released app
+     * Filters out pre-release versions (beta, alpha, rc)
+     */
+    getAppVersion() {
+        return this.http
+            .get<{ created_at: string; name: string }[]>(
+                'https://api.github.com/repos/4gray/iptvnator/releases'
+            )
+            .pipe(
+                map((response) => {
+                    // Filter out pre-release versions (beta, alpha, rc, etc.)
+                    const stableReleases = response.filter((release) => {
+                        if (hasPrereleaseKeyword(release.name)) {
+                            return false;
+                        }
+
+                        const version = parseVersion(release.name);
+                        if (!version) return false;
+
+                        return !version.prerelease;
+                    });
+
+                    // Sort stable releases by creation date
+                    const sortedReleases = stableReleases.sort(
+                        (a, b) =>
+                            new Date(b.created_at).getTime() -
+                            new Date(a.created_at).getTime()
+                    );
+
+                    return sortedReleases[0];
+                }),
+                map((response) => response.name),
+                catchError((err) => {
+                    console.error(err);
+                    throw new Error(err);
+                })
+            );
+    }
+
+    /**
+     * Compares current version with latest version
+     * @param currentVersion current version of the app
+     * @param latestVersion latest stable version from GitHub
+     * @returns true if current version is outdated
+     */
+    isVersionOutdated(
+        currentVersion: string,
+        latestVersion: string
+    ): boolean {
+        const cleanCurrent = parseVersion(currentVersion);
+        const cleanLatest = parseVersion(latestVersion);
+
+        if (!cleanCurrent || !cleanLatest) {
+            console.warn('Invalid version format:', {
+                currentVersion,
+                latestVersion,
+            });
+            return false;
+        }
+
+        return compareVersions(cleanCurrent, cleanLatest) < 0;
+    }
+}
diff --git a/apps/web/src/app/services/workspace-shell-actions.service.ts b/apps/web/src/app/services/workspace-shell-actions.service.ts
new file mode 100644
index 0000000..2e2395d
--- /dev/null
+++ b/apps/web/src/app/services/workspace-shell-actions.service.ts
@@ -0,0 +1,71 @@
+import { inject, Injectable, Provider } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import {
+    WORKSPACE_SHELL_ACTIONS,
+    WorkspaceAccountInfoData,
+    WorkspacePlaylistType,
+    WorkspaceShellActions,
+} from '@iptvnator/workspace/shell/util';
+
+@Injectable({ providedIn: 'root' })
+export class AppWorkspaceShellActionsService implements WorkspaceShellActions {
+    private readonly dialog = inject(MatDialog);
+    private readonly router = inject(Router);
+
+    openAddPlaylistDialog(type?: WorkspacePlaylistType): void {
+        void import('@iptvnator/playlist/import/feature').then(
+            ({ AddPlaylistDialogComponent }) => {
+                this.dialog.open(AddPlaylistDialogComponent, {
+                    width: '560px',
+                    maxWidth: '92vw',
+                    data: type ? { type } : {},
+                });
+            }
+        );
+    }
+
+    openGlobalSearch(initialQuery = ''): void {
+        void import('@iptvnator/portal/xtream/feature').then(
+            ({ GlobalSearchResultsComponent }) => {
+                this.dialog.open(GlobalSearchResultsComponent, {
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '100%',
+                    panelClass: 'global-search-overlay',
+                    data: {
+                        isGlobalSearch: true,
+                        initialQuery,
+                    },
+                });
+            }
+        );
+    }
+
+    openGlobalRecent(): void {
+        void this.router.navigate(['/workspace/global-recent']);
+    }
+
+    openAccountInfo(data: WorkspaceAccountInfoData): void {
+        void import('@iptvnator/portal/xtream/feature').then(
+            ({ AccountInfoComponent }) => {
+                this.dialog.open(AccountInfoComponent, {
+                    width: '80%',
+                    maxWidth: '1200px',
+                    maxHeight: '90vh',
+                    data,
+                });
+            }
+        );
+    }
+}
+
+export function provideWorkspaceShellActions(): Provider[] {
+    return [
+        AppWorkspaceShellActionsService,
+        {
+            provide: WORKSPACE_SHELL_ACTIONS,
+            useExisting: AppWorkspaceShellActionsService,
+        },
+    ];
+}
diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html
new file mode 100644
index 0000000..db5e7c3
--- /dev/null
+++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.html
@@ -0,0 +1,55 @@
+<h2 mat-dialog-title>
+    {{ 'SETTINGS.REMOVE_DIALOG.TITLE' | translate }}
+</h2>
+
+<mat-dialog-content class="mat-typography settings-delete-dialog">
+    <p class="settings-delete-dialog__lead">
+        {{
+            'SETTINGS.REMOVE_DIALOG.MESSAGE'
+                | translate: { count: dialogData.summary.total }
+        }}
+    </p>
+
+    <section class="settings-delete-dialog__section">
+        <h3 class="settings-delete-dialog__section-title">
+            {{ 'SETTINGS.REMOVE_DIALOG.SUMMARY_TITLE' | translate }}
+        </h3>
+
+        <div class="settings-delete-dialog__summary">
+            @for (item of summaryItems(); track item.id) {
+                <div class="settings-delete-dialog__summary-item">
+                    <div class="settings-delete-dialog__summary-label">
+                        <mat-icon aria-hidden="true">{{ item.icon }}</mat-icon>
+                        <span>{{ item.labelKey | translate }}</span>
+                    </div>
+                    <strong>{{ item.count }}</strong>
+                </div>
+            }
+        </div>
+    </section>
+
+    <section class="settings-delete-dialog__section">
+        <h3 class="settings-delete-dialog__section-title">
+            {{ 'SETTINGS.REMOVE_DIALOG.CONSEQUENCES_TITLE' | translate }}
+        </h3>
+
+        <ul class="settings-delete-dialog__list">
+            @for (key of consequenceKeys; track key) {
+                <li>{{ key | translate }}</li>
+            }
+        </ul>
+    </section>
+
+    <p class="settings-delete-dialog__hint">
+        {{ 'SETTINGS.REMOVE_DIALOG.BACKUP_HINT' | translate }}
+    </p>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end" class="settings-delete-dialog__actions">
+    <button mat-button mat-dialog-close cdkFocusInitial>
+        {{ 'CANCEL' | translate }}
+    </button>
+    <button mat-flat-button [mat-dialog-close]="true" color="warn">
+        {{ 'SETTINGS.REMOVE_DIALOG.CONFIRM' | translate }}
+    </button>
+</mat-dialog-actions>
diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
new file mode 100644
index 0000000..9178d18
--- /dev/null
+++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
@@ -0,0 +1,94 @@
+:host {
+    display: block;
+}
+
+.settings-delete-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    min-width: min(100%, 360px);
+}
+
+.settings-delete-dialog__lead,
+.settings-delete-dialog__hint {
+    margin: 0;
+    line-height: 1.55;
+    text-wrap: pretty;
+}
+
+.settings-delete-dialog__section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.settings-delete-dialog__section-title {
+    margin: 0;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.settings-delete-dialog__summary {
+    display: grid;
+    gap: 8px;
+}
+
+.settings-delete-dialog__summary-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline) 46%, transparent);
+    border-radius: 14px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 84%,
+        transparent
+    );
+
+    strong {
+        font-size: 1rem;
+        font-variant-numeric: tabular-nums;
+    }
+}
+
+.settings-delete-dialog__summary-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.settings-delete-dialog__summary-label mat-icon {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    color: var(--mat-sys-primary);
+}
+
+.settings-delete-dialog__list {
+    margin: 0;
+    padding-left: 20px;
+    display: grid;
+    gap: 8px;
+}
+
+.settings-delete-dialog__hint {
+    padding: 12px 14px;
+    border-radius: 14px;
+    background: color-mix(
+        in srgb,
+        var(--app-selection-surface) 32%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.settings-delete-dialog__actions {
+    padding-top: 2px;
+}
diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.spec.ts b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.spec.ts
new file mode 100644
index 0000000..2736033
--- /dev/null
+++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.spec.ts
@@ -0,0 +1,96 @@
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { SettingsDeleteAllPlaylistsDialogComponent } from './settings-delete-all-playlists-dialog.component';
+
+describe('SettingsDeleteAllPlaylistsDialogComponent', () => {
+    let component: SettingsDeleteAllPlaylistsDialogComponent;
+    let fixture: ComponentFixture<SettingsDeleteAllPlaylistsDialogComponent>;
+    let translate: TranslateService;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                SettingsDeleteAllPlaylistsDialogComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {
+                        summary: {
+                            total: 6,
+                            m3u: 3,
+                            xtream: 2,
+                            stalker: 1,
+                        },
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        translate = TestBed.inject(TranslateService);
+        translate.setTranslation(
+            'en',
+            {
+                CANCEL: 'Cancel',
+                HOME: {
+                    PLAYLIST_TYPES: {
+                        M3U: 'M3U',
+                        XTREAM: 'Xtream',
+                        STALKER: 'Stalker',
+                    },
+                },
+                SETTINGS: {
+                    REMOVE_DIALOG: {
+                        TITLE: 'Delete all playlists?',
+                        MESSAGE: 'Delete all {{count}} playlists from the app.',
+                        SUMMARY_TITLE: 'Playlist sources',
+                        CONSEQUENCES_TITLE: 'This also removes',
+                        CONSEQUENCE_FAVORITES: 'Favorites',
+                        CONSEQUENCE_RECENTLY_VIEWED: 'Recently viewed history',
+                        CONSEQUENCE_PLAYBACK: 'Playback positions',
+                        CONSEQUENCE_DOWNLOADS: 'Download history',
+                        CONSEQUENCE_XTREAM_CACHE: 'Xtream cache',
+                        BACKUP_HINT: 'Use Export first if you need a backup.',
+                        CONFIRM: 'Delete everything',
+                    },
+                },
+            },
+            true
+        );
+        translate.use('en');
+
+        fixture = TestBed.createComponent(
+            SettingsDeleteAllPlaylistsDialogComponent
+        );
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('renders the playlist type summary and destructive guidance', () => {
+        const text = (fixture.nativeElement as HTMLElement).textContent ?? '';
+
+        expect(component.summaryItems().map((item) => item.count)).toEqual([
+            3, 2, 1,
+        ]);
+        expect(text).toContain('Delete all playlists?');
+        expect(text).toContain('Delete all 6 playlists from the app.');
+        expect(text).toContain('Playlist sources');
+        expect(text).toContain('M3U');
+        expect(text).toContain('Xtream');
+        expect(text).toContain('Stalker');
+        expect(text).toContain('Favorites');
+        expect(text).toContain('Use Export first if you need a backup.');
+    });
+
+    it('renders cancel and confirm actions', () => {
+        const buttons = Array.from(
+            (fixture.nativeElement as HTMLElement).querySelectorAll('button')
+        ).map((button) => button.textContent?.trim());
+
+        expect(buttons).toEqual(['Cancel', 'Delete everything']);
+    });
+});
diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts
new file mode 100644
index 0000000..79ef4f6
--- /dev/null
+++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.ts
@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+
+export interface SettingsDeleteAllPlaylistsDialogData {
+    summary: {
+        total: number;
+        m3u: number;
+        xtream: number;
+        stalker: number;
+    };
+}
+
+type SettingsDeleteSummaryItem = {
+    count: number;
+    icon: string;
+    id: 'm3u' | 'xtream' | 'stalker';
+    labelKey: string;
+};
+
+@Component({
+    selector: 'app-settings-delete-all-playlists-dialog',
+    templateUrl: './settings-delete-all-playlists-dialog.component.html',
+    styleUrls: ['./settings-delete-all-playlists-dialog.component.scss'],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatIconModule,
+        TranslateModule,
+    ],
+})
+export class SettingsDeleteAllPlaylistsDialogComponent {
+    readonly dialogData =
+        inject<SettingsDeleteAllPlaylistsDialogData>(MAT_DIALOG_DATA);
+
+    readonly summaryItems = computed<SettingsDeleteSummaryItem[]>(() => [
+        {
+            id: 'm3u',
+            count: this.dialogData.summary.m3u,
+            icon: 'playlist_play',
+            labelKey: 'HOME.PLAYLIST_TYPES.M3U',
+        },
+        {
+            id: 'xtream',
+            count: this.dialogData.summary.xtream,
+            icon: 'cloud',
+            labelKey: 'HOME.PLAYLIST_TYPES.XTREAM',
+        },
+        {
+            id: 'stalker',
+            count: this.dialogData.summary.stalker,
+            icon: 'router',
+            labelKey: 'HOME.PLAYLIST_TYPES.STALKER',
+        },
+    ]);
+
+    readonly consequenceKeys = [
+        'SETTINGS.REMOVE_DIALOG.CONSEQUENCE_FAVORITES',
+        'SETTINGS.REMOVE_DIALOG.CONSEQUENCE_RECENTLY_VIEWED',
+        'SETTINGS.REMOVE_DIALOG.CONSEQUENCE_PLAYBACK',
+        'SETTINGS.REMOVE_DIALOG.CONSEQUENCE_DOWNLOADS',
+        'SETTINGS.REMOVE_DIALOG.CONSEQUENCE_XTREAM_CACHE',
+    ] as const;
+}
diff --git a/apps/web/src/app/settings/settings.component.html b/apps/web/src/app/settings/settings.component.html
new file mode 100644
index 0000000..76f79c5
--- /dev/null
+++ b/apps/web/src/app/settings/settings.component.html
@@ -0,0 +1,1168 @@
+@if (isDialog) {
+    <h2 mat-dialog-title>{{ 'SETTINGS.GENERAL' | translate }}</h2>
+}
+
+<div
+    class="settings-container"
+    data-test-id="settings-container"
+    [class.dialog-mode]="isDialog"
+>
+    <form
+        [formGroup]="settingsForm"
+        (ngSubmit)="onSubmit()"
+        class="settings-layout"
+        novalidate
+    >
+        @if (!isDialog) {
+            <header
+                class="settings-page-header"
+                data-test-id="settings-page-header"
+            >
+                <div class="settings-page-header__text">
+                    <h1 data-test-id="settings-page-title">
+                        {{ 'SETTINGS.TITLE' | translate }}
+                    </h1>
+                    <p>{{ 'SETTINGS.GENERAL_SUBTITLE' | translate }}</p>
+                </div>
+            </header>
+        }
+
+        <div class="settings-content">
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'general'"
+                id="general"
+            >
+                <header class="settings-group__header">
+                    <div class="settings-group__header-icon">
+                        <mat-icon>settings</mat-icon>
+                    </div>
+                    <div class="settings-group__header-text">
+                        <h3>{{ 'SETTINGS.GENERAL' | translate }}</h3>
+                        <p>{{ 'SETTINGS.GENERAL_SUBTITLE' | translate }}</p>
+                    </div>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.LANGUAGE' | translate }}</h4>
+                        <p>{{ 'SETTINGS.LANGUAGE_DESCRIPTION' | translate }}</p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field
+                            appearance="outline"
+                            subscriptSizing="dynamic"
+                        >
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="language"
+                                data-test-id="select-language"
+                            >
+                                @for (
+                                    language of languageEnum | keyvalue;
+                                    track language
+                                ) {
+                                    <mat-option
+                                        [value]="language.value"
+                                        [attr.data-test-id]="language.value"
+                                        >{{
+                                            'LANGUAGES.' + language.key
+                                                | translate
+                                        }}</mat-option
+                                    >
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+
+                <div class="setting-item setting-item--full-control">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.THEME' | translate }}</h4>
+                        <p>{{ 'SETTINGS.THEME_DESCRIPTION' | translate }}</p>
+                    </div>
+                    <div class="setting-item__control">
+                        <div
+                            class="theme-switcher"
+                            role="radiogroup"
+                            [attr.aria-label]="'SETTINGS.THEME' | translate"
+                            data-test-id="select-theme"
+                        >
+                            @for (
+                                themeOption of themeOptions;
+                                track themeOption.value
+                            ) {
+                                <button
+                                    type="button"
+                                    class="theme-switcher__option"
+                                    [class.theme-switcher__option--selected]="
+                                        settingsForm.value.theme ===
+                                        themeOption.value
+                                    "
+                                    [attr.aria-checked]="
+                                        settingsForm.value.theme ===
+                                        themeOption.value
+                                    "
+                                    [attr.data-test-id]="themeOption.value"
+                                    role="radio"
+                                    (click)="selectTheme(themeOption.value)"
+                                >
+                                    <mat-icon>{{ themeOption.icon }}</mat-icon>
+                                    <span>{{
+                                        themeOption.labelKey | translate
+                                    }}</span>
+                                </button>
+                            }
+                        </div>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.SHOW_DASHBOARD' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.SHOW_DASHBOARD_DESCRIPTION'
+                                    | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control setting-item__toggle">
+                        <mat-checkbox
+                            formControlName="showDashboard"
+                            data-test-id="toggle-show-dashboard"
+                        ></mat-checkbox>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.STARTUP_BEHAVIOR' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.STARTUP_BEHAVIOR_DESCRIPTION'
+                                    | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field
+                            appearance="outline"
+                            subscriptSizing="dynamic"
+                        >
+                            <mat-label>{{
+                                'SETTINGS.STARTUP_BEHAVIOR' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="startupBehavior"
+                                data-test-id="select-startup-behavior"
+                            >
+                                @for (
+                                    option of startupBehaviorOptions;
+                                    track option.value
+                                ) {
+                                    <mat-option
+                                        [value]="option.value"
+                                        [attr.data-test-id]="option.value"
+                                    >
+                                        {{ option.labelKey | translate }}
+                                    </mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.SHOW_CAPTIONS' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.SHOW_CAPTIONS_DESCRIPTION' | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control setting-item__toggle">
+                        <mat-checkbox
+                            formControlName="showCaptions"
+                        ></mat-checkbox>
+                    </div>
+                </div>
+            </section>
+
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'playback'"
+                id="playback"
+            >
+                <header class="settings-group__header">
+                    <div class="settings-group__header-icon">
+                        <mat-icon>play_circle</mat-icon>
+                    </div>
+                    <div class="settings-group__header-text">
+                        <h3>{{ 'SETTINGS.PLAYBACK' | translate }}</h3>
+                        <p>
+                            {{
+                                'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate
+                            }}
+                        </p>
+                    </div>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field
+                            appearance="outline"
+                            subscriptSizing="dynamic"
+                        >
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="player"
+                                data-test-id="select-video-player"
+                            >
+                                @for (player of players(); track player.id) {
+                                    <mat-option
+                                        [value]="player.id"
+                                        [attr.data-test-id]="player.id"
+                                        >{{ player.labelKey | translate }}
+                                    </mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.STREAM_FORMAT' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.STREAM_FORMAT_DESCRIPTION' | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <mat-form-field
+                            appearance="outline"
+                            subscriptSizing="dynamic"
+                        >
+                            <mat-label>{{
+                                'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' | translate
+                            }}</mat-label>
+                            <mat-select
+                                formControlName="streamFormat"
+                                data-test-id="select-stream-format"
+                            >
+                                @for (
+                                    streamFormat of streamFormatEnum | keyvalue;
+                                    track streamFormat
+                                ) {
+                                    <mat-option
+                                        [value]="streamFormat.value"
+                                        [attr.data-test-id]="streamFormat.value"
+                                        >{{ streamFormat.value }}
+                                    </mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+
+                @if (isDesktop) {
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.SHOW_EXTERNAL_PLAYBACK_BAR'
+                                        | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.SHOW_EXTERNAL_PLAYBACK_BAR_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control setting-item__toggle">
+                            <mat-checkbox
+                                formControlName="showExternalPlaybackBar"
+                            ></mat-checkbox>
+                        </div>
+                    </div>
+                }
+
+                @if (settingsForm.value.player === 'mpv') {
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.MPV_PLAYER_PATH_LABEL' | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.MPV_PLAYER_PATH_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control">
+                            <mat-form-field
+                                appearance="outline"
+                                subscriptSizing="dynamic"
+                            >
+                                <mat-label for="mpvPlayerPath">{{
+                                    'SETTINGS.MPV_PLAYER_PATH' | translate
+                                }}</mat-label>
+                                <input
+                                    matInput
+                                    type="text"
+                                    id="mpvPlayerPath"
+                                    formControlName="mpvPlayerPath"
+                                />
+                            </mat-form-field>
+                        </div>
+                    </div>
+
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.MPV_REUSE_INSTANCE_LABEL'
+                                        | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.MPV_REUSE_INSTANCE_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control setting-item__toggle">
+                            <mat-checkbox
+                                formControlName="mpvReuseInstance"
+                            ></mat-checkbox>
+                        </div>
+                    </div>
+                }
+
+                @if (settingsForm.value.player === 'vlc') {
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>
+                                {{
+                                    'SETTINGS.VLC_PLAYER_PATH_LABEL' | translate
+                                }}
+                            </h4>
+                            <p>
+                                {{
+                                    'SETTINGS.VLC_PLAYER_PATH_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control">
+                            <mat-form-field
+                                appearance="outline"
+                                subscriptSizing="dynamic"
+                            >
+                                <mat-label for="vlcPlayerPath">{{
+                                    'SETTINGS.VLC_PLAYER_PATH' | translate
+                                }}</mat-label>
+                                <input
+                                    matInput
+                                    type="text"
+                                    id="vlcPlayerPath"
+                                    formControlName="vlcPlayerPath"
+                                />
+                            </mat-form-field>
+                        </div>
+                    </div>
+                }
+            </section>
+
+            @if (isDesktop) {
+                <section
+                    class="settings-group"
+                    [class.settings-group--active]="activeSection() === 'epg'"
+                    id="epg"
+                >
+                    <header class="settings-group__header">
+                        <div class="settings-group__header-icon">
+                            <mat-icon>list_alt</mat-icon>
+                        </div>
+                        <div class="settings-group__header-text">
+                            <h3>{{ 'SETTINGS.EPG_SOURCES' | translate }}</h3>
+                            <p>
+                                {{
+                                    'SETTINGS.EPG_SOURCES_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                    </header>
+
+                    <div class="setting-item setting-item--full-control">
+                        <div class="setting-item__control">
+                            <ng-container formArrayName="epgUrl">
+                                @if (epgUrl.length === 0) {
+                                    <div
+                                        class="epg-sources-empty"
+                                        data-test-id="epg-sources-empty"
+                                    >
+                                        <mat-icon
+                                            class="epg-sources-empty__icon"
+                                            >event_busy</mat-icon
+                                        >
+                                        <h4 class="epg-sources-empty__title">
+                                            {{
+                                                'SETTINGS.EPG_EMPTY_TITLE'
+                                                    | translate
+                                            }}
+                                        </h4>
+                                        <p class="epg-sources-empty__hint">
+                                            {{
+                                                'SETTINGS.EPG_EMPTY_HINT'
+                                                    | translate
+                                            }}
+                                        </p>
+                                    </div>
+                                } @else {
+                                    <div class="epg-sources">
+                                        @for (
+                                            _ of epgUrl.controls;
+                                            track _;
+                                            let i = $index
+                                        ) {
+                                            <div class="epg-source-row">
+                                                <mat-form-field
+                                                    appearance="outline"
+                                                    subscriptSizing="dynamic"
+                                                    class="w-full"
+                                                >
+                                                    <mat-label>{{
+                                                        'SETTINGS.EPG_URL_PLACEHOLDER'
+                                                            | translate
+                                                    }}</mat-label>
+                                                    <input
+                                                        matInput
+                                                        type="url"
+                                                        [formControlName]="i"
+                                                        #epgField
+                                                    />
+                                                    <mat-error>{{
+                                                        'SETTINGS.EPG_URL_ERROR'
+                                                            | translate
+                                                    }}</mat-error>
+                                                </mat-form-field>
+                                                @if (epgField.value) {
+                                                    <app-epg-source-status
+                                                        [url]="epgField.value"
+                                                    />
+                                                }
+                                                <button
+                                                    mat-icon-button
+                                                    [matTooltip]="
+                                                        'SETTINGS.REFRESH_EPG'
+                                                            | translate
+                                                    "
+                                                    type="button"
+                                                    [disabled]="
+                                                        epgField.value === ''
+                                                    "
+                                                    (click)="
+                                                        refreshEpg(
+                                                            epgUrl.value[i]
+                                                        )
+                                                    "
+                                                >
+                                                    <mat-icon>refresh</mat-icon>
+                                                </button>
+                                                <button
+                                                    mat-icon-button
+                                                    [matTooltip]="
+                                                        'SETTINGS.REMOVE_EPG_SOURCE'
+                                                            | translate
+                                                    "
+                                                    type="button"
+                                                    (click)="removeEpgSource(i)"
+                                                >
+                                                    <mat-icon>remove</mat-icon>
+                                                </button>
+                                            </div>
+                                        }
+                                    </div>
+                                }
+                            </ng-container>
+                        </div>
+                    </div>
+
+                    <footer class="settings-group__footer">
+                        <div class="inline-actions">
+                            <button
+                                mat-button
+                                type="button"
+                                (click)="addEpgSource()"
+                            >
+                                <mat-icon>add</mat-icon>
+                                {{ 'SETTINGS.ADD_EPG_SOURCE' | translate }}
+                            </button>
+                            <button
+                                mat-button
+                                type="button"
+                                [disabled]="
+                                    epgUrl.length === 0 || isClearingEpgData()
+                                "
+                                (click)="refreshAllEpg()"
+                            >
+                                <mat-icon>refresh</mat-icon>
+                                {{ 'SETTINGS.REFRESH_ALL_EPG' | translate }}
+                            </button>
+                            <button
+                                mat-button
+                                color="warn"
+                                type="button"
+                                [disabled]="isClearingEpgData()"
+                                (click)="clearEpgData()"
+                            >
+                                @if (isClearingEpgData()) {
+                                    <mat-progress-spinner
+                                        class="button-spinner"
+                                        diameter="16"
+                                        mode="indeterminate"
+                                    />
+                                    {{
+                                        'SETTINGS.CLEARING_EPG_DATA' | translate
+                                    }}
+                                } @else {
+                                    {{ 'SETTINGS.CLEAR_EPG_DATA' | translate }}
+                                }
+                            </button>
+                        </div>
+                    </footer>
+                </section>
+            }
+
+            @if (isDesktop) {
+                <section
+                    class="settings-group"
+                    [class.settings-group--active]="
+                        activeSection() === 'remote-control'
+                    "
+                    id="remote-control"
+                >
+                    <header class="settings-group__header">
+                        <div class="settings-group__header-icon">
+                            <mat-icon>settings_remote</mat-icon>
+                        </div>
+                        <div class="settings-group__header-text">
+                            <h3>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h3>
+                            <p>
+                                {{
+                                    'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                    </header>
+
+                    <div class="setting-item">
+                        <div class="setting-item__meta">
+                            <h4>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h4>
+                            <p>
+                                {{
+                                    'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <div class="setting-item__control setting-item__toggle">
+                            <mat-checkbox
+                                formControlName="remoteControl"
+                                data-test-id="remote-control-enabled"
+                            ></mat-checkbox>
+                        </div>
+                    </div>
+
+                    @if (settingsForm.value.remoteControl === true) {
+                        <div class="setting-item">
+                            <div class="setting-item__meta">
+                                <h4>
+                                    {{
+                                        'SETTINGS.REMOTE_CONTROL_PORT'
+                                            | translate
+                                    }}
+                                </h4>
+                                <p>
+                                    {{
+                                        'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION'
+                                            | translate
+                                    }}
+                                </p>
+                            </div>
+                            <div class="setting-item__control">
+                                <mat-form-field
+                                    appearance="outline"
+                                    subscriptSizing="dynamic"
+                                >
+                                    <mat-label>{{
+                                        'SETTINGS.PORT_RANGE_LABEL' | translate
+                                    }}</mat-label>
+                                    <input
+                                        matInput
+                                        type="number"
+                                        id="remoteControlPort"
+                                        data-test-id="remote-control-port"
+                                        formControlName="remoteControlPort"
+                                        min="1"
+                                        max="65535"
+                                        step="1"
+                                    />
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('required')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_REQUIRED' | translate
+                                        }}</mat-error>
+                                    }
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('min')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_MIN' | translate
+                                        }}</mat-error>
+                                    }
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('max')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_MAX' | translate
+                                        }}</mat-error>
+                                    }
+                                    @if (
+                                        settingsForm
+                                            .get('remoteControlPort')
+                                            ?.hasError('pattern')
+                                    ) {
+                                        <mat-error>{{
+                                            'SETTINGS.PORT_PATTERN' | translate
+                                        }}</mat-error>
+                                    }
+                                </mat-form-field>
+                            </div>
+                        </div>
+
+                        @if (localIpAddresses().length > 0) {
+                            <div class="setting-item">
+                                <div class="setting-item__meta">
+                                    <h4>
+                                        {{
+                                            'SETTINGS.REMOTE_CONTROL_URL'
+                                                | translate
+                                        }}
+                                    </h4>
+                                    <p>
+                                        {{
+                                            'SETTINGS.REMOTE_CONTROL_URL_DESCRIPTION'
+                                                | translate
+                                        }}
+                                    </p>
+                                </div>
+                                <div
+                                    class="setting-item__control remote-control-urls"
+                                >
+                                    @for (ip of localIpAddresses(); track ip) {
+                                        <div class="remote-control-url-item">
+                                            <div class="url-row">
+                                                <a
+                                                    [href]="
+                                                        'http://' +
+                                                        ip +
+                                                        ':' +
+                                                        settingsForm.value
+                                                            .remoteControlPort
+                                                    "
+                                                    target="_blank"
+                                                    class="remote-control-url"
+                                                >
+                                                    http://{{ ip }}:{{
+                                                        settingsForm.value
+                                                            .remoteControlPort
+                                                    }}
+                                                </a>
+                                                <button
+                                                    mat-icon-button
+                                                    type="button"
+                                                    (click)="toggleQrCode(ip)"
+                                                    [matTooltip]="
+                                                        'SETTINGS.SHOW_QR_CODE'
+                                                            | translate
+                                                    "
+                                                >
+                                                    <mat-icon
+                                                        >qr_code_2</mat-icon
+                                                    >
+                                                </button>
+                                            </div>
+                                            @if (visibleQrCodeIp() === ip) {
+                                                <div class="qr-code-container">
+                                                    <qrcode
+                                                        [qrdata]="
+                                                            'http://' +
+                                                            ip +
+                                                            ':' +
+                                                            settingsForm.value
+                                                                .remoteControlPort
+                                                        "
+                                                        [width]="150"
+                                                        errorCorrectionLevel="M"
+                                                    ></qrcode>
+                                                </div>
+                                            }
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        }
+                    }
+                </section>
+            }
+
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'backup'"
+                id="backup"
+            >
+                <header class="settings-group__header">
+                    <div class="settings-group__header-icon">
+                        <mat-icon>backup</mat-icon>
+                    </div>
+                    <div class="settings-group__header-text">
+                        <h3>{{ 'SETTINGS.BACKUP' | translate }}</h3>
+                        <p>
+                            {{ 'SETTINGS.BACKUP_DESCRIPTION' | translate }}
+                        </p>
+                    </div>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}</h4>
+                        <p>
+                            {{
+                                'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION'
+                                    | translate
+                            }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control inline-actions">
+                        <button
+                            mat-button
+                            class="inline-actions__button"
+                            [disabled]="
+                                isRemovingAllPlaylists() || isExportingData()
+                            "
+                            (click)="
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                importData()
+                            "
+                        >
+                            {{ 'SETTINGS.IMPORT_DATA' | translate }}
+                        </button>
+                        <button
+                            mat-button
+                            class="inline-actions__button"
+                            [class.inline-actions__button--busy]="
+                                isExportingData()
+                            "
+                            [disabled]="
+                                isRemovingAllPlaylists() || isExportingData()
+                            "
+                            [attr.aria-busy]="isExportingData()"
+                            (click)="
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                exportData()
+                            "
+                        >
+                            @if (isExportingData()) {
+                                <mat-progress-spinner
+                                    class="button-spinner"
+                                    diameter="16"
+                                    mode="indeterminate"
+                                />
+                                <span class="inline-actions__label">{{
+                                    'SETTINGS.EXPORTING_DATA' | translate
+                                }}</span>
+                            } @else {
+                                <span class="inline-actions__label">{{
+                                    'SETTINGS.EXPORT_DATA' | translate
+                                }}</span>
+                            }
+                        </button>
+                    </div>
+                </div>
+
+                @if (isPwa) {
+                    <div class="settings-note">
+                        {{ 'SETTINGS.EPG_NOTE' | translate }}
+                        &nbsp;<a
+                            href="https://github.com/4gray/iptvnator/releases"
+                            target="_blank"
+                            rel="noreferrer"
+                            >{{ 'SETTINGS.EPG_NOTE_URL_TEXT' | translate }}</a
+                        >
+                    </div>
+                }
+            </section>
+
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'reset'"
+                id="reset"
+            >
+                <header class="settings-group__header">
+                    <div class="settings-group__header-icon">
+                        <mat-icon>delete_sweep</mat-icon>
+                    </div>
+                    <div class="settings-group__header-text">
+                        <h3>{{ 'SETTINGS.RESET' | translate }}</h3>
+                        <p>{{ 'SETTINGS.RESET_DESCRIPTION' | translate }}</p>
+                    </div>
+                </header>
+
+                <div class="setting-item danger-zone">
+                    <div class="danger-zone__header">
+                        <div class="setting-item__meta">
+                            <h4>{{ 'SETTINGS.REMOVE_ALL' | translate }}</h4>
+                            <p>
+                                {{
+                                    'SETTINGS.REMOVE_ALL_DESCRIPTION'
+                                        | translate
+                                }}
+                            </p>
+                        </div>
+                        <button
+                            mat-button
+                            class="danger-zone__button"
+                            [class.danger-zone__button--busy]="
+                                isRemovingAllPlaylists()
+                            "
+                            [disabled]="!canRemoveAllPlaylists()"
+                            [attr.aria-busy]="isRemovingAllPlaylists()"
+                            (click)="
+                                $event.preventDefault();
+                                $event.stopPropagation();
+                                removeAll()
+                            "
+                            color="warn"
+                        >
+                            @if (isRemovingAllPlaylists()) {
+                                <mat-progress-spinner
+                                    class="button-spinner"
+                                    diameter="16"
+                                    mode="indeterminate"
+                                />
+                                <span class="inline-actions__label">{{
+                                    'SETTINGS.REMOVE_ALL_IN_PROGRESS'
+                                        | translate
+                                }}</span>
+                            } @else {
+                                <span class="inline-actions__label">{{
+                                    'SETTINGS.REMOVE_ALL_BUTTON' | translate
+                                }}</span>
+                            }
+                        </button>
+                    </div>
+                    <div class="danger-zone__summary" aria-live="polite">
+                        <span class="danger-zone__summary-pill">
+                            <mat-icon class="danger-zone__summary-icon"
+                                >folder_open</mat-icon
+                            >
+                            <span class="danger-zone__summary-label">{{
+                                'HOME.PLAYLIST_TYPES.M3U' | translate
+                            }}</span>
+                            <span class="danger-zone__summary-count">{{
+                                playlistDeleteSummary().m3u
+                            }}</span>
+                        </span>
+                        <span class="danger-zone__summary-pill">
+                            <mat-icon class="danger-zone__summary-icon"
+                                >cloud</mat-icon
+                            >
+                            <span class="danger-zone__summary-label">{{
+                                'HOME.PLAYLIST_TYPES.XTREAM' | translate
+                            }}</span>
+                            <span class="danger-zone__summary-count">{{
+                                playlistDeleteSummary().xtream
+                            }}</span>
+                        </span>
+                        <span class="danger-zone__summary-pill">
+                            <mat-icon class="danger-zone__summary-icon"
+                                >cast</mat-icon
+                            >
+                            <span class="danger-zone__summary-label">{{
+                                'HOME.PLAYLIST_TYPES.STALKER' | translate
+                            }}</span>
+                            <span class="danger-zone__summary-count">{{
+                                playlistDeleteSummary().stalker
+                            }}</span>
+                        </span>
+                    </div>
+                    @if (removeAllProgressLabel(); as progressLabel) {
+                        <p class="danger-zone__progress">
+                            {{ progressLabel }}
+                        </p>
+                    }
+                </div>
+            </section>
+
+            <section
+                class="settings-group"
+                [class.settings-group--active]="activeSection() === 'about'"
+                id="about"
+            >
+                <header class="settings-group__header">
+                    <div class="settings-group__header-icon">
+                        <mat-icon>info</mat-icon>
+                    </div>
+                    <div class="settings-group__header-text">
+                        <h3>{{ 'SETTINGS.ABOUT' | translate }}</h3>
+                        <p>{{ 'SETTINGS.ABOUT_SUBTITLE' | translate }}</p>
+                    </div>
+                </header>
+
+                <div class="setting-item">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.VERSION' | translate }}</h4>
+                        <p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
+                    </div>
+                    <div class="setting-item__control version-block">
+                        <span>{{ version }}</span>
+                        <small>{{ updateMessage }}</small>
+                    </div>
+                </div>
+
+                @if (isDesktop) {
+                    <div class="settings-note">
+                        <strong>{{
+                            'SETTINGS.EMBEDDED_MPV_NOTICE_TITLE' | translate
+                        }}</strong>
+                        <span>{{
+                            'SETTINGS.EMBEDDED_MPV_NOTICE_DESCRIPTION'
+                                | translate
+                        }}</span>
+                    </div>
+                }
+
+                <div class="setting-item setting-item--full-control">
+                    <div class="setting-item__meta">
+                        <h4>{{ 'SETTINGS.COMMUNITY' | translate }}</h4>
+                        <p>
+                            {{ 'SETTINGS.COMMUNITY_DESCRIPTION' | translate }}
+                        </p>
+                    </div>
+                    <div class="setting-item__control">
+                        <div class="link-cards">
+                            <a
+                                class="link-card link-card--github"
+                                href="https://github.com/4gray/iptvnator"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                data-test-id="link-github"
+                            >
+                                <span class="link-card__glyph">
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        aria-hidden="true"
+                                        focusable="false"
+                                    >
+                                        <path
+                                            fill="currentColor"
+                                            d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.112.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.52 11.52 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.565 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="link-card__text">
+                                    <strong>GitHub</strong>
+                                    <span>{{
+                                        'SETTINGS.LINK_GITHUB_DESCRIPTION'
+                                            | translate
+                                    }}</span>
+                                </span>
+                                <mat-icon class="link-card__arrow"
+                                    >arrow_outward</mat-icon
+                                >
+                            </a>
+                            <a
+                                class="link-card link-card--blog"
+                                href="https://4gray.github.io/iptvnator/"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                data-test-id="link-blog"
+                            >
+                                <span class="link-card__glyph">
+                                    <mat-icon>menu_book</mat-icon>
+                                </span>
+                                <span class="link-card__text">
+                                    <strong>{{
+                                        'SETTINGS.LINK_BLOG' | translate
+                                    }}</strong>
+                                    <span>{{
+                                        'SETTINGS.LINK_BLOG_DESCRIPTION'
+                                            | translate
+                                    }}</span>
+                                </span>
+                                <mat-icon class="link-card__arrow"
+                                    >arrow_outward</mat-icon
+                                >
+                            </a>
+                            <a
+                                class="link-card link-card--telegram"
+                                href="https://t.me/iptvnator"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                data-test-id="link-telegram"
+                            >
+                                <span class="link-card__glyph">
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        aria-hidden="true"
+                                        focusable="false"
+                                    >
+                                        <path
+                                            fill="currentColor"
+                                            d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="link-card__text">
+                                    <strong>Telegram</strong>
+                                    <span>{{
+                                        'SETTINGS.LINK_TELEGRAM_DESCRIPTION'
+                                            | translate
+                                    }}</span>
+                                </span>
+                                <mat-icon class="link-card__arrow"
+                                    >arrow_outward</mat-icon
+                                >
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="setting-item setting-item--full-control">
+                    <div class="support-card" data-test-id="support-card">
+                        <div class="support-card__intro">
+                            <div class="support-card__emblem">
+                                <mat-icon>favorite</mat-icon>
+                            </div>
+                            <div class="support-card__copy">
+                                <h4>
+                                    {{ 'SETTINGS.SUPPORT_TITLE' | translate }}
+                                </h4>
+                                <p>
+                                    {{
+                                        'SETTINGS.SUPPORT_DESCRIPTION'
+                                            | translate
+                                    }}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="support-card__actions">
+                            <a
+                                class="support-btn support-btn--sponsors"
+                                href="https://github.com/sponsors/4gray"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                data-test-id="support-sponsors"
+                            >
+                                <span class="support-btn__glyph">
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        aria-hidden="true"
+                                        focusable="false"
+                                    >
+                                        <path
+                                            fill="currentColor"
+                                            d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="support-btn__text">
+                                    <strong>GitHub Sponsors</strong>
+                                    <small>{{
+                                        'SETTINGS.SUPPORT_SPONSORS_HINT'
+                                            | translate
+                                    }}</small>
+                                </span>
+                            </a>
+                            <a
+                                class="support-btn support-btn--kofi"
+                                href="https://ko-fi.com/4gray"
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                data-test-id="support-kofi"
+                            >
+                                <span class="support-btn__glyph">
+                                    <mat-icon>local_cafe</mat-icon>
+                                </span>
+                                <span class="support-btn__text">
+                                    <strong>Ko-fi</strong>
+                                    <small>{{
+                                        'SETTINGS.SUPPORT_KOFI_HINT' | translate
+                                    }}</small>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <footer class="action-bar" data-test-id="settings-action-bar">
+                @if (isDialog) {
+                    <button
+                        mat-button
+                        type="button"
+                        (click)="backToHome()"
+                        data-test-id="back-to-home"
+                    >
+                        <mat-icon>close</mat-icon>
+                        {{ 'CLOSE' | translate }}
+                    </button>
+                }
+                <button
+                    mat-flat-button
+                    type="submit"
+                    class="settings-save-button"
+                    [disabled]="settingsForm.pristine || !settingsForm.valid"
+                    data-test-id="save-settings"
+                >
+                    <mat-icon>save</mat-icon>
+                    {{ 'SETTINGS.SAVE_CHANGES' | translate }}
+                </button>
+            </footer>
+        </div>
+    </form>
+</div>
diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
new file mode 100644
index 0000000..a5104b7
--- /dev/null
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -0,0 +1,829 @@
+:host {
+    display: block;
+}
+
+.settings-container {
+    height: auto;
+    overflow: visible;
+    padding: 18px 20px calc(36px + var(--settings-safe-bottom));
+}
+
+.settings-container.dialog-mode {
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    padding: 12px 8px calc(24px + var(--settings-safe-bottom));
+}
+
+.settings-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+    max-width: 920px;
+    margin: 0 auto;
+    padding-bottom: calc(
+        var(--settings-action-bar-space) + var(--settings-safe-bottom)
+    );
+}
+
+.settings-container.dialog-mode .settings-layout {
+    padding-bottom: 0;
+}
+
+.settings-page-header {
+    padding: 14px 18px 8px;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+.settings-page-header__text {
+    max-width: 56ch;
+
+    h1 {
+        margin: 0;
+        font-size: clamp(1.35rem, 2vw, 1.75rem);
+        line-height: 1.08;
+        letter-spacing: -0.03em;
+        font-weight: 700;
+    }
+
+    p {
+        margin: 4px 0 0;
+        color: var(--settings-muted);
+        font-size: 0.86rem;
+        line-height: 1.45;
+    }
+}
+
+.settings-content {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.settings-group {
+    position: relative;
+    background: var(--settings-group-bg);
+    overflow: hidden;
+    scroll-margin-top: 24px;
+    padding: 0;
+    border: 1px solid var(--settings-group-border);
+    border-radius: 22px;
+    box-shadow: var(--settings-group-shadow);
+    transition:
+        background 0.2s ease,
+        box-shadow 0.2s ease,
+        border-color 0.2s ease;
+}
+
+.settings-group--active {
+    background: var(--settings-group-active-bg);
+    border-color: var(--settings-group-active-ring);
+    box-shadow: var(--settings-group-active-shadow);
+
+    .settings-group__header-icon {
+        background: color-mix(
+            in srgb,
+            var(--app-selection-surface-strong) 70%,
+            var(--mat-sys-surface-container-high)
+        );
+        color: var(--app-selection-color);
+        border-color: var(--settings-group-active-ring);
+    }
+
+    .settings-group__header-text h3 {
+        color: var(--app-selection-color);
+    }
+}
+
+.settings-group__header {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 18px 14px;
+
+    .settings-group__header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        flex-shrink: 0;
+        border: 1px solid
+            color-mix(in srgb, var(--mat-sys-outline-variant) 74%, transparent);
+        border-radius: 12px;
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 78%,
+            transparent
+        );
+        color: var(--mat-sys-on-surface-variant);
+
+        mat-icon {
+            font-size: 20px;
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .settings-group__header-text {
+        h3 {
+            margin: 0;
+            font-size: 1.08rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+
+        p {
+            margin: 2px 0 0;
+            color: var(--settings-muted);
+            font-size: 0.84rem;
+            line-height: 1.45;
+        }
+    }
+}
+
+.settings-group__footer {
+    padding: 12px 18px 16px;
+    border-top: 1px solid var(--settings-item-border);
+}
+
+.setting-item {
+    display: grid;
+    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 340px);
+    gap: 14px;
+    margin: 0 18px;
+    padding: 14px 0;
+    border-top: 1px solid var(--settings-item-border);
+    background: transparent;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.settings-group .setting-item:last-child {
+    margin-bottom: 0;
+}
+
+.setting-item__meta {
+    h4 {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 650;
+        letter-spacing: -0.01em;
+    }
+
+    p {
+        margin: 3px 0 0;
+        color: var(--settings-muted);
+        font-size: 0.84rem;
+        line-height: 1.45;
+    }
+}
+
+.setting-item__control {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 12px;
+    min-height: 40px;
+
+    mat-form-field,
+    .w-full {
+        width: min(100%, 340px);
+    }
+}
+
+.setting-item__toggle {
+    justify-content: flex-end;
+}
+
+.setting-item--full-control {
+    grid-template-columns: 1fr;
+    gap: 12px;
+}
+
+.setting-item--full-control .setting-item__control {
+    justify-content: stretch;
+}
+
+.theme-switcher {
+    width: min(100%, 540px);
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+}
+
+.theme-switcher__option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 54px;
+    padding: 12px 14px;
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
+    border-radius: 16px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-low) 88%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface-variant);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    cursor: pointer;
+    transition:
+        border-color 0.18s ease,
+        background 0.18s ease,
+        box-shadow 0.18s ease,
+        color 0.18s ease;
+
+    mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+    }
+
+    &:hover {
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 86%,
+            transparent
+        );
+        color: var(--mat-sys-on-surface);
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--app-selection-color) 18%, transparent);
+    }
+}
+
+.theme-switcher__option--selected {
+    border-color: var(--settings-group-active-ring);
+    background: linear-gradient(
+        135deg,
+        color-mix(
+            in srgb,
+            var(--app-selection-surface-strong) 72%,
+            var(--mat-sys-surface-container-high)
+        ),
+        color-mix(
+            in srgb,
+            var(--app-selection-surface) 72%,
+            var(--mat-sys-surface-container)
+        )
+    );
+    color: var(--app-selection-color);
+    box-shadow:
+        inset 0 0 0 1px
+            color-mix(in srgb, var(--app-selection-border) 54%, transparent),
+        0 10px 18px -22px var(--settings-group-active-glow);
+}
+
+.epg-sources {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.epg-sources-empty {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 8px;
+    padding: 24px 16px 16px;
+    color: var(--mat-sys-on-surface-variant);
+
+    .epg-sources-empty__icon {
+        font-size: 40px;
+        width: 40px;
+        height: 40px;
+        opacity: 0.55;
+        margin-bottom: 4px;
+    }
+
+    .epg-sources-empty__title {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: var(--mat-sys-on-surface);
+    }
+
+    .epg-sources-empty__hint {
+        margin: 0;
+        font-size: 0.825rem;
+        line-height: 1.5;
+        max-width: 360px;
+        opacity: 0.75;
+    }
+}
+
+.epg-source-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .w-full {
+        width: 100%;
+    }
+
+    app-epg-source-status {
+        flex-shrink: 0;
+    }
+}
+
+.inline-actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.button-spinner {
+    display: inline-block;
+    margin-right: 6px;
+    vertical-align: middle;
+}
+
+.inline-actions__button {
+    min-width: 118px;
+}
+
+.inline-actions__button--busy {
+    background: color-mix(
+        in srgb,
+        var(--app-selection-surface) 74%,
+        transparent
+    );
+    color: var(--app-selection-color);
+    box-shadow:
+        inset 0 0 0 1px
+            color-mix(in srgb, var(--app-selection-border) 48%, transparent),
+        0 8px 18px -18px var(--settings-group-active-glow);
+}
+
+.inline-actions__label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.remote-control-urls {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.remote-control-url-item {
+    width: min(100%, 340px);
+}
+
+.url-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+}
+
+.remote-control-url {
+    font-family:
+        'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
+    color: inherit;
+    text-decoration: none;
+    font-size: 0.84rem;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.qr-code-container {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 0;
+}
+
+.version-block {
+    flex-direction: column;
+    align-items: flex-end;
+
+    span {
+        font-weight: 700;
+    }
+
+    small {
+        margin-top: 4px;
+        color: var(--mat-sys-on-surface-variant);
+        text-align: right;
+    }
+}
+
+.link-cards {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+    box-sizing: border-box;
+}
+
+.link-card {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr) 20px;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
+    border-radius: 16px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-low) 88%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface);
+    text-decoration: none;
+    transition:
+        border-color 0.18s ease,
+        background 0.18s ease,
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+
+    &:hover {
+        transform: translateY(-1px);
+        border-color: color-mix(
+            in srgb,
+            var(--app-selection-border) 54%,
+            var(--mat-sys-outline-variant)
+        );
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 92%,
+            transparent
+        );
+        box-shadow: 0 10px 20px -22px rgba(15, 23, 42, 0.5);
+
+        .link-card__arrow {
+            opacity: 1;
+            transform: translate(2px, -2px);
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow:
+            0 0 0 2px var(--mat-sys-surface),
+            0 0 0 4px
+                color-mix(in srgb, var(--app-selection-color) 40%, transparent);
+    }
+}
+
+.link-card__glyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-high) 82%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface-variant);
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.link-card--github .link-card__glyph {
+    background: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
+    color: var(--mat-sys-on-surface);
+}
+
+.link-card--blog .link-card__glyph {
+    background: color-mix(in srgb, #ff7849 18%, transparent);
+    color: #ff8a5b;
+}
+
+.link-card--telegram .link-card__glyph {
+    background: color-mix(in srgb, #229ed9 22%, transparent);
+    color: #38b0e3;
+}
+
+.link-card__text {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    strong {
+        font-size: 0.92rem;
+        font-weight: 650;
+        letter-spacing: -0.01em;
+    }
+
+    span {
+        color: var(--settings-muted);
+        font-size: 0.78rem;
+        line-height: 1.35;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+}
+
+.link-card__arrow {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--settings-muted);
+    opacity: 0.6;
+    transition:
+        opacity 0.18s ease,
+        transform 0.18s ease;
+}
+
+.settings-note {
+    margin: 12px 18px 18px;
+    padding: 10px 12px;
+    border-radius: 14px;
+    font-size: 0.84rem;
+    background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-primary) 30%, transparent);
+    line-height: 1.45;
+
+    a {
+        color: inherit;
+        font-weight: 700;
+    }
+}
+
+.danger-zone {
+    margin-top: 8px;
+    margin-bottom: 18px;
+    padding: 14px 16px;
+    background: var(--settings-item-danger-bg);
+    border: 1px solid var(--settings-item-danger-border);
+    border-radius: 16px;
+    grid-template-columns: 1fr;
+    gap: 14px;
+}
+
+.danger-zone__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+
+    .setting-item__meta {
+        flex: 1;
+        min-width: 0;
+    }
+}
+
+.danger-zone__summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+}
+
+.danger-zone__summary-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 34px;
+    padding: 4px 6px 4px 12px;
+    border-radius: 12px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-high) 78%,
+        transparent
+    );
+    border: 1px solid
+        color-mix(in srgb, var(--settings-item-danger-border) 60%, transparent);
+    font-size: 0.82rem;
+    line-height: 1.2;
+    color: var(--mat-sys-on-surface);
+
+    .danger-zone__summary-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        color: var(--mat-sys-on-surface-variant);
+        flex-shrink: 0;
+    }
+
+    .danger-zone__summary-label {
+        font-weight: 500;
+        letter-spacing: 0.01em;
+    }
+
+    .danger-zone__summary-count {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 26px;
+        height: 22px;
+        padding: 0 8px;
+        border-radius: 999px;
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-on-surface) 10%,
+            transparent
+        );
+        color: var(--mat-sys-on-surface);
+        font-size: 0.78rem;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        margin-left: 2px;
+    }
+}
+
+.danger-zone__progress {
+    margin: 0;
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.84rem;
+}
+
+.danger-zone__button {
+    min-width: 138px;
+    flex-shrink: 0;
+    align-self: flex-start;
+}
+
+.danger-zone__button--busy {
+    background: color-mix(
+        in srgb,
+        var(--settings-item-danger-border) 28%,
+        transparent
+    );
+}
+
+.action-bar {
+    position: sticky;
+    bottom: calc(
+        var(--settings-action-bar-offset) + var(--settings-safe-bottom)
+    );
+    margin-left: auto;
+    z-index: 100;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    padding: 10px 14px;
+    border: 1px solid var(--settings-action-bar-border);
+    border-radius: 18px;
+    background: var(--settings-action-bar-bg);
+    backdrop-filter: blur(12px);
+    box-shadow: var(--settings-action-bar-shadow);
+}
+
+.settings-container.dialog-mode .action-bar {
+    position: static;
+    margin-top: 12px;
+    margin-bottom: 2px;
+    box-shadow: none;
+    border-radius: 16px;
+    padding: 12px;
+    justify-content: space-between;
+}
+
+.settings-save-button.mat-mdc-button-base {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    color: #fff;
+    font-weight: 500;
+    padding: 0 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        opacity 0.2s ease;
+
+    mat-icon {
+        margin-right: 6px;
+    }
+
+    &:hover:not([disabled]) {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 18px rgba(59, 130, 246, 0.38);
+    }
+
+    &:active:not([disabled]) {
+        transform: translateY(0);
+    }
+
+    &[disabled] {
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-on-surface) 12%,
+            transparent
+        );
+        color: color-mix(
+            in srgb,
+            var(--mat-sys-on-surface) 38%,
+            transparent
+        );
+        box-shadow: none;
+    }
+}
+
+@media (max-width: 1100px) {
+    .settings-layout {
+        max-width: 100%;
+        padding: 0;
+    }
+}
+
+@media (max-width: 860px) {
+    .settings-container {
+        height: auto;
+        padding: 12px 12px calc(18px + var(--settings-safe-bottom));
+    }
+
+    .settings-page-header {
+        padding: 12px 14px;
+        border-radius: 16px;
+    }
+
+    .setting-item {
+        grid-template-columns: 1fr;
+        gap: 12px;
+        margin: 0 14px;
+        padding: 12px 0;
+    }
+
+    .setting-item__control {
+        justify-content: flex-start;
+
+        mat-form-field,
+        .w-full,
+        .epg-sources,
+        .remote-control-url-item {
+            width: 100%;
+        }
+    }
+
+    .theme-switcher {
+        width: 100%;
+        grid-template-columns: 1fr;
+    }
+
+    .remote-control-urls,
+    .version-block {
+        align-items: flex-start;
+    }
+
+    .link-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .support-btn {
+        flex: 1 1 100%;
+    }
+
+    .url-row {
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .action-bar {
+        position: static;
+        flex-direction: column-reverse;
+        align-items: stretch;
+        border-radius: 16px;
+        box-shadow: none;
+        width: 100%;
+        margin-left: 0;
+
+        button {
+            width: 100%;
+        }
+    }
+}
diff --git a/apps/web/src/app/settings/settings.component.spec.ts b/apps/web/src/app/settings/settings.component.spec.ts
new file mode 100644
index 0000000..573e8e3
--- /dev/null
+++ b/apps/web/src/app/settings/settings.component.spec.ts
@@ -0,0 +1,884 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+} from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { Store } from '@ngrx/store';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { DialogService } from 'components';
+import { MockModule, MockProvider } from 'ng-mocks';
+import {
+    DatabaseService,
+    DataService,
+    PlaylistBackupService,
+    PlaylistsService,
+} from 'services';
+import {
+    /* EmbeddedMpvSupport, */
+    Language,
+    PlaylistMeta,
+    StartupBehavior,
+    StreamFormat,
+    Theme,
+    VideoPlayer,
+} from 'shared-interfaces';
+import { SettingsComponent } from './settings.component';
+
+import { signal } from '@angular/core';
+import { SettingsContextService } from '@iptvnator/workspace/shell/util';
+import {
+    PlaylistActions,
+    selectAllPlaylistsMeta,
+    selectIsEpgAvailable,
+} from 'm3u-state';
+import { NgxIndexedDBService } from 'ngx-indexed-db';
+import { from, of } from 'rxjs';
+import { ElectronServiceStub } from '../services/electron.service.stub';
+import { SettingsStore } from '../services/settings-store.service';
+import { SettingsService } from '../services/settings.service';
+
+class MatSnackBarStub {
+    open = jest.fn();
+}
+
+export class MockRouter {
+    navigateByUrl(url: string): string {
+        return url;
+    }
+}
+
+const DEFAULT_SETTINGS = {
+    player: VideoPlayer.VideoJs,
+    streamFormat: StreamFormat.M3u8StreamFormat,
+    language: Language.ENGLISH,
+    showCaptions: false,
+    showDashboard: true,
+    startupBehavior: StartupBehavior.FirstView,
+    showExternalPlaybackBar: true,
+    theme: Theme.SystemTheme,
+    mpvPlayerPath: '',
+    mpvReuseInstance: false,
+    vlcPlayerPath: '',
+    remoteControl: false,
+    remoteControlPort: 8765,
+    epgUrl: [],
+};
+
+class MockSettingsStore {
+    private _settings = signal(DEFAULT_SETTINGS);
+
+    getSettings = () => this._settings();
+
+    loadSettings = jest.fn().mockResolvedValue(undefined);
+
+    updateSettings = jest.fn().mockResolvedValue(undefined);
+
+    // Helper method for tests to modify settings
+    _setSettings(newSettings: Partial<typeof DEFAULT_SETTINGS>) {
+        this._settings.set({
+            ...this._settings(),
+            ...newSettings,
+        });
+    }
+}
+
+class MockSettingsService {
+    getAppVersion = jest.fn().mockReturnValue(from(Promise.resolve('1.0.0')));
+    changeTheme = jest.fn();
+    isVersionOutdated = jest.fn().mockImplementation(
+        (currentVersion: string, latestVersion: string) =>
+            currentVersion.localeCompare(latestVersion, undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            }) < 0
+    );
+}
+
+describe('SettingsComponent', () => {
+    let component: SettingsComponent;
+    let fixture: ComponentFixture<SettingsComponent>;
+    let electronService: DataService;
+    let router: Router;
+    let settingsStore: unknown;
+    let translate: TranslateService;
+    let epgService: EpgService;
+    let dialogService: DialogService;
+    let playlistsService: PlaylistsService;
+    let playlistBackupService: PlaylistBackupService;
+    let store: Store;
+    let mockStore: MockStore;
+    let databaseService: DatabaseService;
+    let snackBar: MatSnackBarStub;
+    const originalElectron = window.electron;
+    const importDate = '2026-04-21T00:00:00.000Z';
+
+    const createPlaylistMeta = (
+        overrides: Partial<PlaylistMeta> = {}
+    ): PlaylistMeta => ({
+        _id: overrides._id ?? 'playlist-id',
+        title: overrides.title ?? 'Playlist',
+        count: overrides.count ?? 10,
+        importDate: overrides.importDate ?? importDate,
+        autoRefresh: overrides.autoRefresh ?? false,
+        ...overrides,
+    });
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                UntypedFormBuilder,
+                { provide: SettingsStore, useClass: MockSettingsStore },
+                MockProvider(EpgService, {
+                    fetchEpg: jest.fn(),
+                }),
+                MockProvider(DialogService, {
+                    openConfirmDialog: jest.fn(),
+                }),
+                MockProvider(MatDialog, {
+                    open: jest.fn(),
+                }),
+                { provide: SettingsService, useClass: MockSettingsService },
+                { provide: MatSnackBar, useClass: MatSnackBarStub },
+                { provide: DataService, useClass: ElectronServiceStub },
+                {
+                    provide: Router,
+                    useClass: MockRouter,
+                },
+                provideMockStore({
+                    selectors: [
+                        { selector: selectAllPlaylistsMeta, value: [] },
+                        { selector: selectIsEpgAvailable, value: false },
+                    ],
+                }),
+                {
+                    provide: NgxIndexedDBService,
+                    useValue: {},
+                },
+                MockProvider(PlaylistsService, {
+                    getAllData: jest.fn().mockReturnValue(of([])),
+                    removeAll: jest.fn(),
+                }),
+                MockProvider(DatabaseService, {
+                    createOperationId: jest
+                        .fn()
+                        .mockReturnValue('delete-all-op'),
+                    deleteAllPlaylists: jest.fn().mockResolvedValue(true),
+                }),
+                MockProvider(PlaylistBackupService, {
+                    exportBackup: jest.fn().mockResolvedValue({
+                        defaultFileName:
+                            'iptvnator-playlist-backup-2026-04-21.json',
+                        json: '{}',
+                        manifest: {
+                            kind: 'iptvnator-playlist-backup',
+                            version: 1,
+                            exportedAt: '2026-04-21T00:00:00.000Z',
+                            includeSecrets: true,
+                            playlists: [],
+                        },
+                    }),
+                    importBackup: jest.fn().mockResolvedValue({
+                        imported: 0,
+                        merged: 0,
+                        skipped: 0,
+                        failed: 0,
+                        errors: [],
+                    }),
+                }),
+            ],
+            imports: [
+                SettingsComponent,
+                HttpClientTestingModule,
+                FormsModule,
+                MockModule(MatSelectModule),
+                MockModule(MatIconModule),
+                MockModule(MatTooltipModule),
+                ReactiveFormsModule,
+                MockModule(RouterTestingModule),
+                MockModule(MatCardModule),
+                MockModule(MatListModule),
+                MockModule(MatFormFieldModule),
+                MockModule(MatCheckboxModule),
+                MockModule(MatDividerModule),
+                TranslateModule.forRoot(),
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        window.electron = {
+            checkEpgFreshness: jest.fn().mockResolvedValue({
+                freshUrls: [],
+                staleUrls: [],
+            }),
+            clearEpgData: jest.fn().mockResolvedValue({ success: true }),
+            forceFetchEpg: jest.fn().mockResolvedValue({ success: true }),
+            getAppVersion: jest.fn().mockResolvedValue('1.0.0'),
+            getLocalIpAddresses: jest.fn().mockResolvedValue([]),
+            platform: 'linux',
+            saveFileDialog: jest.fn().mockResolvedValue('/tmp/backup.json'),
+            setMpvPlayerPath: jest.fn().mockResolvedValue(undefined),
+            setVlcPlayerPath: jest.fn().mockResolvedValue(undefined),
+            updateSettings: jest.fn().mockResolvedValue(undefined),
+            writeFile: jest.fn().mockResolvedValue({ success: true }),
+        } as unknown as typeof window.electron;
+
+        fixture = TestBed.createComponent(SettingsComponent);
+        electronService = TestBed.inject(DataService);
+        settingsStore = TestBed.inject(SettingsStore);
+        router = TestBed.inject(Router);
+        translate = TestBed.inject(TranslateService);
+        epgService = TestBed.inject(EpgService);
+        dialogService = TestBed.inject(DialogService);
+        playlistsService = TestBed.inject(PlaylistsService);
+        playlistBackupService = TestBed.inject(PlaylistBackupService);
+        store = TestBed.inject(Store);
+        mockStore = TestBed.inject(MockStore);
+        databaseService = TestBed.inject(DatabaseService);
+        snackBar = TestBed.inject(MatSnackBar) as unknown as MatSnackBarStub;
+
+        component = fixture.componentInstance;
+        component.checkAppVersion = jest.fn();
+        component.fetchLocalIpAddresses = jest
+            .fn()
+            .mockResolvedValue(undefined);
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        window.electron = originalElectron;
+    });
+
+    function setPlaylists(playlists: PlaylistMeta[]): void {
+        mockStore.overrideSelector(selectAllPlaylistsMeta, playlists);
+        mockStore.refreshState();
+        fixture.detectChanges();
+    }
+
+    it('should create and init component', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should render a compact page header outside dialog mode', () => {
+        const nativeElement = fixture.nativeElement as HTMLElement;
+
+        expect(
+            nativeElement.querySelector('[data-test-id="settings-page-header"]')
+        ).not.toBeNull();
+        expect(nativeElement.querySelector('.settings-intro')).toBeNull();
+    });
+
+    it('should not render the page header in dialog mode', () => {
+        fixture.destroy();
+
+        const dialogFixture = TestBed.createComponent(SettingsComponent);
+        const dialogComponent = dialogFixture.componentInstance;
+
+        dialogComponent.checkAppVersion = jest.fn();
+        dialogComponent.fetchLocalIpAddresses = jest
+            .fn()
+            .mockResolvedValue(undefined);
+        dialogComponent.isDialog = true;
+        dialogFixture.detectChanges();
+
+        const nativeElement = dialogFixture.nativeElement as HTMLElement;
+        expect(
+            nativeElement.querySelector('[data-test-id="settings-page-header"]')
+        ).toBeNull();
+        expect(
+            nativeElement.querySelector('h2[mat-dialog-title]')
+        ).not.toBeNull();
+    });
+
+    it('should scroll the selected navigation target within the workspace viewport', async () => {
+        fixture.destroy();
+        jest.useFakeTimers();
+
+        try {
+            const scrollFixture = TestBed.createComponent(SettingsComponent);
+            const scrollComponent = scrollFixture.componentInstance;
+            const settingsContext = TestBed.inject(SettingsContextService);
+            const originalGetElementById =
+                document.getElementById.bind(document);
+            const scrollTo = jest.fn();
+            const scrollRoot = {
+                scrollTop: 96,
+                clientHeight: 885,
+                scrollHeight: 2469,
+                getBoundingClientRect: () =>
+                    ({
+                        top: 56,
+                    }) as DOMRect,
+                scrollTo,
+            } as unknown as HTMLElement;
+
+            scrollComponent.checkAppVersion = jest.fn();
+            scrollComponent.fetchLocalIpAddresses = jest
+                .fn()
+                .mockResolvedValue(undefined);
+            jest.spyOn(scrollComponent as any, 'getScrollRoot').mockReturnValue(
+                scrollRoot
+            );
+            scrollFixture.detectChanges();
+
+            const getElementByIdSpy = jest
+                .spyOn(document, 'getElementById')
+                .mockImplementation((id: string) => {
+                    if (id === 'about') {
+                        return {
+                            getBoundingClientRect: () =>
+                                ({
+                                    top: 2050,
+                                    height: 159,
+                                }) as DOMRect,
+                        } as HTMLElement;
+                    }
+
+                    return originalGetElementById(id);
+                });
+
+            await scrollFixture.whenStable();
+            scrollFixture.detectChanges();
+            settingsContext.navigateToSection('about');
+            scrollFixture.detectChanges();
+
+            expect(getElementByIdSpy).toHaveBeenCalledWith('about');
+            expect(scrollTo).toHaveBeenCalledWith({
+                behavior: 'smooth',
+                top: 1488,
+            });
+            expect(settingsContext.pendingScrollTarget()).toBe('about');
+
+            jest.advanceTimersByTime(600);
+
+            expect(settingsContext.pendingScrollTarget()).toBeNull();
+        } finally {
+            jest.useRealTimers();
+        }
+    });
+
+    describe('Get and set settings on component init', () => {
+        const settings = {
+            language: Language.GERMAN,
+            player: VideoPlayer.Html5Player,
+            theme: Theme.DarkTheme,
+        };
+
+        it('should init default settings if previous config was not saved', async () => {
+            await component.ngOnInit();
+            //expect(settingsStore.loadSettings).toHaveBeenCalled();
+            expect(component.settingsForm.value).toEqual(DEFAULT_SETTINGS);
+        });
+
+        it('should get and apply custom settings', async () => {
+            const mockStore = settingsStore as unknown as MockSettingsStore;
+            mockStore._setSettings({
+                ...DEFAULT_SETTINGS,
+                ...settings,
+            });
+
+            component.setSettings();
+
+            //expect(settingsStore.loadSettings).toHaveBeenCalled();
+            expect(component.settingsForm.value).toEqual({
+                ...DEFAULT_SETTINGS,
+                ...settings,
+            });
+        });
+
+        /* it('hides the embedded mpv option when the desktop support probe reports unsupported', async () => {
+            window.electron = {
+                ...window.electron,
+                getEmbeddedMpvSupport: jest.fn().mockResolvedValue({
+                    supported: false,
+                    platform: 'darwin',
+                    reason: 'hidden harness',
+                }),
+            } as unknown as typeof window.electron;
+
+            await component.ngOnInit();
+            await fixture.whenStable();
+
+            expect(
+                component.players().some(
+                    (player) => player.id === VideoPlayer.EmbeddedMpv
+                )
+            ).toBe(false);
+        });
+
+        it('shows the embedded mpv option when the desktop support probe reports supported', async () => {
+            window.electron = {
+                ...window.electron,
+                getEmbeddedMpvSupport: jest.fn().mockResolvedValue({
+                    supported: true,
+                    platform: 'darwin',
+                }),
+            } as unknown as typeof window.electron;
+
+            await component.ngOnInit();
+            await fixture.whenStable();
+
+            expect(
+                component.players().some(
+                    (player) => player.id === VideoPlayer.EmbeddedMpv
+                )
+            ).toBe(true);
+        });
+
+        it('does not block settings initialization while embedded mpv support is pending', async () => {
+            let resolveSupport: (value: EmbeddedMpvSupport) => void;
+            window.electron = {
+                ...window.electron,
+                getEmbeddedMpvSupport: jest.fn(
+                    () =>
+                        new Promise((resolve) => {
+                            resolveSupport = resolve;
+                        })
+                ),
+            } as unknown as typeof window.electron;
+
+            await expect(component.ngOnInit()).resolves.toBeUndefined();
+
+            expect(component.settingsForm.value).toEqual(DEFAULT_SETTINGS);
+            expect(window.electron.getEmbeddedMpvSupport).toHaveBeenCalled();
+            expect(
+                component.players().some(
+                    (player) => player.id === VideoPlayer.EmbeddedMpv
+                )
+            ).toBe(false);
+
+            resolveSupport!({
+                supported: true,
+                platform: 'darwin',
+            });
+            await fixture.whenStable();
+
+            expect(
+                component.players().some(
+                    (player) => player.id === VideoPlayer.EmbeddedMpv
+                )
+            ).toBe(true);
+        }); */
+    });
+
+    describe('Version check', () => {
+        const latestVersion = '1.0.0';
+        const currentVersion = '0.1.0';
+
+        beforeEach(() => {
+            const settingsService = TestBed.inject(SettingsService);
+            (settingsService.getAppVersion as jest.Mock).mockReturnValue(
+                of(latestVersion)
+            );
+
+            // Add translation mock
+            jest.spyOn(translate, 'instant').mockImplementation((key) => {
+                if (key === 'SETTINGS.NEW_VERSION_AVAILABLE') {
+                    return 'New version available';
+                }
+                if (key === 'SETTINGS.LATEST_VERSION') {
+                    return 'Latest version installed';
+                }
+                return key;
+            });
+        });
+
+        it('should return true if version is outdated', () => {
+            jest.spyOn(electronService, 'getAppVersion').mockReturnValue(
+                currentVersion
+            );
+            const isOutdated =
+                component.isCurrentVersionOutdated(latestVersion);
+            expect(isOutdated).toBeTruthy();
+        });
+
+        it('should update notification message if version is outdated', () => {
+            jest.spyOn(translate, 'instant');
+            jest.spyOn(electronService, 'getAppVersion').mockReturnValue(
+                currentVersion
+            );
+            component.showVersionInformation(latestVersion);
+            expect(translate.instant).toHaveBeenCalledWith(
+                'SETTINGS.NEW_VERSION_AVAILABLE'
+            );
+            expect(component.updateMessage).toBe(
+                'New version available: 1.0.0'
+            );
+        });
+    });
+
+    it('disables the global wipe action when there are no playlists', () => {
+        setPlaylists([]);
+
+        const deleteButton = (
+            fixture.nativeElement as HTMLElement
+        ).querySelector('.danger-zone__button') as HTMLButtonElement | null;
+
+        expect(component.canRemoveAllPlaylists()).toBe(false);
+        expect(deleteButton?.disabled).toBe(true);
+    });
+
+    it('opens the dedicated delete-all dialog with the current playlist type summary', () => {
+        setPlaylists([
+            createPlaylistMeta({ _id: 'm3u-1' }),
+            createPlaylistMeta({
+                _id: 'xtream-1',
+                serverUrl: 'http://xtream.example',
+            }),
+            createPlaylistMeta({
+                _id: 'stalker-1',
+                macAddress: '00:11:22:33:44:55',
+            }),
+        ]);
+
+        const openSpy = jest
+            .spyOn((component as any).matDialog, 'open')
+            .mockReturnValue({
+                afterClosed: () => of(false),
+            } as any);
+
+        component.removeAll();
+
+        expect(component.playlistDeleteSummary()).toEqual({
+            total: 3,
+            m3u: 1,
+            xtream: 1,
+            stalker: 1,
+        });
+        expect(openSpy).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                data: {
+                    summary: {
+                        total: 3,
+                        m3u: 1,
+                        xtream: 1,
+                        stalker: 1,
+                    },
+                },
+            })
+        );
+    });
+
+    it('tracks Electron delete-all progress and dispatches store cleanup after success', async () => {
+        setPlaylists([
+            createPlaylistMeta({ _id: 'm3u-1' }),
+            createPlaylistMeta({
+                _id: 'xtream-1',
+                serverUrl: 'http://xtream.example',
+            }),
+        ]);
+
+        const dispatchSpy = jest.spyOn(store, 'dispatch');
+        (databaseService.deleteAllPlaylists as jest.Mock).mockClear();
+        jest.spyOn((component as any).matDialog, 'open').mockReturnValue({
+            afterClosed: () => of(true),
+        } as any);
+        jest.spyOn(translate, 'instant').mockImplementation(
+            (key: string, params?: Record<string, number>) => {
+                if (key === 'SETTINGS.REMOVE_ALL_PROGRESS') {
+                    return `${params?.current}/${params?.total}`;
+                }
+                return key;
+            }
+        );
+        jest.spyOn(
+            component as any,
+            'waitForUiFeedbackFrame'
+        ).mockResolvedValue(undefined);
+
+        let resolveDelete: (value: boolean) => void = () => undefined;
+        (databaseService.deleteAllPlaylists as jest.Mock).mockImplementation(
+            ({
+                onEvent,
+            }: {
+                onEvent?: (event: {
+                    operation: string;
+                    status: string;
+                    current?: number;
+                    total?: number;
+                }) => void;
+            }) => {
+                onEvent?.({
+                    operation: 'delete-all-playlists',
+                    status: 'progress',
+                    current: 3,
+                    total: 7,
+                });
+
+                return new Promise<boolean>((resolve) => {
+                    resolveDelete = resolve;
+                });
+            }
+        );
+
+        component.removeAll();
+        await Promise.resolve();
+        fixture.detectChanges();
+
+        expect(component.isRemovingAllPlaylists()).toBe(true);
+        expect(component.removeAllProgressLabel()).toBe('3/7');
+        expect(databaseService.deleteAllPlaylists).toHaveBeenCalledWith(
+            expect.objectContaining({
+                operationId: 'delete-all-op',
+                onEvent: expect.any(Function),
+            })
+        );
+
+        resolveDelete(true);
+        await fixture.whenStable();
+
+        expect(component.isRemovingAllPlaylists()).toBe(false);
+        expect(component.removeAllProgress()).toBeNull();
+        expect(dispatchSpy).toHaveBeenCalledWith(
+            PlaylistActions.removeAllPlaylists()
+        );
+        expect(snackBar.open).toHaveBeenCalledWith(
+            'SETTINGS.PLAYLISTS_REMOVED',
+            undefined,
+            {
+                duration: 2000,
+                horizontalPosition: 'center',
+                panelClass: ['settings-snackbar'],
+                verticalPosition: 'bottom',
+            }
+        );
+    });
+
+    it('falls back to PlaylistsService.removeAll outside Electron', async () => {
+        fixture.destroy();
+        window.electron = undefined as unknown as typeof window.electron;
+
+        const browserFixture = TestBed.createComponent(SettingsComponent);
+        const browserComponent = browserFixture.componentInstance;
+        browserComponent.checkAppVersion = jest.fn();
+        browserComponent.fetchLocalIpAddresses = jest
+            .fn()
+            .mockResolvedValue(undefined);
+        browserFixture.detectChanges();
+
+        mockStore.overrideSelector(selectAllPlaylistsMeta, [
+            createPlaylistMeta({ _id: 'browser-m3u' }),
+        ]);
+        mockStore.refreshState();
+        browserFixture.detectChanges();
+
+        jest.spyOn((browserComponent as any).matDialog, 'open').mockReturnValue(
+            {
+                afterClosed: () => of(true),
+            } as any
+        );
+        jest.spyOn(
+            browserComponent as any,
+            'waitForUiFeedbackFrame'
+        ).mockResolvedValue(undefined);
+        (databaseService.deleteAllPlaylists as jest.Mock).mockClear();
+        (playlistsService.removeAll as jest.Mock).mockClear();
+        (playlistsService.removeAll as jest.Mock).mockReturnValue(
+            of(undefined)
+        );
+        const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+        browserComponent.removeAll();
+        await browserFixture.whenStable();
+
+        expect(playlistsService.removeAll).toHaveBeenCalled();
+        expect(databaseService.deleteAllPlaylists).not.toHaveBeenCalled();
+        expect(dispatchSpy).toHaveBeenCalledWith(
+            PlaylistActions.removeAllPlaylists()
+        );
+    });
+
+    it('shows the save confirmation snackbar at the bottom center with the settings offset class', () => {
+        jest.spyOn(translate, 'instant').mockReturnValue('Settings saved');
+
+        component.applyChangedSettings();
+
+        expect(snackBar.open).toHaveBeenCalledWith(
+            'Settings saved',
+            undefined,
+            {
+                duration: 2000,
+                horizontalPosition: 'center',
+                panelClass: ['settings-snackbar'],
+                verticalPosition: 'bottom',
+            }
+        );
+    });
+
+    it('should force-fetch EPG for a single URL (bypassing freshness cache)', () => {
+        const url = 'http://epg-url-here/data.xml';
+        component.refreshEpg(url);
+        expect(window.electron.forceFetchEpg).toHaveBeenCalledWith(url);
+    });
+
+    it('clears EPG data with a busy state and refreshes all sources on success', async () => {
+        let resolveClear: () => void = () => undefined;
+        const clearPromise = new Promise<{ success: boolean }>((resolve) => {
+            resolveClear = () => resolve({ success: true });
+        });
+        (window.electron.clearEpgData as jest.Mock).mockReturnValue(
+            clearPromise
+        );
+        (dialogService.openConfirmDialog as jest.Mock).mockImplementation(
+            ({ onConfirm }: { onConfirm: () => Promise<void> }) => {
+                void onConfirm();
+            }
+        );
+        const refreshSpy = jest.spyOn(component, 'refreshAllEpg');
+        jest.spyOn(translate, 'instant').mockImplementation((key) => key);
+
+        component.clearEpgData();
+
+        expect(component.isClearingEpgData()).toBe(true);
+        expect(refreshSpy).not.toHaveBeenCalled();
+
+        resolveClear();
+        await fixture.whenStable();
+
+        expect(component.isClearingEpgData()).toBe(false);
+        expect(snackBar.open).toHaveBeenCalledWith(
+            'SETTINGS.EPG_DATA_CLEARED',
+            undefined,
+            expect.objectContaining({ panelClass: ['settings-snackbar'] })
+        );
+        expect(refreshSpy).toHaveBeenCalled();
+    });
+
+    it('shows an export busy state until the backup file has been written', async () => {
+        let resolveExport: (value: {
+            defaultFileName: string;
+            json: string;
+            manifest: {
+                kind: string;
+                version: number;
+                exportedAt: string;
+                includeSecrets: boolean;
+                playlists: never[];
+            };
+        }) => void = () => undefined;
+
+        (playlistBackupService.exportBackup as jest.Mock).mockReturnValueOnce(
+            new Promise((resolve) => {
+                resolveExport = resolve;
+            })
+        );
+
+        const exportPromise = component.exportData();
+
+        expect(component.isExportingData()).toBe(true);
+
+        resolveExport({
+            defaultFileName: 'iptvnator-playlist-backup-2026-04-21.json',
+            json: '{}',
+            manifest: {
+                kind: 'iptvnator-playlist-backup',
+                version: 1,
+                exportedAt: '2026-04-21T00:00:00.000Z',
+                includeSecrets: true,
+                playlists: [],
+            },
+        });
+
+        await exportPromise;
+
+        expect(window.electron.saveFileDialog).toHaveBeenCalledWith(
+            'iptvnator-playlist-backup-2026-04-21.json',
+            [
+                {
+                    extensions: ['json'],
+                    name: 'JSON',
+                },
+            ]
+        );
+        expect(window.electron.writeFile).toHaveBeenCalledWith(
+            '/tmp/backup.json',
+            '{}'
+        );
+        expect(component.isExportingData()).toBe(false);
+    });
+
+    it('shows a failure snackbar and skips refresh when clearing EPG data rejects', async () => {
+        (window.electron.clearEpgData as jest.Mock).mockRejectedValueOnce(
+            new Error('boom')
+        );
+        (dialogService.openConfirmDialog as jest.Mock).mockImplementation(
+            ({ onConfirm }: { onConfirm: () => Promise<void> }) => {
+                void onConfirm();
+            }
+        );
+        const refreshSpy = jest.spyOn(component, 'refreshAllEpg');
+        jest.spyOn(translate, 'instant').mockImplementation((key) => key);
+        jest.spyOn(console, 'error').mockImplementation();
+
+        component.clearEpgData();
+        await fixture.whenStable();
+
+        expect(component.isClearingEpgData()).toBe(false);
+        expect(snackBar.open).toHaveBeenCalledWith(
+            'SETTINGS.EPG_DATA_CLEAR_FAILED',
+            undefined,
+            expect.objectContaining({ panelClass: ['settings-snackbar'] })
+        );
+        expect(refreshSpy).not.toHaveBeenCalled();
+    });
+
+    it('should navigate back to home page', () => {
+        jest.spyOn(router, 'navigateByUrl');
+        component.backToHome();
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/');
+    });
+
+    it('should update the selected theme and mark the form dirty', () => {
+        component.selectTheme(Theme.DarkTheme);
+
+        expect(component.settingsForm.value.theme).toBe(Theme.DarkTheme);
+        expect(component.settingsForm.dirty).toBeTruthy();
+    });
+
+    it('renders workspace startup controls with the expected defaults', () => {
+        const nativeElement = fixture.nativeElement as HTMLElement;
+
+        expect(
+            nativeElement.querySelector(
+                '[data-test-id="toggle-show-dashboard"]'
+            )
+        ).not.toBeNull();
+        expect(component.settingsForm.value.showDashboard).toBe(true);
+        expect(component.settingsForm.value.startupBehavior).toBe(
+            StartupBehavior.FirstView
+        );
+    });
+
+    it('should save settings on submit', async () => {
+        const mockStore = settingsStore as unknown as MockSettingsStore;
+        mockStore.updateSettings.mockResolvedValue(undefined);
+        const updateSettings = jest.spyOn(window.electron, 'updateSettings');
+
+        component.onSubmit();
+        await fixture.whenStable();
+
+        expect(mockStore.updateSettings).toHaveBeenCalledWith(
+            component.settingsForm.value
+        );
+        expect(updateSettings).toHaveBeenCalledWith(
+            component.settingsForm.value
+        );
+    });
+});
diff --git a/apps/web/src/app/settings/settings.component.ts b/apps/web/src/app/settings/settings.component.ts
new file mode 100644
index 0000000..759006e
--- /dev/null
+++ b/apps/web/src/app/settings/settings.component.ts
@@ -0,0 +1,1151 @@
+import { CommonModule } from '@angular/common';
+import {
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    Injector,
+    Input,
+    OnDestroy,
+    OnInit,
+    signal,
+} from '@angular/core';
+import {
+    FormArray,
+    FormBuilder,
+    FormControl,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+    MAT_DIALOG_DATA,
+    MatDialog,
+    MatDialogModule,
+} from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { EpgSourceStatusComponent } from '@iptvnator/ui/epg';
+import { SettingsContextService } from '@iptvnator/workspace/shell/util';
+import { Store } from '@ngrx/store';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { QRCodeComponent } from 'angularx-qrcode';
+import { DialogService } from 'components';
+import {
+    PlaylistActions,
+    selectAllPlaylistsMeta,
+    selectIsEpgAvailable,
+} from 'm3u-state';
+import { firstValueFrom, take } from 'rxjs';
+import {
+    DatabaseService,
+    DataService,
+    DbOperationEvent,
+    PlaylistBackupImportSummary,
+    PlaylistBackupService,
+    PlaylistsService,
+    WORKSPACE_PRODUCT_BRANDING,
+} from 'services';
+import {
+    /* EmbeddedMpvSupport, */
+    Language,
+    StartupBehavior,
+    StreamFormat,
+    Theme,
+    VideoPlayer,
+} from 'shared-interfaces';
+import { SettingsStore } from '../services/settings-store.service';
+import { SettingsService } from './../services/settings.service';
+import {
+    SettingsDeleteAllPlaylistsDialogComponent,
+    SettingsDeleteAllPlaylistsDialogData,
+} from './settings-delete-all-playlists-dialog.component';
+
+interface SettingsSection {
+    id: string;
+    label: string;
+    icon: string;
+    visible: boolean;
+}
+
+interface ObservedSettingsSection {
+    id: string;
+    element: HTMLElement;
+}
+
+interface ThemeOption {
+    value: Theme;
+    icon: string;
+    labelKey: string;
+}
+
+interface StartupBehaviorOption {
+    value: StartupBehavior;
+    labelKey: string;
+}
+
+type SettingsPlaylistDeleteSummary =
+    SettingsDeleteAllPlaylistsDialogData['summary'];
+
+@Component({
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss'],
+    imports: [
+        CommonModule,
+        EpgSourceStatusComponent,
+        FormsModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDividerModule,
+        MatIconModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        MatDialogModule,
+        QRCodeComponent,
+    ],
+})
+export class SettingsComponent implements OnInit, OnDestroy {
+    private static readonly SECTION_SCROLL_TOP_GUTTER = 112;
+    private static readonly SECTION_SCROLL_BOTTOM_GUTTER = 124;
+    private static readonly PENDING_SCROLL_CLEAR_DELAY_MS = 600;
+
+    private dialogService = inject(DialogService);
+    public dataService = inject(DataService);
+    private epgService = inject(EpgService);
+    private formBuilder = inject(FormBuilder);
+    private playlistsService = inject(PlaylistsService);
+    private router = inject(Router);
+    private settingsService = inject(SettingsService);
+    private snackBar = inject(MatSnackBar);
+    private store = inject(Store);
+    private translate = inject(TranslateService);
+    private matDialog = inject(MatDialog);
+    private playlistBackupService = inject(PlaylistBackupService);
+    private readonly elementRef = inject(ElementRef<HTMLElement>);
+    private readonly injector = inject(Injector);
+    private readonly databaseService = inject(DatabaseService);
+    private readonly dialogData = inject<{ isDialog: boolean } | null>(
+        MAT_DIALOG_DATA,
+        { optional: true }
+    );
+
+    @Input() isDialog = this.dialogData?.isDialog ?? false;
+    /** List with available languages as enum */
+    readonly languageEnum = Language;
+
+    /** List with allowed formats as enum */
+    readonly streamFormatEnum = StreamFormat;
+
+    /** Flag that indicates whether the app runs in electron environment */
+    readonly isDesktop = !!window.electron;
+    /* readonly embeddedMpvSupport = signal<EmbeddedMpvSupport | null>(null);
+    readonly supportsEmbeddedMpv = computed(
+        () => this.isDesktop && !!this.embeddedMpvSupport()?.supported
+    ); */
+
+    isPwa = this.dataService.getAppEnvironment() === 'pwa';
+
+    private readonly settingsCtx = inject(SettingsContextService);
+    readonly activeSection = this.settingsCtx.activeSection;
+
+    private readonly productBranding = inject(WORKSPACE_PRODUCT_BRANDING, {
+        optional: true,
+    });
+
+    readonly osPlayers = computed(() => [
+        /* ...(this.supportsEmbeddedMpv()
+            ? [
+                  {
+                      id: VideoPlayer.EmbeddedMpv,
+                      labelKey: 'SETTINGS.PLAYER_EMBEDDED_MPV',
+                  },
+              ]
+            : []), */
+        {
+            id: VideoPlayer.MPV,
+            labelKey: 'SETTINGS.PLAYER_MPV',
+        },
+        {
+            id: VideoPlayer.VLC,
+            labelKey: 'SETTINGS.PLAYER_VLC',
+        },
+    ]);
+
+    /** Player options */
+    readonly players = computed(() => [
+        {
+            id: VideoPlayer.Html5Player,
+            labelKey: 'SETTINGS.PLAYER_HTML5',
+        },
+        {
+            id: VideoPlayer.VideoJs,
+            labelKey: 'SETTINGS.PLAYER_VIDEOJS',
+        },
+        {
+            id: VideoPlayer.ArtPlayer,
+            labelKey: 'SETTINGS.PLAYER_ARTPLAYER',
+        },
+        ...(this.isDesktop ? this.osPlayers() : []),
+    ]);
+
+    /** Current version of the app */
+    version: string;
+
+    /** Update message to show */
+    updateMessage: string;
+
+    /** EPG availability flag */
+    epgAvailable$ = this.store.select(selectIsEpgAvailable);
+    readonly playlists = this.store.selectSignal(selectAllPlaylistsMeta);
+
+    readonly themeOptions: ThemeOption[] = [
+        {
+            value: Theme.LightTheme,
+            icon: 'light_mode',
+            labelKey: 'THEMES.LIGHT_THEME',
+        },
+        {
+            value: Theme.DarkTheme,
+            icon: 'dark_mode',
+            labelKey: 'THEMES.DARK_THEME',
+        },
+        {
+            value: Theme.SystemTheme,
+            icon: 'desktop_windows',
+            labelKey: 'THEMES.SYSTEM_THEME',
+        },
+    ];
+
+    readonly startupBehaviorOptions: StartupBehaviorOption[] = [
+        {
+            value: StartupBehavior.FirstView,
+            labelKey: 'SETTINGS.STARTUP_BEHAVIOR_FIRST_VIEW',
+        },
+        {
+            value: StartupBehavior.RestoreLastView,
+            labelKey: 'SETTINGS.STARTUP_BEHAVIOR_RESTORE_LAST_VIEW',
+        },
+    ];
+
+    /** Settings form object */
+    settingsForm = this.formBuilder.group({
+        player: [
+            this.productBranding?.defaultVideoPlayer ?? VideoPlayer.VideoJs,
+        ],
+        ...(this.isDesktop ? { epgUrl: new FormArray([]) } : {}),
+        streamFormat:
+            this.productBranding?.defaultStreamFormat ??
+            StreamFormat.M3u8StreamFormat,
+        language:
+            this.productBranding?.defaultLanguage ?? Language.ENGLISH,
+        showCaptions: false,
+        showDashboard: true,
+        startupBehavior: StartupBehavior.FirstView,
+        showExternalPlaybackBar: true,
+        theme: Theme.SystemTheme,
+        mpvPlayerPath: '',
+        mpvReuseInstance: false,
+        vlcPlayerPath: '',
+        remoteControl: false,
+        remoteControlPort: [
+            8765,
+            [
+                Validators.required,
+                Validators.min(1),
+                Validators.max(65535),
+                Validators.pattern(/^\d+$/),
+            ],
+        ],
+    });
+
+    /** Form array with epg sources */
+    epgUrl = this.settingsForm.get('epgUrl') as FormArray;
+
+    /** Local IP addresses for remote control URL display */
+    localIpAddresses = signal<string[]>([]);
+
+    /** Currently visible QR code IP (null = none visible) */
+    visibleQrCodeIp = signal<string | null>(null);
+    readonly isRemovingAllPlaylists = signal(false);
+    readonly isClearingEpgData = signal(false);
+    readonly isExportingData = signal(false);
+    readonly removeAllProgress = signal<DbOperationEvent | null>(null);
+
+    private settingsStore = inject(SettingsStore);
+    private sectionObserver?: IntersectionObserver;
+    private pendingScrollClearTimer: ReturnType<
+        typeof window.setTimeout
+    > | null = null;
+    private pendingScrollClearRoot: HTMLElement | null = null;
+    private pendingScrollEndListener: (() => void) | null = null;
+
+    readonly sectionNavItems: SettingsSection[] = [
+        {
+            id: 'general',
+            label: 'SETTINGS.NAV_GENERAL',
+            icon: 'tune',
+            visible: true,
+        },
+        {
+            id: 'playback',
+            label: 'SETTINGS.NAV_PLAYBACK',
+            icon: 'play_circle',
+            visible: true,
+        },
+        {
+            id: 'epg',
+            label: 'SETTINGS.NAV_EPG',
+            icon: 'calendar_month',
+            visible: this.isDesktop,
+        },
+        {
+            id: 'remote-control',
+            label: 'SETTINGS.NAV_REMOTE',
+            icon: 'smartphone',
+            visible: this.isDesktop,
+        },
+        {
+            id: 'backup',
+            label: 'SETTINGS.NAV_BACKUP',
+            icon: 'backup',
+            visible: true,
+        },
+        {
+            id: 'reset',
+            label: 'SETTINGS.NAV_RESET',
+            icon: 'delete_sweep',
+            visible: true,
+        },
+        {
+            id: 'about',
+            label: 'SETTINGS.NAV_ABOUT',
+            icon: 'info',
+            visible: true,
+        },
+    ];
+
+    readonly playlistDeleteSummary = computed<SettingsPlaylistDeleteSummary>(
+        () => {
+            const items = this.playlists();
+
+            return {
+                total: items.length,
+                m3u: items.filter((item) => !item.serverUrl && !item.macAddress)
+                    .length,
+                xtream: items.filter((item) => Boolean(item.serverUrl)).length,
+                stalker: items.filter((item) => Boolean(item.macAddress))
+                    .length,
+            };
+        }
+    );
+
+    readonly canRemoveAllPlaylists = computed(
+        () =>
+            !this.isRemovingAllPlaylists() &&
+            this.playlistDeleteSummary().total > 0
+    );
+
+    readonly removeAllProgressLabel = computed(() => {
+        if (!this.isRemovingAllPlaylists()) {
+            return null;
+        }
+
+        const progress = this.removeAllProgress();
+        const current = progress?.current;
+        const total = progress?.total;
+
+        if (
+            typeof current === 'number' &&
+            typeof total === 'number' &&
+            total > 0
+        ) {
+            return this.translate.instant('SETTINGS.REMOVE_ALL_PROGRESS', {
+                current,
+                total,
+            });
+        }
+
+        return this.translate.instant('SETTINGS.REMOVE_ALL_IN_PROGRESS');
+    });
+
+    constructor() {
+        effect(
+            () => {
+                const sectionId = this.settingsCtx.pendingScrollTarget();
+                if (!sectionId || typeof document === 'undefined') {
+                    return;
+                }
+
+                const scrollRoot = this.scrollToSection(sectionId);
+                this.schedulePendingScrollTargetClear(scrollRoot);
+            },
+            { injector: this.injector }
+        );
+
+        effect(
+            (onCleanup) => {
+                const activeSectionId = this.activeSection();
+                const activeSectionElement =
+                    this.elementRef.nativeElement.querySelector(
+                        `#${activeSectionId}`
+                    ) as HTMLElement | null;
+
+                if (!activeSectionElement) {
+                    return;
+                }
+
+                const animation = activeSectionElement.animate(
+                    [
+                        {
+                            boxShadow:
+                                'inset 0 0 0 1px var(--settings-group-active-ring), 0 8px 18px -24px var(--settings-group-active-glow)',
+                        },
+                        {
+                            boxShadow:
+                                'inset 0 0 0 1px var(--settings-group-active-ring), 0 12px 22px -24px var(--settings-group-active-glow)',
+                        },
+                        {
+                            boxShadow:
+                                'inset 0 0 0 1px var(--settings-group-active-ring), 0 8px 18px -24px var(--settings-group-active-glow)',
+                        },
+                    ],
+                    {
+                        duration: 260,
+                        easing: 'ease-out',
+                    }
+                );
+
+                onCleanup(() => animation.cancel());
+            },
+            { injector: this.injector }
+        );
+    }
+
+    get sectionNav(): SettingsSection[] {
+        return this.sectionNavItems.filter((section) => section.visible);
+    }
+
+    /**
+     * Reads the config object from the browsers
+     * storage (indexed db)
+     */
+    async ngOnInit(): Promise<void> {
+        // Wait for settings to load before setting the form
+        await this.settingsStore.loadSettings();
+        this.setSettings();
+        /* void this.loadEmbeddedMpvSupport(); */
+        this.checkAppVersion();
+        void this.fetchLocalIpAddresses();
+
+        if (!this.isDialog) {
+            this.settingsCtx.setSections(this.sectionNav);
+        }
+
+        requestAnimationFrame(() => this.setupSectionObserver());
+    }
+
+    /* private async loadEmbeddedMpvSupport(): Promise<void> {
+        if (!this.isDesktop) {
+            this.embeddedMpvSupport.set({
+                supported: false,
+                platform: 'web',
+                reason: 'Embedded MPV requires the Electron desktop build.',
+            });
+            return;
+        }
+
+        if (!window.electron?.getEmbeddedMpvSupport) {
+            this.embeddedMpvSupport.set({
+                supported: false,
+                platform: window.electron.platform,
+                reason: 'Embedded MPV support is not available in this build.',
+            });
+            return;
+        }
+
+        try {
+            this.embeddedMpvSupport.set(
+                await window.electron.getEmbeddedMpvSupport()
+            );
+        } catch (error) {
+            this.embeddedMpvSupport.set({
+                supported: false,
+                platform: window.electron.platform,
+                reason:
+                    error instanceof Error
+                        ? error.message
+                        : String(error),
+            });
+        }
+    } */
+
+    ngOnDestroy(): void {
+        this.cancelPendingScrollTargetClear();
+        this.sectionObserver?.disconnect();
+        this.settingsCtx.reset();
+    }
+
+    /**
+     * Fetches local IP addresses for remote control URL display
+     */
+    async fetchLocalIpAddresses(): Promise<void> {
+        if (window.electron?.getLocalIpAddresses) {
+            const addresses = await window.electron.getLocalIpAddresses();
+            this.localIpAddresses.set(addresses);
+        }
+    }
+
+    /**
+     * Toggle QR code visibility for a given IP address
+     */
+    toggleQrCode(ip: string): void {
+        if (this.visibleQrCodeIp() === ip) {
+            this.visibleQrCodeIp.set(null);
+        } else {
+            this.visibleQrCodeIp.set(ip);
+        }
+    }
+
+    /**
+     * Sets saved settings from the indexed db store
+     */
+    setSettings() {
+        const currentSettings = this.settingsStore.getSettings();
+        this.settingsForm.patchValue(currentSettings);
+
+        if (this.isDesktop && currentSettings.epgUrl) {
+            this.epgUrl.clear();
+            this.setEpgUrls(currentSettings.epgUrl);
+        }
+    }
+
+    selectTheme(theme: Theme): void {
+        if (this.settingsForm.value.theme === theme) {
+            return;
+        }
+
+        this.settingsForm.patchValue({ theme });
+        this.settingsForm.get('theme')?.markAsDirty();
+        this.settingsForm.markAsDirty();
+        this.settingsService.changeTheme(theme);
+    }
+
+    /**
+     * Sets the epg urls to the form array
+     * @param epgUrls urls of the EPG sources
+     */
+    setEpgUrls(epgUrls: string[] | string): void {
+        const URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
+
+        const urls = Array.isArray(epgUrls) ? epgUrls : [epgUrls];
+        const filteredUrls = urls
+            .map((url) => url.trim())
+            .filter((url) => url !== '');
+
+        filteredUrls.forEach((url) => {
+            this.epgUrl.push(
+                new FormControl(url, [Validators.pattern(URL_REGEX)])
+            );
+        });
+    }
+
+    /**
+     * Checks whether the latest version of the application
+     * is used and updates the version message in the
+     * settings UI
+     */
+    checkAppVersion(): void {
+        this.settingsService
+            .getAppVersion()
+            .pipe(take(1))
+            .subscribe((version) => this.showVersionInformation(version));
+    }
+
+    /**
+     * Updates the message in settings UI about the used
+     * version of the app
+     * @param currentVersion current version of the application
+     */
+    showVersionInformation(currentVersion: string): void {
+        const isOutdated = this.isCurrentVersionOutdated(currentVersion);
+
+        if (isOutdated) {
+            this.updateMessage = `${
+                this.translate.instant(
+                    'SETTINGS.NEW_VERSION_AVAILABLE'
+                ) as string
+            }: ${currentVersion}`;
+        } else {
+            this.updateMessage = this.translate.instant(
+                'SETTINGS.LATEST_VERSION'
+            );
+        }
+    }
+
+    /**
+     * Compares actual with latest version of the
+     * application
+     * @param latestVersion latest version
+     * @returns returns true if an update is available
+     */
+    isCurrentVersionOutdated(latestVersion: string): boolean {
+        this.version = this.dataService.getAppVersion();
+        return this.settingsService.isVersionOutdated(
+            this.version,
+            latestVersion
+        );
+    }
+
+    /**
+     * Triggers on form submit and saves the config object to
+     * the indexed db store
+     */
+    onSubmit(): void {
+        this.settingsStore.updateSettings(this.settingsForm.value).then(() => {
+            this.applyChangedSettings();
+
+            if (window.electron) {
+                window.electron.updateSettings(this.settingsForm.value);
+
+                // Set player paths if using external players
+                if (this.settingsForm.value.mpvPlayerPath) {
+                    window.electron.setMpvPlayerPath(
+                        this.settingsForm.value.mpvPlayerPath
+                    );
+                }
+                if (this.settingsForm.value.vlcPlayerPath) {
+                    window.electron.setVlcPlayerPath(
+                        this.settingsForm.value.vlcPlayerPath
+                    );
+                }
+            }
+        });
+        if (this.isDialog) {
+            this.matDialog.closeAll();
+        }
+    }
+
+    /**
+     * Applies the changed settings to the app
+     */
+    applyChangedSettings(): void {
+        this.settingsForm.markAsPristine();
+        if (this.isDesktop) {
+            let epgUrls = this.settingsForm.value.epgUrl;
+            if (epgUrls) {
+                if (!Array.isArray(epgUrls)) {
+                    epgUrls = [epgUrls];
+                }
+                epgUrls = epgUrls.filter((url) => url !== '');
+                if (epgUrls.length > 0) {
+                    // Fetch all EPG URLs at once
+                    this.epgService.fetchEpg(epgUrls);
+                }
+            }
+        }
+        this.translate.use(this.settingsForm.value.language);
+        this.settingsService.changeTheme(
+            this.settingsForm.value.theme ?? Theme.SystemTheme
+        );
+        this.openSettingsSnackbar(
+            this.translate.instant('SETTINGS.SETTINGS_SAVED')
+        );
+    }
+
+    /**
+     * Navigates back to the applications homepage
+     */
+    backToHome(): void {
+        if (this.isDialog) {
+            this.matDialog.closeAll();
+        } else {
+            this.router.navigateByUrl('/');
+        }
+    }
+
+    /**
+     * Force-fetch EPG for a single URL, bypassing the 12-hour freshness check.
+     * The plain fetchEpg would short-circuit on fresh data and click the
+     * refresh button would be a no-op — that's exactly not what the user
+     * intends when clicking "Refresh".
+     */
+    refreshEpg(url: string): void {
+        if (!url || !window.electron?.forceFetchEpg) return;
+        void window.electron.forceFetchEpg(url);
+    }
+
+    /**
+     * Force-fetch every configured EPG URL sequentially. Empty fields are
+     * skipped. Each URL flows through the normal progress panel so the user
+     * gets visible per-URL feedback.
+     */
+    refreshAllEpg(): void {
+        if (!window.electron?.forceFetchEpg) return;
+        const urls = (this.epgUrl.value as string[])
+            .map((url) => url?.trim())
+            .filter((url): url is string => Boolean(url));
+        urls.forEach((url) => window.electron.forceFetchEpg(url));
+    }
+
+    /**
+     * Initializes new entry in form array for EPG URL
+     */
+    addEpgSource(): void {
+        this.epgUrl.insert(
+            this.epgUrl.length,
+            new FormControl('', {
+                validators: [
+                    Validators.pattern(/^(http|https|file):\/\/[^ "]+$/),
+                ],
+            })
+        );
+    }
+
+    /**
+     * Removes entry from form array for EPG URL
+     * @param index index of the item to remove
+     */
+    removeEpgSource(index: number): void {
+        this.epgUrl.removeAt(index);
+        this.settingsForm.markAsDirty();
+    }
+
+    /**
+     * Clears all EPG data from database and immediately re-fetches every
+     * configured URL so the user isn't left staring at an empty state.
+     * Tracks progress with `isClearingEpgData` so the UI can show a spinner
+     * and block double-clicks, and surfaces failures via a dedicated snackbar.
+     */
+    clearEpgData(): void {
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('SETTINGS.CLEAR_EPG_DIALOG.TITLE'),
+            message: this.translate.instant(
+                'SETTINGS.CLEAR_EPG_DIALOG.MESSAGE'
+            ),
+            onConfirm: async (): Promise<void> => {
+                if (
+                    !window.electron?.clearEpgData ||
+                    this.isClearingEpgData()
+                ) {
+                    return;
+                }
+
+                this.isClearingEpgData.set(true);
+                try {
+                    const result = await window.electron.clearEpgData();
+                    if (result && result.success === false) {
+                        throw new Error('Clear EPG returned success=false');
+                    }
+                    this.openSettingsSnackbar(
+                        this.translate.instant('SETTINGS.EPG_DATA_CLEARED')
+                    );
+                    this.refreshAllEpg();
+                } catch (error) {
+                    console.error('Failed to clear EPG data:', error);
+                    this.openSettingsSnackbar(
+                        this.translate.instant('SETTINGS.EPG_DATA_CLEAR_FAILED')
+                    );
+                } finally {
+                    this.isClearingEpgData.set(false);
+                }
+            },
+        });
+    }
+
+    async exportData() {
+        if (this.isExportingData()) {
+            return;
+        }
+
+        this.isExportingData.set(true);
+
+        // Let Angular paint the busy state before the backup build and native
+        // save dialog handoff start.
+        await this.waitForUiFeedbackFrame();
+
+        try {
+            const backup = await this.playlistBackupService.exportBackup();
+
+            if (this.isDesktop && window.electron?.saveFileDialog) {
+                const savePath = await window.electron.saveFileDialog(
+                    backup.defaultFileName,
+                    [
+                        {
+                            name: 'JSON',
+                            extensions: ['json'],
+                        },
+                    ]
+                );
+
+                if (!savePath) {
+                    return;
+                }
+
+                await window.electron.writeFile(savePath, backup.json);
+            } else {
+                const blob = new Blob([backup.json], {
+                    type: 'application/json',
+                });
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = backup.defaultFileName;
+                link.click();
+                window.URL.revokeObjectURL(url);
+            }
+
+            this.openSettingsSnackbar('Playlist backup exported.');
+        } catch (error) {
+            console.error('Failed to export playlist backup:', error);
+            this.openSettingsSnackbar('Playlist backup export failed.');
+        } finally {
+            this.isExportingData.set(false);
+        }
+    }
+
+    importData() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'application/json';
+
+        input.addEventListener('change', async (event: Event) => {
+            const target = event.target as HTMLInputElement;
+            const file = target.files?.[0];
+
+            if (file) {
+                try {
+                    const summary =
+                        await this.playlistBackupService.importBackup(
+                            await file.text()
+                        );
+
+                    if (summary.imported > 0 || summary.merged > 0) {
+                        this.store.dispatch(
+                            PlaylistActions.removeAllPlaylists()
+                        );
+                        this.store.dispatch(PlaylistActions.loadPlaylists());
+                    }
+
+                    this.setSettings();
+                    this.openSettingsSnackbar(
+                        this.buildBackupImportSummary(summary)
+                    );
+
+                    if (summary.errors.length > 0) {
+                        console.error(
+                            'Playlist backup import completed with issues:',
+                            summary.errors
+                        );
+                    }
+                } catch (error) {
+                    console.error('Failed to import playlist backup:', error);
+                    this.openSettingsSnackbar(
+                        error instanceof Error
+                            ? error.message
+                            : this.translate.instant('SETTINGS.IMPORT_ERROR')
+                    );
+                }
+            }
+        });
+
+        input.click();
+    }
+
+    private buildBackupImportSummary(
+        summary: PlaylistBackupImportSummary
+    ): string {
+        return `Backup import finished: ${summary.imported} imported, ${summary.merged} merged, ${summary.skipped} skipped, ${summary.failed} failed.`;
+    }
+
+    private async waitForUiFeedbackFrame(): Promise<void> {
+        if (typeof window.requestAnimationFrame !== 'function') {
+            await Promise.resolve();
+            return;
+        }
+
+        await new Promise<void>((resolve) => {
+            window.requestAnimationFrame(() => resolve());
+        });
+    }
+
+    removeAll(): void {
+        if (!this.canRemoveAllPlaylists()) {
+            return;
+        }
+
+        this.matDialog
+            .open<
+                SettingsDeleteAllPlaylistsDialogComponent,
+                SettingsDeleteAllPlaylistsDialogData,
+                boolean
+            >(SettingsDeleteAllPlaylistsDialogComponent, {
+                autoFocus: false,
+                data: {
+                    summary: this.playlistDeleteSummary(),
+                },
+                maxWidth: 'calc(100vw - 32px)',
+                restoreFocus: true,
+                width: '460px',
+            })
+            .afterClosed()
+            .pipe(take(1))
+            .subscribe((confirmed) => {
+                if (confirmed) {
+                    void this.removeAllConfirmed();
+                }
+            });
+    }
+
+    private async removeAllConfirmed(): Promise<void> {
+        if (this.isRemovingAllPlaylists()) {
+            return;
+        }
+
+        this.isRemovingAllPlaylists.set(true);
+        this.removeAllProgress.set(null);
+
+        await this.waitForUiFeedbackFrame();
+
+        try {
+            const deleted =
+                this.isDesktop && window.electron
+                    ? await this.deleteAllPlaylistsInElectron()
+                    : await this.deleteAllPlaylistsInBrowser();
+
+            if (!deleted) {
+                throw new Error('Delete all playlists returned success=false');
+            }
+
+            this.store.dispatch(PlaylistActions.removeAllPlaylists());
+            this.openSettingsSnackbar(
+                this.translate.instant('SETTINGS.PLAYLISTS_REMOVED')
+            );
+        } catch (error) {
+            console.error('Error removing playlists:', error);
+            this.openSettingsSnackbar(
+                this.translate.instant('SETTINGS.PLAYLISTS_REMOVE_FAILED')
+            );
+        } finally {
+            this.removeAllProgress.set(null);
+            this.isRemovingAllPlaylists.set(false);
+        }
+    }
+
+    private async deleteAllPlaylistsInElectron(): Promise<boolean> {
+        return this.databaseService.deleteAllPlaylists({
+            operationId: this.databaseService.createOperationId(
+                'settings-delete-all-playlists'
+            ),
+            onEvent: (event) => this.handleDeleteAllPlaylistsEvent(event),
+        });
+    }
+
+    private async deleteAllPlaylistsInBrowser(): Promise<boolean> {
+        await firstValueFrom(this.playlistsService.removeAll());
+        return true;
+    }
+
+    private handleDeleteAllPlaylistsEvent(event: DbOperationEvent): void {
+        this.removeAllProgress.set(event);
+    }
+
+    private setupSectionObserver(): void {
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+
+        const scrollRoot = this.getScrollRoot();
+        const contentSections = Array.from(
+            this.elementRef.nativeElement.querySelectorAll(
+                '.settings-group[id]'
+            )
+        ) as HTMLElement[];
+        const sections: ObservedSettingsSection[] = contentSections.map(
+            (section) => ({
+                id: section.id,
+                element: section,
+            })
+        );
+
+        if (sections.length === 0) {
+            return;
+        }
+
+        this.sectionObserver?.disconnect();
+        this.sectionObserver = new IntersectionObserver(
+            () => {
+                if (this.settingsCtx.pendingScrollTarget()) {
+                    return;
+                }
+
+                const activeSection = this.resolveActiveSection(sections);
+                if (activeSection) {
+                    this.settingsCtx.setActiveSection(activeSection);
+                }
+            },
+            {
+                root: scrollRoot,
+                threshold: [0.12, 0.24, 0.4, 0.6],
+                rootMargin: '-18% 0px -52% 0px',
+            }
+        );
+
+        sections.forEach((section) =>
+            this.sectionObserver?.observe(section.element)
+        );
+
+        const initialSection = this.resolveActiveSection(sections);
+        if (initialSection) {
+            this.settingsCtx.setActiveSection(initialSection);
+        }
+    }
+
+    private resolveActiveSection(
+        sections: ObservedSettingsSection[]
+    ): string | null {
+        const scrollRoot = this.getScrollRoot();
+        const rootTop = scrollRoot?.getBoundingClientRect().top ?? 0;
+        const rootHeight = scrollRoot?.clientHeight ?? window.innerHeight;
+        const activationLine = rootTop + Math.min(rootHeight * 0.28, 220);
+        const sectionAtActivationLine = sections.find((section) => {
+            const rect = section.element.getBoundingClientRect();
+            return rect.top <= activationLine && rect.bottom >= activationLine;
+        });
+
+        if (sectionAtActivationLine) {
+            return sectionAtActivationLine.id;
+        }
+
+        const nearestSection = sections
+            .map((section) => ({
+                id: section.id,
+                distance: Math.abs(
+                    section.element.getBoundingClientRect().top - activationLine
+                ),
+            }))
+            .sort((a, b) => a.distance - b.distance)[0];
+
+        return nearestSection?.id ?? null;
+    }
+
+    private getScrollRoot(): HTMLElement | null {
+        return this.elementRef.nativeElement.closest(
+            'main.workspace-content'
+        ) as HTMLElement | null;
+    }
+
+    private schedulePendingScrollTargetClear(
+        scrollRoot: HTMLElement | null
+    ): void {
+        const clearPendingScrollTarget = () => {
+            this.cancelPendingScrollTargetClear();
+            this.settingsCtx.clearPendingScrollTarget();
+        };
+
+        this.cancelPendingScrollTargetClear();
+        this.pendingScrollClearTimer = window.setTimeout(
+            clearPendingScrollTarget,
+            SettingsComponent.PENDING_SCROLL_CLEAR_DELAY_MS
+        );
+        this.pendingScrollClearRoot = scrollRoot;
+        this.pendingScrollEndListener = clearPendingScrollTarget;
+        scrollRoot?.addEventListener?.('scrollend', clearPendingScrollTarget, {
+            once: true,
+        });
+    }
+
+    private cancelPendingScrollTargetClear(): void {
+        if (this.pendingScrollClearTimer) {
+            clearTimeout(this.pendingScrollClearTimer);
+            this.pendingScrollClearTimer = null;
+        }
+
+        if (this.pendingScrollClearRoot && this.pendingScrollEndListener) {
+            this.pendingScrollClearRoot.removeEventListener?.(
+                'scrollend',
+                this.pendingScrollEndListener
+            );
+        }
+
+        this.pendingScrollClearRoot = null;
+        this.pendingScrollEndListener = null;
+    }
+
+    private scrollToSection(sectionId: string): HTMLElement | null {
+        const sectionElement = document.getElementById(sectionId);
+        if (!sectionElement) {
+            return null;
+        }
+
+        const scrollRoot = this.getScrollRoot();
+        if (!scrollRoot) {
+            sectionElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+            return null;
+        }
+
+        const rootRect = scrollRoot.getBoundingClientRect();
+        const sectionRect = sectionElement.getBoundingClientRect();
+        const sectionTop =
+            scrollRoot.scrollTop + (sectionRect.top - rootRect.top);
+        const sectionBottom = sectionTop + sectionRect.height;
+        const visibleTop =
+            scrollRoot.scrollTop + SettingsComponent.SECTION_SCROLL_TOP_GUTTER;
+        const visibleBottom =
+            scrollRoot.scrollTop +
+            scrollRoot.clientHeight -
+            SettingsComponent.SECTION_SCROLL_BOTTOM_GUTTER;
+        let nextScrollTop = scrollRoot.scrollTop;
+
+        if (sectionTop < visibleTop) {
+            nextScrollTop =
+                sectionTop - SettingsComponent.SECTION_SCROLL_TOP_GUTTER;
+        } else if (sectionBottom > visibleBottom) {
+            nextScrollTop =
+                sectionBottom -
+                scrollRoot.clientHeight +
+                SettingsComponent.SECTION_SCROLL_BOTTOM_GUTTER;
+        }
+
+        const maxScrollTop = Math.max(
+            0,
+            scrollRoot.scrollHeight - scrollRoot.clientHeight
+        );
+
+        scrollRoot.scrollTo({
+            top: Math.min(Math.max(nextScrollTop, 0), maxScrollTop),
+            behavior: 'smooth',
+        });
+
+        return scrollRoot;
+    }
+
+    private openSettingsSnackbar(
+        message: string,
+        config: MatSnackBarConfig = {}
+    ): void {
+        this.snackBar.open(message, undefined, {
+            duration: 2000,
+            horizontalPosition: 'center',
+            verticalPosition: 'bottom',
+            panelClass: ['settings-snackbar'],
+            ...config,
+        });
+    }
+}
diff --git a/apps/web/src/assets/.gitkeep b/apps/web/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/web/src/assets/i18n/ar.json b/apps/web/src/assets/i18n/ar.json
new file mode 100644
index 0000000..6f5feb8
--- /dev/null
+++ b/apps/web/src/assets/i18n/ar.json
@@ -0,0 +1,428 @@
+{
+    "CLOSE": "إغلاق",
+    "PLAYLISTS": "قوائم التشغيل",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "يرجى اختيار قائمة تشغيل من القائمة أو إضافة قائمة جديدة",
+        "TABS": {
+            "RECENTLY_ADDED": "قوائم التشغيل المضافة مؤخرًا",
+            "FILE_UPLOAD": "إضافة عبر تحميل ملف",
+            "URL_UPLOAD": "إضافة عبر رابط URL",
+            "TEXT_IMPORT": "استيراد من نص",
+            "XTREME_IMPORT": "إضافة Xtreme Code",
+            "STALKER_PORTAL_IMPORT": "إضافة Stalker Portal"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "لم تُضف أي قوائم تشغيل",
+            "ADD_FIRST": "يرجى إضافة أول قائمة تشغيل",
+            "WELCOME_TITLE": "مرحبًا بك في IPTVnator",
+            "WELCOME_DESCRIPTION": "ابدأ رحلة البث بإضافة قائمة التشغيل الأولى. اتصل بخدمة IPTV المفضلة لديك واستمتع بالتلفزيون المباشر والأفلام والمسلسلات.",
+            "ADD_YOUR_FIRST": "أضف قائمة التشغيل الأولى",
+            "FEATURE_M3U": "ملفات M3U/M3U8",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "بوابة Stalker",
+            "NO_RESULTS_TITLE": "لم يتم العثور على قوائم تشغيل",
+            "NO_RESULTS_DESCRIPTION": "لا توجد قوائم تشغيل تطابق بحثك. حاول تعديل مصطلحات البحث أو امسح الفلتر لرؤية جميع القوائم.",
+            "ADDED_VIA_URL": "تمت الإضافة عبر رابط URL. الرابط:",
+            "ADDED_VIA_FILE": "تمت الإضافة عبر تحميل ملف",
+            "XTREAM_PLAYLIST": "قائمة تشغيل Xtream",
+            "STALKER_PORTAL": "بوابة Stalker",
+            "CHANNELS": "القنوات",
+            "ADDED": "تمت الإضافة",
+            "SHOW_DETAILS": "عرض تفاصيل القائمة",
+            "REMOVE": "حذف القائمة",
+            "SEARCH_PLAYLISTS": "البحث عن قوائم التشغيل حسب العنوان",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "تفاصيل قائمة التشغيل",
+                "TITLE": "العنوان",
+                "FROM_URL": "تمت الإضافة من الرابط",
+                "IMPORT_DATE": "تاريخ الاستيراد",
+                "CHANNELS": "عدد القنوات",
+                "CLOSE": "إغلاق",
+                "SAVE": "حفظ",
+                "USER_AGENT": "وكيل المستخدم",
+                "ORIGINAL_FILENAME": "اسم الملف الأصلي",
+                "FILE_PATH": "مسار الملف",
+                "UPDATE_FAILED": "فشل تحديث القائمة الأخيرة",
+                "AUTO_UPDATE": "التحديث التلقائي",
+                "AUTO_UPDATE_DESCRIPTION": "إذا تم تفعيل التحديث التلقائي، ستُحدَّث القائمة تلقائيًا عند كل تشغيل للتطبيق.",
+                "CUSTOM_USER_AGENT": "قد تتطلب بعض خدمات IPTV وكيل مستخدم محدد لتشغيل قوائم التشغيل.",
+                "EXPORT_PLAYLIST": "تصدير القائمة كملف M3U",
+                "SERVER_URL": "رابط الخادم",
+                "USERNAME": "اسم المستخدم",
+                "PASSWORD": "كلمة المرور",
+                "MAC_ADDRESS": "عنوان MAC",
+                "PLAYLIST_EXPORT_SUCCESS": "تم تصدير القائمة بنجاح.",
+                "PLAYLIST_EXPORT_ERROR": "خطأ: فشل تصدير القائمة."
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "حذف القائمة",
+                "MESSAGE": "هل أنت متأكد من رغبتك في حذف هذه القائمة نهائيًا؟",
+                "SUCCESS": "تم حذف القائمة بنجاح"
+            },
+            "UPDATED": "تم التحديث",
+            "REFRESH": "تحديث القائمة",
+            "GLOBAL_FAVORITES": "المفضلة العامة",
+            "GLOBAL_FAVORITES_DESCRIPTION": "قائمة تلقائية تجمع القنوات المفضلة من جميع القوائم",
+            "MY_PLAYLISTS": "قوائم التشغيل الخاصة بي",
+            "MY_PLAYLISTS_SUBTITLE": "جميع القوائم المتاحة",
+            "PLAYLIST_UPDATE_SUCCESS": "نجاح! تم تحديث القائمة.",
+            "PLAYLIST_UPDATE_ERROR": "خطأ في تحديث تفاصيل القائمة.",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "اسحب وأفلت الملفات هنا",
+            "OR": "أو",
+            "CHOOSE_PLAYLIST": "اختر قائمة تشغيل",
+            "REJECTED": "تم رفض الملف، تنسيق غير مدعوم {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "رابط قائمة التشغيل (M3U/M3U8)",
+            "ADD_PLAYLIST": "إضافة القائمة",
+            "CORS_NOTE": "ملاحظة: لتجنب مشاكل CORS، يستخدم التطبيق خدمة بروكسي عامة. يُنصح باستيراد القوائم الحساسة عبر الملفات."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "إدراج قائمة تشغيل M3U(8) كنص",
+            "BUTTON_LABEL": "استيراد"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "عنوان القائمة",
+            "SERVER_URL": "رابط الخادم",
+            "USERNAME": "اسم المستخدم",
+            "PASSWORD": "كلمة المرور",
+            "ADD": "إضافة",
+            "TEST_CREDENTIALS": "اختبار بيانات الاعتماد",
+            "URL_VALIDATION_ERROR": "يجب أن يكون الرابط صالحًا مع بروتوكول (مثال: http://example.com)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "العنوان",
+            "MAC_ADDRESS": "عنوان MAC",
+            "SERVER_URL": "رابط الخادم",
+            "URL_VALIDATION_ERROR": "يجب أن يكون الرابط صالحًا مع بروتوكول (مثال: http://example.com/stalker_portal)",
+            "ADD": "إضافة"
+        },
+        "FILTER_BY_NAME": "التصفية حسب الاسم",
+        "FILTER_BY_TYPE": "التصفية حسب النوع",
+        "SORT_PLAYLISTS": "فرز القوائم",
+        "SORT_BY": "ترتيب حسب",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "الاسم (أ-ي)",
+            "NAME_DESC": "الاسم (ي-أ)",
+            "NEWEST": "تاريخ الإضافة (الأحدث أولاً)",
+            "OLDEST": "تاريخ الإضافة (الأقدم أولاً)"
+        },
+        "IMPORTED_AS_TEXT": "مستوردة كنص",
+        "PARSING_ERROR": "خطأ: فشل التحليل، ليست قائمة تشغيل صالحة:"
+    },
+    "SETTINGS": {
+        "TITLE": "الإعدادات",
+        "SUBTITLE": "تعديل تكوين التطبيق",
+        "DESCRIPTION": "يرجى ضبط الخيارات أدناه ثم النقر على حفظ التغييرات",
+        "EPG_URL_LABEL": "رابط EPG (XML/XML.GZ)",
+        "EPG_URL_PLACEHOLDER": "أدخل رابطًا",
+        "REFRESH_EPG": "تحديث EPG",
+        "REFRESH_ALL_EPG": "تحديث الكل",
+        "REMOVE_EPG_SOURCE": "إزالة مصدر EPG",
+        "EPG_STATUS_FRESH": "محدث",
+        "EPG_STATUS_STALE": "يحتاج تحديث",
+        "EPG_STATUS_ERROR": "فشل",
+        "VIDEO_PLAYER_LABEL": "مشغل الفيديو",
+        "VIDEO_PLAYER_PLACEHOLDER": "اختر خيارًا",
+        "VERSION": "الإصدار",
+        "SAVE_CHANGES": "حفظ التغييرات",
+        "BACK_TO_HOME": "العودة للرئيسية",
+        "NEW_VERSION_AVAILABLE": "إصدار جديد متاح",
+        "LATEST_VERSION": "أنت تستخدم الإصدار الأحدث",
+        "LANGUAGE": "اللغة",
+        "SETTINGS_SAVED": "نجاح! تم حفظ الإعدادات.",
+        "THEME": "السمة البصرية",
+        "SHOW_CAPTIONS": "عرض الترجمات",
+        "ADD_EPG_SOURCE": "إضافة مصدر EPG",
+        "EPG_URL_ERROR": "القيمة ليست رابطًا صالحًا",
+        "VIDEO_PLAYER_DESCRIPTION": "اختر مشغل الفيديو الافتراضي",
+        "LANGUAGE_DESCRIPTION": "اختر لغة التطبيق",
+        "THEME_DESCRIPTION": "اختر السمة البصرية للتطبيق",
+        "SHOW_CAPTIONS_DESCRIPTION": "عرض أو إخفاء الترجمات افتراضيًا",
+        "VERSION_DESCRIPTION": "الإصدار الحالي للتطبيق",
+        "EPG_NOTE": "الـ EPG متاح فقط في نسخة Electron من التطبيق.",
+        "EPG_NOTE_URL_TEXT": "تحقق من هنا",
+        "IMPORT_EXPORT_DATA": "استيراد/تصدير القوائم",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "تصدير أو استيراد القوائم بتنسيق JSON.",
+        "IMPORT_DATA": "استيراد",
+        "EXPORT_DATA": "تصدير",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "خطأ في الاستيراد، يرجى تجربة ملف آخر.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "مسار مشغل MPV",
+        "MPV_PLAYER_PATH_DESCRIPTION": "حدد مسار مشغل MPV في نظامك.",
+        "MPV_PLAYER_PATH": "مسار مشغل MPV",
+        "VLC_PLAYER_PATH_LABEL": "مسار VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "حدد مسار مشغل VLC في نظامك.",
+        "VLC_PLAYER_PATH": "مسار مشغل VLC",
+        "REMOTE_CONTROL": "التحكم عن بعد",
+        "REMOTE_CONTROL_DESCRIPTION": "تمكين التحكم عن بعد للتطبيق.",
+        "REMOTE_CONTROL_PORT": "منفذ التحكم عن بعد",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "المنفذ المستخدم للتحكم عن بعد (الافتراضي: 8765).",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "السمة الداكنة",
+        "LIGHT_THEME": "السمة الفاتحة",
+        "SYSTEM_THEME": "سمة النظام"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "البحث عن قناة",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "تحميل أو اختيار قائمة أخرى",
+        "ALL_CHANNELS": "جميع القنوات",
+        "GROUPS": "المجموعات",
+        "UNGROUPED": "غير مصنفة",
+        "UNNAMED_CHANNEL": "قناة بدون اسم",
+        "FAVORITES": "المفضلة",
+        "NO_FAVORITES": "لا توجد قنوات مفضلة",
+        "USE_STAR_TO_FAVORITE": "استخدم أيقونة النجمة لإضافة قنوات للمفضلة.",
+        "REMOVE_FAVORITE": "إزالة من المفضلة",
+        "FAVORITES_UPDATED": "تم تحديث المفضلة!",
+        "SORT_BY": "ترتيب حسب",
+        "SORT_BY_DATE": "تاريخ الإضافة (الأحدث أولاً)",
+        "SORT_BY_RATING": "التقييم",
+        "SORT_BY_NAME": "الاسم (أ-ي)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "فتح قائمة القنوات",
+        "TOGGLE_FAVORITE_FLAG": "تبديل حالة المفضلة",
+        "OPEN_EPG_LIST": "فتح قائمة EPG",
+        "OPEN_MULTI_EPG": "فتح عرض Multi-EPG"
+    },
+    "EPG": {
+        "TITLE": "الدليل الإلكتروني للبرامج",
+        "NEXT_DAY": "اليوم التالي",
+        "PREVIOUS_DAY": "اليوم السابق",
+        "LIVE_NOW": "يُبث الآن",
+        "LIVE_STREAM": "بث مباشر",
+        "TIMESHIFT_AVAILABLE": "التحريك الزمني متاح، انقر للتشغيل",
+        "EPG_NOT_AVAILABLE_DATE": "عذراً، الدليل غير متاح لهذا التاريخ",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "عذراً، الدليل غير متاح لهذه القناة",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "يرجى إضافة/تعديل رابط EPG في إعدادات التطبيق.",
+        "FETCH_EPG": "جارٍ جلب بيانات EPG...",
+        "ERROR": "عذراً، فشل تحميل الدليل.",
+        "DOWNLOAD_SUCCESS": "تم تنزيل الدليل بنجاح.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "تفاصيل البرنامج",
+            "TITLE": "العنوان",
+            "CATEGORY": "الفئة",
+            "PARENTAL_RATING_SYSTEM": "نظام تقييم المحتوى",
+            "DESCRIPTION": "الوصف",
+            "LANGUAGE": "اللغة",
+            "SHOW_PROGRAM_DETAILS": "عرض تفاصيل البرنامج"
+        },
+        "FETCH_SUCCESS": "تم جلب الدليل بنجاح."
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "نعم",
+    "NO": "لا",
+    "MENU": {
+        "OPEN": "فتح القائمة",
+        "SUPPORT_ARIA": "دعم IPTVnator على GitHub",
+        "SETTINGS": "الإعدادات",
+        "SETTINGS_ARIA": "فتح الإعدادات",
+        "BUG_REPORT": "ابلاغ عن خلل",
+        "WHAT_IS_NEW": "ما الجديد",
+        "ABOUT": "حول",
+        "ABOUT_ARIA": "حول التطبيق",
+        "SUPPORT_PROJECT": "دعم المشروع"
+    },
+    "ABOUT": {
+        "TITLE": "حول IPTVnator",
+        "DESCRIPTION": "تطبيق مشغل IPTV متعدد المنصات مع ميزات مثل دعم قوائم M3U/M3U8، المفضلة، الدليل التلفزيوني، الأرشيف، والمزيد.",
+        "VERSION": "الإصدار",
+        "GITHUB_TOOLTIP": "مستودع IPTVnator على GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "اشتري لي قهوة",
+        "TWITTER_TOOLTIP": "مشاركة على تويتر"
+    },
+    "UPDATE_AVAILABLE": "تحديث متاح",
+    "REFRESH": "تحديث",
+    "XTREAM": {
+        "PLAY": "تشغيل",
+        "NAME": "الاسم",
+        "RELEASE_DATE": "تاريخ الإصدار",
+        "GENRE": "النوع",
+        "COUNTRY": "البلد",
+        "ACTORS": "الممثلون",
+        "DIRECTOR": "المخرج",
+        "DURATION": "المدة",
+        "CAST": "طاقم العمل",
+        "EPISODE_RUN_TIME": "مدة الحلقة",
+        "RATING": "التقييم",
+        "IMDB_RATING": "تقييم IMDB",
+        "KINOPOISK_RATING": "تقييم Kinopoisk",
+        "DESCRIPTION": "الوصف",
+        "YEAR": "السنة",
+        "AGE": "العمر",
+        "YOUTUBE_TRAILER": "تريلر يوتيوب",
+        "EPISODE": "الحلقة"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "جميع الفئات",
+        "MY_FAVORITES": "المفضلة",
+        "ADD_TO_FAVORITES": "إضافة للمفضلة",
+        "REMOVE_FROM_FAVORITES": "إزالة من المفضلة",
+        "REMOVED_FROM_FAVORITES": "تمت الإزالة من المفضلة",
+        "ADDED_TO_FAVORITES": "تمت الإضافة للمفضلة",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "انتهاء صلاحية الحساب",
+                "DESCRIPTION": "انتهت صلاحية هذا الحساب. يرجى التحقق من بيانات الاعتماد في إعدادات القائمة أو حذفها."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "غير مصرح",
+                "DESCRIPTION": "يرجى التحقق من بيانات الاعتماد في إعدادات القائمة أو حذفها."
+            },
+            "NOT_FOUND": {
+                "TITLE": "البوابة غير موجودة",
+                "DESCRIPTION": "يرجى التحقق من بيانات الاعتماد ورابط البوابة في إعدادات القائمة أو حذفها."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "فئة فارغة",
+                "DESCRIPTION": "هذه الفئة لا تحتوي على محتوى، يرجى اختيار فئة أخرى أو تغيير نوع المحتوى."
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "حدث خطأ",
+                "DESCRIPTION": "خطأ غير معروف، يرجى المحاولة لاحقًا."
+            },
+            "PLAYLIST_SETTINGS": "إعدادات القائمة",
+            "HOME": "الرئيسية",
+            "DELETE": "حذف"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "لم يتم العثور على نتائج، حاول تغيير طلب البحث"
+        },
+        "STREAM_URL_COPIED": "تم نسخ رابط البث إلى الحافظة",
+        "COPY_STREAM_URL": "نسخ رابط البث",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "تم العثور على {{count}} نتيجة",
+            "NO_RESULTS_FOR": "لم يتم العثور على نتائج لـ \"{{term}}\""
+        }
+    },
+    "INFORMATION": "معلومات",
+    "REMOTE_CONTROL": {
+        "TITLE": "التحكم عن بعد",
+        "UP_CHANNEL": "القناة السابقة",
+        "DOWN_CHANNEL": "القناة التالية",
+        "HEADER": "التحكم عن بعد في IPTVNator",
+        "FOOTER": "التحكم عن بعد في IPTVNator"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/ary.json b/apps/web/src/assets/i18n/ary.json
new file mode 100644
index 0000000..e81849c
--- /dev/null
+++ b/apps/web/src/assets/i18n/ary.json
@@ -0,0 +1,420 @@
+{
+    "CLOSE": "سد",
+    "PLAYLISTS": "قوائم التشغيل",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "عفاك اختار شي قائمة تشغيل من الليستا ولا زيد قائمة جديدة",
+        "TABS": {
+            "RECENTLY_ADDED": "قوائم التشغيل اللي تزادو مؤخراً",
+            "FILE_UPLOAD": "زيد عن طريق رفع ملف",
+            "URL_UPLOAD": "زيد عن طريق رابط",
+            "TEXT_IMPORT": "استورد من نص",
+            "XTREME_IMPORT": "زيد كود Xtreme",
+            "STALKER_PORTAL_IMPORT": "زيد بوابة Stalker"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "ما تزادت حتى شي قائمة تشغيل",
+            "ADD_FIRST": "عفاك زيد قائمة التشغيل الأولى ديالك",
+            "ADDED_VIA_URL": "تزادت عن طريق رابط. رابط:",
+            "ADDED_VIA_FILE": "تزادت عن طريق رفع ملف",
+            "XTREAM_PLAYLIST": "قائمة تشغيل Xtream",
+            "STALKER_PORTAL": "بوابة Stalker",
+            "CHANNELS": "القنوات",
+            "ADDED": "تزادت",
+            "SHOW_DETAILS": "وري تفاصيل قائمة التشغيل",
+            "REMOVE": "حيد قائمة التشغيل",
+            "SEARCH_PLAYLISTS": "قلب على قوائم التشغيل بالعنوان",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "تفاصيل قائمة التشغيل",
+                "TITLE": "العنوان",
+                "FROM_URL": "تزادت من الرابط",
+                "IMPORT_DATE": "تاريخ الاستيراد",
+                "CHANNELS": "عدد القنوات",
+                "CLOSE": "سد",
+                "SAVE": "حفظ",
+                "USER_AGENT": "وكيل المستخدم",
+                "ORIGINAL_FILENAME": "اسم الملف الأصلي",
+                "FILE_PATH": "مسار الملف",
+                "UPDATE_FAILED": "التحديث الأخير ديال قائمة التشغيل فشل",
+                "AUTO_UPDATE": "تحديث تلقائي",
+                "AUTO_UPDATE_DESCRIPTION": "إلى كانت خاصية التحديث التلقائي مفعّلة، قائمة التشغيل غادي تتحدث أوتوماتيكياً كل مرة كيتحل التطبيق.",
+                "CUSTOM_USER_AGENT": "بعض مزودي IPTV كيحتاجو وكيل مستخدم محدد باش يخدمو قائمة التشغيل ديالهم.",
+                "EXPORT_PLAYLIST": "صدّر قائمة التشغيل على شكل m3u",
+                "SERVER_URL": "رابط الخادم",
+                "USERNAME": "اسم المستخدم",
+                "PASSWORD": "كلمة المرور",
+                "MAC_ADDRESS": "عنوان MAC",
+                "PLAYLIST_EXPORT_SUCCESS": "قائمة التشغيل تصدرات بنجاح.",
+                "PLAYLIST_EXPORT_ERROR": "خطأ: تصدير قائمة التشغيل فشل."
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "حيد قائمة التشغيل",
+                "MESSAGE": "واش متأكد بغيتي تحيد قائمة التشغيل هادي بالكامل؟",
+                "SUCCESS": "قائمة التشغيل تحيدات بنجاح"
+            },
+            "UPDATED": "تحدثات",
+            "REFRESH": "حدث قائمة التشغيل",
+            "GLOBAL_FAVORITES": "المفضلة العامة",
+            "GLOBAL_FAVORITES_DESCRIPTION": "قائمة تشغيل كتتولد أوتوماتيكياً فيها المفضلة المجمعة من جميع قوائم التشغيل",
+            "MY_PLAYLISTS": "قوائم التشغيل ديالي",
+            "MY_PLAYLISTS_SUBTITLE": "جميع قوائم التشغيل المتوفرة",
+            "PLAYLIST_UPDATE_SUCCESS": "نجاح! قائمة التشغيل تحدثات بنجاح.",
+            "PLAYLIST_UPDATE_ERROR": "خطأ في تحديث تفاصيل قائمة التشغيل.",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "جر وأفلت الملفات هنا",
+            "OR": "أو",
+            "CHOOSE_PLAYLIST": "اختار قائمة تشغيل",
+            "REJECTED": "الملف ترفض، صيغة الملف غير مدعومة {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "رابط قائمة التشغيل (m3u, m3u8)",
+            "ADD_PLAYLIST": "زيد قائمة التشغيل",
+            "CORS_NOTE": "ملاحظة: باش نتفاداو مشاكل CORS فهاد المرحلة، التطبيق كيستعمل خدمة وكيل CORS عامة. إلى بغيتي ترفع قائمة تشغيل فيها بيانات حساسة، من الأحسن تستوردها من ملف."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "دخل قائمة تشغيل m3u(8) على شكل نص",
+            "BUTTON_LABEL": "استورد"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "عنوان قائمة التشغيل",
+            "SERVER_URL": "رابط الخادم",
+            "USERNAME": "اسم المستخدم",
+            "PASSWORD": "كلمة المرور",
+            "ADD": "زيد",
+            "TEST_CREDENTIALS": "جرب بيانات الاعتماد",
+            "URL_VALIDATION_ERROR": "خاص يكون رابط صحيح مع البروتوكول (مثلا http://example.com ولا https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "العنوان",
+            "MAC_ADDRESS": "عنوان MAC",
+            "SERVER_URL": "رابط الخادم",
+            "URL_VALIDATION_ERROR": "خاص يكون رابط صحيح مع البروتوكول (مثلا http://example.com/c ولا https://example.com/stalker_portal/c)",
+            "ADD": "زيد"
+        },
+        "FILTER_BY_NAME": "فلتر بالاسم",
+        "FILTER_BY_TYPE": "فلتر بالنوع",
+        "SORT_PLAYLISTS": "رتب قوائم التشغيل",
+        "SORT_BY": "رتب بـ",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "الاسم (أ-ي)",
+            "NAME_DESC": "الاسم (ي-أ)",
+            "NEWEST": "تاريخ الإضافة (الأحدث أولاً)",
+            "OLDEST": "تاريخ الإضافة (الأقدم أولاً)"
+        },
+        "IMPORTED_AS_TEXT": "استورد كنص",
+        "PARSING_ERROR": "خطأ: التحليل فشل، ماشي قائمة تشغيل صحيحة:"
+    },
+    "SETTINGS": {
+        "TITLE": "الإعدادات",
+        "SUBTITLE": "بدل إعدادات التطبيق",
+        "DESCRIPTION": "عفاك بدل الخيارات من الليستا لتحت وأكد بضغط على زر حفظ التغييرات",
+        "EPG_URL_LABEL": "رابط EPG (*.xml ولا *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "دخل رابط",
+        "REFRESH_EPG": "حدث EPG",
+        "REFRESH_ALL_EPG": "حدث الكل",
+        "REMOVE_EPG_SOURCE": "زول مصدر EPG",
+        "EPG_STATUS_FRESH": "محدث",
+        "EPG_STATUS_STALE": "خاصو يتحدث",
+        "EPG_STATUS_ERROR": "فشل",
+        "VIDEO_PLAYER_LABEL": "مشغل الفيديو",
+        "VIDEO_PLAYER_PLACEHOLDER": "اختار خيار",
+        "VERSION": "الإصدار",
+        "SAVE_CHANGES": "حفظ التغييرات",
+        "BACK_TO_HOME": "رجوع",
+        "NEW_VERSION_AVAILABLE": "كاين إصدار جديد متوفر",
+        "LATEST_VERSION": "راك تستعمل أحدث إصدار",
+        "LANGUAGE": "اللغة",
+        "SETTINGS_SAVED": "نجاح! الإعدادات تحفضو.",
+        "THEME": "المظهر المرئي",
+        "SHOW_CAPTIONS": "وري الترجمة",
+        "ADD_EPG_SOURCE": "زيد مصدر EPG",
+        "EPG_URL_ERROR": "القيمة ماشي رابط صحيح",
+        "VIDEO_PLAYER_DESCRIPTION": "اختار مشغل الفيديو الافتراضي",
+        "LANGUAGE_DESCRIPTION": "اختار لغة التطبيق",
+        "THEME_DESCRIPTION": "اختار المظهر المرئي للتطبيق",
+        "SHOW_CAPTIONS_DESCRIPTION": "وري ولا خفي الترجمة افتراضياً",
+        "VERSION_DESCRIPTION": "الإصدار الحالي ديال التطبيق",
+        "EPG_NOTE": "EPG متوفر حالياً غير في الإصدار اللي مبني على electron ديال IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "شوف هنا",
+        "IMPORT_EXPORT_DATA": "استورد/صدّر قوائم التشغيل",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "صدّر ولا استورد قوائم التشغيل بصيغة JSON اللي كيستعملها التطبيق.",
+        "IMPORT_DATA": "استورد",
+        "EXPORT_DATA": "صدّر",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "خطأ في الاستيراد، عفاك جرب بملف آخر.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "مسار mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "حدد مسار مشغل mpv في السيستيم ديالك. غادي يستعمل المسار اللي عطيتيه لملف mpv بدل اللي كيتلقى في $PATH.",
+        "MPV_PLAYER_PATH": "مسار مشغل mpv",
+        "VLC_PLAYER_PATH_LABEL": "مسار VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "حدد مسار مشغل VLC في السيستيم ديالك. غادي يستعمل المسار اللي عطيتيه لملف VLC بدل المسار الافتراضي ديال السيستيم ديالنا.",
+        "VLC_PLAYER_PATH": "مسار مشغل VLC",
+        "REMOTE_CONTROL": "التحكم عن بعد",
+        "REMOTE_CONTROL_DESCRIPTION": "فعل التحكم عن بعد للتطبيق.",
+        "REMOTE_CONTROL_PORT": "منفذ التحكم عن بعد",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "المنفذ اللي كيتستعمل للتحكم عن بعد للتطبيق. المنفذ 3000 كيتستعمل افتراضياً.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "المظهر الداكن",
+        "LIGHT_THEME": "المظهر الفاتح",
+        "SYSTEM_THEME": "مظهر النظام"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "قلب على قناة",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "رفع ولا اختار قائمة تشغيل أخرى",
+        "ALL_CHANNELS": "جميع القنوات",
+        "GROUPS": "المجموعات",
+        "UNGROUPED": "غير مجمعة",
+        "UNNAMED_CHANNEL": "قناة بدون اسم",
+        "FAVORITES": "المفضلة",
+        "NO_FAVORITES": "مازال ما كاينش مفضلة",
+        "USE_STAR_TO_FAVORITE": "عفاك استعمل رمز 'النجمة' باش تزيد قنوات للمفضلة ديالك.",
+        "REMOVE_FAVORITE": "حيد من المفضلة",
+        "FAVORITES_UPDATED": "المفضلة تحدثات!",
+        "SORT_BY": "رتب بـ",
+        "SORT_BY_DATE": "رتب بتاريخ الإضافة (الأحدث أولاً)",
+        "SORT_BY_RATING": "رتب بالتقييم",
+        "SORT_BY_NAME": "رتب بالاسم (أ-ي)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "حل قائمة القنوات",
+        "TOGGLE_FAVORITE_FLAG": "بدل علامة المفضلة",
+        "OPEN_EPG_LIST": "حل قائمة EPG",
+        "OPEN_MULTI_EPG": "حل عرض EPG المتعدد"
+    },
+    "EPG": {
+        "TITLE": "دليل البرامج الإلكتروني",
+        "NEXT_DAY": "اليوم التالي",
+        "PREVIOUS_DAY": "اليوم السابق",
+        "LIVE_NOW": "مباشر الآن",
+        "LIVE_STREAM": "بث مباشر",
+        "TIMESHIFT_AVAILABLE": "التأجيل الزمني متوفر، ضغط باش تلعب",
+        "EPG_NOT_AVAILABLE_DATE": "أوه، EPG ما متوفرش للتاريخ اللي اختاريتيه",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "أوه، EPG ما متوفرش لهاد القناة.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "عفاك زيد/بدل رابط قائمة EPG في إعدادات التطبيق.",
+        "FETCH_EPG": "جاري جلب بيانات EPG...",
+        "ERROR": "أوه، EPG ما قدرش يتشارجا.",
+        "DOWNLOAD_SUCCESS": "EPG تشارجا بنجاح.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "تفاصيل حول البرنامج التلفزيوني",
+            "TITLE": "العنوان",
+            "CATEGORY": "الفئة",
+            "PARENTAL_RATING_SYSTEM": "نظام تقييم المحتوى التلفزيوني",
+            "DESCRIPTION": "الوصف",
+            "LANGUAGE": "اللغة",
+            "SHOW_PROGRAM_DETAILS": "وري تفاصيل حول هاد البرنامج"
+        },
+        "FETCH_SUCCESS": "EPG تجلب بنجاح"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "آه",
+    "NO": "لا",
+    "MENU": {
+        "OPEN": "حل القائمة",
+        "SUPPORT_ARIA": "دعم IPTVnator على GitHub",
+        "SETTINGS": "الإعدادات",
+        "SETTINGS_ARIA": "حل الإعدادات",
+        "BUG_REPORT": "بلغ على شي مشكل",
+        "WHAT_IS_NEW": "شنو الجديد",
+        "ABOUT": "حول",
+        "ABOUT_ARIA": "حول التطبيق",
+        "SUPPORT_PROJECT": "دعم المشروع"
+    },
+    "ABOUT": {
+        "TITLE": "حول IPTVnator",
+        "DESCRIPTION": "تطبيق مشغل IPTV متعدد المنصات فيه بزاف ديال الميزات، بحال دعم قوائم تشغيل m3u و m3u8، المفضلة، دليل التلفزيون، الأرشيف التلفزيوني/الإعادة والمزيد.",
+        "VERSION": "الإصدار",
+        "GITHUB_TOOLTIP": "مستودع IPTVnator على GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "شري ليا قهوة",
+        "TWITTER_TOOLTIP": "شارك على تويتر"
+    },
+    "UPDATE_AVAILABLE": "تحديث متوفر",
+    "REFRESH": "حدث",
+    "XTREAM": {
+        "PLAY": "لعب",
+        "NAME": "الاسم",
+        "RELEASE_DATE": "تاريخ الإصدار",
+        "GENRE": "النوع",
+        "COUNTRY": "البلد",
+        "ACTORS": "الممثلون",
+        "DIRECTOR": "المخرج",
+        "DURATION": "المدة",
+        "CAST": "طاقم التمثيل",
+        "EPISODE_RUN_TIME": "مدة تشغيل الحلقة",
+        "RATING": "التقييم",
+        "IMDB_RATING": "تقييم IMDB",
+        "KINOPOISK_RATING": "تقييم Kinopoisk",
+        "DESCRIPTION": "الوصف",
+        "YEAR": "السنة",
+        "AGE": "العمر",
+        "YOUTUBE_TRAILER": "مقطع دعائي على يوتيوب",
+        "EPISODE": "الحلقة"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "جميع الفئات",
+        "MY_FAVORITES": "المفضلة ديالي",
+        "ADD_TO_FAVORITES": "زيد للمفضلة",
+        "REMOVE_FROM_FAVORITES": "حيد من المفضلة",
+        "REMOVED_FROM_FAVORITES": "تحيد من المفضلة",
+        "ADDED_TO_FAVORITES": "تزاد للمفضلة",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "الحساب انتهى",
+                "DESCRIPTION": "هاد الحساب انتهت صلاحيته. عفاك تحقق من بيانات الاعتماد في إعدادات قائمة التشغيل ولا حيدها."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "غير مصرح",
+                "DESCRIPTION": "عفاك تحقق من بيانات الاعتماد في إعدادات قائمة التشغيل ولا حيدها."
+            },
+            "NOT_FOUND": {
+                "TITLE": "البوابة ما تلقاتش",
+                "DESCRIPTION": "عفاك تحقق من بيانات الاعتماد ورابط البوابة في إعدادات قائمة التشغيل ولا حيدها."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "فئة فارغة",
+                "DESCRIPTION": "هاد الفئة ما فيهاش محتوى، عفاك اختار فئة أخرى ولا بدل نوع المحتوى."
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "وقع شي خطأ",
+                "DESCRIPTION": "خطأ غير معروف، عفاك حاول مرة أخرى من بعد."
+            },
+            "PLAYLIST_SETTINGS": "إعدادات قائمة التشغيل",
+            "HOME": "الرئيسية",
+            "DELETE": "حذف"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "ما تلقى والو، حاول تبدل طلب البحث ديالك"
+        },
+        "STREAM_URL_COPIED": "رابط البث تنقل للحافظة",
+        "COPY_STREAM_URL": "نسخ رابط البث",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "تلقاو {{count}} ديال النتايج",
+            "NO_RESULTS_FOR": "ما تلقاو حتى نتيجة لـ \"{{term}}\""
+        }
+    },
+    "INFORMATION": "معلومات",
+    "REMOTE_CONTROL": {
+        "TITLE": "التحكم عن بعد",
+        "UP_CHANNEL": "القناة الفوق",
+        "DOWN_CHANNEL": "القناة لتحت",
+        "HEADER": "التحكم عن بعد IPTVNator",
+        "FOOTER": "التحكم عن بعد IPTVNator"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/by.json b/apps/web/src/assets/i18n/by.json
new file mode 100644
index 0000000..36d6fcf
--- /dev/null
+++ b/apps/web/src/assets/i18n/by.json
@@ -0,0 +1,388 @@
+{
+    "CLOSE": "Закрыць",
+    "PLAYLISTS": "Плэйлісты",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Выберыце плэйліст са спісу, дадайце новы з камп'ютара або загрузіце па спасылцы",
+        "TABS": {
+            "RECENTLY_ADDED": "Нядаўна дададзеныя плэйлісты",
+            "FILE_UPLOAD": "Загрузіць з камп'ютара",
+            "URL_UPLOAD": "Загрузіць па спасылцы",
+            "TEXT_IMPORT": "Імпартаваць з тэксту",
+            "STALKER_PORTAL_IMPORT": "Дадаць Stalker партал",
+            "XTREME_IMPORT": "Дадаць Xtreme Code"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Пакуль яшчэ не было дададзена ніводнага плэйліста",
+            "ADD_FIRST": "Вы можаце дадаць плэйлісты з суседніх укладак",
+            "ADDED_VIA_URL": "Быў дададзены па спасылцы:",
+            "ADDED_VIA_FILE": "Быў загружаны з камп'ютара",
+            "CHANNELS": "Каналаў",
+            "ADDED": "Дададзены",
+            "SHOW_DETAILS": "Паказаць інфармацыю аб плэйлісце",
+            "REMOVE": "Выдаліць плэйліст",
+            "SEARCH_PLAYLISTS": "Пошук па назве плэйліста",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Падрабязная інфармацыя аб плэйлісце",
+                "TITLE": "Назва",
+                "FROM_URL": "Дададзены па спасылцы",
+                "IMPORT_DATE": "Дата імпарту",
+                "CHANNELS": "Колькасць каналаў",
+                "CLOSE": "Закрыць",
+                "SAVE": "Захаваць",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "Імя файла пры загрузцы",
+                "FILE_PATH": "Шлях да файла",
+                "UPDATE_FAILED": "Не ўдалося абнавіць плэйліст",
+                "AUTO_UPDATE": "Аўтаабнаўленне",
+                "AUTO_UPDATE_DESCRIPTION": "Калі актываваная функцыя аўтаабнаўлення, спіс прайгравання будзе абнаўляцца аўтаматычна пры кожным запуску праграмы.",
+                "CUSTOM_USER_AGENT": "Некаторыя IPTV правайдэры патрабуюць указанне пэўнага карыстальніцкага агента (User Agent) для прайгравання свайго плэйліста.",
+                "EXPORT_PLAYLIST": "Экспартаваць плэйліст (m3u)",
+                "PASSWORD": "Пароль",
+                "SERVER_URL": "URL-адрас сервера",
+                "USERNAME": "Імя карыстальніка",
+                "MAC_ADDRESS": "MAC-адрас"
+            },
+            "UPDATED": "Абноўлены",
+            "REFRESH": "Абнавіць плэйліст",
+            "REMOVE_DIALOG": {
+                "MESSAGE": "Вы ўпэўнены, што хочаце выдаліць гэты плэйліст?",
+                "TITLE": "Выдаліць плэйліст"
+            },
+            "GLOBAL_FAVORITES": "Усе фаварыты",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Аўтаматычна згенераваны плэйліст, які ўключае ў сябе фаварыты з усіх плэйлістоў",
+            "MY_PLAYLISTS": "Мае плэйлісты",
+            "MY_PLAYLISTS_SUBTITLE": "Усе наяўныя плэйлісты",
+            "PLAYLIST_UPDATE_SUCCESS": "Плэйліст быў паспяхова абноўлены!",
+            "STALKER_PORTAL": "Stalker партал",
+            "XTREAM_PLAYLIST": "Xtream плэйліст",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Перацягніце файл у гэтую вобласць",
+            "OR": "або",
+            "CHOOSE_PLAYLIST": "выберыце плэйліст",
+            "REJECTED": "На жаль, гэты фармат файлаў не падтрымліваецца {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Спасылка на плэйліст (*.m3u або *.m3u8)",
+            "ADD_PLAYLIST": "Дадаць плэйліст"
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Устаўце плэйліст фармату m3u(8) у гэта поле",
+            "BUTTON_LABEL": "Імпартаваць"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Назва плэйліста",
+            "SERVER_URL": "Сервер URL",
+            "USERNAME": "Карыстальнік",
+            "PASSWORD": "Пароль",
+            "ADD": "Дадаць",
+            "TEST_CREDENTIALS": "Праверыць",
+            "URL_VALIDATION_ERROR": "Павінен быць сапраўдны URL-адрас з пратаколам (напрыклад, http://example.com або https://example.com:4324)."
+        },
+        "STALKER_PORTAL": {
+            "ADD": "Дадаць",
+            "TITLE": "Назва",
+            "MAC_ADDRESS": "MAC-адрас",
+            "SERVER_URL": "URL сервера",
+            "URL_VALIDATION_ERROR": "Павінен быць сапраўдны URL-адрас з пратаколам (напрыклад, http://example.com/c або https://example.com/stalker_portal/c)."
+        },
+        "FILTER_BY_TYPE": "Фільтраваць па тыпу",
+        "IMPORTED_AS_TEXT": "Імпартавана як тэкст",
+        "FILTER_BY_NAME": "Фільтраваць па імені",
+        "PARSING_ERROR": "Памылка парсінгу, несапраўдны плэйліст:"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "SETTINGS": {
+        "TITLE": "Налады",
+        "SUBTITLE": "Тут можна змяніць агульныя налады праграмы",
+        "DESCRIPTION": "Скончыўшы наладу, не забудзьцеся пацвердзіць новыя налады кнопкай 'Захаваць'",
+        "EPG_URL_LABEL": "Спасылка на праграму каналаў (EPG) (*.xml або *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Увядзіце спасылку",
+        "REFRESH_EPG": "Абнавіць праграму каналаў (EPG)",
+        "REFRESH_ALL_EPG": "Абнавіць усё",
+        "REMOVE_EPG_SOURCE": "Выдаліць крыніцу EPG",
+        "EPG_STATUS_FRESH": "Актуальна",
+        "EPG_STATUS_STALE": "Патрабуе абнаўлення",
+        "EPG_STATUS_ERROR": "Памылка",
+        "VIDEO_PLAYER_LABEL": "Відэапрайгравальнік",
+        "VIDEO_PLAYER_PLACEHOLDER": "Выберыце са спісу",
+        "VERSION": "Версія праграмы",
+        "SAVE_CHANGES": "Захаваць",
+        "BACK_TO_HOME": "Назад",
+        "NEW_VERSION_AVAILABLE": "Даступная новая версія праграмы",
+        "LATEST_VERSION": "Вы выкарыстоўваеце апошнюю версію праграмы",
+        "LANGUAGE": "Мова",
+        "SETTINGS_SAVED": "Новыя налады былі паспяхова захаваны!",
+        "THEME": "Тэма афармлення",
+        "SHOW_CAPTIONS": "Адлюстроўваць субтытры",
+        "ADD_EPG_SOURCE": "Дадаць крыніцу EPG",
+        "EPG_URL_ERROR": "Уведзенае значэнне не з'яўляецца URL-адрасам.",
+        "VIDEO_PLAYER_DESCRIPTION": "Выбраць стандартны відэапрайгравальнік",
+        "LANGUAGE_DESCRIPTION": "Выбраць мову праграмы",
+        "THEME_DESCRIPTION": "Выбраць візуальную тэму афармлення",
+        "SHOW_CAPTIONS_DESCRIPTION": "Паказаць або схаваць субтытры па змаўчанні.",
+        "VERSION_DESCRIPTION": "Бягучая версія праграмы",
+        "EPG_NOTE": "На гэты момант EPG даступны толькі ў натыўнай версіі IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Падрабязней тут",
+        "IMPORT_EXPORT_DATA": "Імпарт/экспарт плэйлістоў",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Экспарт або імпарт плэйлістоў у фармаце JSON, які выкарыстоўваецца ў праграме.",
+        "IMPORT_DATA": "Імпарт",
+        "EXPORT_DATA": "Экспарт",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Памылка імпарту, калі ласка, паспрабуйце імпартаваць іншы файл.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "VLC_PLAYER_PATH_LABEL": "Шлях да VLC прайгравальніка",
+        "VLC_PLAYER_PATH": "Шлях да VLC прайгравальніка",
+        "MPV_PLAYER_PATH_LABEL": "Шлях да mpv прайгравальніка",
+        "MPV_PLAYER_PATH": "Шлях да mpv прайгравальніка",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Усталюйце шлях да прайгравальніка VLC у вашай сістэме. \nЁн будзе выкарыстоўваць прадастаўлены шлях да бінарнага файла VLC замест шляху па змаўчанні.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Цёмная тэма",
+        "LIGHT_THEME": "Светлая тэма",
+        "SYSTEM_THEME": "Сістэмная тэма"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Пошук каналаў",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Загрузіць або выбраць іншы плэйліст",
+        "ALL_CHANNELS": "Усе каналы",
+        "GROUPS": "Групы",
+        "UNGROUPED": "Незагрупаваныя",
+        "UNNAMED_CHANNEL": "Канал без назвы",
+        "FAVORITES": "Выбраныя",
+        "NO_FAVORITES": "Выбраных каналаў пакуль няма",
+        "USE_STAR_TO_FAVORITE": "Выкарыстоўвайце значок зоркі, каб дадаваць каналы ў выбранае",
+        "REMOVE_FAVORITE": "Выдаліць са спісу фаварытаў",
+        "FAVORITES_UPDATED": "Спіс фаварытаў быў абноўлены!"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Адкрыць спіс каналаў",
+        "TOGGLE_FAVORITE_FLAG": "Выбраны",
+        "OPEN_EPG_LIST": "Адкрыць праграму (EPG)",
+        "OPEN_MULTI_EPG": "Адкрыць мульты-EPG прагляд"
+    },
+    "EPG": {
+        "NEXT_DAY": "Наступны дзень",
+        "PREVIOUS_DAY": "Папярэдні дзень",
+        "LIVE_NOW": "Цяпер",
+        "LIVE_STREAM": "Прамая трансляцыя",
+        "TIMESHIFT_AVAILABLE": "Даступная функцыя архіва (timeshift). Націсніце на перадачу для прайгравання.",
+        "EPG_NOT_AVAILABLE_DATE": "Ой, праграма на гэты дзень, на жаль, адсутнічае.",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Праграма для гэтага канала недаступная.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Паспрабуйце змяніць або абнавіць спасылку на EPG у наладах праграмы.",
+        "FETCH_EPG": "Загружаю праграму ТБ-перадач (EPG)...",
+        "ERROR": "Ой, не ўдалося загрузіць праграму каналаў (EPG)",
+        "DOWNLOAD_SUCCESS": "Праграма каналаў (EPG) была паспяхова загружана.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Падрабязнасці перадачы",
+            "TITLE": "Назва",
+            "CATEGORY": "Катэгорыя",
+            "PARENTAL_RATING_SYSTEM": "Возраснае абмежаванне",
+            "DESCRIPTION": "Апісанне",
+            "LANGUAGE": "Мова",
+            "SHOW_PROGRAM_DETAILS": "Паказаць падрабязнасці"
+        }
+    },
+    "NO": "Не",
+    "YES": "Так",
+    "MENU": {
+        "OPEN": "Адкрыць меню",
+        "SUPPORT_ARIA": "Падтрымаць IPTVnator на GitHub",
+        "SETTINGS": "Налады",
+        "SETTINGS_ARIA": "Адкрыць налады",
+        "BUG_REPORT": "Паведаміць аб памылцы",
+        "WHAT_IS_NEW": "Што новага?",
+        "ABOUT": "Аб праграме",
+        "ABOUT_ARIA": "Аб праграме",
+        "SUPPORT_PROJECT": "Падтрымаць праект"
+    },
+    "ABOUT": {
+        "TITLE": "Аб праграме",
+        "DESCRIPTION": "Кросплатформавая праграма для прайгравання IPTV з мноствам функцый, такіх як падтрымка плэйлістоў m3u і m3u8, фаварыты, ТБ-гід, ТБ-архіў/даганянне і іншае.",
+        "VERSION": "Версія",
+        "GITHUB_TOOLTIP": "Рэпазітар праграмы на GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Падтрымаць распрацоўшчыка",
+        "TWITTER_TOOLTIP": "Падзяліцца ў Twitter"
+    },
+    "UPDATE_AVAILABLE": "Даступна абнаўленне",
+    "REFRESH": "Абнавіць",
+    "XTREAM": {
+        "RATING": "Рэйтынг",
+        "RELEASE_DATE": "Дата выпуску",
+        "ACTORS": "Акцёры",
+        "PLAY": "Прайграць",
+        "GENRE": "Жанр",
+        "DURATION": "Працягласць",
+        "COUNTRY": "Краіна",
+        "NAME": "Назва",
+        "DIRECTOR": "Рэжысёр",
+        "CAST": "Акцёрскі склад",
+        "EPISODE_RUN_TIME": "Працягласць эпізоду",
+        "AGE": "Узрост",
+        "EPISODE": "Эпізод",
+        "YEAR": "Год",
+        "YOUTUBE_TRAILER": "Трэйлер на YouTube",
+        "DESCRIPTION": "Апісанне",
+        "KINOPOISK_RATING": "Рэйтынг на Кінапоіск",
+        "IMDB_RATING": "Рэйтынг на IMDB"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Усе катэгорыі",
+        "ADD_TO_FAVORITES": "Дадаць у выбранае",
+        "REMOVE_FROM_FAVORITES": "Выдаліць з выбранага",
+        "MY_FAVORITES": "Выбранае",
+        "COPY_STREAM_URL": "Капіраваць URL-адрас патоку",
+        "ERROR_VIEW": {
+            "DELETE": "Выдаліць",
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Тэрмін дзеяння ўліковага запісу скончыўся",
+                "DESCRIPTION": "Тэрмін дзеяння гэтага ўліковага запісу скончыўся. \nКалі ласка, праверце ўліковыя дадзеныя ў наладах плэйліста або выдаліце яго."
+            },
+            "HOME": "На галоўную",
+            "EMPTY_CATEGORY": {
+                "TITLE": "Пустая катэгорыя",
+                "DESCRIPTION": "У гэтай катэгорыі няма кантэнту. Выберыце іншую катэгорыю або зменіце тып кантэнту."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Несанкцыянаваны",
+                "DESCRIPTION": "Калі ласка, праверце ўліковыя дадзеныя ў наладах плэйліста або выдаліце іх."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Партал не знойдзены"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Нешта пайшло не так",
+                "DESCRIPTION": "Невядомая памылка. Паўтарыце спробу пазней."
+            },
+            "PLAYLIST_SETTINGS": "Налады плэйліста"
+        },
+        "STREAM_URL_COPIED": "URL-адрас патоку быў скапіяваны ў буфер абмену.",
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "Нічога не знойдзена, паспрабуйце змяніць пошукавы запыт"
+        },
+        "REMOVED_FROM_FAVORITES": "Выдалена з выбранага",
+        "ADDED_TO_FAVORITES": "Дададзена ў выбранае",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "Знойдзена {{count}} вынікаў",
+            "NO_RESULTS_FOR": "Не знойдзена вынікаў для \"{{term}}\""
+        }
+    },
+    "INFORMATION": "Інфармацыя",
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/de.json b/apps/web/src/assets/i18n/de.json
new file mode 100644
index 0000000..8c07038
--- /dev/null
+++ b/apps/web/src/assets/i18n/de.json
@@ -0,0 +1,820 @@
+{
+    "CLOSE": "Schließen",
+    "PLAYLISTS": "Playlisten",
+    "CHANNELS": {
+        "ALL_CHANNELS": "Alle Sender",
+        "FAVORITES": "Favoriten",
+        "GROUPS": "Gruppen",
+        "MANAGE_GROUPS": "Gruppen verwalten",
+        "MANAGE_GROUPS_HINT": "Verwenden Sie \"Gruppen verwalten\", um Gruppen wieder einzublenden.",
+        "NO_FAVORITES": "Keine Favoriten",
+        "NO_VISIBLE_GROUPS": "Keine sichtbaren Gruppen",
+        "SEARCH_GROUPS": "Gruppen suchen",
+        "REMOVE_FAVORITE": "Aus Favoritenliste entfernen",
+        "SEARCH_CHANNEL": "Nach Sender suchen",
+        "UNGROUPED": "Ohne Gruppe",
+        "UNNAMED_CHANNEL": "Sender ohne Namen",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Neue Playlist hochladen oder eine andere aussuchen",
+        "USE_STAR_TO_FAVORITE": "Nutzen Sie das Star-Icon um Sender als Favoriten zu markieren",
+        "FAVORITES_UPDATED": "Favoriten wurden aktualisiert!",
+        "SELECT_CHANNEL_PLAYBACK": "Bitte wählen Sie einen Sender aus, um die Wiedergabe zu starten",
+        "SORT_BY": "Sortieren nach",
+        "SORT_BY_DATE": "Nach Datum sortieren (Neueste zuerst)",
+        "SORT_BY_RATING": "Nach Bewertung sortieren",
+        "SORT_BY_NAME": "Nach Name sortieren (A-Z)",
+        "GROUP_MANAGEMENT": {
+            "TITLE": "Gruppen verwalten",
+            "SELECTED": "Ausgewählt",
+            "SELECT_ALL": "Alle auswählen",
+            "DESELECT_ALL": "Alle abwählen",
+            "SEARCH_PLACEHOLDER": "Gruppen suchen...",
+            "NO_RESULTS": "Keine passenden Gruppen gefunden",
+            "SAVE": "Speichern"
+        }
+    },
+    "EPG": {
+        "TITLE": "Elektronischer Programmführer",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Versuchen Sie bitte die TV-Guide Einstellungen zu ändern.",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ups, leider ist das TV-Programm nicht verfügbar.",
+        "EPG_NOT_AVAILABLE_DATE": "Ups, leider ist das TV-Programm für das ausgewählte Datum nicht verfügbar",
+        "LIVE_NOW": "Live jetzt",
+        "LIVE_STREAM": "Live stream",
+        "NEXT_DAY": "Zum nächsten Tag",
+        "PREVIOUS_DAY": "Zum vorherigen Tag",
+        "TIMESHIFT_AVAILABLE": "Die Timeshift-Funktion (Archiv) ist verfügbar, klicken Sie an um abzuspielen",
+        "FETCH_EPG": "EPG-Daten werden geladen...",
+        "ERROR": "Ooops, EPG konnte nicht geladen werden",
+        "DOWNLOAD_SUCCESS": "EPG wurde erfolgreich geladen.",
+        "FETCH_SUCCESS": "EPG wurde erfolgreich abgerufen",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Details zum TV-Programm",
+            "TITLE": "Titel",
+            "CATEGORY": "Kategorie",
+            "PARENTAL_RATING_SYSTEM": "Alterskennzeichnung (USK)",
+            "DESCRIPTION": "Beschreibung",
+            "LANGUAGE": "Sprache",
+            "SHOW_PROGRAM_DETAILS": "Details anzeigen"
+        }
+    },
+    "HOME": {
+        "SUBTITLE": "Wählen Sie eine Playlist aus oder laden Sie eine neue Playlist hoch",
+        "TITLE": "IPTVnator",
+        "FILE_UPLOAD": {
+            "CHOOSE_PLAYLIST": "Playlist auswählen",
+            "DRAG_DROP": "Ziehen Sie Dateien per Drag & Drop",
+            "OR": "oder",
+            "REJECTED": "Datei wurde abgelehnt, nicht unterstütztes Dateiformat {{filename}}."
+        },
+        "PLAYLISTS": {
+            "ADDED": "Hinzugefügt am",
+            "ADDED_VIA_FILE": "Diese Playlist wurde aus dem Dateisystem hochgeladen",
+            "ADDED_VIA_URL": "Diese Playlist wurde von der URL hinzugefügt",
+            "ADD_FIRST": "Bitte fügen Sie eine neue Playlist hinzu",
+            "CHANNELS": "TV-Sender",
+            "NO_PLAYLISTS": "Noch keine Playlisten hinzugefügt",
+            "WELCOME_TITLE": "Willkommen bei IPTVnator",
+            "WELCOME_DESCRIPTION": "Beginnen Sie Ihre Streaming-Reise, indem Sie Ihre erste Playlist hinzufügen. Verbinden Sie sich mit Ihrem bevorzugten IPTV-Dienst und genießen Sie Live-TV, Filme und Serien.",
+            "ADD_YOUR_FIRST": "Ihre erste Playlist hinzufügen",
+            "FEATURE_M3U": "M3U/M3U8-Dateien",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Stalker Portal",
+            "NO_RESULTS_TITLE": "Keine Playlisten gefunden",
+            "NO_RESULTS_DESCRIPTION": "Keine Playlisten entsprechen Ihrer Suche. Versuchen Sie, Ihre Suchbegriffe anzupassen oder löschen Sie den Filter, um alle Playlisten anzuzeigen.",
+            "REMOVE": "Playlist entfernen",
+            "SHOW_DETAILS": "Details anzeigen",
+            "SEARCH_PLAYLISTS": "Suche nach Playlisten",
+            "INFO_DIALOG": {
+                "CHANNELS": "Anzahl von Sender",
+                "CLOSE": "Schließen",
+                "FROM_URL": "Von der URL hinzugefügt",
+                "IMPORT_DATE": "Hinzugefügt am",
+                "PLAYLIST_DETAILS": "Infos über die Playlist",
+                "TITLE": "Titel",
+                "USER_AGENT": "User agent",
+                "SAVE": "Speichern",
+                "ORIGINAL_FILENAME": "Original-Dateinamen",
+                "FILE_PATH": "Dateipfad",
+                "UPDATE_FAILED": "Update fehlgeschlagen",
+                "AUTO_UPDATE": "Auto-update",
+                "AUTO_UPDATE_DESCRIPTION": "Wenn die Auto-Refresh-Funktion aktiviert ist, wird die Wiedergabeliste bei jedem Start der Anwendung automatisch aktualisiert.",
+                "CUSTOM_USER_AGENT": "Einige IPTV-Anbieter benötigen einen bestimmten 'User-Agent', um ihre Playlist abspielen zu können.",
+                "EXPORT_PLAYLIST": "Als m3u exportieren",
+                "PASSWORD": "Passwort",
+                "SERVER_URL": "Server-URL",
+                "USERNAME": "Nutzername",
+                "MAC_ADDRESS": "MAC-Adresse",
+                "PLAYLIST_EXPORT_SUCCESS": "Playlist wurde erfolgreich exportiert.",
+                "PLAYLIST_EXPORT_ERROR": "Fehler: Playlist-Export fehlgeschlagen."
+            },
+            "UPDATED": "Aktualisiert am",
+            "REFRESH": "Aktualisieren",
+            "REFRESH_XTREAM": "Xtream-Playlist vom Server aktualisieren",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Xtream-Playlist aktualisieren",
+                "MESSAGE": "Dadurch werden lokal zwischengespeicherte Kategorien und Streams gelöscht und alles vom Remote-Server erneut importiert. Ihre Favoriten und kürzlich angesehenen Elemente bleiben erhalten. Möchten Sie wirklich fortfahren?",
+                "STARTED": "Aktualisierung gestartet. Navigation zur Playlist...",
+                "ERROR": "Playlist-Aktualisierung fehlgeschlagen. Bitte versuchen Sie es erneut.",
+                "IN_PROGRESS": "Playlist wird aktualisiert...",
+                "COLLECTING_DATA": "Favoriten und zuletzt angesehene Inhalte werden gesammelt...",
+                "DELETING_CONTENT": "Zwischengespeicherte Inhalte werden entfernt...",
+                "DELETING_CATEGORIES": "Zwischengespeicherte Kategorien werden entfernt..."
+            },
+            "REMOVE_DIALOG": {
+                "MESSAGE": "Sind Sie sicher, dass Sie diese Wiedergabeliste vollständig löschen möchten",
+                "TITLE": "Wiedergabeliste entfernen",
+                "SUCCESS": "Playlist wurde erfolgreich entfernt",
+                "IN_PROGRESS": "Wiedergabeliste wird entfernt...",
+                "DELETING_FAVORITES": "Favoriten werden entfernt...",
+                "DELETING_RECENT": "Zuletzt angesehene Inhalte werden entfernt...",
+                "DELETING_PROGRESS": "Wiedergabefortschritt wird entfernt...",
+                "DELETING_DOWNLOADS": "Downloads werden entfernt...",
+                "DELETING_CONTENT": "Zwischengespeicherte Inhalte werden entfernt...",
+                "DELETING_CATEGORIES": "Kategorien werden entfernt...",
+                "DELETING_PLAYLIST": "Playlist-Eintrag wird entfernt..."
+            },
+            "GLOBAL_FAVORITES": "Globale Favoriten",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Automatisch generierte Playlist mit aggregierten Favoriten aus allen Playlists",
+            "MY_PLAYLISTS": "Meine Playlisten",
+            "MY_PLAYLISTS_SUBTITLE": "Alle verfügbaren Playlisten",
+            "PLAYLIST_UPDATE_SUCCESS": "Erfolg! Die Playlist wurde erfolgreich aktualisiert.",
+            "PLAYLIST_UPDATE_ERROR": "Fehler beim Aktualisieren der Playlist-Details.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Erfolg! Die Playlists wurden erfolgreich aktualisiert",
+            "AUTO_REFRESH_ENABLED": "Auto-Refresh aktiviert",
+            "STALKER_PORTAL": "Stalker-Portal",
+            "XTREAM_PLAYLIST": "Xtream-Playlist",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "TABS": {
+            "FILE_UPLOAD": "Aus Dateisystem hochladen",
+            "RECENTLY_ADDED": "Zuletzt hinzugefügt",
+            "URL_UPLOAD": "Via URL hinzufügen",
+            "TEXT_IMPORT": "Als Text importieren",
+            "XTREME_IMPORT": "Xtreme-Code hinzufügen",
+            "STALKER_PORTAL_IMPORT": "Stalker-Portal hinzufügen"
+        },
+        "URL_UPLOAD": {
+            "ADD_PLAYLIST": "Playlist hinzufügen",
+            "PLAYLIST_URL": "URL der Playlist",
+            "CORS_NOTE": "Hinweis: Um CORS-Probleme zu vermeiden, verwendet die Anwendung an dieser Stelle einen öffentlichen CORS-Proxy-Dienst. Wenn Sie eine Playlist mit sensiblen Daten hochladen möchten, ist es sicherer, sie aus einer Datei zu importieren."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Füge m3u(8)-Wiedergabeliste hier als Text ein",
+            "BUTTON_LABEL": "Importieren"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Playlist Titel",
+            "SERVER_URL": "Server URL",
+            "USERNAME": "Nutzername",
+            "PASSWORD": "Passwort",
+            "ADD": "Hinzufügen",
+            "TEST_CREDENTIALS": "Verbindung testen",
+            "URL_VALIDATION_ERROR": "Sollte eine gültige URL mit Protokoll sein (z. B. http://example.com oder https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "ADD": "Hinzufügen",
+            "TITLE": "Titel",
+            "SERVER_URL": "Server-URL",
+            "MAC_ADDRESS": "Mac-Adresse",
+            "URL_VALIDATION_ERROR": "Sollte eine gültige URL mit Protokoll sein (z. B. http://example.com/c oder https://example.com/stalker_portal/c)"
+        },
+        "FILTER_BY_TYPE": "Playlist-Typen",
+        "FILTER_BY_NAME": "Nach Namen filtern",
+        "FILTER_AND_SORT": "Filtern & Sortieren",
+        "SORT_PLAYLISTS": "Playlisten sortieren",
+        "SORT_BY": "Sortieren nach",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Name (A-Z)",
+            "NAME_DESC": "Name (Z-A)",
+            "NEWEST": "Hinzugefügt (Neueste zuerst)",
+            "OLDEST": "Hinzugefügt (Älteste zuerst)"
+        },
+        "PLAYLIST_TYPES": {
+            "M3U": "M3U (lokal, URL, Text)",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker"
+        },
+        "IMPORTED_AS_TEXT": "Als Text importiert",
+        "PARSING_ERROR": "Fehler: Parsen fehlgeschlagen, keine gültige Playlist:"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "SETTINGS": {
+        "BACK_TO_HOME": "Zurück",
+        "DESCRIPTION": "Bitte vergessen Sie nicht die Änderungen mit dem Speicher-Button zu bestätigen",
+        "GENERAL": "Allgemein",
+        "GENERAL_SUBTITLE": "Allgemeine App-Einstellungen ändern",
+        "PLAYBACK": "Wiedergabe",
+        "EPG_SOURCES": "EPG-Quellen",
+        "EPG_SOURCES_DESCRIPTION": "Eine oder mehrere URLs als EPG-Quellen hinzufügen",
+        "DATA": "Daten",
+        "ABOUT": "Info",
+        "NAV_GENERAL": "Allgemein",
+        "NAV_PLAYBACK": "Wiedergabe",
+        "NAV_EPG": "EPG",
+        "NAV_REMOTE": "Remote",
+        "NAV_DATA": "Daten",
+        "NAV_ABOUT": "Info",
+        "APP_PREFERENCES": "App-Einstellungen",
+        "HERO_EYEBROW": "Arbeitsbereich",
+        "HERO_TITLE": "IPTVnator anpassen",
+        "HERO_DESCRIPTION": "Passen Sie Wiedergabe, Programmführer, Fernzugriff und Datenverwaltung zentral an, ohne den Stil des Arbeitsbereichs zu verlieren.",
+        "EPG_URL_LABEL": "TV-Programm (EPG) URL",
+        "EPG_URL_PLACEHOLDER": "URL eingeben",
+        "LANGUAGE": "Sprache",
+        "LATEST_VERSION": "Sie nutzen die neueste Version der Anwendung",
+        "NEW_VERSION_AVAILABLE": "EIne neue Version der Anwendung ist verfügbar",
+        "REFRESH_EPG": "TV-Programm aktualisieren",
+        "REFRESH_ALL_EPG": "Alle aktualisieren",
+        "REMOVE_EPG_SOURCE": "EPG-Quelle entfernen",
+        "EPG_STATUS_FRESH": "Aktuell",
+        "EPG_STATUS_STALE": "Aktualisierung nötig",
+        "EPG_STATUS_ERROR": "Fehlgeschlagen",
+        "SAVE_CHANGES": "Änderungen speichern",
+        "SUBTITLE": "Die App-Einstellungen ändern",
+        "TITLE": "Einstellungen",
+        "VERSION": "Version",
+        "VIDEO_PLAYER_LABEL": "Videoplayer",
+        "PLAYER_HTML5": "HTML5-Videoplayer",
+        "PLAYER_VIDEOJS": "Video.js-Player",
+        "PLAYER_ARTPLAYER": "ArtPlayer",
+        "PLAYER_MPV": "MPV-Player",
+        "PLAYER_VLC": "VLC",
+        "VIDEO_PLAYER_PLACEHOLDER": "Option auswählen",
+        "STREAM_FORMAT": "Stream-Format",
+        "SETTINGS_SAVED": "Einstellungen wurden erfolgreich gespeichert!",
+        "THEME": "Farbdesign",
+        "SHOW_CAPTIONS": "Untertitel anzeigen",
+        "SHOW_DASHBOARD": "Dashboard anzeigen",
+        "SHOW_DASHBOARD_DESCRIPTION": "Dashboard in der Workspace-Leiste verfügbar halten. Wenn deaktiviert, wird Quellen zur ersten Workspace-Seite.",
+        "STREAM_FORMAT_DESCRIPTION": "Standard-Streamformat auswählen (Xtream)",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "CLEAR_EPG_DATA": "EPG-Daten löschen",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "EPG-Daten löschen",
+            "MESSAGE": "Möchten Sie wirklich alle EPG-Daten aus der Datenbank entfernen? Dadurch werden alle zwischengespeicherten Programmdaten gelöscht."
+        },
+        "EPG_DATA_CLEARED": "EPG-Daten wurden gelöscht",
+        "EPG_DATA_CLEAR_FAILED": "EPG-Daten konnten nicht gelöscht werden. Bitte erneut versuchen.",
+        "CLEARING_EPG_DATA": "Wird gelöscht…",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "LANGUAGE_DESCRIPTION": "Wählen Sie die Sprache der Anwendung aus",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "VERSION_DESCRIPTION": "Aktuelle Version der Anwendung",
+        "ABOUT_SUBTITLE": "Version, Projekt-Links und Möglichkeiten, IPTVnator zu unterstützen.",
+        "COMMUNITY": "Projekt & Community",
+        "COMMUNITY_DESCRIPTION": "Gib dem Repository einen Stern, lies den Blog oder tritt der Telegram-Gruppe für Updates und Hilfe bei.",
+        "LINK_BLOG": "Blog",
+        "LINK_GITHUB_DESCRIPTION": "Stern vergeben, Issues melden oder beitragen",
+        "LINK_BLOG_DESCRIPTION": "Release Notes, Tipps und Projekt-Updates",
+        "LINK_TELEGRAM_DESCRIPTION": "Ankündigungen, Community und Support",
+        "SUPPORT_TITLE": "Projekt unterstützen",
+        "SUPPORT_DESCRIPTION": "IPTVnator ist kostenlose Open-Source-Software, die im Offenen entwickelt wird. Wenn sie Teil deines Alltags ist, hilft ein kleiner Beitrag, das Projekt am Leben zu halten und die nächsten Schritte zu gestalten — danke!",
+        "SUPPORT_SPONSORS_HINT": "Wiederkehrend oder einmalig",
+        "SUPPORT_KOFI_HINT": "Spendiere einen Kaffee",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "MPV_PLAYER_PATH": "MPV-Player-Pfad",
+        "SHOW_CAPTIONS_DESCRIPTION": "Untertitel standardmäßig ein- oder ausblenden",
+        "SHOW_EXTERNAL_PLAYBACK_BAR": "Now-Playing-Fußleiste anzeigen",
+        "SHOW_EXTERNAL_PLAYBACK_BAR_DESCRIPTION": "Zeigt die Statusleiste für externe Player unten im Arbeitsbereich auf dem Desktop an.",
+        "IMPORT_DATA": "Import",
+        "ADD_EPG_SOURCE": "EPG-Quelle hinzufügen",
+        "IMPORT_ERROR": "Importfehler. Bitte versuchen Sie es mit einer anderen Datei.",
+        "EPG_URL_ERROR": "Der Wert ist keine gültige URL",
+        "EXPORT_DATA": "Export",
+        "VIDEO_PLAYER_DESCRIPTION": "Wählen Sie den Standard-Videoplayer aus",
+        "IMPORT_EXPORT_DATA": "Wiedergabelisten importieren/exportieren",
+        "VLC_PLAYER_PATH_LABEL": "VLC-Pfad",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Legen Sie den Pfad zum VLC-Player in Ihrem System fest. \nEs wird der bereitgestellte Pfad zu einer VLC-Binärdatei anstelle des Standardpfads für unser System verwendet.",
+        "THEME_DESCRIPTION": "Wählen Sie das visuelle Thema der Anwendung aus",
+        "STARTUP_BEHAVIOR": "Startansicht",
+        "STARTUP_BEHAVIOR_DESCRIPTION": "Legen Sie fest, ob IPTVnator die erste verfügbare Workspace-Ansicht oder Ihre zuletzt geöffnete Abschnittsansicht startet. Erste Ansicht bedeutet Dashboard, wenn aktiviert, sonst Quellen.",
+        "STARTUP_BEHAVIOR_FIRST_VIEW": "Erste verfügbare Ansicht",
+        "STARTUP_BEHAVIOR_RESTORE_LAST_VIEW": "Letzte Ansicht wiederherstellen",
+        "EPG_NOTE": "Derzeit ist EPG nur in der Electron-basierten Version von IPTVnator verfügbar.",
+        "VLC_PLAYER_PATH": "VLC-Playerpfad",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Exportieren oder importieren Sie Wiedergabelisten im JSON-Format, das in der Anwendung verwendet wird.",
+        "EPG_NOTE_URL_TEXT": "Überprüfen Sie es hier",
+        "MPV_PLAYER_PATH_LABEL": "MPV-Pfad",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Legen Sie den Pfad zum MPV-Player in Ihrem System fest. Es wird der bereitgestellte Pfad zu einer MPV-Binärdatei anstelle des in $PATH gefundenen verwendet.",
+        "MPV_REUSE_INSTANCE_LABEL": "MPV-Instanz wiederverwenden",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "Wenn aktiviert, wird dasselbe MPV-Fenster zum Abspielen verschiedener Streams wiederverwendet. Wenn deaktiviert, wird jeder Stream in einem neuen MPV-Fenster geöffnet.",
+        "REMOTE_CONTROL": "Fernsteuerung",
+        "REMOTE_CONTROL_DESCRIPTION": "Fernsteuerung der Anwendung aktivieren.",
+        "REMOTE_CONTROL_PORT": "Fernsteuerungsport",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Port für die Fernsteuerung der Anwendung. Standardmäßig wird Port 8765 verwendet.",
+        "REMOTE_CONTROL_URL": "Fernsteuerungs-URL",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Greifen Sie von einem anderen Gerät im selben Netzwerk auf die Fernsteuerung zu.",
+        "SHOW_QR_CODE": "QR-Code anzeigen",
+        "STATUS_ENABLED": "Aktiv",
+        "STATUS_DISABLED": "Deaktiviert",
+        "SOURCE_SINGULAR": "Quelle",
+        "SOURCE_PLURAL": "Quellen",
+        "PORT_RANGE_LABEL": "Port (1-65535)",
+        "PORT_REQUIRED": "Port ist erforderlich",
+        "PORT_MIN": "Port muss mindestens 1 sein",
+        "PORT_MAX": "Port darf maximal 65535 sein",
+        "PORT_PATTERN": "Nur Ziffern sind erlaubt",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Dunkel",
+        "LIGHT_THEME": "Hell",
+        "SYSTEM_THEME": "System"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Senderliste öffnen",
+        "OPEN_EPG_LIST": "TV-Guide (EPG) öffnen",
+        "TOGGLE_FAVORITE_FLAG": "Als Favoriten hinzufügen/entfernen",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
+    },
+    "NO": "Nein",
+    "YES": "Ja",
+    "MENU": {
+        "OPEN": "Menü öffnen",
+        "SUPPORT_ARIA": "IPTVnator auf GitHub unterstützen",
+        "SETTINGS": "Einstellungen",
+        "SETTINGS_ARIA": "Einstellungen öffnen",
+        "BUG_REPORT": "Fehler melden",
+        "WHAT_IS_NEW": "Was ist neu",
+        "ABOUT": "Über",
+        "ABOUT_ARIA": "Über die Anwendung",
+        "SUPPORT_PROJECT": "Projekt unterstützen"
+    },
+    "XTREAM": {
+        "RELEASE_DATE": "Veröffentlichungsdatum",
+        "ACTORS": "Schauspieler",
+        "PLAY": "Abspielen",
+        "OPENING_PLAYER": "Player wird geöffnet...",
+        "GENRE": "Genre",
+        "DURATION": "Dauer",
+        "COUNTRY": "Land",
+        "NAME": "Name",
+        "DIRECTOR": "Regisseur",
+        "CAST": "Gießen",
+        "RATING": "Bewertung",
+        "AGE": "Alter",
+        "EPISODE": "Folge",
+        "RESUME": "Fortsetzen",
+        "RESTART": "Neu starten",
+        "CONTINUE_WATCHING": "Weiter schauen",
+        "WATCHED": "Angesehen",
+        "IN_PROGRESS": "In Wiedergabe",
+        "MARK_WATCHED": "Als angesehen markieren",
+        "MARK_UNWATCHED": "Als nicht angesehen markieren",
+        "EPISODES_WATCHED": "{{count}} von {{total}} Folgen angesehen",
+        "DETAIL_FALLBACK": {
+            "STATUS": "Portal-Metadaten fehlen",
+            "NOTE": "Dieses Portal hat keine erweiterten Metadaten für diesen Titel geliefert.",
+            "STREAM_ID": "Stream-ID",
+            "CATEGORY": "Kategorie",
+            "CONTAINER": "Format",
+            "SOURCE_TITLE": "Quellentitel"
+        },
+        "YEAR": "Jahr",
+        "YOUTUBE_TRAILER": "YouTube-Trailer",
+        "DESCRIPTION": "Beschreibung",
+        "KINOPOISK_RATING": "Bewertung Kinopoisk",
+        "IMDB_RATING": "IMDB-Bewertung",
+        "EPISODE_RUN_TIME": "Laufzeit der Episode",
+        "ACCOUNT_INFO": {
+            "TITLE": "Kontoinformationen",
+            "USER_INFO": "Benutzerinformationen",
+            "STATUS": "Status",
+            "USERNAME": "Benutzername",
+            "ACTIVE_CONNECTIONS": "Aktive Verbindungen",
+            "CREATED": "Erstellt",
+            "EXPIRES": "Läuft ab",
+            "TRIAL_ACCOUNT": "Testkonto",
+            "YES": "Ja",
+            "NO": "Nein",
+            "ALLOWED_FORMATS": "Zulässige Formate",
+            "SERVER_INFO": "Serverinformationen",
+            "LIVE_TV": "Live-TV",
+            "MOVIES": "Filme",
+            "TV_SERIES": "Serien",
+            "URL": "URL",
+            "PROTOCOL": "Protokoll",
+            "TIMEZONE": "Zeitzone",
+            "SERVER_TIME": "Serverzeit",
+            "PORTS": "Ports",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        }
+    },
+    "PORTALS": {
+        "SIDEBAR": {
+            "MAIN": "Allgemein",
+            "MOVIES": "Filme",
+            "LIVE_TV": "Live TV",
+            "SERIES": "Serien",
+            "LIBRARY": "Bibliothek",
+            "SEARCH": "Suche",
+            "RECENT": "Zuletzt angesehen",
+            "FAVORITES": "Favoriten",
+            "HOME": "Startseite",
+            "PLAYLIST_INFO": "Playlist-Info",
+            "ACCOUNT_INFO": "Account-Info"
+        },
+        "ALL_CATEGORIES": "Alle Kategorien",
+        "ADD_TO_FAVORITES": "Zu den Favoriten hinzufügen",
+        "REMOVE_FROM_FAVORITES": "Von Favoriten entfernen",
+        "MY_FAVORITES": "Meine Favoriten",
+        "COPY_STREAM_URL": "Stream-URL kopieren",
+        "ERROR_VIEW": {
+            "DELETE": "Löschen",
+            "IMPORT_CANCELLED": {
+                "TITLE": "Import abgebrochen",
+                "DESCRIPTION": "Der Playlist-Import wurde abgebrochen. Wiederholen Sie ihn, wenn Sie diese Quelle erneut laden möchten."
+            },
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Konto abgelaufen",
+                "DESCRIPTION": "Dieses Konto ist abgelaufen. \nBitte überprüfen Sie die Anmeldeinformationen in den Playlist-Einstellungen oder entfernen Sie sie."
+            },
+            "ACCOUNT_INACTIVE": {
+                "TITLE": "Konto inaktiv",
+                "DESCRIPTION": "Dieses Konto ist inaktiv. Bitte überprüfen Sie die Anmeldeinformationen in den Playlist-Einstellungen oder entfernen Sie es."
+            },
+            "HOME": "Startseite",
+            "EMPTY_CATEGORY": {
+                "TITLE": "Leere Kategorie",
+                "DESCRIPTION": "Diese Kategorie hat keinen Inhalt. Bitte wählen Sie eine andere Kategorie aus oder ändern Sie den Inhaltstyp"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "Keine Kategorie ausgewählt",
+                "DESCRIPTION": "Bitte wählen Sie eine Kategorie aus, um den Inhalt anzuzeigen"
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Nicht autorisiert",
+                "DESCRIPTION": "Bitte überprüfen Sie die Anmeldeinformationen in den Playlist-Einstellungen oder entfernen Sie sie."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal nicht gefunden",
+                "DESCRIPTION": "Bitte überprüfen Sie die Anmeldeinformationen und die Portal-URL in den Playlist-Einstellungen oder entfernen Sie sie."
+            },
+            "PORTAL_UNAVAILABLE": {
+                "TITLE": "Portal nicht erreichbar",
+                "DESCRIPTION": "Das Portal konnte nicht erreicht werden. Überprüfen Sie die Server-URL oder versuchen Sie es erneut, wenn die Quelle wieder verfügbar ist."
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Etwas ist schief gelaufen",
+                "DESCRIPTION": "Unbekannter Fehler, bitte versuchen Sie es später noch einmal"
+            },
+            "PLAYLIST_SETTINGS": "Playlist-Einstellungen"
+        },
+        "STREAM_URL_COPIED": "Stream-URL in die Zwischenablage kopiert",
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "Keine Ergebnisse gefunden",
+            "NO_SEARCH_RESULTS": "Nichts gefunden. Versuchen Sie, Ihre Suchanfrage zu ändern"
+        },
+        "REMOVED_FROM_FAVORITES": "Aus den Favoriten entfernt",
+        "ADDED_TO_FAVORITES": "Zu den Favoriten hinzugefügt",
+        "SELECT_CATEGORY": "Wählen Sie eine Kategorie aus",
+        "PAGE": "Seite",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "{{count}} Ergebnisse gefunden",
+            "NO_RESULTS_FOR": "Keine Ergebnisse für \"{{term}}\" gefunden"
+        }
+    },
+    "ABOUT": {
+        "TITLE": "Über IPTVnator",
+        "DESCRIPTION": "Plattformübergreifende IPTV-Player-Anwendung mit mehreren Funktionen wie Unterstützung von M3U- und M3U8-Wiedergabelisten, Favoriten, TV-Guide, TV-Archiv/Catchup und mehr.",
+        "VERSION": "Version",
+        "TWITTER_TOOLTIP": "Auf Twitter teilen",
+        "GITHUB_TOOLTIP": "ITPVnator-Repository auf GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Buy me a coffee"
+    },
+    "REFRESH": "Aktualisieren",
+    "UPDATE_AVAILABLE": "Update verfügbar",
+    "INFORMATION": "Information",
+    "DOWNLOADS": {
+        "TITLE": "Downloads",
+        "DOWNLOAD": "Herunterladen",
+        "PLAY_LOCAL": "Lokal abspielen",
+        "EMPTY": "Noch keine Downloads",
+        "EMPTY_HINT": "Filme und Episoden zum Offline-Ansehen herunterladen",
+        "NOT_AVAILABLE": "Downloads nicht verfügbar",
+        "DESKTOP_ONLY": "Diese Funktion ist nur in der Desktop-App verfügbar",
+        "NO_FOLDER": "Kein Download-Ordner ausgewählt",
+        "CHANGE_FOLDER": "Ordner ändern",
+        "CLEAR_COMPLETED": "Abgeschlossene löschen",
+        "CLEAR_COMPLETED_DIALOG": {
+            "TITLE": "Abgeschlossene Downloads löschen",
+            "MESSAGE": "Dadurch werden abgeschlossene, fehlgeschlagene und abgebrochene Einträge aus der aktuellen Download-Ansicht entfernt. Bereits auf der Festplatte gespeicherte Dateien werden nicht gelöscht."
+        },
+        "SOURCE_PLAYLIST_MISSING": "Dieser Download kann nicht mehr in der Bibliothek geöffnet werden, weil die zugehörige Playlist entfernt wurde.",
+        "FILE_NOT_FOUND": "Diese heruntergeladene Datei ist auf der Festplatte nicht mehr verfügbar.",
+        "FILE_ACTION_ERROR": "Die Dateiaktion konnte nicht ausgeführt werden.",
+        "CANCEL": "Abbrechen",
+        "RETRY": "Wiederholen",
+        "REMOVE": "Entfernen",
+        "PLAY": "Abspielen",
+        "REVEAL": "Im Ordner anzeigen",
+        "COPY_URL": "Download-URL kopieren",
+        "URL_COPIED": "Download-URL in die Zwischenablage kopiert",
+        "URL_COPY_FAILED": "URL konnte nicht kopiert werden",
+        "STATUS": {
+            "QUEUED": "In Warteschlange",
+            "DOWNLOADING": "Wird heruntergeladen",
+            "COMPLETED": "Abgeschlossen",
+            "FAILED": "Fehlgeschlagen",
+            "CANCELED": "Abgebrochen"
+        },
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    },
+    "REMOTE_CONTROL": {
+        "TITLE": "Fernbedienung",
+        "UP_CHANNEL": "Sender aufwärts",
+        "DOWN_CHANNEL": "Sender abwärts",
+        "HEADER": "IPTVNator Fernbedienung",
+        "FOOTER": "IPTVNator Fernbedienung"
+    },
+    "WORKSPACE": {
+        "FAVORITES_ONLY": "Nur Favoriten",
+        "SORT_CUSTOM": "Eigene Reihenfolge",
+        "SORT_DATE_DESC": "Datum (Neueste zuerst)",
+        "SORT_DATE_ASC": "Datum (Älteste zuerst)",
+        "SORT_NAME_ASC": "Name A-Z",
+        "SORT_NAME_DESC": "Name Z-A",
+        "SORT_LABEL": "Sortierung: ",
+        "DASHBOARD": {
+            "CONTINUE_WATCHING": "Weiter schauen",
+            "UNTITLED_SOURCE": "Unbenannte Quelle",
+            "GLOBAL_FAVORITES": "Globale Favoriten",
+            "REMOVE_FROM_HISTORY": "Aus Verlauf entfernen",
+            "RECENT_SOURCES": "Zuletzt verwendete Quellen",
+            "MANAGE_ALL": "Alle verwalten",
+            "RECENTLY_WATCHED": "Zuletzt angesehen",
+            "XTREAM_RECENTLY_ADDED": "Neu auf Xtream",
+            "NO_HISTORY": "Keine Elemente für diesen Filter gefunden.",
+            "NO_HISTORY_HINT": "Dein Wiedergabeverlauf erscheint hier, sobald du Inhalte aus deinen Playlists abspielst.",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker",
+            "M3U": "M3U",
+            "STALKER_PORTAL": "Stalker-Portal",
+            "PROVIDER": "Anbieter",
+            "TYPE_LIVE": "Live",
+            "TYPE_MOVIE": "Film",
+            "TYPE_SERIES": "Serie",
+            "NOT_YET_SYNCED": "Noch nicht synchronisiert"
+        },
+        "SHELL": {
+            "BRAND_ALT": "IPTVnator",
+            "RAIL_DASHBOARD": "Dashboard",
+            "OPEN_DASHBOARD": "Dashboard öffnen",
+            "RAIL_SOURCES": "Quellen",
+            "OPEN_SOURCES": "Quellen öffnen",
+            "RAIL_SETTINGS": "Einstellungen",
+            "OPEN_SETTINGS": "Einstellungen öffnen",
+            "RAIL_LIBRARY": "Bibliothek",
+            "RAIL_MOVIES": "Filme",
+            "RAIL_LIVE": "Live-TV",
+            "RAIL_SERIES": "Serien",
+            "RAIL_RECENTLY_ADDED": "Zuletzt hinzugefügt",
+            "RAIL_SEARCH": "Erweiterte Suche",
+            "RAIL_RECENT": "Zuletzt angesehen",
+            "RAIL_FAVORITES": "Favoriten",
+            "RAIL_DOWNLOADS": "Downloads",
+            "RAIL_ALL_CHANNELS": "Alle Sender",
+            "RAIL_GROUPS": "Gruppen",
+            "RAIL_CONTEXT_ACTIONS": "Bereichsaktionen",
+            "SEARCH_LABEL": "Suche",
+            "SEARCH_SOURCES_PLACEHOLDER": "Quellen durchsuchen (alle Playlists)...",
+            "SEARCH_PLAYLIST_PLACEHOLDER": "In dieser Playlist suchen...",
+            "SEARCH_SECTION_PLACEHOLDER": "In diesem Abschnitt suchen...",
+            "FILTER_SECTION_PLACEHOLDER": "Diesen Abschnitt filtern...",
+            "SEARCH_STATUS_LOADED_ONLY": "Nur geladene Sender",
+            "COMMAND_PALETTE_SHORTCUT": "Befehlspalette (Ctrl/Cmd+K)",
+            "OPEN_COMMAND_PALETTE": "Befehlspalette öffnen",
+            "ADD_PLAYLIST_ALL": "Playlist hinzufügen (alle Playlists)",
+            "ADD_PLAYLIST": "Playlist hinzufügen",
+            "OPEN_DOWNLOADS": "Downloads öffnen",
+            "OPEN_CONTEXT_ACTIONS": "Bereichsaktionen öffnen",
+            "NO_SECTION_ACTIONS": "Keine Aktionen für diesen Abschnitt",
+            "PLAYLIST_INFO": "Playlist-Info",
+            "ACCOUNT_INFO": "Kontoinfo",
+            "REFRESH_PLAYLIST": "Playlist aktualisieren",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL": "Abgeschlossene Downloads löschen (alle Playlists)",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL_ARIA": "Abgeschlossene Downloads für alle Playlists löschen",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST": "Abgeschlossene Downloads löschen (diese Playlist)",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST_ARIA": "Abgeschlossene Downloads für diese Playlist löschen",
+            "CLEAR_RECENTLY_VIEWED_SECTION": "Zuletzt angesehen löschen",
+            "CLEAR_RECENTLY_VIEWED_SECTION_ARIA": "Zuletzt angesehen für diesen Abschnitt löschen",
+            "CLEAR_RECENTLY_VIEWED_TYPE": "Zuletzt angesehen ({{type}}) löschen",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_TITLE": "Zuletzt angesehen ({{type}}) löschen?",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_PLAYLIST": "Alle {{type}}-Einträge aus dieser Playlist werden aus dem Verlauf entfernt. Diese Aktion kann nicht rückgängig gemacht werden.",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_ALL": "Alle {{type}}-Einträge aus allen Playlists werden aus dem Verlauf entfernt. Diese Aktion kann nicht rückgängig gemacht werden.",
+            "CLEAR_FAVORITES_TYPE": "Favoriten ({{type}}) löschen",
+            "CLEAR_FAVORITES_DIALOG_TITLE": "Alle {{type}}-Favoriten entfernen?",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_PLAYLIST": "Alle {{type}}-Favoriten aus dieser Playlist werden entfernt. Diese Aktion kann nicht rückgängig gemacht werden.",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_ALL": "Alle {{type}}-Favoriten aus allen Playlists werden entfernt. Diese Aktion kann nicht rückgängig gemacht werden.",
+            "XTREAM_CODE": "Xtream Code",
+            "STALKER_PORTAL": "Stalker-Portal",
+            "CHANNELS_COUNT": "{{count}} Sender",
+            "NO_SOURCES_AVAILABLE": "Keine Quellen verfügbar",
+            "ONE_SOURCE_AVAILABLE": "1 Quelle verfügbar",
+            "SOURCES_AVAILABLE": "{{count}} Quellen verfügbar",
+            "XTREAM_IMPORT_TITLE": "Playlist wird synchronisiert",
+            "XTREAM_IMPORT_REMOTE_BADGE": "Remote-Quelle",
+            "XTREAM_IMPORT_LOCAL_BADGE": "Lokale Bibliothek",
+            "XTREAM_IMPORT_DETAIL_REMOTE": "Warte auf die Antwort des Providers.",
+            "XTREAM_IMPORT_DETAIL_LOCAL": "Bereitet schnellere Playlist-Wechsel für den nächsten Besuch vor.",
+            "XTREAM_IMPORT_PREPARING": "Lokale Bibliothek wird vorbereitet...",
+            "XTREAM_IMPORT_LOADING": "Playlist-Daten werden von der Quelle geladen...",
+            "XTREAM_IMPORT_SAVING": "Playlist-Daten werden lokal gespeichert...",
+            "XTREAM_IMPORT_RESTORING_FAVORITES": "Favoriten werden aus der lokalen Bibliothek wiederhergestellt...",
+            "XTREAM_IMPORT_RESTORING_RECENT": "Zuletzt angesehene Inhalte werden aus der lokalen Bibliothek wiederhergestellt...",
+            "XTREAM_IMPORT_PROGRESS": "{{type}} importiert: {{current}} / {{total}}",
+            "XTREAM_IMPORT_CANCEL": "Synchronisierung stoppen",
+            "XTREAM_IMPORT_CANCELLING": "Synchronisierung wird gestoppt...",
+            "COMMANDS": {
+                "GLOBAL_SEARCH_LABEL": "Alle Xtream-Playlists durchsuchen",
+                "GLOBAL_SEARCH_DESCRIPTION": "Globale Suchüberlagerung öffnen",
+                "PLAYLIST_SEARCH_LABEL": "Erweiterte Suche in dieser Playlist",
+                "PLAYLIST_SEARCH_DESCRIPTION": "Erweiterte Suchansicht der Playlist öffnen",
+                "OPEN_GLOBAL_FAVORITES_LABEL": "Globale Favoriten öffnen",
+                "OPEN_GLOBAL_FAVORITES_DESCRIPTION": "Zur aggregierten Favoritenansicht wechseln",
+                "OPEN_DOWNLOADS_LABEL": "Downloads öffnen",
+                "OPEN_DOWNLOADS_DESCRIPTION": "Zur Download-Ansicht wechseln",
+                "OPEN_GLOBAL_RECENT_LABEL": "Zuletzt angesehen öffnen",
+                "OPEN_GLOBAL_RECENT_DESCRIPTION": "Globale Zuletzt-angesehen-Seite öffnen",
+                "OPEN_SETTINGS_LABEL": "Einstellungen öffnen",
+                "OPEN_SETTINGS_DESCRIPTION": "Zu den Anwendungseinstellungen",
+                "OPEN_SOURCES_LABEL": "Quellen verwalten",
+                "OPEN_SOURCES_DESCRIPTION": "Zur Quellenverwaltung",
+                "OPEN_DASHBOARD_LABEL": "Dashboard öffnen",
+                "OPEN_DASHBOARD_DESCRIPTION": "Zum Dashboard navigieren",
+                "ADD_PLAYLIST_LABEL": "Neue Quelle hinzufügen",
+                "ADD_PLAYLIST_DESCRIPTION": "Dialog zum Hinzufügen öffnen",
+                "REFRESH_PLAYLIST_LABEL": "Playlist aktualisieren",
+                "REFRESH_PLAYLIST_DESCRIPTION": "Daten von der Quelle neu laden",
+                "PLAYLIST_INFO_LABEL": "Playlist-Details",
+                "PLAYLIST_INFO_DESCRIPTION": "Aktuelle Playlist-Informationen anzeigen",
+                "ACCOUNT_INFO_LABEL": "Kontoinformationen",
+                "ACCOUNT_INFO_DESCRIPTION": "Xtream-Server-Kontodaten anzeigen",
+                "OPEN_VIEW_DESCRIPTION": "Zu {{view}} wechseln",
+                "CLEAR_CURRENT_VIEW_DESCRIPTION": "Alle sichtbaren {{type}}-Einträge in dieser Ansicht löschen",
+                "OPEN_MULTI_EPG_DESCRIPTION": "Die Multi-EPG-Ansicht öffnen",
+                "GO_TO_VOD_LABEL": "Filme",
+                "GO_TO_VOD_DESCRIPTION": "Zum Filmbereich wechseln",
+                "GO_TO_LIVE_LABEL": "Live-TV",
+                "GO_TO_LIVE_DESCRIPTION": "Zum Live-TV-Bereich wechseln",
+                "GO_TO_SERIES_LABEL": "Serien",
+                "GO_TO_SERIES_DESCRIPTION": "Zum Serienbereich wechseln",
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "SOURCES": {
+            "TITLE": "Quellen",
+            "SUBTITLE": "Playlists filtern und sortieren",
+            "TYPE": "Typ",
+            "ALL": "Alle",
+            "M3U_PLAYLISTS": "M3U-Playlists",
+            "XTREAM_PLAYLISTS": "Xtream-Playlists",
+            "STALKER_PLAYLISTS": "Stalker-Playlists",
+            "ALL_PLAYLISTS": "Alle Playlists",
+            "PLAYLIST_COUNT_ONE": "1 Playlist",
+            "PLAYLIST_COUNT_OTHER": "{{count}} Playlists"
+        },
+        "CONTEXT": {
+            "CATEGORIES": "Kategorien",
+            "MOVIE_CATEGORIES": "Filmkategorien",
+            "SERIES_CATEGORIES": "Serienkategorien",
+            "LIVE_CATEGORIES": "Live-Kategorien",
+            "XTREAM_SYNCING_MOVIES": "Filmkategorien werden synchronisiert...",
+            "XTREAM_SYNCING_SERIES": "Serienkategorien werden synchronisiert...",
+            "XTREAM_SYNCING_LIVE": "Live-Kategorien werden synchronisiert...",
+            "XTREAM_SOURCE": "Xtream-Quelle",
+            "STALKER_PORTAL": "Stalker-Portal",
+            "MANAGE_CATEGORIES": "Kategorien verwalten",
+            "LOAD_CATEGORIES_ERROR": "Kategorien konnten nicht geladen werden",
+            "LOAD_CATEGORIES_ERROR_HINT": "Bitte erneut versuchen oder die Portal-Einstellungen prüfen.",
+            "FILTER_BY_TYPE": "Nach Typ filtern",
+            "ITEM_COUNT_ONE": "1 Element",
+            "ITEM_COUNT_OTHER": "{{count}} Elemente",
+            "SEARCH": "Suchen",
+            "SEARCH_CATEGORIES": "Kategorien suchen"
+        },
+        "COMMAND_PALETTE": {
+            "TITLE": "Befehlspalette",
+            "SUBTITLE": "Globale und kontextbezogene Aktionen",
+            "SEARCH_PLACEHOLDER": "Zum Filtern der Befehle tippen",
+            "SEARCH_LABEL": "Befehle filtern",
+            "EMPTY": "Keine Befehle gefunden",
+            "GROUP_GLOBAL": "Globale Aktionen",
+            "GROUP_PLAYLIST": "Diese Playlist",
+            "GROUP_VIEW": "Aktuelle Ansicht",
+            "GROUP_SECTION": "Dieser Abschnitt"
+        },
+        "GLOBAL_FAVORITES": {
+            "TITLE": "Globale Favoriten",
+            "SUBTITLE": "Live-TV aus allen Playlists",
+            "SEARCH_PLACEHOLDER": "Favoriten durchsuchen...",
+            "NO_RESULTS": "Keine Ergebnisse",
+            "NO_RESULTS_HINT": "Versuche einen anderen Suchbegriff",
+            "EMPTY_TITLE": "Noch keine Live-TV-Favoriten",
+            "EMPTY_HINT": "Markiere Live-Kanäle aus M3U-, Xtream- oder Stalker-Playlists mit einem Stern, damit sie hier erscheinen.",
+            "EMPTY_PLAYER": "Wähle einen Sender zum Starten",
+            "UNKNOWN_CHANNEL": "Unbekannt",
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    }
+}
diff --git a/apps/web/src/assets/i18n/el.json b/apps/web/src/assets/i18n/el.json
new file mode 100644
index 0000000..67baeb5
--- /dev/null
+++ b/apps/web/src/assets/i18n/el.json
@@ -0,0 +1,551 @@
+{
+    "CLOSE": "Κλείσιμο",
+    "PLAYLISTS": "Λίστα Αναπαραγωγής",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Παρακαλώ επιλέξτε μια λίστα αναπαραγωγής από την λίστα ή προσθέστε μια νέα",
+        "TABS": {
+            "RECENTLY_ADDED": "Λίστες που έχουν προστεθεί πρόσφατα",
+            "FILE_UPLOAD": "Προσθήκη αρχείου",
+            "URL_UPLOAD": "Προσθήκη διεύθυνσης URL",
+            "TEXT_IMPORT": "Προσθήκη κειμένου",
+            "XTREME_IMPORT": "Προσθήκη Xtreme Code",
+            "STALKER_PORTAL_IMPORT": "Προσθήκη Stalker Portal"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Δεν προστέθηκε λίστα αναπαραγωγής",
+            "ADD_FIRST": "Παρακαλώ προσθέστε την πρώτη σας λίστα",
+            "WELCOME_TITLE": "Καλώς ήλθατε στο IPTVnator",
+            "WELCOME_DESCRIPTION": "Ξεκινήστε την διασκέδαση προσθέτοντας την πρώτη σας λίστα αναπαραγωγής. Συνδεθείτε στην αγαπημένη σας υπηρεσία IPTV και απολαύστε ζωντανή τηλεόραση, ταινίες και σειρές.",
+            "ADD_YOUR_FIRST": "Προσθέστε την πρώτη σας λίστα αναπαραγωγής",
+            "FEATURE_M3U": "M3U/M3U8 Αρχεία",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Stalker Portal",
+            "NO_RESULTS_TITLE": "Δεν βρέθηκε λίστα αναπαραγωγής",
+            "NO_RESULTS_DESCRIPTION": "Δεν υπάρχουν λίστες αναπαραγωγής που να αντιστοιχούν στην αναζήτησή σας. Δοκιμάστε να προσαρμόσετε τους όρους αναζήτησης ή να καταργήσετε το φίλτρο για να δείτε όλες τις λίστες αναπαραγωγής.",
+            "ADDED_VIA_URL": "Προστέθηκε από ανέβασμα διεύθυνσης URL. URL:",
+            "ADDED_VIA_FILE": "Προστέθηκε από ανέβασμα αρχείου",
+            "XTREAM_PLAYLIST": "Xtream playlist",
+            "STALKER_PORTAL": "Stalker portal",
+            "CHANNELS": "Κανάλια",
+            "ADDED": "Προστέθηκε",
+            "SHOW_DETAILS": "Λεπτομέρειες λίστας αναπαραγωγής",
+            "REMOVE": "Διαγραφή λίστας αναπαραγωγής",
+            "SEARCH_PLAYLISTS": "Αναζήτηση των λιστών αναπαραγωγής με βάση τον τίτλο",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Λεπτομέρειες λίστας αναπαραγωγής",
+                "TITLE": "Title",
+                "FROM_URL": "Προστέθηκε από διεύθυνση URL",
+                "IMPORT_DATE": "Προσθήκη ημερομηνίας",
+                "CHANNELS": "Αριθμός καναλιών",
+                "CLOSE": "Κλείσιμο",
+                "SAVE": "Αποθήκευση",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "Αρχικό όνομα αρχείου",
+                "FILE_PATH": "Διαδρομή αρχείου",
+                "UPDATE_FAILED": "Σφάλμα αναβάθμισης της τελευταίας λίστας αναπαραγωγής",
+                "AUTO_UPDATE": "Αυτόματη αναβάθμιση",
+                "AUTO_UPDATE_DESCRIPTION": "Εάν η λειτουργία αυτόματης ανανέωσης είναι ενεργοποιημένη, η λίστα αναπαραγωγής θα ενημερώνεται αυτόματα κάθε φορά που ξεκινά η εφαρμογή.",
+                "CUSTOM_USER_AGENT": "Ορισμένοι πάροχοι IPTV χρειάζονται έναν συγκεκριμένο user-agent για να αναπαράγουν τη λίστα αναπαραγωγής τους.",
+                "EXPORT_PLAYLIST": "Εξαγωγή λίστας αναπαραγωγής σε m3u",
+                "SERVER_URL": "Διεύθηνση URL του σέρβερ",
+                "USERNAME": "Όνομα χρήστη",
+                "PASSWORD": "Κωδικός πρόσβασης",
+                "MAC_ADDRESS": "Mac Address",
+                "PLAYLIST_EXPORT_SUCCESS": "Η εξαγωγή της λίστας αναπαραγωγής ολοκληρώθηκε με επιτυχία.",
+                "PLAYLIST_EXPORT_ERROR": "Σφάλμα: Η εξαγωγή της λίστας αναπαραγωγής απέτυχε.",
+                "COPY_URL": "Αντιγραφή διεύθηνσης URL στο πρόχειρο",
+                "URL_COPIED": "Η διεύθυνση URL αντιγράφηκε στο πρόχειρο"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Διαγραφή λίστας αναπαραγωγής",
+                "MESSAGE": "Είστε βέβαιοι ότι θέλετε να διαγράψετε οριστικά αυτήν τη λίστα αναπαραγωγής;",
+                "SUCCESS": "Η λίστα αναπαραγωγής αφαιρέθηκε με επιτυχία."
+            },
+            "UPDATED": "Ενημερώθηκε",
+            "REFRESH": "Ανανέωση λίστας αναπαραγωγής",
+            "REFRESH_XTREAM": "Ανανέωση Xtream λίστας από το τηλεκοντρόλ",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Ανανέωση Xtream λίστας",
+                "MESSAGE": "Αυτό θα διαγράψει τις τοπικά αποθηκευμένες κατηγορίες και ροές και θα εισαγάγει ξανά τα πάντα από τον απομακρυσμένο διακομιστή. Τα αγαπημένα σας και τα πρόσφατα προβληθέντα στοιχεία θα διατηρηθούν. Είστε βέβαιοι ότι θέλετε να συνεχίσετε;",
+                "STARTED": "Η ανανέωση ξεκίνησε. Πλοήγηση στη λίστα αναπαραγωγής...",
+                "ERROR": "Η ανανέωση της λίστας αναπαραγωγής απέτυχε. Δοκιμάστε ξανά."
+            },
+            "GLOBAL_FAVORITES": "Βασικά Αγαπημένα",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Αυτόματα δημιουργημένη λίστα αναπαραγωγής με συλλογή αγαπημένων από όλες τις λίστες αναπαραγωγής",
+            "MY_PLAYLISTS": "Οι λίστες αναπαραγωγής μου",
+            "MY_PLAYLISTS_SUBTITLE": "όλες οι διαθέσιμες λίστες αναπαραγωγής",
+            "PLAYLIST_UPDATE_SUCCESS": "Επιτυχία! Η λίστα αναπαραγωγής ενημερώθηκε με επιτυχία.",
+            "PLAYLIST_UPDATE_ERROR": "Σφάλμα κατά την ενημέρωση των λεπτομερειών της λίστας αναπαραγωγής.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Επιτυχία! Οι λίστες αναπαραγωγής ενημερώθηκαν με επιτυχία",
+            "AUTO_REFRESH_ENABLED": "Η αυτόματη ανανέωση είναι ενεργοποιημένη",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Σύρετε και αποθέστε αρχεία εδώ",
+            "OR": "or",
+            "CHOOSE_PLAYLIST": "επιλέξτε μια λίστα αναπαραγωγής",
+            "REJECTED": "Το αρχείο απορρίφθηκε, η μορφή αρχείου δεν υποστηρίζεται {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Διεύθηνση URL λίστας αναπαραγωγής (m3u, m3u8)",
+            "ADD_PLAYLIST": "Προσθήκη λίστας αναπαραγωγής",
+            "CORS_NOTE": "Σημείωση: Για την αποφυγή προβλημάτων CORS σε αυτό το σημείο, η εφαρμογή χρησιμοποιεί μια δημόσια υπηρεσία CORS Proxy. Εάν θέλετε να ανεβάσετε μια λίστα αναπαραγωγής με ευαίσθητα δεδομένα, είναι πιο ασφαλές να την εισαγάγετε από ένα αρχείο."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Προσθήκη m3u(8) λίστας αναπαραγωγής ως κείμενο",
+            "BUTTON_LABEL": "Εισαγωγή"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Τίτλος λίστας αναπαραγωγής",
+            "SERVER_URL": "Διεύθηνση URL σέρβερ",
+            "USERNAME": "Όνομα χρήστη",
+            "PASSWORD": "Κωδικός πρόσβασης",
+            "ADD": "Προσθήκη",
+            "TEST_CREDENTIALS": "Δοκιμή διαπιστευτήριων",
+            "URL_VALIDATION_ERROR": "Θα πρέπει να είναι μια έγκυρη διεύθυνση URL με πρωτόκολλο (π.χ. http://example.com ή https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Τίτλος",
+            "MAC_ADDRESS": "Mac Address",
+            "SERIAL_NUMBER": "Σειριακός αριθμός (Προαιρετικό)",
+            "SERIAL_NUMBER_HINT": "Χρησιμοποιήστε εάν είστε ήδη εγγεγραμμένος στον πάροχο",
+            "DEVICE_ID_1": "Αναγνωριστικό συσκευής 1 (Προαιρετικό)",
+            "DEVICE_ID_2": "Αναγνωριστικό συσκευής 2 (Προαιρετικό)",
+            "DEVICE_ID_HINT": "64 δεκαεξαδικοί χαρακτήρες - χρησιμοποιήστε εάν ο πάροχος απαιτεί συγκεκριμένο αναγνωριστικό συσκευής",
+            "SIGNATURE_1": "Υπογραφή 1 (Προαιρετικό)",
+            "SIGNATURE_2": "Υπογραφή 2 (Προαιρετικό)",
+            "SIGNATURE_HINT": "64 δεκαεξαδικοί χαρακτήρες - χρησιμοποιήστε εάν ο πάροχος απαιτεί υπογραφές επαλήθευσης συσκευής",
+            "SERVER_URL": "Διεύθηνση URL σέρβερ",
+            "URL_VALIDATION_ERROR": "Θα πρέπει να είναι μια έγκυρη διεύθυνση URL με πρωτόκολλο (π.χ. http://example.com/c ή https://example.com/stalker_portal/c)",
+            "ADD": "Προσθήκη",
+            "VALIDATING": "Επικύρωση πύλης..."
+        },
+        "FILTER_BY_NAME": "Φιλτράρισμα κατά όνομα",
+        "FILTER_BY_TYPE": "Τύποι λιστών αναπαραγωγής",
+        "FILTER_AND_SORT": "Φιλτράρισμα & Ταξινόμηση",
+        "SORT_PLAYLISTS": "Ταξινόμηση λιστών αναπαραγωγής",
+        "SORT_BY": "Ταξινόμηση κατά",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Όνομα (A-Z)",
+            "NAME_DESC": "Όνομα (Z-A)",
+            "NEWEST": "Ημερομηνία προσθήκης (Πρώτα τα νεότερα)",
+            "OLDEST": "Ημερομηνία προσθήκης (Πρώτα το παλαιότερο)"
+        },
+        "PLAYLIST_TYPES": {
+            "M3U": "M3U (τοπικό, διεύθυνση url, κείμενο)",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker"
+        },
+        "IMPORTED_AS_TEXT": "Εισήχθη ως κείμενο",
+        "PARSING_ERROR": "Σφάλμα: Η ανάλυση απέτυχε, δεν είναι έγκυρη λίστα αναπαραγωγής:"
+    },
+    "SETTINGS": {
+        "TITLE": "Ρυθμίσεις",
+        "SUBTITLE": "Αλλαγή της διαμόρφωσης της εφαρμογής",
+        "DESCRIPTION": "Παρακαλώ προσαρμόστε τις επιλογές από την παρακάτω λίστα και επιβεβαιώστε με το κουμπί αποθήκευσης αλλαγών",
+        "EPG_URL_LABEL": "EPG Url (*.xml ή *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Εξαγωγή μιας διεύθυνσης URL",
+        "REFRESH_EPG": "Ανανέωση EPG",
+        "REFRESH_ALL_EPG": "Ανανέωση όλων",
+        "REMOVE_EPG_SOURCE": "Αφαίρεση πηγής EPG",
+        "EPG_STATUS_FRESH": "Ενημερωμένο",
+        "EPG_STATUS_STALE": "Χρειάζεται ανανέωση",
+        "EPG_STATUS_ERROR": "Αποτυχία",
+        "VIDEO_PLAYER_LABEL": "Προγράμμα αναπαραγωγής βίντεο",
+        "VIDEO_PLAYER_PLACEHOLDER": "Επιλέξτε μια επιλογή",
+        "VERSION": "Έκδοση",
+        "SAVE_CHANGES": "Αποθήκευση αλλαγών",
+        "BACK_TO_HOME": "Πίσω",
+        "NEW_VERSION_AVAILABLE": "Υπάρχει διαθέσιμη μια νέα έκδοση",
+        "LATEST_VERSION": "Χρησιμοποιείτε την πιο πρόσφατη έκδοση",
+        "STREAM_FORMAT": "Μορφή Stream",
+        "LANGUAGE": "Γλώσσα",
+        "SETTINGS_SAVED": "Επιτυχία! Η διαμόρφωση αποθηκεύτηκε.",
+        "THEME": "Οπτικό θέμα",
+        "SHOW_CAPTIONS": "Εμφάνιση υπότιτλων",
+        "ADD_EPG_SOURCE": "Προσθήκη πηγής EPG",
+        "CLEAR_EPG_DATA": "Διαγραφή δεδομένων EPG",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "Διαγραφή δεδομένων EPG",
+            "MESSAGE": "Είστε βέβαιοι ότι θέλετε να καταργήσετε όλα τα δεδομένα EPG (Ηλεκτρονικός Οδηγός Προγράμματος) από τη βάση δεδομένων; Αυτή η ενέργεια θα διαγράψει όλους τους αποθηκευμένους προγραμματισμούς εγγραφής."
+        },
+        "EPG_DATA_CLEARED": "Τα δεδομένα EPG έχουν διαγραφεί",
+        "EPG_DATA_CLEAR_FAILED": "Αποτυχία διαγραφής δεδομένων EPG. Παρακαλώ δοκιμάστε ξανά.",
+        "CLEARING_EPG_DATA": "Διαγραφή…",
+        "EPG_URL_ERROR": "Η τιμή δεν είναι έγκυρη διεύθυνση URL",
+        "VIDEO_PLAYER_DESCRIPTION": "Επιλογή προεπιλεγμένου προγράμματος αναπαραγωγής βίντεο",
+        "STREAM_FORMAT_DESCRIPTION": "Επιλογή προεπιλεγμένης μορφής ροής (xtream)",
+        "LANGUAGE_DESCRIPTION": "Επιλέξτε τη γλώσσα της εφαρμογής",
+        "THEME_DESCRIPTION": "Επιλέξτε οπτικό θέμα της εφαρμογής",
+        "SHOW_CAPTIONS_DESCRIPTION": "Εμφάνιση ή απόκρυψη υποτίτλων από προεπιλογή",
+        "VERSION_DESCRIPTION": "Τρέχουσα έκδοση της εφαρμογής",
+        "EPG_NOTE": "Προς το παρόν, το EPG είναι διαθέσιμο μόνο στην ηλεκτρονική έκδοση του IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Ελέγξτε το εδώ",
+        "IMPORT_EXPORT_DATA": "Εισαγωγή/εξαγωγή λιστών αναπαραγωγής",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Εξαγωγή ή εισαγωγή λιστών αναπαραγωγής στη μορφή JSON που χρησιμοποιείται στην εφαρμογή.",
+        "IMPORT_DATA": "Εισαγωγή",
+        "EXPORT_DATA": "Εξαγωγή",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Σφάλμα εισαγωγής, δοκιμάστε με άλλο αρχείο.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "διαδρομή mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Ορίστε τη διαδρομή προς το mpv player στο σύστημά σας. Θα χρησιμοποιήσει την παρεχόμενη διαδρομή προς ένα δυαδικό αρχείο mpv αντί για αυτήν που βρίσκεται στο $PATH.",
+        "MPV_PLAYER_PATH": "διαδρομή mpv προγράμματος αναπαραγωγής",
+        "MPV_REUSE_INSTANCE_LABEL": "Επαναχρησιμοποίηση της παρουσίας MPV",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "Όταν είναι ενεργοποιημένη, το ίδιο παράθυρο MPV θα επαναχρησιμοποιηθεί για την αναπαραγωγή διαφορετικών ροών. Όταν είναι απενεργοποιημένη, κάθε ροή ανοίγει σε ένα νέο παράθυρο MPV.",
+        "VLC_PLAYER_PATH_LABEL": "διαδρομή VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Ορίστε τη διαδρομή προς το VLC player στο σύστημά σας. Θα χρησιμοποιήσει την παρεχόμενη διαδρομή προς ένα δυαδικό αρχείο VLC αντί για την προεπιλεγμένη διαδρομή για το σύστημά μας.",
+        "VLC_PLAYER_PATH": "διαδρομή VLC player",
+        "REMOTE_CONTROL": "Τηλεχειριστήριο",
+        "REMOTE_CONTROL_DESCRIPTION": "Ενεργοποιήστε τον τηλεχειρισμό της εφαρμογής.",
+        "REMOTE_CONTROL_PORT": "Θύρα τηλεχειριστηρίου",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Θύρα που χρησιμοποιείται για τον τηλεχειρισμό της εφαρμογής. Η θύρα 8765 χρησιμοποιείται από προεπιλογή.",
+        "REMOTE_CONTROL_URL": "διεύθυνση URL για τηλεχειρισμό",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Αποκτήστε πρόσβαση στο τηλεχειριστήριο από άλλη συσκευή στο ίδιο δίκτυο.",
+        "SHOW_QR_CODE": "Εμφάνιση QR code",
+        "PORT_REQUIRED": "Απαιτείται θύρα",
+        "PORT_MIN": "Η θύρα πρέπει να είναι τουλάχιστον 1",
+        "PORT_MAX": "Η θύρα πρέπει να είναι το πολύ 65535",
+        "PORT_PATTERN": "Επιτρέπονται μόνο αριθμητικά ψηφία",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Σκούρο θέμα",
+        "LIGHT_THEME": "Ανοιχτόχρωμο θέμα",
+        "SYSTEM_THEME": "Θέμα συστήματος"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Αναζήτηση καναλιού",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Μεταφορτώστε ή επιλέξτε άλλη λίστα αναπαραγωγής",
+        "ALL_CHANNELS": "Όλα τα κανάλια",
+        "GROUPS": "Ομάδες",
+        "UNGROUPED": "Μη ομαδοποιημένα",
+        "UNNAMED_CHANNEL": "Κανάλι χωρίς όνομα",
+        "FAVORITES": "Αγαπημένα",
+        "NO_FAVORITES": "Δεν υπάρχουν ακόμα αγαπημένα",
+        "USE_STAR_TO_FAVORITE": "Χρησιμοποιήστε το εικονίδιο με το «αστέρι» για να προσθέσετε κανάλια στα αγαπημένα σας.",
+        "REMOVE_FAVORITE": "Αφαίρεση από τα αγαπημένα",
+        "FAVORITES_UPDATED": "Τα αγαπημένα ενημερώθηκαν!",
+        "SORT_BY": "Ταξινόμηση κατά",
+        "SORT_BY_DATE": "Ταξινόμηση κατά Ημερομηνία Προσθήκης (Πρώτα τα Νεότερα)",
+        "SORT_BY_RATING": "Ταξινόμηση κατά Βαθμολογία",
+        "SORT_BY_NAME": "Ταξινόμηση κατά Όνομα (A-Z)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Άνοιγμα λίστας καναλιών",
+        "TOGGLE_FAVORITE_FLAG": "Εναλλαγή σημαίας αγαπημένων",
+        "OPEN_EPG_LIST": "Άνοιγμα λίστας EPG",
+        "OPEN_MULTI_EPG": "Άνοιγμα προβολής Πολλαπλού EPG",
+        "SHOW_INFO": "Εμφάνιση πληροφοριών προγράμματος (Πατήστε το I)"
+    },
+    "EPG": {
+        "TITLE": "Ηλεκτρονικός Οδηγός Προγράμματος",
+        "NEXT_DAY": "Επόμενη μέρα",
+        "PREVIOUS_DAY": "Προηγούμενη ημέρα",
+        "LIVE_NOW": "Ζωντανά τώρα",
+        "LIVE_STREAM": "Ζωντανή ροή",
+        "TIMESHIFT_AVAILABLE": "Η χρονική μετατόπιση είναι διαθέσιμη, κάντε κλικ για αναπαραγωγή.",
+        "EPG_NOT_AVAILABLE_DATE": "Ωχ, το EPG δεν είναι διαθέσιμο για την επιλεγμένη ημερομηνία",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ωχ, το EPG δεν είναι διαθέσιμο για αυτό το κανάλι.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Προσθέστε/αλλάξτε τη διεύθυνση URL της λίστας EPG στις ρυθμίσεις της εφαρμογής.",
+        "FETCH_EPG": "Ανάκτηση δεδομένων EPG...",
+        "ERROR": "Ωχ, δεν ήταν δυνατή η φόρτωση του EPG.",
+        "DOWNLOAD_SUCCESS": "Το EPG λήφθηκε με επιτυχία.",
+        "NO_PROGRAM_INFO": "Δεν υπάρχουν διαθέσιμες πληροφορίες προγράμματος",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Λεπτομέρειες για το τηλεοπτικό πρόγραμμα",
+            "TITLE": "Τίτλος",
+            "CATEGORY": "Κατηγορία",
+            "PARENTAL_RATING_SYSTEM": "Βαθμολογία",
+            "DESCRIPTION": "Περιγραφή",
+            "LANGUAGE": "Γλώσσα",
+            "SHOW_PROGRAM_DETAILS": "Εμφάνιση λεπτομερειών σχετικά με αυτό το πρόγραμμα",
+            "EPISODE": "Επεισόδιο",
+            "DURATION": "Διάρκεια"
+        },
+        "FETCH_SUCCESS": "Το EPG ανακτήθηκε με επιτυχία",
+        "IMPORT_PROGRESS": "Εισαγωγή Ηλεκτρονικού Οδηγού Προγράμματος (EPG)",
+        "CHANNELS": "κανάλια",
+        "PROGRAMS": "προγράμματα",
+        "LOADING": "Φόρτωση",
+        "QUEUED": "Σε ουρά",
+        "TOTAL_CHANNELS": "Σύνολο καναλιών",
+        "TOTAL_PROGRAMS": "Σύνολο προγραμμάτων",
+        "UP_TO_DATE": "Το EPG είναι ενημερωμένο, δεν απαιτείται συγχρονισμός",
+        "RETRY": "Επανάληψη"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Ναι",
+    "NO": "Όχι",
+    "MENU": {
+        "OPEN": "Άνοιγμα μενού",
+        "SUPPORT_ARIA": "Υποστήριξη του IPTVnator στο GitHub",
+        "SETTINGS": "Ρυθμίσεις",
+        "SETTINGS_ARIA": "Άνοιγμα ρυθμίσεων",
+        "BUG_REPORT": "Αναφορά σφάλματος",
+        "WHAT_IS_NEW": "Τι νέο υπάρχει",
+        "ABOUT": "Πληροφορίες",
+        "ABOUT_ARIA": "Σχετικά με την εφαρμογή",
+        "SUPPORT_PROJECT": "Υποστήριξη του έργου"
+    },
+    "ABOUT": {
+        "TITLE": "Σχετικά με το IPTVnator",
+        "DESCRIPTION": "Εφαρμογή αναπαραγωγής IPTV από πολλαπλές πλατφόρμες με πολλαπλές λειτουργίες, όπως υποστήριξη λιστών αναπαραγωγής m3u και m3u8, αγαπημένα, οδηγό τηλεόρασης, αρχείο/catchup τηλεόρασης και πολλά άλλα.",
+        "VERSION": "Έκδοση",
+        "GITHUB_TOOLTIP": "ITPVnator repository στο GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Κέρασέ μου έναν καφέ",
+        "TWITTER_TOOLTIP": "Κοινοποίηση στο Twitter"
+    },
+    "UPDATE_AVAILABLE": "Διαθέσιμη ενημέρωση",
+    "REFRESH": "Ανανέωση",
+    "XTREAM": {
+        "PLAY": "Αναπαραγωγή",
+        "OPENING_PLAYER": "Εκκίνηση προγράμματος αναπαραγωγής...",
+        "NAME": "Όνομα",
+        "RELEASE_DATE": "Ημερομηνία κυκλοφορίας",
+        "GENRE": "Είδος",
+        "COUNTRY": "Χώρα",
+        "ACTORS": "Ηθοποιοί",
+        "DIRECTOR": "Σκηνοθέτης",
+        "DURATION": "Διάρκεια",
+        "CAST": "Πρόσωπα",
+        "EPISODE_RUN_TIME": "Διάρκεια επεισοδίου",
+        "RATING": "Βαθμολογία",
+        "IMDB_RATING": " Βαθμολογία IMDB",
+        "KINOPOISK_RATING": "Βαθμολογία Kinopoisk",
+        "DESCRIPTION": "Περιγραφή",
+        "YEAR": "Έτος",
+        "AGE": "Ηλικία",
+        "YOUTUBE_TRAILER": "YouTube Trailer",
+        "EPISODE": "Επεισόδιο",
+        "ACCOUNT_INFO": {
+            "TITLE": "Πληροφορίες Λογαριασμού",
+            "USER_INFO": "Πληροφορίες χρήστη",
+            "STATUS": "Κατάσταση",
+            "USERNAME": "Όνομα χρήστη",
+            "ACTIVE_CONNECTIONS": "Ενεργές συνδέσεις",
+            "CREATED": "Δημιουργήθηκε",
+            "EXPIRES": "Λήγει",
+            "TRIAL_ACCOUNT": "Δοκιμαστικός Λογαριασμός",
+            "YES": "Ναι",
+            "NO": "Όχι",
+            "ALLOWED_FORMATS": "Επιτρεπόμενες μορφές",
+            "SERVER_INFO": "Πληροφορίες διακομιστή",
+            "LIVE_TV": "Ζωντανή TV",
+            "MOVIES": "Ταινίες",
+            "TV_SERIES": "Σειρές",
+            "URL": "Διεύθυνση URL",
+            "PROTOCOL": "Πρωτόκολλο",
+            "TIMEZONE": "Ζώνη ώρας",
+            "SERVER_TIME": "Ώρα διακομιστή",
+            "PORTS": "Θύρες",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        },
+        "CATEGORY_MANAGEMENT": {
+            "TITLE": "Διαχείριση κατηγοριών",
+            "LOADING": "Φόρτωση κατηγοριών...",
+            "SELECTED": "Επιλεγμένα",
+            "SELECT_ALL": "Επιλογή όλων",
+            "DESELECT_ALL": "Αποεπιλογή όλων",
+            "SEARCH_PLACEHOLDER": "Αναζήτηση κατηγοριών...",
+            "NO_RESULTS": "Δεν βρέθηκαν αντίστοιχες κατηγορίες",
+            "NO_CATEGORIES": "Δεν υπάρχουν διαθέσιμες κατηγορίες",
+            "SAVE": "Αποθήκευση"
+        }
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Όλες οι κατηγορίες",
+        "MY_FAVORITES": "Τα αγαπημένα μου",
+        "ADD_TO_FAVORITES": "Προσθήκη στα αγαπημένα",
+        "REMOVE_FROM_FAVORITES": "Αφαίρεση από τα αγαπημένα",
+        "REMOVED_FROM_FAVORITES": "Αφαιρέθηκε από τα αγαπημένα",
+        "ADDED_TO_FAVORITES": "Προστέθηκε στα αγαπημένα",
+        "SIDEBAR": {
+            "MAIN": "Κύριο",
+            "MOVIES": "Ταινίες",
+            "LIVE_TV": "Ζωντανή TV",
+            "SERIES": "Σειρές",
+            "LIBRARY": "Βιβλιοθήκη",
+            "SEARCH": "Αναζήτηση",
+            "RECENT": "Πρόσφατα",
+            "RECENTLY_ADDED": "Πρόσφατα προστέθηκε",
+            "FAVORITES": "Αγαπημένα",
+            "HOME": "Αρχικό",
+            "PLAYLIST_INFO": "Πληροφορίες λίστας αναπαραγωγής",
+            "ACCOUNT_INFO": "Πληροφορίες λογαριασμού"
+        },
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Ο λογαριασμός έληξε",
+                "DESCRIPTION": "Αυτός ο λογαριασμός έχει λήξει. Ελέγξτε τα διαπιστευτήρια στις ρυθμίσεις της λίστας αναπαραγωγής ή καταργήστε τον."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Ανεξουσιοδότητος",
+                "DESCRIPTION": "Ελέγξτε τα διαπιστευτήρια στις ρυθμίσεις της λίστας αναπαραγωγής ή καταργήστε τα."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Ο διακομιστής δεν βρέθηκε",
+                "DESCRIPTION": "Παρακαλώ ελέγξτε τα διαπιστευτήρια και τη διεύθυνση URL της πύλης στις ρυθμίσεις της λίστας αναπαραγωγής ή καταργήστε την."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Κενή κατηγορία",
+                "DESCRIPTION": "Αυτή η κατηγορία δεν έχει περιεχόμενο, επιλέξτε άλλη κατηγορία ή αλλάξτε τον τύπο περιεχομένου"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Κάτι πήγε στραβά",
+                "DESCRIPTION": "Άγνωστο σφάλμα, δοκιμάστε ξανά αργότερα"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "Δεν έχει επιλεγεί κατηγορία",
+                "DESCRIPTION": "Επιλέξτε μια κατηγορία για να δείτε το περιεχόμενο"
+            },
+            "PLAYLIST_SETTINGS": "Ρυθμίσεις λίστας αναπαραγωγής",
+            "HOME": "Αρχικό",
+            "DELETE": "Διαγραφή"
+        },
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "Δεν βρέθηκαν αποτελέσματα",
+            "NO_SEARCH_RESULTS": "Δεν βρέθηκε τίποτα, δοκιμάστε να αλλάξετε το αίτημα αναζήτησής σας"
+        },
+        "SEARCH_VIEW": {
+            "INITIAL_TITLE": "Αναζήτηση περιεχομένου",
+            "INITIAL_DESCRIPTION": "Εισαγάγετε τουλάχιστον 3 χαρακτήρες για αναζήτηση σε ζωντανές τηλεοπτικές μεταδόσεις, ταινίες και σειρές.",
+            "RESULTS_FOUND": "Βρέθηκαν {{count}} αποτελέσματα",
+            "NO_RESULTS_FOR": "Δεν βρέθηκαν αποτελέσματα για \"{{term}}\""
+        },
+        "STREAM_URL_COPIED": "Η διεύθυνση URL ροής αντιγράφηκε στο πρόχειρο",
+        "COPY_STREAM_URL": "Αντιγραφή διεύθηνσης URL ροής",
+        "SELECT_CATEGORY": "Επιλέξτε μια κατηγορία",
+        "PAGE": "Σελίδα",
+        "CONTENT_NOT_AVAILABLE": "Αυτό το περιεχόμενο δεν είναι διαθέσιμο σε αυτόν τον διακομιστή",
+        "PLAYBACK_ERROR": "Αποτυχία λήψης διεύθυνσης URL αναπαραγωγής",
+        "LOADING_SEASONS": "Φόρτωση σεζόν...",
+        "NO_EPISODES": "Δεν υπάρχουν διαθέσιμα επεισόδια"
+    },
+    "INFORMATION": "Πληροφορίες",
+    "REMOTE_CONTROL": {
+        "TITLE": "Τηλεχειριστήριο",
+        "SUBTITLE": "Ελέγξτε το πρόγραμμα αναπαραγωγής IPTV σας από απόσταση",
+        "UP_CHANNEL": "Πάνω κανάλι",
+        "DOWN_CHANNEL": "Κάτω κανάλι",
+        "HEADER": "IPTVNator Τηλεχειριστήριο",
+        "FOOTER": "IPTVNator Τηλεχειριστήριο"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/en.json b/apps/web/src/assets/i18n/en.json
new file mode 100644
index 0000000..d25c11e
--- /dev/null
+++ b/apps/web/src/assets/i18n/en.json
@@ -0,0 +1,955 @@
+{
+    "CANCEL": "Cancel",
+    "CLEAR": "Clear",
+    "CLOSE": "Close",
+    "SHOW_MORE": "More",
+    "SHOW_LESS": "Less",
+    "PLAYLISTS": "Playlists",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Please select a playlist from the list or add a new playlist",
+        "TABS": {
+            "RECENTLY_ADDED": "Recently added playlists",
+            "FILE_UPLOAD": "Add via file upload",
+            "URL_UPLOAD": "Add via URL",
+            "TEXT_IMPORT": "Import from text",
+            "XTREME_IMPORT": "Add Xtreme Code",
+            "STALKER_PORTAL_IMPORT": "Add Stalker Portal"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "No playlists were added",
+            "ADD_FIRST": "Please add your first playlist",
+            "WELCOME_TITLE": "Welcome to IPTVnator",
+            "WELCOME_DESCRIPTION": "Start your streaming journey by adding your first playlist. Connect to your favorite IPTV service and enjoy live TV, movies, and series.",
+            "ADD_YOUR_FIRST": "Add Your First Playlist",
+            "FEATURE_M3U": "M3U/M3U8 Files",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Stalker Portal",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "NO_RESULTS_TITLE": "No playlists found",
+            "NO_RESULTS_DESCRIPTION": "No playlists match your search. Try adjusting your search terms or clear the filter to see all playlists.",
+            "ADDED_VIA_URL": "Added via URL upload. URL:",
+            "ADDED_VIA_FILE": "Added via file upload",
+            "XTREAM_PLAYLIST": "Xtream playlist",
+            "STALKER_PORTAL": "Stalker portal",
+            "CHANNELS": "Channels",
+            "ADDED": "Added",
+            "SHOW_DETAILS": "Show playlist details",
+            "REMOVE": "Remove playlist",
+            "SEARCH_PLAYLISTS": "Search playlists by title",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Playlist details",
+                "TITLE": "Title",
+                "FROM_URL": "Added from the URL",
+                "IMPORT_DATE": "Import date",
+                "CHANNELS": "Number of channels",
+                "CLOSE": "Close",
+                "SAVE": "Save",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "Original filename",
+                "FILE_PATH": "File path",
+                "UPDATE_FAILED": "Last playlist update failed",
+                "AUTO_UPDATE": "Auto-update",
+                "AUTO_UPDATE_DESCRIPTION": "If the auto-refresh function is activated, the playlist will be updated automatically each time the app is started.",
+                "CUSTOM_USER_AGENT": "Some IPTV providers need a specific user-agent in order to play their playlist.",
+                "EXPORT_PLAYLIST": "Export playlist as m3u",
+                "SERVER_URL": "Server URL",
+                "USERNAME": "Username",
+                "PASSWORD": "Password",
+                "MAC_ADDRESS": "Mac Address",
+                "PLAYLIST_EXPORT_SUCCESS": "Playlist was exported successfully.",
+                "PLAYLIST_EXPORT_ERROR": "Error: Playlist export failed.",
+                "COPY_URL": "Copy URL to clipboard",
+                "URL_COPIED": "URL copied to clipboard"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Remove playlist",
+                "MESSAGE": "Are you sure you want to delete this playlist completely?",
+                "SUCCESS": "Playlist was removed successfully",
+                "IN_PROGRESS": "Removing playlist...",
+                "DELETING_FAVORITES": "Removing favorites...",
+                "DELETING_RECENT": "Removing recently viewed...",
+                "DELETING_PROGRESS": "Removing playback progress...",
+                "DELETING_DOWNLOADS": "Removing downloads...",
+                "DELETING_CONTENT": "Removing cached content...",
+                "DELETING_CATEGORIES": "Removing categories...",
+                "DELETING_PLAYLIST": "Removing playlist record..."
+            },
+            "UPDATED": "Updated",
+            "REFRESH": "Refresh playlist",
+            "REFRESH_XTREAM": "Refresh Xtream playlist from remote",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Refresh Xtream Playlist",
+                "MESSAGE": "This will delete locally cached categories and streams and re-import everything from the remote server. Your favorites and recently viewed items will be preserved. Are you sure you want to continue?",
+                "STARTED": "Refresh started. Navigating to playlist...",
+                "ERROR": "Failed to refresh playlist. Please try again.",
+                "IN_PROGRESS": "Refreshing playlist...",
+                "COLLECTING_DATA": "Collecting favorites and recently viewed...",
+                "DELETING_CONTENT": "Removing cached content...",
+                "DELETING_CATEGORIES": "Removing cached categories..."
+            },
+            "GLOBAL_FAVORITES": "Global favorites",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Auto-generated playlist with aggregated favorites from all playlists",
+            "MY_PLAYLISTS": "My playlists",
+            "MY_PLAYLISTS_SUBTITLE": "all available playlists",
+            "PLAYLIST_UPDATE_SUCCESS": "Success! The playlist was successfully updated.",
+            "PLAYLIST_UPDATE_ERROR": "Error updating playlist details.",
+            "PLAYLIST_UPDATE_FILE_NOT_FOUND": "Playlist refresh failed. The local file is no longer available. Check the file path or re-import the playlist.",
+            "PLAYLIST_UPDATE_FILE_ACCESS_ERROR": "Playlist refresh failed. The app can no longer access the local file.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Success! The playlists were successfully updated",
+            "AUTO_REFRESH_ENABLED": "Auto-refresh enabled"
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Drop an .m3u or .m3u8 file here",
+            "OR": "or",
+            "CHOOSE_PLAYLIST": "click to browse",
+            "BROWSE": "Browse files",
+            "REJECTED": "File was rejected, unsupported file format {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Playlist URL (m3u, m3u8)",
+            "ADD_PLAYLIST": "Add playlist",
+            "CORS_NOTE": "Note: In order to avoid CORS issues at this point the application uses a public CORS Proxy service. If you want to upload a playlist with sensitive data, it's more secure to import it from a file.",
+            "ERROR_FETCH_FAILED": "Failed to fetch the playlist. Please check the URL and try again.",
+            "ERROR_403": "Access denied (403): The server refused the request. The URL may require authentication or the playlist is restricted.",
+            "ERROR_404": "Playlist not found (404): The URL does not point to a valid playlist. Please check the URL.",
+            "ERROR_401": "Unauthorized (401): Authentication is required to access this playlist."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Insert m3u(8) playlist as text",
+            "BUTTON_LABEL": "Import"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Playlist title",
+            "SERVER_URL": "Server URL",
+            "USERNAME": "Username",
+            "PASSWORD": "Password",
+            "ADD": "Add",
+            "TEST_CREDENTIALS": "Test credentials",
+            "TEST_CONNECTION": "Test connection",
+            "TESTING": "Testing…",
+            "URL_VALIDATION_ERROR": "Should be a valid url with protocol (e.g. http://example.com or https://example.com:4324)"
+        },
+        "KIRATV": {
+            "ADD_PLAYLIST_TITLE": "Connect KiraTV",
+            "FIXED_SERVER": "Server:",
+            "FIXED_PLAYLIST_TITLE": "Playlist:",
+            "WELCOME_TITLE": "Welcome to KiraTV",
+            "WELCOME_TAGLINE": "Your IPTV for the whole family",
+            "WELCOME_DESCRIPTION": "Sign in with your Kira Cloud username and password to watch live TV, movies, and series.",
+            "ADD_FIRST_CTA": "Sign in"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Title",
+            "MAC_ADDRESS": "Mac Address",
+            "SERIAL_NUMBER": "Serial Number (Optional)",
+            "SERIAL_NUMBER_HINT": "Use if already registered with provider",
+            "DEVICE_ID_1": "Device ID 1 (Optional)",
+            "DEVICE_ID_2": "Device ID 2 (Optional)",
+            "DEVICE_ID_HINT": "64 hex characters - use if provider requires specific device ID",
+            "SIGNATURE_1": "Signature 1 (Optional)",
+            "SIGNATURE_2": "Signature 2 (Optional)",
+            "SIGNATURE_HINT": "64 hex characters - use if provider requires device verification signatures",
+            "SERVER_URL": "Server URL",
+            "URL_VALIDATION_ERROR": "Should be a valid url with protocol (e.g. http://example.com/c or https://example.com/stalker_portal/c)",
+            "ADD": "Add",
+            "VALIDATING": "Validating portal..."
+        },
+        "FILTER_BY_NAME": "Filter by name",
+        "FILTER_BY_TYPE": "Playlist Types",
+        "FILTER_AND_SORT": "Filter & Sort",
+        "SORT_PLAYLISTS": "Sort playlists",
+        "SORT_BY": "Sort By",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Name (A-Z)",
+            "NAME_DESC": "Name (Z-A)",
+            "NEWEST": "Date added (Newest first)",
+            "OLDEST": "Date added (Oldest first)",
+            "CUSTOM_ORDER": "Custom order (Drag & Drop)"
+        },
+        "PLAYLIST_TYPES": {
+            "M3U": "M3U (local, url, text)",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker"
+        },
+        "IMPORTED_AS_TEXT": "Imported as text",
+        "PARSING_ERROR": "Error: Parsing failed, not a valid playlist:"
+    },
+    "SETTINGS": {
+        "TITLE": "Settings",
+        "GENERAL": "General",
+        "GENERAL_SUBTITLE": "Change the configuration of the application",
+        "PLAYBACK": "Playback",
+        "EPG_SOURCES": "EPG sources",
+        "EPG_SOURCES_DESCRIPTION": "Add one or more URLs as EPG sources",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "DATA": "Data",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "ABOUT": "About",
+        "NAV_GENERAL": "General",
+        "NAV_PLAYBACK": "Playback",
+        "NAV_EPG": "EPG",
+        "NAV_REMOTE": "Remote",
+        "NAV_DATA": "Data",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset",
+        "NAV_ABOUT": "About",
+        "APP_PREFERENCES": "App preferences",
+        "HERO_EYEBROW": "Workspace settings",
+        "HERO_TITLE": "Shape how IPTVnator feels",
+        "HERO_DESCRIPTION": "Tune playback, guides, remote access and data handling from one place without losing the current workspace style.",
+        "SUBTITLE": "Change the configuration of the application",
+        "DESCRIPTION": "Please adapt the options from the list below and confirm with the save changes button",
+        "EPG_URL_LABEL": "EPG Url (*.xml or *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Enter an URL",
+        "REFRESH_EPG": "Refresh EPG",
+        "REFRESH_ALL_EPG": "Refresh all",
+        "REMOVE_EPG_SOURCE": "Remove EPG source",
+        "EPG_STATUS_FRESH": "Up to date",
+        "EPG_STATUS_STALE": "Needs refresh",
+        "EPG_STATUS_ERROR": "Failed",
+        "VIDEO_PLAYER_LABEL": "Video player",
+        "PLAYER_HTML5": "HTML5 video player",
+        "PLAYER_VIDEOJS": "Video.js player",
+        "PLAYER_ARTPLAYER": "ArtPlayer",
+        "PLAYER_EMBEDDED_MPV": "Embedded MPV (Experimental, macOS)",
+        "PLAYER_MPV": "MPV player",
+        "PLAYER_VLC": "VLC",
+        "VIDEO_PLAYER_PLACEHOLDER": "Select an option",
+        "VERSION": "Version",
+        "SAVE_CHANGES": "Save changes",
+        "BACK_TO_HOME": "Back",
+        "NEW_VERSION_AVAILABLE": "There is a new version available",
+        "LATEST_VERSION": "You are using the latest version",
+        "STREAM_FORMAT": "Stream Format",
+        "LANGUAGE": "Language",
+        "SETTINGS_SAVED": "Success! Configuration was saved.",
+        "THEME": "Visual theme",
+        "SHOW_CAPTIONS": "Show subtitles",
+        "SHOW_DASHBOARD": "Show dashboard",
+        "SHOW_DASHBOARD_DESCRIPTION": "Keep Dashboard available in the workspace rail. When disabled, Sources becomes the first workspace page.",
+        "ADD_EPG_SOURCE": "Add EPG source",
+        "CLEAR_EPG_DATA": "Clear EPG data",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "Clear EPG data",
+            "MESSAGE": "Are you sure you want to remove all EPG (Electronic Program Guide) data from the database? This will delete all cached program schedules."
+        },
+        "EPG_DATA_CLEARED": "EPG data has been cleared",
+        "EPG_DATA_CLEAR_FAILED": "Failed to clear EPG data. Please try again.",
+        "CLEARING_EPG_DATA": "Clearing…",
+        "EPG_URL_ERROR": "The value is not a valid URL",
+        "VIDEO_PLAYER_DESCRIPTION": "Select default video player",
+        "STREAM_FORMAT_DESCRIPTION": "Select default stream format (xtream)",
+        "LANGUAGE_DESCRIPTION": "Select language of the application",
+        "THEME_DESCRIPTION": "Select visual theme of the application",
+        "STARTUP_BEHAVIOR": "Startup view",
+        "STARTUP_BEHAVIOR_DESCRIPTION": "Choose whether IPTVnator opens the first available workspace view or restores your last section-level view. First view means Dashboard when enabled, otherwise Sources.",
+        "STARTUP_BEHAVIOR_FIRST_VIEW": "First available view",
+        "STARTUP_BEHAVIOR_RESTORE_LAST_VIEW": "Restore last view",
+        "SHOW_CAPTIONS_DESCRIPTION": "Show or hide subtitles by default",
+        "SHOW_EXTERNAL_PLAYBACK_BAR": "Show now playing footer",
+        "SHOW_EXTERNAL_PLAYBACK_BAR_DESCRIPTION": "Keep the external-player status bar visible at the bottom of the workspace on desktop.",
+        "VERSION_DESCRIPTION": "Current version of the application",
+        "ABOUT_SUBTITLE": "Version, project links and ways to support IPTVnator.",
+        "EMBEDDED_MPV_NOTICE_TITLE": "Embedded MPV runtime",
+        "EMBEDDED_MPV_NOTICE_DESCRIPTION": "macOS builds can include bundled libmpv and FFmpeg libraries for the experimental Embedded MPV player. Users do not need to install the MPV app separately; external MPV and VLC remain available as fallback players.",
+        "COMMUNITY": "Project & community",
+        "COMMUNITY_DESCRIPTION": "Star the repository, read the blog or join the Telegram group for updates and help.",
+        "LINK_BLOG": "Blog",
+        "LINK_GITHUB_DESCRIPTION": "Star the repo, open an issue or contribute",
+        "LINK_BLOG_DESCRIPTION": "Release notes, tips and project updates",
+        "LINK_TELEGRAM_DESCRIPTION": "Announcements, community and support",
+        "SUPPORT_TITLE": "Support the project",
+        "SUPPORT_DESCRIPTION": "IPTVnator is free and open source, built in the open. If it is part of your daily routine, a small contribution helps keep the project alive and shape what comes next — thank you.",
+        "SUPPORT_SPONSORS_HINT": "Recurring or one-time",
+        "SUPPORT_KOFI_HINT": "Buy me a coffee",
+        "EPG_NOTE": "Currently EPG is available only in the electron-based version of IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Check it here",
+        "IMPORT_EXPORT_DATA": "Import/export playlist backups",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Export or restore playlist backups including M3U snapshots, Xtream/Stalker connection metadata, user state, and EPG source URLs.",
+        "IMPORT_DATA": "Import",
+        "EXPORT_DATA": "Export",
+        "EXPORTING_DATA": "Exporting…",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Import error, please try with another file.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "mpv path",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Set path to mpv player in your system. It will use the provided path to a mpv binary instead of using the one found in $PATH.",
+        "MPV_PLAYER_PATH": "mpv player path",
+        "MPV_REUSE_INSTANCE_LABEL": "Reuse MPV instance",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "When enabled, the same MPV window will be reused for playing different streams. When disabled, each stream opens in a new MPV window.",
+        "VLC_PLAYER_PATH_LABEL": "VLC path",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Set path to VLC player in your system. It will use the provided path to a VLC binary instead of the default path for our system.",
+        "VLC_PLAYER_PATH": "VLC player path",
+        "REMOTE_CONTROL": "Remote control",
+        "REMOTE_CONTROL_DESCRIPTION": "Enable remote control of the application.",
+        "REMOTE_CONTROL_PORT": "Remote control port",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Port used for remote control of the application. Port 8765 is used by default.",
+        "REMOTE_CONTROL_URL": "Remote control URL",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Access the remote control from another device on the same network.",
+        "SHOW_QR_CODE": "Show QR code",
+        "STATUS_ENABLED": "Enabled",
+        "STATUS_DISABLED": "Disabled",
+        "SOURCE_SINGULAR": "source",
+        "SOURCE_PLURAL": "sources",
+        "PORT_RANGE_LABEL": "Port (1-65535)",
+        "PORT_REQUIRED": "Port is required",
+        "PORT_MIN": "Port must be at least 1",
+        "PORT_MAX": "Port must be at most 65535",
+        "PORT_PATTERN": "Only digits are allowed",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again."
+    },
+    "THEMES": {
+        "DARK_THEME": "Dark theme",
+        "LIGHT_THEME": "Light theme",
+        "SYSTEM_THEME": "System theme"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Search channel",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Upload or select other playlist",
+        "ALL_CHANNELS": "All channels",
+        "GROUPS": "Groups",
+        "MANAGE_GROUPS": "Manage groups",
+        "MANAGE_GROUPS_HINT": "Use manage groups to show groups again.",
+        "NO_VISIBLE_GROUPS": "No visible groups",
+        "SEARCH_GROUPS": "Search groups",
+        "UNGROUPED": "Ungrouped",
+        "UNNAMED_CHANNEL": "Unnamed Channel",
+        "FAVORITES": "Favorites",
+        "NO_FAVORITES": "No favorites yet",
+        "USE_STAR_TO_FAVORITE": "Please use 'star' icon to add channels to your favorites.",
+        "REMOVE_FAVORITE": "Remove from favorites",
+        "ADD_FAVORITE": "Add to favorites",
+        "SHOW_DETAILS": "Show channel details",
+        "FAVORITES_UPDATED": "Favorites were updated!",
+        "SELECT_CHANNEL_PLAYBACK": "Please select a channel to start playback",
+        "SORT_BY": "Sort by",
+        "SORT_BY_DATE": "Sort by Date Added (Newest First)",
+        "SORT_BY_RATING": "Sort by Rating",
+        "SORT_BY_NAME": "Sort by Name (A-Z)",
+        "LOAD_MORE": "Load more",
+        "REMAINING": "remaining",
+        "LOADING": "Loading channels...",
+        "LOADING_MORE": "Loading more...",
+        "NO_SEARCH_RESULTS": "No channels found",
+        "NO_CHANNELS_FOUND": "No channels found",
+        "TRY_DIFFERENT_SEARCH": "Try a different search term",
+        "DETAILS_DIALOG": {
+            "TITLE": "Channel details",
+            "DESCRIPTION": "Read-only metadata parsed from the playlist file.",
+            "SUMMARY": "Summary",
+            "TVG": "TVG metadata",
+            "CATCHUP": "Catchup",
+            "HTTP": "HTTP headers",
+            "NAME": "Name",
+            "CHANNEL_ID": "Channel ID",
+            "STREAM_URL": "Stream URL",
+            "GROUP": "Group",
+            "RADIO": "Radio",
+            "CATCHUP_AVAILABLE": "Catchup available",
+            "WINDOW": "Archive window",
+            "PLAYBACK_SUPPORTED": "Playback supported",
+            "EPG_PARAMS": "EPG params",
+            "TIMESHIFT": "Timeshift",
+            "TVG_ID": "TVG ID",
+            "TVG_NAME": "TVG name",
+            "TVG_URL": "TVG URL",
+            "TVG_LOGO": "TVG logo",
+            "TVG_REC": "TVG rec",
+            "CATCHUP_TYPE": "Catchup type",
+            "CATCHUP_SOURCE": "Catchup source",
+            "CATCHUP_DAYS": "Catchup days",
+            "HTTP_ORIGIN": "Origin",
+            "HTTP_REFERRER": "Referrer",
+            "HTTP_USER_AGENT": "User-Agent",
+            "EMPTY": "Not provided",
+            "NOT_AVAILABLE": "Not available",
+            "DAYS_ONE": "1 day",
+            "DAYS_OTHER": "{{count}} days"
+        },
+        "GROUP_MANAGEMENT": {
+            "TITLE": "Manage groups",
+            "SELECTED": "Selected",
+            "SELECT_ALL": "Select all",
+            "DESELECT_ALL": "Deselect all",
+            "SEARCH_PLACEHOLDER": "Search groups...",
+            "NO_RESULTS": "No matching groups found",
+            "SAVE": "Save"
+        }
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Open channel list",
+        "TOGGLE_FAVORITE_FLAG": "Toggle favorite flag",
+        "OPEN_EPG_LIST": "Open EPG list",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view",
+        "SHOW_INFO": "Show program info (Press I)"
+    },
+    "EPG": {
+        "TITLE": "Electronic Program Guide",
+        "NEXT_DAY": "Next day",
+        "PREVIOUS_DAY": "Previous day",
+        "LIVE_NOW": "Live now",
+        "LIVE_STREAM": "Live stream",
+        "TIMESHIFT_AVAILABLE": "Timeshift is available, click to play",
+        "ARCHIVE_PLAYBACK_UNAVAILABLE_TITLE": "Archive playback is unavailable",
+        "ARCHIVE_PLAYBACK_UNAVAILABLE_DESCRIPTION": "This provider exposes schedule history for the channel, but does not expose playable archive/catch-up playback.",
+        "EPG_NOT_AVAILABLE_DATE": "Ooops, EPG is not available for the selected date",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ooops, EPG is not available for this channel.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Please add/change the URL of the EPG list in the settings of the app.",
+        "FETCH_EPG": "Fetching EPG data...",
+        "ERROR": "Ooops, EPG could not be loaded.",
+        "DOWNLOAD_SUCCESS": "EPG was successfully downloaded.",
+        "NO_PROGRAM_INFO": "No program information available",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Details about the TV program",
+            "TITLE": "Title",
+            "CATEGORY": "Category",
+            "PARENTAL_RATING_SYSTEM": "Rating",
+            "DESCRIPTION": "Description",
+            "LANGUAGE": "Language",
+            "SHOW_PROGRAM_DETAILS": "Show details about this program",
+            "EPISODE": "Episode",
+            "DURATION": "Duration"
+        },
+        "FETCH_SUCCESS": "EPG was fetched successfully",
+        "IMPORT_PROGRESS": "EPG Import",
+        "CHANNELS": "channels",
+        "PROGRAMS": "programs",
+        "LOADING": "Loading",
+        "QUEUED": "Queued",
+        "TOTAL_CHANNELS": "Total channels",
+        "TOTAL_PROGRAMS": "Total programs",
+        "UP_TO_DATE": "EPG is up-to-date, no sync needed",
+        "RETRY": "Retry"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Yes",
+    "NO": "No",
+    "MENU": {
+        "OPEN": "Open menu",
+        "SUPPORT_ARIA": "Support IPTVnator on GitHub",
+        "SETTINGS": "Settings",
+        "SETTINGS_ARIA": "Open settings",
+        "BUG_REPORT": "Report a bug",
+        "WHAT_IS_NEW": "What is new",
+        "ABOUT": "About",
+        "ABOUT_ARIA": "About the application",
+        "SUPPORT_PROJECT": "Support project"
+    },
+    "ABOUT": {
+        "TITLE": "About IPTVnator",
+        "DESCRIPTION": "Cross-platform IPTV player application with multiple features, such as support of m3u and m3u8 playlists, favorites, TV guide, TV archive/catchup and more.",
+        "VERSION": "Version",
+        "GITHUB_TOOLTIP": "ITPVnator repository on GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Buy me a coffee",
+        "TWITTER_TOOLTIP": "Share on Twitter"
+    },
+    "UPDATE_AVAILABLE": "Update available",
+    "REFRESH": "Refresh",
+    "XTREAM": {
+        "PLAY": "Play",
+        "OPENING_PLAYER": "Opening player...",
+        "NAME": "Name",
+        "RELEASE_DATE": "Release date",
+        "GENRE": "Genre",
+        "COUNTRY": "Country",
+        "ACTORS": "Actors",
+        "DIRECTOR": "Director",
+        "DURATION": "Duration",
+        "CAST": "Cast",
+        "EPISODE_RUN_TIME": "Episode run time",
+        "RATING": "Rating",
+        "IMDB_RATING": " Rating IMDB",
+        "KINOPOISK_RATING": "Rating Kinopoisk",
+        "DESCRIPTION": "Description",
+        "YEAR": "Year",
+        "AGE": "Age",
+        "YOUTUBE_TRAILER": "YouTube Trailer",
+        "EPISODE": "Episode",
+        "RESUME": "Resume",
+        "RESTART": "Start Over",
+        "CONTINUE_WATCHING": "Continue Watching",
+        "WATCHED": "Watched",
+        "IN_PROGRESS": "In Progress",
+        "MARK_WATCHED": "Mark as Watched",
+        "MARK_UNWATCHED": "Mark as Unwatched",
+        "EPISODES_WATCHED": "{{count}} of {{total}} episodes watched",
+        "DETAIL_FALLBACK": {
+            "STATUS": "Portal metadata unavailable",
+            "NOTE": "Extended metadata was not provided by this portal.",
+            "STREAM_ID": "Stream ID",
+            "CATEGORY": "Category",
+            "CONTAINER": "Format",
+            "SOURCE_TITLE": "Source title"
+        },
+        "ACCOUNT_INFO": {
+            "TITLE": "Account Information",
+            "USER_INFO": "User Information",
+            "STATUS": "Status",
+            "USERNAME": "Username",
+            "ACTIVE_CONNECTIONS": "Active Connections",
+            "CREATED": "Created",
+            "EXPIRES": "Expires",
+            "TRIAL_ACCOUNT": "Trial Account",
+            "YES": "Yes",
+            "NO": "No",
+            "ALLOWED_FORMATS": "Allowed Formats",
+            "SERVER_INFO": "Server Information",
+            "LIVE_TV": "Live TV",
+            "MOVIES": "Movies",
+            "TV_SERIES": "TV Series",
+            "URL": "URL",
+            "PROTOCOL": "Protocol",
+            "TIMEZONE": "Timezone",
+            "SERVER_TIME": "Server Time",
+            "PORTS": "Ports",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        },
+        "CATEGORY_MANAGEMENT": {
+            "TITLE": "Manage Categories",
+            "LOADING": "Loading categories...",
+            "SELECTED": "Selected",
+            "SELECT_ALL": "Select All",
+            "DESELECT_ALL": "Deselect All",
+            "SEARCH_PLACEHOLDER": "Search categories...",
+            "NO_RESULTS": "No matching categories found",
+            "SAVE": "Save"
+        }
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "All categories",
+        "MY_FAVORITES": "My favorites",
+        "ADD_TO_FAVORITES": "Add to favorites",
+        "REMOVE_FROM_FAVORITES": "Remove from favorites",
+        "REMOVED_FROM_FAVORITES": "Removed from favorites",
+        "ADDED_TO_FAVORITES": "Added to favorites",
+        "FAVORITES": "Favorites",
+        "RECENTLY_VIEWED": "Recently viewed",
+        "THIS_PLAYLIST": "This playlist",
+        "ALL_PLAYLISTS": "All playlists",
+        "LIVE_TV": "Live TV",
+        "MOVIES": "Movies",
+        "SERIES": "Series",
+        "SEARCH": "Search",
+        "NO_FAVORITES": "No favorites yet",
+        "NO_RECENT_ITEMS": "No recently viewed items",
+        "REMOVE_FROM_RECENT": "Remove from recently viewed",
+        "BROWSE_ALL_MOVIES": "Browse all movies",
+        "BROWSE_ALL_SERIES": "Browse all series",
+        "BROWSE_ALL_LIVE": "Browse all live TV",
+        "SIDEBAR": {
+            "MAIN": "Main",
+            "MOVIES": "Movies",
+            "LIVE_TV": "Live TV",
+            "SERIES": "Series",
+            "LIBRARY": "Library",
+            "SEARCH": "Search",
+            "RECENT": "Recent",
+            "RECENTLY_ADDED": "Recently added",
+            "FAVORITES": "Favorites",
+            "HOME": "Home",
+            "PLAYLIST_INFO": "Playlist info",
+            "ACCOUNT_INFO": "Account info"
+        },
+        "ERROR_VIEW": {
+            "IMPORT_CANCELLED": {
+                "TITLE": "Import cancelled",
+                "DESCRIPTION": "The playlist import was cancelled. Retry when you want to continue loading this source."
+            },
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Account expired",
+                "DESCRIPTION": "This account has been expired. Please check the credentials in playlist settings or remove it."
+            },
+            "ACCOUNT_INACTIVE": {
+                "TITLE": "Account inactive",
+                "DESCRIPTION": "This account is inactive. Please check the credentials in playlist settings or remove it."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Unauthorized",
+                "DESCRIPTION": "Please check the credentials in playlist settings or remove it."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal not found",
+                "DESCRIPTION": "Please check the credentials and portal url in playlist settings or remove it."
+            },
+            "PORTAL_UNAVAILABLE": {
+                "TITLE": "Portal unavailable",
+                "DESCRIPTION": "The portal could not be reached. Check the server URL or retry when the source is available again."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "No content in this category",
+                "DESCRIPTION": "Select another category or switch the content type."
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Something went wrong",
+                "DESCRIPTION": "Unknown error, please try again later"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "No category selected",
+                "DESCRIPTION": "Please select a category to see the content"
+            },
+            "PLAYLIST_SETTINGS": "Playlist Settings",
+            "HOME": "Home",
+            "DELETE": "Delete"
+        },
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "No results found",
+            "NO_SEARCH_RESULTS": "Nothing found, try to change you search request"
+        },
+        "SEARCH_VIEW": {
+            "INITIAL_TITLE": "Search for content",
+            "INITIAL_DESCRIPTION": "Enter at least 3 characters to search across live TV, movies and series.",
+            "RESULTS_FOUND": "Found {{count}} results",
+            "NO_RESULTS_FOR": "No results found for \"{{term}}\"",
+            "GROUP_BY_PLAYLIST": "Group results by playlist",
+            "XTREAM_ONLY_NOTE": "Global search is currently available for Xtream playlists only.",
+            "VISIBLE_CATEGORIES_ONLY": "Visible categories only"
+        },
+        "STREAM_URL_COPIED": "Stream URL copied to clipboard",
+        "COPY_STREAM_URL": "Copy Stream URL",
+        "SELECT_CATEGORY": "Select a category",
+        "PAGE": "Page",
+        "CONTENT_NOT_AVAILABLE": "This content is not available on this server",
+        "PLAYBACK_ERROR": "Failed to get playback URL",
+        "LOADING_SEASONS": "Loading seasons...",
+        "NO_EPISODES": "No episodes available"
+    },
+    "INFORMATION": "Information",
+    "DOWNLOADS": {
+        "TITLE": "Downloads",
+        "DOWNLOAD": "Download",
+        "PLAY_LOCAL": "Play Local",
+        "EMPTY": "No downloads yet",
+        "EMPTY_HINT": "Download movies and episodes to watch offline",
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term",
+        "NOT_AVAILABLE": "Downloads not available",
+        "DESKTOP_ONLY": "This feature is only available in the desktop app",
+        "NO_FOLDER": "No download folder selected",
+        "CHANGE_FOLDER": "Change Folder",
+        "CLEAR_COMPLETED": "Clear Completed",
+        "CLEAR_COMPLETED_DIALOG": {
+            "TITLE": "Clear completed downloads",
+            "MESSAGE": "This removes completed, failed, and canceled entries from the current downloads view. It does not delete any files that were already downloaded to disk."
+        },
+        "SOURCE_PLAYLIST_MISSING": "This download can no longer open in the library because its source playlist was removed.",
+        "FILE_NOT_FOUND": "This downloaded file is no longer available on disk.",
+        "FILE_ACTION_ERROR": "The file action could not be completed.",
+        "CANCEL": "Cancel",
+        "RETRY": "Retry",
+        "REMOVE": "Remove",
+        "PLAY": "Play",
+        "REVEAL": "Show in Folder",
+        "COPY_URL": "Copy download URL",
+        "URL_COPIED": "Download URL copied to clipboard",
+        "URL_COPY_FAILED": "Failed to copy URL to clipboard",
+        "STATUS": {
+            "QUEUED": "Queued",
+            "DOWNLOADING": "Downloading",
+            "COMPLETED": "Completed",
+            "FAILED": "Failed",
+            "CANCELED": "Canceled"
+        }
+    },
+    "REMOTE_CONTROL": {
+        "TITLE": "Remote control",
+        "SUBTITLE": "Control your IPTV player remotely",
+        "UP_CHANNEL": "Channel Up",
+        "DOWN_CHANNEL": "Channel Down",
+        "HEADER": "IPTVNator Remote Control",
+        "FOOTER": "IPTVNator Remote Control"
+    },
+    "WORKSPACE": {
+        "FAVORITES_ONLY": "Favorites only",
+        "SORT_CUSTOM": "Custom order",
+        "SORT_DATE_DESC": "Date Added (Latest First)",
+        "SORT_DATE_ASC": "Date Added (Oldest First)",
+        "SORT_NAME_ASC": "Name A-Z",
+        "SORT_NAME_DESC": "Name Z-A",
+        "SORT_LABEL": "Sort: ",
+        "DASHBOARD": {
+            "CONTINUE_WATCHING": "Continue Watching",
+            "UNTITLED_SOURCE": "Untitled source",
+            "GLOBAL_FAVORITES": "Global Favorites",
+            "REMOVE_FROM_HISTORY": "Remove from history",
+            "RECENT_SOURCES": "Recently Used Sources",
+            "MANAGE_ALL": "Manage all",
+            "RECENTLY_WATCHED": "Recently Watched",
+            "XTREAM_RECENTLY_ADDED": "Recently Added on Xtream",
+            "NO_HISTORY": "No items found for this filter.",
+            "NO_HISTORY_HINT": "Your watching history will appear here once you start playing content from your playlists.",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker",
+            "M3U": "M3U",
+            "STALKER_PORTAL": "Stalker Portal",
+            "PROVIDER": "Provider",
+            "TYPE_LIVE": "Live",
+            "TYPE_MOVIE": "Movie",
+            "TYPE_SERIES": "Series",
+            "NOT_YET_SYNCED": "Not yet synced"
+        },
+        "SHELL": {
+            "BRAND_ALT": "IPTVnator",
+            "RAIL_DASHBOARD": "Dashboard",
+            "OPEN_DASHBOARD": "Open dashboard",
+            "RAIL_SOURCES": "Sources",
+            "OPEN_SOURCES": "Open sources",
+            "RAIL_GLOBAL_FAVORITES": "Global favorites",
+            "RAIL_GLOBAL_RECENT": "Recently viewed",
+            "RAIL_SETTINGS": "Settings",
+            "OPEN_SETTINGS": "Open settings",
+            "RAIL_LIBRARY": "Library",
+            "RAIL_MOVIES": "Movies",
+            "RAIL_LIVE": "Live TV",
+            "RAIL_SERIES": "Series",
+            "RAIL_RECENTLY_ADDED": "Recently added",
+            "RAIL_SEARCH": "Advanced search",
+            "RAIL_RECENT": "Recently viewed",
+            "RAIL_FAVORITES": "Favorites",
+            "RAIL_DOWNLOADS": "Downloads",
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player",
+            "RAIL_ALL_CHANNELS": "All channels",
+            "RAIL_GROUPS": "Groups",
+            "RAIL_CONTEXT_ACTIONS": "Section actions",
+            "QUICK_PLAYER_LABEL": "Player",
+            "QUICK_PLAYER_ARTPLAYER": "ArtPlayer (in app)",
+            "QUICK_PLAYER_VLC": "VLC (external)",
+            "SEARCH_LABEL": "Search",
+            "SEARCH_SOURCES_PLACEHOLDER": "Search sources (all playlists)...",
+            "SEARCH_PLAYLIST_PLACEHOLDER": "Search in this playlist...",
+            "SEARCH_SECTION_PLACEHOLDER": "Search in this section...",
+            "FILTER_SECTION_PLACEHOLDER": "Filter this section...",
+            "SEARCH_STATUS_LOADED_ONLY": "Loaded channels only",
+            "COMMAND_PALETTE_SHORTCUT": "Command palette (Ctrl/Cmd+K)",
+            "OPEN_COMMAND_PALETTE": "Open command palette",
+            "ADD_PLAYLIST_ALL": "Add playlist",
+            "ADD_PLAYLIST": "Add playlist",
+            "OPEN_DOWNLOADS": "Open downloads",
+            "OPEN_CONTEXT_ACTIONS": "Open section actions",
+            "NO_SECTION_ACTIONS": "No actions for this section",
+            "PLAYLIST_INFO": "Playlist info",
+            "ACCOUNT_INFO": "Account info",
+            "REFRESH_PLAYLIST": "Refresh playlist",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL": "Clear completed downloads (all playlists)",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL_ARIA": "Clear completed downloads for all playlists",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST": "Clear completed downloads (this playlist)",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST_ARIA": "Clear completed downloads for this playlist",
+            "CLEAR_RECENTLY_VIEWED_SECTION": "Clear recently viewed",
+            "CLEAR_RECENTLY_VIEWED_SECTION_ARIA": "Clear recently viewed for this section",
+            "CLEAR_RECENTLY_VIEWED_TYPE": "Clear recently viewed {{type}}",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_TITLE": "Clear recently viewed {{type}}?",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_PLAYLIST": "All {{type}} items from this playlist will be removed from your recently viewed history. This action cannot be undone.",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_ALL": "All {{type}} items across all playlists will be removed from your recently viewed history. This action cannot be undone.",
+            "CLEAR_FAVORITES_TYPE": "Clear {{type}} favorites",
+            "CLEAR_FAVORITES_DIALOG_TITLE": "Remove all {{type}} favorites?",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_PLAYLIST": "All {{type}} favorites from this playlist will be removed. This action cannot be undone.",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_ALL": "All {{type}} favorites across all playlists will be removed. This action cannot be undone.",
+            "XTREAM_CODE": "Xtream Code",
+            "STALKER_PORTAL": "Stalker Portal",
+            "CHANNELS_COUNT": "{{count}} channels",
+            "NO_SOURCES_AVAILABLE": "No sources available",
+            "ONE_SOURCE_AVAILABLE": "1 source available",
+            "SOURCES_AVAILABLE": "{{count}} sources available",
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "XTREAM_IMPORT_TITLE": "Syncing playlist",
+            "XTREAM_IMPORT_REMOTE_BADGE": "Remote source",
+            "XTREAM_IMPORT_LOCAL_BADGE": "Local library",
+            "XTREAM_IMPORT_DETAIL_REMOTE": "Waiting on the provider response.",
+            "XTREAM_IMPORT_DETAIL_LOCAL": "Preparing faster playlist switching for the next visit.",
+            "XTREAM_IMPORT_PREPARING": "Preparing local library...",
+            "XTREAM_IMPORT_LOADING": "Fetching playlist data from source...",
+            "XTREAM_IMPORT_SAVING": "Saving playlist data locally...",
+            "XTREAM_IMPORT_RESTORING_FAVORITES": "Restoring favorites from local library...",
+            "XTREAM_IMPORT_RESTORING_RECENT": "Restoring recently viewed from local library...",
+            "XTREAM_IMPORT_PROGRESS": "{{type}} imported: {{current}} / {{total}}",
+            "XTREAM_IMPORT_CANCEL": "Stop sync",
+            "XTREAM_IMPORT_CANCELLING": "Stopping sync...",
+            "COMMANDS": {
+                "GLOBAL_SEARCH_LABEL": "Search all Xtream playlists",
+                "GLOBAL_SEARCH_DESCRIPTION": "Open global search overlay",
+                "PLAYLIST_SEARCH_LABEL": "Advanced search this playlist",
+                "PLAYLIST_SEARCH_DESCRIPTION": "Open advanced playlist search",
+                "OPEN_GLOBAL_FAVORITES_LABEL": "Open global favorites",
+                "OPEN_GLOBAL_FAVORITES_DESCRIPTION": "Navigate to aggregated favorites",
+                "OPEN_DOWNLOADS_LABEL": "Open downloads",
+                "OPEN_DOWNLOADS_DESCRIPTION": "Navigate to downloads view",
+                "OPEN_GLOBAL_RECENT_LABEL": "Open recently viewed",
+                "OPEN_GLOBAL_RECENT_DESCRIPTION": "Open global recently viewed page",
+                "OPEN_SETTINGS_LABEL": "Open settings",
+                "OPEN_SETTINGS_DESCRIPTION": "Navigate to application settings",
+                "OPEN_SOURCES_LABEL": "Manage sources",
+                "OPEN_SOURCES_DESCRIPTION": "Navigate to source management",
+                "OPEN_DASHBOARD_LABEL": "Open dashboard",
+                "OPEN_DASHBOARD_DESCRIPTION": "Navigate to the dashboard",
+                "ADD_PLAYLIST_LABEL": "Add new source",
+                "ADD_PLAYLIST_DESCRIPTION": "Open add playlist dialog",
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab",
+                "REFRESH_PLAYLIST_LABEL": "Refresh playlist",
+                "REFRESH_PLAYLIST_DESCRIPTION": "Re-sync data from remote source",
+                "PLAYLIST_INFO_LABEL": "Playlist details",
+                "PLAYLIST_INFO_DESCRIPTION": "Show current playlist information",
+                "ACCOUNT_INFO_LABEL": "Account info",
+                "ACCOUNT_INFO_DESCRIPTION": "Show Xtream server account details",
+                "OPEN_VIEW_DESCRIPTION": "Navigate to {{view}}",
+                "CLEAR_CURRENT_VIEW_DESCRIPTION": "Clear all visible {{type}} items in this view",
+                "OPEN_MULTI_EPG_DESCRIPTION": "Open the multi-channel EPG view",
+                "GO_TO_VOD_LABEL": "Movies",
+                "GO_TO_VOD_DESCRIPTION": "Jump to movies section",
+                "GO_TO_LIVE_LABEL": "Live TV",
+                "GO_TO_LIVE_DESCRIPTION": "Jump to live TV section",
+                "GO_TO_SERIES_LABEL": "Series",
+                "GO_TO_SERIES_DESCRIPTION": "Jump to series section"
+            }
+        },
+        "SOURCES": {
+            "TITLE": "Sources",
+            "SUBTITLE": "Filter and sort playlists",
+            "TYPE": "Type",
+            "ALL": "All",
+            "M3U_PLAYLISTS": "M3U Playlists",
+            "XTREAM_PLAYLISTS": "Xtream Playlists",
+            "STALKER_PLAYLISTS": "Stalker Playlists",
+            "ALL_PLAYLISTS": "All Playlists",
+            "PLAYLIST_COUNT_ONE": "1 playlist",
+            "PLAYLIST_COUNT_OTHER": "{{count}} playlists"
+        },
+        "CONTEXT": {
+            "CATEGORIES": "Categories",
+            "MOVIE_CATEGORIES": "Movie Categories",
+            "SERIES_CATEGORIES": "Series Categories",
+            "LIVE_CATEGORIES": "Live Categories",
+            "XTREAM_SYNCING_MOVIES": "Syncing movie categories...",
+            "XTREAM_SYNCING_SERIES": "Syncing series categories...",
+            "XTREAM_SYNCING_LIVE": "Syncing live categories...",
+            "XTREAM_SOURCE": "Xtream source",
+            "STALKER_PORTAL": "Stalker portal",
+            "MANAGE_CATEGORIES": "Manage categories",
+            "LOAD_CATEGORIES_ERROR": "Unable to load categories",
+            "LOAD_CATEGORIES_ERROR_HINT": "Please retry or verify portal settings.",
+            "FILTER_BY_TYPE": "Filter by type",
+            "ITEM_COUNT_ONE": "1 item",
+            "ITEM_COUNT_OTHER": "{{count}} items",
+            "SEARCH": "Search",
+            "SEARCH_CATEGORIES": "Search categories"
+        },
+        "COMMAND_PALETTE": {
+            "TITLE": "Command palette",
+            "SUBTITLE": "Global and contextual actions",
+            "SEARCH_PLACEHOLDER": "Type to filter commands",
+            "SEARCH_LABEL": "Filter commands",
+            "EMPTY": "No commands found",
+            "GROUP_GLOBAL": "Global actions",
+            "GROUP_PLAYLIST": "This playlist",
+            "GROUP_VIEW": "Current view",
+            "GROUP_SECTION": "This section"
+        },
+        "GLOBAL_FAVORITES": {
+            "TITLE": "Global Favorites",
+            "SUBTITLE": "Live TV from all playlists",
+            "SEARCH_PLACEHOLDER": "Search favorites...",
+            "NO_RESULTS": "No results",
+            "NO_RESULTS_HINT": "Try a different search term",
+            "EMPTY_TITLE": "No live TV favorites yet",
+            "EMPTY_HINT": "Star live channels from M3U, Xtream, or Stalker playlists to see them here.",
+            "EMPTY_PLAYER": "Select a channel to start watching",
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here.",
+            "UNKNOWN_CHANNEL": "Unknown"
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    }
+}
diff --git a/apps/web/src/assets/i18n/es.json b/apps/web/src/assets/i18n/es.json
new file mode 100644
index 0000000..6506db8
--- /dev/null
+++ b/apps/web/src/assets/i18n/es.json
@@ -0,0 +1,955 @@
+{
+    "CLOSE": "Cerrar",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Selecciona una lista de reproducción del listado o añade una nueva lista al cargar archivos o por una url",
+        "TABS": {
+            "RECENTLY_ADDED": "Listas añadidas recientemente",
+            "FILE_UPLOAD": "Añadir y cargar archivo",
+            "URL_UPLOAD": "Añadir por url",
+            "TEXT_IMPORT": "Importar como texto",
+            "STALKER_PORTAL_IMPORT": "Agregar portal de acosador",
+            "XTREME_IMPORT": "Add Xtreme Code"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "No se añadieron listas de reproducción",
+            "ADD_FIRST": "Por favor, añade tu primera lista de la otra pestaña",
+            "WELCOME_TITLE": "Bienvenido a IPTVnator",
+            "WELCOME_DESCRIPTION": "Comience su viaje de streaming agregando su primera lista de reproducción. Conéctese a su servicio IPTV favorito y disfrute de TV en vivo, películas y series.",
+            "ADD_YOUR_FIRST": "Agregar su primera lista",
+            "FEATURE_M3U": "Archivos M3U/M3U8",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Portal Stalker",
+            "NO_RESULTS_TITLE": "No se encontraron listas",
+            "NO_RESULTS_DESCRIPTION": "Ninguna lista coincide con su búsqueda. Intente ajustar los términos de búsqueda o borrar el filtro para ver todas las listas.",
+            "ADDED_VIA_URL": "Añadido por carga de URL. URL:",
+            "ADDED_VIA_FILE": "Añadido por carga de archivo",
+            "CHANNELS": "Canales",
+            "ADDED": "Añadido",
+            "SHOW_DETAILS": "Mostrar detalles de la lista",
+            "REMOVE": "Quitar lista",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Detalles de la lista",
+                "TITLE": "Título",
+                "FROM_URL": "Añadida desde la URL",
+                "IMPORT_DATE": "Fecha de importación",
+                "CHANNELS": "Número de canales",
+                "CLOSE": "Cerrar",
+                "SAVE": "Guardar",
+                "USER_AGENT": "Agente de usuario",
+                "ORIGINAL_FILENAME": "Nombre de archivo original",
+                "FILE_PATH": "Ruta de archivo",
+                "UPDATE_FAILED": "Última actualización de la lista fallida",
+                "AUTO_UPDATE": "Auto-actualizar",
+                "AUTO_UPDATE_DESCRIPTION": "Si la función de auto-actualizar se activa, la lista de reproducción se refrescará automáticamente cada vez que se inicia la app.",
+                "CUSTOM_USER_AGENT": "Algunos proveedores de IPTV necesitan especificar el agente de usuario para reproducir su lista de reproducción.",
+                "PASSWORD": "Contraseña",
+                "SERVER_URL": "URL del servidor",
+                "USERNAME": "Nombre de usuario",
+                "MAC_ADDRESS": "Dirección MAC",
+                "EXPORT_PLAYLIST": "Export playlist as m3u",
+                "PLAYLIST_EXPORT_SUCCESS": "Playlist was exported successfully.",
+                "PLAYLIST_EXPORT_ERROR": "Error: Playlist export failed.",
+                "COPY_URL": "Copy URL to clipboard",
+                "URL_COPIED": "URL copied to clipboard"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Quitar lista de reproducción",
+                "MESSAGE": "¿Estás seguro de quitar esta lista de reproducción por completo?",
+                "SUCCESS": "Playlist was removed successfully",
+                "IN_PROGRESS": "Removing playlist...",
+                "DELETING_FAVORITES": "Removing favorites...",
+                "DELETING_RECENT": "Removing recently viewed...",
+                "DELETING_PROGRESS": "Removing playback progress...",
+                "DELETING_DOWNLOADS": "Removing downloads...",
+                "DELETING_CONTENT": "Removing cached content...",
+                "DELETING_CATEGORIES": "Removing categories...",
+                "DELETING_PLAYLIST": "Removing playlist record..."
+            },
+            "UPDATED": "Actualizado",
+            "REFRESH": "Actualizar lista",
+            "GLOBAL_FAVORITES": "Favoritos globales",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Lista autogenerada con los favoritos agregados de todas las listas",
+            "MY_PLAYLISTS": "Mis listas",
+            "PLAYLIST_UPDATE_SUCCESS": "¡Éxito! La lista de reproducción se actualizó correctamente.",
+            "STALKER_PORTAL": "Stalker Portal",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen.",
+            "XTREAM_PLAYLIST": "Xtream playlist",
+            "SEARCH_PLAYLISTS": "Search playlists by title",
+            "REFRESH_XTREAM": "Refresh Xtream playlist from remote",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Refresh Xtream Playlist",
+                "MESSAGE": "This will delete locally cached categories and streams and re-import everything from the remote server. Your favorites and recently viewed items will be preserved. Are you sure you want to continue?",
+                "STARTED": "Refresh started. Navigating to playlist...",
+                "ERROR": "Failed to refresh playlist. Please try again.",
+                "IN_PROGRESS": "Refreshing playlist...",
+                "COLLECTING_DATA": "Collecting favorites and recently viewed...",
+                "DELETING_CONTENT": "Removing cached content...",
+                "DELETING_CATEGORIES": "Removing cached categories..."
+            },
+            "MY_PLAYLISTS_SUBTITLE": "all available playlists",
+            "PLAYLIST_UPDATE_ERROR": "Error updating playlist details.",
+            "PLAYLIST_UPDATE_FILE_NOT_FOUND": "Playlist refresh failed. The local file is no longer available. Check the file path or re-import the playlist.",
+            "PLAYLIST_UPDATE_FILE_ACCESS_ERROR": "Playlist refresh failed. The app can no longer access the local file.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Success! The playlists were successfully updated",
+            "AUTO_REFRESH_ENABLED": "Auto-refresh enabled"
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Arrastre & suelte archivos aquí",
+            "OR": "o",
+            "CHOOSE_PLAYLIST": "Escoga una lista de reproducción",
+            "REJECTED": "El archivo fue rechazado, formato de archivo no compatible {{filename}}.",
+            "BROWSE": "Browse files"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Lista de reproducción (m3u, m3u8)",
+            "ADD_PLAYLIST": "Añadir lista",
+            "CORS_NOTE": "Note: In order to avoid CORS issues at this point the application uses a public CORS Proxy service. If you want to upload a playlist with sensitive data, it's more secure to import it from a file.",
+            "ERROR_FETCH_FAILED": "Failed to fetch the playlist. Please check the URL and try again.",
+            "ERROR_403": "Access denied (403): The server refused the request. The URL may require authentication or the playlist is restricted.",
+            "ERROR_404": "Playlist not found (404): The URL does not point to a valid playlist. Please check the URL.",
+            "ERROR_401": "Unauthorized (401): Authentication is required to access this playlist."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Inserte la playlist m3u(8) como texto",
+            "BUTTON_LABEL": "Importar"
+        },
+        "STALKER_PORTAL": {
+            "ADD": "Agregar",
+            "TITLE": "Título",
+            "SERVER_URL": "URL del servidor",
+            "MAC_ADDRESS": "Dirección Mac",
+            "URL_VALIDATION_ERROR": "Debe ser una URL válida con protocolo (por ejemplo, http://example.com/c o https://example.com/stalker_portal/c).",
+            "SERIAL_NUMBER": "Serial Number (Optional)",
+            "SERIAL_NUMBER_HINT": "Use if already registered with provider",
+            "DEVICE_ID_1": "Device ID 1 (Optional)",
+            "DEVICE_ID_2": "Device ID 2 (Optional)",
+            "DEVICE_ID_HINT": "64 hex characters - use if provider requires specific device ID",
+            "SIGNATURE_1": "Signature 1 (Optional)",
+            "SIGNATURE_2": "Signature 2 (Optional)",
+            "SIGNATURE_HINT": "64 hex characters - use if provider requires device verification signatures",
+            "VALIDATING": "Validating portal..."
+        },
+        "FILTER_BY_TYPE": "Filtrar por tipo",
+        "IMPORTED_AS_TEXT": "Importado como texto",
+        "FILTER_BY_NAME": "Filtrar por nombre",
+        "PARSING_ERROR": "Error: Error al analizar, no es una lista de reproducción válida:",
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Título de la lista",
+            "SERVER_URL": "URL del servidor",
+            "USERNAME": "Usuario",
+            "PASSWORD": "Contraseña",
+            "ADD": "Añadir",
+            "TEST_CREDENTIALS": "Probar credenciales",
+            "TEST_CONNECTION": "Probar conexión",
+            "TESTING": "Probando…",
+            "URL_VALIDATION_ERROR": "Debe ser una URL válida con protocolo (por ejemplo, http://example.com o https://example.com:4324)."
+        },
+        "KIRATV": {
+            "ADD_PLAYLIST_TITLE": "Conectar KiraTV",
+            "FIXED_SERVER": "Servidor:",
+            "FIXED_PLAYLIST_TITLE": "Lista:",
+            "WELCOME_TITLE": "Bienvenido a KiraTV",
+            "WELCOME_TAGLINE": "Tu IPTV para toda la familia",
+            "WELCOME_DESCRIPTION": "Inicia sesión con tu usuario y contraseña de Kira Cloud para ver TV en directo, películas y series.",
+            "ADD_FIRST_CTA": "Iniciar sesión"
+        },
+        "FILTER_AND_SORT": "Filter & Sort",
+        "SORT_PLAYLISTS": "Sort playlists",
+        "SORT_BY": "Sort By",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Name (A-Z)",
+            "NAME_DESC": "Name (Z-A)",
+            "NEWEST": "Date added (Newest first)",
+            "OLDEST": "Date added (Oldest first)",
+            "CUSTOM_ORDER": "Custom order (Drag & Drop)"
+        },
+        "PLAYLIST_TYPES": {
+            "M3U": "M3U (local, url, text)",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker"
+        }
+    },
+    "SETTINGS": {
+        "TITLE": "Ajustes",
+        "GENERAL": "General",
+        "GENERAL_SUBTITLE": "Cambia la configuracion general de la aplicacion",
+        "PLAYBACK": "Reproduccion",
+        "EPG_SOURCES": "Fuentes EPG",
+        "EPG_SOURCES_DESCRIPTION": "Agrega una o varias URL como fuentes EPG",
+        "DATA": "Datos",
+        "ABOUT": "Acerca de",
+        "NAV_GENERAL": "General",
+        "NAV_PLAYBACK": "Reproduccion",
+        "NAV_EPG": "EPG",
+        "NAV_REMOTE": "Remoto",
+        "NAV_DATA": "Datos",
+        "NAV_ABOUT": "Acerca de",
+        "APP_PREFERENCES": "Preferencias de la app",
+        "HERO_EYEBROW": "Ajustes del espacio de trabajo",
+        "HERO_TITLE": "Configura como se siente IPTVnator",
+        "HERO_DESCRIPTION": "Ajusta reproduccion, guias, acceso remoto y manejo de datos desde un solo lugar sin perder el estilo actual del espacio de trabajo.",
+        "SUBTITLE": "Cambiar la configuración de la aplicación",
+        "DESCRIPTION": "Por favor, adapta las opciones de la siguiente lista y confirma con un botón de guardar",
+        "EPG_URL_LABEL": "Url de la EPG (*.xml o *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Ingresa una URL",
+        "REFRESH_EPG": "Actualizar EPG",
+        "REFRESH_ALL_EPG": "Actualizar todo",
+        "REMOVE_EPG_SOURCE": "Eliminar fuente EPG",
+        "EPG_STATUS_FRESH": "Actualizado",
+        "EPG_STATUS_STALE": "Necesita actualización",
+        "EPG_STATUS_ERROR": "Error",
+        "VIDEO_PLAYER_LABEL": "Reproductor de vídeo",
+        "PLAYER_HTML5": "Reproductor HTML5",
+        "PLAYER_VIDEOJS": "Reproductor Video.js",
+        "PLAYER_ARTPLAYER": "ArtPlayer",
+        "PLAYER_MPV": "Reproductor MPV",
+        "PLAYER_VLC": "VLC",
+        "VIDEO_PLAYER_PLACEHOLDER": "Selecciona una opción",
+        "VERSION": "Versión",
+        "SAVE_CHANGES": "Guardar cambios",
+        "BACK_TO_HOME": "Volver al inicio",
+        "NEW_VERSION_AVAILABLE": "Hay una nueva versión disponible",
+        "LATEST_VERSION": "Estás usando la versión reciente",
+        "STREAM_FORMAT": "Formato de transmision",
+        "LANGUAGE": "Idioma",
+        "SETTINGS_SAVED": "¡Completado! La configuración se guardó.",
+        "THEME": "Tema visual",
+        "SHOW_CAPTIONS": "Mostrar subtítulos",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "CLEAR_EPG_DATA": "Borrar datos EPG",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "Borrar datos EPG",
+            "MESSAGE": "¿Seguro que quieres eliminar todos los datos EPG de la base de datos? Esto borrará toda la programacion almacenada en caché."
+        },
+        "EPG_DATA_CLEARED": "Los datos EPG se borraron",
+        "EPG_DATA_CLEAR_FAILED": "No se pudieron borrar los datos EPG. Inténtalo de nuevo.",
+        "CLEARING_EPG_DATA": "Borrando…",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "LANGUAGE_DESCRIPTION": "Seleccione el idioma de la aplicación",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "VERSION_DESCRIPTION": "Versión actual de la aplicación.",
+        "MPV_PLAYER_PATH": "ruta del reproductor mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Establece la ruta al reproductor mpv en tu sistema. Se usará la ruta proporcionada al binario de mpv en lugar de la encontrada en $PATH.",
+        "MPV_REUSE_INSTANCE_LABEL": "Reutilizar instancia de MPV",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "Cuando esta opción está activada, se reutiliza la misma ventana de MPV para reproducir distintos streams. Cuando está desactivada, cada stream se abre en una nueva ventana de MPV.",
+        "SHOW_CAPTIONS_DESCRIPTION": "Mostrar u ocultar subtítulos por defecto",
+        "IMPORT_DATA": "Importar",
+        "ADD_EPG_SOURCE": "Agregar fuente EPG",
+        "IMPORT_ERROR": "Error de importación, intente con otro archivo.",
+        "EPG_URL_ERROR": "El valor no es una URL válida.",
+        "EXPORT_DATA": "Exportar",
+        "EXPORTING_DATA": "Exportando…",
+        "VIDEO_PLAYER_DESCRIPTION": "Seleccionar reproductor de vídeo predeterminado",
+        "IMPORT_EXPORT_DATA": "Importar/exportar copias de seguridad",
+        "VLC_PLAYER_PATH_LABEL": "ruta VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Establezca la ruta al reproductor VLC en su sistema. \nUtilizará la ruta proporcionada a un binario VLC en lugar de la ruta predeterminada para nuestro sistema.",
+        "THEME_DESCRIPTION": "Seleccione el tema visual de la aplicación.",
+        "EPG_NOTE": "Actualmente, EPG está disponible sólo en la versión electrónica de IPTVnator.",
+        "VLC_PLAYER_PATH": "Ruta del reproductor VLC",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Exporte o restaure copias de seguridad con instantáneas M3U, metadatos de conexión de Xtream/Stalker, estado del usuario y URLs de EPG.",
+        "EPG_NOTE_URL_TEXT": "Compruébalo aquí",
+        "MPV_PLAYER_PATH_LABEL": "Ruta de mpv",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOTE_CONTROL": "Control remoto",
+        "REMOTE_CONTROL_DESCRIPTION": "Habilita el control remoto de la aplicación.",
+        "REMOTE_CONTROL_PORT": "Puerto de control remoto",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Puerto usado para el control remoto de la aplicación. El puerto 8765 se usa de forma predeterminada.",
+        "REMOTE_CONTROL_URL": "URL de control remoto",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Accede al control remoto desde otro dispositivo en la misma red.",
+        "SHOW_QR_CODE": "Mostrar codigo QR",
+        "STATUS_ENABLED": "Activado",
+        "STATUS_DISABLED": "Desactivado",
+        "SOURCE_SINGULAR": "fuente",
+        "SOURCE_PLURAL": "fuentes",
+        "PORT_RANGE_LABEL": "Puerto (1-65535)",
+        "PORT_REQUIRED": "El puerto es obligatorio",
+        "PORT_MIN": "El puerto debe ser al menos 1",
+        "PORT_MAX": "El puerto debe ser como máximo 65535",
+        "PORT_PATTERN": "Solo se permiten digitos",
+        "STREAM_FORMAT_DESCRIPTION": "Selecciona el formato de transmision predeterminado (Xtream)",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset",
+        "PLAYER_EMBEDDED_MPV": "Embedded MPV (Experimental, macOS)",
+        "SHOW_DASHBOARD": "Show dashboard",
+        "SHOW_DASHBOARD_DESCRIPTION": "Keep Dashboard available in the workspace rail. When disabled, Sources becomes the first workspace page.",
+        "STARTUP_BEHAVIOR": "Startup view",
+        "STARTUP_BEHAVIOR_DESCRIPTION": "Choose whether IPTVnator opens the first available workspace view or restores your last section-level view. First view means Dashboard when enabled, otherwise Sources.",
+        "STARTUP_BEHAVIOR_FIRST_VIEW": "First available view",
+        "STARTUP_BEHAVIOR_RESTORE_LAST_VIEW": "Restore last view",
+        "SHOW_EXTERNAL_PLAYBACK_BAR": "Show now playing footer",
+        "SHOW_EXTERNAL_PLAYBACK_BAR_DESCRIPTION": "Keep the external-player status bar visible at the bottom of the workspace on desktop.",
+        "ABOUT_SUBTITLE": "Version, project links and ways to support IPTVnator.",
+        "EMBEDDED_MPV_NOTICE_TITLE": "Embedded MPV runtime",
+        "EMBEDDED_MPV_NOTICE_DESCRIPTION": "macOS builds can include bundled libmpv and FFmpeg libraries for the experimental Embedded MPV player. Users do not need to install the MPV app separately; external MPV and VLC remain available as fallback players.",
+        "COMMUNITY": "Project & community",
+        "COMMUNITY_DESCRIPTION": "Star the repository, read the blog or join the Telegram group for updates and help.",
+        "LINK_BLOG": "Blog",
+        "LINK_GITHUB_DESCRIPTION": "Star the repo, open an issue or contribute",
+        "LINK_BLOG_DESCRIPTION": "Release notes, tips and project updates",
+        "LINK_TELEGRAM_DESCRIPTION": "Announcements, community and support",
+        "SUPPORT_TITLE": "Support the project",
+        "SUPPORT_DESCRIPTION": "IPTVnator is free and open source, built in the open. If it is part of your daily routine, a small contribution helps keep the project alive and shape what comes next — thank you.",
+        "SUPPORT_SPONSORS_HINT": "Recurring or one-time",
+        "SUPPORT_KOFI_HINT": "Buy me a coffee"
+    },
+    "THEMES": {
+        "DARK_THEME": "Tema oscuro",
+        "LIGHT_THEME": "Tema claro",
+        "SYSTEM_THEME": "Tema del sistema"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Buscar canal",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Carga o selecciona una lista de reproducción",
+        "ALL_CHANNELS": "Todos los canales",
+        "GROUPS": "Grupos",
+        "UNGROUPED": "Desagrupado",
+        "UNNAMED_CHANNEL": "Canal sin nombre",
+        "FAVORITES": "Favoritos",
+        "NO_FAVORITES": "Sin favoritos",
+        "USE_STAR_TO_FAVORITE": "Por favor, use el ícono de la 'estrella' para añadir canales a la lista.",
+        "REMOVE_FAVORITE": "Quitar de favoritos",
+        "FAVORITES_UPDATED": "¡Se actualizaron los favoritos!",
+        "MANAGE_GROUPS": "Manage groups",
+        "MANAGE_GROUPS_HINT": "Use manage groups to show groups again.",
+        "NO_VISIBLE_GROUPS": "No visible groups",
+        "SEARCH_GROUPS": "Search groups",
+        "ADD_FAVORITE": "Add to favorites",
+        "SHOW_DETAILS": "Show channel details",
+        "SELECT_CHANNEL_PLAYBACK": "Please select a channel to start playback",
+        "SORT_BY": "Sort by",
+        "SORT_BY_DATE": "Sort by Date Added (Newest First)",
+        "SORT_BY_RATING": "Sort by Rating",
+        "SORT_BY_NAME": "Sort by Name (A-Z)",
+        "LOAD_MORE": "Load more",
+        "REMAINING": "remaining",
+        "LOADING": "Loading channels...",
+        "LOADING_MORE": "Loading more...",
+        "NO_SEARCH_RESULTS": "No channels found",
+        "NO_CHANNELS_FOUND": "No channels found",
+        "TRY_DIFFERENT_SEARCH": "Try a different search term",
+        "DETAILS_DIALOG": {
+            "TITLE": "Channel details",
+            "DESCRIPTION": "Read-only metadata parsed from the playlist file.",
+            "SUMMARY": "Summary",
+            "TVG": "TVG metadata",
+            "CATCHUP": "Catchup",
+            "HTTP": "HTTP headers",
+            "NAME": "Name",
+            "CHANNEL_ID": "Channel ID",
+            "STREAM_URL": "Stream URL",
+            "GROUP": "Group",
+            "RADIO": "Radio",
+            "CATCHUP_AVAILABLE": "Catchup available",
+            "WINDOW": "Archive window",
+            "PLAYBACK_SUPPORTED": "Playback supported",
+            "EPG_PARAMS": "EPG params",
+            "TIMESHIFT": "Timeshift",
+            "TVG_ID": "TVG ID",
+            "TVG_NAME": "TVG name",
+            "TVG_URL": "TVG URL",
+            "TVG_LOGO": "TVG logo",
+            "TVG_REC": "TVG rec",
+            "CATCHUP_TYPE": "Catchup type",
+            "CATCHUP_SOURCE": "Catchup source",
+            "CATCHUP_DAYS": "Catchup days",
+            "HTTP_ORIGIN": "Origin",
+            "HTTP_REFERRER": "Referrer",
+            "HTTP_USER_AGENT": "User-Agent",
+            "EMPTY": "Not provided",
+            "NOT_AVAILABLE": "Not available",
+            "DAYS_ONE": "1 day",
+            "DAYS_OTHER": "{{count}} days"
+        },
+        "GROUP_MANAGEMENT": {
+            "TITLE": "Manage groups",
+            "SELECTED": "Selected",
+            "SELECT_ALL": "Select all",
+            "DESELECT_ALL": "Deselect all",
+            "SEARCH_PLACEHOLDER": "Search groups...",
+            "NO_RESULTS": "No matching groups found",
+            "SAVE": "Save"
+        }
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Abrir lista de canales",
+        "TOGGLE_FAVORITE_FLAG": "Alternar bandera favorita",
+        "OPEN_EPG_LIST": "Abrir lista EPG",
+        "OPEN_MULTI_EPG": "Abrir vista Multi-EPG",
+        "SHOW_INFO": "Show program info (Press I)"
+    },
+    "EPG": {
+        "NEXT_DAY": "Día siguiente",
+        "PREVIOUS_DAY": "Día anterior",
+        "LIVE_NOW": "Ahora en vivo",
+        "LIVE_STREAM": "Transmisión en vivo",
+        "TIMESHIFT_AVAILABLE": "Timeshift está disponible, clic para reproducir",
+        "EPG_NOT_AVAILABLE_DATE": "Vaya, no está disponible la EPG de esa fecha",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Vaya, no está disponible la EPG del canal.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Por favor añada/cargue la url de la lista EPG en los ajustes de la app.",
+        "FETCH_EPG": "Obteniendo datos de EPG...",
+        "ERROR": "¡Vaya! Esta EPG no se pudo cargar.",
+        "DOWNLOAD_SUCCESS": "La EPG se ha descargado correctamente.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Detalles sobre el programa de TV",
+            "TITLE": "Título",
+            "CATEGORY": "Género",
+            "PARENTAL_RATING_SYSTEM": "Sistema de calificación de contenidos televisivos",
+            "DESCRIPTION": "Descripción",
+            "LANGUAGE": "Idioma",
+            "SHOW_PROGRAM_DETAILS": "Mostrar detalles del programa",
+            "EPISODE": "Episode",
+            "DURATION": "Duration"
+        },
+        "TITLE": "Electronic Program Guide",
+        "ARCHIVE_PLAYBACK_UNAVAILABLE_TITLE": "Archive playback is unavailable",
+        "ARCHIVE_PLAYBACK_UNAVAILABLE_DESCRIPTION": "This provider exposes schedule history for the channel, but does not expose playable archive/catch-up playback.",
+        "NO_PROGRAM_INFO": "No program information available",
+        "FETCH_SUCCESS": "EPG was fetched successfully",
+        "IMPORT_PROGRESS": "EPG Import",
+        "CHANNELS": "channels",
+        "PROGRAMS": "programs",
+        "LOADING": "Loading",
+        "QUEUED": "Queued",
+        "TOTAL_CHANNELS": "Total channels",
+        "TOTAL_PROGRAMS": "Total programs",
+        "UP_TO_DATE": "EPG is up-to-date, no sync needed",
+        "RETRY": "Retry"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Sí",
+    "NO": "No",
+    "MENU": {
+        "OPEN": "Abrir menú",
+        "SUPPORT_ARIA": "Apoyar IPTVnator en GitHub",
+        "SETTINGS": "Ajustes",
+        "SETTINGS_ARIA": "Abrir ajustes",
+        "BUG_REPORT": "Reportar un  bug",
+        "WHAT_IS_NEW": "Novedades",
+        "ABOUT": "Acerca de",
+        "ABOUT_ARIA": "Acerca de la aplicación",
+        "SUPPORT_PROJECT": "Proyecto de apoyo"
+    },
+    "XTREAM": {
+        "RELEASE_DATE": "Fecha de lanzamiento",
+        "ACTORS": "Actores",
+        "PLAY": "Reproducir",
+        "GENRE": "Género",
+        "DURATION": "Duración",
+        "COUNTRY": "País",
+        "NAME": "Nombre",
+        "DIRECTOR": "Director",
+        "CAST": "Elenco",
+        "RATING": "Clasificación",
+        "AGE": "Edad",
+        "EPISODE": "Episodio",
+        "RESUME": "Continuar",
+        "RESTART": "Reiniciar",
+        "CONTINUE_WATCHING": "Continuar viendo",
+        "WATCHED": "Visto",
+        "IN_PROGRESS": "En progreso",
+        "MARK_WATCHED": "Marcar como visto",
+        "MARK_UNWATCHED": "Marcar como no visto",
+        "EPISODES_WATCHED": "{{count}} de {{total}} episodios vistos",
+        "YEAR": "Año",
+        "YOUTUBE_TRAILER": "Tráiler de YouTube",
+        "DESCRIPTION": "Descripción",
+        "KINOPOISK_RATING": "Calificación de Kinopoisk",
+        "IMDB_RATING": "Calificación IMDB",
+        "EPISODE_RUN_TIME": "Tiempo de ejecución del episodio",
+        "OPENING_PLAYER": "Opening player...",
+        "DETAIL_FALLBACK": {
+            "STATUS": "Portal metadata unavailable",
+            "NOTE": "Extended metadata was not provided by this portal.",
+            "STREAM_ID": "Stream ID",
+            "CATEGORY": "Category",
+            "CONTAINER": "Format",
+            "SOURCE_TITLE": "Source title"
+        },
+        "ACCOUNT_INFO": {
+            "TITLE": "Account Information",
+            "USER_INFO": "User Information",
+            "STATUS": "Status",
+            "USERNAME": "Username",
+            "ACTIVE_CONNECTIONS": "Active Connections",
+            "CREATED": "Created",
+            "EXPIRES": "Expires",
+            "TRIAL_ACCOUNT": "Trial Account",
+            "YES": "Yes",
+            "NO": "No",
+            "ALLOWED_FORMATS": "Allowed Formats",
+            "SERVER_INFO": "Server Information",
+            "LIVE_TV": "Live TV",
+            "MOVIES": "Movies",
+            "TV_SERIES": "TV Series",
+            "URL": "URL",
+            "PROTOCOL": "Protocol",
+            "TIMEZONE": "Timezone",
+            "SERVER_TIME": "Server Time",
+            "PORTS": "Ports",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        },
+        "CATEGORY_MANAGEMENT": {
+            "TITLE": "Manage Categories",
+            "LOADING": "Loading categories...",
+            "SELECTED": "Selected",
+            "SELECT_ALL": "Select All",
+            "DESELECT_ALL": "Deselect All",
+            "SEARCH_PLACEHOLDER": "Search categories...",
+            "NO_RESULTS": "No matching categories found",
+            "SAVE": "Save"
+        }
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Todas las categorias",
+        "ADD_TO_FAVORITES": "Agregar a los favoritos",
+        "REMOVE_FROM_FAVORITES": "Quitar de favoritos",
+        "MY_FAVORITES": "Mis favoritos",
+        "COPY_STREAM_URL": "Copiar URL de transmisión",
+        "ERROR_VIEW": {
+            "DELETE": "Borrar",
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Cuenta caducada",
+                "DESCRIPTION": "Esta cuenta ha caducado. \nVerifique las credenciales en la configuración de la lista de reproducción o elimínelas."
+            },
+            "HOME": "Hogar",
+            "EMPTY_CATEGORY": {
+                "TITLE": "categoría vacía",
+                "DESCRIPTION": "Esta categoría no tiene contenido, seleccione otra categoría o cambie el tipo de contenido"
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "No autorizado",
+                "DESCRIPTION": "Verifique las credenciales en la configuración de la lista de reproducción o elimínelas."
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "algo salió mal",
+                "DESCRIPTION": "Error desconocido, inténtalo de nuevo más tarde."
+            },
+            "PLAYLIST_SETTINGS": "Configuración de lista de reproducción",
+            "IMPORT_CANCELLED": {
+                "TITLE": "Import cancelled",
+                "DESCRIPTION": "The playlist import was cancelled. Retry when you want to continue loading this source."
+            },
+            "ACCOUNT_INACTIVE": {
+                "TITLE": "Account inactive",
+                "DESCRIPTION": "This account is inactive. Please check the credentials in playlist settings or remove it."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal not found",
+                "DESCRIPTION": "Please check the credentials and portal url in playlist settings or remove it."
+            },
+            "PORTAL_UNAVAILABLE": {
+                "TITLE": "Portal unavailable",
+                "DESCRIPTION": "The portal could not be reached. Check the server URL or retry when the source is available again."
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "No category selected",
+                "DESCRIPTION": "Please select a category to see the content"
+            }
+        },
+        "STREAM_URL_COPIED": "URL de transmisión copiada al portapapeles",
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "No se encontró nada, intenta cambiar tu solicitud de búsqueda.",
+            "TITLE": "No results found"
+        },
+        "REMOVED_FROM_FAVORITES": "Eliminado de favoritos",
+        "ADDED_TO_FAVORITES": "Añadido a favoritos",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "Se encontraron {{count}} resultados",
+            "NO_RESULTS_FOR": "No se encontraron resultados para \"{{term}}\"",
+            "INITIAL_TITLE": "Search for content",
+            "INITIAL_DESCRIPTION": "Enter at least 3 characters to search across live TV, movies and series.",
+            "GROUP_BY_PLAYLIST": "Group results by playlist",
+            "XTREAM_ONLY_NOTE": "Global search is currently available for Xtream playlists only.",
+            "VISIBLE_CATEGORIES_ONLY": "Visible categories only"
+        },
+        "FAVORITES": "Favorites",
+        "RECENTLY_VIEWED": "Recently viewed",
+        "THIS_PLAYLIST": "This playlist",
+        "ALL_PLAYLISTS": "All playlists",
+        "LIVE_TV": "Live TV",
+        "MOVIES": "Movies",
+        "SERIES": "Series",
+        "SEARCH": "Search",
+        "NO_FAVORITES": "No favorites yet",
+        "NO_RECENT_ITEMS": "No recently viewed items",
+        "REMOVE_FROM_RECENT": "Remove from recently viewed",
+        "BROWSE_ALL_MOVIES": "Browse all movies",
+        "BROWSE_ALL_SERIES": "Browse all series",
+        "BROWSE_ALL_LIVE": "Browse all live TV",
+        "SIDEBAR": {
+            "MAIN": "Main",
+            "MOVIES": "Movies",
+            "LIVE_TV": "Live TV",
+            "SERIES": "Series",
+            "LIBRARY": "Library",
+            "SEARCH": "Search",
+            "RECENT": "Recent",
+            "RECENTLY_ADDED": "Recently added",
+            "FAVORITES": "Favorites",
+            "HOME": "Home",
+            "PLAYLIST_INFO": "Playlist info",
+            "ACCOUNT_INFO": "Account info"
+        },
+        "SELECT_CATEGORY": "Selecciona una categoría",
+        "PAGE": "Page",
+        "CONTENT_NOT_AVAILABLE": "This content is not available on this server",
+        "PLAYBACK_ERROR": "Failed to get playback URL",
+        "LOADING_SEASONS": "Loading seasons...",
+        "NO_EPISODES": "No episodes available"
+    },
+    "ABOUT": {
+        "TITLE": "Acerca de IPTVnator",
+        "VERSION": "Versión",
+        "TWITTER_TOOLTIP": "Compartir en Twitter",
+        "GITHUB_TOOLTIP": "Repositorio ITPVnator en GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Buy me a coffee",
+        "DESCRIPTION": "Cross-platform IPTV player application with multiple features, such as support of m3u and m3u8 playlists, favorites, TV guide, TV archive/catchup and more."
+    },
+    "REFRESH": "Actualizar",
+    "UPDATE_AVAILABLE": "Actualización disponible",
+    "INFORMATION": "Información",
+    "DOWNLOADS": {
+        "TITLE": "Descargas",
+        "DOWNLOAD": "Descargar",
+        "PLAY_LOCAL": "Reproducir local",
+        "EMPTY": "Sin descargas aún",
+        "EMPTY_HINT": "Descarga películas y episodios para ver sin conexión",
+        "NOT_AVAILABLE": "Descargas no disponibles",
+        "DESKTOP_ONLY": "Esta función solo está disponible en la aplicación de escritorio",
+        "NO_FOLDER": "No se ha seleccionado carpeta de descarga",
+        "CHANGE_FOLDER": "Cambiar carpeta",
+        "CLEAR_COMPLETED": "Limpiar completados",
+        "CANCEL": "Cancelar",
+        "RETRY": "Reintentar",
+        "REMOVE": "Eliminar",
+        "PLAY": "Reproducir",
+        "REVEAL": "Mostrar en carpeta",
+        "STATUS": {
+            "QUEUED": "En cola",
+            "DOWNLOADING": "Descargando",
+            "COMPLETED": "Completado",
+            "FAILED": "Fallido",
+            "CANCELED": "Cancelado"
+        },
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term",
+        "CLEAR_COMPLETED_DIALOG": {
+            "TITLE": "Clear completed downloads",
+            "MESSAGE": "This removes completed, failed, and canceled entries from the current downloads view. It does not delete any files that were already downloaded to disk."
+        },
+        "SOURCE_PLAYLIST_MISSING": "This download can no longer open in the library because its source playlist was removed.",
+        "FILE_NOT_FOUND": "This downloaded file is no longer available on disk.",
+        "FILE_ACTION_ERROR": "The file action could not be completed.",
+        "COPY_URL": "Copy download URL",
+        "URL_COPIED": "Download URL copied to clipboard",
+        "URL_COPY_FAILED": "Failed to copy URL to clipboard"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Volver al panel",
+            "GO_TO_SOURCES": "Ir a fuentes",
+            "DROP_OVERLAY_TITLE": "Suelta para añadir lista",
+            "DROP_OVERLAY_BODY": "Suelta un archivo .m3u o .m3u8 en cualquier parte del espacio de trabajo para importarlo.",
+            "DROP_OVERLAY_REJECTED_BODY": "Suelta un archivo .m3u o .m3u8. Pulsa Esc para cerrar.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Tipo de archivo no admitido",
+            "DROP_OVERLAY_REJECTED_EMPTY": "Ese archivo está vacío",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "No se pudo leer el archivo",
+            "DROP_IMPORT_SUCCESS": "Importando «{{title}}»…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Añadir lista M3U",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Abrir el diálogo en la pestaña de archivo o URL M3U",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Añadir lista Xtream Codes",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Abrir el diálogo en la pestaña Xtream Codes",
+                "ADD_PLAYLIST_STALKER_LABEL": "Añadir portal Stalker",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Abrir el diálogo en la pestaña Portal Stalker",
+                "GLOBAL_SEARCH_LABEL": "Buscar en todas las listas Xtream",
+                "GLOBAL_SEARCH_DESCRIPTION": "Abrir búsqueda global",
+                "PLAYLIST_SEARCH_LABEL": "Búsqueda avanzada en esta lista",
+                "PLAYLIST_SEARCH_DESCRIPTION": "Abrir búsqueda avanzada de la lista",
+                "OPEN_GLOBAL_FAVORITES_LABEL": "Abrir favoritos globales",
+                "OPEN_GLOBAL_FAVORITES_DESCRIPTION": "Ir a favoritos agregados",
+                "OPEN_DOWNLOADS_LABEL": "Abrir descargas",
+                "OPEN_DOWNLOADS_DESCRIPTION": "Ir a la vista de descargas",
+                "OPEN_GLOBAL_RECENT_LABEL": "Abrir visto recientemente",
+                "OPEN_GLOBAL_RECENT_DESCRIPTION": "Abrir página global de recientes",
+                "OPEN_SETTINGS_LABEL": "Abrir ajustes",
+                "OPEN_SETTINGS_DESCRIPTION": "Ir a los ajustes de la aplicación",
+                "OPEN_SOURCES_LABEL": "Gestionar fuentes",
+                "OPEN_SOURCES_DESCRIPTION": "Ir a la gestión de fuentes",
+                "OPEN_DASHBOARD_LABEL": "Abrir panel",
+                "OPEN_DASHBOARD_DESCRIPTION": "Ir al panel",
+                "ADD_PLAYLIST_LABEL": "Añadir fuente",
+                "ADD_PLAYLIST_DESCRIPTION": "Abrir diálogo para añadir lista",
+                "REFRESH_PLAYLIST_LABEL": "Actualizar lista",
+                "REFRESH_PLAYLIST_DESCRIPTION": "Volver a sincronizar con el origen",
+                "PLAYLIST_INFO_LABEL": "Detalles de la lista",
+                "PLAYLIST_INFO_DESCRIPTION": "Mostrar información de la lista actual",
+                "ACCOUNT_INFO_LABEL": "Info de la cuenta",
+                "ACCOUNT_INFO_DESCRIPTION": "Mostrar datos de la cuenta Xtream",
+                "OPEN_VIEW_DESCRIPTION": "Ir a {{view}}",
+                "CLEAR_CURRENT_VIEW_DESCRIPTION": "Borrar todos los elementos visibles de {{type}} en esta vista",
+                "OPEN_MULTI_EPG_DESCRIPTION": "Abrir la guía multi-canal",
+                "GO_TO_VOD_LABEL": "Películas",
+                "GO_TO_VOD_DESCRIPTION": "Ir a películas",
+                "GO_TO_LIVE_LABEL": "TV en directo",
+                "GO_TO_LIVE_DESCRIPTION": "Ir a TV en directo",
+                "GO_TO_SERIES_LABEL": "Series",
+                "GO_TO_SERIES_DESCRIPTION": "Ir a series"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Cerrar reproductor",
+            "BRAND_ALT": "IPTVnator",
+            "RAIL_DASHBOARD": "Panel",
+            "OPEN_DASHBOARD": "Abrir panel",
+            "RAIL_SOURCES": "Fuentes",
+            "OPEN_SOURCES": "Abrir fuentes",
+            "RAIL_GLOBAL_FAVORITES": "Favoritos globales",
+            "RAIL_GLOBAL_RECENT": "Visto recientemente",
+            "RAIL_SETTINGS": "Ajustes",
+            "OPEN_SETTINGS": "Abrir ajustes",
+            "RAIL_LIBRARY": "Biblioteca",
+            "RAIL_MOVIES": "Películas",
+            "RAIL_LIVE": "TV en directo",
+            "RAIL_SERIES": "Series",
+            "RAIL_RECENTLY_ADDED": "Añadidos recientemente",
+            "RAIL_SEARCH": "Búsqueda avanzada",
+            "RAIL_RECENT": "Visto recientemente",
+            "RAIL_FAVORITES": "Favoritos",
+            "RAIL_DOWNLOADS": "Descargas",
+            "RAIL_ALL_CHANNELS": "Todos los canales",
+            "RAIL_GROUPS": "Grupos",
+            "RAIL_CONTEXT_ACTIONS": "Acciones de la sección",
+            "SEARCH_LABEL": "Buscar",
+            "SEARCH_SOURCES_PLACEHOLDER": "Buscar fuentes (todas las listas)…",
+            "SEARCH_PLAYLIST_PLACEHOLDER": "Buscar en esta lista…",
+            "SEARCH_SECTION_PLACEHOLDER": "Buscar en esta sección…",
+            "FILTER_SECTION_PLACEHOLDER": "Filtrar esta sección…",
+            "SEARCH_STATUS_LOADED_ONLY": "Solo canales cargados",
+            "COMMAND_PALETTE_SHORTCUT": "Paleta de comandos (Ctrl/Cmd+K)",
+            "OPEN_COMMAND_PALETTE": "Abrir paleta de comandos",
+            "ADD_PLAYLIST_ALL": "Añadir lista",
+            "ADD_PLAYLIST": "Añadir lista",
+            "OPEN_DOWNLOADS": "Abrir descargas",
+            "OPEN_CONTEXT_ACTIONS": "Abrir acciones de la sección",
+            "NO_SECTION_ACTIONS": "No hay acciones para esta sección",
+            "PLAYLIST_INFO": "Info de la lista",
+            "ACCOUNT_INFO": "Info de la cuenta",
+            "REFRESH_PLAYLIST": "Actualizar lista",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL": "Borrar descargas completadas (todas las listas)",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL_ARIA": "Borrar descargas completadas de todas las listas",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST": "Borrar descargas completadas (esta lista)",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST_ARIA": "Borrar descargas completadas de esta lista",
+            "CLEAR_RECENTLY_VIEWED_SECTION": "Borrar visto recientemente",
+            "CLEAR_RECENTLY_VIEWED_SECTION_ARIA": "Borrar visto recientemente de esta sección",
+            "CLEAR_RECENTLY_VIEWED_TYPE": "Borrar visto recientemente ({{type}})",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_TITLE": "¿Borrar visto recientemente ({{type}})?",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_PLAYLIST": "Se quitarán del historial todos los elementos de {{type}} de esta lista. No se puede deshacer.",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_ALL": "Se quitarán del historial todos los elementos de {{type}} de todas las listas. No se puede deshacer.",
+            "CLEAR_FAVORITES_TYPE": "Borrar favoritos de {{type}}",
+            "CLEAR_FAVORITES_DIALOG_TITLE": "¿Quitar todos los favoritos de {{type}}?",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_PLAYLIST": "Se quitarán todos los favoritos de {{type}} de esta lista. No se puede deshacer.",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_ALL": "Se quitarán todos los favoritos de {{type}} de todas las listas. No se puede deshacer.",
+            "XTREAM_CODE": "Código Xtream",
+            "STALKER_PORTAL": "Portal Stalker",
+            "CHANNELS_COUNT": "{{count}} canales",
+            "NO_SOURCES_AVAILABLE": "No hay fuentes disponibles",
+            "ONE_SOURCE_AVAILABLE": "1 fuente disponible",
+            "SOURCES_AVAILABLE": "{{count}} fuentes disponibles",
+            "XTREAM_IMPORT_TITLE": "Sincronizando lista",
+            "XTREAM_IMPORT_REMOTE_BADGE": "Fuente remota",
+            "XTREAM_IMPORT_LOCAL_BADGE": "Biblioteca local",
+            "XTREAM_IMPORT_DETAIL_REMOTE": "Esperando respuesta del proveedor.",
+            "XTREAM_IMPORT_DETAIL_LOCAL": "Preparando un cambio de lista más rápido para la próxima visita.",
+            "XTREAM_IMPORT_PREPARING": "Preparando biblioteca local…",
+            "XTREAM_IMPORT_LOADING": "Obteniendo datos de la lista…",
+            "XTREAM_IMPORT_SAVING": "Guardando datos de la lista en local…",
+            "XTREAM_IMPORT_RESTORING_FAVORITES": "Restaurando favoritos desde local…",
+            "XTREAM_IMPORT_RESTORING_RECENT": "Restaurando visto recientemente desde local…",
+            "XTREAM_IMPORT_PROGRESS": "{{type}} importados: {{current}} / {{total}}",
+            "XTREAM_IMPORT_CANCEL": "Detener sincronización",
+            "XTREAM_IMPORT_CANCELLING": "Deteniendo sincronización…",
+            "QUICK_PLAYER_LABEL": "Reproductor",
+            "QUICK_PLAYER_ARTPLAYER": "ArtPlayer (en la app)",
+            "QUICK_PLAYER_VLC": "VLC (externo)"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here.",
+            "TITLE": "Global Favorites",
+            "SUBTITLE": "Live TV from all playlists",
+            "SEARCH_PLACEHOLDER": "Search favorites...",
+            "NO_RESULTS": "No results",
+            "NO_RESULTS_HINT": "Try a different search term",
+            "EMPTY_TITLE": "No live TV favorites yet",
+            "EMPTY_HINT": "Star live channels from M3U, Xtream, or Stalker playlists to see them here.",
+            "EMPTY_PLAYER": "Select a channel to start watching",
+            "UNKNOWN_CHANNEL": "Unknown"
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        },
+        "FAVORITES_ONLY": "Favorites only",
+        "SORT_CUSTOM": "Custom order",
+        "SORT_DATE_DESC": "Date Added (Latest First)",
+        "SORT_DATE_ASC": "Date Added (Oldest First)",
+        "SORT_NAME_ASC": "Name A-Z",
+        "SORT_NAME_DESC": "Name Z-A",
+        "SORT_LABEL": "Sort: ",
+        "DASHBOARD": {
+            "CONTINUE_WATCHING": "Continue Watching",
+            "UNTITLED_SOURCE": "Untitled source",
+            "GLOBAL_FAVORITES": "Global Favorites",
+            "REMOVE_FROM_HISTORY": "Remove from history",
+            "RECENT_SOURCES": "Recently Used Sources",
+            "MANAGE_ALL": "Manage all",
+            "RECENTLY_WATCHED": "Recently Watched",
+            "XTREAM_RECENTLY_ADDED": "Recently Added on Xtream",
+            "NO_HISTORY": "No items found for this filter.",
+            "NO_HISTORY_HINT": "Your watching history will appear here once you start playing content from your playlists.",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker",
+            "M3U": "M3U",
+            "STALKER_PORTAL": "Stalker Portal",
+            "PROVIDER": "Provider",
+            "TYPE_LIVE": "Live",
+            "TYPE_MOVIE": "Movie",
+            "TYPE_SERIES": "Series",
+            "NOT_YET_SYNCED": "Not yet synced"
+        },
+        "SOURCES": {
+            "TITLE": "Sources",
+            "SUBTITLE": "Filter and sort playlists",
+            "TYPE": "Type",
+            "ALL": "All",
+            "M3U_PLAYLISTS": "M3U Playlists",
+            "XTREAM_PLAYLISTS": "Xtream Playlists",
+            "STALKER_PLAYLISTS": "Stalker Playlists",
+            "ALL_PLAYLISTS": "All Playlists",
+            "PLAYLIST_COUNT_ONE": "1 playlist",
+            "PLAYLIST_COUNT_OTHER": "{{count}} playlists"
+        },
+        "CONTEXT": {
+            "CATEGORIES": "Categorías",
+            "MOVIE_CATEGORIES": "Categorías de películas",
+            "SERIES_CATEGORIES": "Categorías de series",
+            "LIVE_CATEGORIES": "Categorías en directo",
+            "XTREAM_SYNCING_MOVIES": "Sincronizando categorías de películas…",
+            "XTREAM_SYNCING_SERIES": "Sincronizando categorías de series…",
+            "XTREAM_SYNCING_LIVE": "Sincronizando categorías en directo…",
+            "XTREAM_SOURCE": "Fuente Xtream",
+            "STALKER_PORTAL": "Portal Stalker",
+            "MANAGE_CATEGORIES": "Gestionar categorías",
+            "LOAD_CATEGORIES_ERROR": "No se pudieron cargar las categorías",
+            "LOAD_CATEGORIES_ERROR_HINT": "Reintenta o comprueba la configuración del portal.",
+            "FILTER_BY_TYPE": "Filtrar por tipo",
+            "ITEM_COUNT_ONE": "1 elemento",
+            "ITEM_COUNT_OTHER": "{{count}} elementos",
+            "SEARCH": "Buscar",
+            "SEARCH_CATEGORIES": "Buscar categorías"
+        },
+        "COMMAND_PALETTE": {
+            "TITLE": "Paleta de comandos",
+            "SUBTITLE": "Acciones globales y del contexto",
+            "SEARCH_PLACEHOLDER": "Escribe para filtrar comandos",
+            "SEARCH_LABEL": "Filtrar comandos",
+            "EMPTY": "No se encontraron comandos",
+            "GROUP_GLOBAL": "Acciones globales",
+            "GROUP_PLAYLIST": "Esta lista",
+            "GROUP_VIEW": "Vista actual",
+            "GROUP_SECTION": "Esta sección"
+        }
+    },
+    "CANCEL": "Cancelar",
+    "CLEAR": "Limpiar",
+    "SHOW_MORE": "Más",
+    "SHOW_LESS": "Menos",
+    "PLAYLISTS": "Listas de reproducción",
+    "REMOTE_CONTROL": {
+        "TITLE": "Control remoto",
+        "SUBTITLE": "Controla el reproductor IPTV a distancia",
+        "UP_CHANNEL": "Canal siguiente",
+        "DOWN_CHANNEL": "Canal anterior",
+        "HEADER": "Control remoto IPTVnator",
+        "FOOTER": "Control remoto IPTVnator"
+    }
+}
diff --git a/apps/web/src/assets/i18n/fr.json b/apps/web/src/assets/i18n/fr.json
new file mode 100644
index 0000000..d519730
--- /dev/null
+++ b/apps/web/src/assets/i18n/fr.json
@@ -0,0 +1,483 @@
+{
+    "CLOSE": "Fermer",
+    "PLAYLISTS": "Listes de lecture",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Choisissez une liste de lecture, ou ajoutez en une nouvelle via un transfert de fichier ou via une URL",
+        "TABS": {
+            "RECENTLY_ADDED": "Récemment ajoutés",
+            "FILE_UPLOAD": "Ajouter un fichier",
+            "URL_UPLOAD": "Ajouter une URL",
+            "TEXT_IMPORT": "Importer sous forme de texte",
+            "XTREME_IMPORT": "Ajouter Xtreme Code",
+            "STALKER_PORTAL_IMPORT": "Ajouter un portail Stalker"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Aucune liste de lecture n'a été ajoutée",
+            "ADD_FIRST": "Veuillez ajouter votre première liste de lecture depuis un autre onglet",
+            "WELCOME_TITLE": "Bienvenue sur IPTVnator",
+            "WELCOME_DESCRIPTION": "Commencez votre voyage de streaming en ajoutant votre première liste de lecture. Connectez-vous à votre service IPTV préféré et profitez de la télévision en direct, des films et des séries.",
+            "ADD_YOUR_FIRST": "Ajouter votre première liste",
+            "FEATURE_M3U": "Fichiers M3U/M3U8",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Portail Stalker",
+            "NO_RESULTS_TITLE": "Aucune liste trouvée",
+            "NO_RESULTS_DESCRIPTION": "Aucune liste ne correspond à votre recherche. Essayez d'ajuster vos termes de recherche ou effacez le filtre pour voir toutes les listes.",
+            "ADDED_VIA_URL": "Ajouté par URL. URL :",
+            "ADDED_VIA_FILE": "Ajouté par transfert de fichier",
+            "XTREAM_PLAYLIST": "Liste Xtream",
+            "STALKER_PORTAL": "Portail Stalker",
+            "CHANNELS": "Chaînes",
+            "ADDED": "Ajouté",
+            "SHOW_DETAILS": "Afficher les détails de la liste de lecture",
+            "REMOVE": "Retirer la liste de lecture",
+            "SEARCH_PLAYLISTS": "Rechercher des listes par titre",
+            "AUTO_REFRESH_ENABLED": "Actualisation automatique activée",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Détails de la liste de lecture",
+                "TITLE": "Titre",
+                "FROM_URL": "Ajouté par URL",
+                "IMPORT_DATE": "Date d'importation",
+                "CHANNELS": "Nombre de chaînes",
+                "CLOSE": "Fermer",
+                "SAVE": "Enregistrer",
+                "USER_AGENT": "Agent utilisateur",
+                "ORIGINAL_FILENAME": "Nom du fichier d'origine",
+                "FILE_PATH": "Chemin du fichier",
+                "UPDATE_FAILED": "Échec de la dernière mise à jour de liste de lecture",
+                "AUTO_UPDATE": "Mise à jour automatique",
+                "AUTO_UPDATE_DESCRIPTION": "Si la fonction de mise à jour automatique est activée, la liste de lecture sera mise à jour automatiquement à chaque fois que l'app est lancée.",
+                "CUSTOM_USER_AGENT": "Certains fournisseurs d'IPTV requièrent un agent utilisateur spécifique afin de lire leur liste de lecture.",
+                "EXPORT_PLAYLIST": "Exporter la liste de lecture en m3u",
+                "SERVER_URL": "URL du serveur",
+                "USERNAME": "Nom d'utilisateur",
+                "PASSWORD": "Mot de passe",
+                "MAC_ADDRESS": "Adresse Mac",
+                "PLAYLIST_EXPORT_SUCCESS": "La liste de lecture a été exportée avec succès.",
+                "PLAYLIST_EXPORT_ERROR": "Erreur : Échec de l'exportation de la liste de lecture.",
+                "COPY_URL": "Copier l'URL dans le presse-papiers",
+                "URL_COPIED": "URL copiée dans le presse-papiers"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Retirer la liste de lecture",
+                "MESSAGE": "Êtes-vous certain de vouloir complètement retirer cette liste de lecture ?",
+                "SUCCESS": "La liste de lecture a été supprimée avec succès"
+            },
+            "UPDATED": "Mis à jour",
+            "REFRESH": "Mettre à jour la liste de lecture",
+            "REFRESH_XTREAM": "Actualiser la liste Xtream depuis le serveur",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Actualiser la liste Xtream",
+                "MESSAGE": "Cela supprimera les catégories et flux mis en cache localement et réimportera tout depuis le serveur distant. Vos favoris et éléments récemment consultés seront conservés. Voulez-vous continuer ?",
+                "STARTED": "Actualisation démarrée. Navigation vers la liste de lecture...",
+                "ERROR": "Échec de l'actualisation de la liste de lecture. Veuillez réessayer."
+            },
+            "GLOBAL_FAVORITES": "Favoris globaux",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Liste de lecture générée automatiquement avec les favoris agrégés de toutes les listes",
+            "MY_PLAYLISTS": "Mes listes de lecture",
+            "MY_PLAYLISTS_SUBTITLE": "toutes les listes disponibles",
+            "PLAYLIST_UPDATE_SUCCESS": "Succès ! La liste de lecture a été mise à jour avec succès.",
+            "PLAYLIST_UPDATE_ERROR": "Erreur lors de la mise à jour des détails de la liste.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Succès ! Les listes de lecture ont été mises à jour avec succès",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Glissez un fichier ici",
+            "OR": "ou",
+            "CHOOSE_PLAYLIST": "Choisir une liste de lecture",
+            "REJECTED": "Le fichier a été rejeté, format de fichier non pris en charge {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "URL de la liste de lecture (m3u, m3u8)",
+            "ADD_PLAYLIST": "Ajouter la liste de lecture",
+            "CORS_NOTE": "Remarque : Pour éviter les problèmes CORS, l'application utilise un service proxy CORS public. Si vous souhaitez télécharger une liste avec des données sensibles, il est plus sûr de l'importer depuis un fichier."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Insérer la liste m3u(8) sous forme de texte",
+            "BUTTON_LABEL": "Importer"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Titre de la liste",
+            "SERVER_URL": "URL du serveur",
+            "USERNAME": "Nom d'utilisateur",
+            "PASSWORD": "Mot de passe",
+            "ADD": "Ajouter",
+            "TEST_CREDENTIALS": "Tester les identifiants",
+            "URL_VALIDATION_ERROR": "Doit être une URL valide avec un protocole (par exemple http://example.com ou https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Titre",
+            "MAC_ADDRESS": "Adresse Mac",
+            "SERVER_URL": "URL du serveur",
+            "URL_VALIDATION_ERROR": "Doit être une URL valide avec un protocole (par exemple http://example.com/c ou https://example.com/stalker_portal/c)",
+            "ADD": "Ajouter"
+        },
+        "FILTER_BY_NAME": "Filtrer par nom",
+        "FILTER_BY_TYPE": "Filtrer par type",
+        "SORT_PLAYLISTS": "Trier les listes",
+        "SORT_BY": "Trier par",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Nom (A-Z)",
+            "NAME_DESC": "Nom (Z-A)",
+            "NEWEST": "Date d'ajout (Plus récent)",
+            "OLDEST": "Date d'ajout (Plus ancien)"
+        },
+        "IMPORTED_AS_TEXT": "Importé sous forme de texte",
+        "PARSING_ERROR": "Erreur : échec de l'analyse, liste de lecture non valide :"
+    },
+    "SETTINGS": {
+        "TITLE": "Paramètres",
+        "SUBTITLE": "Modifiez la configuration de l'application",
+        "DESCRIPTION": "Changez les options de la liste ci-dessous et enregistrez vos modifications.",
+        "EPG_URL_LABEL": "URL du EPG (*.xml ou *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Saisir une URL",
+        "REFRESH_EPG": "Mise à jour de l'EPG",
+        "REFRESH_ALL_EPG": "Tout actualiser",
+        "REMOVE_EPG_SOURCE": "Supprimer la source EPG",
+        "EPG_STATUS_FRESH": "À jour",
+        "EPG_STATUS_STALE": "À actualiser",
+        "EPG_STATUS_ERROR": "Échec",
+        "VIDEO_PLAYER_LABEL": "Lecteur vidéo",
+        "VIDEO_PLAYER_PLACEHOLDER": "Choisir une option",
+        "VERSION": "Version",
+        "SAVE_CHANGES": "Enregistrer les modifications",
+        "BACK_TO_HOME": "Retourner à l'accueil",
+        "NEW_VERSION_AVAILABLE": "Une nouvelle version est disponible",
+        "LATEST_VERSION": "Vous utilisez la dernière version",
+        "STREAM_FORMAT": "Format du flux",
+        "LANGUAGE": "Langue",
+        "SETTINGS_SAVED": "La configuration a été enregistrée avec succès.",
+        "THEME": "Thème",
+        "SHOW_CAPTIONS": "Afficher les sous-titres",
+        "ADD_EPG_SOURCE": "Ajouter une source EPG",
+        "EPG_URL_ERROR": "La valeur n'est pas une URL valide",
+        "VIDEO_PLAYER_DESCRIPTION": "Sélectionnez le lecteur vidéo par défaut",
+        "STREAM_FORMAT_DESCRIPTION": "Sélectionnez le format de flux par défaut (xtream)",
+        "LANGUAGE_DESCRIPTION": "Sélectionnez la langue de l'application",
+        "THEME_DESCRIPTION": "Sélectionnez le thème visuel de l'application",
+        "SHOW_CAPTIONS_DESCRIPTION": "Afficher ou masquer les sous-titres par défaut",
+        "VERSION_DESCRIPTION": "Version actuelle de l'application",
+        "EPG_NOTE": "Actuellement, l'EPG n'est disponible que dans la version Electron d'IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Vérifiez-le ici",
+        "IMPORT_EXPORT_DATA": "Importer/exporter des listes de lecture",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Exportez ou importez des listes au format JSON utilisé dans l'application.",
+        "IMPORT_DATA": "Importer",
+        "EXPORT_DATA": "Exporter",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Erreur d'importation, veuillez essayer avec un autre fichier.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "Chemin mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Définissez le chemin d'accès au lecteur mpv dans votre système. Il utilisera le chemin fourni vers un binaire mpv au lieu de celui trouvé dans $PATH.",
+        "MPV_PLAYER_PATH": "Chemin du lecteur mpv",
+        "VLC_PLAYER_PATH_LABEL": "Chemin VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Définissez le chemin d'accès au lecteur VLC dans votre système. Il utilisera le chemin fourni vers un binaire VLC au lieu du chemin par défaut.",
+        "VLC_PLAYER_PATH": "Chemin du lecteur VLC",
+        "REMOTE_CONTROL": "Télécommande",
+        "REMOTE_CONTROL_DESCRIPTION": "Activer la télécommande de l'application.",
+        "REMOTE_CONTROL_PORT": "Port de télécommande",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Port utilisé pour la télécommande de l'application. Le port 8765 est utilisé par défaut.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Thème foncé",
+        "LIGHT_THEME": "Thème clair",
+        "SYSTEM_THEME": "Thème du système"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Rechercher une chaîne",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Transférer ou choisir une autre liste de lecture",
+        "ALL_CHANNELS": "Toutes les chaînes",
+        "GROUPS": "Groupes",
+        "UNGROUPED": "Non-groupé",
+        "UNNAMED_CHANNEL": "Chaîne sans nom",
+        "FAVORITES": "Favoris",
+        "NO_FAVORITES": "Aucun favoris",
+        "USE_STAR_TO_FAVORITE": "Veuillez utiliser l'icône 'étoile' pour ajouter une chaîne aux favoris.",
+        "REMOVE_FAVORITE": "Retirer des favoris",
+        "FAVORITES_UPDATED": "Les favoris ont été mis à jour !",
+        "SORT_BY": "Trier par",
+        "SORT_BY_DATE": "Trier par date d'ajout (Plus récent)",
+        "SORT_BY_RATING": "Trier par note",
+        "SORT_BY_NAME": "Trier par nom (A-Z)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Ouvrir la liste des chaînes",
+        "TOGGLE_FAVORITE_FLAG": "Basculer le statut de favoris",
+        "OPEN_EPG_LIST": "Ouvrir la liste EPG",
+        "OPEN_MULTI_EPG": "Ouvrir la vue Multi-EPG",
+        "SHOW_INFO": "Afficher les infos du programme (Appuyez sur I)"
+    },
+    "EPG": {
+        "TITLE": "Guide électronique des programmes",
+        "NEXT_DAY": "Jour suivant",
+        "PREVIOUS_DAY": "Jour précédent",
+        "LIVE_NOW": "En direct",
+        "LIVE_STREAM": "Diffusion en direct",
+        "TIMESHIFT_AVAILABLE": "Contrôle du direct disponible, cliquez pour lire",
+        "EPG_NOT_AVAILABLE_DATE": "L'EPG n'est pas disponible pour la date sélectionnée",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "L'EPG n'est pas disponible pour cette chaîne.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Veuillez ajouter/modifier l'URL de la liste EPG dans les réglages de l'application.",
+        "FETCH_EPG": "Récupération des données EPG...",
+        "ERROR": "L'EPG n'a pas pu être chargé.",
+        "DOWNLOAD_SUCCESS": "L'EPG a été téléchargé avec succès.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Détails du programme TV",
+            "TITLE": "Titre",
+            "CATEGORY": "Catégorie",
+            "PARENTAL_RATING_SYSTEM": "Système de classification du contenu télévisé",
+            "DESCRIPTION": "Description",
+            "LANGUAGE": "Langue",
+            "SHOW_PROGRAM_DETAILS": "Afficher les détails de ce programme"
+        },
+        "FETCH_SUCCESS": "L'EPG a été récupéré avec succès"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Oui",
+    "NO": "Non",
+    "MENU": {
+        "OPEN": "Ouvrir le menu",
+        "SUPPORT_ARIA": "Soutenir IPTVnator sur GitHub",
+        "SETTINGS": "Paramètres",
+        "SETTINGS_ARIA": "Ouvrir les paramètres",
+        "BUG_REPORT": "Signaler un bug",
+        "WHAT_IS_NEW": "Nouveautés",
+        "ABOUT": "À propos",
+        "ABOUT_ARIA": "À propos de l'application",
+        "SUPPORT_PROJECT": "Soutenir le projet"
+    },
+    "ABOUT": {
+        "TITLE": "À propos d'IPTVnator",
+        "DESCRIPTION": "Application lecteur IPTV multiplateforme avec de nombreuses fonctionnalités, comme la prise en charge des listes m3u et m3u8, les favoris, le guide TV, les archives TV/rattrapage et plus encore.",
+        "VERSION": "Version",
+        "GITHUB_TOOLTIP": "Dépôt IPTVnator sur GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Offrez-moi un café",
+        "TWITTER_TOOLTIP": "Partager sur Twitter"
+    },
+    "UPDATE_AVAILABLE": "Mise à jour disponible",
+    "REFRESH": "Actualiser",
+    "XTREAM": {
+        "PLAY": "Lire",
+        "NAME": "Nom",
+        "RELEASE_DATE": "Date de sortie",
+        "GENRE": "Genre",
+        "COUNTRY": "Pays",
+        "ACTORS": "Acteurs",
+        "DIRECTOR": "Réalisateur",
+        "DURATION": "Durée",
+        "CAST": "Distribution",
+        "EPISODE_RUN_TIME": "Durée de l'épisode",
+        "RATING": "Note",
+        "IMDB_RATING": "Note IMDB",
+        "KINOPOISK_RATING": "Note Kinopoisk",
+        "DESCRIPTION": "Description",
+        "YEAR": "Année",
+        "AGE": "Âge",
+        "YOUTUBE_TRAILER": "Bande-annonce YouTube",
+        "EPISODE": "Épisode"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Toutes les catégories",
+        "MY_FAVORITES": "Mes favoris",
+        "ADD_TO_FAVORITES": "Ajouter aux favoris",
+        "REMOVE_FROM_FAVORITES": "Retirer des favoris",
+        "REMOVED_FROM_FAVORITES": "Retiré des favoris",
+        "ADDED_TO_FAVORITES": "Ajouté aux favoris",
+        "SIDEBAR": {
+            "MAIN": "Principal",
+            "MOVIES": "Films",
+            "LIVE_TV": "TV en direct",
+            "SERIES": "Séries",
+            "LIBRARY": "Bibliothèque",
+            "SEARCH": "Rechercher",
+            "RECENT": "Récent",
+            "FAVORITES": "Favoris",
+            "HOME": "Accueil",
+            "PLAYLIST_INFO": "Infos de la liste",
+            "ACCOUNT_INFO": "Infos du compte"
+        },
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Compte expiré",
+                "DESCRIPTION": "Ce compte a expiré. Veuillez vérifier les identifiants dans les paramètres de la liste ou la supprimer."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Non autorisé",
+                "DESCRIPTION": "Veuillez vérifier les identifiants dans les paramètres de la liste ou la supprimer."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portail non trouvé",
+                "DESCRIPTION": "Veuillez vérifier les identifiants et l'URL du portail dans les paramètres de la liste ou la supprimer."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Catégorie vide",
+                "DESCRIPTION": "Cette catégorie n'a pas de contenu, veuillez sélectionner une autre catégorie ou modifier le type de contenu"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Une erreur s'est produite",
+                "DESCRIPTION": "Erreur inconnue, veuillez réessayer plus tard"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "Aucune catégorie sélectionnée",
+                "DESCRIPTION": "Veuillez sélectionner une catégorie pour voir le contenu"
+            },
+            "PLAYLIST_SETTINGS": "Paramètres de la liste",
+            "HOME": "Accueil",
+            "DELETE": "Supprimer"
+        },
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "Aucun résultat trouvé",
+            "NO_SEARCH_RESULTS": "Rien trouvé, essayez de modifier votre recherche"
+        },
+        "STREAM_URL_COPIED": "URL du flux copiée dans le presse-papiers",
+        "COPY_STREAM_URL": "Copier l'URL du flux",
+        "SELECT_CATEGORY": "Sélectionner une catégorie",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "{{count}} résultats trouvés",
+            "NO_RESULTS_FOR": "Aucun résultat trouvé pour \"{{term}}\""
+        }
+    },
+    "INFORMATION": "Information",
+    "DOWNLOADS": {
+        "TITLE": "Téléchargements",
+        "DOWNLOAD": "Télécharger",
+        "PLAY_LOCAL": "Lire local",
+        "EMPTY": "Aucun téléchargement",
+        "EMPTY_HINT": "Téléchargez des films et épisodes pour les regarder hors ligne",
+        "NOT_AVAILABLE": "Téléchargements non disponibles",
+        "DESKTOP_ONLY": "Cette fonctionnalité n'est disponible que dans l'application de bureau",
+        "NO_FOLDER": "Aucun dossier de téléchargement sélectionné",
+        "CHANGE_FOLDER": "Changer de dossier",
+        "CLEAR_COMPLETED": "Effacer terminés",
+        "CANCEL": "Annuler",
+        "RETRY": "Réessayer",
+        "REMOVE": "Supprimer",
+        "PLAY": "Lire",
+        "REVEAL": "Afficher dans le dossier",
+        "STATUS": {
+            "QUEUED": "En attente",
+            "DOWNLOADING": "En cours",
+            "COMPLETED": "Terminé",
+            "FAILED": "Échec",
+            "CANCELED": "Annulé"
+        },
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    },
+    "REMOTE_CONTROL": {
+        "TITLE": "Télécommande",
+        "UP_CHANNEL": "Chaîne précédente",
+        "DOWN_CHANNEL": "Chaîne suivante",
+        "HEADER": "Télécommande IPTVNator",
+        "FOOTER": "Télécommande IPTVNator"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    }
+}
diff --git a/apps/web/src/assets/i18n/it.json b/apps/web/src/assets/i18n/it.json
new file mode 100644
index 0000000..51e9e9b
--- /dev/null
+++ b/apps/web/src/assets/i18n/it.json
@@ -0,0 +1,462 @@
+{
+    "CLOSE": "Chiudi",
+    "PLAYLISTS": "Playlist",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Seleziona una playlist dall'elenco o aggiungi una nuova playlist tramite caricamento del file o tramite URL",
+        "TABS": {
+            "RECENTLY_ADDED": "Playlist aggiunte di recente",
+            "FILE_UPLOAD": "Aggiungi tramite caricamento file",
+            "URL_UPLOAD": "Aggiungi tramite URL",
+            "TEXT_IMPORT": "Importa come testo",
+            "XTREME_IMPORT": "Aggiungi codice Xtreme",
+            "STALKER_PORTAL_IMPORT": "Aggiungi portale Stalker"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Nessuna playlist è stata aggiunta",
+            "ADD_FIRST": "Aggiungi la tua prima playlist dall'altra scheda",
+            "ADDED_VIA_URL": "Aggiunto tramite caricamento URL. URL:",
+            "ADDED_VIA_FILE": "Aggiunto tramite caricamento file",
+            "XTREAM_PLAYLIST": "Playlist Xtream",
+            "STALKER_PORTAL": "Portale Stalker",
+            "CHANNELS": "Canali",
+            "ADDED": "Aggiunto",
+            "SHOW_DETAILS": "Visualizza i dettagli della playlist",
+            "REMOVE": "Rimuovi playlist",
+            "SEARCH_PLAYLISTS": "Cerca playlist per titolo",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Dettagli playlist",
+                "TITLE": "Titolo",
+                "FROM_URL": "Aggiunto dall'URL",
+                "IMPORT_DATE": "Data importazione",
+                "CHANNELS": "Numero di canali",
+                "CLOSE": "Chiudi",
+                "SAVE": "Salva",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "Nome file originale",
+                "FILE_PATH": "Percorso file",
+                "UPDATE_FAILED": "L'ultimo aggiornamento della playlist non è riuscito",
+                "AUTO_UPDATE": "Aggiornamento automatico",
+                "AUTO_UPDATE_DESCRIPTION": "Se la funzione di aggiornamento automatico è attivata, la playlist verrà aggiornata automaticamente ad ogni avvio dell'app.",
+                "CUSTOM_USER_AGENT": "Alcuni fornitori IPTV per riprodurre la loro playlist necessitano di uno user agent specifico.",
+                "EXPORT_PLAYLIST": "Esporta playlist come file m3u",
+                "SERVER_URL": "URL server",
+                "USERNAME": "Utente",
+                "PASSWORD": "Password",
+                "MAC_ADDRESS": "Indirizzo MAC"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Rimuovi playlist",
+                "MESSAGE": "Sei sicuro di voler eliminare completamente questa playlist?"
+            },
+            "UPDATED": "Aggiornata",
+            "REFRESH": "Aggiorna playlist",
+            "GLOBAL_FAVORITES": "Preferiti globali",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Playlist generata automaticamente con preferiti aggregati da tutte le playlist",
+            "MY_PLAYLISTS": "Le mie playlist",
+            "MY_PLAYLISTS_SUBTITLE": "tutte le playlist disponibili",
+            "PLAYLIST_UPDATE_SUCCESS": "La playlist è stata correttamente aggiornata.",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Trascina e rilascia qui i file",
+            "OR": "o",
+            "CHOOSE_PLAYLIST": "scegli una playlist",
+            "REJECTED": "Il file è stato rifiutato, formato di file non supportato {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "URL playlist (m3u, m3u8)",
+            "ADD_PLAYLIST": "Aggiungi playlist",
+            "CORS_NOTE": "Nota: per evitare problemi CORS a questo punto, l'applicazione usa un servizio proxy CORS pubblico. Se vuoi caricare una playlist con dati sensibili, è meglio importarla come file nella scheda adiacente."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Inserisci playlist m3u(8) come testo",
+            "BUTTON_LABEL": "Importa"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Titolo playlist",
+            "SERVER_URL": "URL server",
+            "USERNAME": "Utente",
+            "PASSWORD": "Password",
+            "ADD": "Aggiungi",
+            "TEST_CREDENTIALS": "Testa credenziali",
+            "URL_VALIDATION_ERROR": "Dovrebbe essere una URL valida con protocollo (es. http://esempio.it o https://esempio.it:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Titolo",
+            "MAC_ADDRESS": "Indirizzo MAC",
+            "SERVER_URL": "URL server",
+            "URL_VALIDATION_ERROR": "Dovrebbe essere una URL valida con protocollo (es. http://esempio.it/c o https://esempio.it/stalker_portal/c)",
+            "ADD": "Aggiungi"
+        },
+        "FILTER_BY_NAME": "Filtra per nome",
+        "FILTER_BY_TYPE": "Filtra per tipo",
+        "SORT_PLAYLISTS": "Ordina playlist",
+        "SORT_BY": "Ordina per",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Nome (A-Z)",
+            "NAME_DESC": "Nome (Z-A)",
+            "NEWEST": "Data aggiunta (prima più recenti)",
+            "OLDEST": "Data aggiunta (prima più vecchi)"
+        },
+        "IMPORTED_AS_TEXT": "Importato come testo",
+        "PARSING_ERROR": "Errore: analisi fallita, non è una playlist valida:"
+    },
+    "SETTINGS": {
+        "TITLE": "Impostazioni IPTVnator",
+        "GENERAL": "Generale",
+        "GENERAL_SUBTITLE": "Modifica le impostazioni generali dell'applicazione",
+        "PLAYBACK": "Riproduzione",
+        "EPG_SOURCES": "Sorgenti EPG",
+        "EPG_SOURCES_DESCRIPTION": "Aggiungi uno o piu URL come sorgenti EPG",
+        "DATA": "Dati",
+        "ABOUT": "Info",
+        "NAV_GENERAL": "Generale",
+        "NAV_PLAYBACK": "Riproduzione",
+        "NAV_EPG": "EPG",
+        "NAV_REMOTE": "Remote",
+        "NAV_DATA": "Dati",
+        "NAV_ABOUT": "Info",
+        "APP_PREFERENCES": "Preferenze app",
+        "HERO_EYEBROW": "Impostazioni area di lavoro",
+        "HERO_TITLE": "Modella IPTVnator come preferisci",
+        "HERO_DESCRIPTION": "Regola riproduzione, guida TV, accesso remoto e gestione dati da un unico posto senza perdere lo stile attuale dell'area di lavoro.",
+        "SUBTITLE": "Modifica la configurazione dell'applicazione",
+        "DESCRIPTION": "Configura le opzioni nell'elenco sottostante e conferma con 'Salva modifiche'",
+        "EPG_URL_LABEL": "URL EPG (*.xml o *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Inserisci una URL",
+        "REFRESH_EPG": "Aggiorna EPG",
+        "REFRESH_ALL_EPG": "Aggiorna tutto",
+        "REMOVE_EPG_SOURCE": "Rimuovi sorgente EPG",
+        "EPG_STATUS_FRESH": "Aggiornato",
+        "EPG_STATUS_STALE": "Da aggiornare",
+        "EPG_STATUS_ERROR": "Errore",
+        "VIDEO_PLAYER_LABEL": "Riproduttore video",
+        "PLAYER_HTML5": "Lettore HTML5",
+        "PLAYER_VIDEOJS": "Lettore Video.js",
+        "PLAYER_ARTPLAYER": "ArtPlayer",
+        "PLAYER_MPV": "Lettore MPV",
+        "PLAYER_VLC": "VLC",
+        "VIDEO_PLAYER_PLACEHOLDER": "Seleziona una opzione",
+        "VERSION": "Versione",
+        "SAVE_CHANGES": "Salva modifiche",
+        "BACK_TO_HOME": "Indietro",
+        "NEW_VERSION_AVAILABLE": "È disponibile una nuova versione",
+        "LATEST_VERSION": "Questa versione è aggiornata",
+        "STREAM_FORMAT": "Formato streaming",
+        "LANGUAGE": "Lingua",
+        "SETTINGS_SAVED": "La configurazione è stata salvata.",
+        "THEME": "Tema visuale",
+        "SHOW_CAPTIONS": "Visualizza sottotitoli",
+        "ADD_EPG_SOURCE": "Aggiungi sorgente EPG",
+        "CLEAR_EPG_DATA": "Cancella dati EPG",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "Cancella dati EPG",
+            "MESSAGE": "Vuoi davvero rimuovere tutti i dati EPG dal database? Questo eliminerà tutte le programmazioni memorizzate nella cache."
+        },
+        "EPG_DATA_CLEARED": "I dati EPG sono stati cancellati",
+        "EPG_DATA_CLEAR_FAILED": "Impossibile cancellare i dati EPG. Riprova.",
+        "CLEARING_EPG_DATA": "Cancellazione…",
+        "EPG_URL_ERROR": "Il valore non è una URL valida",
+        "VIDEO_PLAYER_DESCRIPTION": "Seleziona lettore video predefinito",
+        "STREAM_FORMAT_DESCRIPTION": "Seleziona il formato di streaming predefinito (xtream)",
+        "LANGUAGE_DESCRIPTION": "Seleziona la lingua dell'applicazione",
+        "THEME_DESCRIPTION": "Seleziona il tema visivo dell'applicazione",
+        "SHOW_CAPTIONS_DESCRIPTION": "Visualizza/nascondi i sottotitoli per impostazione predefinita",
+        "VERSION_DESCRIPTION": "Versione attuale dell'applicazione",
+        "EPG_NOTE": "Attualmente EPG è disponibile solo nella versione dell'applicazione electron.",
+        "EPG_NOTE_URL_TEXT": "Maggiori info qui",
+        "IMPORT_EXPORT_DATA": "Importa/esporta playlist",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Esporta/importa playlist nel formato JSON usato all'interno dell'applicazione.",
+        "IMPORT_DATA": "Importa",
+        "EXPORT_DATA": "Esporta",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Errore di importazione, prova con un altro file.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "percorso mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Imposta il percorso per il lettore mpv in questo tuo sistema. Verrà usato il percorso fornito per un eseguibile mpv invece di usare quello trovato in $PATH.",
+        "MPV_PLAYER_PATH": "percorso riproduttore mpv",
+        "MPV_REUSE_INSTANCE_LABEL": "Riutilizza istanza MPV",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "Quando attivo, la stessa finestra MPV viene riutilizzata per riprodurre stream diversi. Quando disattivo, ogni stream viene aperto in una nuova finestra MPV.",
+        "VLC_PLAYER_PATH_LABEL": "Percorso VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Imposta il percorso del lettore VLC nel sistema. Verrà usato il percorso fornito per il file exe VLC invece del percorso predefinito per il sistema.",
+        "VLC_PLAYER_PATH": "Percorso lettore VLC",
+        "REMOTE_CONTROL": "Telecomando",
+        "REMOTE_CONTROL_DESCRIPTION": "Abilita controllo remoto nell'applicazione.",
+        "REMOTE_CONTROL_PORT": "Porta controllo remoto",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Porta usata per il controllo remoto dell'applicazione. Per impostazione predefinita viene usata la porta 8765.",
+        "REMOTE_CONTROL_URL": "URL telecomando",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Accedi al telecomando da un altro dispositivo sulla stessa rete.",
+        "SHOW_QR_CODE": "Mostra codice QR",
+        "STATUS_ENABLED": "Attivo",
+        "STATUS_DISABLED": "Disattivo",
+        "SOURCE_SINGULAR": "sorgente",
+        "SOURCE_PLURAL": "sorgenti",
+        "PORT_RANGE_LABEL": "Porta (1-65535)",
+        "PORT_REQUIRED": "La porta è obbligatoria",
+        "PORT_MIN": "La porta deve essere almeno 1",
+        "PORT_MAX": "La porta deve essere al massimo 65535",
+        "PORT_PATTERN": "Sono consentite solo cifre",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Tema scuro",
+        "LIGHT_THEME": "Tema chiaro",
+        "SYSTEM_THEME": "Tema di sistema"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Cerca canale",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Carica o seleziona un'altra playlist",
+        "ALL_CHANNELS": "Tutti i canali",
+        "GROUPS": "Gruppi",
+        "UNGROUPED": "Non raggruppati",
+        "UNNAMED_CHANNEL": "Canale senza nome",
+        "FAVORITES": "Preferiti",
+        "NO_FAVORITES": "Ancora nessun preferito",
+        "USE_STAR_TO_FAVORITE": "Usa l'icona 'stella' per aggiungere canali ai preferiti.",
+        "REMOVE_FAVORITE": "Rimuovi dai preferiti",
+        "FAVORITES_UPDATED": "Aggiornamento preferiti completato!",
+        "SORT_BY": "Ordina per",
+        "SORT_BY_DATE": "Data inserimento (prima più recenti)",
+        "SORT_BY_RATING": "Valutazione",
+        "SORT_BY_NAME": "Nome (A-Z)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Apri elenco canali",
+        "TOGGLE_FAVORITE_FLAG": "Attiva/disattiva flag preferiti",
+        "OPEN_EPG_LIST": "Apri elenco EPG",
+        "OPEN_MULTI_EPG": "Apri vista Multi-EPG"
+    },
+    "EPG": {
+        "TITLE": "Guida elettronica programmi",
+        "NEXT_DAY": "Giorno successivo",
+        "PREVIOUS_DAY": "Giorno precedente",
+        "LIVE_NOW": "Live attuale",
+        "LIVE_STREAM": "Stream live",
+        "TIMESHIFT_AVAILABLE": "Disponibile il timeshift, fai clic per riprodurre",
+        "EPG_NOT_AVAILABLE_DATE": "Non è disponibile l'EPG per la data selezionata",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Non è disponibile l'EPG per questo canale.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Aggiungi/modifica l'URL dell'elenco EPG nelle impostazioni dell'app.",
+        "FETCH_EPG": "Recupero dati EPG...",
+        "ERROR": "Non è stato possibile caricare l'EPG.",
+        "DOWNLOAD_SUCCESS": "L'EPG è stato correttamente scaricato.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Dettagli sul programma TV",
+            "TITLE": "Titolo",
+            "CATEGORY": "Categoria",
+            "PARENTAL_RATING_SYSTEM": "Sistema classificazione contenuti TV",
+            "DESCRIPTION": "Descrizione",
+            "LANGUAGE": "Lingua",
+            "SHOW_PROGRAM_DETAILS": "Visualizza dettagli su questo programma"
+        },
+        "FETCH_SUCCESS": "EPG scaricato correttamente"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Sì",
+    "NO": "No",
+    "MENU": {
+        "OPEN": "Apri menu",
+        "SUPPORT_ARIA": "Supporta IPTVnator su GitHub",
+        "SETTINGS": "Impostazioni",
+        "SETTINGS_ARIA": "Apri impostazioni",
+        "BUG_REPORT": "Segnala un bug",
+        "WHAT_IS_NEW": "Novità del programma",
+        "ABOUT": "Info sul programma",
+        "ABOUT_ARIA": "Info sull'applicazione",
+        "SUPPORT_PROJECT": "Supporta il progetto"
+    },
+    "ABOUT": {
+        "TITLE": "Info su IPTVnator",
+        "DESCRIPTION": "Applicazione per la riproduzione IPTV multi piattaforma con molteplici funzionalità, come il supporto di playlist m3u e m3u8, preferiti, guida TV, archivio TV/catchup e altro ancora.",
+        "VERSION": "Versione",
+        "GITHUB_TOOLTIP": "Repository ITPVnator su GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Offrimi un caffè",
+        "TWITTER_TOOLTIP": "Condividi su Twitter"
+    },
+    "UPDATE_AVAILABLE": "Disponibile aggiornamento",
+    "REFRESH": "Aggiorna",
+    "XTREAM": {
+        "PLAY": "Riproduci",
+        "NAME": "Nome",
+        "RELEASE_DATE": "Data rilascio",
+        "GENRE": "Genere",
+        "COUNTRY": "Nazione",
+        "ACTORS": "Attori",
+        "DIRECTOR": "Regista",
+        "DURATION": "Durata",
+        "CAST": "Cast",
+        "EPISODE_RUN_TIME": "Tempo esecuzione episodio",
+        "RATING": "Classifica",
+        "IMDB_RATING": "Classifica IMDB",
+        "KINOPOISK_RATING": "Classifica Kinopoisk",
+        "DESCRIPTION": "Descrizione",
+        "YEAR": "Anno",
+        "AGE": "Età",
+        "YOUTUBE_TRAILER": "Trailer YouTube",
+        "EPISODE": "Episodio"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Tutte le categorie",
+        "MY_FAVORITES": "Preferiti",
+        "ADD_TO_FAVORITES": "Aggiungi ai preferiti",
+        "REMOVE_FROM_FAVORITES": "Rimuovi dai preferiti",
+        "REMOVED_FROM_FAVORITES": "Rimosso dai preferiti",
+        "ADDED_TO_FAVORITES": "Aggiunto ai preferiti",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Account scaduto",
+                "DESCRIPTION": "Questo account è scaduto. Controlla le credenziali nelle impostazioni della playlist o rimuovile."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Non autorizzato",
+                "DESCRIPTION": "Controlla le credenziali nelle impostazioni della playlist o rimuovile."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portale non trovato",
+                "DESCRIPTION": "Controlla le credenziali e l'URL del portale nelle impostazioni della playlist o rimuovile."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Categoria vuota",
+                "DESCRIPTION": "Questa categoria non ha contenuti, seleziona un'altra categoria o modifica il tipo di contenuto"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Qualcosa è andato storto",
+                "DESCRIPTION": "Errore sconosciuto, riprova più tardi"
+            },
+            "PLAYLIST_SETTINGS": "Impostazioni Playlist",
+            "HOME": "Home",
+            "DELETE": "Elimina"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "Nessun risultato, prova a modificare la richiesta di ricerca"
+        },
+        "STREAM_URL_COPIED": "URL streaming copiato negli appunti",
+        "COPY_STREAM_URL": "Copia URL streaming",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "Trovati {{count}} risultati",
+            "NO_RESULTS_FOR": "Nessun risultato trovato per \"{{term}}\""
+        }
+    },
+    "INFORMATION": "Informazioni",
+    "REMOTE_CONTROL": {
+        "TITLE": "Controllo remoto",
+        "UP_CHANNEL": "Canale +",
+        "DOWN_CHANNEL": "Canale -",
+        "HEADER": "Controllo remoto IPTVNator",
+        "FOOTER": "Controllo remoto IPTVNator"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/ja.json b/apps/web/src/assets/i18n/ja.json
new file mode 100644
index 0000000..f276584
--- /dev/null
+++ b/apps/web/src/assets/i18n/ja.json
@@ -0,0 +1,408 @@
+{
+    "CLOSE": "閉じる",
+    "PLAYLISTS": "プレイリスト",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "リストからプレイリストを選択するか、新しいプレイリストを追加してください",
+        "TABS": {
+            "RECENTLY_ADDED": "最近追加したプレイリスト",
+            "FILE_UPLOAD": "ファイルアップロード",
+            "URL_UPLOAD": "URLから追加",
+            "TEXT_IMPORT": "テキストからインポート",
+            "XTREME_IMPORT": "Xtremeコードを追加",
+            "STALKER_PORTAL_IMPORT": "Stalkerポータルを追加"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "プレイリストが追加されていません",
+            "ADD_FIRST": "最初のプレイリストを追加してください",
+            "ADDED_VIA_URL": "URLからアップロード。URL:",
+            "ADDED_VIA_FILE": "ファイルからアップロード",
+            "XTREAM_PLAYLIST": "Xtremeプレイリスト",
+            "STALKER_PORTAL": "Stalkerポータル",
+            "CHANNELS": "チャンネル",
+            "ADDED": "追加済み",
+            "SHOW_DETAILS": "プレイリストの詳細を表示",
+            "REMOVE": "プレイリストを削除",
+            "SEARCH_PLAYLISTS": "タイトルでプレイリストを検索",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "プレイリストの詳細",
+                "TITLE": "タイトル",
+                "FROM_URL": "URLから追加",
+                "IMPORT_DATE": "インポート日",
+                "CHANNELS": "チャンネル数",
+                "CLOSE": "閉じる",
+                "SAVE": "保存",
+                "USER_AGENT": "ユーザーエージェント",
+                "ORIGINAL_FILENAME": "元のファイル名",
+                "FILE_PATH": "ファイルパス",
+                "UPDATE_FAILED": "最後のプレイリスト更新に失敗しました",
+                "AUTO_UPDATE": "自動更新",
+                "AUTO_UPDATE_DESCRIPTION": "自動更新機能が有効な場合、アプリ起動時にプレイリストが自動的に更新されます。",
+                "CUSTOM_USER_AGENT": "一部のIPTVプロバイダーでは、プレイリストを再生するために特定のユーザーエージェントが必要です。",
+                "EXPORT_PLAYLIST": "プレイリストをm3uとしてエクスポート",
+                "SERVER_URL": "サーバーURL",
+                "USERNAME": "ユーザー名",
+                "PASSWORD": "パスワード",
+                "MAC_ADDRESS": "MACアドレス"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "プレイリストを削除",
+                "MESSAGE": "このプレイリストを完全に削除してもよろしいですか？"
+            },
+            "UPDATED": "更新済み",
+            "REFRESH": "プレイリストを更新",
+            "GLOBAL_FAVORITES": "グローバルお気に入り",
+            "GLOBAL_FAVORITES_DESCRIPTION": "全プレイリストのお気に入りを集約した自動生成プレイリスト",
+            "MY_PLAYLISTS": "マイプレイリスト",
+            "MY_PLAYLISTS_SUBTITLE": "利用可能な全プレイリスト",
+            "PLAYLIST_UPDATE_SUCCESS": "成功！プレイリストが正常に更新されました。",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "ここにファイルをドラッグ＆ドロップ",
+            "OR": "または",
+            "CHOOSE_PLAYLIST": "プレイリストを選択",
+            "REJECTED": "ファイルが拒否されました。サポートされていないファイル形式です：{{filename}}"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "プレイリストURL (m3u, m3u8)",
+            "ADD_PLAYLIST": "プレイリストを追加",
+            "CORS_NOTE": "注意：CORSの問題を回避するため、現時点ではパブリックCORSプロキシサービスを使用しています。機密データを含むプレイリストをアップロードする場合は、ファイルからインポートする方が安全です。"
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "m3u(8)プレイリストをテキストとして挿入",
+            "BUTTON_LABEL": "インポート"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "プレイリストタイトル",
+            "SERVER_URL": "サーバーURL",
+            "USERNAME": "ユーザー名",
+            "PASSWORD": "パスワード",
+            "ADD": "追加",
+            "TEST_CREDENTIALS": "認証情報をテスト",
+            "URL_VALIDATION_ERROR": "プロトコルを含む有効なURLである必要があります（例：http://example.com または https://example.com:4324）"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "タイトル",
+            "MAC_ADDRESS": "MACアドレス",
+            "SERVER_URL": "サーバーURL",
+            "URL_VALIDATION_ERROR": "プロトコルを含む有効なURLである必要があります（例：http://example.com/c または https://example.com/stalker_portal/c）",
+            "ADD": "追加"
+        },
+        "FILTER_BY_NAME": "名前でフィルター",
+        "FILTER_BY_TYPE": "種類でフィルター",
+        "IMPORTED_AS_TEXT": "テキストとしてインポート",
+        "PARSING_ERROR": "エラー：解析に失敗しました。有効なプレイリストではありません："
+    },
+    "SETTINGS": {
+        "TITLE": "設定",
+        "SUBTITLE": "アプリケーションの設定を変更",
+        "DESCRIPTION": "以下のオプションを調整し、変更を保存ボタンで確定してください",
+        "EPG_URL_LABEL": "EPG URL (*.xml または *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "URLを入力",
+        "REFRESH_EPG": "EPGを更新",
+        "REFRESH_ALL_EPG": "すべて更新",
+        "REMOVE_EPG_SOURCE": "EPGソースを削除",
+        "EPG_STATUS_FRESH": "最新",
+        "EPG_STATUS_STALE": "更新が必要",
+        "EPG_STATUS_ERROR": "失敗",
+        "VIDEO_PLAYER_LABEL": "ビデオプレーヤー",
+        "VIDEO_PLAYER_PLACEHOLDER": "オプションを選択",
+        "VERSION": "バージョン",
+        "SAVE_CHANGES": "変更を保存",
+        "BACK_TO_HOME": "戻る",
+        "NEW_VERSION_AVAILABLE": "新しいバージョンが利用可能です",
+        "LATEST_VERSION": "最新バージョンを使用中です",
+        "LANGUAGE": "言語",
+        "SETTINGS_SAVED": "成功！設定が保存されました。",
+        "THEME": "視覚テーマ",
+        "SHOW_CAPTIONS": "字幕を表示",
+        "ADD_EPG_SOURCE": "EPGソースを追加",
+        "EPG_URL_ERROR": "有効なURLではありません",
+        "VIDEO_PLAYER_DESCRIPTION": "デフォルトのビデオプレーヤーを選択",
+        "LANGUAGE_DESCRIPTION": "アプリケーションの言語を選択",
+        "THEME_DESCRIPTION": "アプリケーションの視覚テーマを選択",
+        "SHOW_CAPTIONS_DESCRIPTION": "デフォルトで字幕を表示/非表示",
+        "VERSION_DESCRIPTION": "アプリケーションの現在のバージョン",
+        "EPG_NOTE": "現在、EPGはIPTVnatorのelectronベース版でのみ利用可能です。",
+        "EPG_NOTE_URL_TEXT": "こちらをチェック",
+        "IMPORT_EXPORT_DATA": "プレイリストのインポート/エクスポート",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "アプリケーション内で使用されているJSONフォーマットでプレイリストをエクスポートまたはインポート。",
+        "IMPORT_DATA": "インポート",
+        "EXPORT_DATA": "エクスポート",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "インポートエラー。別のファイルで試してください。",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "mpvのパス",
+        "MPV_PLAYER_PATH_DESCRIPTION": "システム内のmpvプレーヤーのパスを設定します。$PATHで見つかったものの代わりに、指定されたmpvバイナリのパスを使用します。",
+        "MPV_PLAYER_PATH": "mpvプレーヤーのパス",
+        "VLC_PLAYER_PATH_LABEL": "VLCのパス",
+        "VLC_PLAYER_PATH_DESCRIPTION": "システム内のVLCプレーヤーのパスを設定します。システムのデフォルトパスの代わりに、指定されたVLCバイナリのパスを使用します。",
+        "VLC_PLAYER_PATH": "VLCプレーヤーのパス",
+        "REMOTE_CONTROL": "リモートコントロール",
+        "REMOTE_CONTROL_DESCRIPTION": "アプリケーションのリモートコントロールを有効にします。",
+        "REMOTE_CONTROL_PORT": "リモートコントロールポート",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "アプリケーションのリモートコントロールに使用されるポート。デフォルトではポート3000が使用されます。",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "ダークテーマ",
+        "LIGHT_THEME": "ライトテーマ",
+        "SYSTEM_THEME": "システムテーマ"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "チャンネルを検索",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "アップロードまたは他のプレイリストを選択",
+        "ALL_CHANNELS": "すべてのチャンネル",
+        "GROUPS": "グループ",
+        "UNGROUPED": "グループなし",
+        "UNNAMED_CHANNEL": "名前のないチャンネル",
+        "FAVORITES": "お気に入り",
+        "NO_FAVORITES": "まだお気に入りがありません",
+        "USE_STAR_TO_FAVORITE": "'スター'アイコンを使用してチャンネルをお気に入りに追加してください。",
+        "REMOVE_FAVORITE": "お気に入りから削除",
+        "FAVORITES_UPDATED": "お気に入りが更新されました！",
+        "SORT_BY": "並び替え",
+        "SORT_BY_DATE": "追加日で並び替え（新しい順）",
+        "SORT_BY_RATING": "評価で並び替え",
+        "SORT_BY_NAME": "名前で並び替え（A-Z）"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "チャンネルリストを開く",
+        "TOGGLE_FAVORITE_FLAG": "お気に入りフラグを切り替え",
+        "OPEN_EPG_LIST": "EPGリストを開く",
+        "OPEN_MULTI_EPG": "マルチEPGビューを開く"
+    },
+    "EPG": {
+        "TITLE": "電子番組表",
+        "NEXT_DAY": "翌日",
+        "PREVIOUS_DAY": "前日",
+        "LIVE_NOW": "現在放送中",
+        "LIVE_STREAM": "ライブストリーム",
+        "TIMESHIFT_AVAILABLE": "タイムシフトが利用可能です。クリックして再生",
+        "EPG_NOT_AVAILABLE_DATE": "申し訳ありません。選択した日付のEPGは利用できません",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "申し訳ありません。このチャンネルのEPGは利用できません。",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "アプリの設定でEPGリストのURLを追加/変更してください。",
+        "FETCH_EPG": "EPGデータを取得中...",
+        "ERROR": "申し訳ありません。EPGを読み込めませんでした。",
+        "DOWNLOAD_SUCCESS": "EPGが正常にダウンロードされました。",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "番組の詳細",
+            "TITLE": "タイトル",
+            "CATEGORY": "カテゴリー",
+            "PARENTAL_RATING_SYSTEM": "テレビ番組レーティングシステム",
+            "DESCRIPTION": "説明",
+            "LANGUAGE": "言語",
+            "SHOW_PROGRAM_DETAILS": "この番組の詳細を表示"
+        },
+        "FETCH_SUCCESS": "EPGの取得に成功しました"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "はい",
+    "NO": "いいえ",
+    "MENU": {
+        "OPEN": "メニューを開く",
+        "SUPPORT_ARIA": "GitHubでIPTVnatorをサポート",
+        "SETTINGS": "設定",
+        "SETTINGS_ARIA": "設定を開く",
+        "BUG_REPORT": "バグを報告",
+        "WHAT_IS_NEW": "新着情報",
+        "ABOUT": "アプリについて",
+        "ABOUT_ARIA": "アプリケーションについて",
+        "SUPPORT_PROJECT": "プロジェクトをサポート"
+    },
+    "ABOUT": {
+        "TITLE": "IPTVnatorについて",
+        "DESCRIPTION": "m3uやm3u8プレイリストのサポート、お気に入り、TV番組表、TVアーカイブ/キャッチアップなど、複数の機能を備えたクロスプラットフォームのIPTVプレーヤーアプリケーション。",
+        "VERSION": "バージョン",
+        "GITHUB_TOOLTIP": "GitHub上のITPVnatorリポジトリ",
+        "BUY_ME_A_COFFEE_TOOLTIP": "コーヒーを奢る",
+        "TWITTER_TOOLTIP": "Twitterでシェア"
+    },
+    "UPDATE_AVAILABLE": "アップデートが利用可能",
+    "REFRESH": "更新",
+    "XTREAM": {
+        "PLAY": "再生",
+        "NAME": "名前",
+        "RELEASE_DATE": "公開日",
+        "GENRE": "ジャンル",
+        "COUNTRY": "国",
+        "ACTORS": "出演者",
+        "DIRECTOR": "監督",
+        "DURATION": "時間",
+        "CAST": "キャスト",
+        "EPISODE_RUN_TIME": "エピソード再生時間",
+        "RATING": "評価",
+        "IMDB_RATING": "IMDb評価",
+        "KINOPOISK_RATING": "Kinopoisk評価",
+        "DESCRIPTION": "説明",
+        "YEAR": "年",
+        "AGE": "年齢",
+        "YOUTUBE_TRAILER": "YouTubeトレーラー",
+        "EPISODE": "エピソード"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "すべてのカテゴリー",
+        "MY_FAVORITES": "お気に入り",
+        "ADD_TO_FAVORITES": "お気に入りに追加",
+        "REMOVE_FROM_FAVORITES": "お気に入りから削除",
+        "REMOVED_FROM_FAVORITES": "お気に入りから削除されました",
+        "ADDED_TO_FAVORITES": "お気に入りに追加されました",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "アカウントの有効期限が切れています",
+                "DESCRIPTION": "このアカウントの有効期限が切れています。プレイリスト設定で認証情報を確認するか、削除してください。"
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "未認証",
+                "DESCRIPTION": "プレイリスト設定で認証情報を確認するか、削除してください。"
+            },
+            "NOT_FOUND": {
+                "TITLE": "ポータルが見つかりません",
+                "DESCRIPTION": "プレイリスト設定で認証情報とポータルURLを確認するか、削除してください。"
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "空のカテゴリー",
+                "DESCRIPTION": "このカテゴリーにはコンテンツがありません。別のカテゴリーを選択するかコンテンツタイプを変更してください"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "問題が発生しました",
+                "DESCRIPTION": "不明なエラー。後でもう一度お試しください"
+            },
+            "PLAYLIST_SETTINGS": "プレイリスト設定",
+            "HOME": "ホーム",
+            "DELETE": "削除"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "何も見つかりませんでした。検索リクエストを変更してみてください"
+        },
+        "STREAM_URL_COPIED": "ストリームURLがクリップボードにコピーされました",
+        "COPY_STREAM_URL": "ストリームURLをコピー",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "{{count}}件の結果が見つかりました",
+            "NO_RESULTS_FOR": "「{{term}}」に一致する結果は見つかりませんでした"
+        }
+    },
+    "INFORMATION": "情報",
+    "REMOTE_CONTROL": {
+        "TITLE": "リモートコントロール",
+        "UP_CHANNEL": "チャンネルアップ",
+        "DOWN_CHANNEL": "チャンネルダウン",
+        "HEADER": "IPTVNatorリモートコントロール",
+        "FOOTER": "IPTVNatorリモートコントロール"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/ko.json b/apps/web/src/assets/i18n/ko.json
new file mode 100644
index 0000000..12905d9
--- /dev/null
+++ b/apps/web/src/assets/i18n/ko.json
@@ -0,0 +1,357 @@
+{
+    "CLOSE": "닫기",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "목록에서 재생 목록을 선택하거나 파일 업로드 또는 URL을 통해 새 재생 목록을 추가하십시오.",
+        "TABS": {
+            "RECENTLY_ADDED": "최근 재생 목록이 추가되었습니다",
+            "FILE_UPLOAD": "파일 업로드를 통해 추가하십시오",
+            "URL_UPLOAD": "URL을 통해 추가하십시오",
+            "TEXT_IMPORT": "Import as text",
+            "STALKER_PORTAL_IMPORT": "스토커 포털 추가"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "재생 목록이 추가되지 않았습니다",
+            "ADD_FIRST": "다른 탭에서 첫 번째 재생 목록을 추가하십시오",
+            "ADDED_VIA_URL": "URL 업로드를 통해 추가되었습니다. URL:",
+            "ADDED_VIA_FILE": "파일 업로드를 통해 추가되었습니다",
+            "CHANNELS": "채널",
+            "ADDED": "추가되었습니다",
+            "SHOW_DETAILS": "재생 목록 세부 정보 표시",
+            "REMOVE": "재생 목록이 제거되었습니다",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "재생 목록 세부 사항",
+                "TITLE": "제목",
+                "FROM_URL": "URL에서 추가되었습니다",
+                "IMPORT_DATE": "데이터 가져 오기",
+                "CHANNELS": "채널 수",
+                "CLOSE": "닫기",
+                "SAVE": "저장",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "원래 파일 이름",
+                "FILE_PATH": "파일 경로",
+                "UPDATE_FAILED": "마지막 재생 목록 업데이트가 실패했습니다",
+                "AUTO_UPDATE": "자동 업데이트",
+                "AUTO_UPDATE_DESCRIPTION": "자동 새로 고침 기능이 활성화되면 앱이 시작될 때마다 재생 목록이 자동으로 업데이트됩니다.",
+                "CUSTOM_USER_AGENT": "일부 IPTV 공급자는 재생 목록을 재생하기 위해 특정 사용자 에이전트가 필요합니다.",
+                "PASSWORD": "비밀번호",
+                "SERVER_URL": "서버 URL",
+                "USERNAME": "사용자 이름",
+                "MAC_ADDRESS": "맥 주소"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "재생 목록 제거",
+                "MESSAGE": "이 재생 목록을 완전히 삭제 하시겠습니까?"
+            },
+            "UPDATED": "업데이트 됨",
+            "REFRESH": "재생 목록 새로 고침",
+            "GLOBAL_FAVORITES": "Global favorites",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Auto-generated playlist with aggregated favorites from all playlists",
+            "MY_PLAYLISTS": "My playlists",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "파일을 드래그 앤 드롭",
+            "OR": "또는",
+            "CHOOSE_PLAYLIST": "재생 목록을 선택"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "재생 목록 URL (m3u, m3u8)",
+            "ADD_PLAYLIST": "재생 목록을 추가하십시오"
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Insert m3u(8) playlist as text",
+            "BUTTON_LABEL": "Import"
+        },
+        "STALKER_PORTAL": {
+            "ADD": "추가하다",
+            "TITLE": "제목",
+            "URL_VALIDATION_ERROR": "프로토콜이 포함된 유효한 URL이어야 합니다(예: http://example.com/c 또는 https://example.com/stalker_portal/c)."
+        },
+        "XTREAM_PLAYLIST": {
+            "URL_VALIDATION_ERROR": "프로토콜이 포함된 유효한 URL이어야 합니다(예: http://example.com 또는 https://example.com:4324)."
+        }
+    },
+    "SETTINGS": {
+        "TITLE": "설정",
+        "SUBTITLE": "응용 프로그램의 구성을 변경하십시오",
+        "DESCRIPTION": "아래 목록에서 옵션을 적용하고 저장 버튼으로 확인하십시오.",
+        "EPG_URL_LABEL": "EPG Url (*.xml or *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "URL을 입력하십시오",
+        "REFRESH_EPG": "EPG 새로 고침",
+        "REFRESH_ALL_EPG": "모두 새로 고침",
+        "REMOVE_EPG_SOURCE": "EPG 소스 제거",
+        "EPG_STATUS_FRESH": "최신",
+        "EPG_STATUS_STALE": "새로 고침 필요",
+        "EPG_STATUS_ERROR": "실패",
+        "VIDEO_PLAYER_LABEL": "비디오 플레이어",
+        "VIDEO_PLAYER_PLACEHOLDER": "옵션을 선택하세요",
+        "VERSION": "버전",
+        "SAVE_CHANGES": "변경 사항 저장",
+        "BACK_TO_HOME": "홈으로",
+        "NEW_VERSION_AVAILABLE": "새로운 버전이 있습니다",
+        "LATEST_VERSION": "최신 버전을 사용하고 있습니다",
+        "LANGUAGE": "언어",
+        "SETTINGS_SAVED": "설정이 저장되었습니다.",
+        "THEME": "테마",
+        "SHOW_CAPTIONS": "Show subtitles",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "LANGUAGE_DESCRIPTION": "애플리케이션 언어 선택",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "VERSION_DESCRIPTION": "애플리케이션의 현재 버전",
+        "IMPORT_DATA": "수입",
+        "ADD_EPG_SOURCE": "EPG 소스 추가",
+        "IMPORT_ERROR": "가져오기 오류가 발생했습니다. 다른 파일로 시도해 보세요.",
+        "EPG_URL_ERROR": "값이 유효한 URL이 아닙니다.",
+        "EXPORT_DATA": "내보내다",
+        "VIDEO_PLAYER_DESCRIPTION": "기본 비디오 플레이어 선택",
+        "IMPORT_EXPORT_DATA": "재생목록 가져오기/내보내기",
+        "VLC_PLAYER_PATH_LABEL": "VLC 경로",
+        "VLC_PLAYER_PATH_DESCRIPTION": "시스템에서 VLC 플레이어의 경로를 설정하십시오. \n시스템의 기본 경로 대신 VLC 바이너리에 제공된 경로를 사용합니다.",
+        "THEME_DESCRIPTION": "애플리케이션의 시각적 테마 선택",
+        "EPG_NOTE": "현재 EPG는 IPTVnator의 전자 기반 버전에서만 사용할 수 있습니다.",
+        "VLC_PLAYER_PATH": "VLC 플레이어 경로",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "애플리케이션 내에서 사용되는 JSON 형식으로 재생 목록을 내보내거나 가져옵니다.",
+        "EPG_NOTE_URL_TEXT": "여기에서 확인하세요",
+        "MPV_PLAYER_PATH_LABEL": "mpv 경로",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "어두운 테마",
+        "LIGHT_THEME": "밝은 테마",
+        "SYSTEM_THEME": "시스템 테마"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "검색 채널",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "다른 재생 목록을 업로드하거나 선택하십시오",
+        "ALL_CHANNELS": "모든 채널",
+        "GROUPS": "그룹",
+        "UNGROUPED": "그룹 해제",
+        "UNNAMED_CHANNEL": "이름없는 채널",
+        "FAVORITES": "즐겨찾기",
+        "NO_FAVORITES": "즐겨찾기가 아직 없습니다",
+        "USE_STAR_TO_FAVORITE": "'Star'아이콘을 사용하여 이 목록에 채널을 추가하십시오.",
+        "REMOVE_FAVORITE": "즐겨찾기에서 삭제하기",
+        "FAVORITES_UPDATED": "즐겨찾기가 업데이트되었습니다!"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "채널 열기 목록",
+        "TOGGLE_FAVORITE_FLAG": "즐겨찾기 보이기/숨기기",
+        "OPEN_EPG_LIST": "EPG 목록 열기",
+        "OPEN_MULTI_EPG": "Open Multi-EPG view"
+    },
+    "EPG": {
+        "NEXT_DAY": "다음날",
+        "PREVIOUS_DAY": "전날",
+        "LIVE_NOW": "Live now",
+        "LIVE_STREAM": "Live stream",
+        "TIMESHIFT_AVAILABLE": "Timeshift를 사용할 수 있습니다, 클릭하여 재생합니다",
+        "EPG_NOT_AVAILABLE_DATE": "선택한 날짜에는 EPG를 사용할 수 없습니다.",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "이 채널에는 EPG를 사용할 수 없습니다.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "설정에서 EPG의 URL을 추가/변경하십시오.",
+        "FETCH_EPG": "EPG 데이터 가져 오기...",
+        "ERROR": "Ooops, EPG could not be loaded.",
+        "DOWNLOAD_SUCCESS": "EPG was successfully downloaded.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "TV 프로그램에 대한 세부 사항",
+            "TITLE": "제목",
+            "CATEGORY": "카테고리",
+            "PARENTAL_RATING_SYSTEM": "컨텐츠 등급 시스템",
+            "DESCRIPTION": "설명",
+            "LANGUAGE": "언어",
+            "SHOW_PROGRAM_DETAILS": "이 프로그램에 대한 세부 정보 표시"
+        }
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Yes",
+    "NO": "No",
+    "MENU": {
+        "OPEN": "Open menu",
+        "SUPPORT_ARIA": "Support IPTVnator on GitHub",
+        "SETTINGS": "Settings",
+        "SETTINGS_ARIA": "Open settings",
+        "BUG_REPORT": "Report a bug",
+        "WHAT_IS_NEW": "What is new",
+        "ABOUT": "About",
+        "ABOUT_ARIA": "About the application",
+        "SUPPORT_PROJECT": "지원사업"
+    },
+    "XTREAM": {
+        "RELEASE_DATE": "출시일",
+        "ACTORS": "배우",
+        "PLAY": "놀다",
+        "GENRE": "장르",
+        "DURATION": "지속",
+        "COUNTRY": "국가",
+        "NAME": "이름",
+        "DIRECTOR": "감독",
+        "CAST": "깁스",
+        "RATING": "평가",
+        "AGE": "나이",
+        "EPISODE": "삽화",
+        "YEAR": "년도",
+        "YOUTUBE_TRAILER": "유튜브 예고편",
+        "DESCRIPTION": "설명",
+        "KINOPOISK_RATING": "키노포스크 등급",
+        "IMDB_RATING": "IMDB 평가",
+        "EPISODE_RUN_TIME": "에피소드 실행 시간"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "모든 카테고리",
+        "ADD_TO_FAVORITES": "즐겨 찾기에 추가",
+        "REMOVE_FROM_FAVORITES": "즐겨 찾기에서 삭제하기",
+        "MY_FAVORITES": "내가 좋아하는 것들",
+        "ERROR_VIEW": {
+            "DELETE": "삭제",
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "계정이 만료되었습니다",
+                "DESCRIPTION": "이 계정은 만료되었습니다. \n재생목록 설정에서 자격 증명을 확인하거나 제거하세요."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "빈 카테고리",
+                "DESCRIPTION": "이 카테고리에는 콘텐츠가 없습니다. 다른 카테고리를 선택하거나 콘텐츠 유형을 변경하세요."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "승인되지 않은",
+                "DESCRIPTION": "재생목록 설정에서 자격 증명을 확인하거나 제거하세요."
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "문제가 발생했습니다.",
+                "DESCRIPTION": "알 수 없는 오류입니다. 나중에 다시 시도해 주세요."
+            },
+            "PLAYLIST_SETTINGS": "재생목록 설정"
+        },
+        "STREAM_URL_COPIED": "스트림 URL이 클립보드에 복사되었습니다.",
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "아무것도 찾지 못했습니다. 검색 요청을 변경해 보세요."
+        },
+        "REMOVED_FROM_FAVORITES": "즐겨찾기에서 삭제됨",
+        "ADDED_TO_FAVORITES": "즐겨찾기에 추가됨",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "{{count}}개의 결과를 찾았습니다",
+            "NO_RESULTS_FOR": "\"{{term}}\"에 대한 결과를 찾을 수 없습니다"
+        }
+    },
+    "ABOUT": {
+        "TITLE": "IPTVnator 소개",
+        "VERSION": "버전",
+        "TWITTER_TOOLTIP": "트위터에 공유",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Buy me a coffee"
+    },
+    "REFRESH": "새로 고치다",
+    "UPDATE_AVAILABLE": "업데이트 가능",
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/nl.json b/apps/web/src/assets/i18n/nl.json
new file mode 100644
index 0000000..c76caf1
--- /dev/null
+++ b/apps/web/src/assets/i18n/nl.json
@@ -0,0 +1,420 @@
+{
+    "CLOSE": "Afsluiten",
+    "PLAYLISTS": "Afspeellijst",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Selecteer een afspeellijst of voeg een nieuwe lijst toe",
+        "TABS": {
+            "RECENTLY_ADDED": "Recent toegevoegde afspeellijst",
+            "FILE_UPLOAD": "Upload een bestand",
+            "URL_UPLOAD": "Voeg toe via URL",
+            "TEXT_IMPORT": "Voeg toe via tekst",
+            "XTREME_IMPORT": "Voeg een Xtreme Code toe",
+            "STALKER_PORTAL_IMPORT": "Voeg een Stalker Portal toe"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Geen afspeellijst toegevoegd",
+            "ADD_FIRST": "Voeg je afspeellijst toe",
+            "ADDED_VIA_URL": "Toegevoegd via URL: ",
+            "ADDED_VIA_FILE": "Toegevoegd via bestand",
+            "XTREAM_PLAYLIST": "Xtream afspeellijst",
+            "STALKER_PORTAL": "Stalker portal",
+            "CHANNELS": "Kanalen",
+            "ADDED": "Toegevoegd",
+            "SHOW_DETAILS": "Toon afspeellijstdetails",
+            "REMOVE": "Verwijder afspeellijst",
+            "SEARCH_PLAYLISTS": "Zoek afspeellijst op titel",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Afspeellijstdetails",
+                "TITLE": "Titel",
+                "FROM_URL": "Toegevoegd vanuit URL",
+                "IMPORT_DATE": "Importdatum",
+                "CHANNELS": "Aantal kanalen",
+                "CLOSE": "Afsluiten",
+                "SAVE": "Opslaan",
+                "USER_AGENT": "User-agent",
+                "ORIGINAL_FILENAME": "Oorspronkelijke bestandsnaam",
+                "FILE_PATH": "Bestandspad",
+                "UPDATE_FAILED": "Laatste afspeellijstupdate mislukt",
+                "AUTO_UPDATE": "Automatisch bijwerken",
+                "AUTO_UPDATE_DESCRIPTION": "Als automatisch bijwerken is ingeschakeld, wordt de afspeellijst bij elke start van de app vernieuwd.",
+                "CUSTOM_USER_AGENT": "Sommige IPTV-providers vereisen een specifieke user-agent om de afspeellijst af te spelen.",
+                "EXPORT_PLAYLIST": "Exporteer afspeellijst als m3u",
+                "SERVER_URL": "Server-URL",
+                "USERNAME": "Gebruikersnaam",
+                "PASSWORD": "Wachtwoord",
+                "MAC_ADDRESS": "MAC-adres",
+                "PLAYLIST_EXPORT_SUCCESS": "Afspeellijst succesvol geëxporteerd.",
+                "PLAYLIST_EXPORT_ERROR": "Fout: exporteren van afspeellijst mislukt."
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Afspeellijst verwijderen",
+                "MESSAGE": "Weet je zeker dat je deze afspeellijst wilt verwijderen?",
+                "SUCCESS": "Afspeellijst succesvol verwijderd."
+            },
+            "UPDATED": "Bijgewerkt",
+            "REFRESH": "Afspeellijst vernieuwen",
+            "GLOBAL_FAVORITES": "Algemene favorieten",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Automatisch gegenereerde afspeellijst met samengevoegde favorieten uit alle afspeellijsten.",
+            "MY_PLAYLISTS": "Mijn afspeellijsten",
+            "MY_PLAYLISTS_SUBTITLE": "Alle beschikbare afspeellijsten",
+            "PLAYLIST_UPDATE_SUCCESS": "De afspeellijst is succesvol bijgewerkt.",
+            "PLAYLIST_UPDATE_ERROR": "Fout bij het bijwerken van de afspeellijst.",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Sleep bestanden hierheen",
+            "OR": "of",
+            "CHOOSE_PLAYLIST": "kies een afspeellijst",
+            "REJECTED": "Bestand geweigerd, niet-ondersteund bestandsformaat: {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Afspeellijst-URL (m3u, m3u8)",
+            "ADD_PLAYLIST": "Afspeellijst toevoegen",
+            "CORS_NOTE": "Opmerking: om CORS-problemen te voorkomen, gebruikt de app een openbare CORS-proxyservice. Voor gevoelige gegevens is het veiliger om de afspeellijst via een bestand te importeren."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Voer een m3u(8)-afspeellijst in als tekst",
+            "BUTTON_LABEL": "Importeren"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Afspeellijst titel",
+            "SERVER_URL": "Server URL",
+            "USERNAME": "Gebruikersnaam",
+            "PASSWORD": "Wachtwoord",
+            "ADD": "Toevoegen",
+            "TEST_CREDENTIALS": "Test de inloggegevens",
+            "URL_VALIDATION_ERROR": "Moet een geldige URL zijn met protocol (bijv. http://example.com of https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Titel",
+            "MAC_ADDRESS": "Mac adres",
+            "SERVER_URL": "Server URL",
+            "URL_VALIDATION_ERROR": "Moet een geldige URL zijn met protocol (bijv. http://example.com/c o https://example.com/stalker_portal/c)",
+            "ADD": "Toevoegen"
+        },
+        "FILTER_BY_NAME": "Filter op naam",
+        "FILTER_BY_TYPE": "Filter op type",
+        "SORT_PLAYLISTS": "Sorteer afspeellijsten",
+        "SORT_BY": "Sorteer op",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Naam (A-Z)",
+            "NAME_DESC": "Naam (Z-A)",
+            "NEWEST": "Datum toegevoegd (Nieuwste eerst)",
+            "OLDEST": "Datum toegevoegd (Oudste eerst)"
+        },
+        "IMPORTED_AS_TEXT": "Geïmporteerd als tekst",
+        "PARSING_ERROR": "Fout: parsing mislukt, geen geldige afspeellijst:"
+    },
+    "SETTINGS": {
+        "TITLE": "Instellingen",
+        "SUBTITLE": "Wijzig de configuratie van de applicatie",
+        "DESCRIPTION": "Pas de instellingen aan en bevestig met de knop 'Wijzigingen opslaan'.",
+        "EPG_URL_LABEL": "EPG-URL (*.xml of *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Voer een URL in",
+        "REFRESH_EPG": "EPG vernieuwen",
+        "REFRESH_ALL_EPG": "Alles vernieuwen",
+        "REMOVE_EPG_SOURCE": "EPG-bron verwijderen",
+        "EPG_STATUS_FRESH": "Up-to-date",
+        "EPG_STATUS_STALE": "Verouderd",
+        "EPG_STATUS_ERROR": "Mislukt",
+        "VIDEO_PLAYER_LABEL": "Videospeler",
+        "VIDEO_PLAYER_PLACEHOLDER": "Selecteer een optie",
+        "VERSION": "Versie",
+        "SAVE_CHANGES": "Wijzigingen opslaan",
+        "BACK_TO_HOME": "Terug",
+        "NEW_VERSION_AVAILABLE": "Een nieuwe versie is beschikbaar",
+        "LATEST_VERSION": "Je gebruikt de nieuwste versie",
+        "LANGUAGE": "Taal",
+        "SETTINGS_SAVED": "Succes! De instellingen zijn opgeslagen.",
+        "THEME": "Visueel thema",
+        "SHOW_CAPTIONS": "Ondertiteling weergeven",
+        "ADD_EPG_SOURCE": "EPG-bron toevoegen",
+        "EPG_URL_ERROR": "De opgegeven waarde is geen geldige URL.",
+        "VIDEO_PLAYER_DESCRIPTION": "Selecteer de standaard videospeler",
+        "LANGUAGE_DESCRIPTION": "Selecteer de taal van de applicatie",
+        "THEME_DESCRIPTION": "Kies het visuele thema van de applicatie",
+        "SHOW_CAPTIONS_DESCRIPTION": "Standaard ondertiteling weergeven of verbergen",
+        "VERSION_DESCRIPTION": "Huidige versie van de applicatie",
+        "EPG_NOTE": "Momenteel is EPG alleen beschikbaar in de op Electron gebaseerde versie van IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Bekijk het hier",
+        "IMPORT_EXPORT_DATA": "Afspeellijsten importeren/exporteren",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Exporteer of importeer afspeellijsten in JSON-formaat.",
+        "IMPORT_DATA": "Importeren",
+        "EXPORT_DATA": "Exporteren",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Fout bij importeren, probeer een ander bestand.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "mpv-bestandspad",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Stel het bestandspad in naar de mpv-speler op je systeem. Dit bestandspad wordt gebruikt in plaats van de standaard mpv-bestand uit $PATH.",
+        "MPV_PLAYER_PATH": "mpv-speler bestandspad",
+        "VLC_PLAYER_PATH_LABEL": "VLC-bestandspad",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Stel het bestandspad in naar de VLC-speler op je systeem. Dit bestandspad wordt gebruikt in plaats van het standaardpad van het systeem.",
+        "VLC_PLAYER_PATH": "VLC-speler bestandspad",
+        "REMOTE_CONTROL": "Afstandsbediening",
+        "REMOTE_CONTROL_DESCRIPTION": "Schakel de afstandsbediening voor de applicatie in.",
+        "REMOTE_CONTROL_PORT": "Afstandsbedieningspoort",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Poort voor de afstandsbediening van de applicatie. Standaard wordt poort 3000 gebruikt.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Donker thema",
+        "LIGHT_THEME": "Licht thema",
+        "SYSTEM_THEME": "Systeemthema"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Zoek een kanaal",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Upload of selecteer een andere afspeellijst",
+        "ALL_CHANNELS": "Alle kanalen",
+        "GROUPS": "Groepen",
+        "UNGROUPED": "Niet gegroepeerd",
+        "UNNAMED_CHANNEL": "Naamloos kanaal",
+        "FAVORITES": "Favorieten",
+        "NO_FAVORITES": "Nog geen favorieten",
+        "USE_STAR_TO_FAVORITE": "Gebruik het ster-icoon om kanalen toe te voegen aan je favorieten.",
+        "REMOVE_FAVORITE": "Verwijder uit favorieten",
+        "FAVORITES_UPDATED": "Favorieten zijn bijgewerkt!",
+        "SORT_BY": "Sorteren op",
+        "SORT_BY_DATE": "Sorteren op datum toegevoegd (Nieuwste eerst)",
+        "SORT_BY_RATING": "Sorteren op beoordeling",
+        "SORT_BY_NAME": "Sorteren op naam (A-Z)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Open kanalenlijst",
+        "TOGGLE_FAVORITE_FLAG": "Wissel favorietenstatus",
+        "OPEN_EPG_LIST": "Open TV-gids lijst",
+        "OPEN_MULTI_EPG": "Open Multi TV-Gids weergave"
+    },
+    "EPG": {
+        "TITLE": "TV-Gids",
+        "NEXT_DAY": "Volgende dag",
+        "PREVIOUS_DAY": "Vorige dag",
+        "LIVE_NOW": "Nu live",
+        "LIVE_STREAM": "Live stream",
+        "TIMESHIFT_AVAILABLE": "Doorspoelen is beschikbaar, klik om af te spelen",
+        "EPG_NOT_AVAILABLE_DATE": "De TV-Gids is niet beschikbaar voor de geselecteerde datum",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "De TV-Gids is niet beschikbaar voor dit kanaal.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Voeg een TV-Gids URL toe of wijzig deze in de instellingen van de app.",
+        "FETCH_EPG": "Ophalen TV-Gids...",
+        "ERROR": "TV-Gids kan niet geladen worden.",
+        "DOWNLOAD_SUCCESS": "De TV-Gids is gedownload.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Details over het tv-programma",
+            "TITLE": "Titel",
+            "CATEGORY": "Categorie",
+            "PARENTAL_RATING_SYSTEM": "Kijkwijzer",
+            "DESCRIPTION": "Beschrijving",
+            "LANGUAGE": "Taal",
+            "SHOW_PROGRAM_DETAILS": "Toon details over dit programma"
+        },
+        "FETCH_SUCCESS": "TV-Gids bijgewerkt"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Ja",
+    "NO": "Nee",
+    "MENU": {
+        "OPEN": "Open menu",
+        "SUPPORT_ARIA": "Ondersteun IPTVnator op GitHub",
+        "SETTINGS": "Instellingen",
+        "SETTINGS_ARIA": "Open instellingen",
+        "BUG_REPORT": "Meld een bug",
+        "WHAT_IS_NEW": "Wat is er nieuw",
+        "ABOUT": "Over",
+        "ABOUT_ARIA": "Over de applicatie",
+        "SUPPORT_PROJECT": "Ondersteun het project"
+    },
+    "ABOUT": {
+        "TITLE": "Over IPTVnator",
+        "DESCRIPTION": "Cross-platform IPTV-speler met meerdere features zoals ondersteuning voor m3u en m3u8 afspeellijsten, favorieten, TV-gids, TV-archief en meer.",
+        "VERSION": "Versie",
+        "GITHUB_TOOLTIP": "ITPVnator repository op GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Koop een kopje koffie",
+        "TWITTER_TOOLTIP": "Deel op X"
+    },
+    "UPDATE_AVAILABLE": "Update beschikbaar",
+    "REFRESH": "Ververs",
+    "XTREAM": {
+        "PLAY": "Afspelen",
+        "NAME": "Naam",
+        "RELEASE_DATE": "Verschijningsdatum",
+        "GENRE": "Genre",
+        "COUNTRY": "Land",
+        "ACTORS": "Acteurs",
+        "DIRECTOR": "Regisseur",
+        "DURATION": "Lengte",
+        "CAST": "Cast",
+        "EPISODE_RUN_TIME": "Aflevering lengte",
+        "RATING": "Score",
+        "IMDB_RATING": " Score op IMDB",
+        "KINOPOISK_RATING": "Score op Kinopoisk",
+        "DESCRIPTION": "Beschrijving",
+        "YEAR": "Jaar",
+        "AGE": "Leeftijd",
+        "YOUTUBE_TRAILER": "YouTube Trailer",
+        "EPISODE": "Aflevering"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Alle categoriën",
+        "MY_FAVORITES": "Mijn favorieten",
+        "ADD_TO_FAVORITES": "Voeg toe aan favorieten",
+        "REMOVE_FROM_FAVORITES": "Verwijder van favorieten",
+        "REMOVED_FROM_FAVORITES": "Verwijderd van favorieten",
+        "ADDED_TO_FAVORITES": "Toegevoegd aan favorieten",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Account verlopen",
+                "DESCRIPTION": "Dit account is verlopen. Controleer de gegevens in de afspeellijst instellingen of verwijder de afspeellijst."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Niet geautoriseerd",
+                "DESCRIPTION": "Controleer de inloggegevens in de afspeellijst instellingen of verwijder de afspeellijst."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal niet gevonden",
+                "DESCRIPTION": "Controleer de inloggegevens en de portal url in de afspeellijst instellingen of verwijder de afspeellijst."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Lege categorie",
+                "DESCRIPTION": "Deze categorie heeft geen inhoud, selecteer een andere categorie of verander de categorie"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Fout, er is iets misgegaan",
+                "DESCRIPTION": "Onbekende fout, probeer het later opnieuw"
+            },
+            "PLAYLIST_SETTINGS": "Afspeellijst instellingen",
+            "HOME": "Home",
+            "DELETE": "Verwijderen"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "Niks gevonden, verander je zoekopdracht"
+        },
+        "STREAM_URL_COPIED": "Stream URL Gekopieërd",
+        "COPY_STREAM_URL": "Kopieër Stream URL",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "{{count}} resultaten gevonden",
+            "NO_RESULTS_FOR": "Geen resultaten gevonden voor \"{{term}}\""
+        }
+    },
+    "INFORMATION": "Informatie",
+    "REMOTE_CONTROL": {
+        "TITLE": "Afstandsbediening",
+        "UP_CHANNEL": "Kanaal omhoog",
+        "DOWN_CHANNEL": "Kanaal omlaag",
+        "HEADER": "IPTVNator Afstandsbediening",
+        "FOOTER": "IPTVNator Afstandsbediening"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/pl.json b/apps/web/src/assets/i18n/pl.json
new file mode 100644
index 0000000..d82010b
--- /dev/null
+++ b/apps/web/src/assets/i18n/pl.json
@@ -0,0 +1,420 @@
+{
+    "CLOSE": "Zamknij",
+    "PLAYLISTS": "Listy odtwarzania",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Wybierz listę odtwarzania z listy lub dodaj nową listę odtwarzania",
+        "TABS": {
+            "RECENTLY_ADDED": "Ostatnio dodane listy odtwarzania",
+            "FILE_UPLOAD": "Dodaj przez przesłanie pliku",
+            "URL_UPLOAD": "Dodaj przez URL",
+            "TEXT_IMPORT": "Importuj z tekstu",
+            "XTREME_IMPORT": "Dodaj kod Xtreme",
+            "STALKER_PORTAL_IMPORT": "Dodaj portal Stalker"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Nie dodano żadnych list odtwarzania",
+            "ADD_FIRST": "Dodaj swoją pierwszą listę odtwarzania",
+            "ADDED_VIA_URL": "Dodano przez przesłanie URL. URL:",
+            "ADDED_VIA_FILE": "Dodano przez przesłanie pliku",
+            "XTREAM_PLAYLIST": "Lista odtwarzania Xtream",
+            "STALKER_PORTAL": "Portal Stalker",
+            "CHANNELS": "Kanały",
+            "ADDED": "Dodano",
+            "SHOW_DETAILS": "Pokaż szczegóły listy odtwarzania",
+            "REMOVE": "Usuń listę odtwarzania",
+            "SEARCH_PLAYLISTS": "Szukaj list odtwarzania według tytułu",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Szczegóły listy odtwarzania",
+                "TITLE": "Tytuł",
+                "FROM_URL": "Dodano z URL",
+                "IMPORT_DATE": "Data importu",
+                "CHANNELS": "Liczba kanałów",
+                "CLOSE": "Zamknij",
+                "SAVE": "Zapisz",
+                "USER_AGENT": "Agent użytkownika",
+                "ORIGINAL_FILENAME": "Oryginalna nazwa pliku",
+                "FILE_PATH": "Ścieżka pliku",
+                "UPDATE_FAILED": "Ostatnia aktualizacja listy odtwarzania nie powiodła się",
+                "AUTO_UPDATE": "Automatyczna aktualizacja",
+                "AUTO_UPDATE_DESCRIPTION": "Jeśli funkcja automatycznego odświeżania jest aktywna, lista odtwarzania będzie automatycznie aktualizowana przy każdym uruchomieniu aplikacji.",
+                "CUSTOM_USER_AGENT": "Niektórzy dostawcy IPTV wymagają określonego agenta użytkownika, aby odtworzyć ich listę odtwarzania.",
+                "EXPORT_PLAYLIST": "Eksportuj listę odtwarzania jako m3u",
+                "SERVER_URL": "URL serwera",
+                "USERNAME": "Nazwa użytkownika",
+                "PASSWORD": "Hasło",
+                "MAC_ADDRESS": "Adres Mac",
+                "PLAYLIST_EXPORT_SUCCESS": "Lista odtwarzania została pomyślnie wyeksportowana.",
+                "PLAYLIST_EXPORT_ERROR": "Błąd: Eksport listy odtwarzania nie powiódł się."
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Usuń listę odtwarzania",
+                "MESSAGE": "Czy na pewno chcesz całkowicie usunąć tę listę odtwarzania?",
+                "SUCCESS": "Lista odtwarzania została pomyślnie usunięta"
+            },
+            "UPDATED": "Zaktualizowano",
+            "REFRESH": "Odśwież listę odtwarzania",
+            "GLOBAL_FAVORITES": "Globalne ulubione",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Automatycznie wygenerowana lista odtwarzania z zagregowanymi ulubionymi ze wszystkich list odtwarzania",
+            "MY_PLAYLISTS": "Moje listy odtwarzania",
+            "MY_PLAYLISTS_SUBTITLE": "wszystkie dostępne listy odtwarzania",
+            "PLAYLIST_UPDATE_SUCCESS": "Sukces! Lista odtwarzania została pomyślnie zaktualizowana.",
+            "PLAYLIST_UPDATE_ERROR": "Błąd aktualizacji szczegółów listy odtwarzania.",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Przeciągnij i upuść pliki tutaj",
+            "OR": "lub",
+            "CHOOSE_PLAYLIST": "wybierz listę odtwarzania",
+            "REJECTED": "Plik został odrzucony, nieobsługiwany format pliku {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "URL listy odtwarzania (m3u, m3u8)",
+            "ADD_PLAYLIST": "Dodaj listę odtwarzania",
+            "CORS_NOTE": "Uwaga: Aby uniknąć problemów z CORS, aplikacja używa publicznej usługi proxy CORS. Jeśli chcesz przesłać listę odtwarzania z wrażliwymi danymi, bezpieczniej jest zaimportować ją z pliku."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Wklej listę odtwarzania m3u(8) jako tekst",
+            "BUTTON_LABEL": "Importuj"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Tytuł listy odtwarzania",
+            "SERVER_URL": "URL serwera",
+            "USERNAME": "Nazwa użytkownika",
+            "PASSWORD": "Hasło",
+            "ADD": "Dodaj",
+            "TEST_CREDENTIALS": "Testuj dane uwierzytelniające",
+            "URL_VALIDATION_ERROR": "Powinien to być poprawny URL z protokołem (np. http://example.com lub https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Tytuł",
+            "MAC_ADDRESS": "Adres Mac",
+            "SERVER_URL": "URL serwera",
+            "URL_VALIDATION_ERROR": "Powinien to być poprawny URL z protokołem (np. http://example.com/c lub https://example.com/stalker_portal/c)",
+            "ADD": "Dodaj"
+        },
+        "FILTER_BY_NAME": "Filtruj według nazwy",
+        "FILTER_BY_TYPE": "Filtruj według typu",
+        "SORT_PLAYLISTS": "Sortuj listy odtwarzania",
+        "SORT_BY": "Sortuj według",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Nazwa (A-Z)",
+            "NAME_DESC": "Nazwa (Z-A)",
+            "NEWEST": "Data dodania (najnowsze pierwsze)",
+            "OLDEST": "Data dodania (najstarsze pierwsze)"
+        },
+        "IMPORTED_AS_TEXT": "Zaimportowano jako tekst",
+        "PARSING_ERROR": "Błąd: Analiza nie powiodła się, nieprawidłowa lista odtwarzania:"
+    },
+    "SETTINGS": {
+        "TITLE": "Ustawienia",
+        "SUBTITLE": "Zmień konfigurację aplikacji",
+        "DESCRIPTION": "Dostosuj opcje z poniższej listy i potwierdź przyciskiem „Zapisz zmiany”",
+        "EPG_URL_LABEL": "URL EPG (*.xml lub *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Wprowadź URL",
+        "REFRESH_EPG": "Odśwież EPG",
+        "REFRESH_ALL_EPG": "Odśwież wszystko",
+        "REMOVE_EPG_SOURCE": "Usuń źródło EPG",
+        "EPG_STATUS_FRESH": "Aktualne",
+        "EPG_STATUS_STALE": "Wymaga odświeżenia",
+        "EPG_STATUS_ERROR": "Błąd",
+        "VIDEO_PLAYER_LABEL": "Odtwarzacz wideo",
+        "VIDEO_PLAYER_PLACEHOLDER": "Wybierz opcję",
+        "VERSION": "Wersja",
+        "SAVE_CHANGES": "Zapisz zmiany",
+        "BACK_TO_HOME": "Wróć",
+        "NEW_VERSION_AVAILABLE": "Dostępna jest nowa wersja",
+        "LATEST_VERSION": "Używasz najnowszej wersji",
+        "LANGUAGE": "Język",
+        "SETTINGS_SAVED": "Sukces! Konfiguracja została zapisana.",
+        "THEME": "Motyw wizualny",
+        "SHOW_CAPTIONS": "Pokaż napisy",
+        "ADD_EPG_SOURCE": "Dodaj źródło EPG",
+        "EPG_URL_ERROR": "Wartość nie jest prawidłowym URL",
+        "VIDEO_PLAYER_DESCRIPTION": "Wybierz domyślny odtwarzacz wideo",
+        "LANGUAGE_DESCRIPTION": "Wybierz język aplikacji",
+        "THEME_DESCRIPTION": "Wybierz motyw wizualny aplikacji",
+        "SHOW_CAPTIONS_DESCRIPTION": "Domyślnie pokaż lub ukryj napisy",
+        "VERSION_DESCRIPTION": "Aktualna wersja aplikacji",
+        "EPG_NOTE": "Obecnie EPG jest dostępne tylko w wersji IPTVnator opartej na Electron.",
+        "EPG_NOTE_URL_TEXT": "Sprawdź tutaj",
+        "IMPORT_EXPORT_DATA": "Import/eksport list odtwarzania",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Eksportuj lub importuj listy odtwarzania w formacie JSON używanym w aplikacji.",
+        "IMPORT_DATA": "Importuj",
+        "EXPORT_DATA": "Eksportuj",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Błąd importu, spróbuj z innym plikiem.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "Ścieżka mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Ustaw ścieżkę do odtwarzacza mpv w systemie. Będzie używać podanej ścieżki do pliku binarnego mpv zamiast tego znalezionego w $PATH.",
+        "MPV_PLAYER_PATH": "Ścieżka odtwarzacza mpv",
+        "VLC_PLAYER_PATH_LABEL": "Ścieżka VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Ustaw ścieżkę do odtwarzacza VLC w systemie. Będzie używać podanej ścieżki do pliku binarnego VLC zamiast domyślnej ścieżki dla naszego systemu.",
+        "VLC_PLAYER_PATH": "Ścieżka odtwarzacza VLC",
+        "REMOTE_CONTROL": "Zdalne sterowanie",
+        "REMOTE_CONTROL_DESCRIPTION": "Włącz zdalne sterowanie aplikacją.",
+        "REMOTE_CONTROL_PORT": "Port zdalnego sterowania",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Port używany do zdalnego sterowania aplikacją. Domyślnie używany jest port 3000.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Ciemny motyw",
+        "LIGHT_THEME": "Jasny motyw",
+        "SYSTEM_THEME": "Motyw systemowy"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Szukaj kanału",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Prześlij lub wybierz inną listę odtwarzania",
+        "ALL_CHANNELS": "Wszystkie kanały",
+        "GROUPS": "Grupy",
+        "UNGROUPED": "Niegrupowane",
+        "UNNAMED_CHANNEL": "Nienazwany kanał",
+        "FAVORITES": "Ulubione",
+        "NO_FAVORITES": "Brak ulubionych",
+        "USE_STAR_TO_FAVORITE": "Użyj ikony „gwiazdki”, aby dodać kanały do ulubionych.",
+        "REMOVE_FAVORITE": "Usuń z ulubionych",
+        "FAVORITES_UPDATED": "Ulubione zostały zaktualizowane!",
+        "SORT_BY": "Sortuj według",
+        "SORT_BY_DATE": "Sortuj według daty dodania (najnowsze pierwsze)",
+        "SORT_BY_RATING": "Sortuj według oceny",
+        "SORT_BY_NAME": "Sortuj według nazwy (A-Z)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Otwórz listę kanałów",
+        "TOGGLE_FAVORITE_FLAG": "Przełącz flagę ulubionych",
+        "OPEN_EPG_LIST": "Otwórz listę EPG",
+        "OPEN_MULTI_EPG": "Otwórz widok Multi-EPG"
+    },
+    "EPG": {
+        "TITLE": "Elektroniczny przewodnik po programach",
+        "NEXT_DAY": "Następny dzień",
+        "PREVIOUS_DAY": "Poprzedni dzień",
+        "LIVE_NOW": "Na żywo teraz",
+        "LIVE_STREAM": "Transmisja na żywo",
+        "TIMESHIFT_AVAILABLE": "Dostępne jest przesunięcie czasowe, kliknij, aby odtworzyć",
+        "EPG_NOT_AVAILABLE_DATE": "Ups, EPG nie jest dostępne dla wybranej daty",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ups, EPG nie jest dostępne dla tego kanału.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Dodaj/zmień URL listy EPG w ustawieniach aplikacji.",
+        "FETCH_EPG": "Pobieranie danych EPG...",
+        "ERROR": "Ups, nie można załadować EPG.",
+        "DOWNLOAD_SUCCESS": "EPG zostało pomyślnie pobrane.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Szczegóły programu telewizyjnego",
+            "TITLE": "Tytuł",
+            "CATEGORY": "Kategoria",
+            "PARENTAL_RATING_SYSTEM": "System oceny treści telewizyjnych",
+            "DESCRIPTION": "Opis",
+            "LANGUAGE": "Język",
+            "SHOW_PROGRAM_DETAILS": "Pokaż szczegóły programu"
+        },
+        "FETCH_SUCCESS": "EPG zostało pomyślnie pobrane"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Tak",
+    "NO": "Nie",
+    "MENU": {
+        "OPEN": "Otwórz menu",
+        "SUPPORT_ARIA": "Wsparcie IPTVnator na GitHubie",
+        "SETTINGS": "Ustawienia",
+        "SETTINGS_ARIA": "Otwórz ustawienia",
+        "BUG_REPORT": "Zgłoś błąd",
+        "WHAT_IS_NEW": "Co nowego",
+        "ABOUT": "O aplikacji",
+        "ABOUT_ARIA": "Informacje o aplikacji",
+        "SUPPORT_PROJECT": "Wesprzyj projekt"
+    },
+    "ABOUT": {
+        "TITLE": "O IPTVnator",
+        "DESCRIPTION": "Wieloplatformowa aplikacja do odtwarzania IPTV z wieloma funkcjami, takimi jak obsługa list odtwarzania m3u i m3u8, ulubione, przewodnik TV, archiwum TV/catchup i inne.",
+        "VERSION": "Wersja",
+        "GITHUB_TOOLTIP": "Repozytorium ITPVnator na GitHubie",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Postaw mi kawę",
+        "TWITTER_TOOLTIP": "Udostępnij na Twitterze"
+    },
+    "UPDATE_AVAILABLE": "Dostępna aktualizacja",
+    "REFRESH": "Odśwież",
+    "XTREAM": {
+        "PLAY": "Odtwórz",
+        "NAME": "Nazwa",
+        "RELEASE_DATE": "Data wydania",
+        "GENRE": "Gatunek",
+        "COUNTRY": "Kraj",
+        "ACTORS": "Aktorzy",
+        "DIRECTOR": "Reżyser",
+        "DURATION": "Czas trwania",
+        "CAST": "Obsada",
+        "EPISODE_RUN_TIME": "Czas trwania odcinka",
+        "RATING": "Ocena",
+        "IMDB_RATING": "Ocena IMDB",
+        "KINOPOISK_RATING": "Ocena Kinopoisk",
+        "DESCRIPTION": "Opis",
+        "YEAR": "Rok",
+        "AGE": "Wiek",
+        "YOUTUBE_TRAILER": "Zwiastun YouTube",
+        "EPISODE": "Odcinek"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Wszystkie kategorie",
+        "MY_FAVORITES": "Moje ulubione",
+        "ADD_TO_FAVORITES": "Dodaj do ulubionych",
+        "REMOVE_FROM_FAVORITES": "Usuń z ulubionych",
+        "REMOVED_FROM_FAVORITES": "Usunięto z ulubionych",
+        "ADDED_TO_FAVORITES": "Dodano do ulubionych",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Konto wygasło",
+                "DESCRIPTION": "To konto wygasło. Sprawdź dane uwierzytelniające w ustawieniach listy odtwarzania lub usuń ją."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Nieautoryzowany",
+                "DESCRIPTION": "Sprawdź dane uwierzytelniające w ustawieniach listy odtwarzania lub usuń ją."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Nie znaleziono portalu",
+                "DESCRIPTION": "Sprawdź dane uwierzytelniające i URL portalu w ustawieniach listy odtwarzania lub usuń ją."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Pusta kategoria",
+                "DESCRIPTION": "Ta kategoria nie zawiera treści, wybierz inną kategorię lub zmień typ treści"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Coś poszło nie tak",
+                "DESCRIPTION": "Nieznany błąd, spróbuj ponownie później"
+            },
+            "PLAYLIST_SETTINGS": "Ustawienia listy odtwarzania",
+            "HOME": "Strona główna",
+            "DELETE": "Usuń"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "Nic nie znaleziono, spróbuj zmienić zapytanie wyszukiwania"
+        },
+        "STREAM_URL_COPIED": "URL strumienia skopiowany do schowka",
+        "COPY_STREAM_URL": "Kopiuj URL strumienia",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "Znaleziono {{count}} wyników",
+            "NO_RESULTS_FOR": "Brak wyników dla „{{term}}”"
+        }
+    },
+    "INFORMATION": "Informacje",
+    "REMOTE_CONTROL": {
+        "TITLE": "Zdalne sterowanie",
+        "UP_CHANNEL": "Kanał w górę",
+        "DOWN_CHANNEL": "Kanał w dół",
+        "HEADER": "Zdalne sterowanie IPTVNator",
+        "FOOTER": "Zdalne sterowanie IPTVNator"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/pt.json b/apps/web/src/assets/i18n/pt.json
new file mode 100644
index 0000000..1849d94
--- /dev/null
+++ b/apps/web/src/assets/i18n/pt.json
@@ -0,0 +1,458 @@
+{
+    "CLOSE": "Fechar",
+    "PLAYLISTS": "Playlists",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Por favor, selecione uma playlist da lista ou adicione uma nova playlist",
+        "TABS": {
+            "RECENTLY_ADDED": "Playlists adicionadas recentemente",
+            "FILE_UPLOAD": "Adicionar via upload de arquivo",
+            "URL_UPLOAD": "Adicionar via URL",
+            "TEXT_IMPORT": "Importar do texto",
+            "XTREME_IMPORT": "Adicionar Código Xtreme",
+            "STALKER_PORTAL_IMPORT": "Adicionar Portal Stalker"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Nenhuma playlist foi adicionada",
+            "ADD_FIRST": "Por favor, adicione sua primeira playlist",
+            "WELCOME_TITLE": "Bem-vindo ao IPTVnator",
+            "WELCOME_DESCRIPTION": "Comece sua jornada de streaming adicionando sua primeira playlist. Conecte-se ao seu serviço de IPTV preferido e aproveite TV ao vivo, filmes e séries.",
+            "ADD_YOUR_FIRST": "Adicionar sua primeira playlist",
+            "FEATURE_M3U": "Arquivos M3U/M3U8",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Portal Stalker",
+            "NO_RESULTS_TITLE": "Nenhuma playlist encontrada",
+            "NO_RESULTS_DESCRIPTION": "Nenhuma playlist corresponde à sua pesquisa. Tente ajustar os termos de pesquisa ou limpe o filtro para ver todas as playlists.",
+            "ADDED_VIA_URL": "Adicionado via upload de URL. URL:",
+            "ADDED_VIA_FILE": "Adicionado via upload de arquivo",
+            "XTREAM_PLAYLIST": "Playlist Xtream",
+            "STALKER_PORTAL": "Portal Stalker",
+            "CHANNELS": "Canais",
+            "ADDED": "Adicionado",
+            "SHOW_DETAILS": "Mostrar detalhes da playlist",
+            "REMOVE": "Remover playlist",
+            "SEARCH_PLAYLISTS": "Pesquisar playlists por título",
+            "AUTO_REFRESH_ENABLED": "Atualização automática ativada",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Detalhes da playlist",
+                "TITLE": "Título",
+                "FROM_URL": "Adicionado da URL",
+                "IMPORT_DATE": "Data de importação",
+                "CHANNELS": "Número de canais",
+                "CLOSE": "Fechar",
+                "SAVE": "Salvar",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "Nome original do arquivo",
+                "FILE_PATH": "Caminho do arquivo",
+                "UPDATE_FAILED": "A última atualização da playlist falhou",
+                "AUTO_UPDATE": "Atualização automática",
+                "AUTO_UPDATE_DESCRIPTION": "Se a função de atualização automática estiver ativada, a playlist será atualizada automaticamente cada vez que o aplicativo for iniciado.",
+                "CUSTOM_USER_AGENT": "Alguns provedores de IPTV precisam de um user-agent específico para reproduzir sua playlist.",
+                "EXPORT_PLAYLIST": "Exportar playlist como m3u",
+                "SERVER_URL": "URL do servidor",
+                "USERNAME": "Nome de usuário",
+                "PASSWORD": "Senha",
+                "MAC_ADDRESS": "Endereço Mac",
+                "PLAYLIST_EXPORT_SUCCESS": "Playlist foi exportada com sucesso.",
+                "PLAYLIST_EXPORT_ERROR": "Erro: Falha ao exportar a playlist."
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Remover playlist",
+                "MESSAGE": "Tem certeza de que deseja excluir esta playlist completamente?",
+                "SUCCESS": "Playlist foi removida com sucesso"
+            },
+            "UPDATED": "Atualizado",
+            "REFRESH": "Atualizar playlist",
+            "REFRESH_XTREAM": "Atualizar playlist Xtream do servidor",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Atualizar playlist Xtream",
+                "MESSAGE": "Isso excluirá as categorias e streams armazenados localmente e reimportará tudo do servidor remoto. Seus favoritos e itens visualizados recentemente serão preservados. Deseja continuar?",
+                "STARTED": "Atualização iniciada. Navegando para a playlist...",
+                "ERROR": "Falha ao atualizar a playlist. Tente novamente."
+            },
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Sucesso! As playlists foram atualizadas com sucesso",
+            "GLOBAL_FAVORITES": "Favoritos globais",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Playlist gerada automaticamente com favoritos agregados de todas as playlists",
+            "MY_PLAYLISTS": "Minhas playlists",
+            "MY_PLAYLISTS_SUBTITLE": "todas as playlists disponíveis",
+            "PLAYLIST_UPDATE_SUCCESS": "Sucesso! A playlist foi atualizada com sucesso.",
+            "PLAYLIST_UPDATE_ERROR": "Erro ao atualizar detalhes da playlist.",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Arraste e solte os arquivos aqui",
+            "OR": "ou",
+            "CHOOSE_PLAYLIST": "escolha uma playlist",
+            "REJECTED": "O arquivo foi rejeitado, formato de arquivo não suportado {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "URL da playlist (m3u, m3u8)",
+            "ADD_PLAYLIST": "Adicionar playlist",
+            "CORS_NOTE": "Nota: Para evitar problemas de CORS neste ponto, o aplicativo usa um serviço de Proxy CORS público. Se você deseja enviar uma playlist com dados confidenciais, é mais seguro importá-la de um arquivo."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Inserir playlist m3u(8) como texto",
+            "BUTTON_LABEL": "Importar"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Título da playlist",
+            "SERVER_URL": "URL do servidor",
+            "USERNAME": "Nome de usuário",
+            "PASSWORD": "Senha",
+            "ADD": "Adicionar",
+            "TEST_CREDENTIALS": "Testar credenciais",
+            "URL_VALIDATION_ERROR": "Deve ser uma URL válida com protocolo (por exemplo, http://example.com ou https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Título",
+            "MAC_ADDRESS": "Endereço Mac",
+            "SERVER_URL": "URL do servidor",
+            "URL_VALIDATION_ERROR": "Deve ser uma URL válida com protocolo (por exemplo, http://example.com/c ou https://example.com/stalker_portal/c)",
+            "ADD": "Adicionar"
+        },
+        "FILTER_BY_NAME": "Filtrar por nome",
+        "FILTER_BY_TYPE": "Filtrar por tipo",
+        "SORT_PLAYLISTS": "Ordenar playlists",
+        "SORT_BY": "Ordenar por",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Nome (A-Z)",
+            "NAME_DESC": "Nome (Z-A)",
+            "NEWEST": "Data de adição (Mais recente primeiro)",
+            "OLDEST": "Data de adição (Mais antigo primeiro)"
+        },
+        "IMPORTED_AS_TEXT": "Importado como texto",
+        "PARSING_ERROR": "Erro: Falha na análise, não é uma playlist válida:"
+    },
+    "SETTINGS": {
+        "TITLE": "Configurações",
+        "SUBTITLE": "Altere a configuração do aplicativo",
+        "DESCRIPTION": "Adapte as opções da lista abaixo e confirme com o botão salvar alterações",
+        "EPG_URL_LABEL": "URL do EPG (*.xml ou *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Insira uma URL",
+        "REFRESH_EPG": "Atualizar EPG",
+        "REFRESH_ALL_EPG": "Atualizar tudo",
+        "REMOVE_EPG_SOURCE": "Remover fonte EPG",
+        "EPG_STATUS_FRESH": "Atualizado",
+        "EPG_STATUS_STALE": "Necessita atualização",
+        "EPG_STATUS_ERROR": "Falha",
+        "VIDEO_PLAYER_LABEL": "Reprodutor de vídeo",
+        "VIDEO_PLAYER_PLACEHOLDER": "Selecione uma opção",
+        "VERSION": "Versão",
+        "SAVE_CHANGES": "Salvar alterações",
+        "BACK_TO_HOME": "Voltar",
+        "NEW_VERSION_AVAILABLE": "Há uma nova versão disponível",
+        "LATEST_VERSION": "Você está usando a versão mais recente",
+        "STREAM_FORMAT": "Formato de stream",
+        "LANGUAGE": "Idioma",
+        "SETTINGS_SAVED": "Sucesso! A configuração foi salva.",
+        "THEME": "Tema visual",
+        "SHOW_CAPTIONS": "Mostrar legendas",
+        "ADD_EPG_SOURCE": "Adicionar fonte EPG",
+        "EPG_URL_ERROR": "O valor não é uma URL válida",
+        "VIDEO_PLAYER_DESCRIPTION": "Selecionar reprodutor de vídeo padrão",
+        "STREAM_FORMAT_DESCRIPTION": "Selecionar formato de stream padrão (xtream)",
+        "LANGUAGE_DESCRIPTION": "Selecionar idioma do aplicativo",
+        "THEME_DESCRIPTION": "Selecionar tema visual do aplicativo",
+        "SHOW_CAPTIONS_DESCRIPTION": "Mostrar ou ocultar legendas por padrão",
+        "VERSION_DESCRIPTION": "Versão atual do aplicativo",
+        "EPG_NOTE": "Atualmente, o EPG está disponível apenas na versão baseada em electron do IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Verifique aqui",
+        "IMPORT_EXPORT_DATA": "Importar/exportar playlists",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Exportar ou importar playlists no formato JSON usado no aplicativo.",
+        "IMPORT_DATA": "Importar",
+        "EXPORT_DATA": "Exportar",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Erro de importação, tente com outro arquivo.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "Caminho do mpv",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Defina o caminho para o reprodutor mpv em seu sistema. Ele usará o caminho fornecido para um binário mpv em vez de usar o encontrado em $PATH.",
+        "MPV_PLAYER_PATH": "Caminho do reprodutor mpv",
+        "VLC_PLAYER_PATH_LABEL": "Caminho do VLC",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Defina o caminho para o reprodutor VLC em seu sistema. Ele usará o caminho fornecido para um binário VLC em vez do caminho padrão para o nosso sistema.",
+        "VLC_PLAYER_PATH": "Caminho do reprodutor VLC",
+        "REMOTE_CONTROL": "Controle remoto",
+        "REMOTE_CONTROL_DESCRIPTION": "Ativar controle remoto do aplicativo.",
+        "REMOTE_CONTROL_PORT": "Porta de controle remoto",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Porta usada para controle remoto do aplicativo. A porta 8765 é usada por padrão.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Tema escuro",
+        "LIGHT_THEME": "Tema claro",
+        "SYSTEM_THEME": "Tema do sistema"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Pesquisar canal",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Enviar ou selecionar outra playlist",
+        "ALL_CHANNELS": "Todos os canais",
+        "GROUPS": "Grupos",
+        "UNGROUPED": "Não agrupados",
+        "UNNAMED_CHANNEL": "Canal sem nome",
+        "FAVORITES": "Favoritos",
+        "NO_FAVORITES": "Nenhum favorito ainda",
+        "USE_STAR_TO_FAVORITE": "Use o ícone 'estrela' para adicionar canais aos seus favoritos.",
+        "REMOVE_FAVORITE": "Remover dos favoritos",
+        "FAVORITES_UPDATED": "Favoritos foram atualizados!",
+        "SORT_BY": "Ordenar por",
+        "SORT_BY_DATE": "Ordenar por Data de Adição (Mais Recente Primeiro)",
+        "SORT_BY_RATING": "Ordenar por Classificação",
+        "SORT_BY_NAME": "Ordenar por Nome (A-Z)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Abrir lista de canais",
+        "TOGGLE_FAVORITE_FLAG": "Alternar sinalizador de favorito",
+        "OPEN_EPG_LIST": "Abrir lista de EPG",
+        "OPEN_MULTI_EPG": "Abrir visualização Multi-EPG"
+    },
+    "EPG": {
+        "TITLE": "Guia Eletrônico de Programação",
+        "NEXT_DAY": "Próximo dia",
+        "PREVIOUS_DAY": "Dia anterior",
+        "LIVE_NOW": "Ao vivo agora",
+        "LIVE_STREAM": "Transmissão ao vivo",
+        "TIMESHIFT_AVAILABLE": "Timeshift está disponível, clique para reproduzir",
+        "EPG_NOT_AVAILABLE_DATE": "Ooops, EPG não está disponível para a data selecionada",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ooops, EPG não está disponível para este canal.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Adicione/altere a URL da lista de EPG nas configurações do aplicativo.",
+        "FETCH_EPG": "Buscando dados do EPG...",
+        "ERROR": "Ooops, EPG não pôde ser carregado.",
+        "DOWNLOAD_SUCCESS": "EPG foi baixado com sucesso.",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Detalhes sobre o programa de TV",
+            "TITLE": "Título",
+            "CATEGORY": "Categoria",
+            "PARENTAL_RATING_SYSTEM": "Sistema de classificação de conteúdo televisivo",
+            "DESCRIPTION": "Descrição",
+            "LANGUAGE": "Idioma",
+            "SHOW_PROGRAM_DETAILS": "Mostrar detalhes sobre este programa"
+        },
+        "FETCH_SUCCESS": "EPG foi buscado com sucesso"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Sim",
+    "NO": "Não",
+    "MENU": {
+        "OPEN": "Abrir menu",
+        "SUPPORT_ARIA": "Apoie o IPTVnator no GitHub",
+        "SETTINGS": "Configurações",
+        "SETTINGS_ARIA": "Abrir configurações",
+        "BUG_REPORT": "Reportar um bug",
+        "WHAT_IS_NEW": "O que há de novo",
+        "ABOUT": "Sobre",
+        "ABOUT_ARIA": "Sobre o aplicativo",
+        "SUPPORT_PROJECT": "Apoiar projeto"
+    },
+    "ABOUT": {
+        "TITLE": "Sobre o IPTVnator",
+        "DESCRIPTION": "Aplicativo reprodutor de IPTV multiplataforma com vários recursos, como suporte a playlists m3u e m3u8, favoritos, guia de TV, arquivo/catchup de TV e muito mais.",
+        "VERSION": "Versão",
+        "GITHUB_TOOLTIP": "Repositório ITPVnator no GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Compre-me um café",
+        "TWITTER_TOOLTIP": "Compartilhar no Twitter"
+    },
+    "UPDATE_AVAILABLE": "Atualização disponível",
+    "REFRESH": "Atualizar",
+    "XTREAM": {
+        "PLAY": "Reproduzir",
+        "NAME": "Nome",
+        "RELEASE_DATE": "Data de lançamento",
+        "GENRE": "Gênero",
+        "COUNTRY": "País",
+        "ACTORS": "Atores",
+        "DIRECTOR": "Diretor",
+        "DURATION": "Duração",
+        "CAST": "Elenco",
+        "EPISODE_RUN_TIME": "Tempo de execução do episódio",
+        "RATING": "Classificação",
+        "IMDB_RATING": " Classificação IMDB",
+        "KINOPOISK_RATING": "Classificação Kinopoisk",
+        "DESCRIPTION": "Descrição",
+        "YEAR": "Ano",
+        "AGE": "Idade",
+        "YOUTUBE_TRAILER": "Trailer do YouTube",
+        "EPISODE": "Episódio"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Todas as categorias",
+        "MY_FAVORITES": "Meus favoritos",
+        "ADD_TO_FAVORITES": "Adicionar aos favoritos",
+        "REMOVE_FROM_FAVORITES": "Remover dos favoritos",
+        "REMOVED_FROM_FAVORITES": "Removido dos favoritos",
+        "ADDED_TO_FAVORITES": "Adicionado aos favoritos",
+        "SIDEBAR": {
+            "MAIN": "Principal",
+            "MOVIES": "Filmes",
+            "LIVE_TV": "TV ao vivo",
+            "SERIES": "Séries",
+            "LIBRARY": "Biblioteca",
+            "SEARCH": "Pesquisar",
+            "RECENT": "Recente",
+            "FAVORITES": "Favoritos",
+            "HOME": "Início",
+            "PLAYLIST_INFO": "Informações da playlist",
+            "ACCOUNT_INFO": "Informações da conta"
+        },
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Conta expirada",
+                "DESCRIPTION": "Esta conta expirou. Verifique as credenciais nas configurações da playlist ou remova-a."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Não autorizado",
+                "DESCRIPTION": "Verifique as credenciais nas configurações da playlist ou remova-a."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal não encontrado",
+                "DESCRIPTION": "Verifique as credenciais e o URL do portal nas configurações da playlist ou remova-o."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Categoria vazia",
+                "DESCRIPTION": "Esta categoria não tem conteúdo, selecione outra categoria ou altere o tipo de conteúdo"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Algo deu errado",
+                "DESCRIPTION": "Erro desconhecido, tente novamente mais tarde"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "Nenhuma categoria selecionada",
+                "DESCRIPTION": "Selecione uma categoria para ver o conteúdo"
+            },
+            "PLAYLIST_SETTINGS": "Configurações da playlist",
+            "HOME": "Início",
+            "DELETE": "Excluir"
+        },
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "Nenhum resultado encontrado",
+            "NO_SEARCH_RESULTS": "Nada encontrado, tente alterar sua solicitação de pesquisa"
+        },
+        "STREAM_URL_COPIED": "URL do stream copiado para a área de transferência",
+        "COPY_STREAM_URL": "Copiar URL do Stream",
+        "SELECT_CATEGORY": "Selecione uma categoria",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "{{count}} resultados encontrados",
+            "NO_RESULTS_FOR": "Nenhum resultado encontrado para \"{{term}}\""
+        }
+    },
+    "INFORMATION": "Informação",
+    "REMOTE_CONTROL": {
+        "TITLE": "Controle remoto",
+        "UP_CHANNEL": "Canal acima",
+        "DOWN_CHANNEL": "Canal abaixo",
+        "HEADER": "Controle Remoto IPTVNator",
+        "FOOTER": "Controle Remoto IPTVNator"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/ru.json b/apps/web/src/assets/i18n/ru.json
new file mode 100644
index 0000000..34b3cd8
--- /dev/null
+++ b/apps/web/src/assets/i18n/ru.json
@@ -0,0 +1,776 @@
+{
+    "CLOSE": "Закрыть",
+    "PLAYLISTS": "Плейлисты",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Выберите плейлист из списка, добавьте новый с компьютера или загрузите по ссылке",
+        "TABS": {
+            "RECENTLY_ADDED": "Недавно добавленные плейлисты",
+            "FILE_UPLOAD": "Загрузить с компьютера",
+            "URL_UPLOAD": "Загрузить по ссылке",
+            "TEXT_IMPORT": "Импортировать из текста",
+            "STALKER_PORTAL_IMPORT": "Добавить Stalker портал",
+            "XTREME_IMPORT": "Добавить Xtreme Code "
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Пока еще не было добавлено ни одного плейлиста",
+            "ADD_FIRST": "Вы можете добавить плейлисты из соседних вкладок",
+            "WELCOME_TITLE": "Добро пожаловать в IPTVnator",
+            "WELCOME_DESCRIPTION": "Начните свое путешествие в мир стриминга, добавив свой первый плейлист. Подключитесь к вашему любимому IPTV-сервису и наслаждайтесь прямыми трансляциями, фильмами и сериалами.",
+            "ADD_YOUR_FIRST": "Добавить первый плейлист",
+            "FEATURE_M3U": "Файлы M3U/M3U8",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Stalker портал",
+            "NO_RESULTS_TITLE": "Плейлисты не найдены",
+            "NO_RESULTS_DESCRIPTION": "Ни один плейлист не соответствует вашему запросу. Попробуйте изменить поисковый запрос или очистите фильтр, чтобы увидеть все плейлисты.",
+            "ADDED_VIA_URL": "Был добавлен по ссылке:",
+            "ADDED_VIA_FILE": "Был загружен с компьютера",
+            "CHANNELS": "Каналов",
+            "ADDED": "Добавлен",
+            "SHOW_DETAILS": "Показать информацию о плейлисте",
+            "REMOVE": "Удалить плейлист",
+            "SEARCH_PLAYLISTS": "Поиск по названию плейлиста",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Подробная информация о плейлисте",
+                "TITLE": "Название",
+                "FROM_URL": "Добавлен по ссылке",
+                "IMPORT_DATE": "Дата импорта",
+                "CHANNELS": "Количество каналов",
+                "CLOSE": "Закрыть",
+                "SAVE": "Сохранить",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "Имя файла при загрузке",
+                "FILE_PATH": "Путь к файлу",
+                "UPDATE_FAILED": "Не удалось обновить плейлист",
+                "AUTO_UPDATE": "Автообновление",
+                "AUTO_UPDATE_DESCRIPTION": "Если активирована функция автообновления, список воспроизведения будет обновляться автоматически при каждом запуске приложения.",
+                "CUSTOM_USER_AGENT": "Некоторые IPTV провайдеры требуют указание определенного пользовательского агента (User Agent) для воспроизведения своего плейлиста.",
+                "EXPORT_PLAYLIST": "Экспортировать плейлист (m3u)",
+                "PASSWORD": "Пароль",
+                "SERVER_URL": "URL-адрес сервера",
+                "USERNAME": "Имя пользователя",
+                "MAC_ADDRESS": "MAC-адрес",
+                "PLAYLIST_EXPORT_SUCCESS": "Плейлист был успешно экспортирован.",
+                "PLAYLIST_EXPORT_ERROR": "Ошибка: не удалось экспортировать плейлист."
+            },
+            "UPDATED": "Обновлен",
+            "REFRESH": "Обновить плейлист",
+            "REFRESH_XTREAM": "Обновить Xtream плейлист с сервера",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Обновить Xtream плейлист",
+                "MESSAGE": "Это удалит локально кэшированные категории и потоки и повторно импортирует все с удаленного сервера. Ваши избранные и недавно просмотренные элементы будут сохранены. Вы уверены, что хотите продолжить?",
+                "STARTED": "Обновление начато. Переход к плейлисту...",
+                "ERROR": "Не удалось обновить плейлист. Пожалуйста, попробуйте снова.",
+                "IN_PROGRESS": "Плейлист обновляется...",
+                "COLLECTING_DATA": "Собираются избранные и недавно просмотренные элементы...",
+                "DELETING_CONTENT": "Удаляется кэшированный контент...",
+                "DELETING_CATEGORIES": "Удаляются кэшированные категории..."
+            },
+            "REMOVE_DIALOG": {
+                "MESSAGE": "Вы уверены, что хотите удалить этот плейлист?",
+                "TITLE": "Удалить плейлист",
+                "SUCCESS": "Плейлист был успешно удален",
+                "IN_PROGRESS": "Плейлист удаляется...",
+                "DELETING_FAVORITES": "Удаляется избранное...",
+                "DELETING_RECENT": "Удаляется недавно просмотренное...",
+                "DELETING_PROGRESS": "Удаляется прогресс просмотра...",
+                "DELETING_DOWNLOADS": "Удаляются загрузки...",
+                "DELETING_CONTENT": "Удаляется кэшированный контент...",
+                "DELETING_CATEGORIES": "Удаляются категории...",
+                "DELETING_PLAYLIST": "Удаляется запись плейлиста..."
+            },
+            "GLOBAL_FAVORITES": "Все фавориты",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Автоматически сгенерированный плейлист, включающий в себя фавориты из всех плейлистов",
+            "MY_PLAYLISTS": "Мои плейлисты",
+            "MY_PLAYLISTS_SUBTITLE": "Все имеющиеся плейлисты",
+            "PLAYLIST_UPDATE_SUCCESS": "Плейлист был успешно обновлен!",
+            "PLAYLIST_UPDATE_ERROR": "Ошибка при обновлении деталей плейлиста.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Успешно! Плейлисты были успешно обновлены",
+            "AUTO_REFRESH_ENABLED": "Автообновление включено",
+            "STALKER_PORTAL": "Stalker портал",
+            "XTREAM_PLAYLIST": "Xtream плейлист",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Перетащите файл в эту область",
+            "OR": "или",
+            "CHOOSE_PLAYLIST": "выберите плейлист",
+            "REJECTED": "К сожалению, данный формат файлов не поддерживается {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Ссылка на плейлист (*.m3u или *.m3u8)",
+            "ADD_PLAYLIST": "Добавить плейлист",
+            "CORS_NOTE": "Примечание: Чтобы избежать проблем с CORS, приложение использует публичный CORS-прокси сервис. Если вы хотите загрузить плейлист с конфиденциальными данными, безопаснее импортировать его из файла."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "Вставьте плейлист формата m3u(8) в данное поле",
+            "BUTTON_LABEL": "Импортировать"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Название плейлиста",
+            "SERVER_URL": "Сервер URL",
+            "USERNAME": "Пользователь",
+            "PASSWORD": "Пароль",
+            "ADD": "Добавить",
+            "TEST_CREDENTIALS": "Проверить",
+            "URL_VALIDATION_ERROR": "Должен быть действительный URL-адрес с протоколом (например, http://example.com или https://example.com:4324)."
+        },
+        "STALKER_PORTAL": {
+            "ADD": "Добавить",
+            "TITLE": "Название",
+            "MAC_ADDRESS": "MAC-адрес",
+            "SERVER_URL": "URL сервера",
+            "URL_VALIDATION_ERROR": "Должен быть действительный URL-адрес с протоколом (например, http://example.com/c или https://example.com/stalker_portal/c)."
+        },
+        "FILTER_BY_TYPE": "Типы плейлистов",
+        "FILTER_BY_NAME": "Фильтровать по имени",
+        "FILTER_AND_SORT": "Фильтр и сортировка",
+        "SORT_PLAYLISTS": "Сортировать плейлисты",
+        "SORT_BY": "Сортировать по",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "Имени (А-Я)",
+            "NAME_DESC": "Имени (Я-А)",
+            "NEWEST": "Дате добавления (сначала новые)",
+            "OLDEST": "Дате добавления (сначала старые)"
+        },
+        "PLAYLIST_TYPES": {
+            "M3U": "M3U (локально, URL, текст)",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker"
+        },
+        "IMPORTED_AS_TEXT": "Импортировано как текст",
+        "PARSING_ERROR": "Ошибка парсинга, недействительный плейлист:"
+    },
+    "SETTINGS": {
+        "TITLE": "Настройки",
+        "GENERAL": "Общие",
+        "GENERAL_SUBTITLE": "Изменение основных параметров приложения",
+        "PLAYBACK": "Воспроизведение",
+        "EPG_SOURCES": "Источники EPG",
+        "EPG_SOURCES_DESCRIPTION": "Добавьте один или несколько URL-адресов источников EPG",
+        "DATA": "Данные",
+        "ABOUT": "О приложении",
+        "NAV_GENERAL": "Общие",
+        "NAV_PLAYBACK": "Плеер",
+        "NAV_EPG": "EPG",
+        "NAV_REMOTE": "Пульт",
+        "NAV_DATA": "Данные",
+        "NAV_ABOUT": "Инфо",
+        "APP_PREFERENCES": "Параметры приложения",
+        "HERO_EYEBROW": "Настройки рабочей области",
+        "HERO_TITLE": "Настройте IPTVnator под себя",
+        "HERO_DESCRIPTION": "Настраивайте воспроизведение, телегид, удалённый доступ и работу с данными в одном месте, не теряя стиль текущего рабочего пространства.",
+        "SUBTITLE": "Здесь можно изменить общие настройки приложения",
+        "DESCRIPTION": "Закончив настройку, не забудьте подтвердить новые настройки кнопкой 'Сохранить'",
+        "EPG_URL_LABEL": "Ссылка на программу каналов (EPG) (*.xml или *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "Введите ссылку",
+        "REFRESH_EPG": "Обновить программу каналов (EPG)",
+        "REFRESH_ALL_EPG": "Обновить все",
+        "REMOVE_EPG_SOURCE": "Удалить источник EPG",
+        "EPG_STATUS_FRESH": "Актуально",
+        "EPG_STATUS_STALE": "Требует обновления",
+        "EPG_STATUS_ERROR": "Ошибка",
+        "VIDEO_PLAYER_LABEL": "Видеоплеер",
+        "PLAYER_HTML5": "HTML5-плеер",
+        "PLAYER_VIDEOJS": "Video.js-плеер",
+        "PLAYER_ARTPLAYER": "ArtPlayer",
+        "PLAYER_MPV": "MPV-плеер",
+        "PLAYER_VLC": "VLC",
+        "VIDEO_PLAYER_PLACEHOLDER": "Выберите из списка",
+        "VERSION": "Версия приложения",
+        "SAVE_CHANGES": "Сохранить",
+        "BACK_TO_HOME": "Назад",
+        "NEW_VERSION_AVAILABLE": "Доступна новая версия приложения",
+        "LATEST_VERSION": "Вы используете последнюю версию приложения",
+        "STREAM_FORMAT": "Формат потока",
+        "LANGUAGE": "Язык",
+        "SETTINGS_SAVED": "Новые настройки были успешно сохранены!",
+        "THEME": "Тема оформления",
+        "SHOW_CAPTIONS": "Отображать субтитры",
+        "SHOW_DASHBOARD": "Показывать панель",
+        "SHOW_DASHBOARD_DESCRIPTION": "Оставить Dashboard доступным в боковой панели рабочего пространства. Если отключить, первой страницей будет Источники.",
+        "ADD_EPG_SOURCE": "Добавить источник EPG",
+        "CLEAR_EPG_DATA": "Очистить данные EPG",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "Очистить данные EPG",
+            "MESSAGE": "Вы уверены, что хотите удалить все данные EPG из базы данных? Это удалит все кэшированные телепрограммы."
+        },
+        "EPG_DATA_CLEARED": "Данные EPG очищены",
+        "EPG_DATA_CLEAR_FAILED": "Не удалось очистить данные EPG. Попробуйте ещё раз.",
+        "CLEARING_EPG_DATA": "Очистка…",
+        "EPG_URL_ERROR": "Введенное значение не является URL-адресом.",
+        "VIDEO_PLAYER_DESCRIPTION": "Выбрать стандартный видео плеер",
+        "STREAM_FORMAT_DESCRIPTION": "Выбрать формат потока по умолчанию (Xtream)",
+        "LANGUAGE_DESCRIPTION": "Выбрать язык приложения",
+        "THEME_DESCRIPTION": "Выбрать визуальную тему оформления",
+        "STARTUP_BEHAVIOR": "Начальный экран",
+        "STARTUP_BEHAVIOR_DESCRIPTION": "Выберите, должен ли IPTVnator открывать первый доступный экран рабочего пространства или восстанавливать последний экран уровня раздела. Первый экран означает Dashboard, если он включён, иначе Источники.",
+        "STARTUP_BEHAVIOR_FIRST_VIEW": "Первый доступный экран",
+        "STARTUP_BEHAVIOR_RESTORE_LAST_VIEW": "Восстановить последний экран",
+        "SHOW_CAPTIONS_DESCRIPTION": "Показать или скрыть субтитры по умолчанию.",
+        "VERSION_DESCRIPTION": "Текущая версия приложения",
+        "ABOUT_SUBTITLE": "Версия, ссылки на проект и способы поддержать IPTVnator.",
+        "COMMUNITY": "Проект и сообщество",
+        "COMMUNITY_DESCRIPTION": "Поставьте звезду репозиторию, читайте блог или присоединяйтесь к Telegram-группе для новостей и поддержки.",
+        "LINK_BLOG": "Блог",
+        "LINK_GITHUB_DESCRIPTION": "Звезда, issues и возможность поучаствовать",
+        "LINK_BLOG_DESCRIPTION": "Новости релизов, советы и обновления проекта",
+        "LINK_TELEGRAM_DESCRIPTION": "Анонсы, сообщество и поддержка",
+        "SUPPORT_TITLE": "Поддержать проект",
+        "SUPPORT_DESCRIPTION": "IPTVnator — бесплатный open source проект, разработка ведётся открыто. Если он стал частью вашего дня, небольшая поддержка помогает продолжать развитие — спасибо!",
+        "SUPPORT_SPONSORS_HINT": "Регулярно или однократно",
+        "SUPPORT_KOFI_HINT": "Купить кофе",
+        "EPG_NOTE": "На данный момент EPG доступен только в нативной версии IPTVnator.",
+        "EPG_NOTE_URL_TEXT": "Подробнее здесь",
+        "IMPORT_EXPORT_DATA": "Импорт/экспорт плейлистов",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Экспорт или импорт плейлистов в формате JSON, используемом в приложении.",
+        "IMPORT_DATA": "Импорт",
+        "EXPORT_DATA": "Экспорт",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "Ошибка импорта, пожалуйста попробуйте импортировать другой файл.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "VLC_PLAYER_PATH_LABEL": "Путь к VLC плееру",
+        "VLC_PLAYER_PATH": "Путь к VLC плееру",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Установите путь к проигрывателю VLC в вашей системе. \nОн будет использовать предоставленный путь к binary файлу VLC вместо пути по умолчанию.",
+        "MPV_PLAYER_PATH_LABEL": "Путь к mpv плееру",
+        "MPV_PLAYER_PATH": "Путь к mpv плееру",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Установите путь к проигрывателю MPV в вашей системе. Он будет использовать предоставленный путь к бинарному файлу MPV вместо найденного в $PATH.",
+        "MPV_REUSE_INSTANCE_LABEL": "Переиспользовать экземпляр MPV",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "Когда включено, одно и то же окно MPV будет использоваться для воспроизведения разных потоков. Когда отключено, каждый поток открывается в новом окне MPV.",
+        "REMOTE_CONTROL": "Удалённое управление",
+        "REMOTE_CONTROL_DESCRIPTION": "Включить удалённое управление приложением.",
+        "REMOTE_CONTROL_PORT": "Порт удалённого управления",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Порт для удалённого управления приложением. По умолчанию используется порт 8765.",
+        "REMOTE_CONTROL_URL": "URL удалённого управления",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Откройте удалённое управление с другого устройства в той же сети.",
+        "SHOW_QR_CODE": "Показать QR-код",
+        "STATUS_ENABLED": "Включено",
+        "STATUS_DISABLED": "Выключено",
+        "SOURCE_SINGULAR": "источник",
+        "SOURCE_PLURAL": "источников",
+        "PORT_RANGE_LABEL": "Порт (1-65535)",
+        "PORT_REQUIRED": "Порт обязателен",
+        "PORT_MIN": "Порт должен быть не менее 1",
+        "PORT_MAX": "Порт должен быть не более 65535",
+        "PORT_PATTERN": "Разрешены только цифры",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Тёмная тема",
+        "LIGHT_THEME": "Светлая тема",
+        "SYSTEM_THEME": "Системная тема"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Поиск каналов",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Загрузить или выбрать другой плейлист",
+        "ALL_CHANNELS": "Все каналы",
+        "GROUPS": "Группы",
+        "UNGROUPED": "Негруппированные",
+        "UNNAMED_CHANNEL": "Канал без названия",
+        "FAVORITES": "Избранные",
+        "NO_FAVORITES": "Избранных каналов пока нет",
+        "USE_STAR_TO_FAVORITE": "Используйте иконку звезды, чтобы добавлять каналы в избранное",
+        "REMOVE_FAVORITE": "Удалить из списка фаворитов",
+        "FAVORITES_UPDATED": "Список фаворитов был обновлен!",
+        "SELECT_CHANNEL_PLAYBACK": "Пожалуйста, выберите канал для начала воспроизведения",
+        "SORT_BY": "Сортировать по",
+        "SORT_BY_DATE": "Сортировать по дате добавления (сначала новые)",
+        "SORT_BY_RATING": "Сортировать по рейтингу",
+        "SORT_BY_NAME": "Сортировать по имени (А-Я)"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Открыть список каналов",
+        "TOGGLE_FAVORITE_FLAG": "Избранный",
+        "OPEN_EPG_LIST": "Открыть программу (EPG)",
+        "OPEN_MULTI_EPG": "Открыть Multi-EPG вид"
+    },
+    "EPG": {
+        "TITLE": "Электронный программный гид",
+        "NEXT_DAY": "Следующий день",
+        "PREVIOUS_DAY": "Предыдущий день",
+        "LIVE_NOW": "Сейчас",
+        "LIVE_STREAM": "Прямая трансляция",
+        "TIMESHIFT_AVAILABLE": "Доступна функция архива (timeshift). Нажмите на передачу для воспроизведения.",
+        "EPG_NOT_AVAILABLE_DATE": "Ой, программа на этот день, к сожалению, отсутствует.",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Программа для этого канала недоступна.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Попробуйте изменить или обновить ссылку на EPG в настройках приложения.",
+        "FETCH_EPG": "Загружаю программу ТВ-передач (EPG)...",
+        "ERROR": "Ой, не удалось загрузить программу каналов (EPG)",
+        "DOWNLOAD_SUCCESS": "Программа каналов (EPG) была успешно загружена.",
+        "FETCH_SUCCESS": "Программа каналов (EPG) была успешно получена",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "Подробности передачи",
+            "TITLE": "Название",
+            "CATEGORY": "Категория",
+            "PARENTAL_RATING_SYSTEM": "Возрастное ограничение",
+            "DESCRIPTION": "Описание",
+            "LANGUAGE": "Язык",
+            "SHOW_PROGRAM_DETAILS": "Показать подробности"
+        }
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "NO": "Нет",
+    "YES": "Да",
+    "MENU": {
+        "OPEN": "Открыть меню",
+        "SUPPORT_ARIA": "Поддержать IPTVnator на GitHub",
+        "SETTINGS": "Настройки",
+        "SETTINGS_ARIA": "Открыть настройки",
+        "BUG_REPORT": "Сообщить об ошибке",
+        "WHAT_IS_NEW": "Что нового?",
+        "ABOUT": "О приложении",
+        "ABOUT_ARIA": "О приложении",
+        "SUPPORT_PROJECT": "Поддержать проект"
+    },
+    "ABOUT": {
+        "TITLE": "О приложении",
+        "DESCRIPTION": "Кроссплатформенное приложение IPTV-плеера с множеством функций, таких как поддержка плейлистов m3u и m3u8, избранное, телегид, ТВ-архив/catchup и многое другое.",
+        "VERSION": "Версия",
+        "GITHUB_TOOLTIP": "Репозиторий приложения на GitHub",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Поддержать разработчика",
+        "TWITTER_TOOLTIP": "Поделиться на Twitter"
+    },
+    "UPDATE_AVAILABLE": "Доступно обновление",
+    "REFRESH": "Обновить",
+    "XTREAM": {
+        "RATING": "Рейтинг",
+        "RELEASE_DATE": "Дата выпуска",
+        "ACTORS": "Актеры",
+        "PLAY": "Воспроизвести",
+        "OPENING_PLAYER": "Открытие плеера...",
+        "GENRE": "Жанр",
+        "DURATION": "Продолжительность",
+        "COUNTRY": "Страна",
+        "NAME": "Название",
+        "DIRECTOR": "Режиссёр",
+        "CAST": "Бросать",
+        "EPISODE_RUN_TIME": "Длительность эпизода",
+        "AGE": "Возраст",
+        "EPISODE": "Эпизод",
+        "RESUME": "Продолжить",
+        "RESTART": "С начала",
+        "CONTINUE_WATCHING": "Продолжить просмотр",
+        "WATCHED": "Просмотрено",
+        "IN_PROGRESS": "В процессе",
+        "MARK_WATCHED": "Отметить как просмотренное",
+        "MARK_UNWATCHED": "Отметить как непросмотренное",
+        "EPISODES_WATCHED": "Просмотрено {{count}} из {{total}} эпизодов",
+        "YEAR": "Год",
+        "YOUTUBE_TRAILER": "YouTube-трейлер",
+        "DESCRIPTION": "Описание",
+        "KINOPOISK_RATING": "Рейтинг на Кинопоиск",
+        "IMDB_RATING": "Рейтинг на IMDB",
+        "ACCOUNT_INFO": {
+            "TITLE": "Информация об аккаунте",
+            "USER_INFO": "Информация о пользователе",
+            "STATUS": "Статус",
+            "USERNAME": "Имя пользователя",
+            "ACTIVE_CONNECTIONS": "Активные подключения",
+            "CREATED": "Создано",
+            "EXPIRES": "Истекает",
+            "TRIAL_ACCOUNT": "Пробный аккаунт",
+            "YES": "Да",
+            "NO": "Нет",
+            "ALLOWED_FORMATS": "Разрешенные форматы",
+            "SERVER_INFO": "Информация о сервере",
+            "LIVE_TV": "Прямой эфир",
+            "MOVIES": "Фильмы",
+            "TV_SERIES": "Сериалы",
+            "URL": "URL",
+            "PROTOCOL": "Протокол",
+            "TIMEZONE": "Часовой пояс",
+            "SERVER_TIME": "Время сервера",
+            "PORTS": "Порты",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        }
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Все категории",
+        "ADD_TO_FAVORITES": "Добавить в избранное",
+        "REMOVE_FROM_FAVORITES": "Удалить из избранного",
+        "MY_FAVORITES": "Избранное",
+        "COPY_STREAM_URL": "Копировать URL-адрес потока",
+        "ERROR_VIEW": {
+            "DELETE": "Удалить",
+            "IMPORT_CANCELLED": {
+                "TITLE": "Импорт отменён",
+                "DESCRIPTION": "Импорт плейлиста был отменён. Повторите попытку, когда захотите снова загрузить этот источник."
+            },
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Срок действия учетной записи истек",
+                "DESCRIPTION": "Срок действия этой учетной записи истек. \nПожалуйста, проверьте учетные данные в настройках плейлиста или удалите его."
+            },
+            "ACCOUNT_INACTIVE": {
+                "TITLE": "Учётная запись неактивна",
+                "DESCRIPTION": "Эта учётная запись неактивна. Проверьте учётные данные в настройках плейлиста или удалите источник."
+            },
+            "HOME": "На главную",
+            "EMPTY_CATEGORY": {
+                "TITLE": "Пустая категория",
+                "DESCRIPTION": "В этой категории нет контента. Выберите другую категорию или измените тип контента."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Несанкционированный",
+                "DESCRIPTION": "Пожалуйста, проверьте учетные данные в настройках плейлиста или удалите их."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Портал не найден",
+                "DESCRIPTION": "Пожалуйста, проверьте учетные данные и URL портала в настройках плейлиста или удалите его."
+            },
+            "PORTAL_UNAVAILABLE": {
+                "TITLE": "Портал недоступен",
+                "DESCRIPTION": "Не удалось подключиться к порталу. Проверьте URL сервера или повторите попытку позже."
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "Категория не выбрана",
+                "DESCRIPTION": "Пожалуйста, выберите категорию для просмотра содержимого"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Что-то пошло не так",
+                "DESCRIPTION": "Неизвестная ошибка. Повторите попытку позже."
+            },
+            "PLAYLIST_SETTINGS": "Настройки плейлиста"
+        },
+        "STREAM_URL_COPIED": "URL-адрес потока был скопирован в буфер обмена.",
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "Результаты не найдены",
+            "NO_SEARCH_RESULTS": "Ничего не найдено, попробуйте изменить поисковый запрос"
+        },
+        "SIDEBAR": {
+            "MAIN": "Главная",
+            "MOVIES": "Фильмы",
+            "LIVE_TV": "Прямой эфир",
+            "SERIES": "Сериалы",
+            "LIBRARY": "Библиотека",
+            "SEARCH": "Поиск",
+            "RECENT": "Недавние",
+            "FAVORITES": "Избранное",
+            "HOME": "Домой",
+            "PLAYLIST_INFO": "Информация о плейлисте",
+            "ACCOUNT_INFO": "Информация об аккаунте"
+        },
+        "REMOVED_FROM_FAVORITES": "Удалено из избранного",
+        "ADDED_TO_FAVORITES": "Добавлено в избранное",
+        "SELECT_CATEGORY": "Выберите категорию",
+        "PAGE": "Страница",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "Найдено {{count}} результатов",
+            "NO_RESULTS_FOR": "Нет результатов по запросу \"{{term}}\""
+        }
+    },
+    "INFORMATION": "Инфо",
+    "DOWNLOADS": {
+        "CLEAR_COMPLETED": "Очистить завершенные",
+        "CLEAR_COMPLETED_DIALOG": {
+            "TITLE": "Очистить завершенные загрузки",
+            "MESSAGE": "Это удалит завершенные, неудачные и отмененные записи из текущего списка загрузок. Уже загруженные на диск файлы удалены не будут."
+        },
+        "SOURCE_PLAYLIST_MISSING": "Эту загрузку больше нельзя открыть в библиотеке, потому что исходный плейлист был удален.",
+        "FILE_NOT_FOUND": "Этот загруженный файл больше недоступен на диске.",
+        "FILE_ACTION_ERROR": "Не удалось выполнить действие с файлом.",
+        "COPY_URL": "Копировать URL загрузки",
+        "URL_COPIED": "URL загрузки скопирован в буфер обмена",
+        "URL_COPY_FAILED": "Не удалось скопировать URL",
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    },
+    "REMOTE_CONTROL": {
+        "TITLE": "Дистанционное управление",
+        "UP_CHANNEL": "Канал вверх",
+        "DOWN_CHANNEL": "Канал вниз",
+        "HEADER": "IPTVNator Дистанционное управление",
+        "FOOTER": "IPTVNator Дистанционное управление"
+    },
+    "WORKSPACE": {
+        "FAVORITES_ONLY": "Только избранное",
+        "SORT_CUSTOM": "Пользовательский порядок",
+        "SORT_DATE_DESC": "Дата добавления (Сначала новые)",
+        "SORT_DATE_ASC": "Дата добавления (Сначала старые)",
+        "SORT_NAME_ASC": "Имя (А-Я)",
+        "SORT_NAME_DESC": "Имя (Я-А)",
+        "SORT_LABEL": "Сортировка: ",
+        "DASHBOARD": {
+            "CONTINUE_WATCHING": "Продолжить просмотр",
+            "UNTITLED_SOURCE": "Источник без названия",
+            "GLOBAL_FAVORITES": "Глобальные избранные",
+            "REMOVE_FROM_HISTORY": "Удалить из истории",
+            "RECENT_SOURCES": "Недавно использованные источники",
+            "MANAGE_ALL": "Управлять всем",
+            "RECENTLY_WATCHED": "Недавно просмотренные",
+            "XTREAM_RECENTLY_ADDED": "Недавно добавленные на Xtream",
+            "NO_HISTORY": "Для этого фильтра элементы не найдены.",
+            "NO_HISTORY_HINT": "История просмотра появится здесь, как только вы начнете воспроизводить контент из своих плейлистов.",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker",
+            "M3U": "M3U",
+            "STALKER_PORTAL": "Портал Stalker",
+            "PROVIDER": "Провайдер",
+            "TYPE_LIVE": "ТВ",
+            "TYPE_MOVIE": "Фильм",
+            "TYPE_SERIES": "Сериал",
+            "NOT_YET_SYNCED": "Еще не синхронизировано"
+        },
+        "SHELL": {
+            "BRAND_ALT": "IPTVnator",
+            "RAIL_DASHBOARD": "Панель",
+            "OPEN_DASHBOARD": "Открыть панель",
+            "RAIL_SOURCES": "Источники",
+            "OPEN_SOURCES": "Открыть источники",
+            "RAIL_SETTINGS": "Настройки",
+            "OPEN_SETTINGS": "Открыть настройки",
+            "RAIL_LIBRARY": "Библиотека",
+            "RAIL_MOVIES": "Фильмы",
+            "RAIL_LIVE": "ТВ",
+            "RAIL_SERIES": "Сериалы",
+            "RAIL_RECENTLY_ADDED": "Недавно добавленные",
+            "RAIL_SEARCH": "Расширенный поиск",
+            "RAIL_RECENT": "Недавно просмотренные",
+            "RAIL_FAVORITES": "Избранное",
+            "RAIL_DOWNLOADS": "Загрузки",
+            "RAIL_ALL_CHANNELS": "Все каналы",
+            "RAIL_GROUPS": "Группы",
+            "RAIL_CONTEXT_ACTIONS": "Действия раздела",
+            "SEARCH_LABEL": "Поиск",
+            "SEARCH_SOURCES_PLACEHOLDER": "Искать источники (все плейлисты)...",
+            "SEARCH_PLAYLIST_PLACEHOLDER": "Искать в этом плейлисте...",
+            "SEARCH_SECTION_PLACEHOLDER": "Искать в этом разделе...",
+            "FILTER_SECTION_PLACEHOLDER": "Фильтровать этот раздел...",
+            "SEARCH_STATUS_LOADED_ONLY": "Только загруженные каналы",
+            "COMMAND_PALETTE_SHORTCUT": "Палитра команд (Ctrl/Cmd+K)",
+            "OPEN_COMMAND_PALETTE": "Открыть палитру команд",
+            "ADD_PLAYLIST_ALL": "Добавить плейлист (все плейлисты)",
+            "ADD_PLAYLIST": "Добавить плейлист",
+            "OPEN_DOWNLOADS": "Открыть загрузки",
+            "OPEN_CONTEXT_ACTIONS": "Открыть действия раздела",
+            "NO_SECTION_ACTIONS": "Для этого раздела нет действий",
+            "PLAYLIST_INFO": "Информация о плейлисте",
+            "ACCOUNT_INFO": "Информация об аккаунте",
+            "REFRESH_PLAYLIST": "Обновить плейлист",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL": "Очистить завершенные загрузки (все плейлисты)",
+            "CLEAR_COMPLETED_DOWNLOADS_ALL_ARIA": "Очистить завершенные загрузки для всех плейлистов",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST": "Очистить завершенные загрузки (этот плейлист)",
+            "CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST_ARIA": "Очистить завершенные загрузки для этого плейлиста",
+            "CLEAR_RECENTLY_VIEWED_SECTION": "Очистить недавно просмотренное",
+            "CLEAR_RECENTLY_VIEWED_SECTION_ARIA": "Очистить недавно просмотренное для этого раздела",
+            "CLEAR_RECENTLY_VIEWED_TYPE": "Очистить недавно просмотренное ({{type}})",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_TITLE": "Очистить недавно просмотренное ({{type}})?",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_PLAYLIST": "Все элементы «{{type}}» из этого плейлиста будут удалены из истории просмотров. Это действие нельзя отменить.",
+            "CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_ALL": "Все элементы «{{type}}» из всех плейлистов будут удалены из истории просмотров. Это действие нельзя отменить.",
+            "CLEAR_FAVORITES_TYPE": "Удалить избранное ({{type}})",
+            "CLEAR_FAVORITES_DIALOG_TITLE": "Удалить все избранное «{{type}}»?",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_PLAYLIST": "Все избранное «{{type}}» из этого плейлиста будет удалено. Это действие нельзя отменить.",
+            "CLEAR_FAVORITES_DIALOG_MESSAGE_ALL": "Все избранное «{{type}}» из всех плейлистов будет удалено. Это действие нельзя отменить.",
+            "XTREAM_CODE": "Xtream Code",
+            "STALKER_PORTAL": "Портал Stalker",
+            "CHANNELS_COUNT": "{{count}} каналов",
+            "NO_SOURCES_AVAILABLE": "Нет доступных источников",
+            "ONE_SOURCE_AVAILABLE": "Доступен 1 источник",
+            "SOURCES_AVAILABLE": "Доступно источников: {{count}}",
+            "XTREAM_IMPORT_TITLE": "Синхронизация плейлиста",
+            "XTREAM_IMPORT_REMOTE_BADGE": "Удалённый источник",
+            "XTREAM_IMPORT_LOCAL_BADGE": "Локальная библиотека",
+            "XTREAM_IMPORT_DETAIL_REMOTE": "Ожидание ответа от провайдера.",
+            "XTREAM_IMPORT_DETAIL_LOCAL": "Подготавливает более быстрые переключения плейлиста при следующем открытии.",
+            "XTREAM_IMPORT_PREPARING": "Подготовка локальной библиотеки...",
+            "XTREAM_IMPORT_LOADING": "Получение данных плейлиста из источника...",
+            "XTREAM_IMPORT_SAVING": "Сохранение данных плейлиста локально...",
+            "XTREAM_IMPORT_RESTORING_FAVORITES": "Восстановление избранного из локальной библиотеки...",
+            "XTREAM_IMPORT_RESTORING_RECENT": "Восстановление недавно просмотренного из локальной библиотеки...",
+            "XTREAM_IMPORT_PROGRESS": "Импорт {{type}}: {{current}} / {{total}}",
+            "XTREAM_IMPORT_CANCEL": "Остановить синхронизацию",
+            "XTREAM_IMPORT_CANCELLING": "Остановка синхронизации...",
+            "COMMANDS": {
+                "GLOBAL_SEARCH_LABEL": "Искать во всех плейлистах Xtream",
+                "GLOBAL_SEARCH_DESCRIPTION": "Открыть глобальный поиск",
+                "PLAYLIST_SEARCH_LABEL": "Расширенный поиск в этом плейлисте",
+                "PLAYLIST_SEARCH_DESCRIPTION": "Открыть расширенный поиск плейлиста",
+                "OPEN_GLOBAL_FAVORITES_LABEL": "Открыть глобальные избранные",
+                "OPEN_GLOBAL_FAVORITES_DESCRIPTION": "Перейти к объединенному избранному",
+                "OPEN_DOWNLOADS_LABEL": "Открыть загрузки",
+                "OPEN_DOWNLOADS_DESCRIPTION": "Перейти к представлению загрузок",
+                "OPEN_GLOBAL_RECENT_LABEL": "Открыть недавно просмотренные",
+                "OPEN_GLOBAL_RECENT_DESCRIPTION": "Открыть глобальную страницу недавно просмотренного",
+                "OPEN_SETTINGS_LABEL": "Открыть настройки",
+                "OPEN_SETTINGS_DESCRIPTION": "Перейти к настройкам приложения",
+                "OPEN_SOURCES_LABEL": "Управление источниками",
+                "OPEN_SOURCES_DESCRIPTION": "Перейти к управлению источниками",
+                "OPEN_DASHBOARD_LABEL": "Открыть панель",
+                "OPEN_DASHBOARD_DESCRIPTION": "Перейти к панели управления",
+                "ADD_PLAYLIST_LABEL": "Добавить источник",
+                "ADD_PLAYLIST_DESCRIPTION": "Открыть диалог добавления плейлиста",
+                "REFRESH_PLAYLIST_LABEL": "Обновить плейлист",
+                "REFRESH_PLAYLIST_DESCRIPTION": "Синхронизировать данные с источника",
+                "PLAYLIST_INFO_LABEL": "Сведения о плейлисте",
+                "PLAYLIST_INFO_DESCRIPTION": "Показать информацию о текущем плейлисте",
+                "ACCOUNT_INFO_LABEL": "Информация об аккаунте",
+                "ACCOUNT_INFO_DESCRIPTION": "Показать данные аккаунта Xtream",
+                "OPEN_VIEW_DESCRIPTION": "Перейти к разделу {{view}}",
+                "CLEAR_CURRENT_VIEW_DESCRIPTION": "Очистить все видимые элементы «{{type}}» в этом представлении",
+                "OPEN_MULTI_EPG_DESCRIPTION": "Открыть представление Multi-EPG",
+                "GO_TO_VOD_LABEL": "Фильмы",
+                "GO_TO_VOD_DESCRIPTION": "Перейти к разделу фильмов",
+                "GO_TO_LIVE_LABEL": "Прямой эфир",
+                "GO_TO_LIVE_DESCRIPTION": "Перейти к разделу ТВ",
+                "GO_TO_SERIES_LABEL": "Сериалы",
+                "GO_TO_SERIES_DESCRIPTION": "Перейти к разделу сериалов",
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "SOURCES": {
+            "TITLE": "Источники",
+            "SUBTITLE": "Фильтрация и сортировка плейлистов",
+            "TYPE": "Тип",
+            "ALL": "Все",
+            "M3U_PLAYLISTS": "M3U плейлисты",
+            "XTREAM_PLAYLISTS": "Xtream плейлисты",
+            "STALKER_PLAYLISTS": "Stalker плейлисты",
+            "ALL_PLAYLISTS": "Все плейлисты",
+            "PLAYLIST_COUNT_ONE": "1 плейлист",
+            "PLAYLIST_COUNT_OTHER": "{{count}} плейлистов"
+        },
+        "CONTEXT": {
+            "CATEGORIES": "Категории",
+            "MOVIE_CATEGORIES": "Категории фильмов",
+            "SERIES_CATEGORIES": "Категории сериалов",
+            "LIVE_CATEGORIES": "Категории ТВ",
+            "XTREAM_SYNCING_MOVIES": "Синхронизация категорий фильмов...",
+            "XTREAM_SYNCING_SERIES": "Синхронизация категорий сериалов...",
+            "XTREAM_SYNCING_LIVE": "Синхронизация категорий ТВ...",
+            "XTREAM_SOURCE": "Xtream источник",
+            "STALKER_PORTAL": "Портал Stalker",
+            "MANAGE_CATEGORIES": "Управлять категориями",
+            "LOAD_CATEGORIES_ERROR": "Не удалось загрузить категории",
+            "LOAD_CATEGORIES_ERROR_HINT": "Повторите попытку или проверьте настройки портала.",
+            "FILTER_BY_TYPE": "Фильтр по типу",
+            "ITEM_COUNT_ONE": "1 элемент",
+            "ITEM_COUNT_OTHER": "{{count}} элементов",
+            "SEARCH": "Поиск",
+            "SEARCH_CATEGORIES": "Поиск категорий"
+        },
+        "COMMAND_PALETTE": {
+            "TITLE": "Палитра команд",
+            "SUBTITLE": "Глобальные и контекстные действия",
+            "SEARCH_PLACEHOLDER": "Введите текст для фильтрации команд",
+            "SEARCH_LABEL": "Фильтровать команды",
+            "EMPTY": "Команды не найдены",
+            "GROUP_GLOBAL": "Глобальные действия",
+            "GROUP_PLAYLIST": "Этот плейлист",
+            "GROUP_VIEW": "Текущее представление",
+            "GROUP_SECTION": "Этот раздел"
+        },
+        "GLOBAL_FAVORITES": {
+            "TITLE": "Глобальные избранные",
+            "SUBTITLE": "Live TV из всех плейлистов",
+            "SEARCH_PLACEHOLDER": "Поиск в избранном...",
+            "NO_RESULTS": "Ничего не найдено",
+            "NO_RESULTS_HINT": "Попробуйте другой поисковый запрос",
+            "EMPTY_TITLE": "Пока нет избранных телеканалов",
+            "EMPTY_HINT": "Добавляйте в избранное live-каналы из плейлистов M3U, Xtream или Stalker, чтобы они появились здесь.",
+            "EMPTY_PLAYER": "Выберите канал, чтобы начать просмотр",
+            "UNKNOWN_CHANNEL": "Неизвестно",
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    }
+}
diff --git a/apps/web/src/assets/i18n/tr.json b/apps/web/src/assets/i18n/tr.json
new file mode 100644
index 0000000..7226bce
--- /dev/null
+++ b/apps/web/src/assets/i18n/tr.json
@@ -0,0 +1,592 @@
+{
+    "CLOSE": "Kapat",
+    "PLAYLISTS": "Oynatma Listeleri",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "Lütfen listeden bir oynatma listesi seçin veya yeni bir liste ekleyin",
+        "TABS": {
+            "RECENTLY_ADDED": "Son Eklenen Listeler",
+            "FILE_UPLOAD": "Dosya Yükle",
+            "URL_UPLOAD": "URL ile Ekle",
+            "TEXT_IMPORT": "Metinden İçe Aktar",
+            "XTREME_IMPORT": "Xtreme Kodu Ekle",
+            "STALKER_PORTAL_IMPORT": "Stalker Portalı Ekle"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "Oynatma listesi eklenmedi",
+            "ADD_FIRST": "Lütfen ilk oynatma listenizi ekleyin",
+            "WELCOME_TITLE": "IPTVnator'a Hoş Geldiniz",
+            "WELCOME_DESCRIPTION": "İlk oynatma listenizi ekleyerek yayın yolculuğunuza başlayın. Favori IPTV hizmetinize bağlanın ve canlı TV, film ve dizilerin keyfini çıkarın.",
+            "ADD_YOUR_FIRST": "İlk Oynatma Listenizi Ekleyin",
+            "FEATURE_M3U": "M3U/M3U8 Dosyaları",
+            "FEATURE_XTREAM": "Xtream Kodları",
+            "FEATURE_STALKER": "Stalker Portalı",
+            "NO_RESULTS_TITLE": "Oynatma listesi bulunamadı",
+            "NO_RESULTS_DESCRIPTION": "Aramanızla eşleşen oynatma listesi yok. Arama terimlerinizi değiştirmeyi deneyin veya tüm oynatma listelerini görmek için filtreyi temizleyin.",
+            "ADDED_VIA_URL": "URL yüklemesi ile eklendi. URL:",
+            "ADDED_VIA_FILE": "Dosya yüklemesi ile eklendi",
+            "XTREAM_PLAYLIST": "Xtream oynatma listesi",
+            "STALKER_PORTAL": "Stalker portalı",
+            "CHANNELS": "Kanallar",
+            "ADDED": "Eklendi",
+            "SHOW_DETAILS": "Oynatma listesi ayrıntılarını göster",
+            "REMOVE": "Oynatma listesini kaldır",
+            "SEARCH_PLAYLISTS": "Oynatma listelerini başlığa göre ara",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "Oynatma Listesi Ayrıntıları",
+                "TITLE": "Başlık",
+                "FROM_URL": "URL'den Eklendi",
+                "IMPORT_DATE": "İçe Aktarma Tarihi",
+                "CHANNELS": "Kanal Sayısı",
+                "CLOSE": "Kapat",
+                "SAVE": "Kaydet",
+                "USER_AGENT": "Kullanıcı Aracısı",
+                "ORIGINAL_FILENAME": "Orijinal Dosya Adı",
+                "FILE_PATH": "Dosya Yolu",
+                "UPDATE_FAILED": "Son oynatma listesi güncellemesi başarısız oldu",
+                "AUTO_UPDATE": "Otomatik Güncelleme",
+                "AUTO_UPDATE_DESCRIPTION": "Otomatik yenileme işlevi etkinleştirilirse, uygulama her başlatıldığında oynatma listesi otomatik olarak güncellenecektir.",
+                "CUSTOM_USER_AGENT": "Bazı IPTV sağlayıcıları, oynatma listelerini oynatmak için belirli bir kullanıcı aracısına ihtiyaç duyar.",
+                "EXPORT_PLAYLIST": "Oynatma listesini m3u olarak dışa aktar",
+                "SERVER_URL": "Sunucu URL'si",
+                "USERNAME": "Kullanıcı Adı",
+                "PASSWORD": "Parola",
+                "MAC_ADDRESS": "MAC Adresi",
+                "PLAYLIST_EXPORT_SUCCESS": "Oynatma listesi başarıyla dışa aktarıldı.",
+                "PLAYLIST_EXPORT_ERROR": "Hata: Oynatma listesi dışa aktarılamadı.",
+                "COPY_URL": "URL'yi panoya kopyala",
+                "URL_COPIED": "URL panoya kopyalandı"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "Oynatma Listesini Kaldır",
+                "MESSAGE": "Bu oynatma listesini tamamen silmek istediğinizden emin misiniz?",
+                "SUCCESS": "Oynatma listesi başarıyla kaldırıldı"
+            },
+            "UPDATED": "Güncellendi",
+            "REFRESH": "Oynatma listesini yenile",
+            "REFRESH_XTREAM": "Xtream oynatma listesini uzaktan yenile",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "Xtream Oynatma Listesini Yenile",
+                "MESSAGE": "Bu işlem yerel olarak önbelleğe alınmış kategorileri ve yayınları silecek ve her şeyi uzaktan sunucudan yeniden içe aktaracaktır. Favorileriniz ve son izlenen öğeleriniz korunacaktır. Devam etmek istediğinizden emin misiniz?",
+                "STARTED": "Yenileme başladı. Oynatma listesine gidiliyor...",
+                "ERROR": "Oynatma listesi yenilenemedi. Lütfen tekrar deneyin."
+            },
+            "GLOBAL_FAVORITES": "Tüm Favoriler",
+            "GLOBAL_FAVORITES_DESCRIPTION": "Tüm oynatma listelerinden oluşan otomatik favori liste",
+            "MY_PLAYLISTS": "Oynatma Listelerim",
+            "MY_PLAYLISTS_SUBTITLE": "tüm oynatma listeleri",
+            "PLAYLIST_UPDATE_SUCCESS": "Başarılı! Oynatma listesi başarıyla güncellendi.",
+            "PLAYLIST_UPDATE_ERROR": "Oynatma listesi ayrıntıları güncellenirken hata oluştu.",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "Başarılı! Oynatma listeleri başarıyla güncellendi",
+            "AUTO_REFRESH_ENABLED": "Otomatik yenileme etkin",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "Dosyaları buraya sürükleyip bırakın",
+            "OR": "veya",
+            "CHOOSE_PLAYLIST": "oynatma listesi seçin",
+            "REJECTED": "Dosya reddedildi, desteklenmeyen dosya formatı {{filename}}."
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "Oynatma listesi URL'si (m3u, m3u8)",
+            "ADD_PLAYLIST": "Oynatma listesi ekle",
+            "CORS_NOTE": "Not: CORS sorunlarını önlemek için bu aşamada uygulama, halka açık bir CORS Proxy hizmeti kullanır. Güvenlik nedeniyle hassas verileri içeren bir oynatma listesini yüklemek istiyorsanız, daha güvenli bir seçenek olarak dosyadan içe aktarmayı deneyin."
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "m3u(8) oynatma listesini metin olarak girin",
+            "BUTTON_LABEL": "İçe Aktar"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "Oynatma listesi başlığı",
+            "SERVER_URL": "Sunucu URL'si",
+            "USERNAME": "Kullanıcı Adı",
+            "PASSWORD": "Parola",
+            "ADD": "Ekle",
+            "TEST_CREDENTIALS": "Kimlik bilgilerini test et",
+            "URL_VALIDATION_ERROR": "Geçerli bir URL olmalıdır (örn. http://example.com veya https://example.com:4324)"
+        },
+        "STALKER_PORTAL": {
+            "TITLE": "Başlık",
+            "MAC_ADDRESS": "MAC Adresi",
+            "SERIAL_NUMBER": "Seri Numarası (İsteğe Bağlı)",
+            "SERIAL_NUMBER_HINT": "Sağlayıcıya zaten kayıtlıysa kullanın",
+            "DEVICE_ID_1": "Cihaz Kimliği 1 (İsteğe Bağlı)",
+            "DEVICE_ID_2": "Cihaz Kimliği 2 (İsteğe Bağlı)",
+            "DEVICE_ID_HINT": "64 onaltılık karakter - sağlayıcı belirli bir cihaz kimliği gerektiriyorsa kullanın",
+            "SIGNATURE_1": "İmza 1 (İsteğe Bağlı)",
+            "SIGNATURE_2": "İmza 2 (İsteğe Bağlı)",
+            "SIGNATURE_HINT": "64 onaltılık karakter - sağlayıcı cihaz doğrulama imzaları gerektiriyorsa kullanın",
+            "SERVER_URL": "Sunucu URL'si",
+            "URL_VALIDATION_ERROR": "Geçerli bir URL olmalıdır (örn. http://example.com/c veya https://example.com/stalker_portal/c)",
+            "ADD": "Ekle",
+            "VALIDATING": "Portal doğrulanıyor..."
+        },
+        "FILTER_BY_NAME": "İsime göre filtrele",
+        "FILTER_BY_TYPE": "Türe göre filtrele",
+        "FILTER_AND_SORT": "Filtrele ve Sırala",
+        "SORT_PLAYLISTS": "Oynatma listelerini sırala",
+        "SORT_BY": "Sıralama ölçütü",
+        "SORT_OPTIONS": {
+            "NAME_ASC": "İsim (A-Z)",
+            "NAME_DESC": "İsim (Z-A)",
+            "NEWEST": "Eklenme tarihi (En yeni önce)",
+            "OLDEST": "Eklenme tarihi (En eski önce)",
+            "CUSTOM_ORDER": "Özel sıralama (Sürükle ve Bırak)"
+        },
+        "PLAYLIST_TYPES": {
+            "M3U": "M3U (yerel, url, metin)",
+            "XTREAM": "Xtream",
+            "STALKER": "Stalker"
+        },
+        "IMPORTED_AS_TEXT": "Metin olarak içe aktarıldı",
+        "PARSING_ERROR": "Hata: Ayrıştırma başarısız, geçerli bir oynatma listesi değil:"
+    },
+    "SETTINGS": {
+        "TITLE": "Ayarlar",
+        "SUBTITLE": "Uygulamanın yapılandırmasını değiştir",
+        "DESCRIPTION": "Lütfen aşağıdaki seçenekleri düzenleyin ve değişiklikleri kaydet düğmesiyle onaylayın",
+        "EPG_URL_LABEL": "EPG Url (*.xml veya *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "URL girin",
+        "REFRESH_EPG": "EPG'yi yenile",
+        "REFRESH_ALL_EPG": "Tümünü yenile",
+        "REMOVE_EPG_SOURCE": "EPG kaynağını kaldır",
+        "EPG_STATUS_FRESH": "Güncel",
+        "EPG_STATUS_STALE": "Yenilenmeli",
+        "EPG_STATUS_ERROR": "Başarısız",
+        "VIDEO_PLAYER_LABEL": "Video oynatıcı",
+        "VIDEO_PLAYER_PLACEHOLDER": "Bir seçenek belirleyin",
+        "VERSION": "Sürüm",
+        "SAVE_CHANGES": "Değişiklikleri kaydet",
+        "BACK_TO_HOME": "Ana sayfaya dön",
+        "NEW_VERSION_AVAILABLE": "Yeni bir sürüm mevcut",
+        "LATEST_VERSION": "En son sürümü kullanıyorsunuz",
+        "STREAM_FORMAT": "Yayın Formatı",
+        "LANGUAGE": "Dil",
+        "SETTINGS_SAVED": "Başarılı! Yapılandırma kaydedildi.",
+        "THEME": "Görünüm teması",
+        "SHOW_CAPTIONS": "Altyazıları göster",
+        "ADD_EPG_SOURCE": "EPG kaynağı ekle",
+        "CLEAR_EPG_DATA": "EPG verilerini temizle",
+        "CLEAR_EPG_DIALOG": {
+            "TITLE": "EPG verilerini temizle",
+            "MESSAGE": "Tüm EPG (Elektronik Program Rehberi) verilerini veritabanından silmek istediğinizden emin misiniz? Bu işlem, önbelleğe alınmış tüm program çizelgelerini silecektir."
+        },
+        "EPG_DATA_CLEARED": "EPG verileri temizlendi",
+        "EPG_DATA_CLEAR_FAILED": "EPG verileri temizlenemedi. Lütfen tekrar deneyin.",
+        "CLEARING_EPG_DATA": "Temizleniyor…",
+        "EPG_URL_ERROR": "Girilen değer geçerli bir URL değildir",
+        "VIDEO_PLAYER_DESCRIPTION": "Varsayılan video oynatıcıyı seçin",
+        "STREAM_FORMAT_DESCRIPTION": "Varsayılan yayın formatını seçin (xtream)",
+        "LANGUAGE_DESCRIPTION": "Uygulamanın dilini seçin",
+        "THEME_DESCRIPTION": "Uygulamanın görünüm temasını seçin",
+        "SHOW_CAPTIONS_DESCRIPTION": "Varsayılan olarak altyazıları göster veya gizle",
+        "VERSION_DESCRIPTION": "Uygulamanın geçerli sürümü",
+        "EPG_NOTE": "Şu anda EPG, yalnızca Electron tabanlı IPTVnator sürümünde kullanılabilir.",
+        "EPG_NOTE_URL_TEXT": "Buradan kontrol edin",
+        "IMPORT_EXPORT_DATA": "Oynatma listelerini içe/dışa aktar",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "Uygulama içi kullanılan JSON formatında oynatma listelerini dışa aktar veya içe aktar.",
+        "IMPORT_DATA": "İçe Aktar",
+        "EXPORT_DATA": "Dışa Aktar",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "İçe aktarma hatası, lütfen başka bir dosyayla deneyin.",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "mpv yolu",
+        "MPV_PLAYER_PATH_DESCRIPTION": "Sisteminizdeki mpv oynatıcı yolunu ayarlayın. $PATH'de bulunanı kullanmak yerine, sağlanan mpv ikili dosyası yolunu kullanacaktır.",
+        "MPV_PLAYER_PATH": "mpv oynatıcı yolu",
+        "MPV_REUSE_INSTANCE_LABEL": "MPV örneğini yeniden kullan",
+        "MPV_REUSE_INSTANCE_DESCRIPTION": "Etkinleştirildiğinde, farklı yayınları oynatmak için aynı MPV penceresi yeniden kullanılır. Devre dışı bırakıldığında, her yayın yeni bir MPV penceresinde açılır.",
+        "VLC_PLAYER_PATH_LABEL": "VLC yolu",
+        "VLC_PLAYER_PATH_DESCRIPTION": "Sisteminizdeki VLC oynatıcı yolunu ayarlayın. Sistemimiz için varsayılan yolu kullanmak yerine, sağlanan VLC ikili dosyası yolunu kullanacaktır.",
+        "VLC_PLAYER_PATH": "VLC oynatıcı yolu",
+        "REMOTE_CONTROL": "Uzaktan kontrol",
+        "REMOTE_CONTROL_DESCRIPTION": "Uygulamanın uzaktan kontrolünü etkinleştirin.",
+        "REMOTE_CONTROL_PORT": "Uzaktan kontrol portu",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "Uygulamanın uzaktan kontrolü için kullanılan port. Varsayılan olarak port 8765 kullanılır.",
+        "REMOTE_CONTROL_URL": "Uzaktan kontrol URL'si",
+        "REMOTE_CONTROL_URL_DESCRIPTION": "Aynı ağdaki başka bir cihazdan uzaktan kontrole erişin.",
+        "SHOW_QR_CODE": "QR kodunu göster",
+        "PORT_REQUIRED": "Port gereklidir",
+        "PORT_MIN": "Port en az 1 olmalıdır",
+        "PORT_MAX": "Port en fazla 65535 olmalıdır",
+        "PORT_PATTERN": "Sadece rakamlara izin verilir",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "Koyu tema",
+        "LIGHT_THEME": "Açık tema",
+        "SYSTEM_THEME": "Sistem teması"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "Kanal ara",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "Dosya yükle veya başka bir oynatma listesi seçin",
+        "ALL_CHANNELS": "Tüm kanallar",
+        "GROUPS": "Gruplar",
+        "UNGROUPED": "Grupsuz",
+        "UNNAMED_CHANNEL": "İsimsiz kanal",
+        "FAVORITES": "Favoriler",
+        "NO_FAVORITES": "Henüz favori yok",
+        "USE_STAR_TO_FAVORITE": "Lütfen favorilere kanal eklemek için 'yıldız' simgesini kullanın.",
+        "REMOVE_FAVORITE": "Favorilerden kaldır",
+        "ADD_FAVORITE": "Favorilere ekle",
+        "FAVORITES_UPDATED": "Favoriler güncellendi!",
+        "SORT_BY": "Sırala",
+        "SORT_BY_DATE": "Eklenme tarihine göre sırala (Önce En Yeni)",
+        "SORT_BY_RATING": "Puana göre sırala",
+        "SORT_BY_NAME": "İsme göre sırala (A-Z)",
+        "LOAD_MORE": "Daha fazla yükle",
+        "REMAINING": "kalan",
+        "LOADING": "Kanallar yükleniyor...",
+        "LOADING_MORE": "Daha fazla yükleniyor...",
+        "NO_SEARCH_RESULTS": "Kanal bulunamadı",
+        "TRY_DIFFERENT_SEARCH": "Farklı bir arama terimi deneyin"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "Kanal listesini aç",
+        "TOGGLE_FAVORITE_FLAG": "Favori işaretini değiştir",
+        "OPEN_EPG_LIST": "EPG listesini aç",
+        "OPEN_MULTI_EPG": "Çoklu EPG görünümünü aç",
+        "SHOW_INFO": "Program bilgisini göster (I tuşuna basın)"
+    },
+    "EPG": {
+        "TITLE": "Elektronik Program Rehberi",
+        "NEXT_DAY": "Sonraki gün",
+        "PREVIOUS_DAY": "Önceki gün",
+        "LIVE_NOW": "Şu an canlı",
+        "LIVE_STREAM": "Canlı yayın",
+        "TIMESHIFT_AVAILABLE": "Zaman kaydırma mevcut, tıklayarak oynat",
+        "EPG_NOT_AVAILABLE_DATE": "Üzgünüz, seçilen tarih için EPG mevcut değil",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Üzgünüz, bu kanal için EPG mevcut değil.",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Lütfen uygulamanın ayarlarında EPG listesi URL'sini ekleyin veya değiştirin.",
+        "FETCH_EPG": "EPG verileri alınıyor...",
+        "ERROR": "Üzgünüz, EPG yüklenemedi.",
+        "DOWNLOAD_SUCCESS": "EPG başarıyla indirildi.",
+        "NO_PROGRAM_INFO": "Program bilgisi mevcut değil",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "TV programı hakkında",
+            "TITLE": "Başlık",
+            "CATEGORY": "Kategori",
+            "PARENTAL_RATING_SYSTEM": "Televizyon içeriği derecelendirme sistemi",
+            "DESCRIPTION": "Açıklama",
+            "LANGUAGE": "Dil",
+            "SHOW_PROGRAM_DETAILS": "Bu program hakkında detayları göster",
+            "EPISODE": "Bölüm",
+            "DURATION": "Süre"
+        },
+        "FETCH_SUCCESS": "EPG verileri başarıyla alındı",
+        "IMPORT_PROGRESS": "EPG İçe Aktarımı",
+        "CHANNELS": "kanallar",
+        "PROGRAMS": "programlar",
+        "LOADING": "Yükleniyor",
+        "QUEUED": "Sırada",
+        "TOTAL_CHANNELS": "Toplam kanal",
+        "TOTAL_PROGRAMS": "Toplam program",
+        "UP_TO_DATE": "EPG güncel, senkronizasyona gerek yok",
+        "RETRY": "Tekrar Dene"
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "Evet",
+    "NO": "Hayır",
+    "MENU": {
+        "OPEN": "Menüyü aç",
+        "SUPPORT_ARIA": "IPTVnator'u GitHub'da destekleyin",
+        "SETTINGS": "Ayarlar",
+        "SETTINGS_ARIA": "Ayarları aç",
+        "BUG_REPORT": "Hata bildir",
+        "WHAT_IS_NEW": "Yeni ne var?",
+        "ABOUT": "Hakkında",
+        "ABOUT_ARIA": "Uygulama hakkında",
+        "SUPPORT_PROJECT": "Projeyi destekleyin"
+    },
+    "ABOUT": {
+        "TITLE": "IPTVnator Hakkında",
+        "DESCRIPTION": "Çoklu özellikler sunan, m3u ve m3u8 oynatma listeleri, favoriler, TV rehberi, TV arşivi/geri dönük izleme ve daha fazlasını destekleyen çok platformlu IPTV oynatıcı uygulaması.",
+        "VERSION": "Sürüm",
+        "GITHUB_TOOLTIP": "IPTVnator GitHub deposu",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Bana bir kahve alın",
+        "TWITTER_TOOLTIP": "Twitter'da paylaş"
+    },
+    "UPDATE_AVAILABLE": "Güncelleme mevcut",
+    "REFRESH": "Yenile",
+    "XTREAM": {
+        "PLAY": "Oynat",
+        "OPENING_PLAYER": "Oynatıcı açılıyor...",
+        "NAME": "İsim",
+        "RELEASE_DATE": "Çıkış tarihi",
+        "GENRE": "Tür",
+        "COUNTRY": "Ülke",
+        "ACTORS": "Oyuncular",
+        "DIRECTOR": "Yönetmen",
+        "DURATION": "Süre",
+        "CAST": "Oyuncular",
+        "EPISODE_RUN_TIME": "Bölüm süresi",
+        "RATING": "Değerlendirme",
+        "IMDB_RATING": "IMDB derecelendirmesi",
+        "KINOPOISK_RATING": "Kinopoisk derecelendirmesi",
+        "DESCRIPTION": "Açıklama",
+        "YEAR": "Yıl",
+        "AGE": "Yaş",
+        "YOUTUBE_TRAILER": "YouTube fragmanı",
+        "EPISODE": "Bölüm",
+        "RESUME": "Devam Et",
+        "RESTART": "Baştan Başla",
+        "CONTINUE_WATCHING": "İzlemeye Devam Et",
+        "WATCHED": "İzlendi",
+        "IN_PROGRESS": "Devam Ediyor",
+        "MARK_WATCHED": "İzlendi Olarak İşaretle",
+        "MARK_UNWATCHED": "İzlenmedi Olarak İşaretle",
+        "EPISODES_WATCHED": "{{total}} bölümden {{count}} tanesi izlendi",
+        "ACCOUNT_INFO": {
+            "TITLE": "Hesap Bilgileri",
+            "USER_INFO": "Kullanıcı Bilgileri",
+            "STATUS": "Durum",
+            "USERNAME": "Kullanıcı Adı",
+            "ACTIVE_CONNECTIONS": "Aktif Bağlantılar",
+            "CREATED": "Oluşturuldu",
+            "EXPIRES": "Sona Eriyor",
+            "TRIAL_ACCOUNT": "Deneme Hesabı",
+            "YES": "Evet",
+            "NO": "Hayır",
+            "ALLOWED_FORMATS": "İzin Verilen Formatlar",
+            "SERVER_INFO": "Sunucu Bilgileri",
+            "LIVE_TV": "Canlı TV",
+            "MOVIES": "Filmler",
+            "TV_SERIES": "TV Dizileri",
+            "URL": "URL",
+            "PROTOCOL": "Protokol",
+            "TIMEZONE": "Saat Dilimi",
+            "SERVER_TIME": "Sunucu Saati",
+            "PORTS": "Portlar",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        },
+        "CATEGORY_MANAGEMENT": {
+            "TITLE": "Kategorileri Yönet",
+            "LOADING": "Kategoriler yükleniyor...",
+            "SELECTED": "Seçildi",
+            "SELECT_ALL": "Tümünü Seç",
+            "DESELECT_ALL": "Tümünü Kaldır",
+            "SEARCH_PLACEHOLDER": "Kategorileri ara...",
+            "NO_RESULTS": "Eşleşen kategori bulunamadı",
+            "NO_CATEGORIES": "Kategori mevcut değil",
+            "SAVE": "Kaydet"
+        }
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "Tüm kategoriler",
+        "MY_FAVORITES": "Favorilerim",
+        "ADD_TO_FAVORITES": "Favorilere ekle",
+        "REMOVE_FROM_FAVORITES": "Favorilerden kaldır",
+        "REMOVED_FROM_FAVORITES": "Favorilerden kaldırıldı",
+        "ADDED_TO_FAVORITES": "Favorilere eklendi",
+        "SIDEBAR": {
+            "MAIN": "Ana Menü",
+            "MOVIES": "Filmler",
+            "LIVE_TV": "Canlı TV",
+            "SERIES": "Diziler",
+            "LIBRARY": "Kütüphane",
+            "SEARCH": "Ara",
+            "RECENT": "Son İzlenenler",
+            "RECENTLY_ADDED": "Yeni Eklenenler",
+            "FAVORITES": "Favoriler",
+            "HOME": "Ana Sayfa",
+            "PLAYLIST_INFO": "Oynatma Listesi Bilgisi",
+            "ACCOUNT_INFO": "Hesap Bilgisi"
+        },
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Hesap süresi doldu",
+                "DESCRIPTION": "Bu hesabın süresi doldu. Lütfen oynatma listesi ayarlarındaki kimlik bilgilerini kontrol edin veya kaldırın."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Yetkisiz",
+                "DESCRIPTION": "Lütfen oynatma listesi ayarlarındaki kimlik bilgilerini kontrol edin veya kaldırın."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal bulunamadı",
+                "DESCRIPTION": "Lütfen oynatma listesi ayarlarındaki kimlik bilgilerini ve portal url'sini kontrol edin veya kaldırın."
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "Boş kategori",
+                "DESCRIPTION": "Bu kategoride içerik yok, lütfen başka bir kategori seçin veya içerik türünü değiştirin"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "Bir şeyler ters gitti",
+                "DESCRIPTION": "Bilinmeyen hata, lütfen daha sonra tekrar deneyin"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "Kategori seçilmedi",
+                "DESCRIPTION": "İçeriği görmek için lütfen bir kategori seçin"
+            },
+            "PLAYLIST_SETTINGS": "Oynatma Listesi Ayarları",
+            "HOME": "Ana Sayfa",
+            "DELETE": "Sil"
+        },
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "Sonuç bulunamadı",
+            "NO_SEARCH_RESULTS": "Arama sonuçları yok, lütfen arama talebinizi değiştirin"
+        },
+        "SEARCH_VIEW": {
+            "INITIAL_TITLE": "İçerik ara",
+            "INITIAL_DESCRIPTION": "Canlı TV, filmler ve diziler arasında arama yapmak için en az 3 karakter girin.",
+            "RESULTS_FOUND": "{{count}} sonuç bulundu",
+            "NO_RESULTS_FOR": "\"{{term}}\" için sonuç bulunamadı",
+            "GROUP_BY_PLAYLIST": "Sonuçları oynatma listesine göre grupla",
+            "XTREAM_ONLY_NOTE": "Küresel arama şu anda sadece Xtream oynatma listeleri için mevcuttur.",
+            "VISIBLE_CATEGORIES_ONLY": "Sadece görünür kategoriler"
+        },
+        "STREAM_URL_COPIED": "Yayın URL'si panoya kopyalandı",
+        "COPY_STREAM_URL": "Yayın URL'sini kopyala",
+        "SELECT_CATEGORY": "Bir kategori seçin",
+        "PAGE": "Sayfa",
+        "CONTENT_NOT_AVAILABLE": "Bu içerik bu sunucuda mevcut değil",
+        "PLAYBACK_ERROR": "Oynatma URL'si alınamadı",
+        "LOADING_SEASONS": "Sezonlar yükleniyor...",
+        "NO_EPISODES": "Bölüm mevcut değil"
+    },
+    "INFORMATION": "Bilgi",
+    "DOWNLOADS": {
+        "TITLE": "İndirilenler",
+        "DOWNLOAD": "İndir",
+        "PLAY_LOCAL": "Yerel Oynat",
+        "EMPTY": "Henüz indirme yok",
+        "EMPTY_HINT": "Çevrimdışı izlemek için film ve dizileri indirin",
+        "NOT_AVAILABLE": "İndirme mevcut değil",
+        "DESKTOP_ONLY": "Bu özellik sadece masaüstü uygulamasında mevcuttur",
+        "NO_FOLDER": "İndirme klasörü seçilmedi",
+        "CHANGE_FOLDER": "Klasörü Değiştir",
+        "CLEAR_COMPLETED": "Tamamlananları Temizle",
+        "CANCEL": "İptal",
+        "RETRY": "Tekrar Dene",
+        "REMOVE": "Kaldır",
+        "PLAY": "Oynat",
+        "REVEAL": "Klasörde Göster",
+        "STATUS": {
+            "QUEUED": "Sırada",
+            "DOWNLOADING": "İndiriliyor",
+            "COMPLETED": "Tamamlandı",
+            "FAILED": "Başarısız",
+            "CANCELED": "İptal Edildi"
+        },
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    },
+    "REMOTE_CONTROL": {
+        "TITLE": "Uzaktan kontrol",
+        "SUBTITLE": "IPTV oynatıcınızı uzaktan kontrol edin",
+        "UP_CHANNEL": "Kanal yukarı",
+        "DOWN_CHANNEL": "Kanal aşağı",
+        "HEADER": "IPTVNator Uzaktan Kontrol",
+        "FOOTER": "IPTVNator Uzaktan Kontrol"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    }
+}
diff --git a/apps/web/src/assets/i18n/zh.json b/apps/web/src/assets/i18n/zh.json
new file mode 100644
index 0000000..553a6cb
--- /dev/null
+++ b/apps/web/src/assets/i18n/zh.json
@@ -0,0 +1,356 @@
+{
+    "CLOSE": "关闭",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "选择一个播放列表或者从URL/文件中添加一个新的播放列表",
+        "TABS": {
+            "RECENTLY_ADDED": "最近添加的播放列表",
+            "FILE_UPLOAD": "从文件添加",
+            "URL_UPLOAD": "从URL链接添加",
+            "TEXT_IMPORT": "从文本添加",
+            "STALKER_PORTAL_IMPORT": "添加跟踪者门户"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "未添加播放列表",
+            "ADD_FIRST": "从其他标签页添加你的第一个播放列表",
+            "ADDED_VIA_URL": "添加自URL链接:",
+            "ADDED_VIA_FILE": "添加自文件",
+            "CHANNELS": "频道",
+            "ADDED": "已添加的",
+            "SHOW_DETAILS": "显示播放列表详情",
+            "REMOVE": "移除播放列表",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "播放列表详情",
+                "TITLE": "标题",
+                "FROM_URL": "添加自URL链接",
+                "IMPORT_DATE": "导入日期",
+                "CHANNELS": "频道数",
+                "CLOSE": "关闭",
+                "SAVE": "保存",
+                "USER_AGENT": "User agent",
+                "ORIGINAL_FILENAME": "原始文件名",
+                "FILE_PATH": "文件路径",
+                "UPDATE_FAILED": "上次播放列表更新失败",
+                "AUTO_UPDATE": "自动更新",
+                "AUTO_UPDATE_DESCRIPTION": "如果启用了自动刷新功能，则每次启动应用程序时都会自动更新播放列表。",
+                "CUSTOM_USER_AGENT": "一些 IPTV 提供商需要特定的用户代理才能播放他们的播放列表。",
+                "PASSWORD": "密码",
+                "SERVER_URL": "服务器地址",
+                "USERNAME": "用户名",
+                "MAC_ADDRESS": "MAC地址"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "移除播放列表",
+                "MESSAGE": "您确定要完全删除此播放列表吗？"
+            },
+            "UPDATED": "更新",
+            "REFRESH": "刷新播放列表",
+            "GLOBAL_FAVORITES": "我的收藏",
+            "GLOBAL_FAVORITES_DESCRIPTION": "由所有播放列表自动生成的聚合收藏列表",
+            "MY_PLAYLISTS": "我的播放列表",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "将文件拖放到此处",
+            "OR": "或",
+            "CHOOSE_PLAYLIST": "选择一个播放列表"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "播放一个播放列表(m3u, m3u8)",
+            "ADD_PLAYLIST": "添加播放列表"
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "从文本导入播放列表(m3u, m3u8)",
+            "BUTTON_LABEL": "导入"
+        },
+        "STALKER_PORTAL": {
+            "ADD": "添加",
+            "TITLE": "标题",
+            "URL_VALIDATION_ERROR": "应该是带有协议的有效网址（例如 http://example.com/c 或 https://example.com/stalker_portal/c）"
+        },
+        "XTREAM_PLAYLIST": {
+            "URL_VALIDATION_ERROR": "应该是带有协议的有效 url（例如 http://example.com 或 https://example.com:4324）"
+        }
+    },
+    "SETTINGS": {
+        "TITLE": "设置",
+        "SUBTITLE": "更改应用程序的配置 ",
+        "DESCRIPTION": "请调整以下列表中的选项并使用保存按钮确认",
+        "EPG_URL_LABEL": "电子节目单EPG Url (*.xml 或 *.xml.gz)",
+        "EPG_URL_PLACEHOLDER": "输入一个 URL",
+        "REFRESH_EPG": "刷新电子节目单EPG",
+        "REFRESH_ALL_EPG": "全部刷新",
+        "REMOVE_EPG_SOURCE": "移除 EPG 源",
+        "EPG_STATUS_FRESH": "已更新",
+        "EPG_STATUS_STALE": "需要刷新",
+        "EPG_STATUS_ERROR": "失败",
+        "VIDEO_PLAYER_LABEL": "视频播放器",
+        "VIDEO_PLAYER_PLACEHOLDER": "选择一个选项",
+        "VERSION": "版本",
+        "SAVE_CHANGES": "保存更改",
+        "BACK_TO_HOME": "回到主页",
+        "NEW_VERSION_AVAILABLE": "有新版本可用 ",
+        "LATEST_VERSION": "您使用的是最新版本",
+        "LANGUAGE": "语言",
+        "SETTINGS_SAVED": "配置已成功保存",
+        "THEME": "主题",
+        "SHOW_CAPTIONS": "显示字幕",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "LANGUAGE_DESCRIPTION": "选择应用程序的语言",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "VERSION_DESCRIPTION": "应用程序的当前版本",
+        "IMPORT_DATA": "进口",
+        "ADD_EPG_SOURCE": "添加EPG源",
+        "IMPORT_ERROR": "导入错误，请尝试使用其他文件。",
+        "EPG_URL_ERROR": "该值不是有效的 URL",
+        "EXPORT_DATA": "出口",
+        "VIDEO_PLAYER_DESCRIPTION": "选择默认视频播放器",
+        "IMPORT_EXPORT_DATA": "导入/导出播放列表",
+        "VLC_PLAYER_PATH_LABEL": "VLC路径",
+        "VLC_PLAYER_PATH_DESCRIPTION": "设置系统中 VLC 播放器的路径。\n它将使用提供的 VLC 二进制文件路径，而不是我们系统的默认路径。",
+        "THEME_DESCRIPTION": "选择应用程序的视觉主题",
+        "EPG_NOTE": "目前 EPG 仅在基于电子的 IPTVnator 版本中可用。",
+        "VLC_PLAYER_PATH": "VLC播放器路径",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "以应用程序中使用的 JSON 格式导出或导入播放列表。",
+        "EPG_NOTE_URL_TEXT": "在这里检查一下",
+        "MPV_PLAYER_PATH_LABEL": "多用途车路径",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "暗黑模式",
+        "LIGHT_THEME": "明亮模式",
+        "SYSTEM_THEME": "跟随系统"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "搜索频道",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "上传或选择其他播放列表",
+        "ALL_CHANNELS": "所有频道",
+        "GROUPS": "分组",
+        "UNGROUPED": "未分组",
+        "UNNAMED_CHANNEL": "未命名频道",
+        "FAVORITES": "收藏",
+        "NO_FAVORITES": "还没有收藏夹",
+        "USE_STAR_TO_FAVORITE": "使用“☆”图标将频道添加到此列表中",
+        "REMOVE_FAVORITE": "从收藏夹中删除",
+        "FAVORITES_UPDATED": "收藏夹已更新！"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "打开频道列表",
+        "TOGGLE_FAVORITE_FLAG": "切换收藏夹标志",
+        "OPEN_EPG_LIST": "打开电子节目单EPG列表",
+        "OPEN_MULTI_EPG": "打开多EPG显示"
+    },
+    "EPG": {
+        "NEXT_DAY": "明天",
+        "PREVIOUS_DAY": "昨天",
+        "LIVE_NOW": "正在播放",
+        "LIVE_STREAM": "正在直播",
+        "TIMESHIFT_AVAILABLE": "时移功能可用，点击播放",
+        "EPG_NOT_AVAILABLE_DATE": "错误：电子节目单EPG在所选日期不可用",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "错误：电子节目单EPG不适用于此频道",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "请添加/更改设置项中电子节目单的URL",
+        "FETCH_EPG": "获取 EPG 数据...",
+        "ERROR": "错误: 获取 EPG 数据失败",
+        "DOWNLOAD_SUCCESS": "EPG 数据下载成功",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "电视节目详情",
+            "TITLE": "标题",
+            "CATEGORY": "类别",
+            "PARENTAL_RATING_SYSTEM": "电视内容分级系统",
+            "DESCRIPTION": "描述",
+            "LANGUAGE": "语言",
+            "SHOW_PROGRAM_DETAILS": "显示有关此程序的详细信息"
+        }
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "是",
+    "NO": "否",
+    "MENU": {
+        "OPEN": "打开菜单",
+        "SUPPORT_ARIA": "在 GitHub 上支持 IPTVnator",
+        "SETTINGS": "设置",
+        "SETTINGS_ARIA": "打开设置",
+        "BUG_REPORT": "问题反馈",
+        "WHAT_IS_NEW": "更新日志",
+        "ABOUT": "关于",
+        "ABOUT_ARIA": "关于应用",
+        "SUPPORT_PROJECT": "支持项目"
+    },
+    "XTREAM": {
+        "RELEASE_DATE": "发布日期",
+        "ACTORS": "演员",
+        "PLAY": "玩",
+        "GENRE": "类型",
+        "DURATION": "期间",
+        "COUNTRY": "国家",
+        "NAME": "姓名",
+        "DIRECTOR": "导演",
+        "CAST": "投掷",
+        "RATING": "评分",
+        "AGE": "年龄",
+        "EPISODE": "插曲",
+        "YEAR": "年",
+        "YOUTUBE_TRAILER": "YouTube 预告片",
+        "DESCRIPTION": "描述",
+        "KINOPOISK_RATING": "评级动力学",
+        "IMDB_RATING": "评级IMDB",
+        "EPISODE_RUN_TIME": "剧集运行时间"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "所有类别",
+        "ADD_TO_FAVORITES": "添加到收藏夹",
+        "REMOVE_FROM_FAVORITES": "从收藏夹中删除",
+        "MY_FAVORITES": "我最喜欢的",
+        "ERROR_VIEW": {
+            "DELETE": "删除",
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "帐户已过期",
+                "DESCRIPTION": "该帐户已过期。\n请检查播放列表设置中的凭据或将其删除。"
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "空类别",
+                "DESCRIPTION": "该类别没有内容，请选择其他类别或更改内容类型"
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "未经授权",
+                "DESCRIPTION": "请检查播放列表设置中的凭据或将其删除。"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "出了点问题",
+                "DESCRIPTION": "未知错误，请稍后重试"
+            },
+            "PLAYLIST_SETTINGS": "播放列表设置"
+        },
+        "EMPTY_LIST_VIEW": {
+            "NO_SEARCH_RESULTS": "未找到任何内容，请尝试更改您的搜索请求"
+        },
+        "REMOVED_FROM_FAVORITES": "已从收藏夹中删除",
+        "ADDED_TO_FAVORITES": "已添加至收藏夹",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "找到 {{count}} 条结果",
+            "NO_RESULTS_FOR": "未找到与“{{term}}”匹配的结果"
+        }
+    },
+    "ABOUT": {
+        "TITLE": "关于 IPTVnator",
+        "VERSION": "版本",
+        "TWITTER_TOOLTIP": "分享到Twitter",
+        "BUY_ME_A_COFFEE_TOOLTIP": "Buy me a coffee"
+    },
+    "REFRESH": "刷新",
+    "UPDATE_AVAILABLE": "可用更新",
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/i18n/zhtw.json b/apps/web/src/assets/i18n/zhtw.json
new file mode 100644
index 0000000..3fa6834
--- /dev/null
+++ b/apps/web/src/assets/i18n/zhtw.json
@@ -0,0 +1,438 @@
+{
+    "CLOSE": "關閉",
+    "PLAYLISTS": "播放清單",
+    "HOME": {
+        "TITLE": "IPTVnator",
+        "SUBTITLE": "請從列表中選擇一個播放清單，或透過檔案上傳或網址新增新播放清單",
+        "TABS": {
+            "RECENTLY_ADDED": "最近新增的播放清單",
+            "FILE_UPLOAD": "透過檔案上傳新增",
+            "URL_UPLOAD": "透過網址新增",
+            "TEXT_IMPORT": "以文字匯入",
+            "XTREME_IMPORT": "新增 Xtreme Code",
+            "STALKER_PORTAL_IMPORT": "新增 Stalker Portal"
+        },
+        "PLAYLISTS": {
+            "NO_PLAYLISTS": "尚未新增播放清單",
+            "ADD_FIRST": "請從其他分頁新增您的第一個播放清單",
+            "WELCOME_TITLE": "歡迎使用 IPTVnator",
+            "WELCOME_DESCRIPTION": "透過新增您的第一個播放清單開始串流之旅。連接您喜愛的 IPTV 服務，享受直播電視、電影和影集。",
+            "ADD_YOUR_FIRST": "新增您的第一個播放清單",
+            "FEATURE_M3U": "M3U/M3U8 檔案",
+            "FEATURE_XTREAM": "Xtream Codes",
+            "FEATURE_STALKER": "Stalker Portal",
+            "NO_RESULTS_TITLE": "找不到播放清單",
+            "NO_RESULTS_DESCRIPTION": "沒有符合您搜尋條件的播放清單。請嘗試調整搜尋詞或清除篩選條件以查看所有播放清單。",
+            "XTREAM_PLAYLIST": "Xtream 播放清單",
+            "STALKER_PORTAL": "Stalker Portal",
+            "ADDED_VIA_URL": "透過網址上傳。網址：",
+            "ADDED_VIA_FILE": "透過檔案上傳",
+            "CHANNELS": "頻道",
+            "ADDED": "已新增",
+            "SHOW_DETAILS": "顯示播放清單詳細資訊",
+            "REMOVE": "移除播放清單",
+            "INFO_DIALOG": {
+                "PLAYLIST_DETAILS": "播放清單詳細資訊",
+                "TITLE": "標題",
+                "FROM_URL": "來自網址",
+                "IMPORT_DATE": "匯入日期",
+                "CHANNELS": "頻道數量",
+                "CLOSE": "關閉",
+                "SAVE": "儲存",
+                "USER_AGENT": "User Agent",
+                "ORIGINAL_FILENAME": "原始檔名",
+                "FILE_PATH": "檔案路徑",
+                "UPDATE_FAILED": "上次播放清單更新失敗",
+                "AUTO_UPDATE": "自動更新",
+                "AUTO_UPDATE_DESCRIPTION": "如果啟動自動重新整理功能，則每次啟動應用程式時都將自動更新播放清單。",
+                "CUSTOM_USER_AGENT": "部分 IPTV 服務提供者需要特定的 User-Agent 才能播放他們的播放清單。",
+                "EXPORT_PLAYLIST": "以 m3u 格式匯出播放清單",
+                "PASSWORD": "密碼",
+                "SERVER_URL": "伺服器網址",
+                "USERNAME": "使用者名稱",
+                "MAC_ADDRESS": "Mac 位址",
+                "PLAYLIST_EXPORT_SUCCESS": "播放清單已成功匯出。",
+                "PLAYLIST_EXPORT_ERROR": "錯誤：播放清單匯出失敗。"
+            },
+            "REMOVE_DIALOG": {
+                "TITLE": "移除播放清單",
+                "MESSAGE": "您確定要完全刪除此播放清單嗎？",
+                "SUCCESS": "播放清單已成功移除"
+            },
+            "UPDATED": "已更新",
+            "REFRESH": "重新整理播放清單",
+            "AUTO_REFRESH_ENABLED": "已啟用自動重新整理",
+            "REFRESH_XTREAM": "從遠端重新整理 Xtream 播放清單",
+            "REFRESH_XTREAM_DIALOG": {
+                "TITLE": "重新整理 Xtream 播放清單",
+                "MESSAGE": "這將刪除本機快取的類別和串流，並從遠端伺服器重新匯入所有內容。您的最愛和最近觀看的項目將會保留。確定要繼續嗎？",
+                "STARTED": "已開始重新整理。正在導向播放清單...",
+                "ERROR": "重新整理播放清單失敗。請重試。"
+            },
+            "GLOBAL_FAVORITES": "全域我的最愛",
+            "GLOBAL_FAVORITES_DESCRIPTION": "從所有播放清單中自動產生的匯總我的最愛清單",
+            "MY_PLAYLISTS": "我的播放清單",
+            "MY_PLAYLISTS_SUBTITLE": "所有可用清單",
+            "PLAYLIST_UPDATE_SUCCESS": "成功！播放清單已成功更新。",
+            "PLAYLIST_UPDATE_ERROR": "更新播放清單詳細資訊時發生錯誤。",
+            "AUTO_REFRESH_UPDATE_SUCCESS": "成功！播放清單已成功更新",
+            "SEARCH_PLAYLISTS": "依標題搜尋播放清單",
+            "FEATURE_M3U_LABEL": "Add an M3U file or URL",
+            "FEATURE_XTREAM_LABEL": "Connect via Xtream Codes",
+            "FEATURE_STALKER_LABEL": "Connect to a Stalker portal",
+            "VALUE_PROPS_LABEL": "What you can do",
+            "VALUE_PROP_LIVE": "Live TV with EPG",
+            "VALUE_PROP_VOD": "Movies & Series",
+            "VALUE_PROP_MULTISOURCE": "Multi-source library",
+            "VALUE_PROP_OFFLINE": "Offline downloads",
+            "DASHBOARD_WELCOME_TAGLINE": "Your IPTV library, in one place.",
+            "FEATURE_LIVE_TITLE": "Live TV",
+            "FEATURE_LIVE_DESC": "Stream live channels with full schedule.",
+            "FEATURE_VOD_TITLE": "Movies & Series",
+            "FEATURE_VOD_DESC": "On-demand library with covers and details.",
+            "FEATURE_EPG_TITLE": "EPG & Catch-up",
+            "FEATURE_EPG_DESC": "Program guide and time-shifted playback.",
+            "FEATURE_OFFLINE_TITLE": "Offline downloads",
+            "FEATURE_OFFLINE_DESC": "Save movies and episodes for later.",
+            "SOURCES_WELCOME_TITLE": "Add your first playlist",
+            "SOURCES_WELCOME_BODY": "Pick a source type below to get started.",
+            "SOURCE_M3U_NEEDS": "Local file or URL pointing to an M3U/M3U8 playlist.",
+            "SOURCE_M3U_ADD": "Add M3U",
+            "SOURCE_XTREAM_NEEDS": "Username, password and server URL from your provider.",
+            "SOURCE_XTREAM_ADD": "Add Xtream",
+            "SOURCE_STALKER_NEEDS": "Portal URL and MAC address (Ministra-compatible).",
+            "SOURCE_STALKER_ADD": "Add Stalker",
+            "CONTENT_LIVE": "Live",
+            "CONTENT_VOD": "Movies",
+            "CONTENT_SERIES": "Series",
+            "CONTENT_EPG": "EPG",
+            "DASHBOARD_WELCOME_DESCRIPTION": "Connect M3U files, Xtream Codes, or Stalker portals — then enjoy live TV, movies and series on every screen."
+        },
+        "FILE_UPLOAD": {
+            "DRAG_DROP": "在此處拖放檔案",
+            "OR": "或者",
+            "CHOOSE_PLAYLIST": "選擇播放清單",
+            "REJECTED": "檔案被拒絕，不支援的檔案格式 {{filename}}。"
+        },
+        "URL_UPLOAD": {
+            "PLAYLIST_URL": "播放清單網址（m3u，m3u8）",
+            "ADD_PLAYLIST": "新增播放清單",
+            "CORS_NOTE": "為了避免 CORS 問題，此應用程式目前使用了一個公開的 CORS 代理服務。如果您要上傳包含敏感資料的播放清單，建議在相鄰的分頁中將其作為檔案匯入。"
+        },
+        "TEXT_IMPORT": {
+            "LABEL": "將 m3u（8）播放清單以純文字的方式插入",
+            "BUTTON_LABEL": "匯入"
+        },
+        "STALKER_PORTAL": {
+            "ADD": "新增",
+            "TITLE": "標題",
+            "MAC_ADDRESS": "Mac 位址",
+            "SERVER_URL": "伺服器網址",
+            "URL_VALIDATION_ERROR": "必須是有效的網址並包含協定（例如 http://example.com/c 或 https://example.com/stalker_portal/c）"
+        },
+        "XTREAM_PLAYLIST": {
+            "TITLE": "播放清單標題",
+            "SERVER_URL": "伺服器網址",
+            "USERNAME": "使用者名稱",
+            "PASSWORD": "密碼",
+            "ADD": "新增",
+            "TEST_CREDENTIALS": "測試憑證",
+            "URL_VALIDATION_ERROR": "必須是有效的網址並包含協定（例如 http://example.com 或 https://example.com:4324）"
+        }
+    },
+    "SETTINGS": {
+        "TITLE": "設定",
+        "SUBTITLE": "更改應用程式的配置",
+        "DESCRIPTION": "請調整下面的選項列表，並使用儲存變更按鈕確認",
+        "EPG_URL_LABEL": "EPG 網址（*.xml 或 *.xml.gz）",
+        "EPG_URL_PLACEHOLDER": "輸入網址",
+        "REFRESH_EPG": "重新整理 EPG",
+        "REFRESH_ALL_EPG": "全部重新整理",
+        "REMOVE_EPG_SOURCE": "移除 EPG 來源",
+        "EPG_STATUS_FRESH": "已更新",
+        "EPG_STATUS_STALE": "需要重新整理",
+        "EPG_STATUS_ERROR": "失敗",
+        "VIDEO_PLAYER_LABEL": "影片播放器",
+        "VIDEO_PLAYER_PLACEHOLDER": "選擇一個選項",
+        "VERSION": "版本",
+        "SAVE_CHANGES": "儲存變更",
+        "BACK_TO_HOME": "返回主頁",
+        "NEW_VERSION_AVAILABLE": "有新版本可用",
+        "LATEST_VERSION": "您正在使用最新版本",
+        "LANGUAGE": "語言",
+        "SETTINGS_SAVED": "成功！設定已儲存。",
+        "THEME": "視覺主題",
+        "SHOW_CAPTIONS": "顯示字幕",
+        "ADD_EPG_SOURCE": "新增 EPG 來源",
+        "EPG_URL_ERROR": "該值不是有效的網址",
+        "VIDEO_PLAYER_DESCRIPTION": "選擇預設影片播放器",
+        "LANGUAGE_DESCRIPTION": "選擇應用程式語言",
+        "THEME_DESCRIPTION": "選擇應用程式視覺主題",
+        "SHOW_CAPTIONS_DESCRIPTION": "預設顯示或隱藏字幕",
+        "VERSION_DESCRIPTION": "應用程式目前版本",
+        "EPG_NOTE": "目前僅在 Electron 版的 IPTVnator 中提供 EPG。",
+        "EPG_NOTE_URL_TEXT": "在此處查看",
+        "IMPORT_EXPORT_DATA": "匯入/匯出播放清單",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "以應用程式內使用的 JSON 格式匯出或匯入播放清單。",
+        "IMPORT_DATA": "匯入",
+        "EXPORT_DATA": "匯出",
+        "REMOVE_ALL": "Delete all playlists and playlist data",
+        "REMOVE_ALL_BUTTON": "Delete all",
+        "REMOVE_ALL_DESCRIPTION": "Delete every M3U, Xtream, and Stalker playlist stored in the app.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Delete all playlists?",
+            "MESSAGE": "Delete all {{count}} playlists from the app. This also removes stored playlist data on this device.",
+            "SUMMARY_TITLE": "Playlist sources",
+            "CONSEQUENCES_TITLE": "This also removes",
+            "CONSEQUENCE_FAVORITES": "Favorites saved for these playlists",
+            "CONSEQUENCE_RECENTLY_VIEWED": "Recently viewed history",
+            "CONSEQUENCE_PLAYBACK": "Saved playback positions",
+            "CONSEQUENCE_DOWNLOADS": "Download history entries linked to those playlists",
+            "CONSEQUENCE_XTREAM_CACHE": "Imported Xtream categories and locally cached content",
+            "BACKUP_HINT": "Use Export first if you want a restorable backup before deleting.",
+            "CONFIRM": "Delete everything"
+        },
+        "IMPORT_ERROR": "匯入錯誤，請嘗試另外一個檔案。",
+        "PLAYLISTS_REMOVED": "All playlists and playlist data were removed.",
+        "MPV_PLAYER_PATH_LABEL": "mpv 路徑",
+        "MPV_PLAYER_PATH_DESCRIPTION": "設定您系統中 mpv 播放器的路徑。將使用提供的 mpv 二進位檔路徑，而非 $PATH 中的預設路徑。",
+        "MPV_PLAYER_PATH": "mpv 播放器路徑",
+        "VLC_PLAYER_PATH_LABEL": "VLC 路徑",
+        "VLC_PLAYER_PATH_DESCRIPTION": "設定您系統中 VLC 播放器的路徑。將使用提供的 VLC 二進位檔路徑，而非系統預設路徑。",
+        "VLC_PLAYER_PATH": "VLC 播放器路徑",
+        "REMOTE_CONTROL": "遠端控制",
+        "REMOTE_CONTROL_DESCRIPTION": "啟用應用程式遠端控制功能。",
+        "REMOTE_CONTROL_PORT": "遠端控制連接埠",
+        "REMOTE_CONTROL_PORT_DESCRIPTION": "用於遠端控制應用程式的連接埠。預設使用連接埠 8765。",
+        "REMOVE_ALL_IN_PROGRESS": "Deleting playlist data…",
+        "REMOVE_ALL_PROGRESS": "Deleting playlist data… {{current}} / {{total}}",
+        "PLAYLISTS_REMOVE_FAILED": "Could not delete playlists. Please try again.",
+        "EPG_EMPTY_TITLE": "No EPG sources yet",
+        "EPG_EMPTY_HINT": "Add a URL to fetch program data for your channels.",
+        "BACKUP": "Backup",
+        "BACKUP_DESCRIPTION": "Export your library as a snapshot, or restore from a previous backup.",
+        "RESET": "Reset",
+        "RESET_DESCRIPTION": "Permanently delete content stored in this app.",
+        "NAV_BACKUP": "Backup",
+        "NAV_RESET": "Reset"
+    },
+    "THEMES": {
+        "DARK_THEME": "深色主題",
+        "LIGHT_THEME": "亮色主題",
+        "SYSTEM_THEME": "跟隨系統"
+    },
+    "CHANNELS": {
+        "SEARCH_CHANNEL": "搜尋頻道",
+        "UPLOAD_OR_SELECT_OTHER_PLAYLIST": "上傳或選擇其他播放清單",
+        "ALL_CHANNELS": "所有頻道",
+        "GROUPS": "群組",
+        "UNGROUPED": "未分組",
+        "UNNAMED_CHANNEL": "未命名頻道",
+        "FAVORITES": "我的最愛",
+        "NO_FAVORITES": "尚無最愛",
+        "USE_STAR_TO_FAVORITE": "請使用“星星”圖示將頻道新增至此列表。",
+        "REMOVE_FAVORITE": "從我的最愛中移除",
+        "FAVORITES_UPDATED": "我的最愛已更新！"
+    },
+    "TOP_MENU": {
+        "OPEN_CHANNELS_LIST": "打開頻道列表",
+        "TOGGLE_FAVORITE_FLAG": "切換我的最愛標記",
+        "OPEN_EPG_LIST": "開啟 EPG 列表",
+        "OPEN_MULTI_EPG": "開啟多 EPG 視圖"
+    },
+    "EPG": {
+        "NEXT_DAY": "下一天",
+        "PREVIOUS_DAY": "上一天",
+        "LIVE_NOW": "現在播放",
+        "LIVE_STREAM": "現場直播",
+        "TIMESHIFT_AVAILABLE": "時間平移功能可用，點選以播放",
+        "EPG_NOT_AVAILABLE_DATE": "抱歉，選擇的日期上 EPG 無法使用",
+        "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "抱歉，此頻道上的 EPG 無法使用。",
+        "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "請在應用程式設定中增加/更改 EPG 列表的URL。",
+        "FETCH_EPG": "取得 EPG 資料...",
+        "ERROR": "抱歉，無法載入 EPG。",
+        "DOWNLOAD_SUCCESS": "EPG 已成功下載。",
+        "PROGRAM_DIALOG": {
+            "PROGRAM_DETAILS": "關於電視節目的詳細資訊",
+            "TITLE": "標題",
+            "CATEGORY": "類別",
+            "PARENTAL_RATING_SYSTEM": "電視內容分級制度",
+            "DESCRIPTION": "說明",
+            "LANGUAGE": "語言",
+            "SHOW_PROGRAM_DETAILS": "顯示關於該節目的詳細資訊"
+        }
+    },
+    "LANGUAGES": {
+        "ARABIC": "العربية",
+        "MOROCCAN_ARABIC": "العربية (اللهجة المغربية)",
+        "ENGLISH": "English",
+        "KOREAN": "한국어",
+        "RUSSIAN": "Русский",
+        "GERMAN": "Deutsch",
+        "SPANISH": "Español",
+        "CHINESE": "简体中文",
+        "TRADITIONAL_CHINESE": "繁體中文",
+        "FRENCH": "Français",
+        "ITALIAN": "Italiano",
+        "TURKISH": "Türkçe",
+        "JAPANESE": "日本語",
+        "DUTCH": "Nederlands",
+        "BELARUSIAN": "Беларуская",
+        "POLISH": "Polski",
+        "PORTUGUESE": "Português",
+        "GREEK": "Ελληνικά"
+    },
+    "YES": "是",
+    "NO": "否",
+    "MENU": {
+        "OPEN": "開啟選單",
+        "SUPPORT_ARIA": "在 GitHub 上支持 IPTVnator",
+        "SETTINGS": "設定",
+        "SETTINGS_ARIA": "開啟設定",
+        "BUG_REPORT": "回報問題",
+        "WHAT_IS_NEW": "更新內容",
+        "ABOUT": "關於",
+        "ABOUT_ARIA": "關於本應用程式",
+        "SUPPORT_PROJECT": "支持專案"
+    },
+    "ABOUT": {
+        "TITLE": "關於 IPTVnator",
+        "DESCRIPTION": "跨平台 IPTV 播放器，具有多種功能，如支援 m3u 和 m3u8 播放清單、我的最愛、電視指南、電視節目存檔/回看等。",
+        "VERSION": "版本",
+        "GITHUB_TOOLTIP": "ITPVnator 的 GitHub 專案",
+        "BUY_ME_A_COFFEE_TOOLTIP": "請我喝杯咖啡",
+        "TWITTER_TOOLTIP": "在 Twitter 上分享"
+    },
+    "UPDATE_AVAILABLE": "有可用的更新",
+    "REFRESH": "重新整理",
+    "XTREAM": {
+        "PLAY": "播放",
+        "NAME": "名稱",
+        "RELEASE_DATE": "發行日期",
+        "GENRE": "類型",
+        "COUNTRY": "國家",
+        "ACTORS": "演員",
+        "DIRECTOR": "導演",
+        "DURATION": "片長",
+        "CAST": "演員陣容",
+        "EPISODE_RUN_TIME": "集數時長",
+        "RATING": "評分",
+        "IMDB_RATING": "IMDB 評分",
+        "KINOPOISK_RATING": "Kinopoisk 評分",
+        "DESCRIPTION": "描述",
+        "YEAR": "年份",
+        "AGE": "年齡",
+        "YOUTUBE_TRAILER": "YouTube 預告片",
+        "EPISODE": "集數"
+    },
+    "PORTALS": {
+        "ALL_CATEGORIES": "所有類別",
+        "MY_FAVORITES": "我的最愛",
+        "ADD_TO_FAVORITES": "新增至最愛",
+        "REMOVE_FROM_FAVORITES": "從最愛中移除",
+        "REMOVED_FROM_FAVORITES": "已從最愛中移除",
+        "ADDED_TO_FAVORITES": "已新增至最愛",
+        "SIDEBAR": {
+            "MAIN": "主頁",
+            "MOVIES": "電影",
+            "LIVE_TV": "直播電視",
+            "SERIES": "影集",
+            "LIBRARY": "媒體庫",
+            "SEARCH": "搜尋",
+            "RECENT": "最近觀看",
+            "FAVORITES": "我的最愛",
+            "HOME": "首頁",
+            "PLAYLIST_INFO": "播放清單資訊",
+            "ACCOUNT_INFO": "帳戶資訊"
+        },
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "帳戶已過期",
+                "DESCRIPTION": "此帳戶已過期。請在播放清單設定中檢查憑證或將其移除。"
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "未授權",
+                "DESCRIPTION": "請在播放清單設定中檢查憑證或將其移除。"
+            },
+            "NOT_FOUND": {
+                "TITLE": "找不到入口網站",
+                "DESCRIPTION": "請在播放清單設定中檢查憑證和入口網站網址或將其移除。"
+            },
+            "EMPTY_CATEGORY": {
+                "TITLE": "空類別",
+                "DESCRIPTION": "此類別沒有內容，請選擇其他類別或更改內容類型"
+            },
+            "UNKNOWN_ERROR": {
+                "TITLE": "發生錯誤",
+                "DESCRIPTION": "未知錯誤，請稍後再試"
+            },
+            "NO_CATEGORY_SELECTED": {
+                "TITLE": "未選擇類別",
+                "DESCRIPTION": "請選擇一個類別以查看內容"
+            },
+            "PLAYLIST_SETTINGS": "播放清單設定",
+            "HOME": "首頁",
+            "DELETE": "刪除"
+        },
+        "EMPTY_LIST_VIEW": {
+            "TITLE": "找不到結果",
+            "NO_SEARCH_RESULTS": "找不到任何內容，請嘗試更改搜尋條件"
+        },
+        "STREAM_URL_COPIED": "串流網址已複製到剪貼簿",
+        "COPY_STREAM_URL": "複製串流網址",
+        "SELECT_CATEGORY": "選擇類別",
+        "SEARCH_VIEW": {
+            "RESULTS_FOUND": "找到 {{count}} 筆結果",
+            "NO_RESULTS_FOR": "找不到與「{{term}}」相符的結果"
+        }
+    },
+    "INFORMATION": "資訊",
+    "REMOTE_CONTROL": {
+        "TITLE": "遠端控制",
+        "UP_CHANNEL": "上一頻道",
+        "DOWN_CHANNEL": "下一頻道",
+        "HEADER": "IPTVNator 遠端控制",
+        "FOOTER": "IPTVNator 遠端控制"
+    },
+    "WORKSPACE": {
+        "SHELL": {
+            "GO_TO_DASHBOARD": "Back to dashboard",
+            "GO_TO_SOURCES": "Go to Sources",
+            "DROP_OVERLAY_TITLE": "Drop to add playlist",
+            "DROP_OVERLAY_BODY": "Release an .m3u or .m3u8 file anywhere in the workspace to import it.",
+            "DROP_OVERLAY_REJECTED_BODY": "Please drop an .m3u or .m3u8 file. Press Esc to dismiss.",
+            "DROP_OVERLAY_REJECTED_UNSUPPORTED": "Unsupported file type",
+            "DROP_OVERLAY_REJECTED_EMPTY": "That file is empty",
+            "DROP_OVERLAY_REJECTED_READ_ERROR": "Could not read that file",
+            "DROP_IMPORT_SUCCESS": "Importing \"{{title}}\"…",
+            "COMMANDS": {
+                "ADD_PLAYLIST_M3U_LABEL": "Add M3U playlist",
+                "ADD_PLAYLIST_M3U_DESCRIPTION": "Open add dialog on the M3U file or URL tab",
+                "ADD_PLAYLIST_XTREAM_LABEL": "Add Xtream Codes playlist",
+                "ADD_PLAYLIST_XTREAM_DESCRIPTION": "Open add dialog on the Xtream Codes tab",
+                "ADD_PLAYLIST_STALKER_LABEL": "Add Stalker portal",
+                "ADD_PLAYLIST_STALKER_DESCRIPTION": "Open add dialog on the Stalker Portal tab"
+            },
+            "EXTERNAL_PLAYBACK_CLOSE": "Close player"
+        },
+        "GLOBAL_FAVORITES": {
+            "NO_PLAYLISTS_TITLE": "No favorites to show",
+            "NO_PLAYLISTS_BODY": "Add a playlist to start collecting favorites from live channels, movies, and series.",
+            "NO_ITEMS_TITLE": "No favorites yet",
+            "NO_ITEMS_BODY": "Tap the star icon on any channel, movie, or series to save it here."
+        },
+        "GLOBAL_RECENT": {
+            "NO_PLAYLISTS_TITLE": "Nothing watched yet",
+            "NO_PLAYLISTS_BODY": "Add a playlist and your watching history will appear here.",
+            "NO_ITEMS_TITLE": "Nothing watched yet",
+            "NO_ITEMS_BODY": "Start watching anything from your library and it will show up here."
+        }
+    },
+    "DOWNLOADS": {
+        "NO_PLAYLISTS_TITLE": "Add a playlist to start downloading",
+        "NO_PLAYLISTS_BODY": "Once you add a playlist, you can save movies and episodes here for offline playback.",
+        "NO_ITEMS_BODY": "Use the download button on any movie or episode to save it for offline playback.",
+        "NO_FILTER_MATCH": "No downloads match the current filter",
+        "NO_FILTER_MATCH_HINT": "Try a different search term"
+    }
+}
diff --git a/apps/web/src/assets/icons/android-chrome-192x192.png b/apps/web/src/assets/icons/android-chrome-192x192.png
new file mode 100644
index 0000000..d821e85
Binary files /dev/null and b/apps/web/src/assets/icons/android-chrome-192x192.png differ
diff --git a/apps/web/src/assets/icons/android-chrome-512x512.png b/apps/web/src/assets/icons/android-chrome-512x512.png
new file mode 100644
index 0000000..d2e4ef3
Binary files /dev/null and b/apps/web/src/assets/icons/android-chrome-512x512.png differ
diff --git a/apps/web/src/assets/icons/android-chrome-maskable-192x192.png b/apps/web/src/assets/icons/android-chrome-maskable-192x192.png
new file mode 100644
index 0000000..d82e168
Binary files /dev/null and b/apps/web/src/assets/icons/android-chrome-maskable-192x192.png differ
diff --git a/apps/web/src/assets/icons/android-chrome-maskable-512x512.png b/apps/web/src/assets/icons/android-chrome-maskable-512x512.png
new file mode 100644
index 0000000..d573404
Binary files /dev/null and b/apps/web/src/assets/icons/android-chrome-maskable-512x512.png differ
diff --git a/apps/web/src/assets/icons/apple-touch-icon.png b/apps/web/src/assets/icons/apple-touch-icon.png
new file mode 100644
index 0000000..bc90c06
Binary files /dev/null and b/apps/web/src/assets/icons/apple-touch-icon.png differ
diff --git a/apps/web/src/assets/icons/favicon.256x256.png b/apps/web/src/assets/icons/favicon.256x256.png
new file mode 100644
index 0000000..d3283a3
Binary files /dev/null and b/apps/web/src/assets/icons/favicon.256x256.png differ
diff --git a/apps/web/src/assets/icons/favicon.512x512.png b/apps/web/src/assets/icons/favicon.512x512.png
new file mode 100644
index 0000000..134ce45
Binary files /dev/null and b/apps/web/src/assets/icons/favicon.512x512.png differ
diff --git a/apps/web/src/assets/icons/favicon.icns b/apps/web/src/assets/icons/favicon.icns
new file mode 100644
index 0000000..cd4a29c
Binary files /dev/null and b/apps/web/src/assets/icons/favicon.icns differ
diff --git a/apps/web/src/assets/icons/favicon.ico b/apps/web/src/assets/icons/favicon.ico
new file mode 100644
index 0000000..1bd12fa
Binary files /dev/null and b/apps/web/src/assets/icons/favicon.ico differ
diff --git a/apps/web/src/assets/icons/favicon.png b/apps/web/src/assets/icons/favicon.png
new file mode 100644
index 0000000..d3283a3
Binary files /dev/null and b/apps/web/src/assets/icons/favicon.png differ
diff --git a/apps/web/src/assets/icons/github-light.png b/apps/web/src/assets/icons/github-light.png
new file mode 100644
index 0000000..628da97
Binary files /dev/null and b/apps/web/src/assets/icons/github-light.png differ
diff --git a/apps/web/src/assets/icons/icon-1024.png b/apps/web/src/assets/icons/icon-1024.png
new file mode 100644
index 0000000..ebcdf7c
Binary files /dev/null and b/apps/web/src/assets/icons/icon-1024.png differ
diff --git a/apps/web/src/assets/icons/icon-128.png b/apps/web/src/assets/icons/icon-128.png
new file mode 100644
index 0000000..2fecf69
Binary files /dev/null and b/apps/web/src/assets/icons/icon-128.png differ
diff --git a/apps/web/src/assets/icons/icon-16.png b/apps/web/src/assets/icons/icon-16.png
new file mode 100644
index 0000000..47b7693
Binary files /dev/null and b/apps/web/src/assets/icons/icon-16.png differ
diff --git a/apps/web/src/assets/icons/icon-32.png b/apps/web/src/assets/icons/icon-32.png
new file mode 100644
index 0000000..5aae1b1
Binary files /dev/null and b/apps/web/src/assets/icons/icon-32.png differ
diff --git a/apps/web/src/assets/icons/icon-48.png b/apps/web/src/assets/icons/icon-48.png
new file mode 100644
index 0000000..f991bf9
Binary files /dev/null and b/apps/web/src/assets/icons/icon-48.png differ
diff --git a/apps/web/src/assets/icons/icon-64.png b/apps/web/src/assets/icons/icon-64.png
new file mode 100644
index 0000000..72b2c05
Binary files /dev/null and b/apps/web/src/assets/icons/icon-64.png differ
diff --git a/apps/web/src/assets/icons/icon-tv-256.png b/apps/web/src/assets/icons/icon-tv-256.png
new file mode 100644
index 0000000..ee8c784
Binary files /dev/null and b/apps/web/src/assets/icons/icon-tv-256.png differ
diff --git a/apps/web/src/assets/icons/icon.png b/apps/web/src/assets/icons/icon.png
new file mode 100644
index 0000000..d3283a3
Binary files /dev/null and b/apps/web/src/assets/icons/icon.png differ
diff --git a/apps/web/src/assets/icons/twitter-light.png b/apps/web/src/assets/icons/twitter-light.png
new file mode 100644
index 0000000..66962e7
Binary files /dev/null and b/apps/web/src/assets/icons/twitter-light.png differ
diff --git a/apps/web/src/assets/images/broken-tv.svg b/apps/web/src/assets/images/broken-tv.svg
new file mode 100644
index 0000000..0d37bd6
--- /dev/null
+++ b/apps/web/src/assets/images/broken-tv.svg
@@ -0,0 +1 @@
+<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="350" viewBox="0, 0, 400,350"><g id="svgg"><path id="path0" d="M226.679 56.625 C 223.125 58.792,223.480 64.696,227.262 66.318 L 228.711 66.939 230.219 74.583 C 231.762 82.400,233.620 91.085,236.108 102.111 C 236.879 105.528,237.464 108.363,237.407 108.412 C 237.351 108.461,234.053 109.279,230.078 110.231 L 222.852 111.961 222.731 113.598 L 222.611 115.234 165.505 115.241 C 117.021 115.247,107.993 115.334,105.714 115.817 C 99.081 117.222,92.306 122.088,89.748 127.283 L 88.477 129.867 88.477 167.863 C 88.477 197.177,88.369 205.859,88.007 205.859 C 87.749 205.859,86.555 205.603,85.352 205.290 C 81.356 204.249,80.924 204.847,81.645 210.421 C 82.389 216.165,82.139 215.676,85.600 218.155 L 88.768 220.422 88.528 222.418 C 88.396 223.516,88.287 225.332,88.285 226.453 L 88.281 228.492 86.975 228.443 C 85.236 228.377,84.871 228.659,84.324 230.485 C 83.752 232.396,83.652 232.395,81.100 230.469 C 78.547 228.541,75.781 228.828,75.781 231.020 C 75.781 231.188,75.060 233.593,74.177 236.366 L 72.574 241.406 46.834 241.406 L 21.094 241.406 21.094 242.773 L 21.094 244.141 47.459 244.141 L 73.824 244.141 76.982 250.449 L 80.141 256.757 75.204 256.544 C 71.447 256.382,70.103 256.181,69.576 255.704 C 68.649 254.865,69.298 254.794,55.631 257.232 C 39.298 260.144,40.330 259.416,42.969 266.165 C 43.828 268.363,44.531 270.398,44.531 270.689 C 44.531 271.121,45.707 271.170,51.039 270.960 C 54.618 270.819,60.814 270.702,64.808 270.701 L 72.070 270.699 74.673 268.621 L 77.276 266.543 76.253 265.205 C 75.691 264.469,74.564 263.095,73.748 262.152 C 71.694 259.775,71.706 259.766,76.893 259.766 L 81.521 259.766 83.924 264.810 C 86.108 269.394,86.415 270.367,87.292 275.455 C 87.823 278.535,88.396 281.828,88.566 282.773 C 88.997 285.167,89.994 285.748,95.299 286.698 C 103.016 288.080,104.259 287.786,104.284 284.570 C 104.319 279.989,101.085 267.280,98.639 262.388 C 97.669 260.446,96.875 258.707,96.875 258.522 C 96.875 258.337,102.720 258.234,109.863 258.292 C 120.628 258.380,122.832 258.490,122.738 258.935 C 122.655 259.324,122.816 259.379,123.324 259.134 C 123.709 258.949,126.566 258.742,129.673 258.675 C 138.889 258.474,138.817 256.983,129.167 248.242 C 121.616 241.402,121.287 241.071,121.680 240.707 C 122.440 240.004,152.118 226.591,153.516 226.319 C 154.374 226.151,154.715 226.475,156.327 228.982 C 157.336 230.552,159.929 234.560,162.090 237.890 C 166.497 244.680,166.516 245.130,162.261 242.023 C 158.071 238.963,158.333 238.818,151.743 247.852 C 149.350 251.132,141.329 261.215,139.774 262.895 C 137.826 265.002,137.828 264.993,138.633 266.840 C 139.044 267.783,139.938 271.012,140.619 274.015 C 141.300 277.017,141.982 279.698,142.135 279.970 C 142.415 280.471,146.139 278.813,159.889 272.069 L 165.285 269.422 168.803 262.395 C 170.738 258.530,172.462 255.522,172.634 255.711 C 172.806 255.900,175.362 259.746,178.312 264.258 C 181.263 268.770,183.740 272.529,183.818 272.611 C 183.896 272.694,184.496 272.539,185.151 272.268 L 186.343 271.774 185.296 269.969 C 184.719 268.976,182.632 265.615,180.657 262.500 C 178.683 259.385,175.171 253.681,172.855 249.826 C 161.126 230.305,155.784 222.827,153.801 223.157 C 152.292 223.408,128.937 233.786,120.617 237.904 L 118.773 238.816 116.808 237.896 C 114.456 236.794,114.416 236.629,116.309 235.824 C 120.977 233.840,129.288 230.082,135.938 226.950 C 140.127 224.976,145.766 222.324,148.468 221.055 L 153.381 218.749 155.646 219.204 C 158.333 219.744,156.934 217.902,168.508 236.133 C 173.281 243.652,177.905 250.859,178.781 252.148 C 179.658 253.437,182.000 257.041,183.984 260.156 C 185.969 263.271,189.172 268.083,191.102 270.848 C 198.101 280.877,198.044 280.986,181.348 289.487 C 176.138 292.140,171.875 294.428,171.875 294.573 C 171.875 294.717,172.198 295.234,172.593 295.722 L 173.310 296.608 184.104 291.110 L 194.898 285.613 197.405 286.042 C 203.593 287.102,208.134 283.927,208.825 278.056 L 209.070 275.977 232.172 275.977 L 255.273 275.977 255.469 281.641 C 255.731 289.244,257.626 292.188,263.017 293.368 C 267.007 294.241,289.734 293.719,291.602 292.712 C 296.247 290.205,296.484 289.352,296.484 275.158 L 296.484 263.168 297.929 260.197 L 299.374 257.227 299.537 250.684 L 299.700 244.141 339.523 244.141 L 379.346 244.141 379.224 242.871 L 379.102 241.602 361.719 241.709 C 352.158 241.768,334.272 241.703,321.973 241.564 L 299.609 241.313 299.609 213.014 L 299.609 184.716 298.340 184.839 L 297.070 184.961 296.875 220.703 L 296.680 256.445 295.627 258.440 C 294.090 261.355,292.716 262.816,291.088 263.268 C 289.485 263.713,202.532 263.848,194.107 263.418 L 189.190 263.167 188.149 261.523 C 187.577 260.619,187.109 259.766,187.109 259.627 C 187.109 259.488,202.859 259.375,222.109 259.375 C 261.290 259.375,258.528 259.578,261.153 256.511 L 262.514 254.921 262.409 193.183 L 262.305 131.445 261.386 129.968 C 259.326 126.654,267.198 126.952,181.949 126.959 C 140.422 126.962,106.240 127.096,105.988 127.256 C 105.736 127.416,105.410 128.029,105.262 128.617 L 104.993 129.688 116.657 129.746 C 123.072 129.779,157.324 129.757,192.773 129.699 C 257.061 129.593,257.229 129.595,258.203 130.386 C 259.603 131.524,259.666 135.039,259.443 199.590 L 259.253 254.454 258.355 255.352 L 257.457 256.250 221.925 256.250 C 202.382 256.250,186.146 256.345,185.845 256.460 C 185.140 256.731,173.383 239.140,163.784 223.454 C 157.846 213.750,156.964 213.708,139.063 222.289 C 131.865 225.739,122.812 229.976,118.945 231.706 C 115.078 233.436,111.233 235.385,110.401 236.038 L 108.888 237.224 105.714 235.927 C 103.968 235.214,101.240 234.039,99.653 233.316 L 96.767 232.002 97.017 229.607 C 97.326 226.651,97.317 226.659,98.900 227.841 C 100.595 229.106,104.497 230.414,108.181 230.950 L 111.133 231.380 114.453 229.327 C 121.342 225.067,121.218 225.363,117.589 221.805 C 114.282 218.564,111.974 215.561,110.360 212.401 L 109.148 210.029 104.476 208.935 C 101.907 208.334,99.411 207.745,98.929 207.625 L 98.054 207.409 97.953 186.419 L 97.852 165.430 96.582 165.307 L 95.313 165.185 95.313 186.108 C 95.313 209.549,95.599 207.486,92.459 206.614 L 90.973 206.202 91.092 168.238 L 91.211 130.273 92.057 128.693 C 95.077 123.052,92.968 123.280,138.853 123.643 C 158.841 123.801,182.016 123.799,190.353 123.638 L 205.511 123.345 205.392 122.122 L 205.273 120.898 153.320 120.818 C 124.746 120.774,101.367 120.626,101.367 120.490 C 101.367 120.353,102.422 119.774,103.711 119.203 L 106.055 118.164 164.453 118.164 L 222.852 118.164 222.852 119.336 L 222.852 120.508 216.113 120.615 L 209.375 120.722 209.375 122.071 L 209.375 123.420 250.354 123.526 L 291.334 123.633 292.794 124.814 C 293.597 125.464,294.799 126.958,295.467 128.135 L 296.680 130.273 296.789 154.785 L 296.898 179.297 298.262 179.297 L 299.626 179.297 299.520 154.590 L 299.414 129.883 298.173 127.262 C 294.435 119.373,287.787 116.014,275.195 115.653 L 267.383 115.430 267.265 113.382 C 267.113 110.741,267.419 110.870,257.610 109.330 C 253.102 108.622,249.290 107.862,249.139 107.641 C 248.988 107.420,248.398 105.918,247.828 104.303 C 247.258 102.689,245.159 96.885,243.165 91.406 C 233.266 64.215,233.832 65.970,234.528 64.657 C 237.403 59.229,231.805 53.500,226.679 56.625 M231.554 59.202 C 232.653 59.972,232.763 62.465,231.738 63.381 C 229.883 65.040,226.953 63.793,226.953 61.343 C 226.953 59.076,229.609 57.840,231.554 59.202 M238.289 86.328 C 246.976 110.273,246.452 107.954,243.311 108.572 C 240.444 109.136,240.470 109.159,239.703 105.469 C 239.368 103.857,238.138 98.232,236.971 92.969 C 232.445 72.571,231.950 70.033,232.781 71.484 C 232.966 71.807,235.445 78.486,238.289 86.328 M251.758 111.308 C 257.927 112.050,256.700 112.300,245.898 112.500 C 235.536 112.692,231.951 112.462,236.542 111.901 C 237.821 111.745,240.273 111.391,241.992 111.115 C 245.240 110.593,245.932 110.607,251.758 111.308 M264.063 117.796 L 264.063 120.703 244.483 120.703 C 228.583 120.703,224.983 120.609,225.321 120.201 C 225.550 119.925,225.791 118.687,225.857 117.449 L 225.977 115.198 242.578 115.182 C 251.709 115.172,260.146 115.041,261.328 114.889 C 264.143 114.527,264.063 114.441,264.063 117.796 M283.962 119.195 C 285.346 119.737,286.557 120.413,286.652 120.699 C 286.770 121.053,286.612 121.136,286.154 120.961 C 285.785 120.819,281.366 120.703,276.335 120.703 L 267.188 120.703 267.188 119.299 L 267.188 117.894 274.316 118.053 C 280.796 118.196,281.675 118.301,283.962 119.195 M98.616 128.173 C 97.962 128.351,96.995 129.072,96.467 129.775 L 95.508 131.055 95.395 144.070 L 95.282 157.086 96.372 156.961 L 97.461 156.836 97.656 144.336 L 97.852 131.836 99.123 130.005 C 100.511 128.007,100.421 127.681,98.616 128.173 M278.275 130.251 C 277.876 131.291,278.317 132.193,279.671 133.105 C 281.335 134.227,282.189 134.104,282.349 132.719 C 282.581 130.711,278.944 128.507,278.275 130.251 M159.333 145.742 C 146.197 157.577,145.733 158.004,135.200 167.969 C 131.680 171.299,128.473 174.252,128.075 174.532 C 126.912 175.347,126.473 176.447,126.953 177.344 C 127.766 178.862,127.126 179.369,142.973 164.648 C 152.133 156.139,157.775 150.997,166.905 142.834 C 174.513 136.032,174.203 136.426,172.907 135.208 L 171.985 134.343 159.333 145.742 M277.617 136.085 C 268.238 138.701,267.770 151.209,276.894 155.386 C 282.933 158.151,290.234 152.625,290.234 145.291 C 290.234 139.095,283.760 134.371,277.617 136.085 M240.139 143.452 C 236.432 146.941,228.125 154.790,221.680 160.894 C 215.234 166.999,209.620 172.312,209.204 172.702 C 208.369 173.484,209.282 175.173,210.402 174.917 C 210.985 174.783,220.658 165.848,231.250 155.659 C 235.439 151.629,241.196 146.220,244.043 143.637 C 249.241 138.922,249.614 138.442,248.750 137.578 C 247.747 136.576,246.656 137.320,240.139 143.452 M282.240 138.716 C 287.274 139.984,289.054 146.532,285.472 150.611 C 282.516 153.979,278.200 154.028,275.150 150.730 C 270.067 145.234,274.991 136.891,282.240 138.716 M179.492 143.636 C 178.633 144.421,172.138 150.437,165.059 157.004 C 157.980 163.572,149.542 171.388,146.309 174.374 C 136.748 183.202,136.328 183.624,136.328 184.393 C 136.328 184.797,136.675 185.314,137.098 185.541 C 138.005 186.026,138.914 185.262,152.941 172.227 C 161.438 164.331,173.437 153.234,180.222 146.997 L 183.276 144.189 182.556 143.200 C 181.613 141.906,181.345 141.944,179.492 143.636 M250.380 146.755 C 246.104 149.683,216.016 177.464,216.016 178.484 C 216.016 179.327,216.769 180.078,217.615 180.078 C 217.979 180.078,221.152 177.298,224.666 173.900 C 233.525 165.334,238.178 161.033,245.996 154.186 C 252.515 148.477,253.266 147.563,252.266 146.563 C 251.658 145.955,251.530 145.968,250.380 146.755 M277.496 159.933 C 277.062 161.064,277.567 162.281,278.759 162.975 C 280.303 163.874,281.250 163.539,281.250 162.094 C 281.250 160.305,278.058 158.467,277.496 159.933 M276.808 166.589 C 270.088 168.984,267.936 178.066,272.909 183.040 C 278.171 188.302,287.253 186.056,289.308 178.985 C 291.589 171.142,284.303 163.917,276.808 166.589 M282.633 169.484 C 287.296 171.602,288.430 177.286,284.913 180.903 C 280.456 185.485,273.055 182.652,273.062 176.367 C 273.068 170.814,277.904 167.336,282.633 169.484 M165.464 177.176 C 154.106 180.857,154.020 181.117,161.161 190.049 C 166.251 196.416,165.749 196.167,170.536 194.707 C 175.131 193.305,175.156 193.261,175.735 185.479 C 175.996 181.972,176.303 178.619,176.417 178.028 C 176.638 176.885,174.839 174.585,173.761 174.632 C 173.475 174.644,169.742 175.789,165.464 177.176 M172.961 183.496 C 172.529 191.581,172.718 191.091,169.699 191.956 C 166.711 192.811,167.386 193.244,163.115 187.730 C 158.887 182.271,158.854 182.359,166.016 180.036 C 174.018 177.439,173.303 177.083,172.961 183.496 M230.971 193.840 C 230.157 194.534,226.504 197.922,222.852 201.370 C 219.199 204.818,212.555 211.038,208.086 215.193 C 199.926 222.779,199.425 223.431,200.977 224.436 C 201.842 224.997,204.974 222.241,225.098 203.207 C 234.457 194.354,234.989 193.716,233.619 192.982 C 232.591 192.432,232.638 192.417,230.971 193.840 M270.052 193.165 C 265.967 194.883,266.629 205.279,270.875 206.076 C 274.252 206.710,275.781 204.613,275.781 199.349 C 275.781 193.938,273.660 191.648,270.052 193.165 M280.768 193.720 L 279.492 194.861 279.520 199.245 L 279.547 203.629 280.795 204.744 C 284.586 208.131,287.891 205.586,287.891 199.279 C 287.891 192.913,284.568 190.319,280.768 193.720 M272.266 199.609 C 272.266 202.821,272.161 203.516,271.680 203.516 C 271.067 203.516,270.767 196.551,271.354 195.964 C 272.070 195.248,272.266 196.031,272.266 199.609 M283.757 195.940 C 284.809 196.344,284.655 203.125,283.594 203.125 C 283.164 203.125,282.806 203.081,282.798 203.027 C 282.551 201.359,282.385 196.754,282.555 196.310 C 282.816 195.629,282.888 195.607,283.757 195.940 M242.383 202.040 C 235.590 208.166,201.925 239.178,198.336 242.615 C 195.996 244.856,196.541 247.170,199.025 245.542 C 200.106 244.835,213.759 232.391,222.253 224.371 C 223.871 222.844,230.153 217.084,236.212 211.571 C 248.640 200.264,247.964 200.988,247.048 199.975 C 246.036 198.857,245.791 198.966,242.383 202.040 M95.898 209.780 C 106.232 211.734,107.797 212.458,107.807 215.291 L 107.813 217.104 103.418 215.583 C 98.812 213.989,91.899 210.714,90.234 209.337 L 89.258 208.529 90.625 208.785 C 91.377 208.926,93.750 209.374,95.898 209.780 M88.653 211.689 C 93.257 214.454,96.190 215.758,102.862 218.006 C 105.618 218.935,108.013 219.966,108.184 220.297 C 108.693 221.281,109.099 228.125,108.649 228.125 C 106.395 228.125,102.365 226.763,100.609 225.408 C 99.522 224.570,95.653 221.797,92.012 219.246 C 85.004 214.336,85.169 214.524,84.636 210.840 C 84.371 209.009,84.094 208.950,88.653 211.689 M266.276 215.104 C 266.133 215.247,266.016 215.838,266.016 216.417 L 266.016 217.468 278.339 217.661 C 293.288 217.894,294.246 217.739,291.964 215.458 C 291.324 214.818,266.898 214.482,266.276 215.104 M233.527 220.382 C 221.775 231.036,203.515 248.069,203.522 248.371 C 203.566 250.331,205.430 250.507,207.124 248.712 C 208.932 246.793,230.733 226.714,238.574 219.744 C 240.417 218.106,240.569 217.611,239.520 216.662 C 238.524 215.761,238.843 215.563,233.527 220.382 M115.757 225.093 C 115.328 225.810,112.007 227.785,111.734 227.484 C 111.566 227.300,111.320 225.391,111.189 223.242 L 110.950 219.336 113.439 222.070 C 114.809 223.574,115.852 224.934,115.757 225.093 M266.276 220.182 C 266.133 220.326,266.016 220.941,266.016 221.549 L 266.016 222.656 279.057 222.656 L 292.099 222.656 292.271 221.482 C 292.366 220.836,292.357 220.221,292.250 220.115 C 291.955 219.819,266.573 219.885,266.276 220.182 M93.243 223.514 C 94.433 224.667,95.341 230.859,94.320 230.859 C 94.204 230.859,93.413 230.504,92.563 230.070 L 91.016 229.281 91.016 225.773 C 91.016 221.799,91.240 221.572,93.243 223.514 M266.016 226.367 L 266.016 227.734 279.102 227.734 L 292.188 227.734 292.188 226.367 L 292.188 225.000 279.102 225.000 L 266.016 225.000 266.016 226.367 M266.016 231.403 L 266.016 232.729 272.754 232.993 C 276.460 233.138,282.305 233.201,285.742 233.132 L 291.992 233.008 292.113 231.543 L 292.235 230.078 279.125 230.078 L 266.016 230.078 266.016 231.403 M94.962 234.341 C 98.485 236.041,102.400 237.845,103.661 238.349 L 105.955 239.266 106.073 241.929 C 106.217 245.195,107.235 245.511,95.996 238.799 C 87.704 233.848,87.109 233.417,87.109 232.371 C 87.109 230.708,87.786 230.877,94.962 234.341 M81.173 236.352 C 82.127 238.165,85.500 244.307,88.668 250.000 C 91.837 255.693,95.056 261.494,95.823 262.891 C 99.090 268.840,102.425 285.036,100.293 284.601 C 99.810 284.503,97.701 284.132,95.606 283.777 C 91.053 283.005,91.596 283.768,90.426 276.486 C 89.189 268.793,89.632 269.944,81.927 254.401 L 75.298 241.028 76.550 237.799 C 77.238 236.023,77.965 234.161,78.164 233.661 C 78.721 232.264,79.291 232.773,81.173 236.352 M88.759 237.636 C 100.170 244.684,104.742 247.295,107.243 248.191 C 108.397 248.605,117.524 255.043,117.561 255.469 C 117.570 255.576,112.532 255.664,106.364 255.664 L 95.151 255.664 92.947 251.758 C 89.140 245.011,83.984 235.580,83.984 235.364 C 83.984 234.836,85.035 235.335,88.759 237.636 M266.406 241.443 C 266.406 242.750,266.522 243.008,267.024 242.815 C 267.364 242.685,273.264 242.578,280.135 242.578 L 292.628 242.578 292.505 241.309 L 292.383 240.039 279.395 239.936 L 266.406 239.833 266.406 241.443 M117.444 241.504 C 119.490 243.016,123.670 247.040,122.886 246.743 C 122.057 246.429,116.210 242.888,115.137 242.049 C 113.272 240.593,115.499 240.067,117.444 241.504 M116.131 245.659 C 118.324 247.138,121.567 249.008,123.340 249.815 C 127.227 251.583,127.345 251.953,124.023 251.953 C 122.256 251.953,121.483 252.101,121.478 252.441 C 121.457 254.194,120.759 254.020,116.931 251.307 C 114.816 249.808,112.163 247.992,111.035 247.272 C 109.907 246.552,108.984 245.830,108.984 245.669 C 108.984 245.508,108.880 245.105,108.753 244.774 C 108.531 244.194,110.340 243.082,111.639 243.001 C 111.918 242.983,113.939 244.179,116.131 245.659 M158.106 246.191 C 154.803 251.561,144.111 264.163,143.433 263.485 C 143.317 263.369,143.663 262.792,144.204 262.203 C 144.745 261.614,145.604 260.518,146.115 259.766 C 147.267 258.068,157.031 245.758,157.965 244.824 C 159.287 243.503,159.355 244.161,158.106 246.191 M266.191 245.029 C 266.083 245.309,266.061 245.971,266.142 246.500 L 266.289 247.461 279.457 247.564 L 292.626 247.667 292.504 246.197 L 292.383 244.727 279.384 244.624 C 268.993 244.541,266.347 244.623,266.191 245.029 M162.891 246.406 L 163.759 247.109 161.107 248.941 C 157.878 251.170,157.725 251.085,159.556 248.070 C 161.098 245.531,161.539 245.311,162.891 246.406 M168.218 249.804 C 167.792 250.916,160.914 259.763,160.048 260.314 C 159.571 260.618,156.279 262.386,152.734 264.244 C 145.674 267.944,145.310 268.205,144.700 270.009 C 144.157 271.612,143.565 271.771,142.753 270.532 C 141.901 269.231,142.172 268.810,147.253 263.549 C 149.366 261.361,151.996 258.483,153.098 257.155 C 156.086 253.554,169.232 247.163,168.218 249.804 M266.222 250.790 C 266.304 251.440,266.470 252.131,266.590 252.325 C 266.829 252.711,289.231 252.855,291.309 252.484 C 292.446 252.280,292.578 252.120,292.578 250.933 L 292.578 249.609 279.325 249.609 L 266.073 249.609 266.222 250.790 M275.774 254.224 C 273.189 256.317,274.991 261.328,278.328 261.328 C 282.217 261.328,284.422 257.042,281.854 254.474 C 280.624 253.245,277.160 253.102,275.774 254.224 M169.531 254.333 C 169.531 254.978,164.696 264.453,164.367 264.453 C 163.558 264.453,162.784 262.452,163.253 261.576 C 165.063 258.195,169.531 253.039,169.531 254.333 M132.211 254.823 C 133.281 255.606,132.642 255.706,128.125 255.468 C 125.869 255.350,124.287 255.136,124.609 254.993 C 126.419 254.191,131.200 254.084,132.211 254.823 M280.000 255.938 C 280.685 256.623,280.572 257.128,279.827 256.711 C 279.475 256.514,278.859 256.438,278.460 256.542 C 277.751 256.727,277.476 256.248,277.995 255.729 C 278.409 255.315,279.489 255.427,280.000 255.938 M280.410 257.643 C 280.886 258.052,279.793 258.594,278.493 258.594 C 277.038 258.594,276.482 258.023,277.218 257.287 C 277.453 257.052,280.061 257.343,280.410 257.643 M64.260 258.987 C 64.393 259.203,64.228 259.486,63.892 259.615 C 63.556 259.744,63.281 260.091,63.281 260.386 C 63.281 260.681,62.886 261.008,62.402 261.112 C 61.072 261.398,48.828 261.558,48.828 261.289 C 48.828 261.087,61.495 258.780,63.356 258.642 C 63.719 258.616,64.126 258.771,64.260 258.987 M68.281 259.063 C 68.956 259.738,68.871 259.976,67.773 260.476 C 66.885 260.881,66.797 260.839,66.797 260.018 C 66.797 258.615,67.428 258.209,68.281 259.063 M339.544 261.475 C 338.472 262.048,326.607 277.238,326.309 278.418 C 325.839 280.278,326.463 281.086,330.169 283.421 C 333.535 285.541,340.007 289.703,344.828 292.847 C 350.914 296.817,354.685 298.030,355.227 296.191 C 355.404 295.590,357.245 282.787,357.554 280.001 C 357.653 279.108,356.665 277.891,351.054 271.994 C 347.414 268.169,343.737 264.216,342.883 263.211 C 341.063 261.069,340.678 260.868,339.544 261.475 M72.939 266.016 C 72.733 267.276,71.298 266.844,69.822 265.077 C 68.105 263.024,68.093 262.971,69.238 262.517 C 70.226 262.125,73.127 264.868,72.939 266.016 M161.284 265.448 C 161.797 266.632,162.148 267.669,162.065 267.752 C 160.954 268.856,144.922 276.160,144.922 275.562 C 144.922 274.848,147.021 271.092,147.868 270.289 C 148.666 269.534,159.366 263.474,160.156 263.330 C 160.264 263.311,160.771 264.264,161.284 265.448 M66.975 265.820 L 68.810 267.969 57.873 267.969 L 46.936 267.969 46.423 266.504 C 46.142 265.698,45.908 264.863,45.905 264.648 C 45.897 264.191,50.899 263.852,59.230 263.747 L 65.139 263.672 66.975 265.820 M114.931 264.280 C 113.463 265.308,113.830 266.016,115.830 266.016 L 117.598 266.016 116.992 264.844 C 116.296 263.498,116.117 263.449,114.931 264.280 M338.895 271.574 C 337.942 278.929,338.311 278.439,333.613 278.587 C 328.844 278.738,328.850 279.069,333.516 273.294 C 335.622 270.687,337.750 267.973,338.246 267.263 C 339.566 265.372,339.637 265.847,338.895 271.574 M206.179 272.978 C 205.947 281.901,204.991 283.421,199.702 283.282 C 197.093 283.213,196.975 283.119,197.844 281.793 C 199.522 279.232,198.735 276.619,194.483 270.630 C 193.006 268.549,191.797 266.747,191.797 266.626 C 191.797 266.505,195.071 266.406,199.073 266.406 L 206.350 266.406 206.179 272.978 M293.750 276.184 C 293.750 291.525,294.357 291.020,275.977 290.996 C 258.469 290.974,258.227 290.805,258.212 278.613 L 258.203 271.875 268.555 271.875 L 278.906 271.875 278.906 270.745 C 278.906 269.143,278.890 269.141,266.570 269.141 L 255.469 269.141 255.469 271.094 L 255.469 273.047 232.283 273.047 L 209.097 273.047 208.870 270.041 C 208.745 268.387,208.730 266.893,208.836 266.720 C 208.943 266.548,228.092 266.406,251.390 266.406 L 293.750 266.406 293.750 276.184 M348.746 273.805 L 354.702 280.032 354.082 284.255 C 353.152 290.579,353.349 290.420,350.170 287.429 C 348.680 286.028,345.924 283.518,344.046 281.852 C 341.352 279.463,340.668 278.646,340.809 277.986 C 340.906 277.525,341.177 275.479,341.410 273.438 C 341.935 268.839,342.174 267.578,342.519 267.578 C 342.668 267.578,345.469 270.380,348.746 273.805 M37.546 272.168 C 36.422 276.021,35.942 277.873,35.940 278.365 C 35.934 279.487,47.370 280.916,48.861 279.978 C 49.380 279.652,50.723 279.089,51.845 278.727 C 54.046 278.017,54.680 276.944,54.685 273.916 C 54.688 272.140,53.757 271.875,47.501 271.875 C 41.784 271.875,41.400 271.762,42.643 270.439 L 43.496 269.531 40.905 269.531 L 38.314 269.531 37.546 272.168 M304.946 272.844 C 303.476 274.314,303.811 277.628,305.521 278.544 C 306.392 279.010,311.956 278.702,312.870 278.138 C 313.828 277.546,312.996 273.067,311.847 272.631 C 310.276 272.034,305.613 272.178,304.946 272.844 M132.437 274.005 C 131.672 274.927,132.112 275.963,133.328 276.102 C 134.590 276.248,135.547 275.601,135.547 274.603 C 135.547 273.422,133.283 272.986,132.437 274.005 M108.623 274.728 C 108.268 275.663,106.679 282.093,105.819 286.077 C 105.372 288.150,105.389 288.401,106.002 288.744 C 106.374 288.952,109.966 291.597,113.984 294.621 C 127.020 304.432,125.430 304.423,132.684 294.727 C 141.207 283.334,141.371 282.260,134.607 282.190 C 130.329 282.146,127.546 281.329,121.094 278.223 C 111.599 273.653,109.279 273.003,108.623 274.728 M45.035 275.098 C 46.162 275.940,46.085 277.554,44.922 277.462 C 40.692 277.131,39.505 276.877,39.670 276.342 C 39.766 276.034,39.926 275.518,40.027 275.195 C 40.258 274.454,44.075 274.380,45.035 275.098 M309.590 275.000 C 310.258 275.000,310.459 275.166,310.298 275.586 C 310.004 276.351,307.031 276.410,307.031 275.651 C 307.031 274.911,307.487 274.551,308.117 274.793 C 308.414 274.907,309.077 275.000,309.590 275.000 M51.052 275.642 C 51.336 276.381,50.148 277.429,49.226 277.254 C 48.900 277.192,48.577 276.660,48.509 276.071 C 48.362 274.797,50.584 274.423,51.052 275.642 M114.367 278.288 C 115.596 278.807,118.470 280.123,120.753 281.213 C 123.037 282.303,125.849 283.438,127.003 283.736 L 129.102 284.277 127.539 284.720 C 123.631 285.829,123.696 285.846,117.578 282.091 C 111.063 278.094,109.486 276.226,114.367 278.288 M187.078 278.238 C 176.106 283.923,165.625 289.579,165.625 289.817 C 165.625 289.980,165.986 290.440,166.428 290.840 C 167.271 291.603,189.026 281.239,189.836 279.688 C 190.823 277.797,189.387 277.042,187.078 278.238 M116.212 284.376 C 123.746 288.909,123.097 288.033,122.964 293.489 L 122.852 298.111 117.764 294.065 C 114.966 291.839,111.845 289.422,110.830 288.693 C 108.794 287.231,108.755 287.078,109.445 283.331 C 109.992 280.366,109.396 280.274,116.212 284.376 M345.549 286.991 C 349.139 290.149,351.876 292.799,351.630 292.881 C 351.155 293.039,346.414 290.558,343.164 288.450 C 342.090 287.753,339.277 286.027,336.914 284.614 C 334.551 283.201,332.354 281.876,332.031 281.670 C 331.634 281.416,332.662 281.289,335.233 281.273 L 339.022 281.250 345.549 286.991 M62.109 287.362 C 58.051 290.924,57.145 291.462,51.367 293.739 C 43.123 296.989,42.420 297.423,38.531 301.665 C 35.273 305.219,35.065 305.545,35.478 306.450 L 35.921 307.422 46.306 307.422 C 52.884 307.422,56.976 307.270,57.467 307.007 C 57.893 306.779,60.112 305.184,62.398 303.463 C 64.685 301.742,67.061 300.072,67.680 299.752 C 69.314 298.907,74.015 287.921,73.124 287.030 C 72.938 286.844,71.306 286.341,69.498 285.913 C 67.690 285.484,65.947 285.057,65.625 284.962 C 65.293 284.865,63.770 285.904,62.109 287.362 M135.156 286.581 C 135.156 286.966,126.547 298.224,126.139 298.372 C 125.942 298.444,125.781 297.548,125.781 296.381 C 125.781 295.213,125.672 292.958,125.539 291.368 L 125.296 288.477 129.347 287.445 C 133.516 286.384,135.156 286.140,135.156 286.581 M313.184 287.776 C 312.671 288.348,312.500 289.218,312.500 291.262 L 312.500 293.987 315.164 294.845 C 320.521 296.570,323.127 295.547,323.236 291.675 L 323.300 289.405 321.660 288.444 C 319.314 287.070,314.181 286.665,313.184 287.776 M63.845 290.686 C 62.001 292.579,60.691 293.467,57.475 295.002 C 55.248 296.065,51.238 298.341,48.563 300.060 C 40.832 305.029,38.218 305.814,41.850 302.078 C 43.739 300.133,46.709 298.507,53.251 295.834 C 59.139 293.428,59.717 293.117,61.523 291.385 C 65.361 287.705,67.323 287.114,63.845 290.686 M223.828 289.638 C 208.674 291.869,210.782 290.988,202.734 298.453 C 195.462 305.198,187.466 312.109,186.934 312.109 C 186.676 312.109,185.160 311.663,183.565 311.117 C 172.338 307.278,164.156 305.391,163.285 306.440 C 161.745 308.297,165.434 310.961,182.715 320.473 C 185.347 321.922,187.500 323.290,187.500 323.514 C 187.500 324.976,192.200 323.544,200.005 319.704 C 208.991 315.285,208.441 315.334,208.265 318.970 C 208.078 322.807,209.172 324.219,212.330 324.219 C 214.846 324.219,215.723 323.280,215.783 320.525 C 215.841 317.901,214.274 316.658,210.443 316.288 C 208.155 316.068,208.533 315.697,214.284 312.513 C 220.196 309.241,221.403 308.007,223.084 303.516 C 224.188 300.565,224.214 300.544,230.840 297.288 C 237.471 294.030,237.444 294.066,236.096 290.109 C 235.327 287.852,235.825 287.871,223.828 289.638 M319.160 290.440 C 319.794 290.768,320.313 291.172,320.313 291.338 C 320.313 292.666,317.046 293.026,315.603 291.858 C 313.577 290.217,316.487 289.057,319.160 290.440 M67.962 293.872 C 66.627 297.442,58.412 303.880,54.586 304.356 C 51.637 304.722,46.875 304.740,46.875 304.384 C 46.875 303.816,56.432 298.121,59.495 296.864 C 62.428 295.659,66.145 293.208,67.775 291.402 C 68.898 290.158,68.975 291.167,67.962 293.872 M152.930 296.323 C 131.336 308.002,108.222 319.244,106.259 319.023 C 103.656 318.731,102.340 317.017,94.996 304.359 C 87.670 291.730,88.443 292.619,85.960 293.971 C 80.662 296.854,80.628 297.543,85.356 306.093 C 89.126 312.910,89.700 313.594,91.044 312.875 C 92.149 312.284,92.122 312.215,88.086 305.303 C 86.045 301.808,84.375 298.838,84.375 298.703 C 84.375 298.352,86.567 297.266,87.275 297.266 C 87.824 297.266,91.456 303.129,97.887 314.396 C 101.048 319.934,102.340 321.211,105.447 321.870 L 107.901 322.391 122.212 315.266 C 139.125 306.847,161.409 295.151,162.771 293.980 C 163.534 293.323,163.677 292.932,163.465 292.084 C 163.114 290.687,164.035 290.317,152.930 296.323 M233.594 291.898 C 233.594 292.512,233.232 292.736,227.786 295.499 L 223.364 297.742 220.833 296.911 C 216.210 295.393,213.979 293.947,215.707 293.586 C 222.041 292.265,233.594 291.175,233.594 291.898 M211.816 296.071 C 213.292 296.811,213.242 296.980,210.254 301.386 L 207.617 305.273 198.470 311.426 C 188.526 318.114,188.699 318.023,188.613 316.602 C 188.581 316.064,188.537 315.482,188.516 315.307 C 188.494 315.132,191.014 312.811,194.116 310.150 C 197.218 307.489,202.125 303.057,205.021 300.301 C 207.918 297.546,210.390 295.346,210.515 295.412 C 210.640 295.478,211.226 295.775,211.816 296.071 M216.732 298.780 C 217.146 299.042,216.999 299.614,216.022 301.549 C 215.345 302.890,214.886 304.233,215.001 304.533 C 215.460 305.731,216.436 304.949,217.852 302.246 C 219.323 299.439,220.108 298.916,221.231 299.994 C 221.544 300.295,218.765 305.926,217.822 306.899 C 216.965 307.784,209.538 311.845,201.087 316.049 C 186.233 323.439,187.960 320.894,204.833 310.528 C 208.659 308.177,211.012 305.695,213.698 301.174 C 215.307 298.465,215.721 298.139,216.732 298.780 M148.828 306.848 C 131.582 315.835,109.396 326.997,106.950 327.917 C 103.074 329.376,99.944 327.860,98.033 323.601 C 96.777 320.803,96.576 320.626,95.002 320.941 L 93.831 321.175 95.030 323.891 C 97.397 329.249,100.485 331.507,105.003 331.180 C 107.243 331.018,123.441 323.494,134.122 317.655 C 137.489 315.813,137.835 315.788,136.992 317.444 C 136.681 318.055,135.592 320.624,134.573 323.154 L 132.719 327.753 133.729 329.209 C 134.285 330.009,135.873 331.787,137.258 333.159 L 139.777 335.653 144.791 336.560 C 152.128 337.886,151.813 337.941,152.329 335.254 C 152.566 334.019,153.649 328.710,154.736 323.458 C 157.185 311.619,157.216 311.691,150.718 314.063 C 146.854 315.473,146.383 315.490,143.737 314.322 L 141.671 313.411 152.476 307.986 L 163.281 302.562 163.281 301.086 C 163.281 299.157,164.589 298.635,148.828 306.848 M227.864 309.662 C 225.256 309.846,225.164 309.994,224.646 314.804 L 224.209 318.866 225.444 321.054 C 230.709 330.385,231.070 330.718,235.423 330.251 C 238.444 329.928,238.142 330.450,239.065 323.949 C 240.231 315.741,240.302 316.150,237.088 312.502 L 234.332 309.375 232.107 309.447 C 230.884 309.487,228.974 309.584,227.864 309.662 M178.666 312.538 C 185.926 314.834,185.432 314.529,186.117 317.128 C 186.857 319.931,186.848 319.929,179.588 315.635 C 169.373 309.594,169.374 309.599,178.666 312.538 M280.273 314.117 C 277.266 314.986,274.639 315.855,274.436 316.049 C 274.116 316.355,272.728 326.063,272.675 328.364 C 272.660 329.041,273.307 329.463,276.270 330.708 L 279.883 332.227 289.058 332.086 L 298.234 331.946 296.383 333.925 C 293.151 337.380,293.831 338.694,299.414 339.787 C 308.610 341.586,311.641 341.943,313.389 341.434 C 321.521 339.066,321.451 339.097,322.255 337.521 C 323.234 335.603,322.937 335.319,318.164 333.608 C 312.160 331.457,312.210 331.523,316.367 331.208 C 322.767 330.722,322.715 330.838,320.505 322.037 C 318.387 313.602,318.925 314.233,313.574 313.919 C 284.171 312.192,286.998 312.175,280.273 314.117 M235.306 314.845 C 236.750 316.443,237.188 317.734,236.151 317.336 C 235.586 317.119,232.813 313.940,232.813 313.508 C 232.813 312.807,234.078 313.485,235.306 314.845 M228.898 316.942 L 228.889 319.336 228.129 317.661 C 227.255 315.735,227.419 313.315,228.370 314.104 C 228.720 314.394,228.903 315.382,228.898 316.942 M70.508 316.283 C 64.638 320.140,63.708 321.301,65.137 322.985 C 65.863 323.841,72.247 325.222,75.000 325.119 C 78.052 325.004,81.797 323.704,80.564 323.186 C 79.367 322.684,80.682 322.397,83.386 322.570 C 85.872 322.730,86.328 322.664,86.328 322.150 C 86.328 321.814,86.579 321.289,86.885 320.983 C 87.507 320.362,89.059 317.904,89.061 317.538 C 89.068 316.420,83.648 314.897,80.984 315.268 C 78.690 315.587,77.917 315.548,76.737 315.056 C 74.522 314.130,73.470 314.337,70.508 316.283 M296.220 315.793 C 300.694 316.091,304.459 316.438,304.586 316.565 C 304.714 316.693,304.598 316.797,304.329 316.797 C 303.739 316.797,286.757 318.281,284.631 318.518 C 282.703 318.733,278.722 317.617,279.883 317.187 C 280.927 316.801,286.761 315.353,287.500 315.297 C 287.822 315.272,291.746 315.496,296.220 315.793 M153.125 316.330 C 153.125 317.245,149.671 333.662,149.429 333.899 C 149.116 334.206,147.710 332.677,145.106 329.201 L 143.425 326.956 144.880 322.771 L 146.334 318.587 149.437 317.341 C 152.910 315.945,153.125 315.886,153.125 316.330 M142.489 316.824 L 143.688 317.242 141.918 322.312 C 140.362 326.766,140.214 327.462,140.700 328.046 C 141.004 328.412,142.203 329.831,143.363 331.200 L 145.473 333.689 143.732 333.405 C 141.512 333.042,140.152 332.197,137.585 329.587 L 135.521 327.488 136.464 325.756 C 136.983 324.803,138.062 322.310,138.861 320.215 C 140.370 316.261,140.507 316.133,142.489 316.824 M75.789 317.778 C 77.587 318.913,77.739 319.579,76.367 320.313 C 75.296 320.886,75.139 321.467,75.859 322.188 C 76.224 322.552,76.140 322.656,75.480 322.656 C 73.755 322.656,68.730 321.350,68.867 320.938 C 68.976 320.611,73.658 316.952,74.129 316.825 C 74.187 316.810,74.934 317.239,75.789 317.778 M232.137 317.871 C 232.840 318.650,232.650 325.187,231.936 324.746 C 231.018 324.178,230.480 321.877,230.723 319.553 C 230.988 317.021,231.172 316.802,232.137 317.871 M160.277 318.151 C 157.944 319.165,158.143 323.105,160.554 323.634 C 163.359 324.250,165.625 323.091,165.625 321.040 C 165.625 318.239,163.150 316.901,160.277 318.151 M317.913 323.222 C 318.574 325.790,319.063 327.942,318.999 328.006 C 318.179 328.826,307.102 329.198,304.962 328.477 C 302.843 327.763,302.525 327.739,302.139 328.267 C 301.780 328.759,281.031 330.000,280.603 329.556 C 280.387 329.332,282.348 321.708,282.642 321.623 C 282.843 321.566,288.721 320.886,295.703 320.113 C 302.686 319.340,310.068 318.483,312.109 318.210 C 316.677 317.598,316.404 317.363,317.913 323.222 M83.984 318.351 C 84.919 318.942,83.739 319.786,81.543 320.097 C 79.171 320.434,79.075 319.771,81.348 318.739 C 83.281 317.862,83.224 317.870,83.984 318.351 M228.906 320.746 C 228.906 321.414,228.568 321.084,227.962 319.824 L 227.352 318.555 228.129 319.477 C 228.557 319.984,228.906 320.555,228.906 320.746 M236.289 321.484 C 235.704 324.883,235.545 325.435,235.209 325.228 C 234.914 325.045,235.345 320.379,235.769 319.173 C 236.250 317.804,236.631 319.497,236.289 321.484 M212.891 319.844 C 212.891 320.560,212.194 321.484,211.654 321.484 C 210.991 321.484,210.446 319.835,210.995 319.488 C 211.904 318.912,212.891 319.097,212.891 319.844 M278.535 320.127 C 279.886 320.826,279.851 320.529,279.073 324.664 C 278.344 328.534,278.149 328.805,276.751 327.889 C 275.718 327.212,275.691 327.107,275.924 324.598 C 276.416 319.304,276.539 319.095,278.535 320.127 M259.570 325.419 C 258.281 326.047,257.106 326.604,256.958 326.659 C 255.697 327.123,256.375 330.132,258.129 331.852 L 259.961 333.649 262.695 333.427 C 267.459 333.042,267.563 332.945,267.573 328.892 L 267.578 326.730 265.032 325.474 C 262.027 323.993,262.492 323.998,259.570 325.419 M178.401 327.687 C 178.142 328.004,176.214 329.380,174.116 330.744 C 170.540 333.070,170.318 333.290,170.553 334.288 C 170.956 335.998,170.915 335.977,179.746 338.963 L 181.562 339.577 185.215 337.456 L 188.867 335.335 188.867 333.586 C 188.867 331.615,189.370 331.993,182.503 328.798 C 179.366 327.339,178.808 327.188,178.401 327.687 M264.453 328.697 C 264.453 330.108,263.204 330.651,261.722 329.885 C 259.672 328.825,260.199 327.734,262.760 327.734 C 264.299 327.734,264.453 327.822,264.453 328.697 M183.394 331.877 C 186.462 333.106,186.454 333.017,183.694 334.978 L 181.470 336.558 178.041 335.173 C 176.155 334.412,174.611 333.684,174.611 333.555 C 174.607 332.960,177.797 331.891,178.102 332.385 C 178.507 333.040,180.179 332.076,179.900 331.348 C 179.615 330.607,180.590 330.755,183.394 331.877 M311.792 333.859 C 315.377 335.333,318.417 336.646,318.548 336.777 C 318.884 337.114,312.916 338.672,311.288 338.672 C 309.761 338.672,298.463 336.875,298.175 336.586 C 298.072 336.483,298.835 335.636,299.872 334.703 C 300.908 333.771,302.196 332.523,302.733 331.931 C 303.947 330.594,303.752 330.553,311.792 333.859 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path></g></svg>
\ No newline at end of file
diff --git a/apps/web/src/assets/images/default-poster.png b/apps/web/src/assets/images/default-poster.png
new file mode 100644
index 0000000..8ae3de3
Binary files /dev/null and b/apps/web/src/assets/images/default-poster.png differ
diff --git a/apps/web/src/assets/images/empty-category.svg b/apps/web/src/assets/images/empty-category.svg
new file mode 100644
index 0000000..03f5f02
--- /dev/null
+++ b/apps/web/src/assets/images/empty-category.svg
@@ -0,0 +1,569 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#ffffff" stroke="none">
+<path d="M5007 9169 c-8 -11 -39 -46 -68 -78 -113 -120 -113 -121 -101 -133
+16 -16 377 -24 387 -9 4 7 -13 36 -39 68 -25 30 -63 82 -84 114 -40 63 -70 75
+-95 38z m53 -146 c0 -15 -36 -18 -45 -3 -3 5 -1 19 6 32 11 21 12 21 25 3 8
+-10 14 -25 14 -32z"/>
+<path d="M3763 9094 c-63 -31 -111 -139 -94 -214 12 -56 39 -99 74 -120 35
+-22 97 -26 129 -9 17 9 28 2 86 -58 170 -174 478 -499 572 -603 57 -63 118
+-130 134 -148 l31 -33 -32 -24 c-41 -32 -132 -155 -168 -225 -16 -30 -38 -89
+-50 -130 l-21 -75 -1319 -1 -1320 0 -56 -22 c-65 -26 -159 -114 -193 -182 -44
+-86 -61 -160 -59 -245 10 -313 13 -3440 4 -3955 -10 -567 -10 -620 5 -665 30
+-88 79 -160 143 -208 118 -90 229 -121 415 -115 58 2 106 -1 106 -5 0 -13 -41
+-89 -71 -134 -16 -23 -68 -113 -115 -200 -84 -155 -181 -309 -206 -331 -8 -6
+-125 -15 -293 -21 -154 -6 -300 -15 -325 -21 -25 -5 -71 -9 -103 -10 -50 0
+-59 -3 -68 -23 -13 -30 4 -77 29 -77 9 0 29 8 42 18 24 16 230 17 3980 18
+3759 1 3957 0 3990 -16 31 -16 38 -16 63 -4 33 18 46 59 24 81 -19 19 -191 32
+-447 33 l-176 0 -39 52 c-63 84 -100 141 -305 478 -18 30 -51 81 -73 113 l-39
+59 138 -7 c96 -5 157 -4 199 5 135 27 270 131 330 254 46 93 50 123 48 296 -1
+80 -4 1122 -6 2316 l-3 2171 -37 77 c-63 132 -156 212 -306 261 -52 17 -125
+17 -1383 10 -1200 -6 -1328 -5 -1328 9 0 39 -51 171 -95 244 -26 44 -74 109
+-107 144 -32 34 -57 66 -56 70 3 7 474 499 675 705 l119 121 65 -5 c101 -8
+154 29 180 128 14 54 6 105 -24 150 -72 106 -203 106 -285 0 -41 -55 -48 -83
+-33 -143 l13 -48 -284 -293 c-157 -160 -321 -332 -365 -382 -45 -49 -103 -112
+-131 -139 l-50 -48 -44 16 c-23 9 -70 20 -103 24 l-60 7 -3 201 -2 200 -43 -5
+-42 -6 -3 -197 -2 -198 -35 0 c-20 0 -60 -9 -89 -19 l-54 -19 -114 117 c-62
+64 -219 229 -348 366 -129 138 -262 278 -294 313 l-60 63 11 51 c19 94 -27
+180 -113 211 -60 21 -89 21 -131 1z m2575 -130 c12 -14 22 -33 22 -43 0 -28
+-49 -71 -81 -71 -57 0 -79 81 -34 126 30 30 58 26 93 -12z m-2454 5 c33 -26
+34 -62 1 -94 -24 -25 -68 -33 -92 -17 -11 7 -33 54 -33 71 0 5 9 20 21 35 25
+32 66 34 103 5z m1309 -1084 c146 -58 229 -135 294 -275 19 -41 39 -83 44 -92
+13 -25 11 -58 -3 -58 -29 0 -58 41 -58 80 0 81 -166 258 -232 248 -19 -3 -17
+-8 24 -56 49 -57 148 -228 148 -255 0 -16 -33 -17 -425 -17 -234 0 -428 1
+-432 3 -26 9 41 170 109 261 28 37 72 83 97 102 119 88 299 112 434 59z m257
+-320 c0 -5 -5 -3 -10 5 -5 8 -10 20 -10 25 0 6 5 3 10 -5 5 -8 10 -19 10 -25z
+m-870 -219 c1323 0 2457 1 2520 2 63 1 369 0 680 -2 l565 -3 48 -23 c74 -35
+152 -112 188 -185 l31 -64 -3 -1748 c-4 -1845 -4 -1851 6 -2423 5 -271 4 -379
+-5 -420 -31 -137 -86 -205 -219 -269 l-76 -36 -3160 -1 c-1738 0 -3193 3
+-3233 7 -141 14 -268 105 -309 222 -16 48 -18 87 -14 482 2 237 5 1159 6 2050
+2 891 6 1676 10 1743 7 116 9 126 35 155 15 18 37 50 48 73 32 63 133 195 185
+240 53 47 154 98 212 109 51 9 75 22 75 40 0 53 -208 16 -316 -57 -46 -30
+-195 -231 -225 -302 -28 -68 -39 -58 -39 37 0 118 60 253 140 317 76 60 129
+71 305 62 77 -4 1222 -6 2545 -6z m2386 -5283 c97 -8 74 -18 -42 -18 -61 0
+-88 4 -91 13 -5 14 18 15 133 5z m400 -22 c-3 -4 4 -17 16 -27 11 -11 65 -78
+119 -151 90 -119 145 -180 156 -169 4 4 -57 108 -107 181 -31 46 -90 151 -90
+160 0 23 78 -67 162 -185 48 -69 127 -155 134 -147 8 8 -35 96 -83 169 -26 40
+-53 89 -60 108 -6 19 -13 31 -13 25 -1 -5 -6 1 -11 14 -12 31 -1 42 17 16 16
+-23 20 -29 107 -141 34 -45 78 -103 97 -129 19 -27 46 -55 60 -64 28 -18 32
+-26 -43 94 -64 103 -120 219 -115 242 2 12 17 -5 46 -52 24 -39 88 -133 144
+-210 55 -77 122 -174 150 -215 64 -97 86 -120 115 -120 36 0 28 52 -14 98 -7
+7 -13 22 -13 31 0 29 -26 84 -55 114 -15 16 -24 31 -21 34 9 9 -35 43 -85 64
+-42 18 -51 29 -107 128 -34 60 -62 112 -62 116 0 15 82 -80 120 -140 26 -39
+58 -72 92 -95 55 -37 79 -69 221 -298 37 -61 67 -113 67 -117 0 -3 -8 -4 -17
+-1 -10 3 -130 8 -268 11 -137 3 -262 7 -277 9 -15 2 -46 21 -70 44 -24 22 -68
+60 -98 84 -56 45 -84 92 -41 68 12 -6 21 -9 21 -6 0 2 27 -5 61 -15 33 -10 71
+-19 82 -19 21 1 21 1 4 11 -10 6 -55 23 -100 38 -145 49 -211 77 -277 117 -36
+22 -82 48 -104 59 -21 11 -59 38 -84 61 -40 36 -46 46 -47 84 l-1 42 18 -23
+c75 -98 107 -132 131 -145 16 -9 31 -13 34 -11 6 6 -23 64 -36 72 -19 11 -82
+125 -79 142 2 10 34 -25 91 -100 86 -114 118 -147 144 -147 23 0 14 18 -63
+132 -142 210 -105 195 58 -24 74 -100 113 -138 138 -138 11 0 -38 82 -123 208
+-54 78 -70 122 -46 122 5 0 8 -4 5 -9z m-5041 -22 c-9 -26 -43 -67 -68 -81
+-17 -9 -17 -7 -7 14 12 22 70 88 78 88 2 0 0 -9 -3 -21z m3405 2 c74 -6 169
+-13 210 -17 41 -3 107 -2 145 3 89 13 578 -1 621 -16 17 -7 59 -43 93 -81 59
+-66 154 -132 262 -183 88 -41 304 -180 401 -257 59 -47 105 -86 104 -88 -7 -6
+-4769 -3 -4839 4 l-75 7 70 66 c94 88 121 107 303 212 175 100 343 216 383
+264 48 57 60 60 257 61 99 0 209 4 245 8 65 7 100 3 275 -29 175 -33 439 -20
+745 35 97 18 137 20 250 15 88 -4 144 -3 160 4 26 11 154 9 390 -8z m-3161
+-42 c-6 -13 -31 -49 -54 -79 -46 -60 -90 -140 -78 -140 5 0 30 25 58 56 42 48
+50 54 56 38 6 -15 8 -12 8 12 1 25 53 114 67 114 2 0 1 -19 -2 -42 -6 -49 13
+-103 73 -201 23 -38 39 -55 45 -49 7 7 -10 50 -48 126 -39 79 -54 120 -47 127
+10 10 25 -10 120 -153 21 -32 44 -60 51 -63 30 -11 30 9 1 58 -54 94 -99 186
+-98 204 0 14 3 12 12 -7 6 -14 20 -34 30 -45 21 -22 127 -191 127 -201 0 -20
+-123 -86 -201 -107 -30 -9 -95 -27 -144 -40 -50 -14 -137 -45 -195 -70 -58
+-24 -114 -47 -124 -51 -15 -5 -17 -9 -8 -18 17 -17 15 -45 -4 -52 -25 -9 -304
+-7 -304 3 0 4 17 30 39 57 21 27 61 94 89 149 74 143 92 171 102 155 12 -19
+82 18 98 52 14 30 159 188 172 188 19 0 -9 -72 -33 -87 -30 -19 -79 -95 -81
+-126 -1 -26 3 -33 22 -35 23 -4 72 31 72 51 0 13 149 205 163 210 21 8 29 -10
+16 -34z m356 -127 c25 -40 43 -78 40 -83 -12 -18 -33 -8 -45 21 -7 17 -39 72
+-71 122 -33 50 -59 96 -59 102 1 19 89 -86 135 -162z m35 102 c49 -65 74 -120
+65 -142 -5 -14 -8 -13 -18 6 -7 12 -31 53 -54 92 -38 61 -53 100 -38 100 2 0
+23 -25 45 -56z m137 -37 c13 -27 22 -51 20 -53 -6 -7 -60 64 -79 103 -9 17
+-13 35 -10 38 9 9 39 -30 69 -88z m113 40 c0 -8 -11 -24 -25 -37 -22 -21 -25
+-22 -25 -5 0 19 27 55 42 55 4 0 8 -6 8 -13z m3850 -17 c20 -20 26 -40 13 -40
+-15 0 -73 40 -73 50 0 17 39 11 60 -10z m-4494 -467 c-3 -11 -21 -33 -39 -50
+l-32 -31 -110 7 c-60 5 -101 9 -90 9 12 1 26 7 33 14 7 7 46 13 95 14 85 3
+117 10 117 25 0 11 23 39 28 34 2 -2 1 -12 -2 -22z"/>
+<path d="M7017 7298 c-22 -16 -20 -17 114 -69 65 -25 92 -43 159 -106 104 -98
+145 -177 160 -307 13 -123 3 -3516 -11 -3571 -33 -124 -132 -235 -271 -304
+-47 -22 -87 -41 -91 -41 -3 0 -18 -5 -34 -12 -99 -40 -127 -41 -1243 -44
+-3194 -8 -3280 -8 -3475 14 -351 39 -470 114 -600 376 -38 78 -55 101 -70 101
+-27 0 -30 -30 -11 -106 28 -109 73 -188 150 -265 39 -38 94 -83 121 -98 52
+-28 165 -63 242 -75 l44 -6 -1 -258 -1 -257 27 -10 c15 -6 29 -8 31 -6 3 3 8
+118 11 255 5 230 6 251 22 251 10 0 21 -7 24 -16 3 -9 6 -121 6 -250 l0 -234
+30 0 30 0 0 236 0 235 23 -3 22 -3 3 -233 2 -232 29 0 28 0 7 92 c3 50 6 158
+6 240 0 138 1 148 19 148 26 0 31 -50 31 -287 l0 -194 28 3 27 3 5 230 c3 127
+7 231 8 233 1 1 9 2 17 2 8 0 16 -1 17 -2 1 -2 4 -106 7 -233 l6 -230 27 -3
+28 -3 2 233 3 233 25 0 25 0 3 -233 2 -232 30 0 30 0 0 230 c0 219 1 230 19
+230 10 0 22 -7 25 -16 3 -9 6 -109 6 -224 l0 -208 29 -4 28 -4 7 120 c3 65 6
+167 6 225 l0 106 1778 1 c977 1 1908 2 2067 4 160 1 312 -1 339 -5 l49 -8 -7
+-207 c-3 -114 -3 -215 0 -224 3 -9 17 -16 32 -16 l25 0 -7 223 -7 223 28 -2
+28 -1 3 -221 2 -222 35 0 35 0 0 220 0 220 25 0 25 0 0 -220 0 -220 35 0 35 0
+0 225 c0 218 1 225 20 225 19 0 20 -7 20 -118 0 -66 3 -167 7 -225 l6 -107 29
+0 28 0 0 224 c0 124 4 227 9 230 5 4 16 3 25 0 14 -5 16 -35 16 -231 l0 -224
+33 3 32 3 5 230 c4 200 7 230 21 233 14 2 17 -19 22 -164 4 -92 7 -198 7 -236
+l0 -68 30 0 30 0 0 230 c0 199 2 231 15 237 9 3 19 2 23 -2 4 -3 9 -110 11
+-236 l3 -229 34 0 34 0 0 226 c0 225 5 264 35 264 13 0 15 -37 15 -245 l0
+-245 30 0 30 0 2 262 3 262 90 18 c191 38 315 130 396 292 36 73 44 100 47
+159 4 65 3 69 -12 56 -41 -35 -56 -56 -96 -134 -85 -169 -171 -232 -411 -305
+-124 -38 -152 -42 -379 -61 -248 -21 -572 -21 -593 0 -5 5 14 16 45 26 105 34
+183 83 262 164 95 98 132 172 146 292 7 55 10 691 8 1829 -3 1629 -4 1749 -21
+1803 -37 126 -117 243 -209 311 -79 57 -269 96 -311 64z"/>
+<path d="M8127 7298 l-28 -10 23 -20 c13 -11 57 -36 98 -56 100 -48 198 -146
+259 -260 48 -89 63 -107 85 -99 21 8 10 76 -26 164 -33 81 -123 187 -192 228
+-81 47 -171 69 -219 53z"/>
+<path d="M3440 7190 c-1238 -6 -1245 -6 -1308 -27 -92 -32 -140 -63 -218 -145
+-60 -63 -74 -86 -104 -163 -28 -75 -35 -108 -40 -200 -8 -144 -3 -3027 5
+-3169 6 -101 9 -116 49 -200 75 -160 164 -233 335 -277 61 -16 134 -21 376
+-29 378 -12 4200 -4 4345 9 231 20 372 110 441 280 l23 56 2 868 c1 477 -1
+869 -5 871 -3 2 -41 1 -83 -1 l-77 -6 -1 -533 0 -534 44 0 c35 0 48 -5 56 -19
+19 -37 12 -58 -21 -65 -17 -3 -203 -6 -414 -6 l-382 0 -6 -182 c-4 -99 -7
+-286 -7 -414 0 -216 -1 -232 -17 -229 -10 2 -355 6 -768 9 -412 3 -762 9 -777
+12 -27 6 -37 27 -19 38 25 16 304 26 491 19 l206 -8 0 167 c0 115 -3 164 -11
+159 -25 -21 -252 -102 -337 -122 -189 -43 -215 -48 -295 -55 l-83 -7 0 -103 0
+-104 -50 0 -50 0 0 105 0 105 -59 0 c-130 0 -447 71 -584 131 -77 34 -134 67
+-360 206 l-52 31 -8 -36 c-5 -21 -6 -73 -2 -117 3 -44 5 -123 4 -175 -5 -207
+-8 -185 26 -182 70 7 915 6 968 -2 45 -6 57 -11 55 -24 -2 -8 -14 -19 -28 -22
+-40 -11 -773 -21 -957 -14 l-168 7 1 286 c0 157 4 301 9 320 7 34 5 37 -77
+114 l-85 80 -282 1 -281 1 0 -377 0 -376 315 -1 c173 -1 322 -4 330 -7 24 -10
+18 -41 -10 -48 -14 -4 -176 -6 -360 -6 -185 1 -340 -2 -345 -5 -17 -10 -20 79
+-18 452 l3 373 -445 2 -445 3 -3 33 c-2 23 2 38 13 46 15 11 18 59 26 432 8
+361 19 548 31 559 2 1 20 5 41 9 l39 7 -4 -500 -3 -501 63 0 64 0 -3 534 -3
+533 -90 7 c-49 3 -115 6 -148 6 l-58 0 0 40 c0 40 0 40 38 40 l37 0 4 520 c4
+547 4 550 -40 550 -15 0 -19 7 -19 34 l0 33 133 6 c72 3 277 5 454 4 l321 -2
+-2 402 -2 401 43 4 43 3 0 -396 0 -396 288 4 287 4 65 65 65 64 0 138 c0 75 4
+222 9 325 l9 189 30 -6 c16 -3 37 -6 47 -6 10 0 20 -10 23 -21 5 -19 10 -20
+39 -14 59 13 285 16 446 6 159 -11 202 -17 202 -31 0 -17 -44 -21 -262 -27
+l-228 -6 0 -149 c0 -81 1 -148 3 -148 2 0 32 14 68 31 75 37 297 112 413 140
+45 10 106 19 137 19 31 0 97 3 148 7 l92 6 -3 99 -3 98 32 0 c17 0 38 3 47 6
+14 5 16 -7 16 -100 l0 -106 38 0 c20 0 109 -9 197 -19 131 -16 187 -28 305
+-66 80 -26 156 -54 168 -62 13 -8 25 -13 27 -11 7 8 15 244 8 255 -5 7 -65 14
+-162 20 -102 5 -156 12 -158 20 -6 16 121 27 224 19 76 -5 82 -4 88 14 5 16
+15 20 50 20 l43 0 2 -192 c0 -131 4 -196 12 -206 15 -18 119 -87 170 -113 30
+-15 38 -17 38 -5 0 7 21 37 46 65 l46 51 -100 0 c-89 0 -100 2 -105 19 -2 10
+-2 23 2 29 3 5 52 14 109 18 l102 9 -94 96 c-86 87 -120 139 -102 157 4 3 13
+2 20 -3 7 -6 35 -26 61 -45 76 -54 130 -106 151 -145 21 -40 30 -43 39 -14 9
+28 142 167 176 185 15 7 34 11 42 8 25 -9 7 -45 -47 -99 -28 -27 -67 -70 -87
+-95 l-36 -45 99 -1 c55 -1 102 -4 105 -7 3 -4 3 -18 -1 -32 -6 -25 -7 -25
+-111 -25 -58 0 -105 -4 -105 -9 0 -4 43 -49 95 -100 53 -50 93 -96 90 -101 -9
+-15 -72 -12 -105 5 -30 16 -61 66 -74 120 -19 76 -52 73 -133 -12 l-64 -68 79
+-75 c44 -41 87 -90 98 -107 l18 -33 127 0 c70 0 134 -2 141 -5 14 -5 15 142 5
+648 l-2 137 41 0 41 0 6 -232 c4 -128 7 -308 7 -399 l0 -166 413 -7 c226 -4
+420 -9 430 -12 9 -3 17 -12 17 -19 0 -9 -6 -12 -15 -9 -10 4 -18 -3 -25 -20
+-8 -22 -16 -26 -48 -26 l-39 0 -6 -297 c-9 -397 -9 -612 -1 -704 l6 -76 57 -6
+c31 -3 63 -8 73 -12 12 -5 18 1 22 22 3 15 4 397 2 848 -4 850 -4 864 -46 945
+-46 90 -156 179 -285 230 -56 22 -75 24 -280 27 -476 6 -2112 8 -3295 3z
+m2676 -141 c32 -8 41 -14 32 -20 -26 -17 -238 -7 -238 12 0 19 140 24 206 8z
+m-3094 -72 c23 -18 71 -70 107 -115 l63 -83 14 26 c8 15 43 60 80 100 69 78
+142 121 166 97 22 -22 -3 -61 -81 -126 -44 -36 -88 -81 -99 -99 l-19 -34 55 9
+c31 5 83 8 116 6 55 -3 61 -5 58 -23 -7 -48 -7 -48 -107 -42 -57 4 -95 3 -95
+-3 0 -16 57 -75 115 -120 30 -23 55 -50 55 -59 0 -25 -29 -61 -48 -61 -24 0
+-121 102 -166 173 -20 32 -42 57 -49 54 -7 -2 -27 -23 -45 -48 -126 -170 -161
+-201 -188 -164 -8 11 -12 25 -9 32 2 8 41 58 85 112 44 53 80 100 80 102 0 3
+-30 2 -67 -2 -110 -13 -113 -12 -113 16 0 21 5 25 33 27 46 2 129 -2 150 -8 9
+-3 17 -2 17 3 0 4 -43 55 -95 112 -63 69 -95 112 -95 128 0 33 30 30 82 -10z
+m-452 -12 c14 -25 11 -29 -102 -142 l-115 -115 121 -118 121 -118 -24 -26
+c-16 -17 -27 -22 -32 -15 -9 15 -207 217 -221 225 -6 4 -63 -46 -127 -109
+-106 -106 -118 -115 -134 -102 -12 8 -17 21 -13 32 3 10 54 67 114 126 l108
+108 -110 108 -110 109 18 28 19 27 113 -114 113 -115 118 118 c65 65 120 118
+124 118 3 0 12 -11 19 -25z m4399 -130 c48 50 96 103 107 119 l21 29 22 -31
+22 -31 -112 -108 -111 -108 33 -25 c44 -32 199 -181 199 -191 0 -4 -8 -17 -19
+-30 l-19 -23 -107 112 c-59 62 -111 112 -116 112 -4 0 -58 -52 -120 -115 -62
+-64 -117 -114 -122 -112 -6 2 -17 13 -25 25 -13 20 -8 27 102 134 l117 112
+-111 111 c-60 60 -110 114 -110 119 0 5 8 18 18 29 17 19 20 17 130 -99 l113
+-119 88 90z m-4835 -3136 c8 -11 51 -58 96 -104 l82 -84 56 62 c65 71 182 187
+189 187 3 0 13 -10 23 -22 18 -23 17 -23 -101 -149 l-119 -126 59 -54 c32 -30
+84 -82 116 -116 l57 -63 -20 -24 -19 -25 -118 120 -119 121 -114 -116 c-64
+-64 -118 -116 -122 -116 -4 0 -15 9 -25 20 -17 19 -15 22 84 128 55 60 107
+114 114 120 11 9 -11 37 -105 132 -118 120 -119 120 -102 145 l16 25 29 -21
+c16 -11 35 -29 43 -40z m914 19 c33 -15 51 -34 81 -86 58 -98 69 -110 80 -92
+44 72 131 171 163 185 41 20 68 15 68 -12 0 -21 -36 -83 -48 -83 -11 0 -108
+-94 -120 -116 -10 -18 -5 -19 99 -16 109 4 109 4 109 -20 0 -48 -9 -51 -119
+-41 -55 4 -101 5 -101 2 0 -4 44 -48 97 -97 85 -79 96 -92 84 -106 -37 -44
+-144 13 -200 108 l-34 57 -43 -61 c-60 -82 -158 -150 -182 -126 -10 11 25 67
+93 146 35 41 64 77 65 80 0 3 -47 3 -105 2 l-105 -4 0 32 0 31 100 -7 c70 -5
+100 -4 100 4 0 6 -40 54 -90 105 -68 72 -90 101 -90 122 0 25 3 27 28 20 15
+-3 46 -15 70 -27z m3740 -84 l111 -116 112 116 113 117 25 -26 26 -25 -112
+-113 -111 -112 104 -110 c57 -60 103 -116 102 -124 -2 -7 -12 -19 -23 -27 -18
+-12 -28 -4 -125 102 l-104 114 -122 -121 -121 -120 -16 25 c-10 14 -17 27 -17
+29 0 2 51 54 112 115 l113 111 -117 118 -117 118 21 22 c12 13 25 23 28 23 4
+0 57 -52 118 -116z m-2908 -283 c0 -108 -10 -133 -52 -129 l-33 3 -3 103 -3
+102 46 0 45 0 0 -79z"/>
+<path d="M7919 7161 c-63 -20 -153 -78 -193 -123 -24 -26 -57 -78 -72 -115
+-26 -62 -29 -79 -29 -188 0 -117 1 -122 36 -196 48 -99 96 -151 177 -191 61
+-30 76 -33 180 -37 110 -3 115 -2 176 28 34 17 85 52 112 78 50 48 113 154
+118 196 1 13 5 27 8 32 3 6 6 37 7 71 3 79 -27 168 -85 255 -52 79 -89 109
+-191 156 -80 37 -189 52 -244 34z m146 -196 l0 -115 -39 0 -39 0 7 107 c8 109
+13 123 51 123 19 0 20 -7 20 -115z m-151 51 c-5 -12 -46 -36 -62 -36 -9 0 51
+49 60 50 4 0 5 -6 2 -14z m312 -57 c16 -7 64 -75 64 -92 0 -11 -18 -18 -72
+-27 -40 -6 -78 -13 -85 -15 -21 -7 -22 7 -3 59 11 28 21 69 24 91 2 22 5 42 5
+45 1 2 14 -9 29 -26 16 -17 33 -33 38 -35z m-333 -48 c38 -40 55 -65 51 -75
+-8 -21 -19 -20 -94 9 -35 14 -72 25 -82 25 -17 0 -17 2 -3 37 34 81 54 82 128
+4z m-19 -137 c44 -6 46 -8 46 -40 l0 -34 -97 4 -98 3 -3 37 -3 36 54 0 c30 0
+75 -3 101 -6z m194 -38 c4 -33 -13 -56 -42 -56 -28 0 -46 18 -46 46 0 57 82
+66 88 10z m193 34 l69 0 0 -30 0 -30 -100 0 -100 0 0 36 c0 36 1 36 31 30 17
+-3 62 -6 100 -6z m-333 -145 c2 -14 -17 -38 -62 -78 l-65 -58 -15 28 c-23 47
+-36 102 -21 97 6 -3 36 4 66 15 66 24 93 23 97 -4z m257 3 c14 -6 25 -16 25
+-22 0 -6 5 -5 12 2 16 16 88 16 88 0 0 -23 -89 -128 -104 -122 -29 11 -96 108
+-96 138 0 19 38 21 75 4z m-125 -41 c0 -19 3 -68 6 -110 l7 -77 -39 0 -39 0
+-3 104 c-3 102 -2 105 20 109 46 9 48 7 48 -26z m-131 -114 c1 -30 -2 -33 -27
+-33 -30 0 -52 16 -52 37 0 7 15 29 33 49 l32 37 6 -29 c4 -16 7 -44 8 -61z
+m241 -17 c-19 -24 -40 -19 -40 8 0 29 19 39 39 20 12 -11 12 -16 1 -28z"/>
+<path d="M3676 6943 c-3 -42 -6 -145 -6 -229 l0 -153 63 43 c44 31 61 49 59
+62 -1 10 -5 91 -9 179 -4 99 -10 163 -17 167 -6 4 -27 8 -47 8 l-36 0 -7 -77z"/>
+<path d="M4549 6800 c-110 -10 -406 -95 -524 -149 -269 -125 -461 -294 -648
+-574 -176 -262 -261 -519 -291 -869 l-5 -58 54 0 c29 0 60 -3 69 -6 14 -5 16
+6 16 85 l0 91 30 0 30 0 0 -87 0 -88 76 0 76 0 -4 93 -4 92 39 0 38 0 -3 -90
+-3 -90 84 0 83 0 -4 90 -4 90 33 0 32 0 3 -91 3 -91 83 -1 83 -2 -3 93 -3 92
+38 0 37 0 0 -92 0 -93 80 3 80 4 0 89 0 89 35 0 35 0 0 -205 0 -205 -29 0
+c-35 0 -41 16 -41 110 l0 65 -80 0 -80 0 0 -87 0 -88 -35 0 -35 0 0 88 0 87
+-80 0 -80 0 0 -88 0 -88 -32 3 -33 3 -3 85 -3 85 -82 -2 -82 -2 3 -86 2 -86
+-32 3 -33 3 -5 85 -5 85 -73 0 -72 0 0 -87 0 -88 -30 0 -30 0 0 85 0 85 -70 0
+-70 0 0 -97 c0 -318 132 -682 340 -940 64 -80 244 -259 315 -313 81 -62 282
+-179 405 -237 128 -61 167 -71 395 -108 135 -22 170 -24 225 -16 36 6 94 13
+130 16 130 12 361 55 422 79 122 47 277 125 396 200 101 64 140 97 245 206
+263 273 419 571 472 900 23 143 23 517 0 643 -47 265 -143 499 -294 722 -72
+107 -273 305 -386 382 -196 133 -421 225 -630 259 -115 19 -436 27 -566 14z
+m1054 -298 c26 -24 27 -30 27 -116 0 -107 6 -121 43 -107 24 9 26 16 29 70 l3
+61 108 -77 c112 -78 170 -140 266 -283 61 -91 172 -326 211 -445 33 -104 52
+-245 32 -245 -6 0 -14 5 -17 10 -8 14 -96 13 -152 -2 -35 -8 -50 -8 -64 1 -17
+10 -129 15 -339 13 -36 0 -115 0 -176 0 -72 0 -114 -4 -119 -12 -5 -8 -10 -8
+-20 0 -7 6 -53 12 -102 13 -79 2 -91 0 -120 -22 -20 -15 -50 -26 -84 -29 l-53
+-5 20 34 c11 19 33 55 48 82 17 28 23 47 16 47 -18 0 -99 -62 -139 -105 -50
+-55 -56 -40 -56 135 l0 149 -65 3 -65 3 -3 352 -2 353 249 0 c137 0 255 2 264
+6 19 7 27 48 27 133 0 117 -3 115 108 58 53 -27 109 -61 125 -75z m-1409 77
+c3 -17 6 -58 6 -90 0 -32 4 -69 10 -83 l10 -26 255 0 255 0 0 -55 0 -55 -90 0
+c-49 0 -90 3 -90 8 0 4 -134 6 -299 4 l-299 -3 -6 53 c-3 29 -7 79 -8 112 -2
+69 1 73 127 129 101 46 121 47 129 6z m-290 -156 c3 -21 6 -59 6 -85 l0 -48
+-112 0 -112 0 39 41 c41 43 151 129 165 129 4 0 10 -17 14 -37z m682 -769 c-3
+-26 -6 -70 -6 -98 l0 -51 -15 29 c-18 34 -20 137 -3 154 23 23 31 12 24 -34z
+m218 -50 c14 -5 16 -35 16 -229 l0 -223 33 -5 c17 -3 93 -3 168 0 152 7 204 0
+214 -25 14 -37 -19 -43 -223 -40 l-192 3 0 -232 0 -233 -35 0 -34 0 5 158 c2
+86 6 190 8 230 l4 72 -245 0 -245 0 7 33 c9 37 20 47 58 47 23 0 27 3 22 23
+-12 46 -22 127 -17 132 9 8 62 6 62 -3 0 -5 -7 -31 -15 -58 -23 -76 -20 -91
+18 -97 17 -4 104 -9 191 -13 l159 -7 -7 220 c-6 196 -5 222 9 237 19 18 18 18
+39 10z m552 -371 l-1 -88 83 -5 82 -5 0 93 0 92 30 0 30 0 0 -89 0 -90 85 -3
+85 -3 0 93 0 92 36 0 36 0 -4 -89 -3 -90 82 -3 82 -3 3 90 3 90 33 3 32 3 0
+-93 0 -94 68 7 c37 4 70 5 75 2 4 -2 7 34 7 81 0 47 3 86 8 86 4 0 17 3 30 6
+22 6 22 5 22 -85 l0 -91 79 0 c63 0 80 -3 85 -16 11 -28 -4 -34 -85 -34 l-79
+0 0 -85 c0 -84 0 -85 -25 -85 -20 0 -25 6 -31 34 -3 19 -4 58 -2 88 l3 53 -81
+0 -81 1 5 -89 5 -88 -34 3 -34 3 -3 85 -3 85 -82 -2 -82 -2 3 -81 4 -81 -34 3
+-33 3 -3 93 c-2 83 -4 91 -18 77 -11 -10 -36 -15 -85 -15 l-69 0 0 -85 0 -85
+-30 0 -30 0 0 97 c0 75 -3 94 -12 85 -7 -7 -41 -12 -84 -12 l-71 0 1 -82 1
+-83 -30 0 -30 0 -3 192 -2 192 27 4 c16 2 31 5 34 6 3 0 5 -38 5 -86z m-972
+-246 c11 -42 11 -42 -26 -51 -27 -6 -28 -5 -28 37 0 24 3 47 7 51 16 16 39 -2
+47 -37z m-318 -104 c5 -10 10 -197 12 -416 l3 -398 -29 3 -30 3 -6 376 c-3
+238 -1 390 5 413 11 39 31 47 45 19z m497 -155 c8 -207 9 -653 2 -660 -3 -3
+-16 -3 -29 -1 l-23 5 -6 405 c-3 224 -4 410 -1 415 3 4 15 8 28 8 23 0 23 -1
+29 -172z m-979 145 c4 -16 10 -576 7 -735 l-1 -68 -38 0 c-45 0 -54 9 -136
+127 -99 143 -177 336 -221 548 -25 117 -30 110 83 109 53 -1 122 -4 153 -8 44
+-6 63 -4 88 8 17 9 31 21 31 26 0 17 28 11 34 -7z m896 -62 c-7 -45 -10 -193
+-8 -402 3 -297 1 -333 -13 -342 -9 -6 -24 -7 -33 -4 -14 6 -16 45 -16 399 l0
+393 38 16 c20 9 38 15 40 14 1 -1 -2 -34 -8 -74z m698 -321 c-3 -336 -5 -400
+-17 -400 -12 0 -13 37 -8 243 9 308 19 557 24 557 2 0 2 -180 1 -400z m-1322
+356 l24 -6 0 -385 0 -385 -30 0 -30 0 1 408 c1 224 3 400 6 390 2 -9 15 -19
+29 -22z m1283 -86 c-2 -84 -3 -89 -9 -45 -12 75 -12 173 0 155 5 -8 9 -58 9
+-110z m533 23 c6 -295 2 -703 -7 -700 -14 5 -19 797 -5 797 6 0 11 -40 12 -97z
+m-1392 -312 l0 -399 -26 -6 c-15 -4 -29 -4 -33 -1 -9 9 -14 582 -6 703 l7 102
+29 0 29 0 0 -399z m970 -56 c2 -185 6 -280 10 -235 5 56 7 63 8 30 1 -25 5
+-62 8 -82 6 -35 5 -38 -17 -38 l-24 0 -1 393 c0 215 3 358 6 317 4 -41 9 -214
+10 -385z m193 56 c-2 -207 -7 -377 -11 -379 -4 -1 -9 10 -11 25 -6 53 11 755
+19 743 4 -7 6 -182 3 -389z m493 20 c3 -369 1 -411 -23 -411 -13 0 -14 11 -9
+63 3 34 7 211 8 394 2 202 6 326 12 316 5 -9 10 -172 12 -362z m409 327 c-13
+-94 -73 -319 -99 -372 -14 -28 -40 -73 -58 -101 l-32 -50 -7 45 c-4 25 -8 150
+-9 279 l-1 234 78 -2 c43 -1 85 3 93 9 34 22 42 12 35 -42z m-2560 -726 c-5
+-29 -10 -33 -33 -30 l-27 3 -3 358 c-1 197 1 372 6 390 6 22 16 33 33 37 l24
+6 3 -366 c1 -201 0 -380 -3 -398z m587 376 c3 -216 2 -397 -3 -401 -12 -15
+-46 2 -53 26 -8 29 -8 715 0 745 4 14 14 22 29 22 l23 0 4 -392z m-696 368 c1
+-1 3 -172 5 -381 l4 -380 -30 -3 -30 -3 -2 391 -3 390 28 -6 c15 -4 28 -7 28
+-8z m502 -378 l-3 -393 -25 0 -25 0 -3 384 c-2 403 -3 400 41 401 16 0 17 -23
+15 -392z m1212 1 c0 -246 -4 -379 -10 -379 -6 0 -10 135 -10 386 0 254 3 383
+10 379 6 -4 10 -143 10 -386z m112 -122 c2 -190 0 -247 -9 -247 -10 0 -12 86
+-11 383 1 303 3 354 9 247 4 -74 9 -246 11 -383z m116 127 c-3 -325 -5 -374
+-18 -374 -13 0 -15 49 -15 378 -1 207 1 359 2 337 2 -22 7 -110 12 -195 l9
+-155 -2 197 c0 108 2 194 7 191 4 -2 6 -173 5 -379z m123 -328 c-7 -55 -27
+-72 -37 -31 -3 14 -1 130 5 258 6 128 11 273 11 322 0 50 4 108 8 130 9 49 22
+-609 13 -679z m105 590 c3 -52 9 -83 14 -76 5 7 6 55 3 107 -5 76 -3 93 8 93
+12 0 13 -24 7 -142 -4 -79 -7 -252 -7 -385 -1 -237 -1 -243 -21 -243 -20 0
+-20 5 -19 388 1 213 3 378 5 367 2 -11 6 -60 10 -109z m244 -78 c0 -112 3
+-246 6 -298 5 -66 2 -109 -7 -140 -13 -42 -14 -33 -21 160 -7 222 0 480 13
+480 5 0 9 -91 9 -202z m-2106 155 c3 -21 6 -194 6 -385 l0 -348 -35 0 -35 0 0
+385 0 385 29 0 c25 0 29 -4 35 -37z m1347 -50 c5 -384 3 -673 -6 -670 -12 4
+-15 757 -3 757 4 0 9 -39 9 -87z m198 -492 c1 -63 4 -92 11 -85 6 6 11 138 13
+334 l2 325 2 -372 c2 -304 0 -373 -11 -373 -22 0 -26 58 -30 410 -3 310 -3
+317 4 95 4 -132 8 -283 9 -334z m264 472 c11 -171 8 -653 -3 -653 -6 0 -10 53
+-11 138 -4 512 -3 622 2 622 3 0 9 -48 12 -107z m202 -267 c0 -206 -4 -378 -8
+-382 -14 -15 -28 20 -22 56 2 19 5 185 5 368 0 259 3 332 13 332 9 0 12 -82
+12 -374z m-980 32 c-4 -178 -8 -343 -9 -368 -1 -39 -4 -45 -21 -42 -11 2 -21
+5 -21 5 -7 8 -4 487 3 537 6 47 8 -14 6 -220 -2 -284 8 -397 20 -219 11 147 8
+557 -3 564 -5 3 -10 19 -10 36 0 23 4 29 21 29 l22 0 -8 -322z m42 94 c1 -120
+4 -281 8 -359 5 -125 4 -143 -9 -143 -14 0 -16 42 -16 367 0 201 3 363 8 359
+4 -4 8 -105 9 -224z m976 -24 c4 -134 10 -285 14 -335 4 -62 2 -93 -4 -93 -7
+0 -13 54 -17 143 -9 203 -12 536 -5 531 3 -2 9 -113 12 -246z m-751 -55 c-8
+-30 -10 -6 -9 112 l0 150 10 -112 c6 -74 6 -125 -1 -150z m-162 -120 c0 -191
+-4 -304 -10 -308 -7 -4 -10 104 -10 317 0 212 4 318 10 308 6 -9 10 -139 10
+-317z m-476 226 c8 -41 17 -180 20 -310 l6 -237 -25 -4 c-13 -3 -27 -3 -30 0
+-3 3 -5 149 -5 326 0 331 6 374 34 225z m433 4 c-3 -10 -5 -4 -5 12 0 17 2 24
+5 18 2 -7 2 -21 0 -30z m-155 -315 c3 -147 0 -218 -7 -218 -7 0 -9 77 -6 237
+5 283 9 277 13 -19z m-106 155 c-3 -43 -9 -142 -12 -221 -6 -129 -9 -144 -28
+-157 -11 -8 -24 -15 -28 -15 -10 0 -10 217 -1 363 l6 107 35 0 35 0 -7 -77z
+m391 -285 c-1 -51 -3 -12 -3 87 0 99 2 141 3 93 2 -48 2 -129 0 -180z m-360
+-335 c-5 -130 -4 -164 6 -154 8 8 13 62 16 161 l3 148 27 -3 26 -2 -3 -104
+c-1 -57 -5 -128 -8 -156 -4 -44 -3 -53 10 -53 13 0 16 23 18 157 3 143 5 158
+21 161 17 4 18 -6 15 -152 -2 -120 0 -156 10 -156 9 0 12 38 12 154 l0 155 31
+-1 32 -1 -7 -141 c-4 -78 -11 -143 -17 -144 -13 -5 -1 -22 16 -22 10 0 15 36
+20 155 7 141 9 155 26 155 17 0 18 -10 12 -155 -4 -138 -3 -155 11 -155 14 0
+16 20 16 155 0 127 3 155 14 155 19 0 29 -92 24 -218 -2 -69 0 -92 10 -92 9 0
+12 38 12 155 0 85 4 155 8 155 26 0 32 -30 32 -167 0 -89 4 -143 10 -143 6 0
+10 57 10 150 0 143 1 150 20 150 11 0 19 -3 19 -7 -1 -5 -1 -73 0 -153 1 -94
+5 -139 11 -129 5 9 8 78 7 155 -2 115 0 139 12 139 11 0 14 -15 12 -68 -1 -37
+1 -109 6 -160 l8 -92 5 160 c7 210 23 211 31 2 3 -86 9 -160 12 -164 4 -3 5
+68 4 158 -2 153 -1 164 16 164 17 0 19 -13 20 -176 l2 -175 -41 -27 c-23 -15
+-58 -34 -77 -42 -57 -24 -282 -66 -388 -72 -97 -6 -99 -6 -108 18 -9 22 -10
+22 -10 -11 -2 -61 -20 -110 -41 -110 -18 0 -20 7 -20 78 0 42 -3 109 -6 147
+-4 51 -3 66 5 55 8 -11 11 33 11 158 l0 172 42 0 41 0 -6 -167z m-917 9 c0
+-92 -3 -132 -10 -122 -13 20 -13 273 0 265 6 -4 10 -62 10 -143z m380 -13 c0
+-93 -4 -149 -10 -149 -6 0 -10 59 -10 156 0 101 3 153 10 149 6 -4 10 -67 10
+-156z m270 42 c0 -142 -8 -205 -25 -191 -10 8 -12 45 -9 148 5 147 8 167 24
+157 6 -4 10 -52 10 -114z m50 -36 c0 -131 -2 -155 -15 -155 -13 0 -15 23 -15
+148 0 82 3 152 7 155 19 20 23 -6 23 -148z m60 0 c0 -131 -2 -155 -15 -155
+-13 0 -15 24 -15 155 0 131 2 155 15 155 13 0 15 -24 15 -155z m60 77 c0 -121
+-11 -232 -24 -232 -8 0 -10 47 -8 155 2 127 6 155 17 155 12 0 15 -17 15 -78z
+m-750 -77 c0 -90 -4 -145 -10 -145 -6 0 -10 53 -10 138 0 122 3 152 17 152 2
+0 3 -65 3 -145z m49 -7 l-2 -153 -8 140 c-8 131 -7 165 6 165 3 0 4 -69 4
+-152z m56 7 c7 -128 4 -169 -9 -154 -8 9 -14 299 -6 299 4 0 11 -65 15 -145z
+m54 -153 c-7 -17 -19 114 -19 213 0 39 3 75 8 79 9 9 20 -273 11 -292z m90
+200 c-1 -48 -5 -116 -9 -152 -5 -51 -7 -32 -8 93 -1 103 1 156 8 152 6 -3 9
+-45 9 -93z m133 -19 l1 -118 12 120 c15 157 26 128 17 -45 l-7 -135 -32 -2
+-33 -3 0 134 c0 142 4 166 26 166 11 0 14 -24 16 -117z m77 -100 c1 -68 -2
+-83 -14 -83 -13 0 -15 23 -15 143 0 79 3 147 8 151 8 9 19 -96 21 -211z m54
+120 c12 -174 10 -203 -13 -203 -19 0 -20 7 -20 150 0 119 3 150 13 150 10 0
+16 -26 20 -97z m982 -35 c8 -161 6 -192 -17 -196 -17 -3 -18 10 -18 162 0 136
+3 166 14 166 11 0 15 -29 21 -132z m59 95 c7 -47 6 -198 -3 -237 -3 -16 -11
+-31 -17 -33 -12 -4 -27 267 -17 293 10 27 30 13 37 -23z m56 -95 c-4 -116 -7
+-133 -22 -136 -16 -3 -18 8 -18 132 0 134 0 136 23 136 22 0 22 0 17 -132z
+m63 35 c-5 -119 -8 -139 -28 -147 -13 -5 -15 12 -15 119 0 124 0 125 23 125
+23 0 23 -1 20 -97z m47 3 c0 -71 -4 -97 -15 -106 -13 -11 -15 0 -15 94 0 88 3
+106 15 106 12 0 15 -17 15 -94z m160 58 c-8 -35 -23 -51 -70 -76 -14 -7 -33
+-23 -43 -35 -10 -13 -23 -23 -28 -23 -5 0 -9 38 -9 84 l0 84 79 1 79 1 -8 -36z
+m-1683 -191 c-1 -43 -3 -10 -3 72 0 83 2 118 3 78 2 -40 2 -107 0 -150z"/>
+<path d="M5723 4200 c0 -36 2 -50 4 -32 2 17 2 47 0 65 -2 17 -4 3 -4 -33z"/>
+<path d="M5023 3910 c0 -41 2 -58 4 -37 2 20 2 54 0 75 -2 20 -4 3 -4 -38z"/>
+<path d="M5022 3790 c0 -19 2 -27 5 -17 2 9 2 25 0 35 -3 9 -5 1 -5 -18z"/>
+<path d="M5793 3915 c0 -22 2 -30 4 -17 2 12 2 30 0 40 -3 9 -5 -1 -4 -23z"/>
+<path d="M3185 6230 c-60 -4 -159 -8 -218 -9 l-109 -1 4 -540 3 -540 62 0 63
+0 0 45 c0 111 33 337 69 470 35 126 108 293 170 385 20 30 49 75 63 100 14 25
+35 54 47 64 12 11 21 23 21 28 0 9 -4 8 -175 -2z"/>
+<path d="M6180 6233 c0 -3 27 -46 60 -94 33 -48 77 -126 96 -174 20 -47 40
+-85 45 -85 11 0 12 137 3 268 l-7 92 -98 0 c-55 0 -99 -3 -99 -7z"/>
+<path d="M7873 6220 c-60 -24 -149 -109 -181 -174 -59 -118 -49 -302 24 -417
+60 -96 182 -153 329 -153 71 -1 87 3 145 33 117 59 185 146 215 273 42 181
+-51 366 -213 429 -84 32 -248 37 -319 9z m187 -360 c0 -272 -1 -290 -17 -289
+-49 2 -48 -4 -50 297 l-2 282 34 0 34 0 1 -290z m-130 0 c0 -184 -3 -270 -11
+-270 -6 0 -20 5 -31 11 -20 11 -20 15 -13 257 6 209 9 249 23 260 9 6 19 12
+24 12 4 0 8 -121 8 -270z m238 -2 c2 -253 2 -257 -19 -263 -11 -4 -23 -4 -26
+-1 -7 7 -8 64 -5 314 l2 213 23 -3 22 -3 3 -257z m-348 70 c0 -73 -3 -164 -7
+-201 l-6 -68 -18 28 c-56 88 -38 373 23 373 4 0 8 -60 8 -132z m447 113 c41
+-39 43 -284 2 -350 -24 -40 -35 -39 -44 5 -8 43 5 364 15 364 3 0 16 -9 27
+-19z"/>
+<path d="M6480 6210 c0 -3 0 -126 0 -273 1 -244 3 -287 30 -470 17 -111 30
+-230 30 -264 l0 -63 48 0 49 0 -4 488 c-2 268 -6 511 -9 540 l-6 53 -69 -3
+c-38 -2 -69 -5 -69 -8z"/>
+<path d="M2036 6179 c-3 -17 -6 -259 -6 -537 l0 -505 38 7 c20 3 47 6 60 6
+l22 0 0 508 c0 279 -3 517 -6 530 -5 19 -13 22 -54 22 -45 0 -48 -2 -54 -31z"/>
+<path d="M2265 6192 c-3 -8 -5 -36 -5 -63 l0 -50 48 3 c44 3 47 5 50 32 2 16
+1 44 -2 62 -6 30 -9 32 -46 30 -23 0 -42 -7 -45 -14z"/>
+<path d="M2467 6204 c-4 -4 -7 -218 -7 -476 0 -394 -2 -474 -15 -505 -21 -49
+-20 -97 1 -89 9 3 44 6 79 6 l63 0 4 193 c2 144 0 194 -9 202 -10 8 -14 91
+-15 340 l-3 330 -45 3 c-25 2 -49 0 -53 -4z"/>
+<path d="M2666 5883 c-3 -181 -9 -404 -12 -496 -3 -93 -3 -188 1 -213 l6 -44
+66 0 66 0 -7 38 c-3 20 -6 263 -6 540 l0 502 -54 0 -54 0 -6 -327z"/>
+<path d="M6725 6138 c-3 -40 -4 -127 -1 -193 2 -66 5 -276 5 -467 l1 -348 65
+0 65 0 0 540 0 540 -64 0 -64 0 -7 -72z"/>
+<path d="M6950 5698 c1 -282 4 -526 6 -543 l5 -30 65 3 64 4 -2 536 -3 537
+-68 3 -68 3 1 -513z"/>
+<path d="M2272 5954 c-42 -29 -22 -104 27 -104 49 0 86 64 54 92 -29 25 -57
+29 -81 12z"/>
+<path d="M2266 5735 c-33 -33 -9 -87 38 -87 15 0 37 9 49 21 l21 21 -20 27
+c-25 33 -65 41 -88 18z"/>
+<path d="M2274 5542 c-6 -4 -16 -17 -23 -30 -10 -19 -8 -26 13 -47 14 -14 30
+-25 36 -25 20 0 49 20 60 41 24 43 -43 90 -86 61z"/>
+<path d="M7895 5409 c-46 -17 -115 -74 -151 -125 -130 -183 -48 -476 151 -539
+81 -25 213 -18 280 15 113 55 176 154 183 286 6 109 -13 172 -75 249 -71 88
+-134 117 -260 121 -56 2 -111 -1 -128 -7z m236 -125 c26 -13 57 -37 69 -54 26
+-36 60 -130 60 -164 0 -37 -38 -132 -66 -165 -54 -65 -213 -80 -305 -30 -95
+52 -134 184 -89 302 25 66 64 101 143 129 63 22 121 17 188 -18z"/>
+<path d="M7933 5220 c-67 -45 -95 -169 -53 -238 46 -75 180 -94 243 -35 73 69
+74 173 3 251 -31 33 -39 36 -97 39 -52 3 -70 0 -96 -17z m108 -80 c19 -11 49
+-59 49 -80 0 -23 -49 -60 -79 -60 -37 0 -43 9 -43 64 0 74 26 101 73 76z"/>
+<path d="M2258 5265 l5 -65 -44 0 -44 0 -3 -115 -3 -115 26 -10 c15 -6 38 -10
+52 -10 23 0 25 -3 19 -32 -4 -25 -10 -737 -7 -900 1 -27 3 -28 54 -28 l52 0 1
+342 c0 189 4 432 9 540 l8 197 -69 3 -69 3 -3 33 -3 34 65 -4 c64 -3 65 -3 70
+26 3 16 6 57 6 91 0 72 -4 75 -80 75 l-48 0 6 -65z"/>
+<path d="M2428 4933 c-3 -130 -1 -150 15 -165 16 -17 17 -49 17 -398 l0 -380
+54 0 54 0 6 253 c3 138 9 381 12 538 l6 286 -53 6 c-30 4 -66 7 -81 7 l-27 0
+-3 -147z"/>
+<path d="M2656 4795 c4 -148 8 -391 8 -540 l1 -270 55 0 55 0 0 100 c1 55 2
+287 3 515 l2 415 31 14 c45 20 25 29 -75 33 l-89 3 9 -270z"/>
+<path d="M2854 5038 c3 -13 6 -256 6 -540 l0 -518 245 0 c135 0 245 3 245 8 0
+4 -20 32 -45 62 -42 51 -123 177 -159 247 -74 146 -140 421 -154 645 l-7 113
+-69 3 c-67 3 -68 3 -62 -20z"/>
+<path d="M6540 5000 c0 -83 -17 -235 -40 -358 -17 -86 -20 -147 -20 -378 l0
+-274 75 0 75 0 0 248 c0 137 3 378 7 535 l6 287 -51 0 -52 0 0 -60z"/>
+<path d="M6725 4858 c-3 -112 -5 -354 -3 -537 l3 -335 65 1 65 1 3 531 2 531
+-49 0 c-27 0 -56 3 -64 6 -13 4 -16 -25 -22 -198z"/>
+<path d="M6950 4519 c0 -489 2 -541 16 -535 9 3 40 6 70 6 l54 0 0 535 0 535
+-70 0 -70 0 0 -541z"/>
+<path d="M7892 4619 c-100 -39 -200 -165 -222 -279 -12 -65 2 -173 31 -235 32
+-68 102 -140 167 -172 50 -25 68 -28 152 -28 83 0 103 4 156 28 84 39 166 123
+199 204 46 114 30 256 -41 356 -40 56 -139 122 -204 136 -79 17 -178 13 -238
+-10z m106 -187 c-3 -88 -5 -96 -28 -113 -33 -22 -189 -34 -196 -14 -20 52 83
+193 161 219 62 22 66 16 63 -92z m171 68 c79 -57 131 -159 131 -254 0 -80 -76
+-177 -169 -219 -67 -30 -183 -21 -248 19 -58 36 -103 106 -111 170 -5 44 -3
+47 14 39 10 -4 51 -10 89 -13 47 -3 79 -11 98 -24 26 -19 27 -23 27 -107 l0
+-88 33 10 33 11 -4 71 -3 70 49 52 c49 51 53 63 23 63 -8 0 -30 14 -48 32 -25
+24 -33 41 -33 67 -1 20 -7 54 -15 76 -8 22 -15 43 -15 46 0 4 24 7 54 8 45 0
+61 -5 95 -29z m-111 -192 c24 -24 8 -78 -24 -78 -15 0 -44 27 -44 41 0 11 37
+49 48 49 4 0 13 -5 20 -12z"/>
+<path d="M8063 4425 c0 -22 2 -30 4 -17 2 12 2 30 0 40 -3 9 -5 -1 -4 -23z"/>
+<path d="M6331 4243 c-17 -35 -60 -108 -96 -163 l-65 -100 105 0 105 0 -1 143
+c-1 186 -6 201 -48 120z"/>
+<path d="M6223 3893 l-132 -4 -53 -62 c-29 -35 -82 -86 -117 -113 -36 -27 -66
+-54 -68 -59 -2 -6 10 -18 25 -28 16 -9 57 -43 91 -76 46 -44 61 -54 61 -40 0
+10 3 19 8 19 12 0 59 82 73 128 7 23 17 42 23 43 6 0 33 4 61 8 100 17 96 -11
+-15 -119 -43 -41 -82 -85 -88 -96 -11 -22 -11 -22 98 -16 103 5 110 4 109 -14
+-2 -55 -9 -58 -113 -55 -96 3 -97 2 -87 -18 7 -11 40 -44 74 -72 75 -62 87
+-76 87 -106 0 -43 -43 -29 -124 42 -41 36 -84 77 -95 91 l-19 25 -30 -43 c-55
+-80 -168 -166 -189 -144 -11 11 25 68 92 146 l65 75 -100 9 c-96 8 -100 9
+-100 31 0 13 3 26 8 28 4 3 50 2 102 -2 52 -4 97 -6 100 -4 2 2 -28 36 -68 74
+-39 39 -72 75 -72 81 0 11 -72 -28 -134 -73 l-39 -29 2 -176 c1 -97 4 -181 7
+-188 3 -8 104 -12 354 -13 l350 -2 0 380 c0 208 -3 378 -7 377 -5 -1 -67 -4
+-140 -5z"/>
+<path d="M7920 3811 c-196 -61 -300 -225 -288 -453 5 -103 46 -193 121 -268
+91 -92 193 -123 322 -101 143 25 256 117 315 256 30 71 34 90 34 170 0 69 -5
+104 -23 152 -42 113 -148 205 -275 239 -55 15 -165 17 -206 5z m140 -191 l0
+-110 -30 0 c-35 0 -34 -3 -35 127 l0 93 33 0 32 0 0 -110z m153 30 c32 -29 62
+-67 71 -91 9 -23 16 -43 14 -44 -2 -1 -45 -6 -97 -10 -81 -6 -93 -5 -88 8 3 8
+9 48 12 88 11 120 11 120 88 49z m-283 -29 c0 -38 3 -82 6 -99 l6 -30 -48 5
+c-27 3 -71 8 -97 12 l-49 6 34 65 c25 48 44 70 73 87 67 38 75 34 75 -46z
+m124 -187 c37 -37 6 -91 -41 -73 -18 6 -23 16 -23 43 0 45 34 61 64 30z m-134
+-29 l0 -36 -97 3 c-85 3 -98 5 -101 21 -7 37 4 42 102 45 l96 3 0 -36z m380
+26 c19 -5 25 -14 25 -34 0 -15 -3 -27 -7 -27 -5 0 -48 0 -98 0 l-90 0 0 35 0
+35 73 -1 c39 -1 83 -4 97 -8z m-365 -213 c-4 -57 -9 -105 -11 -107 -2 -2 -27
+10 -56 26 -42 24 -58 42 -85 91 l-33 62 32 1 c18 0 56 7 83 14 82 21 77 27 70
+-87z m363 77 c7 -6 -31 -71 -65 -113 -28 -35 -90 -81 -94 -70 -1 2 -4 47 -8
+101 l-6 98 85 -7 c47 -4 86 -8 88 -9z m-232 -103 c0 -101 -4 -112 -43 -112
+-22 0 -23 3 -23 105 l0 105 33 0 32 0 1 -98z"/>
+<path d="M1724 2748 c3 -18 8 -120 12 -225 7 -179 8 -193 27 -199 10 -3 23 -2
+27 3 5 4 10 108 12 231 l3 222 -44 0 -43 0 6 -32z"/>
+<path d="M1850 2527 c0 -257 2 -267 47 -267 l23 0 0 255 0 255 -35 0 -35 0 0
+-243z"/>
+<path d="M1977 2763 c-9 -8 -9 -450 -1 -481 5 -18 13 -22 33 -20 l26 3 1 253
+2 252 -27 0 c-15 0 -31 -3 -34 -7z"/>
+<path d="M2087 2723 c-3 -27 -3 -141 0 -255 l6 -208 29 0 28 0 0 233 c0 127
+-3 242 -6 255 -4 14 -14 22 -29 22 -19 0 -23 -7 -28 -47z"/>
+<path d="M8364 2763 c-17 -3 -23 -14 -28 -50 -8 -60 -8 -269 0 -366 7 -76 7
+-77 35 -77 16 0 29 3 29 8 1 4 3 106 6 227 2 121 7 230 9 243 6 23 -1 25 -51
+15z"/>
+<path d="M8460 2764 c0 -18 24 -84 30 -84 4 0 10 12 13 28 3 15 9 35 12 45 6
+14 2 17 -24 17 -17 0 -31 -3 -31 -6z"/>
+<path d="M8237 2753 c-21 -3 -27 -9 -23 -20 3 -8 6 -118 6 -244 l0 -229 35 0
+36 0 -3 247 c-2 154 -7 247 -13 248 -5 1 -23 0 -38 -2z"/>
+<path d="M8098 2505 l3 -245 33 0 34 0 1 245 2 245 -38 0 -38 0 3 -245z"/>
+<path d="M5945 2595 c-75 -40 -114 -109 -94 -163 13 -35 74 -98 110 -112 40
+-17 100 13 147 74 27 35 28 68 3 122 -33 73 -109 109 -166 79z"/>
+<path d="M3291 2589 c-40 -16 -121 -90 -121 -110 0 -29 24 -70 62 -106 40 -39
+75 -53 114 -46 110 20 128 204 25 258 -34 17 -46 18 -80 4z"/>
+<path d="M3670 2552 c-56 -54 -62 -79 -33 -139 19 -42 86 -93 120 -93 57 0
+133 78 133 137 0 72 -66 143 -133 143 -31 0 -46 -8 -87 -48z"/>
+<path d="M4144 2581 c-34 -20 -67 -63 -78 -98 -10 -31 15 -83 58 -121 45 -39
+77 -48 116 -32 36 15 87 71 96 105 14 54 -26 128 -82 151 -45 19 -73 18 -110
+-5z"/>
+<path d="M4588 2575 c-38 -26 -78 -81 -78 -109 0 -48 65 -129 116 -146 43 -15
+92 7 139 63 46 53 47 97 5 154 -49 66 -119 81 -182 38z"/>
+<path d="M5027 2575 c-67 -46 -85 -118 -46 -181 45 -74 117 -94 180 -51 74 50
+97 122 59 185 -44 71 -126 92 -193 47z"/>
+<path d="M5465 2569 c-73 -65 -81 -128 -24 -193 60 -69 112 -76 177 -25 66 51
+77 106 37 176 -47 79 -127 97 -190 42z"/>
+<path d="M6378 2582 c-39 -26 -68 -67 -75 -105 -10 -65 54 -149 124 -163 52
+-10 153 84 153 144 0 34 -24 75 -65 111 -42 36 -94 41 -137 13z"/>
+<path d="M6823 2580 c-62 -38 -80 -117 -43 -190 26 -52 55 -70 110 -70 52 0
+66 8 109 64 40 50 40 90 1 144 -51 71 -116 90 -177 52z"/>
+<path d="M7800 1505 c0 -7 63 -45 75 -45 5 0 -7 11 -27 25 -37 25 -48 30 -48
+20z"/>
+<path d="M4997 1753 c-4 -3 -7 -23 -7 -44 0 -31 4 -37 26 -42 34 -6 57 18 49
+52 -9 36 -48 55 -68 34z"/>
+<path d="M2593 1894 c4 -7 0 -14 -8 -18 -30 -11 -18 -75 25 -133 23 -29 42
+-53 44 -53 2 0 -9 23 -23 52 -16 34 -26 69 -26 99 0 26 -4 51 -9 56 -5 4 -6 3
+-3 -3z"/>
+<path d="M2542 1788 c-7 -7 -12 -23 -12 -36 0 -15 -4 -21 -12 -16 -7 4 -8 3
+-4 -4 11 -18 14 -15 31 25 17 39 15 49 -3 31z"/>
+<path d="M4967 8819 c-24 -14 -47 -62 -47 -99 l0 -30 120 0 c70 0 120 4 120
+10 0 5 -9 34 -20 63 l-20 54 -53 7 c-68 8 -79 7 -100 -5z"/>
+<path d="M4992 8523 l3 -78 41 -6 42 -5 5 70 c2 39 2 76 0 83 -3 8 -23 13 -49
+13 l-45 0 3 -77z"/>
+<path d="M1538 1884 c-14 -31 -1 -57 31 -62 28 -4 51 14 51 42 0 50 -62 65
+-82 20z"/>
+<path d="M8597 1883 c-8 -43 9 -65 46 -61 30 3 32 5 32 43 0 39 -1 40 -36 43
+-33 3 -37 0 -42 -25z"/>
+<path d="M8617 1733 c-4 -3 -7 -31 -7 -60 l0 -54 32 3 c28 3 33 8 40 38 11 54
+1 80 -31 80 -15 0 -31 -3 -34 -7z"/>
+<path d="M1534 1717 c-3 -8 -4 -32 -2 -53 3 -36 6 -39 35 -42 30 -3 32 -1 39
+34 4 21 2 44 -3 53 -13 21 -61 27 -69 8z"/>
+<path d="M1500 1512 c-25 -21 -19 -45 16 -61 46 -21 64 -15 64 22 0 55 -37 74
+-80 39z"/>
+<path d="M8612 1518 c-7 -7 -12 -27 -12 -45 0 -32 1 -33 40 -33 25 0 42 6 48
+16 5 8 27 18 50 21 48 6 55 20 15 28 -16 3 -42 10 -59 15 -41 13 -67 13 -82
+-2z"/>
+<path d="M9150 1296 c0 -36 4 -46 20 -51 29 -9 40 2 40 39 0 36 -15 56 -42 56
+-15 0 -18 -8 -18 -44z"/>
+<path d="M9292 1308 c-17 -17 -15 -54 4 -72 23 -24 53 -20 66 9 21 46 -36 97
+-70 63z"/>
+<path d="M760 1295 c-30 -36 23 -95 72 -79 28 9 43 46 29 73 -14 25 -81 30
+-101 6z"/>
+<path d="M9463 1298 c-43 -21 -19 -88 31 -88 45 0 63 52 28 83 -21 19 -28 20
+-59 5z"/>
+<path d="M536 1287 c-12 -9 -17 -23 -14 -42 2 -24 8 -31 30 -33 38 -5 68 14
+68 43 0 39 -49 58 -84 32z"/>
+<path d="M9678 1289 c-25 -14 -22 -55 4 -73 28 -20 43 -20 62 0 44 44 -12 105
+-66 73z"/>
+<path d="M2634 1182 c-17 -11 -24 -54 -12 -69 8 -10 56 -13 199 -13 l189 0 10
+26 c7 17 7 32 0 45 -10 18 -23 19 -193 19 -100 0 -187 -4 -193 -8z"/>
+<path d="M3260 1165 c-12 -32 -4 -54 24 -60 16 -5 622 0 634 4 1 1 7 12 12 26
+21 56 27 55 -331 55 l-329 0 -10 -25z"/>
+<path d="M4212 1178 c-16 -16 -15 -55 0 -64 7 -5 315 -9 685 -10 585 -2 675 0
+688 13 20 19 19 59 -1 67 -9 3 -318 6 -688 6 -509 0 -675 -3 -684 -12z"/>
+<path d="M5748 1179 c-11 -6 -18 -22 -18 -39 0 -37 16 -42 135 -38 l90 3 0 40
+0 40 -95 2 c-52 2 -103 -2 -112 -8z"/>
+<path d="M6136 1174 c-31 -31 -16 -70 30 -80 38 -7 64 15 64 56 0 41 -62 57
+-94 24z"/>
+<path d="M6830 1181 c-32 -5 -35 -9 -35 -41 l0 -35 404 -3 c290 -1 408 1 417
+9 17 14 18 51 2 67 -9 9 -106 12 -382 11 -204 -1 -387 -4 -406 -8z"/>
+<path d="M2170 1149 l0 -29 84 0 c69 0 85 3 90 17 11 27 -8 35 -93 38 l-81 2
+0 -28z"/>
+<path d="M6437 1153 c-9 -50 -3 -53 104 -53 99 0 100 0 110 27 18 48 9 53
+-105 53 l-104 0 -5 -27z"/>
+<path d="M2995 1001 c-84 -6 -90 -7 -93 -29 -7 -47 9 -52 167 -52 155 0 171 4
+171 47 0 43 -29 47 -245 34z"/>
+<path d="M6085 1000 c-168 -5 -170 -5 -173 -28 -7 -49 7 -52 204 -52 195 0
+214 5 214 51 0 19 -38 41 -63 37 -7 -1 -88 -5 -182 -8z"/>
+<path d="M3674 986 c-3 -8 -4 -25 -2 -38 3 -23 5 -23 118 -23 l115 0 0 35 0
+35 -113 3 c-91 2 -113 0 -118 -12z"/>
+<path d="M4121 986 c-7 -8 -11 -23 -9 -33 3 -15 19 -19 108 -26 58 -4 175 -6
+260 -5 l155 3 0 35 0 35 -251 3 c-211 2 -253 0 -263 -12z"/>
+<path d="M4765 980 c-3 -11 -3 -29 0 -40 6 -20 13 -20 178 -18 l172 3 3 38 3
+37 -175 0 c-166 0 -175 -1 -181 -20z"/>
+<path d="M5244 986 c-3 -8 -4 -25 -2 -38 3 -22 7 -23 100 -26 89 -2 98 -1 108
+18 6 11 8 30 5 40 -6 18 -16 20 -106 20 -77 0 -101 -3 -105 -14z"/>
+<path d="M5537 994 c-13 -14 -7 -62 9 -68 9 -3 57 -6 109 -6 100 0 119 9 113
+52 -3 22 -7 23 -114 26 -60 1 -113 -1 -117 -4z"/>
+<path d="M6507 993 c-19 -3 -31 -13 -38 -30 -5 -14 -8 -27 -6 -29 2 -2 31 -7
+65 -10 43 -5 66 -3 77 6 23 19 18 49 -11 60 -26 10 -36 10 -87 3z"/>
+</g>
+</svg>
diff --git a/apps/web/src/assets/images/iptvnator-1-mascot.png b/apps/web/src/assets/images/iptvnator-1-mascot.png
new file mode 100644
index 0000000..fd0be9d
Binary files /dev/null and b/apps/web/src/assets/images/iptvnator-1-mascot.png differ
diff --git a/apps/web/src/environments/environment.dev.ts b/apps/web/src/environments/environment.dev.ts
new file mode 100644
index 0000000..28f9dd1
--- /dev/null
+++ b/apps/web/src/environments/environment.dev.ts
@@ -0,0 +1,16 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `index.ts`, but if you do
+// `ng build --env=prod` then `index.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+import packageJson from '@package';
+import type { WorkspaceProductBranding } from 'shared-interfaces';
+
+export const AppConfig = {
+    production: false,
+    environment: 'DEV',
+    version: packageJson.version,
+    BACKEND_URL: 'http://localhost:3000',
+    defaultTranslateLang: 'en' as const,
+    product: null as WorkspaceProductBranding | null,
+};
diff --git a/apps/web/src/environments/environment.kiratv.ts b/apps/web/src/environments/environment.kiratv.ts
new file mode 100644
index 0000000..815a189
--- /dev/null
+++ b/apps/web/src/environments/environment.kiratv.ts
@@ -0,0 +1,27 @@
+import packageJson from '@package';
+import {
+    Language,
+    StreamFormat,
+    VideoPlayer,
+    type WorkspaceProductBranding,
+} from 'shared-interfaces';
+
+export const kiratvProduct: WorkspaceProductBranding = {
+    appDisplayName: 'KiraTV',
+    xtreamOnlyUi: true,
+    xtreamDefaultServerUrl: 'http://iptv.kiracloud.es',
+    defaultPlaylistTitle: 'Kira Cloud',
+    defaultLanguage: Language.SPANISH,
+    defaultVideoPlayer: VideoPlayer.ArtPlayer,
+    defaultStreamFormat: StreamFormat.TsStreamFormat,
+    indexHtmlLang: 'es',
+};
+
+export const AppConfig = {
+    production: true,
+    environment: 'KIRATV',
+    version: packageJson.version,
+    BACKEND_URL: 'https://iptvnator-playlist-parser-api.vercel.app',
+    defaultTranslateLang: 'es',
+    product: kiratvProduct,
+};
diff --git a/apps/web/src/environments/environment.prod.ts b/apps/web/src/environments/environment.prod.ts
new file mode 100644
index 0000000..c3aa005
--- /dev/null
+++ b/apps/web/src/environments/environment.prod.ts
@@ -0,0 +1,11 @@
+import packageJson from '@package';
+import type { WorkspaceProductBranding } from 'shared-interfaces';
+
+export const AppConfig = {
+    production: true,
+    environment: 'PROD',
+    version: packageJson.version,
+    BACKEND_URL: 'https://iptvnator-playlist-parser-api.vercel.app',
+    defaultTranslateLang: 'en' as const,
+    product: null as WorkspaceProductBranding | null,
+};
diff --git a/apps/web/src/environments/environment.ts b/apps/web/src/environments/environment.ts
new file mode 100644
index 0000000..b7aa1d3
--- /dev/null
+++ b/apps/web/src/environments/environment.ts
@@ -0,0 +1,11 @@
+import packageJson from '@package';
+import type { WorkspaceProductBranding } from 'shared-interfaces';
+
+export const AppConfig = {
+    production: false,
+    environment: 'LOCAL',
+    version: packageJson.version,
+    BACKEND_URL: 'http://localhost:3000',
+    defaultTranslateLang: 'en' as const,
+    product: null as WorkspaceProductBranding | null,
+};
diff --git a/apps/web/src/environments/environment.web.ts b/apps/web/src/environments/environment.web.ts
new file mode 100644
index 0000000..56bf196
--- /dev/null
+++ b/apps/web/src/environments/environment.web.ts
@@ -0,0 +1,11 @@
+import packageJson from '@package';
+import type { WorkspaceProductBranding } from 'shared-interfaces';
+
+export const AppConfig = {
+    production: false,
+    environment: 'WEB',
+    version: packageJson.version,
+    BACKEND_URL: 'http://localhost:3333',
+    defaultTranslateLang: 'en' as const,
+    product: null as WorkspaceProductBranding | null,
+};
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
new file mode 100644
index 0000000..a4d7ad9
--- /dev/null
+++ b/apps/web/src/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>IPTVnator</title>
+        <base href="/" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="IPTVnator" />
+        <meta property="og:url" content="https://iptvnator.vercel.app" />
+        <meta
+            property="og:image"
+            content="https://raw.githubusercontent.com/4gray/iptvnator/electron/iptv-dark-theme.png"
+        />
+        <meta
+            property="og:description"
+            content="IPTVnator is a video player application that provides support for the playback of IPTV playlists (m3u, m3u8)"
+        />
+        <link rel="manifest" href="manifest.webmanifest" />
+        <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" />
+        <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
+        <script>
+            if (global === undefined) {
+                var global = window;
+            }
+        </script>
+    </head>
+    <body class="mat-app-background">
+        <app-root></app-root>
+    </body>
+</html>
diff --git a/apps/web/src/index.kiratv.html b/apps/web/src/index.kiratv.html
new file mode 100644
index 0000000..0cbd636
--- /dev/null
+++ b/apps/web/src/index.kiratv.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <title>KiraTV</title>
+        <base href="/" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="KiraTV" />
+        <meta property="og:url" content="https://play.kiracloud.es" />
+        <meta
+            property="og:description"
+            content="Cliente IPTV para Kira Cloud: TV en directo, películas y series."
+        />
+        <link rel="manifest" href="manifest.webmanifest" />
+        <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" />
+        <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
+        <script>
+            if (global === undefined) {
+                var global = window;
+            }
+        </script>
+    </head>
+    <body class="mat-app-background">
+        <app-root></app-root>
+    </body>
+</html>
diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss
new file mode 100644
index 0000000..660b64d
--- /dev/null
+++ b/apps/web/src/m3-theme.scss
@@ -0,0 +1,240 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use 'styles';
+
+@include mat.elevation-classes();
+@include mat.app-background();
+
+// ─── Typography ─────────────────────────────────────────────────────────────
+$app-font-stack:
+    "'DM Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+
+$my-typography: mat.m2-define-typography-config(
+    $font-family: $app-font-stack,
+);
+@include mat.typography-hierarchy($my-typography);
+
+// ─── M3 Themes ───────────────────────────────────────────────────────────────
+$light-theme: mat.define-theme(
+    (
+        color: (
+            theme-type: light,
+            primary: mat.$violet-palette,
+            tertiary: mat.$cyan-palette,
+        ),
+        typography: (
+            plain-family: $app-font-stack,
+            brand-family: $app-font-stack,
+        ),
+    )
+);
+
+$dark-theme: mat.define-theme(
+    (
+        color: (
+            theme-type: dark,
+            primary: mat.$violet-palette,
+            tertiary: mat.$cyan-palette,
+        ),
+        typography: (
+            plain-family: $app-font-stack,
+            brand-family: $app-font-stack,
+        ),
+    )
+);
+
+// ─── Apply Themes ────────────────────────────────────────────────────────────
+html {
+    @include mat.all-component-themes($light-theme);
+
+    // ── Light theme design tokens ─────────────────────────────────────────
+    --app-shell-bg: #eef0f3;
+    --app-rail-bg: #eef0f3;
+    --app-header-bg: #eef0f3;
+    --app-content-bg: #f5f6f8;
+    --app-rail-border: transparent;
+    --app-on-surface: #1d1b1e;
+    --app-hover-overlay: rgba(0, 0, 0, 0.06);
+    --app-search-bg: rgba(255, 255, 255, 0.7);
+    --app-search-border: rgba(0, 0, 0, 0.1);
+    --app-selection-color: #2f7bff;
+    --app-selection-on-color: #eef4ff;
+    --app-selection-surface: color-mix(
+        in srgb,
+        var(--app-selection-color) 14%,
+        transparent
+    );
+    --app-selection-surface-strong: color-mix(
+        in srgb,
+        var(--app-selection-color) 22%,
+        transparent
+    );
+    --app-selection-border: color-mix(
+        in srgb,
+        var(--app-selection-color) 52%,
+        transparent
+    );
+    --app-selection-glow: color-mix(
+        in srgb,
+        var(--app-selection-color) 34%,
+        transparent
+    );
+
+    // Content area
+    --app-content-shadow: -2px 4px 12px rgba(0, 0, 0, 0.06);
+
+    // Widget surfaces — no borders, layered backgrounds
+    --app-widget-bg: #ffffff;
+    --app-widget-header-bg: #fafbfc;
+    --app-widget-border: transparent;
+    --app-widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
+    --app-widget-header-border: rgba(0, 0, 0, 0.06);
+    --app-card-hover-bg: #f0f2f5;
+    --app-separator: rgba(0, 0, 0, 0.14);
+
+    // Typography — subdued, not pure black
+    --app-heading-color: #1a1d23;
+    --app-body-color: #4a5060;
+    --app-muted-color: #8891a4;
+    --app-eyebrow-color: #7c8495;
+
+    // Provider accent colors
+    --app-provider-xtream: #6366f1;
+    --app-provider-stalker: #10b981;
+    --app-provider-m3u: #d97706;
+
+    // Hero
+    --app-accent-gradient: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.08) 0%,
+        rgba(168, 85, 247, 0.05) 100%
+    );
+    --app-hero-surface: rgba(99, 102, 241, 0.04);
+
+    .dark-theme {
+        @include mat.all-component-colors($dark-theme);
+
+        // ── Dark graphite theme ────────────────────────────────────────────
+        // Inspired by both Slack (sidebar distinction) and GitButler (data density)
+        // Key principle: clearly distinct surface layers using graphite steps
+        // Darkest → lightest: #0d0f12 → #141720 → #1c2030 → #222840
+
+        // App shell & navigation
+        --app-shell-bg: #0d0f12;
+        --app-rail-bg: #111318;
+        --app-header-bg: #111318;
+        --app-content-bg: #161a22;
+        --app-rail-border: transparent;
+        --app-on-surface: #e6e1e5;
+        --app-hover-overlay: rgba(255, 255, 255, 0.08);
+        --app-search-bg: rgba(255, 255, 255, 0.05);
+        --app-search-border: rgba(255, 255, 255, 0.09);
+        --app-selection-color: #78adff;
+        --app-selection-on-color: #071225;
+        --app-selection-surface: color-mix(
+            in srgb,
+            var(--app-selection-color) 18%,
+            transparent
+        );
+        --app-selection-surface-strong: color-mix(
+            in srgb,
+            var(--app-selection-color) 28%,
+            transparent
+        );
+        --app-selection-border: color-mix(
+            in srgb,
+            var(--app-selection-color) 62%,
+            transparent
+        );
+        --app-selection-glow: color-mix(
+            in srgb,
+            var(--app-selection-color) 44%,
+            transparent
+        );
+
+        // Content area
+        --app-content-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18);
+
+        // Widget surfaces — NO border, surface contrast does the work
+        // Widgets sit on content-bg (#161a22), so widget-bg is notably lighter
+        --app-widget-bg: #1e2330;
+        --app-widget-header-bg: #232840;
+        --app-widget-border: transparent;
+        --app-widget-shadow: none;
+        --app-widget-header-border: rgba(255, 255, 255, 0.05);
+        --app-card-hover-bg: #252b3a;
+        --app-separator: rgba(255, 255, 255, 0.14);
+
+        // Typography — NOT pure white. Warm graphite-tinted whites
+        --app-heading-color: #d8dce8;       // soft off-white, not #fff
+        --app-body-color: #8b93a8;          // muted blue-grey
+        --app-muted-color: #5c6478;         // dimmed
+        --app-eyebrow-color: #6b7494;       // eyebrow labels
+
+        // Provider accents (slightly brighter for dark bg)
+        --app-provider-xtream: #818cf8;
+        --app-provider-stalker: #34d399;
+        --app-provider-m3u: #fbbf24;
+
+        // Hero section
+        --app-accent-gradient: linear-gradient(
+            135deg,
+            rgba(99, 102, 241, 0.12) 0%,
+            rgba(168, 85, 247, 0.07) 100%
+        );
+        --app-hero-surface: rgba(30, 35, 48, 0.9);
+    }
+}
+
+// ─── Global refined outlined inputs ──────────────────────────────────────────
+// Applied app-wide AFTER mat.all-component-themes so these overrides win the
+// cascade. Pairs with MAT_FORM_FIELD_DEFAULT_OPTIONS (outline + dynamic) set
+// in app.config.ts.
+$app-refined-input-density: mat.define-theme((
+    density: (scale: -2),
+));
+
+html {
+    @include mat.form-field-density($app-refined-input-density);
+
+    .mat-mdc-form-field {
+        --mdc-outlined-text-field-outline-color: var(--app-widget-header-border);
+        --mdc-outlined-text-field-hover-outline-color: var(--app-muted-color);
+        --mdc-outlined-text-field-focus-outline-color: var(--app-selection-color);
+        --mdc-outlined-text-field-container-shape: 10px;
+        --mdc-outlined-text-field-label-text-color: var(--app-muted-color);
+        --mdc-outlined-text-field-input-text-color: var(--app-heading-color);
+        --mdc-outlined-text-field-caret-color: var(--app-selection-color);
+        --mdc-outlined-text-field-label-text-size: 13px;
+        --mdc-outlined-text-field-input-text-size: 13.5px;
+    }
+
+    // Inputs sit slightly above the surrounding surface. color-mix is inlined
+    // here (not via a custom property on html) so var(--app-widget-bg)
+    // resolves at the wrapper — inside .dark-theme — rather than being
+    // locked to the light-mode value at html-level inheritance.
+    .mat-form-field-appearance-outline .mat-mdc-text-field-wrapper {
+        background: color-mix(in srgb, var(--app-widget-bg) 85%, white 7%);
+        border-radius: 10px;
+    }
+
+    .mat-mdc-form-field .mat-mdc-input-element,
+    .mat-mdc-form-field .mat-mdc-select-value {
+        font-size: 13.5px;
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+        font-size: 11px;
+        letter-spacing: 0.01em;
+        margin-top: 2px;
+
+        .mat-mdc-form-field-hint-wrapper,
+        .mat-mdc-form-field-error-wrapper {
+            padding: 0 12px;
+        }
+
+        .mat-mdc-form-field-hint {
+            color: var(--app-muted-color);
+        }
+    }
+}
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
new file mode 100644
index 0000000..9517f00
--- /dev/null
+++ b/apps/web/src/main.ts
@@ -0,0 +1,10 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { registerAppDateLocales } from './app/app-date-locales';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+registerAppDateLocales();
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+    console.error(err)
+);
diff --git a/apps/web/src/manifest.kiratv.webmanifest b/apps/web/src/manifest.kiratv.webmanifest
new file mode 100644
index 0000000..7b5b8ed
--- /dev/null
+++ b/apps/web/src/manifest.kiratv.webmanifest
@@ -0,0 +1,35 @@
+{
+    "name": "KiraTV",
+    "description": "Cliente IPTV para Kira Cloud (Xtream Codes).",
+    "short_name": "KiraTV",
+    "theme_color": "#1e1b4b",
+    "background_color": "#0f172a",
+    "display": "standalone",
+    "scope": "./",
+    "start_url": "./",
+    "categories": ["video"],
+    "icons": [
+        {
+            "src": "assets/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "assets/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "assets/icons/android-chrome-maskable-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "assets/icons/android-chrome-maskable-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/apps/web/src/manifest.webmanifest b/apps/web/src/manifest.webmanifest
new file mode 100644
index 0000000..ece7402
--- /dev/null
+++ b/apps/web/src/manifest.webmanifest
@@ -0,0 +1,35 @@
+{
+    "name": "IPTVnator",
+    "description": "IPTVnator is a tool to watch and manage your IPTV playlists.",
+    "short_name": "IPTVnator",
+    "theme_color": "#1b1c1c",
+    "background_color": "#1b1c1c",
+    "display": "standalone",
+    "scope": "./",
+    "start_url": "./",
+    "categories": ["video"],
+    "icons": [
+        {
+            "src": "assets/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "assets/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "assets/icons/android-chrome-maskable-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "assets/icons/android-chrome-maskable-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/apps/web/src/mocks/playlist.json b/apps/web/src/mocks/playlist.json
new file mode 100644
index 0000000..c03301b
--- /dev/null
+++ b/apps/web/src/mocks/playlist.json
@@ -0,0 +1,102 @@
+{
+    "id": "n8qbqhmshrk",
+    "_id": "1268xq358s7m",
+    "filename": "playlist.m3u8",
+    "title": "playlist.m3u8",
+    "count": 4,
+    "playlist": {
+        "header": {
+            "attrs": {},
+            "raw": "#EXTM3U"
+        },
+        "items": [
+            {
+                "name": "rpk-news\r",
+                "tvg": {
+                    "id": "",
+                    "name": "",
+                    "language": "",
+                    "country": "",
+                    "logo": "",
+                    "url": "",
+                    "rec": ""
+                },
+                "group": {
+                    "title": "news\r"
+                },
+                "http": {
+                    "referrer": "",
+                    "user-agent": ""
+                },
+                "url": "http://test/1/index.m3u8",
+                "raw": "#EXTINF:0 tvg-rec=\"3\",rpk-news\r\n#EXTGRP:news\r\nhttp://test/1/index.m3u8"
+            },
+            {
+                "name": "5th channel\r",
+                "tvg": {
+                    "id": "",
+                    "name": "",
+                    "language": "",
+                    "country": "",
+                    "logo": "",
+                    "url": "",
+                    "rec": ""
+                },
+                "group": {
+                    "title": "news\r"
+                },
+                "http": {
+                    "referrer": "",
+                    "user-agent": ""
+                },
+                "url": "http://test/2/index.m3u8",
+                "raw": "#EXTINF:0 tvg-rec=\"3\",5th channel\r\n#EXTGRP:news\r\nhttp://test/2/index.m3u8"
+            },
+            {
+                "name": "Multiland Channel\r",
+                "tvg": {
+                    "id": "",
+                    "name": "",
+                    "language": "",
+                    "country": "",
+                    "logo": "",
+                    "url": "",
+                    "rec": ""
+                },
+                "group": {
+                    "title": "category 2\r"
+                },
+                "http": {
+                    "referrer": "",
+                    "user-agent": ""
+                },
+                "url": "http://test/3/index.m3u8",
+                "raw": "#EXTINF:0 tvg-rec=\"3\",Multiland Channel\r\n#EXTGRP:category 2\r\nhttp://test/3/index.m3u8"
+            },
+            {
+                "name": "Unicuuuum\r",
+                "tvg": {
+                    "id": "",
+                    "name": "",
+                    "language": "",
+                    "country": "",
+                    "logo": "",
+                    "url": "",
+                    "rec": ""
+                },
+                "group": {
+                    "title": "category 2\r"
+                },
+                "http": {
+                    "referrer": "",
+                    "user-agent": ""
+                },
+                "url": "http://test/4/index.m3u8",
+                "raw": "#EXTINF:0 tvg-rec=\"3\",Unicuuuum\r\n#EXTGRP:category 2\r\nhttp://test/4/index.m3u8"
+            }
+        ]
+    },
+    "importDate": "2020-10-02T17:28:03.300Z",
+    "lastUsage": "2020-10-02T17:28:03.300Z",
+    "favorites": []
+}
\ No newline at end of file
diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss
new file mode 100644
index 0000000..dfb6df1
--- /dev/null
+++ b/apps/web/src/nav-list.scss
@@ -0,0 +1,103 @@
+// ─── Shared List Navigation Styles ────────────────────────────────────────────
+.nav-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.nav-item {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 4px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--mat-sys-on-surface-variant);
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    box-sizing: border-box;
+    transition:
+        background 0.15s ease,
+        color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+    }
+
+    span,
+    .nav-item-label {
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .nav-item-meta {
+        font-size: 0.8rem;
+        min-width: 2ch;
+        text-align: right;
+        flex-shrink: 0;
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.7;
+    }
+
+    &:hover:not(.selected):not(.active):not(.is-active) {
+        background: var(--app-selection-surface);
+        color: var(--mat-sys-on-surface);
+    }
+
+    &.selected,
+    &.active,
+    &.is-active {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        ) !important;
+        color: var(--app-selection-color) !important;
+        border-color: var(--app-selection-border) !important;
+        font-weight: 600;
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+
+        * {
+            color: var(--app-selection-color) !important;
+        }
+
+        .nav-item-meta {
+            color: var(--app-selection-color) !important;
+            opacity: 0.92;
+        }
+
+        /* &::before {
+            content: '';
+            position: absolute;
+            inset-inline-start: 2px;
+            top: 7px;
+            bottom: 7px;
+            width: 2px;
+            border-radius: 999px;
+            background: var(--app-selection-color);
+            box-shadow: 0 0 10px var(--app-selection-glow);
+        } */
+    }
+}
diff --git a/apps/web/src/polyfills-test.ts b/apps/web/src/polyfills-test.ts
new file mode 100644
index 0000000..aa09a9f
--- /dev/null
+++ b/apps/web/src/polyfills-test.ts
@@ -0,0 +1 @@
+import 'zone.js';
diff --git a/apps/web/src/polyfills.ts b/apps/web/src/polyfills.ts
new file mode 100644
index 0000000..b40974e
--- /dev/null
+++ b/apps/web/src/polyfills.ts
@@ -0,0 +1,52 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/apps/web/src/setup-jest.ts b/apps/web/src/setup-jest.ts
new file mode 100644
index 0000000..1100b3e
--- /dev/null
+++ b/apps/web/src/setup-jest.ts
@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
new file mode 100644
index 0000000..5c9724c
--- /dev/null
+++ b/apps/web/src/styles.scss
@@ -0,0 +1,140 @@
+@use '../../../libs/ui/components/src/lib/resizable/resizable.scss';
+@use './settings-theme';
+
+// ─── Tailwind CSS ─────────────────────────────────────────────────────────────
+// Preflight is disabled in tailwind.config.js to avoid conflicts with
+// Angular Material. Only components + utilities are loaded.
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// ─── Third-party ─────────────────────────────────────────────────────────────
+@import '@yangkghjh/videojs-aspect-ratio-panel/dist/videojs-aspect-ratio-panel.css';
+@import 'material-design-icons-iconfont/dist/material-design-icons.css';
+
+// ─── Bundled Fonts ────────────────────────────────────────────────────────────
+@import '@fontsource/dm-sans/400.css';
+@import '@fontsource/dm-sans/500.css';
+@import '@fontsource/dm-sans/600.css';
+@import '@fontsource/roboto/300.css';
+@import '@fontsource/roboto/400.css';
+@import '@fontsource/roboto/500.css';
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/500.css';
+@import '@fontsource/crimson-pro/400.css';
+@import '@fontsource/crimson-pro/600.css';
+@import '@fontsource/crimson-pro/700.css';
+
+// ─── Shared Components ────────────────────────────────────────────────────────
+
+app-root.macos-platform .current-playlist {
+    padding-top: 30px;
+}
+
+app-root.macos-platform app-navigation .portal-status-container {
+    padding-top: 30px;
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+body,
+html {
+    user-select: none;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family:
+        'DM Sans',
+        'Roboto',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Helvetica Neue',
+        Arial,
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+// Re-enable context menu and text selection for input fields
+input,
+textarea {
+    user-select: text;
+}
+
+@media (display-mode: standalone) {
+    body {
+        overscroll-behavior-y: contain;
+        overflow: hidden;
+    }
+}
+
+// ─── Utilities ────────────────────────────────────────────────────────────────
+.mat-tab-label-active {
+    opacity: 1 !important;
+}
+
+input,
+button,
+textarea,
+:focus {
+    outline: none;
+}
+
+// ─── Dark Theme ───────────────────────────────────────────────────────────────
+.dark-theme {
+    background: var(--mat-sys-surface) !important;
+
+    // Refined scrollbar for dark mode
+    ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--mat-sys-outline-variant);
+        border-radius: 999px;
+
+        &:hover {
+            background-color: var(--mat-sys-outline);
+        }
+    }
+}
+
+.scroll-viewport-portals {
+    min-height: calc(100vh - 170px) !important;
+    overflow-x: hidden !important;
+}
+
+.mat-drawer-inner-container {
+    overflow: hidden !important;
+}
+
+.cdk-overlay-backdrop {
+    backdrop-filter: blur(4px);
+}
+
+// Full-screen overlay dialogs (global search/recent) must stay interactive in Electron.
+.global-search-overlay,
+.global-search-overlay .mat-mdc-dialog-surface,
+.global-search-overlay .mat-mdc-dialog-container {
+    app-region: no-drag;
+}
+
+// Command palette dialog — the palette-shell renders its own background, border,
+// radius and shadow, so strip MDC's dialog surface chrome to avoid a darker
+// halo peeking out behind the rounded corners.
+.workspace-command-palette-overlay .mat-mdc-dialog-surface {
+    background: transparent;
+    box-shadow: none;
+    border-radius: 14px;
+    padding: 0;
+    overflow: visible;
+}
+
+.mat-mdc-snack-bar-container.settings-snackbar {
+    margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
+}
diff --git a/apps/web/src/test-setup.ts b/apps/web/src/test-setup.ts
new file mode 100644
index 0000000..5506c1d
--- /dev/null
+++ b/apps/web/src/test-setup.ts
@@ -0,0 +1,26 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+Object.defineProperty(globalThis, 'jest', {
+  configurable: true,
+  value: import.meta.jest,
+});
+
+if (typeof (globalThis as { IDBFactory?: unknown }).IDBFactory === 'undefined') {
+  Object.defineProperty(globalThis, 'IDBFactory', {
+    configurable: true,
+    value: class MockIDBFactory {},
+  });
+}
+
+if (!Element.prototype.animate) {
+  Element.prototype.animate = () =>
+    ({
+      cancel: () => undefined,
+      finished: Promise.resolve(),
+    }) as unknown as Animation;
+}
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});
diff --git a/apps/web/src/test-stubs/iptv-playlist-parser.mjs b/apps/web/src/test-stubs/iptv-playlist-parser.mjs
new file mode 100644
index 0000000..bde987a
--- /dev/null
+++ b/apps/web/src/test-stubs/iptv-playlist-parser.mjs
@@ -0,0 +1,4 @@
+import parser from '../../../../node_modules/iptv-playlist-parser/src/index.js';
+
+export const parse = parser.parse;
+export default parser;
diff --git a/apps/web/src/test-stubs/xtream-feature.stub.ts b/apps/web/src/test-stubs/xtream-feature.stub.ts
new file mode 100644
index 0000000..0dd1ce3
--- /dev/null
+++ b/apps/web/src/test-stubs/xtream-feature.stub.ts
@@ -0,0 +1 @@
+export class PlayerDialogComponent {}
diff --git a/apps/web/src/typings.d.ts b/apps/web/src/typings.d.ts
new file mode 100644
index 0000000..5c84ec1
--- /dev/null
+++ b/apps/web/src/typings.d.ts
@@ -0,0 +1,475 @@
+/* SystemJS module definition */
+declare const nodeModule: NodeModule;
+interface NodeModule {
+    id: string;
+}
+
+import {
+    EpgChannel,
+    EpgChannelMetadata,
+    EpgProgram,
+    ExternalPlayerSession,
+    PlaybackPositionData,
+    Playlist,
+    PlaylistRefreshEvent,
+    PlaylistRefreshPayload,
+    PortalDebugEvent,
+    XtreamBackupFavoriteItem,
+    XtreamBackupHiddenCategory,
+    XtreamBackupRecentlyViewedItem,
+    XtreamCategory,
+} from 'shared-interfaces';
+import {
+    DbOperationEvent,
+    GlobalFavoriteItem,
+    GlobalRecentlyAddedItem,
+    GlobalRecentItem,
+    GlobalSearchResult,
+    XCategoryFromDb,
+    XtreamContent,
+} from 'services';
+
+type JsonObject = Record<string, unknown>;
+type JsonArray = unknown[];
+
+declare global {
+    interface Window {
+        electron: {
+            onPortalDebugEvent?: (
+                callback: (data: PortalDebugEvent) => void
+            ) => () => void;
+            onPlaylistRefreshEvent?: (
+                callback: (data: PlaylistRefreshEvent) => void
+            ) => () => void;
+            getAppVersion: () => Promise<string>;
+            platform: string;
+            fetchPlaylistByUrl: (
+                url: string,
+                title?: string
+            ) => Promise<Playlist>;
+            updatePlaylistFromFilePath: (
+                filePath: string,
+                title: string
+            ) => Promise<Playlist>;
+            openPlaylistFromFile: () => Promise<Playlist>;
+            saveFileDialog: (
+                defaultPath: string,
+                filters?: { name: string; extensions: string[] }[]
+            ) => Promise<string | null>;
+            writeFile: (
+                filePath: string,
+                content: string
+            ) => Promise<{ success: boolean }>;
+            setUserAgent: (userAgent: string, referer?: string) => void;
+            openInMpv: (
+                url: string,
+                title: string,
+                thumbnail: string,
+                userAgent: string,
+                referer?: string,
+                origin?: string,
+                contentInfo?: unknown,
+                startTime?: number,
+                headers?: Record<string, string>
+            ) => Promise<ExternalPlayerSession>;
+            openInVlc: (
+                url: string,
+                title: string,
+                thumbnail: string,
+                userAgent: string,
+                referer?: string,
+                origin?: string,
+                contentInfo?: unknown,
+                startTime?: number,
+                headers?: Record<string, string>
+            ) => Promise<ExternalPlayerSession>;
+            autoUpdatePlaylists: (playlists: Playlist[]) => Promise<Playlist[]>;
+            fetchEpg: (urls: string[]) => Promise<{
+                success: boolean;
+                message?: string;
+                skipped?: string[];
+            }>;
+            getChannelPrograms: (channelId: string) => Promise<EpgProgram[]>;
+            getEpgChannelMetadata: (
+                channelIds: string[]
+            ) => Promise<Record<string, EpgChannelMetadata | null>>;
+            getEpgChannels: () => Promise<EpgChannel[]>;
+            getEpgChannelsByRange: (
+                skip: number,
+                limit: number
+            ) => Promise<EpgChannel[]>;
+            forceFetchEpg: (
+                url: string
+            ) => Promise<{ success: boolean; message?: string }>;
+            clearEpgData: () => Promise<{ success: boolean }>;
+            checkEpgFreshness: (
+                urls: string[],
+                maxAgeHours?: number
+            ) => Promise<{ staleUrls: string[]; freshUrls: string[] }>;
+            searchEpgPrograms: (
+                searchTerm: string,
+                limit?: number
+            ) => Promise<EpgProgram[]>;
+            updateSettings: (settings: JsonObject) => Promise<void>;
+            getAiSettings: () => Promise<{
+                aiProvider: string;
+                aiModelName: string;
+                aiApiKey: string;
+            }>;
+            setMpvPlayerPath: (mpvPlayerPath: string) => Promise<void>;
+            setVlcPlayerPath: (vlcPlayerPath: string) => Promise<void>;
+            stalkerRequest: (payload: {
+                url: string;
+                macAddress: string;
+                params: Record<string, string>;
+                token?: string;
+                serialNumber?: string;
+                requestId?: string;
+            }) => Promise<JsonObject>;
+            xtreamRequest: (payload: {
+                url: string;
+                params: Record<string, string>;
+                requestId?: string;
+                sessionId?: string;
+                suppressErrorLog?: boolean;
+            }) => Promise<{ payload: unknown; action: string }>;
+            xtreamCancelSession: (
+                sessionId: string
+            ) => Promise<{ success: boolean; cancelled: number }>;
+            xtreamProbeUrl: (
+                url: string,
+                method?: 'GET' | 'HEAD'
+            ) => Promise<{ status: number; url: string }>;
+            refreshPlaylist: (
+                payload: PlaylistRefreshPayload
+            ) => Promise<Playlist>;
+            cancelPlaylistRefresh: (
+                operationId: string
+            ) => Promise<{ success: boolean }>;
+            // Database operations
+            dbCreatePlaylist: (
+                playlist: Playlist
+            ) => Promise<{ success: boolean }>;
+            dbGetPlaylist: (playlistId: string) => Promise<Playlist | null>;
+            dbUpsertAppPlaylist: (
+                playlist: Playlist
+            ) => Promise<{ success: boolean }>;
+            dbUpsertAppPlaylists: (
+                playlists: Playlist[]
+            ) => Promise<{ success: boolean; count: number }>;
+            dbGetAppPlaylists: () => Promise<Playlist[]>;
+            dbGetAppPlaylist: (playlistId: string) => Promise<Playlist | null>;
+            dbUpdatePlaylist: (
+                playlistId: string,
+                updates: Partial<Playlist>
+            ) => Promise<{ success: boolean }>;
+            dbDeletePlaylist: (
+                playlistId: string,
+                operationId?: string
+            ) => Promise<{ success: boolean }>;
+            dbDeleteXtreamContent: (
+                playlistId: string,
+                operationId?: string
+            ) => Promise<{
+                success: boolean;
+                favorites: XtreamBackupFavoriteItem[];
+                recentlyViewed: XtreamBackupRecentlyViewedItem[];
+                hiddenCategories: XtreamBackupHiddenCategory[];
+            }>;
+            dbRestoreXtreamUserData: (
+                playlistId: string,
+                favorites: XtreamBackupFavoriteItem[],
+                recentlyViewed: XtreamBackupRecentlyViewedItem[],
+                operationId?: string
+            ) => Promise<{ success: boolean }>;
+            dbHasCategories: (
+                playlistId: string,
+                type: string
+            ) => Promise<boolean>;
+            dbGetCategories: (
+                playlistId: string,
+                type: string
+            ) => Promise<XCategoryFromDb[]>;
+            dbSaveCategories: (
+                playlistId: string,
+                categories: XtreamCategory[],
+                type: string,
+                hiddenCategoryXtreamIds?: number[]
+            ) => Promise<{ success: boolean }>;
+            dbGetAllCategories: (
+                playlistId: string,
+                type: string
+            ) => Promise<XCategoryFromDb[]>;
+            dbUpdateCategoryVisibility: (
+                categoryIds: number[],
+                hidden: boolean
+            ) => Promise<{ success: boolean }>;
+            dbHasContent: (
+                playlistId: string,
+                type: string
+            ) => Promise<boolean>;
+            dbGetContent: (
+                playlistId: string,
+                type: string
+            ) => Promise<XtreamContent[]>;
+            dbSaveContent: (
+                playlistId: string,
+                streams: JsonArray,
+                type: string,
+                operationId?: string
+            ) => Promise<{ success: boolean; count: number }>;
+            dbClearXtreamImportCache: (
+                playlistId: string,
+                type: 'live' | 'movie' | 'series'
+            ) => Promise<{ success: boolean }>;
+            dbSearchContent: (
+                playlistId: string,
+                searchTerm: string,
+                types: string[],
+                excludeHidden?: boolean
+            ) => Promise<XtreamContent[]>;
+            dbGlobalSearch: (
+                searchTerm: string,
+                types: string[],
+                excludeHidden?: boolean
+            ) => Promise<GlobalSearchResult[]>;
+            dbGetGlobalRecentlyAdded: (
+                kind: 'all' | 'vod' | 'series',
+                limit?: number
+            ) => Promise<GlobalRecentlyAddedItem[]>;
+            dbGetRecentlyViewed: () => Promise<GlobalRecentItem[]>;
+            dbClearRecentlyViewed: () => Promise<{ success: boolean }>;
+            // Favorites
+            dbAddFavorite: (
+                contentId: number,
+                playlistId: string,
+                backdropUrl?: string
+            ) => Promise<{ success: boolean }>;
+            dbRemoveFavorite: (
+                contentId: number,
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbIsFavorite: (
+                contentId: number,
+                playlistId: string
+            ) => Promise<boolean>;
+            dbGetFavorites: (playlistId: string) => Promise<XtreamContent[]>;
+            dbGetGlobalFavorites: () => Promise<GlobalFavoriteItem[]>;
+            dbGetAllGlobalFavorites: () => Promise<GlobalFavoriteItem[]>;
+            dbReorderGlobalFavorites: (
+                updates: { content_id: number; position: number }[]
+            ) => Promise<{ success: boolean }>;
+            // Recently viewed (playlist-specific)
+            dbGetRecentItems: (playlistId: string) => Promise<XtreamContent[]>;
+            dbAddRecentItem: (
+                contentId: number,
+                playlistId: string,
+                backdropUrl?: string
+            ) => Promise<{ success: boolean }>;
+            dbClearPlaylistRecentItems: (
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbRemoveRecentItem: (
+                contentId: number,
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbGetContentByXtreamId: (
+                xtreamId: number,
+                playlistId: string,
+                contentType?: 'live' | 'movie' | 'series'
+            ) => Promise<XtreamContent | null>;
+            dbSetContentBackdropIfMissing: (
+                contentId: number,
+                backdropUrl?: string
+            ) => Promise<{ success: boolean }>;
+            dbGetAppState: (key: string) => Promise<string | null>;
+            dbSetAppState: (
+                key: string,
+                value: string
+            ) => Promise<{ success: boolean }>;
+            // Remote control
+            onChannelChange?: (
+                callback: (data: { direction: 'up' | 'down' }) => void
+            ) => () => void;
+            onRemoteControlCommand?: (
+                callback: (data: {
+                    type:
+                        | 'channel-select-number'
+                        | 'volume-up'
+                        | 'volume-down'
+                        | 'volume-toggle-mute';
+                    number?: number;
+                }) => void
+            ) => () => void;
+            updateRemoteControlStatus?: (status: {
+                portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
+                isLiveView: boolean;
+                channelName?: string;
+                channelNumber?: number;
+                epgTitle?: string;
+                epgStart?: string;
+                epgEnd?: string;
+                supportsVolume?: boolean;
+                volume?: number;
+                muted?: boolean;
+            }) => void;
+            // Player error notifications
+            onPlayerError?: (
+                callback: (data: {
+                    player: string;
+                    error: string;
+                    originalError: string;
+                }) => void
+            ) => void;
+            onExternalPlayerSessionUpdate?: (
+                callback: (data: ExternalPlayerSession) => void
+            ) => () => void;
+            getLocalIpAddresses: () => Promise<string[]>;
+            // EPG progress listener
+            onEpgProgress?: (
+                callback: (data: {
+                    url: string;
+                    status: 'loading' | 'complete' | 'error';
+                    stats?: { totalChannels: number; totalPrograms: number };
+                    error?: string;
+                }) => void
+            ) => void;
+            // DB save content progress listener
+            onDbSaveContentProgress: (
+                callback: (count: number) => void
+            ) => void;
+            removeDbSaveContentProgress: () => void;
+            onDbOperationEvent?: (
+                callback: (data: DbOperationEvent) => void
+            ) => () => void;
+            dbDeleteAllPlaylists: (
+                operationId?: string
+            ) => Promise<{ success: boolean }>;
+            dbCancelOperation: (
+                operationId: string
+            ) => Promise<{ success: boolean }>;
+            // Playback positions
+            dbSavePlaybackPosition: (
+                playlistId: string,
+                data: {
+                    contentXtreamId: number;
+                    contentType: 'vod' | 'episode';
+                    seriesXtreamId?: number;
+                    seasonNumber?: number;
+                    episodeNumber?: number;
+                    position: number;
+                    duration: number;
+                    title: string;
+                    posterUrl?: string;
+                }
+            ) => Promise<{ success: boolean }>;
+            dbGetPlaybackPosition: (
+                playlistId: string,
+                contentXtreamId: number,
+                contentType: 'vod' | 'episode'
+            ) => Promise<PlaybackPositionData | null>;
+            dbGetSeriesPlaybackPositions: (
+                playlistId: string,
+                seriesXtreamId: number
+            ) => Promise<PlaybackPositionData[]>;
+            dbGetRecentPlaybackPositions: (
+                playlistId: string,
+                limit?: number
+            ) => Promise<PlaybackPositionData[]>;
+            dbGetAllPlaybackPositions: (
+                playlistId: string
+            ) => Promise<PlaybackPositionData[]>;
+            dbClearAllPlaybackPositions: (
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbClearPlaybackPosition: (
+                playlistId: string,
+                contentXtreamId: number,
+                contentType: 'vod' | 'episode'
+            ) => Promise<{ success: boolean }>;
+            onPlaybackPositionUpdate: (
+                callback: (data: PlaybackPositionData) => void
+            ) => () => void;
+            closeExternalPlayerSession: (
+                sessionId: string
+            ) => Promise<ExternalPlayerSession | null>;
+            // Downloads
+            downloadsStart: (data: {
+                playlistId: string;
+                xtreamId: number;
+                contentType: 'vod' | 'episode';
+                title: string;
+                url: string;
+                posterUrl?: string;
+                downloadFolder: string;
+                headers?: {
+                    userAgent?: string;
+                    referer?: string;
+                    origin?: string;
+                };
+                seriesXtreamId?: number;
+                seasonNumber?: number;
+                episodeNumber?: number;
+                // Playlist info for auto-creation if needed
+                playlistName?: string;
+                playlistType?:
+                    | 'xtream'
+                    | 'stalker'
+                    | 'm3u-file'
+                    | 'm3u-text'
+                    | 'm3u-url';
+                serverUrl?: string;
+                portalUrl?: string;
+                macAddress?: string;
+            }) => Promise<{ success: boolean; id?: number; error?: string }>;
+            downloadsCancel: (
+                downloadId: number
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsRetry: (
+                downloadId: number,
+                downloadFolder: string
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsRemove: (
+                downloadId: number
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsGetList: (playlistId?: string) => Promise<DownloadItem[]>;
+            downloadsGet: (downloadId: number) => Promise<DownloadItem | null>;
+            downloadsGetDefaultFolder: () => Promise<string>;
+            downloadsSelectFolder: () => Promise<string | null>;
+            downloadsRevealFile: (
+                filePath: string
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsPlayFile: (
+                filePath: string
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsClearCompleted: (
+                playlistId?: string
+            ) => Promise<{ success: boolean }>;
+            onDownloadsUpdate: (callback: () => void) => () => void;
+        };
+        process: NodeJS.Process;
+        require: NodeRequire;
+    }
+
+    /** Download item from the database */
+    interface DownloadItem {
+        id: number;
+        playlistId: string;
+        xtreamId: number;
+        contentType: 'vod' | 'episode';
+        seriesXtreamId?: number;
+        seasonNumber?: number;
+        episodeNumber?: number;
+        title: string;
+        url: string;
+        fileName?: string;
+        filePath?: string;
+        posterUrl?: string;
+        status: 'queued' | 'downloading' | 'completed' | 'failed' | 'canceled';
+        bytesDownloaded?: number;
+        totalBytes?: number;
+        errorMessage?: string;
+        createdAt?: string;
+        updatedAt?: string;
+    }
+}
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
new file mode 100644
index 0000000..371bbc8
--- /dev/null
+++ b/apps/web/tailwind.config.js
@@ -0,0 +1,56 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    // Content paths scoped to the Angular web app and shared libs
+    content: [
+        './apps/web/src/**/*.{html,ts,scss}',
+        './libs/**/*.{html,ts,scss}',
+    ],
+    // Match Angular Material's dark theme class strategy
+    darkMode: 'class',
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter', 'Roboto', 'Helvetica Neue', 'sans-serif'],
+            },
+            colors: {
+                // Surface colors wired to Material sys vars so Tailwind
+                // utilities automatically respect the active theme
+                surface: 'var(--mat-sys-surface)',
+                'surface-low': 'var(--mat-sys-surface-container-low)',
+                'surface-mid': 'var(--mat-sys-surface-container)',
+                'surface-high': 'var(--mat-sys-surface-container-high)',
+                'on-surface': 'var(--mat-sys-on-surface)',
+                'on-surface-variant': 'var(--mat-sys-on-surface-variant)',
+                outline: 'var(--mat-sys-outline)',
+                'outline-variant': 'var(--mat-sys-outline-variant)',
+                primary: 'var(--mat-sys-primary)',
+                'on-primary': 'var(--mat-sys-on-primary)',
+                'primary-container': 'var(--mat-sys-primary-container)',
+                'on-primary-container': 'var(--mat-sys-on-primary-container)',
+                secondary: 'var(--mat-sys-secondary)',
+                'secondary-container': 'var(--mat-sys-secondary-container)',
+                'on-secondary-container':
+                    'var(--mat-sys-on-secondary-container)',
+                tertiary: 'var(--mat-sys-tertiary)',
+                'tertiary-container': 'var(--mat-sys-tertiary-container)',
+                error: 'var(--mat-sys-error)',
+                'error-container': 'var(--mat-sys-error-container)',
+            },
+            borderRadius: {
+                widget: '14px',
+                pill: '999px',
+                card: '18px',
+            },
+            boxShadow: {
+                widget: '0 1px 4px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.04)',
+                'widget-hover':
+                    '0 4px 16px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.06)',
+                card: '0 2px 8px rgba(0,0,0,0.15)',
+            },
+        },
+    },
+    // CRITICAL: disable preflight to avoid conflicts with Angular Material
+    corePlugins: {
+        preflight: false,
+    },
+};
diff --git a/apps/web/tsconfig.app.json b/apps/web/tsconfig.app.json
new file mode 100644
index 0000000..2f8957c
--- /dev/null
+++ b/apps/web/tsconfig.app.json
@@ -0,0 +1,16 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "types": []
+    },
+    "files": ["../../global.d.ts"],
+    "include": ["src/**/*.ts"],
+    "exclude": [
+        "jest.config.ts",
+        "src/test-setup.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.stub.ts"
+    ]
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
new file mode 100644
index 0000000..b17319d
--- /dev/null
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,37 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "es2020",
+        "outDir": "./dist/out-tsc",
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "bundler",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "target": "ES2022",
+        "typeRoots": ["../../node_modules/@types"],
+        "lib": ["es2018", "es2017", "es2016", "es2015", "dom"],
+        "resolveJsonModule": true,
+        "strict": false,
+        "skipLibCheck": true,
+        "useDefineForClassFields": false
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.app.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/apps/web/tsconfig.spec.json b/apps/web/tsconfig.spec.json
new file mode 100644
index 0000000..fd45b3d
--- /dev/null
+++ b/apps/web/tsconfig.spec.json
@@ -0,0 +1,27 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "ESNext",
+        "target": "ESNext",
+        "esModuleInterop": true,
+        "types": ["jest", "node"],
+        "moduleResolution": "bundler"
+    },
+    "files": ["src/test-setup.ts", "../../global.d.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts",
+        "../../libs/services/src/**/*.test.ts",
+        "../../libs/services/src/**/*.spec.ts",
+        "../../libs/services/src/**/*.d.ts",
+        "../../libs/ui/components/src/**/*.test.ts",
+        "../../libs/ui/components/src/**/*.spec.ts",
+        "../../libs/ui/components/src/**/*.d.ts",
+        "../../libs/ui/pipes/src/**/*.test.ts",
+        "../../libs/ui/pipes/src/**/*.spec.ts",
+        "../../libs/ui/pipes/src/**/*.d.ts"
+    ]
+}
diff --git a/apps/web/tsconfig.worker.json b/apps/web/tsconfig.worker.json
new file mode 100644
index 0000000..065f648
--- /dev/null
+++ b/apps/web/tsconfig.worker.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./out-tsc/worker",
+        "lib": ["es2018", "webworker", "dom"],
+        "types": []
+    },
+    "include": ["src/**/*.worker.ts"]
+}
diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs
new file mode 100644
index 0000000..59e9902
--- /dev/null
+++ b/apps/website/astro.config.mjs
@@ -0,0 +1,13 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import sitemap from '@astrojs/sitemap';
+import mdx from '@astrojs/mdx';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://4gray.github.io',
+  base: '/iptvnator',
+  outDir: '../../dist/apps/website',
+  integrations: [tailwind(), sitemap(), mdx()],
+});
diff --git a/apps/website/package.json b/apps/website/package.json
new file mode 100644
index 0000000..95ad56b
--- /dev/null
+++ b/apps/website/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "website",
+  "private": true,
+  "type": "module"
+}
diff --git a/apps/website/project.json b/apps/website/project.json
new file mode 100644
index 0000000..fd8737b
--- /dev/null
+++ b/apps/website/project.json
@@ -0,0 +1,33 @@
+{
+  "name": "website",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/website/src",
+  "tags": ["type:website"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/apps/website"],
+      "inputs": ["production", "^production"],
+      "options": {
+        "command": "pnpm exec astro build",
+        "cwd": "apps/website"
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "pnpm exec astro dev --port 4321",
+        "cwd": "apps/website"
+      }
+    },
+    "preview": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "command": "pnpm exec astro preview --port 4322",
+        "cwd": "apps/website"
+      }
+    }
+  }
+}
diff --git a/apps/website/public/appstream/epg.png b/apps/website/public/appstream/epg.png
new file mode 100644
index 0000000..5c7a857
Binary files /dev/null and b/apps/website/public/appstream/epg.png differ
diff --git a/apps/website/public/appstream/player.png b/apps/website/public/appstream/player.png
new file mode 100644
index 0000000..fa953d8
Binary files /dev/null and b/apps/website/public/appstream/player.png differ
diff --git a/apps/website/public/appstream/playlists.png b/apps/website/public/appstream/playlists.png
new file mode 100644
index 0000000..6fd4de3
Binary files /dev/null and b/apps/website/public/appstream/playlists.png differ
diff --git a/apps/website/public/appstream/settings.png b/apps/website/public/appstream/settings.png
new file mode 100644
index 0000000..e6a68a0
Binary files /dev/null and b/apps/website/public/appstream/settings.png differ
diff --git a/apps/website/public/blog/epg.png b/apps/website/public/blog/epg.png
new file mode 100644
index 0000000..5c7a857
Binary files /dev/null and b/apps/website/public/blog/epg.png differ
diff --git a/apps/website/public/blog/iptvnator-v18.jpeg b/apps/website/public/blog/iptvnator-v18.jpeg
new file mode 100644
index 0000000..52d2da1
Binary files /dev/null and b/apps/website/public/blog/iptvnator-v18.jpeg differ
diff --git a/apps/website/public/blog/macos-app-damaged.jpg b/apps/website/public/blog/macos-app-damaged.jpg
new file mode 100644
index 0000000..6710a53
Binary files /dev/null and b/apps/website/public/blog/macos-app-damaged.jpg differ
diff --git a/apps/website/public/blog/player.png b/apps/website/public/blog/player.png
new file mode 100644
index 0000000..fa953d8
Binary files /dev/null and b/apps/website/public/blog/player.png differ
diff --git a/apps/website/public/blog/v0-19-download-manager.png b/apps/website/public/blog/v0-19-download-manager.png
new file mode 100644
index 0000000..970ec1f
Binary files /dev/null and b/apps/website/public/blog/v0-19-download-manager.png differ
diff --git a/apps/website/public/blog/v0-19-remote-control.png b/apps/website/public/blog/v0-19-remote-control.png
new file mode 100644
index 0000000..f7d4b73
Binary files /dev/null and b/apps/website/public/blog/v0-19-remote-control.png differ
diff --git a/apps/website/public/blog/v0-19-series-episodes.png b/apps/website/public/blog/v0-19-series-episodes.png
new file mode 100644
index 0000000..efbcf7d
Binary files /dev/null and b/apps/website/public/blog/v0-19-series-episodes.png differ
diff --git a/apps/website/public/blog/v0-19-xtream-category-grid.png b/apps/website/public/blog/v0-19-xtream-category-grid.png
new file mode 100644
index 0000000..fe7d664
Binary files /dev/null and b/apps/website/public/blog/v0-19-xtream-category-grid.png differ
diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico
new file mode 100644
index 0000000..1bd12fa
Binary files /dev/null and b/apps/website/public/favicon.ico differ
diff --git a/apps/website/public/illustrations/blog-corner-signal-mark.svg b/apps/website/public/illustrations/blog-corner-signal-mark.svg
new file mode 100644
index 0000000..34599f3
--- /dev/null
+++ b/apps/website/public/illustrations/blog-corner-signal-mark.svg
@@ -0,0 +1,95 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600" role="img" aria-label="Blog corner playlist signal mark">
+  <defs>
+    <linearGradient id="tealStroke" x1="360" y1="120" x2="600" y2="420" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#20a8a8" stop-opacity="0.78"/>
+      <stop offset="1" stop-color="#20a8a8" stop-opacity="0.16"/>
+    </linearGradient>
+
+    <linearGradient id="neutralStroke" x1="340" y1="140" x2="600" y2="460" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#c7ced2" stop-opacity="0.14"/>
+      <stop offset="1" stop-color="#3c474a" stop-opacity="0.18"/>
+    </linearGradient>
+
+    <filter id="microGlow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1.25" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Weighted to top-right; airy; rotates well -->
+  <g id="layer-motif" filter="url(#microGlow)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+
+    <!-- Hint of a "player/playlist card" (no UI text, just geometry) -->
+    <g id="playlist-card">
+      <path d="M410 128
+               C402 128, 396 134, 396 142
+               L396 242
+               C396 250, 402 256, 410 256
+               L544 256
+               C552 256, 558 250, 558 242
+               L558 142
+               C558 134, 552 128, 544 128
+               Z"
+            stroke="url(#neutralStroke)" stroke-width="2.2" stroke-opacity="0.7"/>
+
+      <!-- Minimal "list rows" (very low contrast) -->
+      <path d="M422 166 H534" stroke="#c7ced2" stroke-opacity="0.10" stroke-width="2"/>
+      <path d="M422 192 H514" stroke="#c7ced2" stroke-opacity="0.08" stroke-width="2"/>
+      <path d="M422 218 H528" stroke="#c7ced2" stroke-opacity="0.09" stroke-width="2"/>
+
+      <!-- A small play-indicator wedge, abstract -->
+      <path d="M416 156 L416 176 L432 166 Z"
+            stroke="#20a8a8" stroke-opacity="0.00" fill="#20a8a8" fill-opacity="0.12"/>
+    </g>
+
+    <!-- "Antenna pin" (more like a signal marker than a tower) -->
+    <g id="signal-pin">
+      <path d="M520 270 L520 318" stroke="url(#tealStroke)" stroke-width="3" stroke-opacity="0.45"/>
+      <circle cx="520" cy="258" r="6" fill="#20a8a8" fill-opacity="0.26"/>
+      <path d="M505 328 L520 318 L535 328" stroke="#3c474a" stroke-opacity="0.30" stroke-width="5"/>
+      <path d="M505 328 L520 318 L535 328" stroke="#20a8a8" stroke-opacity="0.12" stroke-width="2"/>
+    </g>
+
+    <!-- Signal sweep arcs (corner-friendly) -->
+    <g id="signal-sweep">
+      <path d="M470 86
+               C545 120, 590 190, 598 278"
+            stroke="url(#tealStroke)" stroke-width="2.6" stroke-opacity="0.34"/>
+      <path d="M492 112
+               C548 140, 580 196, 586 266"
+            stroke="#c7ced2" stroke-width="2" stroke-opacity="0.10"/>
+      <path d="M448 64
+               C545 106, 600 196, 608 312"
+            stroke="#20a8a8" stroke-width="2" stroke-opacity="0.16"/>
+    </g>
+
+    <!-- One thin connector line (ties card → pin) -->
+    <g id="connector">
+      <path d="M468 252 C480 270, 495 288, 520 318"
+            stroke="#3c474a" stroke-opacity="0.28" stroke-width="2"/>
+      <path d="M468 252 C480 270, 495 288, 520 318"
+            stroke="#20a8a8" stroke-opacity="0.09" stroke-width="1"/>
+    </g>
+
+    <!-- Sparse “stars” / points -->
+    <g id="points" fill="none">
+      <circle cx="576" cy="110" r="2.1" fill="#20a8a8" fill-opacity="0.18"/>
+      <circle cx="548" cy="70" r="1.6" fill="#c7ced2" fill-opacity="0.10"/>
+      <circle cx="592" cy="170" r="1.7" fill="#c7ced2" fill-opacity="0.09"/>
+      <circle cx="560" cy="236" r="1.8" fill="#20a8a8" fill-opacity="0.13"/>
+      <circle cx="430" cy="286" r="1.6" fill="#c7ced2" fill-opacity="0.08"/>
+
+      <!-- Tiny diamond point -->
+      <path d="M548 312 l6 6 l-6 6 l-6-6 Z" fill="#20a8a8" fill-opacity="0.08"/>
+    </g>
+
+    <!-- Subtle corner framing stroke (very airy, helps “corner” feel) -->
+    <g id="corner-frame">
+      <path d="M600 88 C560 92, 540 104, 520 132" stroke="#3c474a" stroke-opacity="0.16" stroke-width="2"/>
+      <path d="M600 120 C566 124, 546 136, 532 156" stroke="#20a8a8" stroke-opacity="0.08" stroke-width="2"/>
+    </g>
+  </g>
+</svg>
diff --git a/apps/website/public/illustrations/footer-broadcast-pattern-strip-light.svg b/apps/website/public/illustrations/footer-broadcast-pattern-strip-light.svg
new file mode 100644
index 0000000..516ec2a
--- /dev/null
+++ b/apps/website/public/illustrations/footer-broadcast-pattern-strip-light.svg
@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120" viewBox="0 0 400 120" role="img" aria-label="Footer broadcast pattern strip light (tileable)">
+  <defs>
+    <filter id="microGlow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="0.8" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Very minimal rails -->
+  <g id="layer-rails" fill="none" stroke-linecap="round">
+    <path d="M0 24 H400" stroke="#3c474a" stroke-opacity="0.14" stroke-width="1"/>
+    <path d="M0 96 H400" stroke="#3c474a" stroke-opacity="0.12" stroke-width="1"/>
+  </g>
+
+  <!-- Few ticks -->
+  <g id="layer-ticks" fill="none" stroke-linecap="round">
+    <g stroke="#c7ced2" stroke-opacity="0.07" stroke-width="1">
+      <path d="M0 24 V32"/><path d="M80 24 V32"/><path d="M160 24 V32"/><path d="M240 24 V32"/><path d="M320 24 V32"/><path d="M400 24 V32"/>
+      <path d="M40 96 V88"/><path d="M200 96 V88"/><path d="M360 96 V88"/>
+    </g>
+
+    <!-- Single tiny wave notch -->
+    <path d="M170 62 c8 -6 16 -6 24 0 c8 6 16 6 24 0"
+          stroke="#20a8a8" stroke-opacity="0.07" stroke-width="1.5" fill="none" filter="url(#microGlow)"/>
+  </g>
+
+  <!-- One small dial hint -->
+  <g id="layer-dial" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#microGlow)">
+    <g transform="translate(340 60)">
+      <circle cx="0" cy="0" r="9" stroke="#3c474a" stroke-opacity="0.16" stroke-width="1.2"/>
+      <path d="M0 -9 V-12" stroke="#c7ced2" stroke-opacity="0.07" stroke-width="1"/>
+      <circle cx="0" cy="0" r="2" fill="#20a8a8" fill-opacity="0.07"/>
+    </g>
+  </g>
+
+  <!-- Short dashed connector -->
+  <g id="layer-connector" fill="none" stroke-linecap="round">
+    <path d="M70 60 H130" stroke="#c7ced2" stroke-opacity="0.06" stroke-width="1" stroke-dasharray="3 7"/>
+  </g>
+
+  <!-- Sparse dots -->
+  <g id="layer-dots">
+    <circle cx="220" cy="24" r="1.0" fill="#20a8a8" fill-opacity="0.06"/>
+    <circle cx="120" cy="96" r="1.0" fill="#c7ced2" fill-opacity="0.05"/>
+    <circle cx="280" cy="78" r="0.9" fill="#3c474a" fill-opacity="0.12"/>
+  </g>
+</svg>
diff --git a/apps/website/public/illustrations/hero-ambient-broadcast-waves.svg b/apps/website/public/illustrations/hero-ambient-broadcast-waves.svg
new file mode 100644
index 0000000..f44968b
--- /dev/null
+++ b/apps/website/public/illustrations/hero-ambient-broadcast-waves.svg
@@ -0,0 +1,158 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="800" viewBox="0 0 1920 800" role="img" aria-label="Ambient broadcast waves background motif">
+  <defs>
+    <!-- Core palette -->
+    <linearGradient id="tealFade" x1="1400" y1="80" x2="780" y2="720" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#20a8a8" stop-opacity="0.22"/>
+      <stop offset="0.55" stop-color="#20a8a8" stop-opacity="0.07"/>
+      <stop offset="1" stop-color="#20a8a8" stop-opacity="0"/>
+    </linearGradient>
+
+    <radialGradient id="ringFade" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(1535 400) rotate(90) scale(420 740)">
+      <stop offset="0" stop-color="#20a8a8" stop-opacity="0.10"/>
+      <stop offset="0.6" stop-color="#20a8a8" stop-opacity="0.04"/>
+      <stop offset="1" stop-color="#20a8a8" stop-opacity="0"/>
+    </radialGradient>
+
+    <linearGradient id="scanFade" x1="0" y1="0" x2="0" y2="800" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#c7ced2" stop-opacity="0.00"/>
+      <stop offset="0.45" stop-color="#c7ced2" stop-opacity="0.06"/>
+      <stop offset="1" stop-color="#c7ced2" stop-opacity="0.00"/>
+    </linearGradient>
+
+    <!-- Subtle glow (kept restrained for 5–20% overall opacity usage) -->
+    <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="2.2" result="blur"/>
+      <feColorMatrix in="blur" type="matrix"
+        values="1 0 0 0 0
+                0 1 0 0 0
+                0 0 1 0 0
+                0 0 0 0.55 0" result="glow"/>
+      <feMerge>
+        <feMergeNode in="glow"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="microGlow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1.1" result="b"/>
+      <feMerge>
+        <feMergeNode in="b"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Transparent background: no rect fill -->
+
+  <!-- Layer: scanline bands (subtle, keeps text readability) -->
+  <g id="layer-scanlines" opacity="0.55">
+    <!-- Wide soft bands -->
+    <path d="M0 158H1920v38H0z" fill="url(#scanFade)" opacity="0.22"/>
+    <path d="M0 298H1920v26H0z" fill="url(#scanFade)" opacity="0.16"/>
+    <path d="M0 460H1920v30H0z" fill="url(#scanFade)" opacity="0.14"/>
+    <path d="M0 610H1920v42H0z" fill="url(#scanFade)" opacity="0.18"/>
+
+    <!-- Thin scanline-inspired hairlines -->
+    <g opacity="0.16" fill="#c7ced2">
+      <rect x="0" y="214" width="1920" height="1"/>
+      <rect x="0" y="238" width="1920" height="1"/>
+      <rect x="0" y="512" width="1920" height="1"/>
+      <rect x="0" y="536" width="1920" height="1"/>
+      <rect x="0" y="684" width="1920" height="1"/>
+    </g>
+  </g>
+
+  <!-- Layer: broadcast wave arcs (asymmetric weight on right) -->
+  <g id="layer-waves" filter="url(#softGlow)">
+    <g fill="none" stroke="url(#tealFade)" stroke-linecap="round" stroke-linejoin="round">
+      <!-- Primary sweeping arcs -->
+      <path d="M1040 120
+               C1320 90, 1560 150, 1750 280
+               C1900 382, 1940 520, 1815 640
+               C1690 760, 1450 780, 1240 710"
+            stroke-width="2.2" opacity="0.62"/>
+      <path d="M980 170
+               C1250 130, 1500 190, 1700 318
+               C1860 420, 1895 540, 1782 642
+               C1668 745, 1450 760, 1260 704"
+            stroke-width="1.6" opacity="0.48"/>
+      <path d="M1140 70
+               C1440 35, 1720 120, 1890 290
+               C2020 420, 1990 585, 1840 690
+               C1690 796, 1405 805, 1185 710"
+            stroke-width="1.2" opacity="0.34"/>
+
+      <!-- Secondary inner arcs for layered depth -->
+      <path d="M1245 235
+               C1440 205, 1605 255, 1730 350
+               C1830 426, 1850 520, 1770 595
+               C1690 670, 1520 682, 1375 630"
+            stroke-width="1.4" opacity="0.42"/>
+      <path d="M1315 300
+               C1490 280, 1625 330, 1715 402
+               C1795 466, 1800 532, 1735 585
+               C1670 638, 1535 640, 1425 604"
+            stroke-width="1.1" opacity="0.30"/>
+    </g>
+
+    <!-- Low-contrast charcoal support curve (adds CRT geometry without stealing focus) -->
+    <path id="support-curve"
+      d="M720 690
+         C980 610, 1180 560, 1400 520
+         C1560 492, 1730 480, 1920 490"
+      fill="none" stroke="#0c1114" stroke-opacity="0.35" stroke-width="2" stroke-linecap="round"/>
+  </g>
+
+  <!-- Layer: radial rings (right side, very restrained) -->
+  <g id="layer-rings" opacity="0.9">
+    <g fill="none" stroke="url(#ringFade)" stroke-width="1.2" filter="url(#microGlow)">
+      <circle cx="1535" cy="400" r="118" opacity="0.36"/>
+      <circle cx="1535" cy="400" r="178" opacity="0.26"/>
+      <circle cx="1535" cy="400" r="248" opacity="0.18"/>
+      <circle cx="1535" cy="400" r="320" opacity="0.12"/>
+    </g>
+
+    <!-- Offset subtle ring cluster for asymmetry -->
+    <g fill="none" stroke="#20a8a8" stroke-opacity="0.10" stroke-width="1" filter="url(#microGlow)">
+      <ellipse cx="1705" cy="290" rx="92" ry="62" opacity="0.35"/>
+      <ellipse cx="1705" cy="290" rx="140" ry="96" opacity="0.22"/>
+    </g>
+  </g>
+
+  <!-- Layer: nodes & dots (kept sparse) -->
+  <g id="layer-nodes" filter="url(#microGlow)">
+    <!-- Main node cluster -->
+    <g>
+      <circle cx="1688" cy="402" r="3.2" fill="#20a8a8" fill-opacity="0.38"/>
+      <circle cx="1622" cy="520" r="2.6" fill="#20a8a8" fill-opacity="0.28"/>
+      <circle cx="1748" cy="312" r="2.4" fill="#20a8a8" fill-opacity="0.24"/>
+      <circle cx="1586" cy="350" r="1.9" fill="#c7ced2" fill-opacity="0.18"/>
+      <circle cx="1765" cy="520" r="1.8" fill="#c7ced2" fill-opacity="0.14"/>
+    </g>
+
+    <!-- A few distant dots to balance without clutter -->
+    <g opacity="0.55">
+      <circle cx="1140" cy="250" r="1.6" fill="#20a8a8" fill-opacity="0.16"/>
+      <circle cx="980" cy="560" r="1.5" fill="#c7ced2" fill-opacity="0.10"/>
+      <circle cx="860" cy="340" r="1.4" fill="#20a8a8" fill-opacity="0.12"/>
+    </g>
+
+    <!-- Thin connector hints (barely there) -->
+    <g fill="none" stroke="#20a8a8" stroke-opacity="0.10" stroke-width="1" stroke-linecap="round">
+      <path d="M1688 402 L1622 520" opacity="0.35"/>
+      <path d="M1688 402 L1748 312" opacity="0.25"/>
+      <path d="M1622 520 L1765 520" opacity="0.18"/>
+    </g>
+  </g>
+
+  <!-- Layer: left-side negative-space soft vignette (improves text readability) -->
+  <g id="layer-negative-space">
+    <linearGradient id="leftVignette" x1="0" y1="0" x2="700" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0b0f12" stop-opacity="0.26"/>
+      <stop offset="0.75" stop-color="#0b0f12" stop-opacity="0.10"/>
+      <stop offset="1" stop-color="#0b0f12" stop-opacity="0"/>
+    </linearGradient>
+    <rect x="0" y="0" width="760" height="800" fill="url(#leftVignette)"/>
+  </g>
+</svg>
diff --git a/apps/website/public/illustrations/support-open-source-signal.svg b/apps/website/public/illustrations/support-open-source-signal.svg
new file mode 100644
index 0000000..34a86cd
--- /dev/null
+++ b/apps/website/public/illustrations/support-open-source-signal.svg
@@ -0,0 +1,56 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>support-open-source-signal-isometric</title>
+  <desc>Isometric architectural core representing the structural support of open-source software.</desc>
+
+  <!-- Central Isometric Core (The Engine) -->
+  <g id="isometric-core" transform="translate(400, 420)">
+    <!-- Bottom Plate -->
+    <path d="M-120 0 L0 60 L120 0 L0 -60 Z" fill="#1a1f21" stroke="#3c474a" stroke-width="2" />
+
+    <!-- Vertical Pillars (Structure) -->
+    <g stroke="#3c474a" stroke-width="2" stroke-linecap="round">
+      <path d="M-80 -20 V-100" />
+      <path d="M80 -20 V-100" />
+      <path d="M0 20 V-60" />
+    </g>
+
+    <!-- The Floating Heart-Core (The Pulse) -->
+    <g id="core-pulse" transform="translate(0, -90)">
+      <!-- Isometric Cube/Diamond Representation -->
+      <path d="M-40 0 L0 20 L40 0 L0 -20 Z" fill="#20a8a8" fill-opacity="0.2" stroke="#20a8a8" stroke-width="3">
+        <animate attributeName="fill-opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite" />
+      </path>
+      <path d="M-40 0 V30 L0 50 V20 Z" fill="#20a8a8" fill-opacity="0.1" stroke="#20a8a8" stroke-width="2" />
+      <path d="M40 0 V30 L0 50 V20 Z" fill="#20a8a8" fill-opacity="0.05" stroke="#20a8a8" stroke-width="2" />
+
+      <!-- Internal Heart Motif (Simplified for Isometric) -->
+      <path d="M-10 -5 Q0 -15 10 -5 L0 10 Z" fill="#4fd1d1" opacity="0.8">
+        <animate attributeName="opacity" values="0.8;0.3;0.8" dur="1.5s" repeatCount="indefinite" />
+      </path>
+    </g>
+
+    <!-- Converging "Support" Streams -->
+    <g id="data-streams" stroke="#20a8a8" stroke-width="1.5" opacity="0.4">
+      <path d="M-200 -100 L-100 -50" stroke-dasharray="4 8" />
+      <path d="M200 -100 L100 -50" stroke-dasharray="4 8" />
+      <path d="M-150 100 L-80 50" />
+      <path d="M150 100 L80 50" />
+
+      <!-- Stream End Nodes -->
+      <circle cx="-100" cy="-50" r="3" fill="#20a8a8" />
+      <circle cx="100" cy="-50" r="3" fill="#20a8a8" />
+    </g>
+  </g>
+
+  <!-- Framing Elements -->
+  <g id="frames" stroke="#3c474a" stroke-width="1" opacity="0.2">
+    <circle cx="400" cy="400" r="280" />
+    <path d="M200 200 L150 150 M600 200 L650 150 M200 600 L150 650 M600 600 L650 650" />
+  </g>
+
+  <!-- Accent Highlights -->
+  <circle cx="400" cy="330" r="4" fill="#4fd1d1" opacity="0.6">
+     <animate attributeName="r" values="4;6;4" dur="3s" repeatCount="indefinite" />
+  </circle>
+
+</svg>
diff --git a/apps/website/public/images/broken-tv.svg b/apps/website/public/images/broken-tv.svg
new file mode 100644
index 0000000..0d37bd6
--- /dev/null
+++ b/apps/website/public/images/broken-tv.svg
@@ -0,0 +1 @@
+<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="350" viewBox="0, 0, 400,350"><g id="svgg"><path id="path0" d="M226.679 56.625 C 223.125 58.792,223.480 64.696,227.262 66.318 L 228.711 66.939 230.219 74.583 C 231.762 82.400,233.620 91.085,236.108 102.111 C 236.879 105.528,237.464 108.363,237.407 108.412 C 237.351 108.461,234.053 109.279,230.078 110.231 L 222.852 111.961 222.731 113.598 L 222.611 115.234 165.505 115.241 C 117.021 115.247,107.993 115.334,105.714 115.817 C 99.081 117.222,92.306 122.088,89.748 127.283 L 88.477 129.867 88.477 167.863 C 88.477 197.177,88.369 205.859,88.007 205.859 C 87.749 205.859,86.555 205.603,85.352 205.290 C 81.356 204.249,80.924 204.847,81.645 210.421 C 82.389 216.165,82.139 215.676,85.600 218.155 L 88.768 220.422 88.528 222.418 C 88.396 223.516,88.287 225.332,88.285 226.453 L 88.281 228.492 86.975 228.443 C 85.236 228.377,84.871 228.659,84.324 230.485 C 83.752 232.396,83.652 232.395,81.100 230.469 C 78.547 228.541,75.781 228.828,75.781 231.020 C 75.781 231.188,75.060 233.593,74.177 236.366 L 72.574 241.406 46.834 241.406 L 21.094 241.406 21.094 242.773 L 21.094 244.141 47.459 244.141 L 73.824 244.141 76.982 250.449 L 80.141 256.757 75.204 256.544 C 71.447 256.382,70.103 256.181,69.576 255.704 C 68.649 254.865,69.298 254.794,55.631 257.232 C 39.298 260.144,40.330 259.416,42.969 266.165 C 43.828 268.363,44.531 270.398,44.531 270.689 C 44.531 271.121,45.707 271.170,51.039 270.960 C 54.618 270.819,60.814 270.702,64.808 270.701 L 72.070 270.699 74.673 268.621 L 77.276 266.543 76.253 265.205 C 75.691 264.469,74.564 263.095,73.748 262.152 C 71.694 259.775,71.706 259.766,76.893 259.766 L 81.521 259.766 83.924 264.810 C 86.108 269.394,86.415 270.367,87.292 275.455 C 87.823 278.535,88.396 281.828,88.566 282.773 C 88.997 285.167,89.994 285.748,95.299 286.698 C 103.016 288.080,104.259 287.786,104.284 284.570 C 104.319 279.989,101.085 267.280,98.639 262.388 C 97.669 260.446,96.875 258.707,96.875 258.522 C 96.875 258.337,102.720 258.234,109.863 258.292 C 120.628 258.380,122.832 258.490,122.738 258.935 C 122.655 259.324,122.816 259.379,123.324 259.134 C 123.709 258.949,126.566 258.742,129.673 258.675 C 138.889 258.474,138.817 256.983,129.167 248.242 C 121.616 241.402,121.287 241.071,121.680 240.707 C 122.440 240.004,152.118 226.591,153.516 226.319 C 154.374 226.151,154.715 226.475,156.327 228.982 C 157.336 230.552,159.929 234.560,162.090 237.890 C 166.497 244.680,166.516 245.130,162.261 242.023 C 158.071 238.963,158.333 238.818,151.743 247.852 C 149.350 251.132,141.329 261.215,139.774 262.895 C 137.826 265.002,137.828 264.993,138.633 266.840 C 139.044 267.783,139.938 271.012,140.619 274.015 C 141.300 277.017,141.982 279.698,142.135 279.970 C 142.415 280.471,146.139 278.813,159.889 272.069 L 165.285 269.422 168.803 262.395 C 170.738 258.530,172.462 255.522,172.634 255.711 C 172.806 255.900,175.362 259.746,178.312 264.258 C 181.263 268.770,183.740 272.529,183.818 272.611 C 183.896 272.694,184.496 272.539,185.151 272.268 L 186.343 271.774 185.296 269.969 C 184.719 268.976,182.632 265.615,180.657 262.500 C 178.683 259.385,175.171 253.681,172.855 249.826 C 161.126 230.305,155.784 222.827,153.801 223.157 C 152.292 223.408,128.937 233.786,120.617 237.904 L 118.773 238.816 116.808 237.896 C 114.456 236.794,114.416 236.629,116.309 235.824 C 120.977 233.840,129.288 230.082,135.938 226.950 C 140.127 224.976,145.766 222.324,148.468 221.055 L 153.381 218.749 155.646 219.204 C 158.333 219.744,156.934 217.902,168.508 236.133 C 173.281 243.652,177.905 250.859,178.781 252.148 C 179.658 253.437,182.000 257.041,183.984 260.156 C 185.969 263.271,189.172 268.083,191.102 270.848 C 198.101 280.877,198.044 280.986,181.348 289.487 C 176.138 292.140,171.875 294.428,171.875 294.573 C 171.875 294.717,172.198 295.234,172.593 295.722 L 173.310 296.608 184.104 291.110 L 194.898 285.613 197.405 286.042 C 203.593 287.102,208.134 283.927,208.825 278.056 L 209.070 275.977 232.172 275.977 L 255.273 275.977 255.469 281.641 C 255.731 289.244,257.626 292.188,263.017 293.368 C 267.007 294.241,289.734 293.719,291.602 292.712 C 296.247 290.205,296.484 289.352,296.484 275.158 L 296.484 263.168 297.929 260.197 L 299.374 257.227 299.537 250.684 L 299.700 244.141 339.523 244.141 L 379.346 244.141 379.224 242.871 L 379.102 241.602 361.719 241.709 C 352.158 241.768,334.272 241.703,321.973 241.564 L 299.609 241.313 299.609 213.014 L 299.609 184.716 298.340 184.839 L 297.070 184.961 296.875 220.703 L 296.680 256.445 295.627 258.440 C 294.090 261.355,292.716 262.816,291.088 263.268 C 289.485 263.713,202.532 263.848,194.107 263.418 L 189.190 263.167 188.149 261.523 C 187.577 260.619,187.109 259.766,187.109 259.627 C 187.109 259.488,202.859 259.375,222.109 259.375 C 261.290 259.375,258.528 259.578,261.153 256.511 L 262.514 254.921 262.409 193.183 L 262.305 131.445 261.386 129.968 C 259.326 126.654,267.198 126.952,181.949 126.959 C 140.422 126.962,106.240 127.096,105.988 127.256 C 105.736 127.416,105.410 128.029,105.262 128.617 L 104.993 129.688 116.657 129.746 C 123.072 129.779,157.324 129.757,192.773 129.699 C 257.061 129.593,257.229 129.595,258.203 130.386 C 259.603 131.524,259.666 135.039,259.443 199.590 L 259.253 254.454 258.355 255.352 L 257.457 256.250 221.925 256.250 C 202.382 256.250,186.146 256.345,185.845 256.460 C 185.140 256.731,173.383 239.140,163.784 223.454 C 157.846 213.750,156.964 213.708,139.063 222.289 C 131.865 225.739,122.812 229.976,118.945 231.706 C 115.078 233.436,111.233 235.385,110.401 236.038 L 108.888 237.224 105.714 235.927 C 103.968 235.214,101.240 234.039,99.653 233.316 L 96.767 232.002 97.017 229.607 C 97.326 226.651,97.317 226.659,98.900 227.841 C 100.595 229.106,104.497 230.414,108.181 230.950 L 111.133 231.380 114.453 229.327 C 121.342 225.067,121.218 225.363,117.589 221.805 C 114.282 218.564,111.974 215.561,110.360 212.401 L 109.148 210.029 104.476 208.935 C 101.907 208.334,99.411 207.745,98.929 207.625 L 98.054 207.409 97.953 186.419 L 97.852 165.430 96.582 165.307 L 95.313 165.185 95.313 186.108 C 95.313 209.549,95.599 207.486,92.459 206.614 L 90.973 206.202 91.092 168.238 L 91.211 130.273 92.057 128.693 C 95.077 123.052,92.968 123.280,138.853 123.643 C 158.841 123.801,182.016 123.799,190.353 123.638 L 205.511 123.345 205.392 122.122 L 205.273 120.898 153.320 120.818 C 124.746 120.774,101.367 120.626,101.367 120.490 C 101.367 120.353,102.422 119.774,103.711 119.203 L 106.055 118.164 164.453 118.164 L 222.852 118.164 222.852 119.336 L 222.852 120.508 216.113 120.615 L 209.375 120.722 209.375 122.071 L 209.375 123.420 250.354 123.526 L 291.334 123.633 292.794 124.814 C 293.597 125.464,294.799 126.958,295.467 128.135 L 296.680 130.273 296.789 154.785 L 296.898 179.297 298.262 179.297 L 299.626 179.297 299.520 154.590 L 299.414 129.883 298.173 127.262 C 294.435 119.373,287.787 116.014,275.195 115.653 L 267.383 115.430 267.265 113.382 C 267.113 110.741,267.419 110.870,257.610 109.330 C 253.102 108.622,249.290 107.862,249.139 107.641 C 248.988 107.420,248.398 105.918,247.828 104.303 C 247.258 102.689,245.159 96.885,243.165 91.406 C 233.266 64.215,233.832 65.970,234.528 64.657 C 237.403 59.229,231.805 53.500,226.679 56.625 M231.554 59.202 C 232.653 59.972,232.763 62.465,231.738 63.381 C 229.883 65.040,226.953 63.793,226.953 61.343 C 226.953 59.076,229.609 57.840,231.554 59.202 M238.289 86.328 C 246.976 110.273,246.452 107.954,243.311 108.572 C 240.444 109.136,240.470 109.159,239.703 105.469 C 239.368 103.857,238.138 98.232,236.971 92.969 C 232.445 72.571,231.950 70.033,232.781 71.484 C 232.966 71.807,235.445 78.486,238.289 86.328 M251.758 111.308 C 257.927 112.050,256.700 112.300,245.898 112.500 C 235.536 112.692,231.951 112.462,236.542 111.901 C 237.821 111.745,240.273 111.391,241.992 111.115 C 245.240 110.593,245.932 110.607,251.758 111.308 M264.063 117.796 L 264.063 120.703 244.483 120.703 C 228.583 120.703,224.983 120.609,225.321 120.201 C 225.550 119.925,225.791 118.687,225.857 117.449 L 225.977 115.198 242.578 115.182 C 251.709 115.172,260.146 115.041,261.328 114.889 C 264.143 114.527,264.063 114.441,264.063 117.796 M283.962 119.195 C 285.346 119.737,286.557 120.413,286.652 120.699 C 286.770 121.053,286.612 121.136,286.154 120.961 C 285.785 120.819,281.366 120.703,276.335 120.703 L 267.188 120.703 267.188 119.299 L 267.188 117.894 274.316 118.053 C 280.796 118.196,281.675 118.301,283.962 119.195 M98.616 128.173 C 97.962 128.351,96.995 129.072,96.467 129.775 L 95.508 131.055 95.395 144.070 L 95.282 157.086 96.372 156.961 L 97.461 156.836 97.656 144.336 L 97.852 131.836 99.123 130.005 C 100.511 128.007,100.421 127.681,98.616 128.173 M278.275 130.251 C 277.876 131.291,278.317 132.193,279.671 133.105 C 281.335 134.227,282.189 134.104,282.349 132.719 C 282.581 130.711,278.944 128.507,278.275 130.251 M159.333 145.742 C 146.197 157.577,145.733 158.004,135.200 167.969 C 131.680 171.299,128.473 174.252,128.075 174.532 C 126.912 175.347,126.473 176.447,126.953 177.344 C 127.766 178.862,127.126 179.369,142.973 164.648 C 152.133 156.139,157.775 150.997,166.905 142.834 C 174.513 136.032,174.203 136.426,172.907 135.208 L 171.985 134.343 159.333 145.742 M277.617 136.085 C 268.238 138.701,267.770 151.209,276.894 155.386 C 282.933 158.151,290.234 152.625,290.234 145.291 C 290.234 139.095,283.760 134.371,277.617 136.085 M240.139 143.452 C 236.432 146.941,228.125 154.790,221.680 160.894 C 215.234 166.999,209.620 172.312,209.204 172.702 C 208.369 173.484,209.282 175.173,210.402 174.917 C 210.985 174.783,220.658 165.848,231.250 155.659 C 235.439 151.629,241.196 146.220,244.043 143.637 C 249.241 138.922,249.614 138.442,248.750 137.578 C 247.747 136.576,246.656 137.320,240.139 143.452 M282.240 138.716 C 287.274 139.984,289.054 146.532,285.472 150.611 C 282.516 153.979,278.200 154.028,275.150 150.730 C 270.067 145.234,274.991 136.891,282.240 138.716 M179.492 143.636 C 178.633 144.421,172.138 150.437,165.059 157.004 C 157.980 163.572,149.542 171.388,146.309 174.374 C 136.748 183.202,136.328 183.624,136.328 184.393 C 136.328 184.797,136.675 185.314,137.098 185.541 C 138.005 186.026,138.914 185.262,152.941 172.227 C 161.438 164.331,173.437 153.234,180.222 146.997 L 183.276 144.189 182.556 143.200 C 181.613 141.906,181.345 141.944,179.492 143.636 M250.380 146.755 C 246.104 149.683,216.016 177.464,216.016 178.484 C 216.016 179.327,216.769 180.078,217.615 180.078 C 217.979 180.078,221.152 177.298,224.666 173.900 C 233.525 165.334,238.178 161.033,245.996 154.186 C 252.515 148.477,253.266 147.563,252.266 146.563 C 251.658 145.955,251.530 145.968,250.380 146.755 M277.496 159.933 C 277.062 161.064,277.567 162.281,278.759 162.975 C 280.303 163.874,281.250 163.539,281.250 162.094 C 281.250 160.305,278.058 158.467,277.496 159.933 M276.808 166.589 C 270.088 168.984,267.936 178.066,272.909 183.040 C 278.171 188.302,287.253 186.056,289.308 178.985 C 291.589 171.142,284.303 163.917,276.808 166.589 M282.633 169.484 C 287.296 171.602,288.430 177.286,284.913 180.903 C 280.456 185.485,273.055 182.652,273.062 176.367 C 273.068 170.814,277.904 167.336,282.633 169.484 M165.464 177.176 C 154.106 180.857,154.020 181.117,161.161 190.049 C 166.251 196.416,165.749 196.167,170.536 194.707 C 175.131 193.305,175.156 193.261,175.735 185.479 C 175.996 181.972,176.303 178.619,176.417 178.028 C 176.638 176.885,174.839 174.585,173.761 174.632 C 173.475 174.644,169.742 175.789,165.464 177.176 M172.961 183.496 C 172.529 191.581,172.718 191.091,169.699 191.956 C 166.711 192.811,167.386 193.244,163.115 187.730 C 158.887 182.271,158.854 182.359,166.016 180.036 C 174.018 177.439,173.303 177.083,172.961 183.496 M230.971 193.840 C 230.157 194.534,226.504 197.922,222.852 201.370 C 219.199 204.818,212.555 211.038,208.086 215.193 C 199.926 222.779,199.425 223.431,200.977 224.436 C 201.842 224.997,204.974 222.241,225.098 203.207 C 234.457 194.354,234.989 193.716,233.619 192.982 C 232.591 192.432,232.638 192.417,230.971 193.840 M270.052 193.165 C 265.967 194.883,266.629 205.279,270.875 206.076 C 274.252 206.710,275.781 204.613,275.781 199.349 C 275.781 193.938,273.660 191.648,270.052 193.165 M280.768 193.720 L 279.492 194.861 279.520 199.245 L 279.547 203.629 280.795 204.744 C 284.586 208.131,287.891 205.586,287.891 199.279 C 287.891 192.913,284.568 190.319,280.768 193.720 M272.266 199.609 C 272.266 202.821,272.161 203.516,271.680 203.516 C 271.067 203.516,270.767 196.551,271.354 195.964 C 272.070 195.248,272.266 196.031,272.266 199.609 M283.757 195.940 C 284.809 196.344,284.655 203.125,283.594 203.125 C 283.164 203.125,282.806 203.081,282.798 203.027 C 282.551 201.359,282.385 196.754,282.555 196.310 C 282.816 195.629,282.888 195.607,283.757 195.940 M242.383 202.040 C 235.590 208.166,201.925 239.178,198.336 242.615 C 195.996 244.856,196.541 247.170,199.025 245.542 C 200.106 244.835,213.759 232.391,222.253 224.371 C 223.871 222.844,230.153 217.084,236.212 211.571 C 248.640 200.264,247.964 200.988,247.048 199.975 C 246.036 198.857,245.791 198.966,242.383 202.040 M95.898 209.780 C 106.232 211.734,107.797 212.458,107.807 215.291 L 107.813 217.104 103.418 215.583 C 98.812 213.989,91.899 210.714,90.234 209.337 L 89.258 208.529 90.625 208.785 C 91.377 208.926,93.750 209.374,95.898 209.780 M88.653 211.689 C 93.257 214.454,96.190 215.758,102.862 218.006 C 105.618 218.935,108.013 219.966,108.184 220.297 C 108.693 221.281,109.099 228.125,108.649 228.125 C 106.395 228.125,102.365 226.763,100.609 225.408 C 99.522 224.570,95.653 221.797,92.012 219.246 C 85.004 214.336,85.169 214.524,84.636 210.840 C 84.371 209.009,84.094 208.950,88.653 211.689 M266.276 215.104 C 266.133 215.247,266.016 215.838,266.016 216.417 L 266.016 217.468 278.339 217.661 C 293.288 217.894,294.246 217.739,291.964 215.458 C 291.324 214.818,266.898 214.482,266.276 215.104 M233.527 220.382 C 221.775 231.036,203.515 248.069,203.522 248.371 C 203.566 250.331,205.430 250.507,207.124 248.712 C 208.932 246.793,230.733 226.714,238.574 219.744 C 240.417 218.106,240.569 217.611,239.520 216.662 C 238.524 215.761,238.843 215.563,233.527 220.382 M115.757 225.093 C 115.328 225.810,112.007 227.785,111.734 227.484 C 111.566 227.300,111.320 225.391,111.189 223.242 L 110.950 219.336 113.439 222.070 C 114.809 223.574,115.852 224.934,115.757 225.093 M266.276 220.182 C 266.133 220.326,266.016 220.941,266.016 221.549 L 266.016 222.656 279.057 222.656 L 292.099 222.656 292.271 221.482 C 292.366 220.836,292.357 220.221,292.250 220.115 C 291.955 219.819,266.573 219.885,266.276 220.182 M93.243 223.514 C 94.433 224.667,95.341 230.859,94.320 230.859 C 94.204 230.859,93.413 230.504,92.563 230.070 L 91.016 229.281 91.016 225.773 C 91.016 221.799,91.240 221.572,93.243 223.514 M266.016 226.367 L 266.016 227.734 279.102 227.734 L 292.188 227.734 292.188 226.367 L 292.188 225.000 279.102 225.000 L 266.016 225.000 266.016 226.367 M266.016 231.403 L 266.016 232.729 272.754 232.993 C 276.460 233.138,282.305 233.201,285.742 233.132 L 291.992 233.008 292.113 231.543 L 292.235 230.078 279.125 230.078 L 266.016 230.078 266.016 231.403 M94.962 234.341 C 98.485 236.041,102.400 237.845,103.661 238.349 L 105.955 239.266 106.073 241.929 C 106.217 245.195,107.235 245.511,95.996 238.799 C 87.704 233.848,87.109 233.417,87.109 232.371 C 87.109 230.708,87.786 230.877,94.962 234.341 M81.173 236.352 C 82.127 238.165,85.500 244.307,88.668 250.000 C 91.837 255.693,95.056 261.494,95.823 262.891 C 99.090 268.840,102.425 285.036,100.293 284.601 C 99.810 284.503,97.701 284.132,95.606 283.777 C 91.053 283.005,91.596 283.768,90.426 276.486 C 89.189 268.793,89.632 269.944,81.927 254.401 L 75.298 241.028 76.550 237.799 C 77.238 236.023,77.965 234.161,78.164 233.661 C 78.721 232.264,79.291 232.773,81.173 236.352 M88.759 237.636 C 100.170 244.684,104.742 247.295,107.243 248.191 C 108.397 248.605,117.524 255.043,117.561 255.469 C 117.570 255.576,112.532 255.664,106.364 255.664 L 95.151 255.664 92.947 251.758 C 89.140 245.011,83.984 235.580,83.984 235.364 C 83.984 234.836,85.035 235.335,88.759 237.636 M266.406 241.443 C 266.406 242.750,266.522 243.008,267.024 242.815 C 267.364 242.685,273.264 242.578,280.135 242.578 L 292.628 242.578 292.505 241.309 L 292.383 240.039 279.395 239.936 L 266.406 239.833 266.406 241.443 M117.444 241.504 C 119.490 243.016,123.670 247.040,122.886 246.743 C 122.057 246.429,116.210 242.888,115.137 242.049 C 113.272 240.593,115.499 240.067,117.444 241.504 M116.131 245.659 C 118.324 247.138,121.567 249.008,123.340 249.815 C 127.227 251.583,127.345 251.953,124.023 251.953 C 122.256 251.953,121.483 252.101,121.478 252.441 C 121.457 254.194,120.759 254.020,116.931 251.307 C 114.816 249.808,112.163 247.992,111.035 247.272 C 109.907 246.552,108.984 245.830,108.984 245.669 C 108.984 245.508,108.880 245.105,108.753 244.774 C 108.531 244.194,110.340 243.082,111.639 243.001 C 111.918 242.983,113.939 244.179,116.131 245.659 M158.106 246.191 C 154.803 251.561,144.111 264.163,143.433 263.485 C 143.317 263.369,143.663 262.792,144.204 262.203 C 144.745 261.614,145.604 260.518,146.115 259.766 C 147.267 258.068,157.031 245.758,157.965 244.824 C 159.287 243.503,159.355 244.161,158.106 246.191 M266.191 245.029 C 266.083 245.309,266.061 245.971,266.142 246.500 L 266.289 247.461 279.457 247.564 L 292.626 247.667 292.504 246.197 L 292.383 244.727 279.384 244.624 C 268.993 244.541,266.347 244.623,266.191 245.029 M162.891 246.406 L 163.759 247.109 161.107 248.941 C 157.878 251.170,157.725 251.085,159.556 248.070 C 161.098 245.531,161.539 245.311,162.891 246.406 M168.218 249.804 C 167.792 250.916,160.914 259.763,160.048 260.314 C 159.571 260.618,156.279 262.386,152.734 264.244 C 145.674 267.944,145.310 268.205,144.700 270.009 C 144.157 271.612,143.565 271.771,142.753 270.532 C 141.901 269.231,142.172 268.810,147.253 263.549 C 149.366 261.361,151.996 258.483,153.098 257.155 C 156.086 253.554,169.232 247.163,168.218 249.804 M266.222 250.790 C 266.304 251.440,266.470 252.131,266.590 252.325 C 266.829 252.711,289.231 252.855,291.309 252.484 C 292.446 252.280,292.578 252.120,292.578 250.933 L 292.578 249.609 279.325 249.609 L 266.073 249.609 266.222 250.790 M275.774 254.224 C 273.189 256.317,274.991 261.328,278.328 261.328 C 282.217 261.328,284.422 257.042,281.854 254.474 C 280.624 253.245,277.160 253.102,275.774 254.224 M169.531 254.333 C 169.531 254.978,164.696 264.453,164.367 264.453 C 163.558 264.453,162.784 262.452,163.253 261.576 C 165.063 258.195,169.531 253.039,169.531 254.333 M132.211 254.823 C 133.281 255.606,132.642 255.706,128.125 255.468 C 125.869 255.350,124.287 255.136,124.609 254.993 C 126.419 254.191,131.200 254.084,132.211 254.823 M280.000 255.938 C 280.685 256.623,280.572 257.128,279.827 256.711 C 279.475 256.514,278.859 256.438,278.460 256.542 C 277.751 256.727,277.476 256.248,277.995 255.729 C 278.409 255.315,279.489 255.427,280.000 255.938 M280.410 257.643 C 280.886 258.052,279.793 258.594,278.493 258.594 C 277.038 258.594,276.482 258.023,277.218 257.287 C 277.453 257.052,280.061 257.343,280.410 257.643 M64.260 258.987 C 64.393 259.203,64.228 259.486,63.892 259.615 C 63.556 259.744,63.281 260.091,63.281 260.386 C 63.281 260.681,62.886 261.008,62.402 261.112 C 61.072 261.398,48.828 261.558,48.828 261.289 C 48.828 261.087,61.495 258.780,63.356 258.642 C 63.719 258.616,64.126 258.771,64.260 258.987 M68.281 259.063 C 68.956 259.738,68.871 259.976,67.773 260.476 C 66.885 260.881,66.797 260.839,66.797 260.018 C 66.797 258.615,67.428 258.209,68.281 259.063 M339.544 261.475 C 338.472 262.048,326.607 277.238,326.309 278.418 C 325.839 280.278,326.463 281.086,330.169 283.421 C 333.535 285.541,340.007 289.703,344.828 292.847 C 350.914 296.817,354.685 298.030,355.227 296.191 C 355.404 295.590,357.245 282.787,357.554 280.001 C 357.653 279.108,356.665 277.891,351.054 271.994 C 347.414 268.169,343.737 264.216,342.883 263.211 C 341.063 261.069,340.678 260.868,339.544 261.475 M72.939 266.016 C 72.733 267.276,71.298 266.844,69.822 265.077 C 68.105 263.024,68.093 262.971,69.238 262.517 C 70.226 262.125,73.127 264.868,72.939 266.016 M161.284 265.448 C 161.797 266.632,162.148 267.669,162.065 267.752 C 160.954 268.856,144.922 276.160,144.922 275.562 C 144.922 274.848,147.021 271.092,147.868 270.289 C 148.666 269.534,159.366 263.474,160.156 263.330 C 160.264 263.311,160.771 264.264,161.284 265.448 M66.975 265.820 L 68.810 267.969 57.873 267.969 L 46.936 267.969 46.423 266.504 C 46.142 265.698,45.908 264.863,45.905 264.648 C 45.897 264.191,50.899 263.852,59.230 263.747 L 65.139 263.672 66.975 265.820 M114.931 264.280 C 113.463 265.308,113.830 266.016,115.830 266.016 L 117.598 266.016 116.992 264.844 C 116.296 263.498,116.117 263.449,114.931 264.280 M338.895 271.574 C 337.942 278.929,338.311 278.439,333.613 278.587 C 328.844 278.738,328.850 279.069,333.516 273.294 C 335.622 270.687,337.750 267.973,338.246 267.263 C 339.566 265.372,339.637 265.847,338.895 271.574 M206.179 272.978 C 205.947 281.901,204.991 283.421,199.702 283.282 C 197.093 283.213,196.975 283.119,197.844 281.793 C 199.522 279.232,198.735 276.619,194.483 270.630 C 193.006 268.549,191.797 266.747,191.797 266.626 C 191.797 266.505,195.071 266.406,199.073 266.406 L 206.350 266.406 206.179 272.978 M293.750 276.184 C 293.750 291.525,294.357 291.020,275.977 290.996 C 258.469 290.974,258.227 290.805,258.212 278.613 L 258.203 271.875 268.555 271.875 L 278.906 271.875 278.906 270.745 C 278.906 269.143,278.890 269.141,266.570 269.141 L 255.469 269.141 255.469 271.094 L 255.469 273.047 232.283 273.047 L 209.097 273.047 208.870 270.041 C 208.745 268.387,208.730 266.893,208.836 266.720 C 208.943 266.548,228.092 266.406,251.390 266.406 L 293.750 266.406 293.750 276.184 M348.746 273.805 L 354.702 280.032 354.082 284.255 C 353.152 290.579,353.349 290.420,350.170 287.429 C 348.680 286.028,345.924 283.518,344.046 281.852 C 341.352 279.463,340.668 278.646,340.809 277.986 C 340.906 277.525,341.177 275.479,341.410 273.438 C 341.935 268.839,342.174 267.578,342.519 267.578 C 342.668 267.578,345.469 270.380,348.746 273.805 M37.546 272.168 C 36.422 276.021,35.942 277.873,35.940 278.365 C 35.934 279.487,47.370 280.916,48.861 279.978 C 49.380 279.652,50.723 279.089,51.845 278.727 C 54.046 278.017,54.680 276.944,54.685 273.916 C 54.688 272.140,53.757 271.875,47.501 271.875 C 41.784 271.875,41.400 271.762,42.643 270.439 L 43.496 269.531 40.905 269.531 L 38.314 269.531 37.546 272.168 M304.946 272.844 C 303.476 274.314,303.811 277.628,305.521 278.544 C 306.392 279.010,311.956 278.702,312.870 278.138 C 313.828 277.546,312.996 273.067,311.847 272.631 C 310.276 272.034,305.613 272.178,304.946 272.844 M132.437 274.005 C 131.672 274.927,132.112 275.963,133.328 276.102 C 134.590 276.248,135.547 275.601,135.547 274.603 C 135.547 273.422,133.283 272.986,132.437 274.005 M108.623 274.728 C 108.268 275.663,106.679 282.093,105.819 286.077 C 105.372 288.150,105.389 288.401,106.002 288.744 C 106.374 288.952,109.966 291.597,113.984 294.621 C 127.020 304.432,125.430 304.423,132.684 294.727 C 141.207 283.334,141.371 282.260,134.607 282.190 C 130.329 282.146,127.546 281.329,121.094 278.223 C 111.599 273.653,109.279 273.003,108.623 274.728 M45.035 275.098 C 46.162 275.940,46.085 277.554,44.922 277.462 C 40.692 277.131,39.505 276.877,39.670 276.342 C 39.766 276.034,39.926 275.518,40.027 275.195 C 40.258 274.454,44.075 274.380,45.035 275.098 M309.590 275.000 C 310.258 275.000,310.459 275.166,310.298 275.586 C 310.004 276.351,307.031 276.410,307.031 275.651 C 307.031 274.911,307.487 274.551,308.117 274.793 C 308.414 274.907,309.077 275.000,309.590 275.000 M51.052 275.642 C 51.336 276.381,50.148 277.429,49.226 277.254 C 48.900 277.192,48.577 276.660,48.509 276.071 C 48.362 274.797,50.584 274.423,51.052 275.642 M114.367 278.288 C 115.596 278.807,118.470 280.123,120.753 281.213 C 123.037 282.303,125.849 283.438,127.003 283.736 L 129.102 284.277 127.539 284.720 C 123.631 285.829,123.696 285.846,117.578 282.091 C 111.063 278.094,109.486 276.226,114.367 278.288 M187.078 278.238 C 176.106 283.923,165.625 289.579,165.625 289.817 C 165.625 289.980,165.986 290.440,166.428 290.840 C 167.271 291.603,189.026 281.239,189.836 279.688 C 190.823 277.797,189.387 277.042,187.078 278.238 M116.212 284.376 C 123.746 288.909,123.097 288.033,122.964 293.489 L 122.852 298.111 117.764 294.065 C 114.966 291.839,111.845 289.422,110.830 288.693 C 108.794 287.231,108.755 287.078,109.445 283.331 C 109.992 280.366,109.396 280.274,116.212 284.376 M345.549 286.991 C 349.139 290.149,351.876 292.799,351.630 292.881 C 351.155 293.039,346.414 290.558,343.164 288.450 C 342.090 287.753,339.277 286.027,336.914 284.614 C 334.551 283.201,332.354 281.876,332.031 281.670 C 331.634 281.416,332.662 281.289,335.233 281.273 L 339.022 281.250 345.549 286.991 M62.109 287.362 C 58.051 290.924,57.145 291.462,51.367 293.739 C 43.123 296.989,42.420 297.423,38.531 301.665 C 35.273 305.219,35.065 305.545,35.478 306.450 L 35.921 307.422 46.306 307.422 C 52.884 307.422,56.976 307.270,57.467 307.007 C 57.893 306.779,60.112 305.184,62.398 303.463 C 64.685 301.742,67.061 300.072,67.680 299.752 C 69.314 298.907,74.015 287.921,73.124 287.030 C 72.938 286.844,71.306 286.341,69.498 285.913 C 67.690 285.484,65.947 285.057,65.625 284.962 C 65.293 284.865,63.770 285.904,62.109 287.362 M135.156 286.581 C 135.156 286.966,126.547 298.224,126.139 298.372 C 125.942 298.444,125.781 297.548,125.781 296.381 C 125.781 295.213,125.672 292.958,125.539 291.368 L 125.296 288.477 129.347 287.445 C 133.516 286.384,135.156 286.140,135.156 286.581 M313.184 287.776 C 312.671 288.348,312.500 289.218,312.500 291.262 L 312.500 293.987 315.164 294.845 C 320.521 296.570,323.127 295.547,323.236 291.675 L 323.300 289.405 321.660 288.444 C 319.314 287.070,314.181 286.665,313.184 287.776 M63.845 290.686 C 62.001 292.579,60.691 293.467,57.475 295.002 C 55.248 296.065,51.238 298.341,48.563 300.060 C 40.832 305.029,38.218 305.814,41.850 302.078 C 43.739 300.133,46.709 298.507,53.251 295.834 C 59.139 293.428,59.717 293.117,61.523 291.385 C 65.361 287.705,67.323 287.114,63.845 290.686 M223.828 289.638 C 208.674 291.869,210.782 290.988,202.734 298.453 C 195.462 305.198,187.466 312.109,186.934 312.109 C 186.676 312.109,185.160 311.663,183.565 311.117 C 172.338 307.278,164.156 305.391,163.285 306.440 C 161.745 308.297,165.434 310.961,182.715 320.473 C 185.347 321.922,187.500 323.290,187.500 323.514 C 187.500 324.976,192.200 323.544,200.005 319.704 C 208.991 315.285,208.441 315.334,208.265 318.970 C 208.078 322.807,209.172 324.219,212.330 324.219 C 214.846 324.219,215.723 323.280,215.783 320.525 C 215.841 317.901,214.274 316.658,210.443 316.288 C 208.155 316.068,208.533 315.697,214.284 312.513 C 220.196 309.241,221.403 308.007,223.084 303.516 C 224.188 300.565,224.214 300.544,230.840 297.288 C 237.471 294.030,237.444 294.066,236.096 290.109 C 235.327 287.852,235.825 287.871,223.828 289.638 M319.160 290.440 C 319.794 290.768,320.313 291.172,320.313 291.338 C 320.313 292.666,317.046 293.026,315.603 291.858 C 313.577 290.217,316.487 289.057,319.160 290.440 M67.962 293.872 C 66.627 297.442,58.412 303.880,54.586 304.356 C 51.637 304.722,46.875 304.740,46.875 304.384 C 46.875 303.816,56.432 298.121,59.495 296.864 C 62.428 295.659,66.145 293.208,67.775 291.402 C 68.898 290.158,68.975 291.167,67.962 293.872 M152.930 296.323 C 131.336 308.002,108.222 319.244,106.259 319.023 C 103.656 318.731,102.340 317.017,94.996 304.359 C 87.670 291.730,88.443 292.619,85.960 293.971 C 80.662 296.854,80.628 297.543,85.356 306.093 C 89.126 312.910,89.700 313.594,91.044 312.875 C 92.149 312.284,92.122 312.215,88.086 305.303 C 86.045 301.808,84.375 298.838,84.375 298.703 C 84.375 298.352,86.567 297.266,87.275 297.266 C 87.824 297.266,91.456 303.129,97.887 314.396 C 101.048 319.934,102.340 321.211,105.447 321.870 L 107.901 322.391 122.212 315.266 C 139.125 306.847,161.409 295.151,162.771 293.980 C 163.534 293.323,163.677 292.932,163.465 292.084 C 163.114 290.687,164.035 290.317,152.930 296.323 M233.594 291.898 C 233.594 292.512,233.232 292.736,227.786 295.499 L 223.364 297.742 220.833 296.911 C 216.210 295.393,213.979 293.947,215.707 293.586 C 222.041 292.265,233.594 291.175,233.594 291.898 M211.816 296.071 C 213.292 296.811,213.242 296.980,210.254 301.386 L 207.617 305.273 198.470 311.426 C 188.526 318.114,188.699 318.023,188.613 316.602 C 188.581 316.064,188.537 315.482,188.516 315.307 C 188.494 315.132,191.014 312.811,194.116 310.150 C 197.218 307.489,202.125 303.057,205.021 300.301 C 207.918 297.546,210.390 295.346,210.515 295.412 C 210.640 295.478,211.226 295.775,211.816 296.071 M216.732 298.780 C 217.146 299.042,216.999 299.614,216.022 301.549 C 215.345 302.890,214.886 304.233,215.001 304.533 C 215.460 305.731,216.436 304.949,217.852 302.246 C 219.323 299.439,220.108 298.916,221.231 299.994 C 221.544 300.295,218.765 305.926,217.822 306.899 C 216.965 307.784,209.538 311.845,201.087 316.049 C 186.233 323.439,187.960 320.894,204.833 310.528 C 208.659 308.177,211.012 305.695,213.698 301.174 C 215.307 298.465,215.721 298.139,216.732 298.780 M148.828 306.848 C 131.582 315.835,109.396 326.997,106.950 327.917 C 103.074 329.376,99.944 327.860,98.033 323.601 C 96.777 320.803,96.576 320.626,95.002 320.941 L 93.831 321.175 95.030 323.891 C 97.397 329.249,100.485 331.507,105.003 331.180 C 107.243 331.018,123.441 323.494,134.122 317.655 C 137.489 315.813,137.835 315.788,136.992 317.444 C 136.681 318.055,135.592 320.624,134.573 323.154 L 132.719 327.753 133.729 329.209 C 134.285 330.009,135.873 331.787,137.258 333.159 L 139.777 335.653 144.791 336.560 C 152.128 337.886,151.813 337.941,152.329 335.254 C 152.566 334.019,153.649 328.710,154.736 323.458 C 157.185 311.619,157.216 311.691,150.718 314.063 C 146.854 315.473,146.383 315.490,143.737 314.322 L 141.671 313.411 152.476 307.986 L 163.281 302.562 163.281 301.086 C 163.281 299.157,164.589 298.635,148.828 306.848 M227.864 309.662 C 225.256 309.846,225.164 309.994,224.646 314.804 L 224.209 318.866 225.444 321.054 C 230.709 330.385,231.070 330.718,235.423 330.251 C 238.444 329.928,238.142 330.450,239.065 323.949 C 240.231 315.741,240.302 316.150,237.088 312.502 L 234.332 309.375 232.107 309.447 C 230.884 309.487,228.974 309.584,227.864 309.662 M178.666 312.538 C 185.926 314.834,185.432 314.529,186.117 317.128 C 186.857 319.931,186.848 319.929,179.588 315.635 C 169.373 309.594,169.374 309.599,178.666 312.538 M280.273 314.117 C 277.266 314.986,274.639 315.855,274.436 316.049 C 274.116 316.355,272.728 326.063,272.675 328.364 C 272.660 329.041,273.307 329.463,276.270 330.708 L 279.883 332.227 289.058 332.086 L 298.234 331.946 296.383 333.925 C 293.151 337.380,293.831 338.694,299.414 339.787 C 308.610 341.586,311.641 341.943,313.389 341.434 C 321.521 339.066,321.451 339.097,322.255 337.521 C 323.234 335.603,322.937 335.319,318.164 333.608 C 312.160 331.457,312.210 331.523,316.367 331.208 C 322.767 330.722,322.715 330.838,320.505 322.037 C 318.387 313.602,318.925 314.233,313.574 313.919 C 284.171 312.192,286.998 312.175,280.273 314.117 M235.306 314.845 C 236.750 316.443,237.188 317.734,236.151 317.336 C 235.586 317.119,232.813 313.940,232.813 313.508 C 232.813 312.807,234.078 313.485,235.306 314.845 M228.898 316.942 L 228.889 319.336 228.129 317.661 C 227.255 315.735,227.419 313.315,228.370 314.104 C 228.720 314.394,228.903 315.382,228.898 316.942 M70.508 316.283 C 64.638 320.140,63.708 321.301,65.137 322.985 C 65.863 323.841,72.247 325.222,75.000 325.119 C 78.052 325.004,81.797 323.704,80.564 323.186 C 79.367 322.684,80.682 322.397,83.386 322.570 C 85.872 322.730,86.328 322.664,86.328 322.150 C 86.328 321.814,86.579 321.289,86.885 320.983 C 87.507 320.362,89.059 317.904,89.061 317.538 C 89.068 316.420,83.648 314.897,80.984 315.268 C 78.690 315.587,77.917 315.548,76.737 315.056 C 74.522 314.130,73.470 314.337,70.508 316.283 M296.220 315.793 C 300.694 316.091,304.459 316.438,304.586 316.565 C 304.714 316.693,304.598 316.797,304.329 316.797 C 303.739 316.797,286.757 318.281,284.631 318.518 C 282.703 318.733,278.722 317.617,279.883 317.187 C 280.927 316.801,286.761 315.353,287.500 315.297 C 287.822 315.272,291.746 315.496,296.220 315.793 M153.125 316.330 C 153.125 317.245,149.671 333.662,149.429 333.899 C 149.116 334.206,147.710 332.677,145.106 329.201 L 143.425 326.956 144.880 322.771 L 146.334 318.587 149.437 317.341 C 152.910 315.945,153.125 315.886,153.125 316.330 M142.489 316.824 L 143.688 317.242 141.918 322.312 C 140.362 326.766,140.214 327.462,140.700 328.046 C 141.004 328.412,142.203 329.831,143.363 331.200 L 145.473 333.689 143.732 333.405 C 141.512 333.042,140.152 332.197,137.585 329.587 L 135.521 327.488 136.464 325.756 C 136.983 324.803,138.062 322.310,138.861 320.215 C 140.370 316.261,140.507 316.133,142.489 316.824 M75.789 317.778 C 77.587 318.913,77.739 319.579,76.367 320.313 C 75.296 320.886,75.139 321.467,75.859 322.188 C 76.224 322.552,76.140 322.656,75.480 322.656 C 73.755 322.656,68.730 321.350,68.867 320.938 C 68.976 320.611,73.658 316.952,74.129 316.825 C 74.187 316.810,74.934 317.239,75.789 317.778 M232.137 317.871 C 232.840 318.650,232.650 325.187,231.936 324.746 C 231.018 324.178,230.480 321.877,230.723 319.553 C 230.988 317.021,231.172 316.802,232.137 317.871 M160.277 318.151 C 157.944 319.165,158.143 323.105,160.554 323.634 C 163.359 324.250,165.625 323.091,165.625 321.040 C 165.625 318.239,163.150 316.901,160.277 318.151 M317.913 323.222 C 318.574 325.790,319.063 327.942,318.999 328.006 C 318.179 328.826,307.102 329.198,304.962 328.477 C 302.843 327.763,302.525 327.739,302.139 328.267 C 301.780 328.759,281.031 330.000,280.603 329.556 C 280.387 329.332,282.348 321.708,282.642 321.623 C 282.843 321.566,288.721 320.886,295.703 320.113 C 302.686 319.340,310.068 318.483,312.109 318.210 C 316.677 317.598,316.404 317.363,317.913 323.222 M83.984 318.351 C 84.919 318.942,83.739 319.786,81.543 320.097 C 79.171 320.434,79.075 319.771,81.348 318.739 C 83.281 317.862,83.224 317.870,83.984 318.351 M228.906 320.746 C 228.906 321.414,228.568 321.084,227.962 319.824 L 227.352 318.555 228.129 319.477 C 228.557 319.984,228.906 320.555,228.906 320.746 M236.289 321.484 C 235.704 324.883,235.545 325.435,235.209 325.228 C 234.914 325.045,235.345 320.379,235.769 319.173 C 236.250 317.804,236.631 319.497,236.289 321.484 M212.891 319.844 C 212.891 320.560,212.194 321.484,211.654 321.484 C 210.991 321.484,210.446 319.835,210.995 319.488 C 211.904 318.912,212.891 319.097,212.891 319.844 M278.535 320.127 C 279.886 320.826,279.851 320.529,279.073 324.664 C 278.344 328.534,278.149 328.805,276.751 327.889 C 275.718 327.212,275.691 327.107,275.924 324.598 C 276.416 319.304,276.539 319.095,278.535 320.127 M259.570 325.419 C 258.281 326.047,257.106 326.604,256.958 326.659 C 255.697 327.123,256.375 330.132,258.129 331.852 L 259.961 333.649 262.695 333.427 C 267.459 333.042,267.563 332.945,267.573 328.892 L 267.578 326.730 265.032 325.474 C 262.027 323.993,262.492 323.998,259.570 325.419 M178.401 327.687 C 178.142 328.004,176.214 329.380,174.116 330.744 C 170.540 333.070,170.318 333.290,170.553 334.288 C 170.956 335.998,170.915 335.977,179.746 338.963 L 181.562 339.577 185.215 337.456 L 188.867 335.335 188.867 333.586 C 188.867 331.615,189.370 331.993,182.503 328.798 C 179.366 327.339,178.808 327.188,178.401 327.687 M264.453 328.697 C 264.453 330.108,263.204 330.651,261.722 329.885 C 259.672 328.825,260.199 327.734,262.760 327.734 C 264.299 327.734,264.453 327.822,264.453 328.697 M183.394 331.877 C 186.462 333.106,186.454 333.017,183.694 334.978 L 181.470 336.558 178.041 335.173 C 176.155 334.412,174.611 333.684,174.611 333.555 C 174.607 332.960,177.797 331.891,178.102 332.385 C 178.507 333.040,180.179 332.076,179.900 331.348 C 179.615 330.607,180.590 330.755,183.394 331.877 M311.792 333.859 C 315.377 335.333,318.417 336.646,318.548 336.777 C 318.884 337.114,312.916 338.672,311.288 338.672 C 309.761 338.672,298.463 336.875,298.175 336.586 C 298.072 336.483,298.835 335.636,299.872 334.703 C 300.908 333.771,302.196 332.523,302.733 331.931 C 303.947 330.594,303.752 330.553,311.792 333.859 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path></g></svg>
\ No newline at end of file
diff --git a/apps/website/public/llms.txt b/apps/website/public/llms.txt
new file mode 100644
index 0000000..cb6148c
--- /dev/null
+++ b/apps/website/public/llms.txt
@@ -0,0 +1,26 @@
+# IPTVnator
+
+> IPTVnator is an open-source cross-platform IPTV player (desktop + web) that supports M3U/M3U8 playlists, Xtream Codes API, Stalker portals, and XMLTV EPG.
+
+## Canonical URLs
+
+- Website: https://4gray.github.io/iptvnator/
+- Blog: https://4gray.github.io/iptvnator/blog/
+- Latest Release: https://github.com/4gray/iptvnator/releases/latest
+- Release Notes (v0.18): https://4gray.github.io/iptvnator/blog/v0-18-release-notes/
+- Troubleshooting (macOS app damaged fix): https://4gray.github.io/iptvnator/blog/macos-arm-app-damaged-fix/
+- Source Code: https://github.com/4gray/iptvnator
+- Telegram: https://t.me/iptvnator
+- GitHub Sponsors: https://github.com/sponsors/4gray
+- Ko-fi: https://ko-fi.com/4gray
+
+## Product Scope
+
+- IPTVnator is a media player application.
+- It does not provide, host, or sell playlists, channels, or media content.
+- Any channel names or metadata shown in screenshots/posts are demo examples only.
+
+## Machine-readable Discovery
+
+- Sitemap: https://4gray.github.io/iptvnator/sitemap-index.xml
+- Robots: https://4gray.github.io/iptvnator/robots.txt
diff --git a/apps/website/public/og-image.png b/apps/website/public/og-image.png
new file mode 100644
index 0000000..4551b79
Binary files /dev/null and b/apps/website/public/og-image.png differ
diff --git a/apps/website/public/robots.txt b/apps/website/public/robots.txt
new file mode 100644
index 0000000..ae84a00
--- /dev/null
+++ b/apps/website/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://4gray.github.io/iptvnator/sitemap-index.xml
diff --git a/apps/website/src/assets/footer-watermark.png b/apps/website/src/assets/footer-watermark.png
new file mode 100644
index 0000000..ebcdf7c
Binary files /dev/null and b/apps/website/src/assets/footer-watermark.png differ
diff --git a/apps/website/src/assets/illustrations/iptvnator-1-mascot.png b/apps/website/src/assets/illustrations/iptvnator-1-mascot.png
new file mode 100644
index 0000000..fd0be9d
Binary files /dev/null and b/apps/website/src/assets/illustrations/iptvnator-1-mascot.png differ
diff --git a/apps/website/src/assets/logo.png b/apps/website/src/assets/logo.png
new file mode 100644
index 0000000..d3283a3
Binary files /dev/null and b/apps/website/src/assets/logo.png differ
diff --git a/apps/website/src/assets/screenshots/epg.png b/apps/website/src/assets/screenshots/epg.png
new file mode 100644
index 0000000..5c7a857
Binary files /dev/null and b/apps/website/src/assets/screenshots/epg.png differ
diff --git a/apps/website/src/assets/screenshots/hero-dark.png b/apps/website/src/assets/screenshots/hero-dark.png
new file mode 100644
index 0000000..4551b79
Binary files /dev/null and b/apps/website/src/assets/screenshots/hero-dark.png differ
diff --git a/apps/website/src/assets/screenshots/player.png b/apps/website/src/assets/screenshots/player.png
new file mode 100644
index 0000000..fa953d8
Binary files /dev/null and b/apps/website/src/assets/screenshots/player.png differ
diff --git a/apps/website/src/assets/screenshots/playlists.png b/apps/website/src/assets/screenshots/playlists.png
new file mode 100644
index 0000000..6fd4de3
Binary files /dev/null and b/apps/website/src/assets/screenshots/playlists.png differ
diff --git a/apps/website/src/assets/screenshots/settings.png b/apps/website/src/assets/screenshots/settings.png
new file mode 100644
index 0000000..e6a68a0
Binary files /dev/null and b/apps/website/src/assets/screenshots/settings.png differ
diff --git a/apps/website/src/assets/screenshots/upload-file.png b/apps/website/src/assets/screenshots/upload-file.png
new file mode 100644
index 0000000..d9bf3c1
Binary files /dev/null and b/apps/website/src/assets/screenshots/upload-file.png differ
diff --git a/apps/website/src/assets/screenshots/upload-url.png b/apps/website/src/assets/screenshots/upload-url.png
new file mode 100644
index 0000000..95cdc01
Binary files /dev/null and b/apps/website/src/assets/screenshots/upload-url.png differ
diff --git a/apps/website/src/components/BaseHead.astro b/apps/website/src/components/BaseHead.astro
new file mode 100644
index 0000000..2e4f4b9
--- /dev/null
+++ b/apps/website/src/components/BaseHead.astro
@@ -0,0 +1,84 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  image?: string;
+  type?: 'website' | 'article';
+  noindex?: boolean;
+  keywords?: string[];
+  publishedTime?: string;
+  modifiedTime?: string;
+  jsonLd?: Record<string, unknown> | Array<Record<string, unknown>>;
+}
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const {
+  title,
+  description,
+  image = '/iptvnator/og-image.png',
+  type = 'website',
+  noindex = false,
+  keywords = [],
+  publishedTime,
+  modifiedTime,
+  jsonLd,
+} = Astro.props;
+
+const absoluteImageURL = new URL(image, Astro.site);
+const robotsContent = noindex
+  ? 'noindex, nofollow, noarchive'
+  : 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1';
+const schemaPayload = jsonLd
+  ? JSON.stringify(Array.isArray(jsonLd) ? jsonLd : [jsonLd])
+  : null;
+---
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="icon" type="image/x-icon" href="/iptvnator/favicon.ico" />
+<meta name="generator" content={Astro.generator} />
+<meta name="robots" content={robotsContent} />
+<meta name="referrer" content="strict-origin-when-cross-origin" />
+<meta name="author" content="4gray" />
+<meta name="theme-color" content="#0a0a08" />
+<meta name="format-detection" content="telephone=no" />
+{keywords.length > 0 && <meta name="keywords" content={keywords.join(', ')} />}
+
+<!-- Fonts: Playfair Display (display), DM Sans (body), IBM Plex Mono (code) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap"
+  rel="stylesheet"
+/>
+
+<!-- Canonical URL -->
+<link rel="canonical" href={canonicalURL.toString()} />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={type} />
+<meta property="og:site_name" content="IPTVnator" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:url" content={canonicalURL.toString()} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={absoluteImageURL.toString()} />
+<meta property="og:image:secure_url" content={absoluteImageURL.toString()} />
+{type === 'article' && publishedTime && <meta property="article:published_time" content={publishedTime} />}
+{type === 'article' && modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={canonicalURL.toString()} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content={absoluteImageURL.toString()} />
+
+{schemaPayload && (
+  <script type="application/ld+json" set:html={schemaPayload} />
+)}
diff --git a/apps/website/src/components/BlogPostCard.astro b/apps/website/src/components/BlogPostCard.astro
new file mode 100644
index 0000000..ea918eb
--- /dev/null
+++ b/apps/website/src/components/BlogPostCard.astro
@@ -0,0 +1,71 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  pubDate: Date;
+  slug: string;
+  tags?: string[];
+  heroImage?: string;
+}
+
+const { title, description, pubDate, slug, tags = [], heroImage } = Astro.props;
+
+const formattedDate = pubDate.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+---
+
+<a
+  href={`/iptvnator/blog/${slug}/`}
+  class="card-dotted group block"
+>
+  {heroImage && (
+    <div class="overflow-hidden rounded-t-lg -mx-6 -mt-6 mb-5">
+      <img
+        src={heroImage}
+        alt=""
+        class="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-[1.02]"
+        loading="lazy"
+      />
+    </div>
+  )}
+  <div class="flex items-center gap-2">
+    <time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
+      {formattedDate}
+    </time>
+    {
+      tags.length > 0 && (
+        <>
+          <span class="text-surface-700">&middot;</span>
+          {tags.map((tag) => (
+            <span class="rounded-full border border-dashed border-accent-500/30 px-2 py-0.5 text-xs text-accent-400">
+              {tag}
+            </span>
+          ))}
+        </>
+      )
+    }
+  </div>
+  <h3
+    class="mt-3 font-display text-lg font-semibold text-surface-100 transition-colors duration-200 group-hover:text-accent-400"
+  >
+    {title}
+  </h3>
+  <p class="mt-2 text-sm leading-relaxed text-surface-500">
+    {description}
+  </p>
+  <span class="mt-4 inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.1em] text-accent-500 transition-colors group-hover:text-accent-400">
+    Read more
+    <svg
+      class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+    </svg>
+  </span>
+</a>
diff --git a/apps/website/src/components/DownloadCTA.astro b/apps/website/src/components/DownloadCTA.astro
new file mode 100644
index 0000000..b530ce8
--- /dev/null
+++ b/apps/website/src/components/DownloadCTA.astro
@@ -0,0 +1,122 @@
+---
+const platforms = [
+  {
+    name: 'macOS',
+    icon: 'M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z',
+    href: 'https://github.com/4gray/iptvnator/releases/latest',
+  },
+  {
+    name: 'Windows',
+    icon: 'M3 12V6.75l8-1.25V12H3zm0 .5h8v6.5l-8-1.25V12.5zM11.5 5.35L21 3.75V12h-9.5V5.35zm0 7.15H21v8.25l-9.5-1.6V12.5z',
+    href: 'https://github.com/4gray/iptvnator/releases/latest',
+  },
+  {
+    name: 'Linux',
+    icon: 'M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.368 1.884 1.43.39.03.8-.066 1.109-.199.69-.3 1.286-1.065 1.09-1.745a21.03 21.03 0 01-.174-.606c-.101-.427-.2-.855-.29-1.283-.09-.428.04-.546.481-.735.463-.199.833-.338 1.073-.668.24-.33.364-.8.269-1.437-.14-.98-.689-2.072-1.329-3.069-.645-1-.34-1.665-.34-2.863.006-1.497-.898-2.987-1.792-4.048-.89-1.06-1.78-1.835-2.085-2.748-.228-.68-.098-1.401.128-2.056.112-.322.254-.631.325-.933.07-.303.072-.622-.058-.853C13.56.199 13.04 0 12.504 0z',
+    href: 'https://github.com/4gray/iptvnator/releases/latest',
+  },
+];
+
+const packageManagers = [
+  { label: 'Homebrew', command: 'brew install --cask iptvnator' },
+  { label: 'Snap', command: 'sudo snap install iptvnator' },
+];
+---
+
+<section id="download" class="relative overflow-hidden py-28">
+  <hr class="section-divider mb-28" />
+
+  <!-- Ambient glow -->
+  <div class="pointer-events-none absolute bottom-0 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full bg-accent-500/[0.04] blur-[100px]"></div>
+
+  <div class="relative mx-auto max-w-6xl px-6">
+    <!-- Centered editorial header -->
+    <div class="mx-auto max-w-lg text-center">
+      <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">
+        Get started
+      </span>
+      <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl lg:text-5xl">
+        Get <em class="font-medium text-accent-400" style="font-style: italic;">IPTVnator</em>
+      </h2>
+      <p class="mt-4 text-lg text-surface-400">
+        Download for your platform or use it directly in the browser.
+      </p>
+    </div>
+
+    <!-- Platform buttons -->
+    <div class="mt-14 flex flex-wrap justify-center gap-4">
+      {
+        platforms.map((platform) => (
+          <a
+            href={platform.href}
+            class="card-dotted group flex items-center gap-4 px-8 py-5"
+          >
+            <svg class="h-7 w-7 text-surface-500 transition-colors duration-200 group-hover:text-accent-400" fill="currentColor" viewBox="0 0 24 24">
+              <path d={platform.icon} />
+            </svg>
+            <div class="text-left">
+              <div class="font-mono text-[10px] uppercase tracking-[0.15em] text-surface-500">Download for</div>
+              <div class="mt-0.5 font-semibold text-surface-100">{platform.name}</div>
+            </div>
+          </a>
+        ))
+      }
+    </div>
+
+    <!-- Package managers -->
+    <div class="mx-auto mt-10 max-w-xl space-y-3">
+      {
+        packageManagers.map((pm) => (
+          <div class="flex items-center gap-4 rounded-lg border border-dashed border-surface-700/60 bg-surface-900/50 px-5 py-3.5">
+            <span class="w-20 shrink-0 font-mono text-[10px] font-medium uppercase tracking-[0.15em] text-surface-500">
+              {pm.label}
+            </span>
+            <code class="flex-1 font-mono text-sm text-accent-400/80">
+              {pm.command}
+            </code>
+            <button
+              class="copy-btn shrink-0 rounded-md p-1.5 text-surface-600 transition-colors hover:text-surface-300"
+              data-command={pm.command}
+              aria-label={`Copy ${pm.label} command`}
+            >
+              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+              </svg>
+            </button>
+          </div>
+        ))
+      }
+    </div>
+
+    <!-- Web app link -->
+    <div class="mt-10 text-center">
+      <p class="text-sm text-surface-500">
+        Or use it directly at{' '}
+        <a
+          href="https://iptvnator.vercel.app"
+          class="text-accent-400 underline decoration-accent-500/30 underline-offset-4 transition-colors hover:text-accent-300 hover:decoration-accent-400/50"
+        >
+          iptvnator.vercel.app
+        </a>
+      </p>
+    </div>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll('.copy-btn').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const command = (btn as HTMLElement).dataset.command;
+      if (command) {
+        await navigator.clipboard.writeText(command);
+        const svg = btn.querySelector('svg');
+        if (svg) {
+          svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />';
+          setTimeout(() => {
+            svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />';
+          }, 1500);
+        }
+      }
+    });
+  });
+</script>
diff --git a/apps/website/src/components/FeatureGrid.astro b/apps/website/src/components/FeatureGrid.astro
new file mode 100644
index 0000000..9ab0018
--- /dev/null
+++ b/apps/website/src/components/FeatureGrid.astro
@@ -0,0 +1,223 @@
+---
+const heroFeatures = [
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />',
+    title: 'M3U / M3U8 Playlists',
+    description: 'Import playlists from files or URLs with full M3U and M3U8 support.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />',
+    title: 'Xtream Codes API',
+    description: 'Connect to Xtream Codes providers with live TV, VOD, and series.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />',
+    title: 'Electronic Program Guide',
+    description: 'XMLTV-based EPG with current and upcoming program information.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v3" />',
+    title: 'Cross-Platform',
+    description: 'Runs on macOS, Windows, Linux as a desktop app or PWA in any browser.',
+  },
+];
+
+const carouselFeatures = [
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0" />',
+    title: 'Stalker Portals',
+    description: 'Browse and stream content from Stalker/Ministra portal providers.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />',
+    title: 'Favorites & History',
+    description: 'Mark channels as favorites and keep track of recently watched.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />',
+    title: 'Search & Filter',
+    description: 'Quickly find channels across playlists with full-text search.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />',
+    title: 'Multi-Language',
+    description: 'Available in 16 languages with community-contributed translations.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />',
+    title: 'External Players',
+    description: 'Open streams in MPV, VLC, or other external players from the app.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />',
+    title: 'Light & Dark Themes',
+    description: 'Choose between light and dark themes for comfortable viewing.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />',
+    title: 'Remote Control',
+    description: 'Control the player from your phone with the built-in remote.',
+  },
+  {
+    icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />',
+    title: 'Privacy First',
+    description: 'No tracking, no analytics. Your data stays on your device.',
+  },
+];
+---
+
+<section id="features" class="relative py-28">
+  <hr class="section-divider mb-28" />
+
+  <div class="relative z-10 mx-auto max-w-6xl px-6">
+    <!-- Editorial header: left-aligned -->
+    <div class="max-w-xl">
+      <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">
+        Features
+      </span>
+      <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl lg:text-5xl">
+        Everything <em class="font-medium text-accent-400" style="font-style: italic;">you need</em>
+      </h2>
+      <p class="mt-4 text-lg text-surface-400">
+        A full-featured IPTV player packed with the tools for the best viewing experience.
+      </p>
+    </div>
+
+    <!-- Hero feature cards: 2x2 grid -->
+    <div class="stagger-children mt-16 grid grid-cols-1 gap-5 sm:grid-cols-2" data-stagger>
+      {
+        heroFeatures.map((feature, i) => (
+          <div class="feature-card group relative overflow-hidden rounded-lg border border-dashed border-surface-600/60 bg-gradient-to-br from-surface-900/80 via-surface-950/60 to-surface-900/40 p-7 transition-all duration-500 hover:border-accent-500/40 hover:shadow-[0_0_30px_rgba(32,168,168,0.08)]">
+
+            <!-- Background watermark icon — large, rotated, partially clipped -->
+            <div class={`feature-watermark pointer-events-none absolute -bottom-6 -right-4 opacity-[0.04] transition-all duration-700 ease-out group-hover:opacity-[0.1] ${i % 2 === 0 ? 'watermark-left' : 'watermark-right'}`}>
+              <svg class="h-36 w-36 text-accent-400 sm:h-44 sm:w-44" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0.7">
+                <Fragment set:html={feature.icon} />
+              </svg>
+            </div>
+            <!-- Watermark gradient mask — fades icon into card bg from top-left -->
+            <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-surface-900/95 via-surface-950/40 to-transparent" />
+
+            <!-- CRT scanline overlay on hover -->
+            <div class="pointer-events-none absolute inset-0 z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" style="background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(32,168,168,0.015) 2px, rgba(32,168,168,0.015) 4px);" />
+
+            <!-- Card content -->
+            <div class="relative z-[1]">
+              <!-- Mono label + accent line -->
+              <div class="mb-5 flex items-center gap-3">
+                <span class="font-mono text-[10px] font-medium uppercase tracking-[0.2em] text-accent-500/70 transition-colors duration-300 group-hover:text-accent-400">0{i + 1}</span>
+                <span class="h-px flex-1 bg-gradient-to-r from-accent-500/20 to-transparent transition-colors duration-300 group-hover:from-accent-500/40" />
+              </div>
+
+              <h3 class="font-display text-xl font-bold tracking-tight text-surface-100 transition-colors duration-300 group-hover:text-surface-50 sm:text-2xl">
+                {feature.title}
+              </h3>
+              <p class="mt-2.5 max-w-[85%] text-sm leading-relaxed text-surface-500 transition-colors duration-300 group-hover:text-surface-400">
+                {feature.description}
+              </p>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+
+    <!-- Sub-header between hero and carousel -->
+    <div class="mt-16">
+      <span class="font-mono text-xs uppercase tracking-[0.15em] text-surface-500">
+        And more
+      </span>
+    </div>
+  </div>
+
+  <!-- Carousel: full-width infinite marquee -->
+  <div class="relative mt-6 overflow-hidden opacity-0" data-carousel>
+    <!-- Gradient masks: left and right fade -->
+    <div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-24 bg-gradient-to-r from-surface-950 to-transparent sm:w-32" />
+    <div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-surface-950 to-transparent sm:w-32" />
+
+    <!-- Marquee track -->
+    <div class="carousel-track flex w-max gap-4 py-4" aria-label="Additional features">
+      <!-- First set of cards -->
+      {
+        carouselFeatures.map((feature, i) => (
+          <div class="group relative w-64 shrink-0 overflow-hidden rounded-lg border border-dashed border-surface-600/60 bg-gradient-to-b from-surface-900/60 to-surface-950/40 p-5 transition-all duration-500 hover:border-accent-500/40 hover:shadow-[0_0_24px_rgba(32,168,168,0.06)]">
+            <div class="relative mb-3.5 inline-block">
+              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/[0.08] ring-1 ring-accent-500/20 transition-all duration-500 group-hover:bg-accent-500/[0.14] group-hover:ring-accent-500/35 group-hover:shadow-[0_0_14px_rgba(32,168,168,0.12)]">
+                <svg class="h-5 w-5 text-accent-400 transition-all duration-500 group-hover:text-accent-300 group-hover:drop-shadow-[0_0_4px_rgba(32,168,168,0.4)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                  <Fragment set:html={feature.icon} />
+                </svg>
+              </div>
+              <div class="absolute -right-0.5 -top-0.5 h-1 w-1 rounded-full bg-accent-500/50 transition-colors duration-300 group-hover:bg-accent-400" />
+            </div>
+            <h3 class="font-display text-sm font-semibold tracking-tight text-surface-100 transition-colors duration-300 group-hover:text-surface-50">{feature.title}</h3>
+            <p class="mt-1.5 text-xs leading-relaxed text-surface-500 transition-colors duration-300 group-hover:text-surface-400">
+              {feature.description}
+            </p>
+          </div>
+        ))
+      }
+      <!-- Duplicate set for seamless loop -->
+      {
+        carouselFeatures.map((feature, i) => (
+          <div class="group relative w-64 shrink-0 overflow-hidden rounded-lg border border-dashed border-surface-600/60 bg-gradient-to-b from-surface-900/60 to-surface-950/40 p-5 transition-all duration-500 hover:border-accent-500/40 hover:shadow-[0_0_24px_rgba(32,168,168,0.06)]" aria-hidden="true">
+            <div class="relative mb-3.5 inline-block">
+              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/[0.08] ring-1 ring-accent-500/20 transition-all duration-500 group-hover:bg-accent-500/[0.14] group-hover:ring-accent-500/35 group-hover:shadow-[0_0_14px_rgba(32,168,168,0.12)]">
+                <svg class="h-5 w-5 text-accent-400 transition-all duration-500 group-hover:text-accent-300 group-hover:drop-shadow-[0_0_4px_rgba(32,168,168,0.4)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                  <Fragment set:html={feature.icon} />
+                </svg>
+              </div>
+              <div class="absolute -right-0.5 -top-0.5 h-1 w-1 rounded-full bg-accent-500/50 transition-colors duration-300 group-hover:bg-accent-400" />
+            </div>
+            <h3 class="font-display text-sm font-semibold tracking-tight text-surface-100 transition-colors duration-300 group-hover:text-surface-50">{feature.title}</h3>
+            <p class="mt-1.5 text-xs leading-relaxed text-surface-500 transition-colors duration-300 group-hover:text-surface-400">
+              {feature.description}
+            </p>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>
+
+<script>
+  // Stagger animation for hero grid on scroll
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('stagger-visible');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('[data-stagger]').forEach((el) => observer.observe(el));
+
+  // Carousel fade-in on scroll
+  const carouselEl = document.querySelector('[data-carousel]');
+  if (carouselEl) {
+    const co = new IntersectionObserver((entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.remove('opacity-0');
+          e.target.classList.add('animate-fade-in');
+          co.unobserve(e.target);
+        }
+      });
+    }, { threshold: 0.05 });
+    co.observe(carouselEl);
+  }
+</script>
+
+<style>
+  .watermark-left {
+    transform: rotate(-12deg) scale(1);
+  }
+  .watermark-right {
+    transform: rotate(12deg) scale(1);
+  }
+  .feature-card:hover .watermark-left {
+    transform: rotate(-10deg) scale(1.12);
+  }
+  .feature-card:hover .watermark-right {
+    transform: rotate(10deg) scale(1.12);
+  }
+</style>
diff --git a/apps/website/src/components/FeaturedBlogPost.astro b/apps/website/src/components/FeaturedBlogPost.astro
new file mode 100644
index 0000000..1487a42
--- /dev/null
+++ b/apps/website/src/components/FeaturedBlogPost.astro
@@ -0,0 +1,87 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  pubDate: Date;
+  slug: string;
+  tags?: string[];
+  heroImage?: string;
+}
+
+const { title, description, pubDate, slug, tags = [], heroImage } = Astro.props;
+
+const formattedDate = pubDate.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+---
+
+<a
+  href={`/iptvnator/blog/${slug}/`}
+  class="card-dotted group block overflow-hidden"
+>
+  <div class="grid items-center gap-8 md:grid-cols-2">
+    <!-- Thumbnail -->
+    <div class="overflow-hidden rounded-lg -mx-6 -mt-6 md:-my-6 md:-ml-6 md:mr-0">
+      {heroImage ? (
+        <img
+          src={heroImage}
+          alt=""
+          class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+          loading="lazy"
+        />
+      ) : (
+        <div class="flex aspect-video w-full items-center justify-center bg-gradient-to-br from-surface-800 to-surface-900">
+          <img
+            src="/iptvnator/favicon.ico"
+            alt=""
+            class="h-12 w-12 opacity-20"
+          />
+        </div>
+      )}
+    </div>
+
+    <!-- Content -->
+    <div class="py-2">
+      <div class="flex items-center gap-2">
+        <span class="font-mono text-[10px] uppercase tracking-[0.15em] text-accent-500">Featured</span>
+        <span class="text-surface-700">&middot;</span>
+        <time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
+          {formattedDate}
+        </time>
+      </div>
+
+      {tags.length > 0 && (
+        <div class="mt-2 flex flex-wrap gap-1.5">
+          {tags.map((tag) => (
+            <span class="rounded-full border border-dashed border-accent-500/30 px-2 py-0.5 text-xs text-accent-400">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <h3 class="mt-4 font-display text-2xl font-bold tracking-tight text-surface-50 transition-colors duration-200 group-hover:text-accent-400 sm:text-3xl">
+        {title}
+      </h3>
+
+      <p class="mt-3 text-sm leading-relaxed text-surface-400">
+        {description}
+      </p>
+
+      <span class="mt-5 inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.1em] text-accent-500 transition-colors group-hover:text-accent-400">
+        Read more
+        <svg
+          class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+        </svg>
+      </span>
+    </div>
+  </div>
+</a>
diff --git a/apps/website/src/components/Footer.astro b/apps/website/src/components/Footer.astro
new file mode 100644
index 0000000..27dfc8d
--- /dev/null
+++ b/apps/website/src/components/Footer.astro
@@ -0,0 +1,114 @@
+---
+import footerWatermark from '../assets/footer-watermark.png';
+
+const socialLinks = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com/4gray/iptvnator',
+    icon: 'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
+  },
+  {
+    label: 'Telegram',
+    href: 'https://t.me/iptvnator',
+    icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.03-1.99 1.27-5.62 3.72-.53.36-1.01.54-1.44.53-.47-.01-1.38-.27-2.06-.49-.83-.27-1.49-.42-1.43-.88.03-.24.37-.49 1.02-.74 3.99-1.74 6.65-2.89 7.99-3.44 3.81-1.58 4.6-1.86 5.12-1.87.11 0 .37.03.54.17.14.12.18.28.2.45-.01.06.01.24 0 .38z',
+  },
+  {
+    label: 'Bluesky',
+    href: 'https://bsky.app/profile/4gray.bsky.social',
+    icon: 'M13.202 10.857c2.752 2.066 5.711 6.254 6.798 8.502 1.087-2.248 4.046-6.436 6.798-8.502 1.985-1.49 5.202-2.644 5.202 1.026 0 .733-.42 6.157-.667 7.038-.857 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.197-7.279-1.304-7.847-2.97-.104-.305-.153-.448-.153-.327 0-.121-.049.021-.153.327-.567 1.666-2.782 8.166-7.847 2.97-2.667-2.736-1.432-5.473 3.422-6.299-2.777.473-5.899-.308-6.755-3.37-.246-.881-.667-6.305-.667-7.038 0-3.67 3.217-2.517 5.202-1.026Z',
+  },
+  {
+    label: 'Sponsor',
+    href: 'https://ko-fi.com/4gray',
+    icon: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+  },
+];
+---
+
+<footer class="relative overflow-hidden border-t border-dashed border-surface-700/60">
+  <div class="pointer-events-none absolute inset-0">
+    <div class="absolute -bottom-32 -right-16 h-[28rem] w-[28rem] rounded-full bg-accent-500/[0.07] blur-3xl"></div>
+    <div class="absolute -bottom-24 right-2 h-[23rem] w-[23rem]">
+      <img
+        src={footerWatermark.src}
+        alt=""
+        aria-hidden="true"
+        class="footer-watermark h-full w-full object-contain opacity-[0.075] grayscale"
+        loading="lazy"
+      />
+    </div>
+  </div>
+
+  <div class="relative z-10 mx-auto max-w-6xl px-6 py-16">
+    <div class="flex flex-col items-center gap-10 md:flex-row md:justify-between">
+      <!-- Logo & description -->
+      <div class="text-center md:text-left">
+        <div class="flex items-center justify-center gap-2.5 md:justify-start">
+          <img
+            src="/iptvnator/favicon.ico"
+            alt="IPTVnator logo"
+            class="h-6 w-6"
+          />
+          <span class="font-display text-lg font-semibold text-surface-100">IPTVnator</span>
+        </div>
+        <p class="mt-2 text-sm text-surface-500">
+          Open-source IPTV player for everyone.
+        </p>
+      </div>
+
+      <!-- Social links -->
+      <div class="flex items-center gap-2">
+        {
+          socialLinks.map((link) => (
+            <a
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="rounded-lg border border-transparent p-2.5 text-surface-600 transition-all duration-200 hover:border-surface-700/60 hover:text-accent-400"
+              aria-label={link.label}
+            >
+              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d={link.icon} />
+              </svg>
+            </a>
+          ))
+        }
+      </div>
+    </div>
+
+    <div class="mt-10 flex flex-col items-center justify-between gap-4 border-t border-dashed border-surface-700/60 pt-8 md:flex-row">
+      <p class="font-mono text-[11px] text-surface-600">
+        MIT License. Built with <a href="https://astro.build" class="text-surface-500 transition-colors hover:text-accent-400">Astro</a>.
+      </p>
+      <p class="font-mono text-[11px] text-surface-600">
+        IPTVnator does not provide any playlists or content.
+      </p>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .footer-watermark {
+    transform: rotate(-14deg) scale(1.06);
+    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
+    mix-blend-mode: screen;
+    animation: footerMarkFloat 11s ease-in-out infinite;
+  }
+
+  @keyframes footerMarkFloat {
+    0%, 100% {
+      transform: rotate(-14deg) translate3d(0, 0, 0) scale(1.06);
+      opacity: 0.065;
+    }
+    50% {
+      transform: rotate(-11deg) translate3d(-12px, -10px, 0) scale(1.1);
+      opacity: 0.09;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .footer-watermark {
+      animation: none;
+    }
+  }
+</style>
diff --git a/apps/website/src/components/Header.astro b/apps/website/src/components/Header.astro
new file mode 100644
index 0000000..ee13910
--- /dev/null
+++ b/apps/website/src/components/Header.astro
@@ -0,0 +1,147 @@
+---
+const navLinks = [
+  { label: 'Features', href: '/iptvnator/#features' },
+  { label: 'Screenshots', href: '/iptvnator/#screenshots' },
+  { label: 'Download', href: '/iptvnator/#download' },
+  { label: 'Blog', href: '/iptvnator/blog/' },
+];
+---
+
+<header
+  id="site-header"
+  class="fixed top-0 z-50 w-full transition-all duration-500"
+>
+  <div class="absolute inset-0 border-b border-surface-700/0 bg-surface-950/0 backdrop-blur-none transition-all duration-500" id="header-bg"></div>
+
+  <nav class="relative mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
+    <!-- Logo -->
+    <a href="/iptvnator/" class="flex items-center gap-3 group">
+      <img
+        src="/iptvnator/favicon.ico"
+        alt="IPTVnator logo"
+        class="h-7 w-7 transition-transform duration-300 group-hover:scale-110"
+      />
+      <span class="font-display text-xl font-semibold tracking-tight text-surface-50">
+        IPTVnator
+      </span>
+    </a>
+
+    <!-- Desktop nav -->
+    <div class="hidden items-center gap-8 md:flex">
+      {
+        navLinks.map((link) => (
+          <a
+            href={link.href}
+            class="text-[13px] font-medium uppercase tracking-[0.12em] text-surface-400 transition-colors duration-200 hover:text-accent-400"
+          >
+            {link.label}
+          </a>
+        ))
+      }
+    </div>
+
+    <!-- Right side actions -->
+    <div class="hidden items-center gap-4 md:flex">
+      <a
+        href="https://github.com/4gray/iptvnator"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-surface-500 transition-colors hover:text-surface-200"
+        aria-label="GitHub"
+      >
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+        </svg>
+      </a>
+      <a
+        href="https://github.com/4gray/iptvnator/releases/latest"
+        class="rounded-lg border border-accent-500/30 bg-accent-500/10 px-4 py-2 text-[13px] font-medium text-accent-400 transition-all duration-200 hover:border-accent-400/50 hover:bg-accent-500/20 hover:text-accent-300"
+      >
+        Download
+      </a>
+    </div>
+
+    <!-- Mobile menu button -->
+    <button
+      id="mobile-menu-btn"
+      class="inline-flex items-center justify-center rounded-lg p-2 text-surface-400 transition-colors hover:text-surface-100 md:hidden"
+      aria-label="Toggle menu"
+    >
+      <svg id="menu-icon-open" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+      <svg id="menu-icon-close" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </nav>
+
+  <!-- Mobile menu -->
+  <div
+    id="mobile-menu"
+    class="hidden border-t border-dashed border-surface-700/60 bg-surface-950/98 backdrop-blur-2xl md:hidden"
+  >
+    <div class="space-y-1 px-6 py-5">
+      {
+        navLinks.map((link) => (
+          <a
+            href={link.href}
+            class="block rounded-lg px-3 py-2.5 text-[13px] font-medium uppercase tracking-[0.12em] text-surface-400 transition-colors hover:bg-surface-800/50 hover:text-accent-400"
+          >
+            {link.label}
+          </a>
+        ))
+      }
+      <div class="flex items-center gap-3 pt-3">
+        <a
+          href="https://github.com/4gray/iptvnator"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center gap-2 rounded-lg px-3 py-2.5 text-[13px] font-medium text-surface-400 transition-colors hover:text-surface-200"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          GitHub
+        </a>
+        <a
+          href="https://github.com/4gray/iptvnator/releases/latest"
+          class="flex-1 rounded-lg border border-accent-500/30 bg-accent-500/10 px-3 py-2.5 text-center text-[13px] font-medium text-accent-400 transition-all hover:border-accent-400/50 hover:bg-accent-500/20"
+        >
+          Download
+        </a>
+      </div>
+    </div>
+  </div>
+</header>
+
+<script>
+  // Mobile menu toggle
+  const btn = document.getElementById('mobile-menu-btn');
+  const menu = document.getElementById('mobile-menu');
+  const iconOpen = document.getElementById('menu-icon-open');
+  const iconClose = document.getElementById('menu-icon-close');
+
+  btn?.addEventListener('click', () => {
+    const isHidden = menu?.classList.toggle('hidden');
+    iconOpen?.classList.toggle('hidden', !isHidden);
+    iconClose?.classList.toggle('hidden', isHidden);
+  });
+
+  // Header scroll effect
+  const header = document.getElementById('site-header');
+  const headerBg = document.getElementById('header-bg');
+  let lastScroll = 0;
+
+  window.addEventListener('scroll', () => {
+    const scroll = window.scrollY;
+    if (scroll > 50) {
+      headerBg?.classList.remove('border-surface-700/0', 'bg-surface-950/0', 'backdrop-blur-none');
+      headerBg?.classList.add('border-surface-700/40', 'bg-surface-950/85', 'backdrop-blur-xl');
+    } else {
+      headerBg?.classList.add('border-surface-700/0', 'bg-surface-950/0', 'backdrop-blur-none');
+      headerBg?.classList.remove('border-surface-700/40', 'bg-surface-950/85', 'backdrop-blur-xl');
+    }
+    lastScroll = scroll;
+  });
+</script>
diff --git a/apps/website/src/components/Hero.astro b/apps/website/src/components/Hero.astro
new file mode 100644
index 0000000..6070ea0
--- /dev/null
+++ b/apps/website/src/components/Hero.astro
@@ -0,0 +1,189 @@
+---
+import { Image } from 'astro:assets';
+import heroImg from '../assets/screenshots/hero-dark.png';
+import mascotImg from '../assets/illustrations/iptvnator-1-mascot.png';
+
+const heroSocialLinks = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com/4gray/iptvnator',
+    icon: 'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
+  },
+  {
+    label: 'Telegram',
+    href: 'https://t.me/iptvnator',
+    icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.03-1.99 1.27-5.62 3.72-.53.36-1.01.54-1.44.53-.47-.01-1.38-.27-2.06-.49-.83-.27-1.49-.42-1.43-.88.03-.24.37-.49 1.02-.74 3.99-1.74 6.65-2.89 7.99-3.44 3.81-1.58 4.6-1.86 5.12-1.87.11 0 .37.03.54.17.14.12.18.28.2.45-.01.06.01.24 0 .38z',
+  },
+  {
+    label: 'GitHub Sponsors',
+    href: 'https://github.com/sponsors/4gray',
+    icon: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+  },
+  {
+    label: 'Ko-fi',
+    href: 'https://ko-fi.com/4gray',
+    icon: 'M4 5h12a4 4 0 0 1 0 8h-1v2.5A4.5 4.5 0 0 1 10.5 20h-1A4.5 4.5 0 0 1 5 15.5V13H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm11 6h1a2 2 0 0 0 0-4h-1v4Z',
+  },
+];
+---
+
+<section class="relative overflow-hidden pt-36 pb-24 sm:pt-44 sm:pb-32">
+  <!-- Ambient glow -->
+  <div class="pointer-events-none absolute top-0 left-1/2 h-[600px] w-[900px] -translate-x-1/2 -translate-y-1/3 rounded-full bg-accent-500/[0.06] blur-[120px]"></div>
+  <div class="pointer-events-none absolute inset-x-0 top-8 z-0 overflow-hidden opacity-35 mix-blend-screen">
+    <img
+      src="/iptvnator/illustrations/hero-ambient-broadcast-waves.svg"
+      alt=""
+      aria-hidden="true"
+      class="mx-auto h-[18rem] w-[140%] max-w-none object-cover md:h-[22rem] md:w-full lg:h-[26rem]"
+      loading="eager"
+    />
+  </div>
+
+  <div class="relative mx-auto max-w-6xl px-6">
+    <div class="pointer-events-none absolute -top-4 -right-12 z-0 hidden w-[18rem] opacity-75 blur-[0.2px] md:block lg:w-[22rem] xl:w-[25rem]">
+      <div class="absolute inset-0 rounded-full bg-accent-500/[0.16] blur-3xl"></div>
+      <Image
+        src={mascotImg}
+        alt=""
+        aria-hidden="true"
+        width={520}
+        class="relative w-full object-contain saturate-110 animate-glow-pulse"
+      />
+    </div>
+
+    <!-- Top section: editorial intro -->
+    <div class="mx-auto max-w-3xl text-center">
+      <!-- Mono label -->
+      <div class="mb-8 inline-flex items-center gap-3">
+        <span class="h-px w-8 bg-accent-500/50"></span>
+        <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Open source IPTV player</span>
+        <span class="h-px w-8 bg-accent-500/50"></span>
+      </div>
+
+      <!-- Headline with serif italic -->
+      <h1 class="font-display text-5xl font-bold tracking-tight text-surface-50 sm:text-7xl lg:text-8xl">
+        Watch, <em class="font-medium not-italic text-accent-400" style="font-style: italic;">your way.</em>
+      </h1>
+
+      <p class="mx-auto mt-8 max-w-xl text-lg leading-relaxed text-surface-400">
+        A cross-platform player for M3U/M3U8 playlists, Xtream Codes API, and
+        Stalker portals. Desktop app and Progressive Web App.
+      </p>
+
+      <!-- CTA: Big TV-effect download button -->
+      <div class="mt-12 flex flex-col items-center gap-6">
+        <a
+          href="https://github.com/4gray/iptvnator/releases/latest"
+          class="btn-tv group rounded-2xl px-10 py-6 sm:px-14 sm:py-7"
+        >
+          <!-- TV effect layers -->
+          <span class="tv-scanline"></span>
+          <span class="tv-noise"></span>
+          <span class="tv-vignette"></span>
+
+          <!-- Button content -->
+          <span class="relative z-10 flex items-center gap-4">
+            <svg class="h-6 w-6 text-accent-400 transition-transform duration-300 group-hover:translate-y-0.5 sm:h-7 sm:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            <span class="flex flex-col items-start">
+              <span class="btn-tv-text font-display text-2xl font-bold tracking-tight text-surface-50 sm:text-3xl">
+                Download <em class="font-medium text-accent-400" style="font-style: italic;">for Desktop</em>
+              </span>
+              <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-surface-500">
+                macOS · Windows · Linux
+              </span>
+            </span>
+          </span>
+        </a>
+
+        <!-- Secondary: Web app link -->
+        <a
+          href="https://iptvnator.vercel.app"
+          class="group inline-flex items-center gap-2.5 rounded-lg border border-dashed border-surface-600/60 px-7 py-3.5 text-sm font-medium text-surface-400 transition-all duration-300 hover:border-accent-500/30 hover:text-accent-400"
+        >
+          <svg class="h-4 w-4 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+          Or try the Web App
+          <svg class="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </a>
+      </div>
+
+      <!-- Shields badges -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <img
+          src="https://img.shields.io/github/stars/4gray/iptvnator?style=flat&color=20a8a8&labelColor=1a1a17"
+          alt="GitHub stars"
+          class="h-5"
+          loading="lazy"
+        />
+        <img
+          src="https://img.shields.io/github/v/release/4gray/iptvnator?style=flat&color=20a8a8&labelColor=1a1a17"
+          alt="Latest release"
+          class="h-5"
+          loading="lazy"
+        />
+        <img
+          src="https://img.shields.io/github/downloads/4gray/iptvnator/total?style=flat&color=20a8a8&labelColor=1a1a17"
+          alt="Total downloads"
+          class="h-5"
+          loading="lazy"
+        />
+      </div>
+
+      <div class="mt-4 flex flex-wrap items-center justify-center gap-2.5">
+        {heroSocialLinks.map((link) => (
+          <a
+            href={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="group inline-flex items-center gap-2 rounded-full border border-dashed border-surface-700/70 bg-surface-900/40 px-3 py-1.5 text-[11px] font-mono uppercase tracking-[0.08em] text-surface-400 transition-all duration-300 hover:border-accent-500/40 hover:bg-accent-500/[0.06] hover:text-accent-300"
+            aria-label={link.label}
+            title={link.label}
+          >
+            <svg class="h-3.5 w-3.5 text-surface-500 transition-colors duration-300 group-hover:text-accent-300" fill="currentColor" viewBox="0 0 24 24">
+              <path d={link.icon} />
+            </svg>
+            <span>{link.label}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+
+    <!-- Hero screenshot with window chrome frame -->
+    <div class="relative mx-auto mt-20 max-w-5xl">
+      <!-- Ambient glow behind image -->
+      <div class="absolute -inset-8 rounded-2xl bg-accent-500/[0.04] blur-3xl"></div>
+
+      <!-- Window chrome -->
+      <div class="relative overflow-hidden rounded-xl border border-surface-700/60 bg-surface-900 shadow-2xl shadow-black/40">
+        <!-- Title bar -->
+        <div class="flex items-center gap-2 border-b border-dashed border-surface-700/60 px-4 py-2.5">
+          <div class="flex gap-1.5">
+            <span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span>
+            <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70"></span>
+            <span class="h-2.5 w-2.5 rounded-full bg-green-500/70"></span>
+          </div>
+          <span class="ml-2 font-mono text-[11px] text-surface-500">IPTVnator</span>
+        </div>
+
+        <!-- Scanline overlay -->
+        <div class="relative">
+          <div class="pointer-events-none absolute inset-0 z-10 overflow-hidden opacity-[0.03]">
+            <div class="h-full w-full animate-scan" style="background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.5) 2px, rgba(255,255,255,0.5) 4px);"></div>
+          </div>
+          <Image
+            src={heroImg}
+            alt="IPTVnator application interface showing dark theme with channel list and video player"
+            width={1200}
+            class="w-full"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/components/ScreenshotShowcase.astro b/apps/website/src/components/ScreenshotShowcase.astro
new file mode 100644
index 0000000..ef5c773
--- /dev/null
+++ b/apps/website/src/components/ScreenshotShowcase.astro
@@ -0,0 +1,128 @@
+---
+import { Image } from 'astro:assets';
+import playerImg from '../assets/screenshots/player.png';
+import epgImg from '../assets/screenshots/epg.png';
+import playlistsImg from '../assets/screenshots/playlists.png';
+import settingsImg from '../assets/screenshots/settings.png';
+import uploadFileImg from '../assets/screenshots/upload-file.png';
+
+const tabs = [
+  { id: 'player', label: 'Player', image: playerImg, alt: 'IPTVnator video player interface' },
+  { id: 'epg', label: 'EPG Guide', image: epgImg, alt: 'Electronic program guide view' },
+  { id: 'playlists', label: 'Playlists', image: playlistsImg, alt: 'Playlist management screen' },
+  { id: 'settings', label: 'Settings', image: settingsImg, alt: 'Application settings' },
+  { id: 'upload', label: 'Add Playlist', image: uploadFileImg, alt: 'Add playlist dialog' },
+];
+---
+
+<section id="screenshots" class="relative py-28">
+  <hr class="section-divider mb-28" />
+
+  <div class="mx-auto max-w-6xl px-6">
+    <!-- Editorial header: right-aligned for variety -->
+    <div class="ml-auto max-w-xl text-right">
+      <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">
+        Interface
+      </span>
+      <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl lg:text-5xl">
+        See it <em class="font-medium text-accent-400" style="font-style: italic;">in action</em>
+      </h2>
+      <p class="mt-4 text-lg text-surface-400">
+        A clean, intuitive interface designed for the best viewing experience.
+      </p>
+    </div>
+
+    <div class="mt-14">
+      <!-- Tab buttons with underline style -->
+      <div class="flex flex-wrap justify-center gap-1 rounded-lg border border-dashed border-surface-700/60 bg-surface-900/50 p-1.5" role="tablist">
+        {
+          tabs.map((tab, i) => (
+            <button
+              role="tab"
+              aria-selected={i === 0 ? 'true' : 'false'}
+              data-tab={tab.id}
+              class:list={[
+                'screenshot-tab rounded-md px-5 py-2 font-mono text-xs uppercase tracking-[0.1em] transition-all duration-200',
+                i === 0
+                  ? 'bg-accent-500/15 text-accent-400'
+                  : 'text-surface-500 hover:text-surface-300',
+              ]}
+            >
+              {tab.label}
+            </button>
+          ))
+        }
+      </div>
+
+      <!-- Screenshots with window chrome -->
+      <div class="relative mt-8">
+        {
+          tabs.map((tab, i) => (
+            <div
+              data-panel={tab.id}
+              class:list={[
+                'screenshot-panel transition-opacity duration-300',
+                i !== 0 && 'hidden',
+              ]}
+            >
+              <div class="relative mx-auto max-w-4xl">
+                <!-- Ambient glow -->
+                <div class="absolute -inset-6 rounded-2xl bg-accent-500/[0.03] blur-2xl" />
+
+                <!-- Window chrome -->
+                <div class="relative overflow-hidden rounded-xl border border-surface-700/60 bg-surface-900 shadow-2xl shadow-black/30">
+                  <div class="flex items-center gap-2 border-b border-dashed border-surface-700/60 px-4 py-2.5">
+                    <div class="flex gap-1.5">
+                      <span class="h-2.5 w-2.5 rounded-full bg-red-500/70" />
+                      <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
+                      <span class="h-2.5 w-2.5 rounded-full bg-green-500/70" />
+                    </div>
+                    <span class="ml-2 font-mono text-[11px] text-surface-500">{tab.label}</span>
+                  </div>
+                  <Image
+                    src={tab.image}
+                    alt={tab.alt}
+                    width={1000}
+                    class="w-full"
+                  />
+                </div>
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  const tabs = document.querySelectorAll('.screenshot-tab');
+  const panels = document.querySelectorAll('.screenshot-panel');
+
+  tabs.forEach((tab) => {
+    tab.addEventListener('click', () => {
+      const target = (tab as HTMLElement).dataset.tab;
+
+      // Reset all tabs
+      tabs.forEach((t) => {
+        t.classList.remove('bg-accent-500/15', 'text-accent-400');
+        t.classList.add('text-surface-500');
+        t.setAttribute('aria-selected', 'false');
+      });
+
+      // Activate clicked tab
+      tab.classList.add('bg-accent-500/15', 'text-accent-400');
+      tab.classList.remove('text-surface-500');
+      tab.setAttribute('aria-selected', 'true');
+
+      // Show/hide panels
+      panels.forEach((panel) => {
+        if ((panel as HTMLElement).dataset.panel === target) {
+          panel.classList.remove('hidden');
+        } else {
+          panel.classList.add('hidden');
+        }
+      });
+    });
+  });
+</script>
diff --git a/apps/website/src/components/SupportSection.astro b/apps/website/src/components/SupportSection.astro
new file mode 100644
index 0000000..e354d8c
--- /dev/null
+++ b/apps/website/src/components/SupportSection.astro
@@ -0,0 +1,86 @@
+---
+const supportLinks = [
+  {
+    label: 'Give a Star',
+    href: 'https://github.com/4gray/iptvnator/stargazers',
+    description: 'The fastest way to help visibility',
+    icon: 'M12 2.5l2.94 5.96 6.58.96-4.76 4.64 1.12 6.56L12 17.53 6.12 20.62l1.12-6.56-4.76-4.64 6.58-.96L12 2.5z',
+  },
+  {
+    label: 'GitHub Sponsors',
+    href: 'https://github.com/sponsors/4gray',
+    description: 'Monthly support keeps development steady',
+    icon: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+  },
+  {
+    label: 'Ko-fi',
+    href: 'https://ko-fi.com/4gray',
+    description: 'One-time donations are always appreciated',
+    icon: 'M3 6.5A2.5 2.5 0 0 1 5.5 4h10A2.5 2.5 0 0 1 18 6.5V8h1.5A2.5 2.5 0 0 1 22 10.5v1A2.5 2.5 0 0 1 19.5 14H18v1.5A4.5 4.5 0 0 1 13.5 20h-6A4.5 4.5 0 0 1 3 15.5v-9zm15 5.5h1.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H18V12z',
+  },
+];
+---
+
+<section class="relative py-28">
+  <hr class="section-divider mb-24" />
+
+  <div class="pointer-events-none absolute inset-x-0 top-12 mx-auto h-56 w-[42rem] rounded-full bg-accent-500/[0.05] blur-3xl"></div>
+
+  <div class="relative mx-auto max-w-6xl px-6">
+    <div class="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
+      <div class="card-dotted relative overflow-hidden rounded-2xl bg-surface-900/35">
+        <div class="pointer-events-none absolute -top-12 -right-14 hidden h-52 w-52 opacity-35 mix-blend-screen md:block">
+          <img
+            src="/iptvnator/illustrations/support-open-source-signal.svg"
+            alt=""
+            aria-hidden="true"
+            class="h-full w-full object-contain"
+            loading="lazy"
+          />
+        </div>
+
+        <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Support</span>
+        <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl">
+          IPTVnator stays <em class="font-medium text-accent-400" style="font-style: italic;">open source</em>
+        </h2>
+        <p class="mt-5 max-w-2xl text-base leading-relaxed text-surface-300 md:pr-24">
+          IPTVnator was built as an open-source project and will remain one. If it helps you, your support keeps the
+          project healthy and the motivation high for continued improvements, fixes, and long-term maintenance.
+        </p>
+
+        <div class="mt-8 grid gap-3 sm:grid-cols-3">
+          {supportLinks.map((item) => (
+            <a
+              href={item.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group flex h-full flex-col rounded-xl border border-dashed border-surface-700/70 bg-surface-950/50 p-4 transition-all duration-300 hover:border-accent-500/40 hover:bg-accent-500/[0.06]"
+            >
+              <div class="flex min-h-[3rem] items-center gap-3 text-surface-200">
+                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-accent-500/25 bg-accent-500/10">
+                  <svg class="h-5 w-5 text-accent-300 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
+                    <path d={item.icon} />
+                  </svg>
+                </span>
+                <span class="text-sm font-semibold text-surface-100">{item.label}</span>
+              </div>
+              <p class="mt-3 text-sm leading-relaxed text-surface-400">{item.description}</p>
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <aside class="card-dotted rounded-2xl bg-surface-900/25">
+        <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">Disclaimer</span>
+        <p class="mt-4 text-sm leading-relaxed text-surface-300">
+          IPTVnator is a media player application. It does not provide, host, or sell any digital media content,
+          playlists, channels, or EPG data.
+        </p>
+        <p class="mt-3 text-sm leading-relaxed text-surface-400">
+          Any channel names, logos, metadata, or playlists shown in screenshots are for demonstration purposes only.
+          You are responsible for the sources you use and for complying with local laws and rights.
+        </p>
+      </aside>
+    </div>
+  </div>
+</section>
diff --git a/apps/website/src/components/blog/Alert.astro b/apps/website/src/components/blog/Alert.astro
new file mode 100644
index 0000000..4d5b5da
--- /dev/null
+++ b/apps/website/src/components/blog/Alert.astro
@@ -0,0 +1,44 @@
+---
+interface Props {
+  type?: 'info' | 'success' | 'warning';
+  title?: string;
+}
+
+const { type = 'info', title } = Astro.props;
+
+const styles = {
+  info: {
+    wrapper: 'border-accent-500/35 bg-accent-500/[0.07]',
+    icon: 'text-accent-300',
+    title: 'text-accent-200',
+  },
+  success: {
+    wrapper: 'border-emerald-500/35 bg-emerald-500/[0.08]',
+    icon: 'text-emerald-300',
+    title: 'text-emerald-200',
+  },
+  warning: {
+    wrapper: 'border-amber-500/35 bg-amber-500/[0.09]',
+    icon: 'text-amber-300',
+    title: 'text-amber-200',
+  },
+} as const;
+
+const variant = styles[type];
+---
+
+<div class={`not-prose my-6 rounded-xl border border-dashed p-4 sm:p-5 ${variant.wrapper}`}>
+  <div class="flex items-start gap-3">
+    <span class={`mt-0.5 ${variant.icon}`} aria-hidden="true">
+      <svg class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v4.5m0 3h.008M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    </span>
+    <div class="min-w-0">
+      {title && <p class={`m-0 text-sm font-semibold ${variant.title}`}>{title}</p>}
+      <div class={`mt-1 text-sm leading-relaxed text-surface-200 [&_p]:my-0 [&_code]:rounded [&_code]:bg-surface-900/50 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs`}>
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/website/src/components/blog/BlogImageSlider.astro b/apps/website/src/components/blog/BlogImageSlider.astro
new file mode 100644
index 0000000..0811644
--- /dev/null
+++ b/apps/website/src/components/blog/BlogImageSlider.astro
@@ -0,0 +1,134 @@
+---
+interface SliderImage {
+  src: string;
+  alt: string;
+  caption?: string;
+}
+
+interface Props {
+  images: SliderImage[];
+  thumbPosition?: 'bottom' | 'right';
+  showArrows?: boolean;
+}
+
+const { images = [], thumbPosition = 'bottom', showArrows = true } = Astro.props;
+const sliderId = `slider-${Math.random().toString(36).slice(2, 10)}`;
+---
+
+{images.length > 0 && (
+  <div
+    class="not-prose my-6"
+    data-blog-slider={sliderId}
+    tabindex="0"
+  >
+    <div class="group relative overflow-hidden rounded-xl border border-dashed border-surface-700/70 bg-surface-900/50">
+      <img
+        src={images[0].src}
+        alt={images[0].alt}
+        data-slider-main-img
+        class="aspect-video w-full object-cover"
+        loading="lazy"
+      />
+
+      {showArrows && images.length > 1 && (
+        <>
+          <button
+            type="button"
+            class="slider-prev absolute left-2 top-1/2 -translate-y-1/2 rounded-md border border-surface-700/70 bg-surface-950/70 px-2 py-1.5 text-surface-200 transition-colors hover:text-accent-300"
+            aria-label="Previous image"
+          >
+            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="slider-next absolute right-2 top-1/2 -translate-y-1/2 rounded-md border border-surface-700/70 bg-surface-950/70 px-2 py-1.5 text-surface-200 transition-colors hover:text-accent-300"
+            aria-label="Next image"
+          >
+            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </>
+      )}
+    </div>
+
+    <p data-slider-caption class="mt-2 text-sm text-surface-500">{images[0].caption ?? ''}</p>
+
+    {images.length > 1 && (
+      <div class="mt-3 flex gap-2 overflow-x-auto pb-1" role="tablist" aria-label="Image thumbnails">
+        {images.map((image, index) => (
+          <button
+            type="button"
+            data-slider-thumb
+            data-index={index}
+            data-src={image.src}
+            data-alt={image.alt}
+            data-caption={image.caption ?? ''}
+            class={`shrink-0 overflow-hidden rounded-md border ${index === 0 ? 'border-accent-500/60' : 'border-surface-700/70'} bg-surface-900/50 transition-all duration-200 hover:border-accent-500/50`}
+            aria-label={`Show image ${index + 1}`}
+            aria-selected={index === 0 ? 'true' : 'false'}
+          >
+            <img src={image.src} alt={image.alt} loading="lazy" class="h-12 w-20 object-cover sm:h-14 sm:w-24" />
+          </button>
+        ))}
+      </div>
+    )}
+  </div>
+)}
+
+<script>
+  const initBlogSliders = () => {
+    document.querySelectorAll('[data-blog-slider]').forEach((slider) => {
+      if (slider.getAttribute('data-bound') === 'true') return;
+      slider.setAttribute('data-bound', 'true');
+
+      const main = slider.querySelector('[data-slider-main-img]');
+      const caption = slider.querySelector('[data-slider-caption]');
+      const thumbs = Array.from(slider.querySelectorAll('[data-slider-thumb]'));
+      const prev = slider.querySelector('.slider-prev');
+      const next = slider.querySelector('.slider-next');
+
+      if (!main || thumbs.length === 0) return;
+
+      let current = 0;
+
+      const setActive = (idx) => {
+        current = (idx + thumbs.length) % thumbs.length;
+        const activeBtn = thumbs[current];
+        const src = activeBtn.getAttribute('data-src') || '';
+        const alt = activeBtn.getAttribute('data-alt') || '';
+        const cap = activeBtn.getAttribute('data-caption') || '';
+        main.setAttribute('src', src);
+        main.setAttribute('alt', alt);
+        if (caption) caption.textContent = cap;
+
+        thumbs.forEach((btn, i) => {
+          const selected = i === current;
+          btn.setAttribute('aria-selected', selected ? 'true' : 'false');
+          btn.classList.toggle('border-accent-500/60', selected);
+          btn.classList.toggle('border-surface-700/70', !selected);
+        });
+      };
+
+      thumbs.forEach((btn, i) => {
+        btn.addEventListener('click', () => setActive(i));
+      });
+
+      prev?.addEventListener('click', () => setActive(current - 1));
+      next?.addEventListener('click', () => setActive(current + 1));
+
+      slider.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowLeft') setActive(current - 1);
+        if (e.key === 'ArrowRight') setActive(current + 1);
+      });
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBlogSliders);
+  } else {
+    initBlogSliders();
+  }
+</script>
diff --git a/apps/website/src/components/blog/ChangeTable.astro b/apps/website/src/components/blog/ChangeTable.astro
new file mode 100644
index 0000000..3fefac3
--- /dev/null
+++ b/apps/website/src/components/blog/ChangeTable.astro
@@ -0,0 +1,34 @@
+---
+interface ChangeRow {
+  area: string;
+  change: string;
+  impact?: string;
+}
+
+interface Props {
+  rows: ChangeRow[];
+}
+
+const { rows = [] } = Astro.props;
+---
+
+<div class="not-prose my-6 overflow-x-auto rounded-xl border border-dashed border-surface-700/70 bg-surface-900/50">
+  <table class="w-full min-w-[560px] border-collapse text-left">
+    <thead>
+      <tr class="border-b border-dashed border-surface-700/60">
+        <th class="px-4 py-3 font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">Area</th>
+        <th class="px-4 py-3 font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">Change</th>
+        <th class="px-4 py-3 font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">Impact</th>
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map((row) => (
+        <tr class="border-b border-dashed border-surface-700/40 last:border-b-0">
+          <td class="px-4 py-3 text-sm font-semibold text-surface-200">{row.area}</td>
+          <td class="px-4 py-3 text-sm text-surface-300">{row.change}</td>
+          <td class="px-4 py-3 text-sm text-surface-400">{row.impact ?? '—'}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
diff --git a/apps/website/src/components/blog/CopyCommand.astro b/apps/website/src/components/blog/CopyCommand.astro
new file mode 100644
index 0000000..e6f96f0
--- /dev/null
+++ b/apps/website/src/components/blog/CopyCommand.astro
@@ -0,0 +1,43 @@
+---
+interface Props {
+  command: string;
+  title?: string;
+}
+
+const { command, title = 'Command' } = Astro.props;
+---
+
+<div class="not-prose my-6 rounded-xl border border-dashed border-surface-700/70 bg-surface-900/55 p-3">
+  <div class="mb-2 flex items-center justify-between">
+    <span class="font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">{title}</span>
+    <button class="copy-command-btn rounded-md border border-dashed border-surface-700/70 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.08em] text-surface-400 transition-colors hover:text-accent-300" data-command={command}>
+      Copy
+    </button>
+  </div>
+  <code class="block overflow-x-auto rounded-md bg-surface-950/70 px-3 py-2 font-mono text-sm text-accent-200">{command}</code>
+</div>
+
+<script>
+  const initCopyButtons = () => {
+    document.querySelectorAll('.copy-command-btn').forEach((btn) => {
+      if (btn.getAttribute('data-bound') === 'true') return;
+      btn.setAttribute('data-bound', 'true');
+      btn.addEventListener('click', async () => {
+        const cmd = btn.getAttribute('data-command');
+        if (!cmd) return;
+        await navigator.clipboard.writeText(cmd);
+        const prev = btn.textContent;
+        btn.textContent = 'Copied';
+        setTimeout(() => {
+          btn.textContent = prev || 'Copy';
+        }, 1400);
+      });
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCopyButtons);
+  } else {
+    initCopyButtons();
+  }
+</script>
diff --git a/apps/website/src/components/blog/FaqAccordion.astro b/apps/website/src/components/blog/FaqAccordion.astro
new file mode 100644
index 0000000..c10ac07
--- /dev/null
+++ b/apps/website/src/components/blog/FaqAccordion.astro
@@ -0,0 +1,26 @@
+---
+interface FaqItem {
+  q: string;
+  a: string;
+}
+
+interface Props {
+  items: FaqItem[];
+}
+
+const { items = [] } = Astro.props;
+---
+
+<div class="not-prose my-6 space-y-2">
+  {items.map((item) => (
+    <details class="group rounded-xl border border-dashed border-surface-700/70 bg-surface-900/45 px-4 py-3">
+      <summary class="cursor-pointer list-none">
+        <span class="flex items-center justify-between gap-3 text-sm font-semibold text-surface-100">
+          <span>{item.q}</span>
+          <span class="text-surface-500 transition-transform duration-200 group-open:rotate-45">+</span>
+        </span>
+      </summary>
+      <p class="mt-2 border-t border-dashed border-surface-700/60 pt-2 text-sm leading-relaxed text-surface-400">{item.a}</p>
+    </details>
+  ))}
+</div>
diff --git a/apps/website/src/components/blog/IconFeatureGrid.astro b/apps/website/src/components/blog/IconFeatureGrid.astro
new file mode 100644
index 0000000..fbbab36
--- /dev/null
+++ b/apps/website/src/components/blog/IconFeatureGrid.astro
@@ -0,0 +1,37 @@
+---
+interface FeatureItem {
+  title: string;
+  text: string;
+  icon?: 'spark' | 'shield' | 'speed' | 'playlist' | 'epg';
+}
+
+interface Props {
+  items: FeatureItem[];
+}
+
+const { items = [] } = Astro.props;
+
+const iconPaths = {
+  spark: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z',
+  shield: 'M12 2l7 4v6c0 5-3.4 9.7-7 10-3.6-.3-7-5-7-10V6l7-4z',
+  speed: 'M12 3v2m6.364.636l-1.414 1.414M21 12h-2m-.636 6.364l-1.414-1.414M12 21v-2m-6.364-.636l1.414-1.414M3 12h2m.636-6.364l1.414 1.414M15 12l-4 4',
+  playlist: 'M4 6h14M4 10h14M4 14h10M4 18h10M18 16l3 2-3 2v-4z',
+  epg: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
+} as const;
+---
+
+<div class="not-prose my-6 grid gap-3 sm:grid-cols-2">
+  {items.map((item) => (
+    <div class="rounded-xl border border-dashed border-surface-700/70 bg-surface-900/45 p-4">
+      <div class="mb-2.5 flex items-center gap-2.5">
+        <span class="flex h-7 w-7 items-center justify-center rounded-md border border-accent-500/25 bg-accent-500/[0.1]">
+          <svg class="h-3.5 w-3.5 text-accent-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
+            <path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[item.icon ?? 'spark']} />
+          </svg>
+        </span>
+        <h4 class="m-0 text-sm font-semibold text-surface-100">{item.title}</h4>
+      </div>
+      <p class="m-0 text-sm leading-relaxed text-surface-400">{item.text}</p>
+    </div>
+  ))}
+</div>
diff --git a/apps/website/src/components/blog/ImageGallery.astro b/apps/website/src/components/blog/ImageGallery.astro
new file mode 100644
index 0000000..7534204
--- /dev/null
+++ b/apps/website/src/components/blog/ImageGallery.astro
@@ -0,0 +1,99 @@
+---
+interface GalleryImage {
+  src: string;
+  alt: string;
+  caption?: string;
+}
+
+interface Props {
+  images: GalleryImage[];
+  columns?: 2 | 3 | 4;
+}
+
+const { images = [], columns = 3 } = Astro.props;
+
+const colClass = {
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-2 lg:grid-cols-3',
+  4: 'sm:grid-cols-2 lg:grid-cols-4',
+} as const;
+---
+
+<div class="not-prose my-6">
+  <div class={`grid gap-3 ${colClass[columns]}`}>
+    {images.map((img, idx) => (
+      <figure class="group overflow-hidden rounded-xl border border-dashed border-surface-700/70 bg-surface-900/45">
+        <button
+          type="button"
+          class="gallery-open block w-full"
+          data-src={img.src}
+          data-alt={img.alt}
+          data-caption={img.caption ?? ''}
+          aria-label={`Open image ${idx + 1}`}
+        >
+          <img
+            src={img.src}
+            alt={img.alt}
+            loading="lazy"
+            class="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-[1.02]"
+          />
+        </button>
+        {img.caption && <figcaption class="px-3 py-2 text-xs text-surface-500">{img.caption}</figcaption>}
+      </figure>
+    ))}
+  </div>
+</div>
+
+<div id="blog-gallery-lightbox" class="fixed inset-0 z-[80] hidden items-center justify-center bg-black/85 p-4" aria-hidden="true">
+  <button type="button" class="gallery-close absolute right-4 top-4 rounded-md border border-surface-600/60 bg-surface-900/70 px-2.5 py-1 text-xs text-surface-300">Close</button>
+  <figure class="max-h-[92vh] max-w-[92vw]">
+    <img id="blog-gallery-lightbox-img" src="" alt="" class="max-h-[82vh] max-w-[92vw] rounded-lg border border-surface-700/70 object-contain" />
+    <figcaption id="blog-gallery-lightbox-cap" class="mt-2 text-center text-sm text-surface-300"></figcaption>
+  </figure>
+</div>
+
+<script>
+  const initBlogGallery = () => {
+    const lightbox = document.getElementById('blog-gallery-lightbox');
+    const lightboxImg = document.getElementById('blog-gallery-lightbox-img');
+    const lightboxCap = document.getElementById('blog-gallery-lightbox-cap');
+    if (!lightbox || !lightboxImg || !lightboxCap) return;
+
+    document.querySelectorAll('.gallery-open').forEach((btn) => {
+      if (btn.getAttribute('data-bound') === 'true') return;
+      btn.setAttribute('data-bound', 'true');
+      btn.addEventListener('click', () => {
+        const src = btn.getAttribute('data-src') || '';
+        const alt = btn.getAttribute('data-alt') || '';
+        const caption = btn.getAttribute('data-caption') || '';
+        lightboxImg.setAttribute('src', src);
+        lightboxImg.setAttribute('alt', alt);
+        lightboxCap.textContent = caption;
+        lightbox.classList.remove('hidden');
+        lightbox.classList.add('flex');
+        lightbox.setAttribute('aria-hidden', 'false');
+      });
+    });
+
+    const close = () => {
+      lightbox.classList.add('hidden');
+      lightbox.classList.remove('flex');
+      lightbox.setAttribute('aria-hidden', 'true');
+      lightboxImg.setAttribute('src', '');
+    };
+
+    lightbox.querySelector('.gallery-close')?.addEventListener('click', close);
+    lightbox.addEventListener('click', (e) => {
+      if (e.target === lightbox) close();
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && lightbox.getAttribute('aria-hidden') === 'false') close();
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBlogGallery);
+  } else {
+    initBlogGallery();
+  }
+</script>
diff --git a/apps/website/src/components/blog/LinkCards.astro b/apps/website/src/components/blog/LinkCards.astro
new file mode 100644
index 0000000..632e80f
--- /dev/null
+++ b/apps/website/src/components/blog/LinkCards.astro
@@ -0,0 +1,51 @@
+---
+interface LinkItem {
+  label: string;
+  href: string;
+  hint?: string;
+  icon?: 'github' | 'telegram' | 'sponsor' | 'kofi' | 'download' | 'docs';
+}
+
+interface Props {
+  links: LinkItem[];
+}
+
+const { links = [] } = Astro.props;
+
+const iconPaths = {
+  github:
+    'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
+  telegram:
+    'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.03-1.99 1.27-5.62 3.72-.53.36-1.01.54-1.44.53-.47-.01-1.38-.27-2.06-.49-.83-.27-1.49-.42-1.43-.88.03-.24.37-.49 1.02-.74 3.99-1.74 6.65-2.89 7.99-3.44 3.81-1.58 4.6-1.86 5.12-1.87.11 0 .37.03.54.17.14.12.18.28.2.45-.01.06.01.24 0 .38z',
+  sponsor:
+    'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+  kofi: 'M4 5h12a4 4 0 0 1 0 8h-1v2.5A4.5 4.5 0 0 1 10.5 20h-1A4.5 4.5 0 0 1 5 15.5V13H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm11 6h1a2 2 0 0 0 0-4h-1v4Z',
+  download: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4',
+  docs: 'M12 6.253v13m0-13C10.832 5.483 9.246 5 7.5 5 5.205 5 3.182 5.836 2 7.117v11.41C3.182 17.247 5.205 16.41 7.5 16.41c1.746 0 3.332.484 4.5 1.254m0-11.41C13.168 5.483 14.754 5 16.5 5c2.295 0 4.318.836 5.5 2.117v11.41C20.818 17.247 18.795 16.41 16.5 16.41c-1.746 0-3.332.484-4.5 1.254',
+} as const;
+---
+
+<div class="not-prose my-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+  {links.map((item) => (
+    <a
+      href={item.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="group rounded-xl border border-dashed border-surface-700/70 bg-surface-900/50 p-4 transition-all duration-300 hover:border-accent-500/40 hover:bg-accent-500/[0.06]"
+    >
+      <div class="flex items-center gap-2.5">
+        <span class="flex h-7 w-7 items-center justify-center rounded-md border border-accent-500/25 bg-accent-500/[0.09]">
+          <svg class="h-3.5 w-3.5 text-accent-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7">
+            {item.icon === 'download' || item.icon === 'docs' ? (
+              <path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[item.icon]} />
+            ) : (
+              <path fill="currentColor" stroke="none" d={iconPaths[item.icon ?? 'docs']} />
+            )}
+          </svg>
+        </span>
+        <span class="text-sm font-semibold text-surface-100">{item.label}</span>
+      </div>
+      {item.hint && <p class="mt-2 text-xs leading-relaxed text-surface-500">{item.hint}</p>}
+    </a>
+  ))}
+</div>
diff --git a/apps/website/src/components/blog/PostButton.astro b/apps/website/src/components/blog/PostButton.astro
new file mode 100644
index 0000000..80fa35d
--- /dev/null
+++ b/apps/website/src/components/blog/PostButton.astro
@@ -0,0 +1,21 @@
+---
+interface Props {
+  href: string;
+  label?: string;
+  external?: boolean;
+}
+
+const { href, label, external = true } = Astro.props;
+---
+
+<a
+  href={href}
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noopener noreferrer' : undefined}
+  class="not-prose group my-6 inline-flex items-center gap-2 rounded-lg border border-dashed border-accent-500/35 bg-accent-500/[0.08] px-4 py-2.5 text-sm font-medium text-accent-200 transition-all duration-200 hover:border-accent-400/50 hover:bg-accent-500/[0.14] hover:text-accent-100"
+>
+  <span>{label ?? 'Open link'}</span>
+  <svg class="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5H19.5m0 0v6m0-6L10.5 13.5M6 6h3.75M6 10.5V18a1.5 1.5 0 001.5 1.5H15" />
+  </svg>
+</a>
diff --git a/apps/website/src/components/blog/ReleaseMeta.astro b/apps/website/src/components/blog/ReleaseMeta.astro
new file mode 100644
index 0000000..5d94c45
--- /dev/null
+++ b/apps/website/src/components/blog/ReleaseMeta.astro
@@ -0,0 +1,26 @@
+---
+interface Props {
+  version: string;
+  releaseDate: string;
+  channels?: string[];
+}
+
+const { version, releaseDate, channels = [] } = Astro.props;
+---
+
+<div class="not-prose my-6 rounded-xl border border-dashed border-surface-700/70 bg-surface-900/50 p-4 sm:p-5">
+  <div class="grid gap-3 sm:grid-cols-3">
+    <div>
+      <p class="m-0 font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">Version</p>
+      <p class="mt-1 text-sm font-semibold text-surface-100">{version}</p>
+    </div>
+    <div>
+      <p class="m-0 font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">Release date</p>
+      <p class="mt-1 text-sm font-semibold text-surface-100">{releaseDate}</p>
+    </div>
+    <div>
+      <p class="m-0 font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">Channels</p>
+      <p class="mt-1 text-sm font-semibold text-surface-100">{channels.length ? channels.join(' · ') : 'N/A'}</p>
+    </div>
+  </div>
+</div>
diff --git a/apps/website/src/components/blog/Spoiler.astro b/apps/website/src/components/blog/Spoiler.astro
new file mode 100644
index 0000000..c082cef
--- /dev/null
+++ b/apps/website/src/components/blog/Spoiler.astro
@@ -0,0 +1,22 @@
+---
+interface Props {
+  title?: string;
+  open?: boolean;
+}
+
+const { title = 'Show spoiler', open = false } = Astro.props;
+---
+
+<details class="not-prose my-5 rounded-xl border border-dashed border-surface-700/70 bg-surface-900/50 px-4 py-3" open={open}>
+  <summary class="cursor-pointer list-none font-mono text-xs uppercase tracking-[0.1em] text-accent-300">
+    <span class="inline-flex items-center gap-2">
+      <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.968 9.968 0 012.06-3.368m2.25-1.93A9.956 9.956 0 0112 5c4.478 0 8.268 2.943 9.543 7a9.964 9.964 0 01-4.293 5.274M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+      {title}
+    </span>
+  </summary>
+  <div class="mt-3 border-t border-dashed border-surface-700/60 pt-3 text-sm leading-relaxed text-surface-300 [&_p]:my-2">
+    <slot />
+  </div>
+</details>
diff --git a/apps/website/src/components/blog/StatusPill.astro b/apps/website/src/components/blog/StatusPill.astro
new file mode 100644
index 0000000..72b3264
--- /dev/null
+++ b/apps/website/src/components/blog/StatusPill.astro
@@ -0,0 +1,20 @@
+---
+interface Props {
+  type?: 'new' | 'fixed' | 'improved' | 'breaking' | 'beta';
+  label?: string;
+}
+
+const { type = 'new', label } = Astro.props;
+
+const styles = {
+  new: 'border-cyan-500/35 bg-cyan-500/[0.12] text-cyan-200',
+  fixed: 'border-emerald-500/35 bg-emerald-500/[0.12] text-emerald-200',
+  improved: 'border-accent-500/35 bg-accent-500/[0.12] text-accent-200',
+  breaking: 'border-rose-500/35 bg-rose-500/[0.12] text-rose-200',
+  beta: 'border-amber-500/35 bg-amber-500/[0.12] text-amber-200',
+} as const;
+---
+
+<span class={`not-prose inline-flex items-center rounded-full border border-dashed px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.08em] ${styles[type]}`}>
+  {label ?? type}
+</span>
diff --git a/apps/website/src/components/blog/StepRail.astro b/apps/website/src/components/blog/StepRail.astro
new file mode 100644
index 0000000..85ed3c0
--- /dev/null
+++ b/apps/website/src/components/blog/StepRail.astro
@@ -0,0 +1,22 @@
+---
+interface Props {
+  steps: string[];
+  title?: string;
+}
+
+const { steps = [], title } = Astro.props;
+---
+
+<div class="not-prose my-6 rounded-xl border border-dashed border-surface-700/70 bg-surface-900/45 p-4 sm:p-5">
+  {title && <p class="mb-3 font-mono text-[11px] uppercase tracking-[0.12em] text-accent-400">{title}</p>}
+  <ol class="m-0 list-none space-y-3 p-0">
+    {steps.map((step, index) => (
+      <li class="flex items-start gap-3">
+        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-dashed border-accent-500/35 bg-accent-500/[0.1] font-mono text-[11px] font-semibold text-accent-200">
+          {index + 1}
+        </span>
+        <p class="m-0 pt-0.5 text-sm leading-relaxed text-surface-200">{step}</p>
+      </li>
+    ))}
+  </ol>
+</div>
diff --git a/apps/website/src/components/blog/TerminalBlock.astro b/apps/website/src/components/blog/TerminalBlock.astro
new file mode 100644
index 0000000..ea1dc47
--- /dev/null
+++ b/apps/website/src/components/blog/TerminalBlock.astro
@@ -0,0 +1,19 @@
+---
+interface Props {
+  title?: string;
+}
+
+const { title = 'Terminal' } = Astro.props;
+---
+
+<div class="not-prose my-6 overflow-hidden rounded-xl border border-dashed border-surface-700/70 bg-surface-900/60">
+  <div class="flex items-center justify-between border-b border-dashed border-surface-700/60 px-4 py-2.5">
+    <div class="flex items-center gap-1.5" aria-hidden="true">
+      <span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span>
+      <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70"></span>
+      <span class="h-2.5 w-2.5 rounded-full bg-green-500/70"></span>
+    </div>
+    <span class="font-mono text-[11px] uppercase tracking-[0.12em] text-surface-500">{title}</span>
+  </div>
+  <pre class="m-0 overflow-x-auto p-4"><code class="font-mono text-sm text-accent-200"><slot /></code></pre>
+</div>
diff --git a/apps/website/src/content.config.ts b/apps/website/src/content.config.ts
new file mode 100644
index 0000000..d9e8b08
--- /dev/null
+++ b/apps/website/src/content.config.ts
@@ -0,0 +1,19 @@
+import { glob } from 'astro/loaders';
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/blog' }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.coerce.date(),
+    updatedDate: z.coerce.date().optional(),
+    author: z.string().default('4gray'),
+    featured: z.boolean().default(false),
+    heroImage: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    draft: z.boolean().default(false),
+  }),
+});
+
+export const collections = { blog };
diff --git a/apps/website/src/content/blog/blog-components-demo.mdx b/apps/website/src/content/blog/blog-components-demo.mdx
new file mode 100644
index 0000000..148c6a1
--- /dev/null
+++ b/apps/website/src/content/blog/blog-components-demo.mdx
@@ -0,0 +1,230 @@
+---
+title: Blog Components Demo (MDX)
+description: Reusable MDX components for IPTVnator blog posts including alerts, CTA buttons, and terminal command blocks.
+pubDate: 2026-02-15
+author: 4gray
+tags:
+- blog
+- mdx
+- docs
+draft: true
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import PostButton from '../../components/blog/PostButton.astro';
+import TerminalBlock from '../../components/blog/TerminalBlock.astro';
+import StepRail from '../../components/blog/StepRail.astro';
+import LinkCards from '../../components/blog/LinkCards.astro';
+import IconFeatureGrid from '../../components/blog/IconFeatureGrid.astro';
+import ReleaseMeta from '../../components/blog/ReleaseMeta.astro';
+import StatusPill from '../../components/blog/StatusPill.astro';
+import ChangeTable from '../../components/blog/ChangeTable.astro';
+import CopyCommand from '../../components/blog/CopyCommand.astro';
+import ImageGallery from '../../components/blog/ImageGallery.astro';
+import BlogImageSlider from '../../components/blog/BlogImageSlider.astro';
+import Spoiler from '../../components/blog/Spoiler.astro';
+import FaqAccordion from '../../components/blog/FaqAccordion.astro';
+
+This post demonstrates reusable UI components you can use in `.mdx` blog posts.
+
+## Alert panel
+
+<Alert type="info" title="Heads up">
+  Use alerts to highlight important notes without breaking the reading flow.
+</Alert>
+
+<Alert type="warning" title="Before updating">
+  Back up playlists, credentials, and portal URLs before installing major updates.
+</Alert>
+
+## Release meta
+
+<ReleaseMeta version="v0.18.0" releaseDate="January 14, 2026" channels={['Desktop', 'PWA']} />
+
+## Status pills
+
+<div class="not-prose my-4 flex flex-wrap gap-2">
+  <StatusPill type="new" />
+  <StatusPill type="fixed" />
+  <StatusPill type="improved" />
+  <StatusPill type="beta" />
+  <StatusPill type="breaking" />
+</div>
+
+## Terminal code block
+
+<TerminalBlock title="Terminal">
+$ xattr -c /Applications/IPTVnator.app
+</TerminalBlock>
+
+## Copy command
+
+<CopyCommand title="One-line fix" command="xattr -c /Applications/IPTVnator.app" />
+
+## Button / CTA
+
+<PostButton
+  href="https://github.com/4gray/iptvnator/releases/latest"
+  label="Download latest release"
+/>
+
+<PostButton
+  href="/iptvnator/blog/v0-18-release-notes/"
+  label="Read v0.18 release notes"
+  external={false}
+/>
+
+## Step rail
+
+<StepRail
+  title="Quick setup"
+  steps={[
+    'Import an M3U, Xtream, or Stalker playlist.',
+    'Configure EPG (XMLTV URL) from playlist settings.',
+    'Mark channels as favorites for quick access.',
+  ]}
+/>
+
+## Link cards
+
+<LinkCards
+  links={[
+    {
+      label: 'GitHub',
+      href: 'https://github.com/4gray/iptvnator',
+      hint: 'Source code, issues, and releases.',
+      icon: 'github',
+    },
+    {
+      label: 'Telegram',
+      href: 'https://t.me/iptvnator',
+      hint: 'Announcements and community updates.',
+      icon: 'telegram',
+    },
+    {
+      label: 'GitHub Sponsors',
+      href: 'https://github.com/sponsors/4gray',
+      hint: 'Support long-term development.',
+      icon: 'sponsor',
+    },
+  ]}
+/>
+
+## Icon feature grid
+
+<IconFeatureGrid
+  items={[
+    {
+      title: 'Playlist Support',
+      text: 'Use M3U/M3U8, Xtream Codes API, and Stalker portals.',
+      icon: 'playlist',
+    },
+    {
+      title: 'Built-in EPG',
+      text: 'Parse large XMLTV guides with improved loading behavior.',
+      icon: 'epg',
+    },
+    {
+      title: 'Performance',
+      text: 'Background workers keep UI responsive during heavy parsing.',
+      icon: 'speed',
+    },
+    {
+      title: 'Privacy-first',
+      text: 'No tracking pipeline and local-first playback workflow.',
+      icon: 'shield',
+    },
+  ]}
+/>
+
+## Change table
+
+<ChangeTable
+  rows={[
+    {
+      area: 'General',
+      change: 'Playlist switcher moved to a cleaner unified UI.',
+      impact: 'Faster navigation',
+    },
+    {
+      area: 'M3U',
+      change: 'EPG parsing improved for large XMLTV files.',
+      impact: 'More reliable loading',
+    },
+    {
+      area: 'Xtream',
+      change: 'Category visibility controls and item counters.',
+      impact: 'Better content management',
+    },
+  ]}
+/>
+
+## Image gallery
+
+<ImageGallery
+  columns={2}
+  images={[
+    {
+      src: '/iptvnator/blog/iptvnator-v18.jpeg',
+      alt: 'IPTVnator v0.18 UI screenshot',
+      caption: 'v0.18 interface update',
+    },
+    {
+      src: '/iptvnator/blog/macos-app-damaged.jpg',
+      alt: 'macOS app damaged warning dialog',
+      caption: 'macOS Gatekeeper warning example',
+    },
+  ]}
+/>
+
+## Image slider
+
+<BlogImageSlider
+  images={[
+    {
+      src: '/iptvnator/blog/iptvnator-v18.jpeg',
+      alt: 'IPTVnator v0.18 UI screenshot',
+      caption: 'Main app interface in v0.18.',
+    },
+    {
+      src: '/iptvnator/blog/macos-app-damaged.jpg',
+      alt: 'macOS app damaged warning dialog',
+      caption: 'Gatekeeper warning on unsigned app launch.',
+    },
+    {
+      src: '/iptvnator/blog/epg.png',
+      alt: 'EPG guide screenshot',
+      caption: 'Electronic Program Guide screen in IPTVnator.',
+    },
+  ]}
+/>
+
+## Spoiler block
+
+<Spoiler title="Show advanced troubleshooting note">
+  If launch issues persist, verify the app path and run `xattr -c` on the exact `.app` bundle location.
+</Spoiler>
+
+## FAQ accordion
+
+<FaqAccordion
+  items={[
+    {
+      q: 'Can I use these components in regular .md files?',
+      a: 'No. Use .mdx when you want to render custom Astro components inside post content.',
+    },
+    {
+      q: 'Will draft posts appear on production blog pages?',
+      a: 'No. Posts with draft: true are excluded from listing and route generation.',
+    },
+    {
+      q: 'Can I mix markdown with components in one post?',
+      a: 'Yes. MDX supports regular markdown syntax and imported components together.',
+    },
+  ]}
+/>
+
+## When to use MDX
+
+- Use `.md` for plain posts
+- Use `.mdx` when you want custom components, richer callouts, or advanced layout blocks
diff --git a/apps/website/src/content/blog/epg-guide.mdx b/apps/website/src/content/blog/epg-guide.mdx
new file mode 100644
index 0000000..abfa216
--- /dev/null
+++ b/apps/website/src/content/blog/epg-guide.mdx
@@ -0,0 +1,58 @@
+---
+title: Understanding the Electronic Program Guide
+description: Learn how IPTVnator uses XMLTV data to display current and upcoming programs alongside your live TV channels.
+pubDate: 2026-02-14
+author: 4gray
+heroImage: /iptvnator/blog/epg.png
+tags:
+- tutorial
+- epg
+draft: false
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import PostButton from '../../components/blog/PostButton.astro';
+
+One of the most useful features in IPTVnator is the built-in Electronic Program Guide (EPG). Here is how it works and how to set it up.
+
+## What is EPG?
+
+The Electronic Program Guide displays a schedule of current and upcoming TV programs for your channels. IPTVnator supports EPG data in the **XMLTV format**, which is the standard used by most IPTV providers.
+
+<Alert type="info" title="Format tip">
+  Most providers expose EPG as `.xml` or compressed `.xml.gz` files.
+</Alert>
+
+## Setting up EPG
+
+To enable EPG in IPTVnator:
+
+1. **Open your playlist** and navigate to the Settings tab
+2. **Add an EPG URL** — your IPTV provider should supply a URL ending in `.xml` or `.xml.gz`
+3. **Refresh the EPG data** — IPTVnator will download and parse the program information in the background
+
+The EPG data is parsed in a background worker thread, so it won't slow down the main application even with large files.
+
+## EPG in action
+
+Once configured, you will see:
+
+- **Current program** displayed next to each channel in the channel list
+- **Progress bar** showing how far through the current program you are
+- **Program details** in the right sidebar when you select a channel
+- **Upcoming schedule** with times and descriptions for future programs
+
+## Channel matching
+
+IPTVnator matches EPG data to channels using the `tvg-id` attribute from your M3U playlist. Make sure your playlist includes these IDs for the best EPG experience.
+
+## Tips
+
+- EPG files can be large — IPTVnator caches parsed data in the database (Electron)
+- You can add multiple EPG sources per playlist
+- The EPG automatically refreshes periodically to keep the schedule up to date
+
+<PostButton
+  href="https://github.com/4gray/iptvnator"
+  label="See supported formats on GitHub"
+/>
diff --git a/apps/website/src/content/blog/macos-arm-app-damaged-fix.mdx b/apps/website/src/content/blog/macos-arm-app-damaged-fix.mdx
new file mode 100644
index 0000000..e4f77e7
--- /dev/null
+++ b/apps/website/src/content/blog/macos-arm-app-damaged-fix.mdx
@@ -0,0 +1,47 @@
+---
+title: macOS ARM Users - Fix for "App is Damaged" Error
+description: If IPTVnator shows "app is damaged and can't be opened" on Apple Silicon Macs, run one Terminal command to remove quarantine and launch safely.
+pubDate: 2026-02-15
+author: 4gray
+heroImage: /iptvnator/blog/macos-app-damaged.jpg
+tags:
+- macos
+- troubleshooting
+- installation
+draft: false
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import PostButton from '../../components/blog/PostButton.astro';
+import TerminalBlock from '../../components/blog/TerminalBlock.astro';
+
+If you are on macOS ARM (Apple Silicon) and IPTVnator shows **"app is damaged and can't be opened"**, use this quick fix.
+
+## TL;DR
+
+<TerminalBlock title="Terminal">
+$ xattr -c /Applications/IPTVnator.app
+</TerminalBlock>
+
+## Why this happens
+
+IPTVnator is currently not code-signed for macOS. After download, Gatekeeper adds a quarantine attribute, and macOS can block launch with a generic "damaged" message.
+
+To distribute a fully signed and notarized macOS app, Apple requires an active Apple Developer subscription (currently **$99/year**). As an open-source project, IPTVnator does not currently use that signing pipeline.
+
+## What the command does
+
+The command above removes the quarantine attribute from the app bundle:
+
+- It does **not** modify IPTVnator binaries
+- It tells your Mac to trust the app you intentionally downloaded
+- It is the standard local workaround for unsigned apps
+
+<Alert type="warning" title="Safety note">
+  Only run this command for apps you trust and downloaded from a trusted source.
+</Alert>
+
+<PostButton
+  href="https://github.com/4gray/iptvnator/releases/latest"
+  label="Download from official GitHub releases"
+/>
diff --git a/apps/website/src/content/blog/v0-18-release-notes.mdx b/apps/website/src/content/blog/v0-18-release-notes.mdx
new file mode 100644
index 0000000..9c70bcf
--- /dev/null
+++ b/apps/website/src/content/blog/v0-18-release-notes.mdx
@@ -0,0 +1,137 @@
+---
+title: v0.18 - Release Notes
+description: IPTVnator v0.18 brings a new playlist switcher UI, large EPG improvements, Xtream and Stalker updates, and multiple UX fixes across the app.
+featured: false
+pubDate: 2026-01-14
+author: 4gray
+heroImage: /iptvnator/blog/iptvnator-v18.jpeg
+tags:
+- release
+- release-notes
+- v0.18
+draft: false
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import LinkCards from '../../components/blog/LinkCards.astro';
+import ReleaseMeta from '../../components/blog/ReleaseMeta.astro';
+import StatusPill from '../../components/blog/StatusPill.astro';
+import ChangeTable from '../../components/blog/ChangeTable.astro';
+
+IPTVnator **v0.18** is out.
+
+<ReleaseMeta version="v0.18.0" releaseDate="January 14, 2026" channels={['Desktop', 'PWA']} />
+
+## Support the project
+
+- **GitHub Sponsors**: [https://github.com/sponsors/4gray](https://github.com/sponsors/4gray)
+- **Buy me a coffee**: [https://ko-fi.com/4gray](https://ko-fi.com/4gray)
+- **USDT (TRC20)**: `TLz5rTS7QTxYGfRH1Pm6Hs9fewqstDM47c`
+
+<LinkCards
+  links={[
+    {
+      label: 'GitHub Sponsors',
+      href: 'https://github.com/sponsors/4gray',
+      hint: 'Support continued development.',
+      icon: 'sponsor',
+    },
+    {
+      label: 'Ko-fi',
+      href: 'https://ko-fi.com/4gray',
+      hint: 'One-time support for the project.',
+      icon: 'kofi',
+    },
+    {
+      label: 'Telegram',
+      href: 'https://t.me/iptvnator',
+      hint: 'Follow announcements and updates.',
+      icon: 'telegram',
+    },
+  ]}
+/>
+
+## Summary
+
+<ChangeTable
+  rows={[
+    {
+      area: 'General',
+      change: 'Unified playlist switcher and cleaner header controls.',
+      impact: 'Faster day-to-day navigation',
+    },
+    {
+      area: 'M3U',
+      change: 'Large EPG handling, progress popup, and restored quality selector.',
+      impact: 'More stable playback setup',
+    },
+    {
+      area: 'Xtream',
+      change: 'Category visibility controls and recently-added improvements.',
+      impact: 'Better catalog browsing',
+    },
+    {
+      area: 'Stalker',
+      change: 'Initial support for playlists requiring device IDs/signatures.',
+      impact: 'Broader provider compatibility',
+    },
+  ]}
+/>
+
+## General
+
+<StatusPill type="improved" />
+
+- New playlist switcher UI: a unified and cleaner way to switch between playlists
+- Global favorites moved to the header for quicker access
+- Sort and filter options merged into a single header menu
+
+## M3U
+
+<StatusPill type="improved" />
+
+- Improved EPG download and parsing to better handle large EPG files
+- Added a popup dialog showing EPG download progress
+- Restored quality selector for the Video.js player
+
+## Xtream & Stalker
+
+<StatusPill type="fixed" />
+
+- Improved look and feel of the details view for VODs and TV shows
+- Fixed opening favorite items with embedded players
+
+## Xtream
+
+<StatusPill type="new" />
+
+- Category management: hide/show categories
+- Display item counts per category
+- New separate view for recently added items
+- Recently added items are shown when no category is selected
+- Fixed empty categories issue
+- Restored import progress counter
+
+## Stalker
+
+<StatusPill type="beta" label="partial support" />
+
+- Added support for playlists that require device IDs and signatures
+- Some playlists are still not supported; more testing data is needed
+
+<Alert type="warning" title="Before updating">
+  Please back up your playlists, credentials, URLs, and other important data.
+</Alert>
+
+## Download
+
+<LinkCards
+  links={[
+    {
+      label: 'Download v0.18.0',
+      href: 'https://github.com/4gray/iptvnator/releases/tag/v0.18.0',
+      hint: 'Official release binaries and checksums.',
+      icon: 'download',
+    },
+  ]}
+/>
diff --git a/apps/website/src/content/blog/v0-19-release-notes.mdx b/apps/website/src/content/blog/v0-19-release-notes.mdx
new file mode 100644
index 0000000..6a7276b
--- /dev/null
+++ b/apps/website/src/content/blog/v0-19-release-notes.mdx
@@ -0,0 +1,205 @@
+---
+title: v0.19 - Release Notes
+description: One of the biggest IPTVnator releases so far with major Home, M3U, Xtream, Stalker, and Remote Control improvements, plus many fixes and refactorings.
+featured: true
+pubDate: 2026-02-19
+author: 4gray
+heroImage: /iptvnator/blog/v0-19-xtream-category-grid.png
+tags:
+    - release
+    - release-notes
+    - v0.19
+draft: false
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import LinkCards from '../../components/blog/LinkCards.astro';
+import ReleaseMeta from '../../components/blog/ReleaseMeta.astro';
+import StatusPill from '../../components/blog/StatusPill.astro';
+import ChangeTable from '../../components/blog/ChangeTable.astro';
+import ImageGallery from '../../components/blog/ImageGallery.astro';
+
+IPTVnator **v0.19** is out.
+
+This is one of the biggest IPTVnator releases so far, with many fixes, refactorings, and new features. A lot of reported issues were addressed in this version.
+
+Thank you to everyone who contributed ideas, bug reports, improvements, and PRs. Biggest kudos to everyone who supported the project with donations.
+
+Let’s keep the momentum going and aim for more regular releases.
+
+<ReleaseMeta
+    version="v0.19.0"
+    releaseDate="February 19, 2026"
+    channels={['Desktop', 'PWA']}
+/>
+
+## Support the project
+
+- **GitHub Sponsors**: [https://github.com/sponsors/4gray](https://github.com/sponsors/4gray)
+- **Buy me a coffee**: [https://ko-fi.com/4gray](https://ko-fi.com/4gray)
+- **USDT (TRC20)**: `TLz5rTS7QTxYGfRH1Pm6Hs9fewqstDM47c`
+
+<LinkCards
+    links={[
+        {
+            label: 'GitHub Sponsors',
+            href: 'https://github.com/sponsors/4gray',
+            hint: 'Support continued development.',
+            icon: 'sponsor',
+        },
+        {
+            label: 'Ko-fi',
+            href: 'https://ko-fi.com/4gray',
+            hint: 'One-time support for the project.',
+            icon: 'kofi',
+        },
+        {
+            label: 'Telegram',
+            href: 'https://t.me/iptvnator',
+            hint: 'Follow announcements and updates.',
+            icon: 'telegram',
+        },
+    ]}
+/>
+
+## Highlights summary
+
+<ChangeTable
+    rows={[
+        {
+            area: 'Home',
+            change: 'Drag-and-drop playlist sorting, global search upgrades, and improved recent items.',
+            impact: 'Faster navigation and discovery',
+        },
+        {
+            area: 'M3U',
+            change: 'Lazy loading for large playlists, favorites in lists, EPG catch-up support, resizable sidebar.',
+            impact: 'Smoother handling of big datasets',
+        },
+        {
+            area: 'Xtream & Stalker',
+            change: 'Download Manager, playback position persistence, list views, and sidebar improvements.',
+            impact: 'Better browsing and continuity',
+        },
+        {
+            area: 'Remote Control',
+            change: 'Xtream/Stalker support, EPG current-program info, channel-number switching.',
+            impact: 'More complete remote workflow',
+        },
+    ]}
+/>
+
+## Home
+
+<StatusPill type="new" />
+
+- Added custom playlist sorting with drag-and-drop reordering.
+- Added Global Search and Recent Items to the Home header.
+- Improved Global Search:
+    - Enhanced UI with grouped and ungrouped views.
+    - Added option to include/exclude hidden categories.
+- Improved globally recent items:
+    - Added Stalker support.
+    - Enhanced UI with grouped and ungrouped views.
+
+## M3U
+
+<StatusPill type="improved" />
+
+- Added lazy loading and improved handling for large playlists.
+- Added Favorites button directly in lists, including group views.
+- Added lazy loading in group view.
+- Improved global favorites behavior.
+- Restored EPG expired programs for catch-up/archive support.
+- Added resizable sidebar.
+
+## Xtream
+
+<StatusPill type="new" />
+
+- Playback position is now persisted for started VOD and series content.
+- Added Download Manager.
+- Added sorting options for Live TV channels.
+- Added search in VOD/series categories.
+- Added sorting in VOD/series categories by name or date added.
+- Improved search flow: when returning from results, search phrase and results are preserved.
+- Added list view for series.
+- Added resizable sidebar.
+
+## Stalker
+
+<StatusPill type="new" />
+
+- Playback position is now persisted for started VOD and series content.
+- Added Download Manager.
+- Added EPG support for Live TV channels.
+- When no category is selected, all VOD/series categories are now shown.
+- Added list view for series.
+- Added resizable sidebar.
+- Replaced "Load more" buttons with infinite scroll for Live TV channels.
+
+## Remote Control
+
+<StatusPill type="improved" />
+
+- Added support for Xtream and Stalker portals.
+- Added EPG info for the current program.
+- Added channel switching by entering channel number.
+
+## Website & Blog
+
+<StatusPill type="new" />
+
+- Added a new landing page: [https://4gray.github.io/iptvnator/](https://4gray.github.io/iptvnator/)
+- Added a new blog: [https://4gray.github.io/iptvnator/blog](https://4gray.github.io/iptvnator/blog)
+
+## Screenshot gallery
+
+<ImageGallery
+    columns={2}
+    images={[
+        {
+            src: '/iptvnator/blog/v0-19-series-episodes.png',
+            alt: 'Series episodes view with progress indicators and actions',
+            caption: 'Series episodes with progress and actions.',
+        },
+        {
+            src: '/iptvnator/blog/v0-19-download-manager.png',
+            alt: 'Download manager view with completed episodes',
+            caption: 'Download Manager with completed items.',
+        },
+        {
+            src: '/iptvnator/blog/v0-19-remote-control.png',
+            alt: 'Remote control screen with channel controls and numeric keypad',
+            caption: 'Remote Control with channel number entry.',
+        },
+        {
+            src: '/iptvnator/blog/v0-19-xtream-category-grid.png',
+            alt: 'Xtream category grid and content view',
+            caption: 'Xtream category and content browsing.',
+        },
+    ]}
+/>
+
+<Alert type="warning" title="Before updating">
+    Please back up your playlists, credentials, URLs, and other important data.
+</Alert>
+
+## Download
+
+<LinkCards
+    links={[
+        {
+            label: 'Download v0.19.0',
+            href: 'https://github.com/4gray/iptvnator/releases/tag/v0.19.0',
+            hint: 'Official binaries and release assets on GitHub.',
+            icon: 'download',
+        },
+        {
+            label: 'All Releases',
+            href: 'https://github.com/4gray/iptvnator/releases',
+            hint: 'Browse every IPTVnator release on GitHub.',
+            icon: 'github',
+        },
+    ]}
+/>
diff --git a/apps/website/src/content/blog/welcome.mdx b/apps/website/src/content/blog/welcome.mdx
new file mode 100644
index 0000000..fb0a66b
--- /dev/null
+++ b/apps/website/src/content/blog/welcome.mdx
@@ -0,0 +1,41 @@
+---
+title: Introducing the IPTVnator Website
+description: We are excited to launch the official IPTVnator website and developer blog. Stay tuned for release notes, tutorials, and roadmap updates.
+pubDate: 2026-02-14
+author: 4gray
+heroImage: /iptvnator/blog/player.png
+tags:
+- announcement
+draft: false
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import PostButton from '../../components/blog/PostButton.astro';
+
+We are excited to launch the official IPTVnator website and developer blog.
+
+<Alert type="success" title="What this means">
+  You now have one place for releases, tutorials, troubleshooting guides, and project updates.
+</Alert>
+
+## What is IPTVnator?
+
+IPTVnator is a free, open-source IPTV player application that supports M3U/M3U8 playlists, Xtream Codes API, and Stalker portals. It runs as a desktop application (via Electron) and as a Progressive Web App directly in your browser.
+
+## What to expect from this blog
+
+This blog will be the home for:
+
+- **Release notes** for new versions
+- **Tutorials** on how to get the most out of IPTVnator
+- **Roadmap updates** so you know what features are coming next
+- **Technical deep dives** into the architecture and development process
+
+## Get involved
+
+IPTVnator is open source and we welcome contributions.
+
+<PostButton
+  href="https://github.com/4gray/iptvnator"
+  label="View project on GitHub"
+/>
diff --git a/apps/website/src/layouts/BaseLayout.astro b/apps/website/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..4a6ba3d
--- /dev/null
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -0,0 +1,44 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/global.css';
+
+interface Props {
+  title: string;
+  description: string;
+  image?: string;
+  type?: 'website' | 'article';
+  noindex?: boolean;
+  keywords?: string[];
+  publishedTime?: string;
+  modifiedTime?: string;
+  jsonLd?: Record<string, unknown> | Array<Record<string, unknown>>;
+}
+
+const { title, description, image, type, noindex, keywords, publishedTime, modifiedTime, jsonLd } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <BaseHead
+      title={title}
+      description={description}
+      image={image}
+      type={type}
+      noindex={noindex}
+      keywords={keywords}
+      publishedTime={publishedTime}
+      modifiedTime={modifiedTime}
+      jsonLd={jsonLd}
+    />
+  </head>
+  <body class="min-h-screen bg-surface-950 font-body text-surface-200">
+    <Header />
+    <main class="overflow-x-hidden">
+      <slot />
+    </main>
+    <Footer />
+  </body>
+</html>
diff --git a/apps/website/src/layouts/BlogPost.astro b/apps/website/src/layouts/BlogPost.astro
new file mode 100644
index 0000000..19e4287
--- /dev/null
+++ b/apps/website/src/layouts/BlogPost.astro
@@ -0,0 +1,155 @@
+---
+import BaseLayout from './BaseLayout.astro';
+
+interface Props {
+  title: string;
+  description: string;
+  pubDate: Date;
+  updatedDate?: Date;
+  author: string;
+  tags?: string[];
+  heroImage?: string;
+}
+
+const { title, description, pubDate, updatedDate, author, tags = [], heroImage } = Astro.props;
+
+const formattedDate = pubDate.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+
+const formattedUpdatedDate = updatedDate?.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+
+const AUTHOR_AVATAR_URL = 'https://avatars.githubusercontent.com/u/1503032';
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+const blogPostSchema = {
+  '@context': 'https://schema.org',
+  '@type': 'BlogPosting',
+  headline: title,
+  description,
+  datePublished: pubDate.toISOString(),
+  dateModified: (updatedDate ?? pubDate).toISOString(),
+  author: {
+    '@type': 'Person',
+    name: author,
+    url: 'https://github.com/4gray',
+  },
+  publisher: {
+    '@type': 'Organization',
+    name: 'IPTVnator',
+    url: 'https://4gray.github.io/iptvnator/',
+    logo: {
+      '@type': 'ImageObject',
+      url: 'https://4gray.github.io/iptvnator/favicon.ico',
+    },
+  },
+  mainEntityOfPage: canonicalURL,
+  image: heroImage ? new URL(heroImage, Astro.site).toString() : undefined,
+};
+---
+
+<BaseLayout
+  title={`${title} | IPTVnator Blog`}
+  description={description}
+  image={heroImage}
+  type="article"
+  publishedTime={pubDate.toISOString()}
+  modifiedTime={(updatedDate ?? pubDate).toISOString()}
+  keywords={tags}
+  jsonLd={blogPostSchema}
+>
+  <article class="pt-36 pb-24">
+    <div class="relative mx-auto max-w-3xl px-6">
+      <div class="pointer-events-none absolute -top-16 -right-14 hidden w-44 rotate-[-8deg] opacity-30 mix-blend-screen md:block lg:w-52">
+        <img
+          src="/iptvnator/illustrations/blog-corner-signal-mark.svg"
+          alt=""
+          aria-hidden="true"
+          class="w-full object-contain"
+          loading="lazy"
+        />
+      </div>
+
+      <!-- Back link -->
+      <a
+        href="/iptvnator/blog/"
+        class="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.1em] text-surface-500 transition-colors hover:text-accent-400"
+      >
+        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        Back to blog
+      </a>
+
+      <!-- Header -->
+      <header class="mt-10">
+        <div class="flex flex-wrap items-center gap-2">
+          <time datetime={pubDate.toISOString()} class="font-mono text-xs text-surface-500">
+            {formattedDate}
+          </time>
+          {
+            tags.length > 0 && (
+              <>
+                <span class="text-surface-700">&middot;</span>
+                {tags.map((tag) => (
+                  <span class="rounded-full border border-dashed border-accent-500/30 px-2.5 py-0.5 text-xs font-medium text-accent-400">
+                    {tag}
+                  </span>
+                ))}
+              </>
+            )
+          }
+        </div>
+
+        <h1 class="mt-5 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl">
+          {title}
+        </h1>
+
+        <p class="mt-4 text-lg text-surface-400">{description}</p>
+
+        <div class="mt-6 flex items-center gap-3">
+          <img
+            src={AUTHOR_AVATAR_URL}
+            alt={`${author} avatar`}
+            class="h-8 w-8 rounded-full border border-dashed border-accent-500/30 object-cover"
+            loading="lazy"
+          />
+          <div>
+            <div class="text-sm font-medium text-surface-100">{author}</div>
+            {
+              updatedDate && (
+                <div class="font-mono text-[11px] text-surface-500">
+                  Updated {formattedUpdatedDate}
+                </div>
+              )
+            }
+          </div>
+        </div>
+
+        <hr class="section-divider mt-10" />
+      </header>
+
+      <!-- Hero image -->
+      {heroImage && (
+        <div class="relative mt-10">
+          <div class="absolute -inset-6 rounded-2xl bg-accent-500/[0.03] blur-2xl" />
+          <div class="relative overflow-hidden rounded-xl border border-surface-700/60 bg-surface-900 shadow-lg shadow-black/20">
+            <img src={heroImage} alt="" class="w-full" loading="eager" />
+          </div>
+        </div>
+      )}
+
+      <!-- Content -->
+      <div
+        class="prose prose-invert mt-12 max-w-none prose-headings:font-display prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-surface-100 prose-p:text-surface-300 prose-a:text-accent-400 prose-a:no-underline prose-a:decoration-accent-500/30 hover:prose-a:underline prose-strong:text-surface-100 prose-code:rounded prose-code:bg-surface-800/50 prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:text-accent-300 prose-code:before:content-[''] prose-code:after:content-[''] prose-pre:border prose-pre:border-dashed prose-pre:border-surface-700/60 prose-pre:bg-surface-900/50 prose-blockquote:border-accent-500/30 prose-blockquote:text-surface-400 prose-hr:border-dashed prose-hr:border-surface-700/60"
+      >
+        <slot />
+      </div>
+    </div>
+  </article>
+</BaseLayout>
diff --git a/apps/website/src/pages/404.astro b/apps/website/src/pages/404.astro
new file mode 100644
index 0000000..a327408
--- /dev/null
+++ b/apps/website/src/pages/404.astro
@@ -0,0 +1,32 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout
+  title="Page Not Found | IPTVnator"
+  description="The page you're looking for doesn't exist."
+  noindex={true}
+>
+  <section class="flex min-h-[80vh] items-center justify-center pt-20">
+    <div class="mx-auto max-w-md px-6 text-center">
+      <img
+        src="/iptvnator/images/broken-tv.svg"
+        alt="Broken TV"
+        class="mx-auto h-48 w-48 opacity-40"
+      />
+      <h1 class="mt-8 font-display text-5xl font-bold text-surface-50">404</h1>
+      <p class="mt-4 text-lg text-surface-400">
+        This page doesn't exist. Maybe the channel was removed from the playlist.
+      </p>
+      <a
+        href="/iptvnator/"
+        class="mt-8 inline-flex items-center gap-2.5 rounded-lg bg-accent-500 px-6 py-3 text-sm font-semibold text-surface-950 transition-all hover:bg-accent-400"
+      >
+        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
+        Go back home
+      </a>
+    </div>
+  </section>
+</BaseLayout>
diff --git a/apps/website/src/pages/blog/[...slug].astro b/apps/website/src/pages/blog/[...slug].astro
new file mode 100644
index 0000000..6e585a2
--- /dev/null
+++ b/apps/website/src/pages/blog/[...slug].astro
@@ -0,0 +1,30 @@
+---
+import { getCollection, render } from 'astro:content';
+import BlogPost from '../../layouts/BlogPost.astro';
+
+export async function getStaticPaths() {
+  const includeDrafts = import.meta.env.DEV || import.meta.env.PUBLIC_INCLUDE_DRAFTS === 'true';
+  const posts = await getCollection('blog');
+  return posts
+    .filter((post) => includeDrafts || !post.data.draft)
+    .map((post) => ({
+      params: { slug: post.id },
+      props: post,
+    }));
+}
+
+const post = Astro.props;
+const { Content } = await render(post);
+---
+
+<BlogPost
+  title={post.data.title}
+  description={post.data.description}
+  pubDate={post.data.pubDate}
+  updatedDate={post.data.updatedDate}
+  author={post.data.author}
+  tags={post.data.tags}
+  heroImage={post.data.heroImage}
+>
+  <Content />
+</BlogPost>
diff --git a/apps/website/src/pages/blog/index.astro b/apps/website/src/pages/blog/index.astro
new file mode 100644
index 0000000..ff14c6d
--- /dev/null
+++ b/apps/website/src/pages/blog/index.astro
@@ -0,0 +1,74 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import FeaturedBlogPost from '../../components/FeaturedBlogPost.astro';
+import BlogPostCard from '../../components/BlogPostCard.astro';
+
+const includeDrafts = import.meta.env.DEV || import.meta.env.PUBLIC_INCLUDE_DRAFTS === 'true';
+
+const posts = (await getCollection('blog'))
+  .filter((post) => includeDrafts || !post.data.draft)
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+const featuredPost = posts.find((post) => post.data.featured) ?? posts[0];
+const remainingPosts = featuredPost ? posts.filter((post) => post.id !== featuredPost.id) : [];
+---
+
+<BaseLayout
+  title="Blog | IPTVnator"
+  description="Release notes, tutorials, and project updates from the IPTVnator team."
+  keywords={['IPTVnator blog', 'IPTV release notes', 'EPG, Archive setup', 'Xtream Codes Player (XC)', 'Stalker Player Support (STB)']}
+>
+  <section class="pt-36 pb-24">
+    <div class="mx-auto max-w-6xl px-6">
+      <!-- Header -->
+      <div class="max-w-2xl">
+        <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">
+          Blog
+        </span>
+        <h1 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl">
+          Blog
+        </h1>
+        <p class="mt-4 text-lg text-surface-400">
+          Release notes, tutorials, and project updates.
+        </p>
+      </div>
+
+      {posts.length > 0 ? (
+        <>
+          {/* Featured post */}
+          {featuredPost && (
+            <div class="mt-14">
+              <FeaturedBlogPost
+                title={featuredPost.data.title}
+                description={featuredPost.data.description}
+                pubDate={featuredPost.data.pubDate}
+                slug={featuredPost.id}
+                tags={featuredPost.data.tags}
+                heroImage={featuredPost.data.heroImage}
+              />
+            </div>
+          )}
+
+          {/* Remaining posts grid */}
+          {remainingPosts.length > 0 && (
+            <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+              {remainingPosts.map((post) => (
+                <BlogPostCard
+                  title={post.data.title}
+                  description={post.data.description}
+                  pubDate={post.data.pubDate}
+                  slug={post.id}
+                  tags={post.data.tags}
+                  heroImage={post.data.heroImage}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      ) : (
+        <p class="mt-14 text-center text-surface-500">No posts yet. Check back soon!</p>
+      )}
+    </div>
+  </section>
+</BaseLayout>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
new file mode 100644
index 0000000..4d3a5ab
--- /dev/null
+++ b/apps/website/src/pages/index.astro
@@ -0,0 +1,132 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import Hero from '../components/Hero.astro';
+import FeatureGrid from '../components/FeatureGrid.astro';
+import ScreenshotShowcase from '../components/ScreenshotShowcase.astro';
+import DownloadCTA from '../components/DownloadCTA.astro';
+import SupportSection from '../components/SupportSection.astro';
+import FeaturedBlogPost from '../components/FeaturedBlogPost.astro';
+import BlogPostCard from '../components/BlogPostCard.astro';
+
+const includeDrafts = import.meta.env.DEV || import.meta.env.PUBLIC_INCLUDE_DRAFTS === 'true';
+
+const allPosts = (await getCollection('blog'))
+  .filter((post) => includeDrafts || !post.data.draft)
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+const featuredPost = allPosts.find((post) => post.data.featured) ?? allPosts[0];
+const otherPosts = featuredPost ? allPosts.filter((post) => post.id !== featuredPost.id).slice(0, 2) : [];
+const posts = featuredPost ? [featuredPost, ...otherPosts] : allPosts.slice(0, 3);
+
+const homeSchema = [
+  {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'IPTVnator',
+    url: 'https://4gray.github.io/iptvnator/',
+    description:
+      'A cross-platform IPTV player supporting M3U/M3U8 playlists, Xtream Codes API, and Stalker portals.',
+    inLanguage: 'en',
+  },
+  {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: 'IPTVnator',
+    applicationCategory: 'MultimediaApplication',
+    operatingSystem: 'Windows, macOS, Linux, Web',
+    softwareVersion: '0.19.0',
+    url: 'https://4gray.github.io/iptvnator/',
+    downloadUrl: 'https://github.com/4gray/iptvnator/releases/latest',
+    author: {
+      '@type': 'Person',
+      name: '4gray',
+      url: 'https://github.com/4gray',
+    },
+    sameAs: [
+      'https://github.com/4gray/iptvnator',
+      'https://t.me/iptvnator',
+      'https://ko-fi.com/4gray',
+    ],
+    description:
+      'Open-source IPTV player with M3U/M3U8, Xtream Codes API, and Stalker portal support.',
+  },
+];
+---
+
+<BaseLayout
+  title="IPTVnator - Open Source IPTV Player"
+  description="A cross-platform IPTV player supporting M3U/M3U8 playlists, Xtream Codes API, and Stalker portals. Available as a desktop app and PWA."
+  keywords={['IPTV player', 'M3U', 'M3U8', 'Xtream Codes', 'Stalker portal', 'EPG', 'XMLTV', 'open-source']}
+  jsonLd={homeSchema}
+>
+  <Hero />
+  <FeatureGrid />
+  <ScreenshotShowcase />
+  <DownloadCTA />
+  <SupportSection />
+
+  <!-- Recent Blog Posts -->
+  {
+    posts.length > 0 && (
+      <section class="py-28">
+        <hr class="section-divider mb-28" />
+
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="flex items-end justify-between">
+            <div>
+              <span class="font-mono text-xs uppercase tracking-[0.2em] text-accent-500">
+                Blog
+              </span>
+              <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-surface-50 sm:text-4xl lg:text-5xl">
+                Latest <em class="font-medium text-accent-400" style="font-style: italic;">updates</em>
+              </h2>
+              <p class="mt-4 text-lg text-surface-400">
+                Release notes, tutorials, and project updates.
+              </p>
+            </div>
+            <a
+              href="/iptvnator/blog/"
+              class="hidden items-center gap-1.5 font-mono text-xs uppercase tracking-[0.1em] text-accent-500 transition-colors hover:text-accent-400 sm:inline-flex"
+            >
+              View all posts
+              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+              </svg>
+            </a>
+          </div>
+
+          {/* Featured post */}
+          {featuredPost && (
+            <div class="mt-12">
+              <FeaturedBlogPost
+                title={featuredPost.data.title}
+                description={featuredPost.data.description}
+                pubDate={featuredPost.data.pubDate}
+                slug={featuredPost.id}
+                tags={featuredPost.data.tags}
+                heroImage={featuredPost.data.heroImage}
+              />
+            </div>
+          )}
+
+          {/* Other posts grid */}
+          {otherPosts.length > 0 && (
+            <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+              {otherPosts.map((post) => (
+                <BlogPostCard
+                  title={post.data.title}
+                  description={post.data.description}
+                  pubDate={post.data.pubDate}
+                  slug={post.id}
+                  tags={post.data.tags}
+                  heroImage={post.data.heroImage}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    )
+  }
+</BaseLayout>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
new file mode 100644
index 0000000..9922543
--- /dev/null
+++ b/apps/website/src/styles/global.css
@@ -0,0 +1,447 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-surface-950 text-surface-200 antialiased font-body;
+    background-image:
+      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(32, 168, 168, 0.07), transparent),
+      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
+  }
+
+  ::selection {
+    @apply bg-accent-500/30 text-white;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-1.5;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-surface-600 hover:bg-surface-500;
+  }
+}
+
+@layer components {
+  .section-divider {
+    border: none;
+    border-top: 1px dashed theme('colors.surface.700');
+    @apply mx-auto max-w-5xl;
+  }
+
+  /* Stagger animation: items hidden by default, animate on scroll via IntersectionObserver */
+  .stagger-children > * {
+    @apply opacity-0;
+  }
+  .stagger-children.stagger-visible > * {
+    @apply animate-fade-up;
+  }
+  .stagger-children.stagger-visible > *:nth-child(1) { animation-delay: 0ms; }
+  .stagger-children.stagger-visible > *:nth-child(2) { animation-delay: 80ms; }
+  .stagger-children.stagger-visible > *:nth-child(3) { animation-delay: 160ms; }
+  .stagger-children.stagger-visible > *:nth-child(4) { animation-delay: 240ms; }
+  .stagger-children.stagger-visible > *:nth-child(5) { animation-delay: 320ms; }
+  .stagger-children.stagger-visible > *:nth-child(6) { animation-delay: 400ms; }
+  .stagger-children.stagger-visible > *:nth-child(7) { animation-delay: 480ms; }
+  .stagger-children.stagger-visible > *:nth-child(8) { animation-delay: 560ms; }
+  .stagger-children.stagger-visible > *:nth-child(9) { animation-delay: 640ms; }
+  .stagger-children.stagger-visible > *:nth-child(10) { animation-delay: 720ms; }
+  .stagger-children.stagger-visible > *:nth-child(11) { animation-delay: 800ms; }
+  .stagger-children.stagger-visible > *:nth-child(12) { animation-delay: 880ms; }
+
+  .card-dotted {
+    @apply border border-dashed border-surface-600/60 rounded-lg p-6 transition-all duration-300;
+  }
+  .card-dotted:hover {
+    @apply border-accent-500/40 bg-accent-500/[0.03];
+  }
+
+  /* ── TV-effect download button ── */
+  .btn-tv {
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+    isolation: isolate;
+    border: 1px solid rgba(32, 168, 168, 0.3);
+    background: linear-gradient(135deg, rgba(32, 168, 168, 0.12) 0%, rgba(32, 168, 168, 0.06) 50%, rgba(32, 168, 168, 0.1) 100%);
+    background-size: 180% 180%;
+    background-position: 0% 50%;
+    box-shadow:
+      0 0 20px rgba(32, 168, 168, 0.15),
+      0 0 40px rgba(32, 168, 168, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.06),
+      inset 0 0 20px rgba(32, 168, 168, 0.03);
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: tvIdleGlow 2.1s ease-in-out infinite, tvSurfaceShift 2.8s linear infinite, tvButtonJitter 1.2s steps(2, end) infinite;
+    will-change: transform, box-shadow, background-position;
+  }
+
+  .btn-tv::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 0.34;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(32, 168, 168, 0.03) 2px,
+      rgba(32, 168, 168, 0.03) 4px
+    );
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    animation: tvHorizontalRoll 2.2s linear infinite;
+  }
+
+  .btn-tv::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 0.22;
+    pointer-events: none;
+    mix-blend-mode: screen;
+    background-image:
+      linear-gradient(180deg, rgba(32, 168, 168, 0) 0%, rgba(32, 168, 168, 0.1) 48%, rgba(32, 168, 168, 0) 100%),
+      repeating-linear-gradient(
+        0deg,
+        transparent 0px,
+        transparent 5px,
+        rgba(180, 255, 255, 0.045) 6px,
+        transparent 7px
+      );
+    background-size: 100% 100%, 100% 12px;
+    background-position: 0 0, 0 0;
+    animation: tvInterferenceShift 0.45s steps(14) infinite, tvNoSignalBurst 3.6s steps(1, end) infinite;
+  }
+
+  /* TV scanline sweep overlay */
+  .btn-tv .tv-scanline {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    opacity: 0.75;
+    overflow: hidden;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+
+  .btn-tv .tv-scanline::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 40%;
+    background: linear-gradient(
+      180deg,
+      transparent,
+      rgba(32, 168, 168, 0.08) 40%,
+      rgba(32, 168, 168, 0.12) 50%,
+      rgba(32, 168, 168, 0.08) 60%,
+      transparent
+    );
+    animation: tvScan 1.1s linear infinite;
+  }
+
+  /* Static noise overlay */
+  .btn-tv .tv-noise {
+    position: absolute;
+    inset: -50%;
+    z-index: 3;
+    opacity: 0.08;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
+    background-size: 128px 128px;
+    background-position: 0 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    mix-blend-mode: overlay;
+    animation: tvNoiseDrift 0.55s steps(24) infinite;
+  }
+
+  .btn-tv .tv-noise::after {
+    content: '';
+    position: absolute;
+    top: 48%;
+    left: -38%;
+    width: 34%;
+    height: 1px;
+    border-radius: 9999px;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(32, 168, 168, 0.5) 40%,
+      rgba(155, 255, 255, 0.8) 50%,
+      rgba(32, 168, 168, 0.5) 60%,
+      transparent 100%
+    );
+    box-shadow: 0 0 10px rgba(32, 168, 168, 0.35);
+    opacity: 0.95;
+    height: 2px;
+    animation: tvNoiseLineX 1.15s linear infinite;
+  }
+
+  /* CRT vignette corners */
+  .btn-tv .tv-vignette {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    opacity: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+  }
+
+  /* Hover state: TV turns on */
+  .btn-tv:hover {
+    border-color: rgba(32, 168, 168, 0.5);
+    background: linear-gradient(135deg, rgba(32, 168, 168, 0.18) 0%, rgba(32, 168, 168, 0.08) 50%, rgba(32, 168, 168, 0.15) 100%);
+    box-shadow:
+      0 0 44px rgba(32, 168, 168, 0.45),
+      0 0 100px rgba(32, 168, 168, 0.22),
+      0 0 130px rgba(32, 168, 168, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 0 30px rgba(32, 168, 168, 0.06);
+    transform: translateY(-2px) scale(1.055);
+  }
+
+  .btn-tv:hover::before {
+    opacity: 0.75;
+  }
+
+  .btn-tv:hover::after {
+    opacity: 0.45;
+  }
+
+  .btn-tv:hover .tv-scanline {
+    opacity: 1;
+  }
+
+  .btn-tv:hover .tv-noise {
+    opacity: 0.16;
+    animation: tvNoiseDrift 0.35s steps(30) infinite, tvFlicker 0.08s infinite;
+  }
+
+  .btn-tv:hover .tv-noise::after {
+    opacity: 1;
+    animation-duration: 0.65s;
+  }
+
+  .btn-tv:hover .tv-vignette {
+    opacity: 1;
+  }
+
+  /* Glitch text on hover */
+  .btn-tv:hover .btn-tv-text {
+    text-shadow:
+      2px 0 rgba(32, 168, 168, 0.3),
+      -2px 0 rgba(255, 100, 100, 0.15);
+    animation: tvTextGlitch 4s infinite;
+  }
+
+  .btn-tv .btn-tv-text {
+    animation: tvSubpixelDrift 8s ease-in-out infinite;
+  }
+
+  @keyframes tvTextGlitch {
+    0%, 93%, 100% {
+      text-shadow:
+        0 0 rgba(32, 168, 168, 0),
+        0 0 rgba(255, 100, 100, 0);
+    }
+    94% {
+      text-shadow:
+        2px 0 rgba(32, 168, 168, 0.4),
+        -2px 0 rgba(255, 100, 100, 0.2);
+    }
+    95% {
+      text-shadow:
+        -1px 0 rgba(32, 168, 168, 0.3),
+        1px 0 rgba(255, 100, 100, 0.15);
+    }
+    96% {
+      text-shadow:
+        3px 0 rgba(32, 168, 168, 0.5),
+        -3px 0 rgba(255, 100, 100, 0.25);
+    }
+    97% {
+      text-shadow:
+        0 0 rgba(32, 168, 168, 0),
+        0 0 rgba(255, 100, 100, 0);
+    }
+  }
+
+  @keyframes tvIdleGlow {
+    0%, 100% {
+      box-shadow:
+        0 0 18px rgba(32, 168, 168, 0.14),
+        0 0 36px rgba(32, 168, 168, 0.04),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05),
+        inset 0 0 18px rgba(32, 168, 168, 0.02);
+    }
+    50% {
+      box-shadow:
+        0 0 24px rgba(32, 168, 168, 0.2),
+        0 0 48px rgba(32, 168, 168, 0.07),
+        inset 0 1px 0 rgba(255, 255, 255, 0.07),
+        inset 0 0 24px rgba(32, 168, 168, 0.04);
+    }
+  }
+
+  @keyframes tvSurfaceShift {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  @keyframes tvButtonJitter {
+    0%, 100% {
+      transform: translate3d(0, 0, 0);
+    }
+    20% {
+      transform: translate3d(0.4px, -0.3px, 0);
+    }
+    40% {
+      transform: translate3d(-0.5px, 0.2px, 0);
+    }
+    60% {
+      transform: translate3d(0.3px, 0.1px, 0);
+    }
+    80% {
+      transform: translate3d(-0.2px, -0.2px, 0);
+    }
+  }
+
+  @keyframes tvNoiseDrift {
+    0% {
+      transform: translate3d(-1%, -0.5%, 0) scale(1);
+      background-position: 0 0;
+    }
+    50% {
+      transform: translate3d(1%, 0.8%, 0) scale(1.015);
+      background-position: 22px -18px;
+    }
+    100% {
+      transform: translate3d(-0.5%, -0.2%, 0) scale(1);
+      background-position: 44px -8px;
+    }
+  }
+
+  @keyframes tvNoiseLineX {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(420%);
+    }
+  }
+
+  @keyframes tvHorizontalRoll {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(20px);
+    }
+  }
+
+  @keyframes tvInterferenceShift {
+    0% {
+      transform: translate3d(0, 0, 0);
+      background-position: 0 0, 0 0;
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+      background-position: 0 0, 0 12px;
+    }
+  }
+
+  @keyframes tvNoSignalBurst {
+    0%, 60%, 100% {
+      filter: contrast(1) brightness(1);
+      transform: translate3d(0, 0, 0);
+    }
+    61% {
+      filter: contrast(2.1) brightness(1.35) saturate(1.15);
+      transform: translate3d(1.3%, -0.5%, 0);
+    }
+    62% {
+      filter: contrast(0.72) brightness(0.8) saturate(0.9);
+      transform: translate3d(-1.4%, 0.4%, 0);
+    }
+    63% {
+      filter: contrast(1.6) brightness(1.2) saturate(1.1);
+      transform: translate3d(0.6%, -0.2%, 0);
+    }
+  }
+
+  @keyframes tvSubpixelDrift {
+    0%, 100% {
+      transform: translate3d(0, 0, 0);
+      text-shadow:
+        0 0 rgba(32, 168, 168, 0),
+        0 0 rgba(255, 110, 110, 0);
+    }
+    45% {
+      transform: translate3d(0.1px, 0, 0);
+      text-shadow:
+        0.5px 0 rgba(32, 168, 168, 0.2),
+        -0.5px 0 rgba(255, 110, 110, 0.08);
+    }
+    55% {
+      transform: translate3d(-0.1px, 0, 0);
+      text-shadow:
+        0.4px 0 rgba(32, 168, 168, 0.16),
+        -0.4px 0 rgba(255, 110, 110, 0.06);
+    }
+  }
+
+  /* ── Carousel infinite marquee ── */
+  .carousel-track {
+    animation: marquee 40s linear infinite;
+  }
+
+  .carousel-track:hover {
+    animation-play-state: paused;
+  }
+
+  @keyframes marquee {
+    0%   { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .carousel-track {
+      animation: none;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .btn-tv,
+    .btn-tv::before,
+    .btn-tv::after,
+    .btn-tv .tv-noise,
+    .btn-tv .tv-noise::after,
+    .btn-tv .tv-scanline::after,
+    .btn-tv .btn-tv-text,
+    .btn-tv:hover .btn-tv-text {
+      animation-duration: 16s !important;
+    }
+  }
+}
diff --git a/apps/website/tailwind.config.mjs b/apps/website/tailwind.config.mjs
new file mode 100644
index 0000000..4449fea
--- /dev/null
+++ b/apps/website/tailwind.config.mjs
@@ -0,0 +1,102 @@
+import typography from '@tailwindcss/typography';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        surface: {
+          950: '#0a0a08',
+          900: '#121210',
+          850: '#1a1a17',
+          800: '#22221e',
+          700: '#2e2e28',
+          600: '#3a3a33',
+          500: '#52524a',
+          400: '#6b6b62',
+          300: '#8a8a80',
+          200: '#b0b0a6',
+          100: '#d4d4cc',
+          50: '#f0f0eb',
+        },
+        accent: {
+          950: '#021c1c',
+          900: '#053838',
+          800: '#0a5454',
+          700: '#107070',
+          600: '#178c8c',
+          500: '#20a8a8',
+          400: '#38c4c4',
+          300: '#5ee0e0',
+          200: '#8aecec',
+          100: '#b8f4f4',
+          50: '#e0fafa',
+        },
+        warm: {
+          500: '#d4a853',
+          400: '#e0bc6a',
+          300: '#ecd08a',
+        },
+      },
+      fontFamily: {
+        display: ['"Playfair Display"', 'Georgia', 'serif'],
+        body: ['"DM Sans"', 'system-ui', 'sans-serif'],
+        mono: ['"IBM Plex Mono"', 'monospace'],
+      },
+      fontSize: {
+        '7xl': ['4.5rem', { lineHeight: '1.05', letterSpacing: '-0.03em' }],
+        '8xl': ['6rem', { lineHeight: '1', letterSpacing: '-0.04em' }],
+        '9xl': ['8rem', { lineHeight: '0.95', letterSpacing: '-0.04em' }],
+      },
+      animation: {
+        'fade-up': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
+        'fade-in': 'fadeIn 0.6s ease forwards',
+        'glow-pulse': 'glowPulse 4s ease-in-out infinite',
+        'scan': 'scan 8s linear infinite',
+        'tv-scan': 'tvScan 3s linear infinite',
+        'tv-flicker': 'tvFlicker 0.15s infinite',
+        'tv-glow': 'tvGlow 2s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeUp: {
+          '0%': { opacity: '0', transform: 'translateY(30px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        glowPulse: {
+          '0%, 100%': { opacity: '0.4' },
+          '50%': { opacity: '0.8' },
+        },
+        scan: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(100%)' },
+        },
+        tvScan: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(100%)' },
+        },
+        tvFlicker: {
+          '0%': { opacity: '0.97' },
+          '5%': { opacity: '0.95' },
+          '10%': { opacity: '0.98' },
+          '15%': { opacity: '0.94' },
+          '20%': { opacity: '0.98' },
+          '50%': { opacity: '0.96' },
+          '80%': { opacity: '0.98' },
+          '90%': { opacity: '0.95' },
+          '100%': { opacity: '0.98' },
+        },
+        tvGlow: {
+          '0%, 100%': { boxShadow: '0 0 30px rgba(32, 168, 168, 0.3), 0 0 60px rgba(32, 168, 168, 0.1), inset 0 0 30px rgba(32, 168, 168, 0.05)' },
+          '50%': { boxShadow: '0 0 40px rgba(32, 168, 168, 0.4), 0 0 80px rgba(32, 168, 168, 0.15), inset 0 0 40px rgba(32, 168, 168, 0.08)' },
+        },
+      },
+    },
+  },
+  plugins: [typography],
+};
diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json
new file mode 100644
index 0000000..990abae
--- /dev/null
+++ b/apps/website/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
diff --git a/apps/xtream-mock-server/README.md b/apps/xtream-mock-server/README.md
new file mode 100644
index 0000000..7228c26
--- /dev/null
+++ b/apps/xtream-mock-server/README.md
@@ -0,0 +1,183 @@
+# Xtream Codes Mock Server
+
+A lightweight Express server that simulates the Xtream Codes API for local
+development and end-to-end testing. Uses `@faker-js/faker` with deterministic
+seeding so every credential pair always produces the same data.
+
+---
+
+## Quick Start
+
+```bash
+# Start on port 3211
+pnpm nx run xtream-mock-server:serve
+
+# Start with file-watch (auto-restart on code changes)
+pnpm nx run xtream-mock-server:serve-with-watch
+
+# Start the mock server plus the Electron app
+pnpm run serve:marketing-demo
+
+# Start the mock server plus the browser web app
+pnpm run serve:marketing-demo:web
+```
+
+---
+
+## Available Scenarios (credential pairs)
+
+| Username    | Password    | Scenario               | Live cats | VOD cats | Series cats | Items/cat | Status   |
+| ----------- | ----------- | ---------------------- | --------- | -------- | ----------- | --------- | -------- |
+| `user1`     | `pass1`     | default                | 8         | 8        | 8           | 40        | active   |
+| `large`     | `large`     | large catalog          | 20        | 20       | 20          | 200       | active   |
+| `stress`    | `stress`    | stress catalog         | 16        | 16       | 16          | 120       | active   |
+| `series`    | `series`    | series-heavy           | 3         | 4        | 15          | 30        | active   |
+| `minimal`   | `minimal`   | minimal (edge cases)   | 2         | 2        | 2           | 5         | active   |
+| `epg`       | `epg`       | EPG fixture            | 2         | 1        | 1           | 3         | active   |
+| `emptyvod`  | `emptyvod`  | empty VOD metadata     | 2         | 2        | 2           | 5         | active   |
+| `marketing` | `marketing` | fictional release demo | 4         | 4        | 4           | curated   | active   |
+| `expired`   | `expired`   | expired account        | 4         | 4        | 4           | 10        | Expired  |
+| `inactive`  | `inactive`  | disabled account       | 4         | 4        | 4           | 10        | Disabled |
+
+Any other credential pair is auto-generated using a hash of `username:password` as the faker seed (6 categories, 30 items each, active account).
+
+---
+
+## API Endpoints
+
+### Direct Xtream Protocol
+
+`GET /player_api.php?action=<action>&username=<u>&password=<p>[&...]`
+
+| Action                                   | Description                                         |
+| ---------------------------------------- | --------------------------------------------------- |
+| (none) / `get_account_info`              | User info + server info                             |
+| `get_live_categories`                    | Live TV categories                                  |
+| `get_vod_categories`                     | VOD (movie) categories                              |
+| `get_series_categories`                  | Series categories                                   |
+| `get_live_streams`                       | Live streams (optionally filtered by `category_id`) |
+| `get_vod_streams`                        | VOD streams (optionally filtered by `category_id`)  |
+| `get_series`                             | Series list (optionally filtered by `category_id`)  |
+| `get_vod_info?vod_id=<id>`               | Full movie details                                  |
+| `get_series_info?series_id=<id>`         | Full series info (seasons + episodes)               |
+| `get_short_epg?stream_id=<id>[&limit=N]` | EPG listings for a live channel                     |
+| `get_simple_data_table?stream_id=<id>`   | Full per-channel EPG schedule                       |
+| `get_simple_date_table?stream_id=<id>`   | Legacy typo alias for full per-channel EPG schedule |
+
+### PWA CORS Proxy Endpoint
+
+IPTVnator's PWA routes Xtream calls through a backend proxy:
+
+```
+GET /xtream?url=<serverUrl>&action=<action>&username=<u>&password=<p>
+```
+
+Response: `{ payload: <data>, action: <action> }`
+
+### Stream URLs (stub redirects)
+
+```
+GET /live/<username>/<password>/<streamId>.m3u8  → HLS test stream
+GET /movie/<username>/<password>/<streamId>.<ext> → HLS test stream
+GET /series/<username>/<password>/<streamId>.<ext> → HLS test stream
+```
+
+### Utility Endpoints
+
+```
+GET  /health   → { status: "ok", server: "xtream-mock-server", port: 3211 }
+POST /reset    → clears all in-memory caches; data regenerates on next request
+```
+
+---
+
+## Example Requests
+
+```bash
+# Account info (direct)
+curl "http://localhost:3211/player_api.php?username=user1&password=pass1"
+
+# Live categories (direct)
+curl "http://localhost:3211/player_api.php?username=user1&password=pass1&action=get_live_categories"
+
+# VOD details (direct)
+curl "http://localhost:3211/player_api.php?username=user1&password=pass1&action=get_vod_info&vod_id=20000"
+
+# Series info (direct)
+curl "http://localhost:3211/player_api.php?username=user1&password=pass1&action=get_series_info&series_id=30000"
+
+# EPG for stream (direct)
+curl "http://localhost:3211/player_api.php?username=user1&password=pass1&action=get_short_epg&stream_id=10000"
+
+# Full EPG schedule (direct)
+curl "http://localhost:3211/player_api.php?username=epg&password=epg&action=get_simple_data_table&stream_id=10000"
+
+# Via PWA proxy
+curl "http://localhost:3211/xtream?url=http://localhost:3211&username=user1&password=pass1&action=get_live_categories"
+```
+
+---
+
+## Playwright Integration
+
+The mock server starts automatically with `nx e2e web-e2e`. Run only Xtream
+tests using the `@xtream` tag:
+
+```bash
+nx e2e web-e2e --grep "@xtream"
+```
+
+Test files: `apps/web-e2e/src/xtream.e2e.ts`
+
+Electron Xtream EPG coverage lives in
+`apps/electron-backend-e2e/src/xtream-epg.e2e.ts`.
+
+The Playwright tests use `page.route()` to redirect the app's backend proxy
+calls (`localhost:3000/xtream**`) to the mock server without modifying any
+application code.
+
+---
+
+## Data Characteristics
+
+- **Deterministic**: Same credentials → same data every time (seeded faker)
+- **Cached per session**: Data generated once on first request, reused until `/reset`
+- **EPG**: Titles and descriptions are base64-encoded (matches real Xtream API)
+- **Dedicated EPG fixture**: `epg:epg` returns stable live channels plus deterministic `get_short_epg` and `get_simple_data_table` payloads for timezone-focused tests
+- **Release screenshot fixture**: `marketing:marketing` returns fictional live, VOD, and series data with local generated artwork under `apps/xtream-mock-server/public/marketing`
+- **Timestamp precedence coverage**: The `epg:epg` scenario intentionally shifts raw `start` / `end` strings away from `start_timestamp` / `stop_timestamp` so UI tests can prove timestamps drive rendering
+- **Stream IDs**: Live 10,000+, VOD 20,000+, Series 30,000+
+- **Category IDs**: Live 101+, VOD 201+, Series 301+
+
+---
+
+## Release Demo Artwork
+
+The `marketing:marketing` fixture uses 30 original fictional titles for release
+screenshots. Poster and backdrop PNGs are served from:
+
+```text
+apps/xtream-mock-server/public/marketing/{poster,backdrop}/
+```
+
+Generate or validate those assets with:
+
+```bash
+pnpm release:artwork:dry-run
+pnpm release:artwork:generate
+pnpm release:artwork:validate
+```
+
+`release:artwork:generate` uses `gpt-image-2` through the OpenAI Image API and
+requires `OPENAI_API_KEY`. The screenshot capture workflow only reads committed
+local assets; it does not call OpenAI. If a local PNG is missing, the mock
+server falls back to its deterministic SVG renderer for development continuity.
+The prompt manifest deliberately varies genres and visual media across titles
+so the catalog does not collapse into one superhero/poster style.
+
+---
+
+## Architecture
+
+See `docs/architecture/xtream-mock-server.md` for a full description of the
+data pipeline, response shapes, and extension points.
diff --git a/apps/xtream-mock-server/project.json b/apps/xtream-mock-server/project.json
new file mode 100644
index 0000000..9f1c5d3
--- /dev/null
+++ b/apps/xtream-mock-server/project.json
@@ -0,0 +1,38 @@
+{
+    "name": "xtream-mock-server",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/xtream-mock-server/src",
+    "tags": ["scope:dev-tools"],
+    "targets": {
+        "serve": {
+            "continuous": true,
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "pnpm tsx apps/xtream-mock-server/src/main.ts",
+                "cwd": "{workspaceRoot}",
+                "color": true,
+                "env": {
+                    "PORT": "3211",
+                    "NODE_ENV": "development"
+                }
+            }
+        },
+        "serve-with-watch": {
+            "continuous": true,
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "pnpm tsx watch apps/xtream-mock-server/src/main.ts",
+                "cwd": "{workspaceRoot}",
+                "color": true,
+                "env": {
+                    "PORT": "3211",
+                    "NODE_ENV": "development"
+                }
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/beacon-boy-and-the-clockwork-garden.png b/apps/xtream-mock-server/public/marketing/backdrop/beacon-boy-and-the-clockwork-garden.png
new file mode 100644
index 0000000..03ca7c8
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/beacon-boy-and-the-clockwork-garden.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/captain-kindling.png b/apps/xtream-mock-server/public/marketing/backdrop/captain-kindling.png
new file mode 100644
index 0000000..5bfac31
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/captain-kindling.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/crimson-skylark.png b/apps/xtream-mock-server/public/marketing/backdrop/crimson-skylark.png
new file mode 100644
index 0000000..1f2b9f6
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/crimson-skylark.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/dot-and-the-cloud-train.png b/apps/xtream-mock-server/public/marketing/backdrop/dot-and-the-cloud-train.png
new file mode 100644
index 0000000..a0a43a0
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/dot-and-the-cloud-train.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/masks-of-tomorrow.png b/apps/xtream-mock-server/public/marketing/backdrop/masks-of-tomorrow.png
new file mode 100644
index 0000000..d58bfb5
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/masks-of-tomorrow.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/midnight-mantle.png b/apps/xtream-mock-server/public/marketing/backdrop/midnight-mantle.png
new file mode 100644
index 0000000..fc1dfe1
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/midnight-mantle.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/nova-relay.png b/apps/xtream-mock-server/public/marketing/backdrop/nova-relay.png
new file mode 100644
index 0000000..beb5775
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/nova-relay.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/orbit-of-atlas.png b/apps/xtream-mock-server/public/marketing/backdrop/orbit-of-atlas.png
new file mode 100644
index 0000000..1143397
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/orbit-of-atlas.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/paper-moon-parade.png b/apps/xtream-mock-server/public/marketing/backdrop/paper-moon-parade.png
new file mode 100644
index 0000000..de5230c
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/paper-moon-parade.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/quantum-comet.png b/apps/xtream-mock-server/public/marketing/backdrop/quantum-comet.png
new file mode 100644
index 0000000..e817747
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/quantum-comet.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/signal-tower-seven.png b/apps/xtream-mock-server/public/marketing/backdrop/signal-tower-seven.png
new file mode 100644
index 0000000..a882329
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/signal-tower-seven.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/the-invisible-saturday.png b/apps/xtream-mock-server/public/marketing/backdrop/the-invisible-saturday.png
new file mode 100644
index 0000000..65ab9d5
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/the-invisible-saturday.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/the-voltage-guard.png b/apps/xtream-mock-server/public/marketing/backdrop/the-voltage-guard.png
new file mode 100644
index 0000000..76f65bb
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/the-voltage-guard.png differ
diff --git a/apps/xtream-mock-server/public/marketing/backdrop/tiny-planet-picnic.png b/apps/xtream-mock-server/public/marketing/backdrop/tiny-planet-picnic.png
new file mode 100644
index 0000000..389d6dc
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/backdrop/tiny-planet-picnic.png differ
diff --git a/apps/xtream-mock-server/public/marketing/manifest.json b/apps/xtream-mock-server/public/marketing/manifest.json
new file mode 100644
index 0000000..d1c4264
--- /dev/null
+++ b/apps/xtream-mock-server/public/marketing/manifest.json
@@ -0,0 +1,728 @@
+{
+  "assetRoot": "apps/xtream-mock-server/public/marketing",
+  "assets": [
+    {
+      "contentType": "movie",
+      "filename": "poster/crimson-skylark.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Crimson Skylark\" (2026).\nGenre: Aerial Rescue Adventure.\nStory seed: Every sunrise needs a signal. A high-altitude rescue courier follows sunrise signals through the storm routes above Meridian City.\nVisual direction: an aerial rescue courier navigating storm routes above Meridian City, a solar signal crest glowing in the cloudbreak\nVisual medium and style: golden-hour aerial adventure photography with realistic rescue-drama production design, wind, clouds, practical flight gear, and natural lens flare\nPalette and texture: sunrise coral, storm gray, aviation green, grainy but realistic atmospheric haze\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 single rescue courier against a huge storm sky, diagonal flight path, naturalistic poster photography; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "crimson-skylark",
+      "title": "Crimson Skylark"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/crimson-skylark.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Crimson Skylark\" (2026).\nGenre: Aerial Rescue Adventure.\nStory seed: Every sunrise needs a signal. A high-altitude rescue courier follows sunrise signals through the storm routes above Meridian City.\nVisual direction: an aerial rescue courier navigating storm routes above Meridian City, a solar signal crest glowing in the cloudbreak\nVisual medium and style: golden-hour aerial adventure photography with realistic rescue-drama production design, wind, clouds, practical flight gear, and natural lens flare\nPalette and texture: sunrise coral, storm gray, aviation green, grainy but realistic atmospheric haze\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 vast sky route above a modern city, layered storm clouds, small courier silhouette, breathable horizon; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "crimson-skylark",
+      "title": "Crimson Skylark"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/the-voltage-guard.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The Voltage Guard\" (2025).\nGenre: Disaster Action Thriller.\nStory seed: Power is only heroic when it is shared. Four transit workers race to keep the night trains moving as a thunderstorm turns the city grid unstable.\nVisual direction: transit workers protecting an elevated rail grid from a living thunderstorm, blue-white electricity reflected in wet streets\nVisual medium and style: gritty disaster-thriller photography, rain-soaked infrastructure, documentary realism, sparks, emergency work lights, no fantasy costumes\nPalette and texture: steel blue, sodium orange, wet asphalt black, white electrical flares\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 workers and rail geometry forming a tense action triangle, practical uniforms and tools; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "the-voltage-guard",
+      "title": "The Voltage Guard"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/the-voltage-guard.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The Voltage Guard\" (2025).\nGenre: Disaster Action Thriller.\nStory seed: Power is only heroic when it is shared. Four transit workers race to keep the night trains moving as a thunderstorm turns the city grid unstable.\nVisual direction: transit workers protecting an elevated rail grid from a living thunderstorm, blue-white electricity reflected in wet streets\nVisual medium and style: gritty disaster-thriller photography, rain-soaked infrastructure, documentary realism, sparks, emergency work lights, no fantasy costumes\nPalette and texture: steel blue, sodium orange, wet asphalt black, white electrical flares\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide elevated transit grid under unstable weather, workers small in frame, strong industrial depth; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "the-voltage-guard",
+      "title": "The Voltage Guard"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/midnight-mantle.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Midnight Mantle\" (2024).\nGenre: Gothic Mystery.\nStory seed: The city has one last trick. A retired stage magician investigates a living cloak rumor haunting the old theatre district after dark.\nVisual direction: an old theatre district at night, a mysterious cloak rumor visualized through shadows, marquee light, and rain-soaked cobblestones\nVisual medium and style: gothic noir illustration with theatrical shadow shapes, old print texture, rain, velvet blacks, and painterly mystery atmosphere\nPalette and texture: deep violet, amber marquee light, wet black streets, muted crimson accents\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 theatre silhouette and sweeping cloak as an abstract mystery shape, not a superhero pose; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "midnight-mantle",
+      "title": "Midnight Mantle"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/midnight-mantle.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Midnight Mantle\" (2024).\nGenre: Gothic Mystery.\nStory seed: The city has one last trick. A retired stage magician investigates a living cloak rumor haunting the old theatre district after dark.\nVisual direction: an old theatre district at night, a mysterious cloak rumor visualized through shadows, marquee light, and rain-soaked cobblestones\nVisual medium and style: gothic noir illustration with theatrical shadow shapes, old print texture, rain, velvet blacks, and painterly mystery atmosphere\nPalette and texture: deep violet, amber marquee light, wet black streets, muted crimson accents\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 empty theatre district at night, marquee glow without readable letters, cloak-like shadow crossing rooftops; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "midnight-mantle",
+      "title": "Midnight Mantle"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/quantum-comet.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Quantum Comet\" (2026).\nGenre: Cosmic Science Fiction.\nStory seed: Faster than tomorrow. An orbital cartographer rides a fractured comet trail to stop a time-lost armada.\nVisual direction: an orbital cartographer crossing fractured comet trails beside a time-bent armada, star maps glowing in cold blue light\nVisual medium and style: hard science-fiction concept art with crisp spacecraft detail, star charts, comet ice, scale diagrams, and luminous navigation UI shapes without readable text\nPalette and texture: icy cyan, white comet dust, deep navy, precise magenta navigation glows\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 cartographer figure and fractured comet arc arranged like a scientific expedition poster; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "quantum-comet",
+      "title": "Quantum Comet"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/quantum-comet.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Quantum Comet\" (2026).\nGenre: Cosmic Science Fiction.\nStory seed: Faster than tomorrow. An orbital cartographer rides a fractured comet trail to stop a time-lost armada.\nVisual direction: an orbital cartographer crossing fractured comet trails beside a time-bent armada, star maps glowing in cold blue light\nVisual medium and style: hard science-fiction concept art with crisp spacecraft detail, star charts, comet ice, scale diagrams, and luminous navigation UI shapes without readable text\nPalette and texture: icy cyan, white comet dust, deep navy, precise magenta navigation glows\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide comet trail and distant armada silhouettes, clean negative space around the center; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "quantum-comet",
+      "title": "Quantum Comet"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/orbit-of-atlas.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Orbit of Atlas\" (2025).\nGenre: Cosmic Survival Adventure.\nStory seed: Hold the sky. A rescue pilot navigates a fractured moon orbit long enough for a remote colony to evacuate.\nVisual direction: a rescue pilot navigating a cracked moon orbit over a fragile colony, gravity ribbons bending dust and sunlight\nVisual medium and style: epic cosmic survival painting with mineral surfaces, colony lights, gravitational dust ribbons, and solemn scale\nPalette and texture: burnt gold, moon gray, dusty umber, cold blue space shadows\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 small rescue pilot dwarfed by a cracked moon, monumental survival mood; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "orbit-of-atlas",
+      "title": "Orbit of Atlas"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/orbit-of-atlas.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Orbit of Atlas\" (2025).\nGenre: Cosmic Survival Adventure.\nStory seed: Hold the sky. A rescue pilot navigates a fractured moon orbit long enough for a remote colony to evacuate.\nVisual direction: a rescue pilot navigating a cracked moon orbit over a fragile colony, gravity ribbons bending dust and sunlight\nVisual medium and style: epic cosmic survival painting with mineral surfaces, colony lights, gravitational dust ribbons, and solemn scale\nPalette and texture: burnt gold, moon gray, dusty umber, cold blue space shadows\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 fractured moon over a remote colony, dust and sunlight bending in wide arcs; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "orbit-of-atlas",
+      "title": "Orbit of Atlas"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/nova-relay.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Nova Relay\" (2023).\nGenre: Space Opera.\nStory seed: The message arrives in light. Twin signal runners cross a star bridge to deliver the last warning before a solar network goes dark.\nVisual direction: twin signal runners racing across a luminous star bridge, urgent light messages streaking toward a blue planet\nVisual medium and style: sleek space-opera animation art with clean silhouettes, radiant motion trails, glossy star-bridge architecture, and optimistic color\nPalette and texture: electric teal, royal blue, white light trails, warm planetary glow\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 twin runners crossing a luminous bridge with strong graphic diagonals; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "nova-relay",
+      "title": "Nova Relay"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/nova-relay.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Nova Relay\" (2023).\nGenre: Space Opera.\nStory seed: The message arrives in light. Twin signal runners cross a star bridge to deliver the last warning before a solar network goes dark.\nVisual direction: twin signal runners racing across a luminous star bridge, urgent light messages streaking toward a blue planet\nVisual medium and style: sleek space-opera animation art with clean silhouettes, radiant motion trails, glossy star-bridge architecture, and optimistic color\nPalette and texture: electric teal, royal blue, white light trails, warm planetary glow\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 star bridge leading toward a blue planet, two tiny figures and sweeping light messages; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "nova-relay",
+      "title": "Nova Relay"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/beacon-boy-and-the-clockwork-garden.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Beacon Boy and the Clockwork Garden\" (2026).\nGenre: Animated Family Fantasy.\nStory seed: Small heroes grow tall. A young inventor and his grandmother awaken a garden of mechanical guardians beneath the city park.\nVisual direction: a young inventor and grandmother discovering mechanical garden guardians under a city park, brass leaves and gentle lantern light\nVisual medium and style: storybook 3D animated fantasy, handmade brass mechanisms, moss, warm lantern light, rounded forms, and tactile toy-like detail\nPalette and texture: moss green, brass gold, warm amber, soft twilight blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 young inventor, grandmother, and clockwork garden guardian in a warm discovery tableau; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "beacon-boy-and-the-clockwork-garden",
+      "title": "Beacon Boy and the Clockwork Garden"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/beacon-boy-and-the-clockwork-garden.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Beacon Boy and the Clockwork Garden\" (2026).\nGenre: Animated Family Fantasy.\nStory seed: Small heroes grow tall. A young inventor and his grandmother awaken a garden of mechanical guardians beneath the city park.\nVisual direction: a young inventor and grandmother discovering mechanical garden guardians under a city park, brass leaves and gentle lantern light\nVisual medium and style: storybook 3D animated fantasy, handmade brass mechanisms, moss, warm lantern light, rounded forms, and tactile toy-like detail\nPalette and texture: moss green, brass gold, warm amber, soft twilight blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 hidden underground garden with gears, vines, lanterns, and gentle mechanical guardians; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "beacon-boy-and-the-clockwork-garden",
+      "title": "Beacon Boy and the Clockwork Garden"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/the-invisible-saturday.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The Invisible Saturday\" (2024).\nGenre: Family, Adventure.\nStory seed: Seen or unseen, courage counts. Two siblings learn to turn invisible every Saturday and use the gift to save their neighborhood fair.\nVisual direction: two adventurous siblings at a neighborhood fair where only their footprints, floating ribbons, and playful shadows reveal them\nVisual medium and style: bright claymation-inspired family comedy, miniature fairground sets, visible handmade textures, playful invisible-person gags\nPalette and texture: cotton-candy pink, sunny yellow, grass green, soft sky blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 floating ribbons, footprints, and balloons implying invisible siblings at a fair; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "the-invisible-saturday",
+      "title": "The Invisible Saturday"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/the-invisible-saturday.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The Invisible Saturday\" (2024).\nGenre: Family, Adventure.\nStory seed: Seen or unseen, courage counts. Two siblings learn to turn invisible every Saturday and use the gift to save their neighborhood fair.\nVisual direction: two adventurous siblings at a neighborhood fair where only their footprints, floating ribbons, and playful shadows reveal them\nVisual medium and style: bright claymation-inspired family comedy, miniature fairground sets, visible handmade textures, playful invisible-person gags\nPalette and texture: cotton-candy pink, sunny yellow, grass green, soft sky blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide neighborhood fair scene with playful impossible traces and generous open sky; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "the-invisible-saturday",
+      "title": "The Invisible Saturday"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/captain-kindling.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Captain Kindling\" (2022).\nGenre: Animated Family Comedy.\nStory seed: A spark can lead the way. A camp counselor with ember-bright powers teaches a team of misfits how to protect a forest town.\nVisual direction: a forest camp at dusk with ember-bright protective magic, young misfit campers gathered around a warm heroic spark\nVisual medium and style: warm hand-painted camping comedy illustration, cozy forest dusk, ember glow, imperfect brush texture, gentle humor\nPalette and texture: campfire orange, pine green, twilight purple, warm tan canvas\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 camp counselor spark and misfit camper silhouettes around a glowing clearing; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "captain-kindling",
+      "title": "Captain Kindling"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/captain-kindling.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Captain Kindling\" (2022).\nGenre: Animated Family Comedy.\nStory seed: A spark can lead the way. A camp counselor with ember-bright powers teaches a team of misfits how to protect a forest town.\nVisual direction: a forest camp at dusk with ember-bright protective magic, young misfit campers gathered around a warm heroic spark\nVisual medium and style: warm hand-painted camping comedy illustration, cozy forest dusk, ember glow, imperfect brush texture, gentle humor\nPalette and texture: campfire orange, pine green, twilight purple, warm tan canvas\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide forest camp at dusk with cabin lights, ember trails, and friendly wilderness depth; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "captain-kindling",
+      "title": "Captain Kindling"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/paper-moon-parade.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Paper Moon Parade\" (2026).\nGenre: Flat Kids Fantasy.\nStory seed: Fold the night into wonder. A paper-cut moon rolls through a tiny town and invites every shy child to join a midnight parade.\nVisual direction: a flat paper-cut moon rolling through a tiny town with simple parade shapes and shy children joining in\nVisual medium and style: simple flat paper-cut illustration for children, large clean shapes, visible paper grain, gentle handmade collage, no realistic rendering\nPalette and texture: midnight blue, butter yellow, pale lavender, soft coral, warm paper white\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 big smiling paper moon, tiny town silhouettes, parade shapes, lots of clean negative space; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "paper-moon-parade",
+      "title": "Paper Moon Parade"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/paper-moon-parade.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Paper Moon Parade\" (2026).\nGenre: Flat Kids Fantasy.\nStory seed: Fold the night into wonder. A paper-cut moon rolls through a tiny town and invites every shy child to join a midnight parade.\nVisual direction: a flat paper-cut moon rolling through a tiny town with simple parade shapes and shy children joining in\nVisual medium and style: simple flat paper-cut illustration for children, large clean shapes, visible paper grain, gentle handmade collage, no realistic rendering\nPalette and texture: midnight blue, butter yellow, pale lavender, soft coral, warm paper white\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide paper-cut town street under a rolling moon with simple parade banners and sparse stars; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "paper-moon-parade",
+      "title": "Paper Moon Parade"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/dot-and-the-cloud-train.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Dot and the Cloud Train\" (2025).\nGenre: Preschool Cartoon Adventure.\nStory seed: Every stop is a color. A small dot boards a soft cloud train and learns the colors of weather with a group of round little friends.\nVisual direction: a small dot boarding a soft cloud train that stops at simple weather-color stations\nVisual medium and style: ultra-simple preschool cartoon, rounded vector shapes, soft gradients, thick friendly outlines, very low detail\nPalette and texture: sky blue, marshmallow white, lemon yellow, strawberry pink, mint green\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 small dot character stepping onto a rounded cloud train, clear simple shapes for young kids; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "dot-and-the-cloud-train",
+      "title": "Dot and the Cloud Train"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/dot-and-the-cloud-train.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Dot and the Cloud Train\" (2025).\nGenre: Preschool Cartoon Adventure.\nStory seed: Every stop is a color. A small dot boards a soft cloud train and learns the colors of weather with a group of round little friends.\nVisual direction: a small dot boarding a soft cloud train that stops at simple weather-color stations\nVisual medium and style: ultra-simple preschool cartoon, rounded vector shapes, soft gradients, thick friendly outlines, very low detail\nPalette and texture: sky blue, marshmallow white, lemon yellow, strawberry pink, mint green\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide pastel sky with a cloud train crossing simple weather-color stops; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "dot-and-the-cloud-train",
+      "title": "Dot and the Cloud Train"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/tiny-planet-picnic.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Tiny Planet Picnic\" (2024).\nGenre: Simple Family Sci-Fi Cartoon.\nStory seed: Pack a lunch for the stars. Three children prepare a picnic on a pocket-sized planet where flowers orbit like friendly satellites.\nVisual direction: children preparing a picnic on a pocket-sized planet where flowers orbit like friendly satellites\nVisual medium and style: minimal flat family sci-fi cartoon, clean vector-like shapes, playful scale, sparse details, soft geometric planets\nPalette and texture: peach, teal, lilac, sunny yellow, deep space blue used sparingly\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 three children on a tiny round planet with picnic blanket and orbiting flowers; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "tiny-planet-picnic",
+      "title": "Tiny Planet Picnic"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/tiny-planet-picnic.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Tiny Planet Picnic\" (2024).\nGenre: Simple Family Sci-Fi Cartoon.\nStory seed: Pack a lunch for the stars. Three children prepare a picnic on a pocket-sized planet where flowers orbit like friendly satellites.\nVisual direction: children preparing a picnic on a pocket-sized planet where flowers orbit like friendly satellites\nVisual medium and style: minimal flat family sci-fi cartoon, clean vector-like shapes, playful scale, sparse details, soft geometric planets\nPalette and texture: peach, teal, lilac, sunny yellow, deep space blue used sparingly\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide tiny planet landscape with flowers orbiting like satellites and open simple sky; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "tiny-planet-picnic",
+      "title": "Tiny Planet Picnic"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/masks-of-tomorrow.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Masks of Tomorrow\" (2025).\nGenre: Creative Documentary.\nStory seed: Behind every emblem is a city. A fictional documentary profile of costume makers, signal engineers, and citizens building a city festival from scratch.\nVisual direction: costume makers, signal engineers, and citizens preparing original hero emblems in a workshop filled with fabric, tools, and soft window light\nVisual medium and style: fashion-documentary editorial photography, fabric tables, workshop tools, mirrors, fittings, and soft daylight realism\nPalette and texture: cream fabric, graphite tools, tomato red thread, daylight blue shadows\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 hands, mannequins, and unfinished masks arranged as an editorial magazine cover image; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "masks-of-tomorrow",
+      "title": "Masks of Tomorrow"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/masks-of-tomorrow.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Masks of Tomorrow\" (2025).\nGenre: Creative Documentary.\nStory seed: Behind every emblem is a city. A fictional documentary profile of costume makers, signal engineers, and citizens building a city festival from scratch.\nVisual direction: costume makers, signal engineers, and citizens preparing original hero emblems in a workshop filled with fabric, tools, and soft window light\nVisual medium and style: fashion-documentary editorial photography, fabric tables, workshop tools, mirrors, fittings, and soft daylight realism\nPalette and texture: cream fabric, graphite tools, tomato red thread, daylight blue shadows\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 busy workshop with textiles and signal equipment, human craft details, no logo marks; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "masks-of-tomorrow",
+      "title": "Masks of Tomorrow"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/signal-tower-seven.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Signal Tower Seven\" (2023).\nGenre: Retro Rescue Drama.\nStory seed: Not all heroes fly. A retro-styled chronicle of radio operators who coordinate mountain rescues during a record winter blackout.\nVisual direction: retro radio operators coordinating rescues from a tall signal room, analog dials, maps, and amber emergency light\nVisual medium and style: retro 1970s disaster-drama poster art, analog radio equipment, snowy mountain rescue maps, screen-print texture\nPalette and texture: faded mustard, radio-room brown, emergency red, winter blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 radio operator profile, signal tower, and storm map shapes in vintage rescue-drama layout; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "signal-tower-seven",
+      "title": "Signal Tower Seven"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/signal-tower-seven.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Signal Tower Seven\" (2023).\nGenre: Retro Rescue Drama.\nStory seed: Not all heroes fly. A retro-styled chronicle of radio operators who coordinate mountain rescues during a record winter blackout.\nVisual direction: retro radio operators coordinating rescues from a tall signal room, analog dials, maps, and amber emergency light\nVisual medium and style: retro 1970s disaster-drama poster art, analog radio equipment, snowy mountain rescue maps, screen-print texture\nPalette and texture: faded mustard, radio-room brown, emergency red, winter blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide analog signal room overlooking winter mountains and storm lights; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "signal-tower-seven",
+      "title": "Signal Tower Seven"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/the-league-of-lanterns.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The League of Lanterns\" (2024).\nGenre: Human Interest Documentary.\nStory seed: When the grid fails, people glow. A narrated archive of a volunteer lantern network that lights safe paths during impossible blackouts.\nVisual direction: volunteers carrying lanterns through an impossible blackout, safe glowing paths forming across city streets\nVisual medium and style: human-interest documentary photography with natural faces, handheld lanterns, dark streets, and hopeful realism\nPalette and texture: blackout navy, lantern gold, brick red, soft skin tones\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 volunteers carrying lanterns through darkness, intimate eye-level composition; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "the-league-of-lanterns",
+      "title": "The League of Lanterns"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/the-league-of-lanterns.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The League of Lanterns\" (2024).\nGenre: Human Interest Documentary.\nStory seed: When the grid fails, people glow. A narrated archive of a volunteer lantern network that lights safe paths during impossible blackouts.\nVisual direction: volunteers carrying lanterns through an impossible blackout, safe glowing paths forming across city streets\nVisual medium and style: human-interest documentary photography with natural faces, handheld lanterns, dark streets, and hopeful realism\nPalette and texture: blackout navy, lantern gold, brick red, soft skin tones\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide city block during blackout with lantern paths and community silhouettes; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "the-league-of-lanterns",
+      "title": "The League of Lanterns"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/the-quiet-aquarium.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The Quiet Aquarium\" (2026).\nGenre: Abstract Meditative Drama.\nStory seed: Silence has currents. An abstract night watch follows drifting shapes, quiet visitors, and glowing tanks inside a closed city aquarium.\nVisual direction: abstract glowing aquarium tanks after closing time, drifting shapes, quiet visitors, and calm water-light\nVisual medium and style: abstract meditative poster art, flat translucent shapes, slow gradients, simplified fish silhouettes, calm museum-like composition\nPalette and texture: deep sea blue, glass cyan, muted violet, soft black, small coral accents\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 large abstract aquarium window with drifting shapes and one quiet visitor silhouette; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "the-quiet-aquarium",
+      "title": "The Quiet Aquarium"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/the-quiet-aquarium.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"The Quiet Aquarium\" (2026).\nGenre: Abstract Meditative Drama.\nStory seed: Silence has currents. An abstract night watch follows drifting shapes, quiet visitors, and glowing tanks inside a closed city aquarium.\nVisual direction: abstract glowing aquarium tanks after closing time, drifting shapes, quiet visitors, and calm water-light\nVisual medium and style: abstract meditative poster art, flat translucent shapes, slow gradients, simplified fish silhouettes, calm museum-like composition\nPalette and texture: deep sea blue, glass cyan, muted violet, soft black, small coral accents\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide closed aquarium interior with glowing tanks, drifting abstract fish shapes, and quiet negative space; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "the-quiet-aquarium",
+      "title": "The Quiet Aquarium"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/square-city-sonata.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Square City Sonata\" (2023).\nGenre: Abstract Musical.\nStory seed: Every corner keeps time. Blocks, windows, crosswalks, and streetlights become a geometric city symphony over one bright afternoon.\nVisual direction: geometric blocks, windows, crosswalks, and streetlights arranged as a flat city symphony\nVisual medium and style: Bauhaus-inspired abstract musical city art, flat geometric blocks, no perspective realism, rhythmic rectangles and circles\nPalette and texture: cream, brick red, cobalt blue, mustard yellow, charcoal\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 stacked city blocks, windows, and circles arranged like a musical score; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "square-city-sonata",
+      "title": "Square City Sonata"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/square-city-sonata.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Square City Sonata\" (2023).\nGenre: Abstract Musical.\nStory seed: Every corner keeps time. Blocks, windows, crosswalks, and streetlights become a geometric city symphony over one bright afternoon.\nVisual direction: geometric blocks, windows, crosswalks, and streetlights arranged as a flat city symphony\nVisual medium and style: Bauhaus-inspired abstract musical city art, flat geometric blocks, no perspective realism, rhythmic rectangles and circles\nPalette and texture: cream, brick red, cobalt blue, mustard yellow, charcoal\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide geometric city grid with crosswalk rhythms and streetlight circles across a flat afternoon; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "square-city-sonata",
+      "title": "Square City Sonata"
+    },
+    {
+      "contentType": "movie",
+      "filename": "poster/lanterns-under-snow.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Lanterns Under Snow\" (2022).\nGenre: Minimalist Folk Tale.\nStory seed: Small lights travel far. A minimalist winter tale about neighbors carrying warm paper lanterns across a silent hill town.\nVisual direction: neighbors carrying warm paper lanterns across a silent snowy hill town\nVisual medium and style: minimal winter folk illustration, flat shapes, quiet negative space, soft paper texture, restrained detail\nPalette and texture: snow white, ink navy, lantern amber, muted pine green, pale gray\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 single warm lantern path climbing a snowy hill town with small simple figures; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "lanterns-under-snow",
+      "title": "Lanterns Under Snow"
+    },
+    {
+      "contentType": "movie",
+      "filename": "backdrop/lanterns-under-snow.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional movie: \"Lanterns Under Snow\" (2022).\nGenre: Minimalist Folk Tale.\nStory seed: Small lights travel far. A minimalist winter tale about neighbors carrying warm paper lanterns across a silent hill town.\nVisual direction: neighbors carrying warm paper lanterns across a silent snowy hill town\nVisual medium and style: minimal winter folk illustration, flat shapes, quiet negative space, soft paper texture, restrained detail\nPalette and texture: snow white, ink navy, lantern amber, muted pine green, pale gray\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide snowy hillside town with sparse houses, paper lantern dots, and a calm empty sky; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "lanterns-under-snow",
+      "title": "Lanterns Under Snow"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/skyline-sentinels.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Skyline Sentinels\" (2025).\nGenre: Urban Ensemble Drama.\nStory seed: The city looks up. A young maintenance crew patrols the rooftops, rails, and river bridges of Meridian City.\nVisual direction: a young rooftop rescue team watching rails, bridges, and river lights from high above Meridian City at sunrise\nVisual medium and style: urban infrastructure drama photography, maintenance crew realism, rooftops, rails, bridge cables, sunrise work shift mood\nPalette and texture: concrete gray, safety yellow, sunrise peach, river blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 young maintenance crew on a roof with tools and city geometry, not heroic costumes; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "skyline-sentinels",
+      "title": "Skyline Sentinels"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/skyline-sentinels.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Skyline Sentinels\" (2025).\nGenre: Urban Ensemble Drama.\nStory seed: The city looks up. A young maintenance crew patrols the rooftops, rails, and river bridges of Meridian City.\nVisual direction: a young rooftop rescue team watching rails, bridges, and river lights from high above Meridian City at sunrise\nVisual medium and style: urban infrastructure drama photography, maintenance crew realism, rooftops, rails, bridge cables, sunrise work shift mood\nPalette and texture: concrete gray, safety yellow, sunrise peach, river blue\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide rooftop and bridge panorama with work lights and morning haze; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "skyline-sentinels",
+      "title": "Skyline Sentinels"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/the-aegis-club.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"The Aegis Club\" (2024).\nGenre: Workplace Dramedy.\nStory seed: Legacy is a living room. Retired public servants reopen an old social club and mentor the next generation between neighborhood emergencies.\nVisual direction: retired heroes in a restored neighborhood social club, worn memorabilia, warm lamps, and a new generation training nearby\nVisual medium and style: warm workplace dramedy photography, neighborhood social club interiors, old wood, mismatched chairs, trophies, candid ensemble energy\nPalette and texture: walnut brown, faded green upholstery, brass lamps, soft cream walls\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 group around an old club table with lived-in props and gentle humor; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "the-aegis-club",
+      "title": "The Aegis Club"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/the-aegis-club.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"The Aegis Club\" (2024).\nGenre: Workplace Dramedy.\nStory seed: Legacy is a living room. Retired public servants reopen an old social club and mentor the next generation between neighborhood emergencies.\nVisual direction: retired heroes in a restored neighborhood social club, worn memorabilia, warm lamps, and a new generation training nearby\nVisual medium and style: warm workplace dramedy photography, neighborhood social club interiors, old wood, mismatched chairs, trophies, candid ensemble energy\nPalette and texture: walnut brown, faded green upholstery, brass lamps, soft cream walls\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide social club room with training area, memorabilia, and warm lamps; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "the-aegis-club",
+      "title": "The Aegis Club"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/starfall-academy.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Starfall Academy\" (2026).\nGenre: Animated Space School.\nStory seed: Homework can save a planet. Cadets with unruly science experiments learn rescue work on a school ship near the asteroid belt.\nVisual direction: cadets with unstable cosmic powers aboard a school ship near the asteroid belt, classroom windows filled with stars\nVisual medium and style: colorful anime-inspired space-school illustration with expressive cadets, school-ship corridors, science experiments, and star windows\nPalette and texture: bubblegum pink, starship white, asteroid gray, neon mint\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 cadets and floating school equipment in dynamic anime school-club composition; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "starfall-academy",
+      "title": "Starfall Academy"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/starfall-academy.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Starfall Academy\" (2026).\nGenre: Animated Space School.\nStory seed: Homework can save a planet. Cadets with unruly science experiments learn rescue work on a school ship near the asteroid belt.\nVisual direction: cadets with unstable cosmic powers aboard a school ship near the asteroid belt, classroom windows filled with stars\nVisual medium and style: colorful anime-inspired space-school illustration with expressive cadets, school-ship corridors, science experiments, and star windows\nPalette and texture: bubblegum pink, starship white, asteroid gray, neon mint\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide school-ship classroom near asteroid belt with desks, windows, and drifting experiment lights; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "starfall-academy",
+      "title": "Starfall Academy"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/tomorrow-bureau.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Tomorrow Bureau\" (2025).\nGenre: Science Fiction, Thriller.\nStory seed: The future files first. Analysts with one-day foresight prevent disasters while trying not to rewrite their own lives.\nVisual direction: future analysts in a glass-walled operations room sorting one-day-ahead disaster files, clocks and reflections layered across the scene\nVisual medium and style: minimalist bureaucratic sci-fi thriller, glass offices, files, clocks, reflection grids, restrained corporate unease\nPalette and texture: frosted glass, desaturated teal, paper white, warning red pinpoints\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 analyst silhouette amid files and clocks, clean tense graphic composition; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "tomorrow-bureau",
+      "title": "Tomorrow Bureau"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/tomorrow-bureau.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Tomorrow Bureau\" (2025).\nGenre: Science Fiction, Thriller.\nStory seed: The future files first. Analysts with one-day foresight prevent disasters while trying not to rewrite their own lives.\nVisual direction: future analysts in a glass-walled operations room sorting one-day-ahead disaster files, clocks and reflections layered across the scene\nVisual medium and style: minimalist bureaucratic sci-fi thriller, glass offices, files, clocks, reflection grids, restrained corporate unease\nPalette and texture: frosted glass, desaturated teal, paper white, warning red pinpoints\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide operations room with glass walls, layered clock reflections, and negative space; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "tomorrow-bureau",
+      "title": "Tomorrow Bureau"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/alley-mask.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Alley Mask\" (2023).\nGenre: Street Noir Mystery.\nStory seed: Every shortcut has a secret. A bike courier investigates strange coded signals appearing in the city alleys.\nVisual direction: a bike courier stepping through deep city shadows while following strange signal glyphs in narrow alleys after rain\nVisual medium and style: neo-noir street photography, bicycle courier realism, coded light marks, wet alleys, handheld camera energy\nPalette and texture: wet asphalt, sodium yellow, deep green shadows, chalk-white signal marks\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 bike courier and alley geometry, face partly obscured by ordinary rain gear, grounded mystery; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "alley-mask",
+      "title": "Alley Mask"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/alley-mask.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Alley Mask\" (2023).\nGenre: Street Noir Mystery.\nStory seed: Every shortcut has a secret. A bike courier investigates strange coded signals appearing in the city alleys.\nVisual direction: a bike courier stepping through deep city shadows while following strange signal glyphs in narrow alleys after rain\nVisual medium and style: neo-noir street photography, bicycle courier realism, coded light marks, wet alleys, handheld camera energy\nPalette and texture: wet asphalt, sodium yellow, deep green shadows, chalk-white signal marks\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide narrow alley after rain with coded signal glyphs and long perspective; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "alley-mask",
+      "title": "Alley Mask"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/neon-sparrow.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Neon Sparrow\" (2024).\nGenre: Cyberpunk Mystery.\nStory seed: Small wings, bright city. A rooftop messenger follows glowing clues that only appear after midnight rain.\nVisual direction: a rooftop messenger following glowing clues that appear in midnight rain, neon reflections and small bright wing motifs\nVisual medium and style: stylized cyberpunk graphic novel art, rooftop rain, neon clue trails, birdlike light motifs, bold ink shapes\nPalette and texture: magenta neon, cyan rain, black ink, pale green glow\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 rooftop messenger and sparrow-like light trail in bold graphic silhouette; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "neon-sparrow",
+      "title": "Neon Sparrow"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/neon-sparrow.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Neon Sparrow\" (2024).\nGenre: Cyberpunk Mystery.\nStory seed: Small wings, bright city. A rooftop messenger follows glowing clues that only appear after midnight rain.\nVisual direction: a rooftop messenger following glowing clues that appear in midnight rain, neon reflections and small bright wing motifs\nVisual medium and style: stylized cyberpunk graphic novel art, rooftop rain, neon clue trails, birdlike light motifs, bold ink shapes\nPalette and texture: magenta neon, cyan rain, black ink, pale green glow\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide rain-soaked rooftop cityscape with glowing clues and open sky; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "neon-sparrow",
+      "title": "Neon Sparrow"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/cape-makers.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Cape Makers\" (2024).\nGenre: Mockumentary, Design.\nStory seed: Every symbol is handmade. A fictional behind-the-scenes series about the tailors, engineers, and artists who design stage gear.\nVisual direction: tailors, engineers, and artists building original stage gear in a busy design studio, fabric tests and hand-built emblems everywhere\nVisual medium and style: behind-the-scenes craft docuseries photography, sewing machines, engineering benches, stage fabric, candid hands-at-work details\nPalette and texture: indigo cloth, warm workshop bulbs, steel tools, chalk marks\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 tailors and engineers at work around stage gear, tactile documentary composition; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "cape-makers",
+      "title": "Cape Makers"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/cape-makers.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Cape Makers\" (2024).\nGenre: Mockumentary, Design.\nStory seed: Every symbol is handmade. A fictional behind-the-scenes series about the tailors, engineers, and artists who design stage gear.\nVisual direction: tailors, engineers, and artists building original stage gear in a busy design studio, fabric tests and hand-built emblems everywhere\nVisual medium and style: behind-the-scenes craft docuseries photography, sewing machines, engineering benches, stage fabric, candid hands-at-work details\nPalette and texture: indigo cloth, warm workshop bulbs, steel tools, chalk marks\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide busy design studio with fabric rolls, benches, sketches without readable text; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "cape-makers",
+      "title": "Cape Makers"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/citizens-of-the-beacon.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Citizens of the Beacon\" (2022).\nGenre: Mockumentary, Human Interest.\nStory seed: A city can be a hero too. Ordinary residents tell the stories behind a citywide rescue network built after the first beacon lit.\nVisual direction: ordinary residents maintaining a citywide rescue network after the first beacon, hopeful faces lit by practical signal lamps\nVisual medium and style: quiet social documentary photography, ordinary residents, practical signal lamps, neighborhood streets, compassionate realism\nPalette and texture: lamp amber, dusk blue, concrete gray, muted household colors\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 ordinary residents around a beacon lamp, intimate human-interest portrait; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "citizens-of-the-beacon",
+      "title": "Citizens of the Beacon"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/citizens-of-the-beacon.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Citizens of the Beacon\" (2022).\nGenre: Mockumentary, Human Interest.\nStory seed: A city can be a hero too. Ordinary residents tell the stories behind a citywide rescue network built after the first beacon lit.\nVisual direction: ordinary residents maintaining a citywide rescue network after the first beacon, hopeful faces lit by practical signal lamps\nVisual medium and style: quiet social documentary photography, ordinary residents, practical signal lamps, neighborhood streets, compassionate realism\nPalette and texture: lamp amber, dusk blue, concrete gray, muted household colors\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide neighborhood rescue network at dusk with lamps in windows and street corners; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "citizens-of-the-beacon",
+      "title": "Citizens of the Beacon"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/bubble-street-workshop.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Bubble Street Workshop\" (2026).\nGenre: Flat Kids Craft Cartoon.\nStory seed: Round ideas roll further. Neighbors build simple inventions from circles, paper, and string in a cheerful street workshop.\nVisual direction: neighbors building simple inventions from circles, paper, string, and bright workshop tables\nVisual medium and style: flat kids craft cartoon, simple circles and paper shapes, playful handmade textures, bright but not busy\nPalette and texture: bubblegum pink, craft paper tan, sky blue, crayon green, sunflower yellow\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 round neighbors building a simple invention from paper, string, and circles; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "bubble-street-workshop",
+      "title": "Bubble Street Workshop"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/bubble-street-workshop.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Bubble Street Workshop\" (2026).\nGenre: Flat Kids Craft Cartoon.\nStory seed: Round ideas roll further. Neighbors build simple inventions from circles, paper, and string in a cheerful street workshop.\nVisual direction: neighbors building simple inventions from circles, paper, string, and bright workshop tables\nVisual medium and style: flat kids craft cartoon, simple circles and paper shapes, playful handmade textures, bright but not busy\nPalette and texture: bubblegum pink, craft paper tan, sky blue, crayon green, sunflower yellow\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide cheerful street workshop with tables, bubbles, paper circles, and open simple storefront shapes; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "bubble-street-workshop",
+      "title": "Bubble Street Workshop"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/flatland-detectives.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Flatland Detectives\" (2025).\nGenre: Geometric Mystery Comedy.\nStory seed: Every clue has a shape. Two geometric detectives solve gentle neighborhood mysteries using maps, shadows, and shape clues.\nVisual direction: two geometric detectives solving gentle neighborhood mysteries using maps, shadows, and shape clues\nVisual medium and style: flat geometric mystery comedy, shape-language characters, simple shadows, crisp poster design, no realism\nPalette and texture: warm gray, detective orange, navy, cream, clue green\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 two geometric detectives inspecting a simple shape clue with playful noir lighting; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "flatland-detectives",
+      "title": "Flatland Detectives"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/flatland-detectives.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Flatland Detectives\" (2025).\nGenre: Geometric Mystery Comedy.\nStory seed: Every clue has a shape. Two geometric detectives solve gentle neighborhood mysteries using maps, shadows, and shape clues.\nVisual direction: two geometric detectives solving gentle neighborhood mysteries using maps, shadows, and shape clues\nVisual medium and style: flat geometric mystery comedy, shape-language characters, simple shadows, crisp poster design, no realism\nPalette and texture: warm gray, detective orange, navy, cream, clue green\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide flat neighborhood map scene with shadows, arrows, and geometric clues; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "flatland-detectives",
+      "title": "Flatland Detectives"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/color-orchard.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Color Orchard\" (2024).\nGenre: Preschool Nature Cartoon.\nStory seed: Pick a color, grow a song. A preschool orchard changes color each morning while tiny caretakers learn seasons, sharing, and sound.\nVisual direction: a preschool orchard changing color each morning while tiny caretakers learn seasons and sound\nVisual medium and style: preschool nature cartoon, very simple flat rounded shapes, soft friendly faces implied by objects, low detail\nPalette and texture: apple red, leaf green, pear yellow, sky blue, soft soil brown\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 tiny caretakers under one large color-changing tree, simple fruit shapes and musical notes without text; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "color-orchard",
+      "title": "Color Orchard"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/color-orchard.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Color Orchard\" (2024).\nGenre: Preschool Nature Cartoon.\nStory seed: Pick a color, grow a song. A preschool orchard changes color each morning while tiny caretakers learn seasons, sharing, and sound.\nVisual direction: a preschool orchard changing color each morning while tiny caretakers learn seasons and sound\nVisual medium and style: preschool nature cartoon, very simple flat rounded shapes, soft friendly faces implied by objects, low detail\nPalette and texture: apple red, leaf green, pear yellow, sky blue, soft soil brown\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide gentle orchard made of rounded flat trees changing colors across the morning; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "color-orchard",
+      "title": "Color Orchard"
+    },
+    {
+      "contentType": "series",
+      "filename": "poster/museum-of-little-robots.png",
+      "kind": "poster",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: portrait cover/poster PNG for a fictional streaming demo catalog.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Museum of Little Robots\" (2025).\nGenre: Flat Retro-Future Cartoon.\nStory seed: Tiny gears, big curiosity. Small helpful robots wake up after closing time to arrange exhibits in a quiet retro-future museum.\nVisual direction: small helpful robots arranging exhibits after closing time in a quiet retro-future museum\nVisual medium and style: flat retro-future cartoon, simple rounded robots, clean museum shapes, limited details, soft mid-century geometry\nPalette and texture: dusty teal, warm cream, tomato red, brushed metal gray, muted orange\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: portrait 2:3 small helpful robots arranging one oversized exhibit in a quiet museum hall; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.",
+      "quality": "medium",
+      "size": "1024x1536",
+      "slug": "museum-of-little-robots",
+      "title": "Museum of Little Robots"
+    },
+    {
+      "contentType": "series",
+      "filename": "backdrop/museum-of-little-robots.png",
+      "kind": "backdrop",
+      "manualApprovalStatus": "pending-human-review",
+      "model": "gpt-image-2",
+      "prompt": "Use case: ads-marketing\nAsset type: landscape backdrop PNG for a fictional streaming demo details screen.\nCreate original fictional demo artwork for IPTVnator release screenshots.\nFictional series: \"Museum of Little Robots\" (2025).\nGenre: Flat Retro-Future Cartoon.\nStory seed: Tiny gears, big curiosity. Small helpful robots wake up after closing time to arrange exhibits in a quiet retro-future museum.\nVisual direction: small helpful robots arranging exhibits after closing time in a quiet retro-future museum\nVisual medium and style: flat retro-future cartoon, simple rounded robots, clean museum shapes, limited details, soft mid-century geometry\nPalette and texture: dusty teal, warm cream, tomato red, brushed metal gray, muted orange\nSafety and originality constraints: Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark. No watermarks, no studio logos, no credits, no title typography, and no legible text.\nComposition: wide 16:9 wide retro-future museum after closing with tiny robots, plinths, and simple geometric exhibits; darker edges and open negative space so app UI overlays remain readable; no text or logos.",
+      "quality": "medium",
+      "size": "1536x864",
+      "slug": "museum-of-little-robots",
+      "title": "Museum of Little Robots"
+    }
+  ],
+  "model": "gpt-image-2",
+  "outputFormat": "png",
+  "version": 1
+}
diff --git a/apps/xtream-mock-server/public/marketing/poster/beacon-boy-and-the-clockwork-garden.png b/apps/xtream-mock-server/public/marketing/poster/beacon-boy-and-the-clockwork-garden.png
new file mode 100644
index 0000000..ae9d1d5
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/beacon-boy-and-the-clockwork-garden.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/captain-kindling.png b/apps/xtream-mock-server/public/marketing/poster/captain-kindling.png
new file mode 100644
index 0000000..4eb9a37
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/captain-kindling.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/crimson-skylark.png b/apps/xtream-mock-server/public/marketing/poster/crimson-skylark.png
new file mode 100644
index 0000000..6f8d081
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/crimson-skylark.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/dot-and-the-cloud-train.png b/apps/xtream-mock-server/public/marketing/poster/dot-and-the-cloud-train.png
new file mode 100644
index 0000000..6df32fe
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/dot-and-the-cloud-train.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/masks-of-tomorrow.png b/apps/xtream-mock-server/public/marketing/poster/masks-of-tomorrow.png
new file mode 100644
index 0000000..84fca4e
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/masks-of-tomorrow.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/midnight-mantle.png b/apps/xtream-mock-server/public/marketing/poster/midnight-mantle.png
new file mode 100644
index 0000000..a0f227f
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/midnight-mantle.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/nova-relay.png b/apps/xtream-mock-server/public/marketing/poster/nova-relay.png
new file mode 100644
index 0000000..e8c0ab4
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/nova-relay.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/orbit-of-atlas.png b/apps/xtream-mock-server/public/marketing/poster/orbit-of-atlas.png
new file mode 100644
index 0000000..ae82c50
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/orbit-of-atlas.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/paper-moon-parade.png b/apps/xtream-mock-server/public/marketing/poster/paper-moon-parade.png
new file mode 100644
index 0000000..66b221d
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/paper-moon-parade.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/quantum-comet.png b/apps/xtream-mock-server/public/marketing/poster/quantum-comet.png
new file mode 100644
index 0000000..3d6fc38
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/quantum-comet.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/signal-tower-seven.png b/apps/xtream-mock-server/public/marketing/poster/signal-tower-seven.png
new file mode 100644
index 0000000..749fc2d
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/signal-tower-seven.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/the-invisible-saturday.png b/apps/xtream-mock-server/public/marketing/poster/the-invisible-saturday.png
new file mode 100644
index 0000000..3df0427
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/the-invisible-saturday.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/the-voltage-guard.png b/apps/xtream-mock-server/public/marketing/poster/the-voltage-guard.png
new file mode 100644
index 0000000..fb5dd0b
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/the-voltage-guard.png differ
diff --git a/apps/xtream-mock-server/public/marketing/poster/tiny-planet-picnic.png b/apps/xtream-mock-server/public/marketing/poster/tiny-planet-picnic.png
new file mode 100644
index 0000000..20d465e
Binary files /dev/null and b/apps/xtream-mock-server/public/marketing/poster/tiny-planet-picnic.png differ
diff --git a/apps/xtream-mock-server/src/app/data-store.ts b/apps/xtream-mock-server/src/app/data-store.ts
new file mode 100644
index 0000000..c0b0751
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/data-store.ts
@@ -0,0 +1,336 @@
+import { faker } from '@faker-js/faker';
+import { generateCategories } from './generators/categories.generator.js';
+import {
+    buildEpgListing,
+    buildLiveStream,
+    generateEpgListings,
+    generateLiveStreams,
+    RawEpgListing,
+    RawLiveStream,
+} from './generators/live.generator.js';
+import { generateVodStreams, generateVodDetails, RawVodStream, RawVodDetails } from './generators/vod.generator.js';
+import { generateSeriesItems, generateSeriesInfo, RawSeriesItem, RawSeriesInfo } from './generators/series.generator.js';
+import { RawCategory } from './generators/categories.generator.js';
+import {
+    buildMarketingPortalFixture,
+    buildMarketingSeriesInfo,
+    buildMarketingVodDetails,
+} from './generators/marketing.generator.js';
+import { getScenario, ScenarioConfig } from './scenarios.js';
+
+export interface PortalData {
+    scenario: ScenarioConfig;
+    liveCategories: RawCategory[];
+    vodCategories: RawCategory[];
+    seriesCategories: RawCategory[];
+    liveStreams: RawLiveStream[];
+    vodStreams: RawVodStream[];
+    seriesItems: RawSeriesItem[];
+    epgListingsByStreamId: Map<number, RawEpgListing[]>;
+}
+
+const portalCache = new Map<string, PortalData>();
+const vodDetailsCache = new Map<number, RawVodDetails>();
+const seriesInfoCache = new Map<number, RawSeriesInfo>();
+
+function generatePortalData(username: string, password: string): PortalData {
+    const scenario = getScenario(username, password);
+    faker.seed(scenario.seed);
+
+    const { categoryCount, itemsPerCategory, seasonsPerSeries, episodesPerSeason } = scenario;
+
+    if (scenario.marketingFixture) {
+        const marketingFixture = buildMarketingPortalFixture();
+        for (const s of marketingFixture.seriesItems) {
+            if (!seriesInfoCache.has(s.series_id)) {
+                seriesInfoCache.set(
+                    s.series_id,
+                    buildMarketingSeriesInfo(
+                        s,
+                        seasonsPerSeries,
+                        episodesPerSeason
+                    )
+                );
+            }
+        }
+
+        return {
+            scenario,
+            ...marketingFixture,
+        };
+    }
+
+    let liveCategories = generateCategories('live', categoryCount.live);
+    const vodCategories = generateCategories('vod', categoryCount.vod);
+    const seriesCategories = generateCategories('series', categoryCount.series);
+
+    const epgListingsByStreamId = new Map<number, RawEpgListing[]>();
+    let liveStreams = generateLiveStreams(liveCategories, itemsPerCategory);
+    const vodStreams = generateVodStreams(vodCategories, itemsPerCategory);
+    const seriesItems = generateSeriesItems(seriesCategories, itemsPerCategory);
+
+    if (scenario.epgFixture === 'timezone-focus') {
+        const timezoneFixture = buildTimezoneFixture();
+        liveCategories = timezoneFixture.liveCategories;
+        liveStreams = timezoneFixture.liveStreams;
+        timezoneFixture.epgListingsByStreamId.forEach((listings, streamId) => {
+            epgListingsByStreamId.set(streamId, listings);
+        });
+    }
+
+    // Pre-populate series info cache
+    for (const s of seriesItems) {
+        if (!seriesInfoCache.has(s.series_id)) {
+            seriesInfoCache.set(s.series_id, generateSeriesInfo(s, seasonsPerSeries, episodesPerSeason));
+        }
+    }
+
+    return {
+        scenario,
+        liveCategories,
+        vodCategories,
+        seriesCategories,
+        liveStreams,
+        vodStreams,
+        seriesItems,
+        epgListingsByStreamId,
+    };
+}
+
+export function getPortalData(username: string, password: string): PortalData {
+    const key = `${username}:${password}`;
+    if (!portalCache.has(key)) {
+        portalCache.set(key, generatePortalData(username, password));
+    }
+    return portalCache.get(key)!;
+}
+
+export function getVodDetails(username: string, password: string, vodId: number): RawVodDetails | null {
+    if (!vodDetailsCache.has(vodId)) {
+        const data = getPortalData(username, password);
+        const stream = data.vodStreams.find(v => v.stream_id === vodId);
+        if (!stream) return null;
+        if (data.scenario.vodDetailsFixture === 'empty-metadata') {
+            vodDetailsCache.set(vodId, { info: [] });
+            return vodDetailsCache.get(vodId) ?? null;
+        }
+        vodDetailsCache.set(
+            vodId,
+            data.scenario.marketingFixture
+                ? buildMarketingVodDetails(stream)
+                : generateVodDetails(stream)
+        );
+    }
+    return vodDetailsCache.get(vodId) ?? null;
+}
+
+export function getSeriesInfo(username: string, password: string, seriesId: number): RawSeriesInfo | null {
+    if (!seriesInfoCache.has(seriesId)) {
+        const data = getPortalData(username, password);
+        const series = data.seriesItems.find(s => s.series_id === seriesId);
+        if (!series) return null;
+        const scenario = getScenario(username, password);
+        seriesInfoCache.set(
+            seriesId,
+            scenario.marketingFixture
+                ? buildMarketingSeriesInfo(
+                      series,
+                      scenario.seasonsPerSeries,
+                      scenario.episodesPerSeason
+                  )
+                : generateSeriesInfo(
+                      series,
+                      scenario.seasonsPerSeries,
+                      scenario.episodesPerSeason
+                  )
+        );
+    }
+    return seriesInfoCache.get(seriesId) ?? null;
+}
+
+export function getEpgListings(
+    username: string,
+    password: string,
+    streamId: number
+): RawEpgListing[] {
+    const data = getPortalData(username, password);
+    if (!data.epgListingsByStreamId.has(streamId)) {
+        data.epgListingsByStreamId.set(streamId, generateEpgListings(streamId));
+    }
+    return data.epgListingsByStreamId.get(streamId)!;
+}
+
+export function getShortEpgListings(
+    username: string,
+    password: string,
+    streamId: number,
+    limit = 12
+): RawEpgListing[] {
+    const listings = getEpgListings(username, password, streamId);
+    const now = Math.floor(Date.now() / 1000);
+    const currentIndex = listings.findIndex((listing) => {
+        const stopTimestamp = Number.parseInt(listing.stop_timestamp, 10);
+        return Number.isFinite(stopTimestamp) && stopTimestamp >= now;
+    });
+
+    const startIndex = currentIndex >= 0 ? currentIndex : 0;
+    return listings.slice(startIndex, startIndex + Math.max(1, limit));
+}
+
+export function resetAll(): void {
+    portalCache.clear();
+    vodDetailsCache.clear();
+    seriesInfoCache.clear();
+}
+
+function buildTimezoneFixture(): Pick<
+    PortalData,
+    'liveCategories' | 'liveStreams' | 'epgListingsByStreamId'
+> {
+    const primaryCategoryId = '101';
+    const secondaryCategoryId = '102';
+    const liveCategories: RawCategory[] = [
+        {
+            category_id: primaryCategoryId,
+            category_name: 'EPG Focus',
+            parent_id: 0,
+        },
+        {
+            category_id: secondaryCategoryId,
+            category_name: 'Overflow Live',
+            parent_id: 0,
+        },
+    ];
+
+    const liveStreams: RawLiveStream[] = [
+        buildLiveStream({
+            num: 1,
+            name: 'Timezone News',
+            streamId: 10_000,
+            categoryId: primaryCategoryId,
+            tvArchive: 1,
+            tvArchiveDuration: 3,
+        }),
+        buildLiveStream({
+            num: 2,
+            name: 'Night Sports',
+            streamId: 10_001,
+            categoryId: primaryCategoryId,
+        }),
+        buildLiveStream({
+            num: 3,
+            name: 'Archive Cinema',
+            streamId: 10_002,
+            categoryId: primaryCategoryId,
+        }),
+        buildLiveStream({
+            num: 4,
+            name: 'Overflow Live 1',
+            streamId: 10_003,
+            categoryId: secondaryCategoryId,
+        }),
+        buildLiveStream({
+            num: 5,
+            name: 'Overflow Live 2',
+            streamId: 10_004,
+            categoryId: secondaryCategoryId,
+        }),
+    ];
+
+    const epgListingsByStreamId = new Map<number, RawEpgListing[]>();
+    epgListingsByStreamId.set(10_000, buildTimezoneNewsEpg(10_000));
+
+    return {
+        liveCategories,
+        liveStreams,
+        epgListingsByStreamId,
+    };
+}
+
+function buildTimezoneNewsEpg(streamId: number): RawEpgListing[] {
+    const now = Math.floor(Date.now() / 1000);
+    const roundedNow = now - (now % (15 * 60));
+    const nextUtcMidnight = getFutureUtcMidnight(now);
+    const rawStringOffsetSeconds = -2 * 60 * 60;
+    const channelId = `channel-${streamId}.mock`;
+
+    const listings = [
+        {
+            id: `${streamId}-past`,
+            title: 'Earlier Bulletin',
+            description: 'Past schedule item used to anchor current-program detection.',
+            startTimestamp: roundedNow - 75 * 60,
+            stopTimestamp: roundedNow - 15 * 60,
+        },
+        {
+            id: `${streamId}-current`,
+            title: 'Global Headlines',
+            description: 'Current program for list-row and detail EPG assertions.',
+            startTimestamp: roundedNow - 15 * 60,
+            stopTimestamp: roundedNow + 15 * 60,
+        },
+        {
+            id: `${streamId}-next`,
+            title: 'Market Wrap',
+            description: 'Immediate next program for short-EPG preview assertions.',
+            startTimestamp: roundedNow + 15 * 60,
+            stopTimestamp: roundedNow + 45 * 60,
+        },
+        {
+            id: `${streamId}-later`,
+            title: 'Overnight Update',
+            description: 'Later same-day program for selected-channel list coverage.',
+            startTimestamp: roundedNow + 45 * 60,
+            stopTimestamp: roundedNow + 75 * 60,
+        },
+        {
+            id: `${streamId}-boundary-1`,
+            title: 'Late Edition',
+            description: 'Boundary program spanning UTC midnight for timezone edge cases.',
+            startTimestamp: nextUtcMidnight - 30 * 60,
+            stopTimestamp: nextUtcMidnight + 30 * 60,
+        },
+        {
+            id: `${streamId}-boundary-2`,
+            title: 'After Midnight',
+            description: 'Post-midnight program used for next-day navigation checks.',
+            startTimestamp: nextUtcMidnight + 30 * 60,
+            stopTimestamp: nextUtcMidnight + 90 * 60,
+        },
+    ];
+
+    return listings
+        .sort((left, right) => left.startTimestamp - right.startTimestamp)
+        .map((listing) =>
+            buildEpgListing({
+                id: listing.id,
+                epgId: channelId,
+                title: listing.title,
+                description: listing.description,
+                startTimestamp: listing.startTimestamp,
+                stopTimestamp: listing.stopTimestamp,
+                channelId,
+                rawStringOffsetSeconds,
+            })
+        );
+}
+
+function getFutureUtcMidnight(nowSeconds: number): number {
+    const nowDate = new Date(nowSeconds * 1000);
+    let midnightSeconds = Math.floor(
+        Date.UTC(
+            nowDate.getUTCFullYear(),
+            nowDate.getUTCMonth(),
+            nowDate.getUTCDate() + 1,
+            0,
+            0,
+            0
+        ) / 1000
+    );
+
+    while (midnightSeconds - nowSeconds < 3 * 60 * 60) {
+        midnightSeconds += 24 * 60 * 60;
+    }
+
+    return midnightSeconds;
+}
diff --git a/apps/xtream-mock-server/src/app/generators/categories.generator.ts b/apps/xtream-mock-server/src/app/generators/categories.generator.ts
new file mode 100644
index 0000000..84238f7
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/generators/categories.generator.ts
@@ -0,0 +1,65 @@
+import { faker } from '@faker-js/faker';
+
+export interface RawCategory {
+    category_id: string;
+    category_name: string;
+    parent_id: number;
+}
+
+const LIVE_CATEGORY_NAMES = [
+    'News', 'Sports', 'Movies', 'Entertainment', 'Kids',
+    'Documentary', 'Music', 'Comedy', 'Drama', 'Reality TV',
+    'Lifestyle', 'Travel', 'Food', 'Tech', 'Science',
+    'History', 'Nature', 'Animation', 'Gaming', 'Shopping',
+];
+
+const VOD_CATEGORY_NAMES = [
+    'Action', 'Comedy', 'Drama', 'Horror', 'Thriller',
+    'Romance', 'Sci-Fi', 'Fantasy', 'Animation', 'Documentary',
+    'Biography', 'Crime', 'Mystery', 'Adventure', 'Family',
+    'War', 'Western', 'Musical', 'Sport', 'History',
+];
+
+const SERIES_CATEGORY_NAMES = [
+    'Drama Series', 'Comedy Series', 'Crime Series', 'Sci-Fi Series',
+    'Reality Shows', 'Anime', 'Soap Opera', 'Mini Series',
+    'Documentary Series', 'Kids Shows', 'Action Series', 'Fantasy Series',
+    'Medical', 'Legal', 'Political', 'Romance Series', 'Historical',
+    'Thriller Series', 'Horror Series', 'Western Series',
+];
+
+function nameList(type: 'live' | 'vod' | 'series'): string[] {
+    if (type === 'live') return LIVE_CATEGORY_NAMES;
+    if (type === 'vod') return VOD_CATEGORY_NAMES;
+    return SERIES_CATEGORY_NAMES;
+}
+
+/** Base ID offsets per content type so IDs never collide. */
+const BASE_ID: Record<'live' | 'vod' | 'series', number> = {
+    live: 100,
+    vod: 200,
+    series: 300,
+};
+
+export function generateCategories(
+    type: 'live' | 'vod' | 'series',
+    count: number
+): RawCategory[] {
+    const names = nameList(type);
+    return Array.from({ length: count }, (_, i) => ({
+        category_id: String(BASE_ID[type] + i + 1),
+        category_name: names[i % names.length],
+        parent_id: 0,
+    }));
+}
+
+/** Stable category ID base for use in item generators. */
+export { BASE_ID as CATEGORY_ID_BASE };
+
+/** Deterministic icon URL for a category */
+export function categoryIcon(type: string, id: string): string {
+    return `https://picsum.photos/seed/cat-${type}-${id}/64/64`;
+}
+
+// Re-export faker so generators share the same seeded instance.
+export { faker };
diff --git a/apps/xtream-mock-server/src/app/generators/live.generator.ts b/apps/xtream-mock-server/src/app/generators/live.generator.ts
new file mode 100644
index 0000000..e7a6b67
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/generators/live.generator.ts
@@ -0,0 +1,178 @@
+import { faker } from '@faker-js/faker';
+import { RawCategory } from './categories.generator.js';
+
+export interface RawLiveStream {
+    num: number;
+    name: string;
+    stream_type: 'live';
+    stream_id: number;
+    stream_icon: string;
+    epg_channel_id: string;
+    added: string;
+    category_id: string;
+    custom_sid: string;
+    direct_source: string;
+    tv_archive: number;
+    tv_archive_duration: number;
+    rating_imdb: string;
+}
+
+export interface RawEpgListing {
+    id: string;
+    epg_id: string;
+    title: string;       // base64-encoded
+    lang: string;
+    start: string;
+    end: string;
+    description: string; // base64-encoded
+    channel_id: string;
+    start_timestamp: string;
+    stop_timestamp: string;
+}
+
+const LIVE_STREAM_ID_BASE = 10_000;
+const EPG_SLOT_MINUTES = 30;
+const EPG_PREVIOUS_DAYS = 2;
+const EPG_NEXT_DAYS = 3;
+const EPG_SLOTS =
+    ((EPG_PREVIOUS_DAYS + EPG_NEXT_DAYS) * 24 * 60) / EPG_SLOT_MINUTES;
+
+type BuildLiveStreamOptions = {
+    num: number;
+    name: string;
+    streamId: number;
+    categoryId: string;
+    epgChannelId?: string;
+    tvArchive?: number;
+    tvArchiveDuration?: number;
+};
+
+type BuildEpgListingOptions = {
+    id: string;
+    epgId: string;
+    title: string;
+    description: string;
+    startTimestamp: number;
+    stopTimestamp: number;
+    channelId: string;
+    rawStringOffsetSeconds?: number;
+    lang?: string;
+};
+
+export function generateLiveStreams(
+    categories: RawCategory[],
+    itemsPerCategory: number
+): RawLiveStream[] {
+    const streams: RawLiveStream[] = [];
+    let num = 1;
+
+    for (const cat of categories) {
+        for (let i = 0; i < itemsPerCategory; i++) {
+            const streamId = LIVE_STREAM_ID_BASE + streams.length;
+            streams.push(
+                buildLiveStream({
+                    num: num++,
+                    name: `${faker.company.name()} TV`,
+                    streamId,
+                    categoryId: cat.category_id,
+                })
+            );
+        }
+    }
+    return streams;
+}
+
+/** Generate EPG listings for a single stream_id. Returns base64-encoded title/description. */
+export function generateEpgListings(streamId: number): RawEpgListing[] {
+    const listings: RawEpgListing[] = [];
+    const nowSec = Math.floor(Date.now() / 1000);
+    const startOffset = -EPG_PREVIOUS_DAYS * 24 * 60 * 60;
+
+    for (let i = 0; i < EPG_SLOTS; i++) {
+        const startTs = nowSec + startOffset + i * EPG_SLOT_MINUTES * 60;
+        const stopTs = startTs + EPG_SLOT_MINUTES * 60;
+        const title = faker.company.catchPhrase();
+        const description = faker.lorem.sentence();
+
+        listings.push(
+            buildEpgListing({
+                id: String(streamId * 100 + i),
+                epgId: `channel-${streamId}.mock`,
+                title,
+                description,
+                startTimestamp: startTs,
+                stopTimestamp: stopTs,
+                channelId: `channel-${streamId}.mock`,
+            })
+        );
+    }
+    return listings;
+}
+
+export function buildLiveStream(
+    options: BuildLiveStreamOptions
+): RawLiveStream {
+    const {
+        num,
+        name,
+        streamId,
+        categoryId,
+        epgChannelId = `channel-${streamId}.mock`,
+        tvArchive = 1,
+        tvArchiveDuration = 3,
+    } = options;
+
+    return {
+        num,
+        name,
+        stream_type: 'live',
+        stream_id: streamId,
+        stream_icon: `https://picsum.photos/seed/live-${streamId}/100/100`,
+        epg_channel_id: epgChannelId,
+        added: String(Math.floor(Date.now() / 1000 - Math.random() * 1e7)),
+        category_id: categoryId,
+        custom_sid: '',
+        direct_source: '',
+        tv_archive: tvArchive,
+        tv_archive_duration: tvArchiveDuration,
+        rating_imdb: (Math.random() * 3 + 6).toFixed(1),
+    };
+}
+
+export function buildEpgListing(
+    options: BuildEpgListingOptions
+): RawEpgListing {
+    const {
+        id,
+        epgId,
+        title,
+        description,
+        startTimestamp,
+        stopTimestamp,
+        channelId,
+        rawStringOffsetSeconds = 0,
+        lang = 'en',
+    } = options;
+
+    return {
+        id,
+        epg_id: epgId,
+        title: Buffer.from(title).toString('base64'),
+        lang,
+        start: formatXtreamDateTime(
+            startTimestamp + rawStringOffsetSeconds
+        ),
+        end: formatXtreamDateTime(stopTimestamp + rawStringOffsetSeconds),
+        description: Buffer.from(description).toString('base64'),
+        channel_id: channelId,
+        start_timestamp: String(startTimestamp),
+        stop_timestamp: String(stopTimestamp),
+    };
+}
+
+function formatXtreamDateTime(timestampSeconds: number): string {
+    return new Date(timestampSeconds * 1000)
+        .toISOString()
+        .replace('T', ' ')
+        .replace('.000Z', '');
+}
diff --git a/apps/xtream-mock-server/src/app/generators/marketing.generator.ts b/apps/xtream-mock-server/src/app/generators/marketing.generator.ts
new file mode 100644
index 0000000..000cb3f
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/generators/marketing.generator.ts
@@ -0,0 +1,1032 @@
+import { RawCategory } from './categories.generator.js';
+import {
+    buildEpgListing,
+    RawEpgListing,
+    RawLiveStream,
+} from './live.generator.js';
+import { RawSeriesInfo, RawSeriesItem } from './series.generator.js';
+import { RawVodDetails, RawVodStream } from './vod.generator.js';
+
+type MarketingAssetKind = 'backdrop' | 'episode' | 'logo' | 'poster' | 'season';
+
+type MarketingMovie = {
+    actors: string;
+    categoryId: string;
+    description: string;
+    director: string;
+    genre: string;
+    name: string;
+    rating: number;
+    tagline: string;
+    year: number;
+};
+
+type MarketingSeries = {
+    actors: string;
+    categoryId: string;
+    description: string;
+    director: string;
+    genre: string;
+    name: string;
+    rating: number;
+    tagline: string;
+    year: number;
+};
+
+type MarketingLiveChannel = {
+    categoryId: string;
+    epgTitles: string[];
+    name: string;
+};
+
+export type MarketingArtworkFixture = {
+    contentType: 'movie' | 'series';
+    description: string;
+    genre: string;
+    name: string;
+    slug: string;
+    tagline: string;
+    year: number;
+};
+
+export type MarketingPortalFixture = {
+    liveCategories: RawCategory[];
+    liveStreams: RawLiveStream[];
+    vodCategories: RawCategory[];
+    vodStreams: RawVodStream[];
+    seriesCategories: RawCategory[];
+    seriesItems: RawSeriesItem[];
+    epgListingsByStreamId: Map<number, RawEpgListing[]>;
+};
+
+const MARKETING_LIVE_STREAM_ID_BASE = 52_000;
+const MARKETING_VOD_STREAM_ID_BASE = 62_000;
+const MARKETING_SERIES_ID_BASE = 72_000;
+const MARKETING_EPISODE_ID_BASE = 82_000;
+const ADDED_BASE = 1_777_000_000;
+
+const LIVE_CATEGORIES: RawCategory[] = [
+    { category_id: '5101', category_name: 'Newsroom', parent_id: 0 },
+    { category_id: '5102', category_name: 'Sports & Motion', parent_id: 0 },
+    { category_id: '5103', category_name: 'Family Channels', parent_id: 0 },
+    { category_id: '5104', category_name: 'Culture & Docs', parent_id: 0 },
+];
+
+const VOD_CATEGORIES: RawCategory[] = [
+    { category_id: '5201', category_name: 'Action & Mystery', parent_id: 0 },
+    {
+        category_id: '5202',
+        category_name: 'Cosmic & Future Worlds',
+        parent_id: 0,
+    },
+    { category_id: '5203', category_name: 'Family Animation', parent_id: 0 },
+    { category_id: '5204', category_name: 'Documentary & Drama', parent_id: 0 },
+];
+
+const SERIES_CATEGORIES: RawCategory[] = [
+    { category_id: '5301', category_name: 'Urban Drama', parent_id: 0 },
+    { category_id: '5302', category_name: 'Speculative Series', parent_id: 0 },
+    { category_id: '5303', category_name: 'Noir & Neon', parent_id: 0 },
+    { category_id: '5304', category_name: 'Creative Docs', parent_id: 0 },
+];
+
+const LIVE_CHANNELS: MarketingLiveChannel[] = [
+    {
+        categoryId: '5101',
+        name: 'Aurora News',
+        epgTitles: ['Morning Briefing', 'City Desk', 'Global Window'],
+    },
+    {
+        categoryId: '5101',
+        name: 'Civic One',
+        epgTitles: ['Town Hall Live', 'Policy Today', 'Open Forum'],
+    },
+    {
+        categoryId: '5102',
+        name: 'Fieldside Sports',
+        epgTitles: ['Training Ground', 'Matchday Studio', 'Final Whistle'],
+    },
+    {
+        categoryId: '5102',
+        name: 'Motion Arena',
+        epgTitles: ['Court Vision', 'Trackside', 'Night Highlights'],
+    },
+    {
+        categoryId: '5103',
+        name: 'Horizon Kids',
+        epgTitles: ['Rocket Workshop', 'Tiny Explorers', 'Story Lantern'],
+    },
+    {
+        categoryId: '5103',
+        name: 'Kitchen Lab',
+        epgTitles: ['Breakfast Builders', 'Family Table', 'Sweet Science'],
+    },
+    {
+        categoryId: '5104',
+        name: 'Atlas Docs',
+        epgTitles: ['Ocean Notes', 'Museum Hour', 'Wide Angle'],
+    },
+    {
+        categoryId: '5104',
+        name: 'Night Music',
+        epgTitles: ['Studio Session', 'Late Set', 'Ambient City'],
+    },
+];
+
+const MOVIES: MarketingMovie[] = [
+    {
+        categoryId: '5201',
+        name: 'Crimson Skylark',
+        description:
+            'A high-altitude rescue courier follows sunrise signals through the storm routes above Meridian City.',
+        director: 'Ari Vale',
+        actors: 'Mara Sol, Theo Quill, Iris Vale, Nico Reed',
+        genre: 'Aerial Rescue Adventure',
+        rating: 8.5,
+        tagline: 'Every sunrise needs a signal.',
+        year: 2026,
+    },
+    {
+        categoryId: '5201',
+        name: 'The Voltage Guard',
+        description:
+            'Four transit workers race to keep the night trains moving as a thunderstorm turns the city grid unstable.',
+        director: 'Noah Kade',
+        actors: 'Lena Voss, Mateo Rinn, Cora Vale, Juno Pike',
+        genre: 'Disaster Action Thriller',
+        rating: 8.1,
+        tagline: 'Power is only heroic when it is shared.',
+        year: 2025,
+    },
+    {
+        categoryId: '5201',
+        name: 'Midnight Mantle',
+        description:
+            'A retired stage magician investigates a living cloak rumor haunting the old theatre district after dark.',
+        director: 'Selene Park',
+        actors: 'Iris Vale, Bram Cole, Tessa Moon, Rafi North',
+        genre: 'Gothic Mystery',
+        rating: 8.0,
+        tagline: 'The city has one last trick.',
+        year: 2024,
+    },
+    {
+        categoryId: '5202',
+        name: 'Quantum Comet',
+        description:
+            'An orbital cartographer rides a fractured comet trail to stop a time-lost armada.',
+        director: 'Vera Lin',
+        actors: 'Kai Mercer, Lina Storm, Ren Sato, Nova Bell',
+        genre: 'Cosmic Science Fiction',
+        rating: 8.7,
+        tagline: 'Faster than tomorrow.',
+        year: 2026,
+    },
+    {
+        categoryId: '5202',
+        name: 'Orbit of Atlas',
+        description:
+            'A rescue pilot navigates a fractured moon orbit long enough for a remote colony to evacuate.',
+        director: 'Noah Kade',
+        actors: 'Theo Quill, Mira Stone, Pax Arden, Elle Fenn',
+        genre: 'Cosmic Survival Adventure',
+        rating: 7.9,
+        tagline: 'Hold the sky.',
+        year: 2025,
+    },
+    {
+        categoryId: '5202',
+        name: 'Nova Relay',
+        description:
+            'Twin signal runners cross a star bridge to deliver the last warning before a solar network goes dark.',
+        director: 'Ari Vale',
+        actors: 'Cora Vale, Juno Pike, Bram Cole, Kai Mercer',
+        genre: 'Space Opera',
+        rating: 8.2,
+        tagline: 'The message arrives in light.',
+        year: 2023,
+    },
+    {
+        categoryId: '5203',
+        name: 'Beacon Boy and the Clockwork Garden',
+        description:
+            'A young inventor and his grandmother awaken a garden of mechanical guardians beneath the city park.',
+        director: 'Selene Park',
+        actors: 'Milo Grey, Anika Fern, Tessa Moon, Rafi North',
+        genre: 'Animated Family Fantasy',
+        rating: 8.3,
+        tagline: 'Small heroes grow tall.',
+        year: 2026,
+    },
+    {
+        categoryId: '5203',
+        name: 'The Invisible Saturday',
+        description:
+            'Two siblings learn to turn invisible every Saturday and use the gift to save their neighborhood fair.',
+        director: 'Mira Stone',
+        actors: 'Pax Arden, Elle Fenn, Milo Grey, Lina Storm',
+        genre: 'Family, Adventure',
+        rating: 7.8,
+        tagline: 'Seen or unseen, courage counts.',
+        year: 2024,
+    },
+    {
+        categoryId: '5203',
+        name: 'Captain Kindling',
+        description:
+            'A camp counselor with ember-bright powers teaches a team of misfits how to protect a forest town.',
+        director: 'Vera Lin',
+        actors: 'Nico Reed, Anika Fern, Theo Quill, Cora Vale',
+        genre: 'Animated Family Comedy',
+        rating: 7.5,
+        tagline: 'A spark can lead the way.',
+        year: 2022,
+    },
+    {
+        categoryId: '5203',
+        name: 'Paper Moon Parade',
+        description:
+            'A paper-cut moon rolls through a tiny town and invites every shy child to join a midnight parade.',
+        director: 'Iris Vale',
+        actors: 'Milo Grey, Anika Fern, Nova Bell, Elle Fenn',
+        genre: 'Flat Kids Fantasy',
+        rating: 8.1,
+        tagline: 'Fold the night into wonder.',
+        year: 2026,
+    },
+    {
+        categoryId: '5203',
+        name: 'Dot and the Cloud Train',
+        description:
+            'A small dot boards a soft cloud train and learns the colors of weather with a group of round little friends.',
+        director: 'Mira Stone',
+        actors: 'Pax Arden, Elle Fenn, Milo Grey, Lina Storm',
+        genre: 'Preschool Cartoon Adventure',
+        rating: 7.9,
+        tagline: 'Every stop is a color.',
+        year: 2025,
+    },
+    {
+        categoryId: '5203',
+        name: 'Tiny Planet Picnic',
+        description:
+            'Three children prepare a picnic on a pocket-sized planet where flowers orbit like friendly satellites.',
+        director: 'Selene Park',
+        actors: 'Anika Fern, Milo Grey, Tessa Moon, Pax Arden',
+        genre: 'Simple Family Sci-Fi Cartoon',
+        rating: 8.0,
+        tagline: 'Pack a lunch for the stars.',
+        year: 2024,
+    },
+    {
+        categoryId: '5204',
+        name: 'Masks of Tomorrow',
+        description:
+            'A fictional documentary profile of costume makers, signal engineers, and citizens building a city festival from scratch.',
+        director: 'Juno Pike',
+        actors: 'Mara Sol, Ren Sato, Iris Vale, Mateo Rinn',
+        genre: 'Creative Documentary',
+        rating: 8.4,
+        tagline: 'Behind every emblem is a city.',
+        year: 2025,
+    },
+    {
+        categoryId: '5204',
+        name: 'Signal Tower Seven',
+        description:
+            'A retro-styled chronicle of radio operators who coordinate mountain rescues during a record winter blackout.',
+        director: 'Rafi North',
+        actors: 'Lena Voss, Kai Mercer, Tessa Moon, Bram Cole',
+        genre: 'Retro Rescue Drama',
+        rating: 8.2,
+        tagline: 'Not all heroes fly.',
+        year: 2023,
+    },
+    {
+        categoryId: '5204',
+        name: 'The League of Lanterns',
+        description:
+            'A narrated archive of a volunteer lantern network that lights safe paths during impossible blackouts.',
+        director: 'Mira Stone',
+        actors: 'Nova Bell, Milo Grey, Elle Fenn, Ren Sato',
+        genre: 'Human Interest Documentary',
+        rating: 7.7,
+        tagline: 'When the grid fails, people glow.',
+        year: 2024,
+    },
+    {
+        categoryId: '5204',
+        name: 'The Quiet Aquarium',
+        description:
+            'An abstract night watch follows drifting shapes, quiet visitors, and glowing tanks inside a closed city aquarium.',
+        director: 'Vera Lin',
+        actors: 'Nova Bell, Ren Sato, Cora Vale, Kai Mercer',
+        genre: 'Abstract Meditative Drama',
+        rating: 8.3,
+        tagline: 'Silence has currents.',
+        year: 2026,
+    },
+    {
+        categoryId: '5204',
+        name: 'Square City Sonata',
+        description:
+            'Blocks, windows, crosswalks, and streetlights become a geometric city symphony over one bright afternoon.',
+        director: 'Rafi North',
+        actors: 'Lena Voss, Theo Quill, Mira Stone, Bram Cole',
+        genre: 'Abstract Musical',
+        rating: 7.6,
+        tagline: 'Every corner keeps time.',
+        year: 2023,
+    },
+    {
+        categoryId: '5204',
+        name: 'Lanterns Under Snow',
+        description:
+            'A minimalist winter tale about neighbors carrying warm paper lanterns across a silent hill town.',
+        director: 'Noah Kade',
+        actors: 'Milo Grey, Nova Bell, Lena Voss, Rafi North',
+        genre: 'Minimalist Folk Tale',
+        rating: 8.2,
+        tagline: 'Small lights travel far.',
+        year: 2022,
+    },
+];
+
+const SERIES: MarketingSeries[] = [
+    {
+        categoryId: '5301',
+        name: 'Skyline Sentinels',
+        description:
+            'A young maintenance crew patrols the rooftops, rails, and river bridges of Meridian City.',
+        director: 'Ari Vale',
+        actors: 'Mara Sol, Theo Quill, Juno Pike, Ren Sato',
+        genre: 'Urban Ensemble Drama',
+        rating: 8.5,
+        tagline: 'The city looks up.',
+        year: 2025,
+    },
+    {
+        categoryId: '5301',
+        name: 'The Aegis Club',
+        description:
+            'Retired public servants reopen an old social club and mentor the next generation between neighborhood emergencies.',
+        director: 'Selene Park',
+        actors: 'Iris Vale, Bram Cole, Lina Storm, Mateo Rinn',
+        genre: 'Workplace Dramedy',
+        rating: 8.1,
+        tagline: 'Legacy is a living room.',
+        year: 2024,
+    },
+    {
+        categoryId: '5302',
+        name: 'Starfall Academy',
+        description:
+            'Cadets with unruly science experiments learn rescue work on a school ship near the asteroid belt.',
+        director: 'Vera Lin',
+        actors: 'Kai Mercer, Nova Bell, Cora Vale, Pax Arden',
+        genre: 'Animated Space School',
+        rating: 8.8,
+        tagline: 'Homework can save a planet.',
+        year: 2026,
+    },
+    {
+        categoryId: '5302',
+        name: 'Tomorrow Bureau',
+        description:
+            'Analysts with one-day foresight prevent disasters while trying not to rewrite their own lives.',
+        director: 'Noah Kade',
+        actors: 'Lena Voss, Theo Quill, Mira Stone, Rafi North',
+        genre: 'Science Fiction, Thriller',
+        rating: 8.2,
+        tagline: 'The future files first.',
+        year: 2025,
+    },
+    {
+        categoryId: '5303',
+        name: 'Alley Mask',
+        description:
+            'A bike courier investigates strange coded signals appearing in the city alleys.',
+        director: 'Mira Stone',
+        actors: 'Nico Reed, Anika Fern, Iris Vale, Mateo Rinn',
+        genre: 'Street Noir Mystery',
+        rating: 7.9,
+        tagline: 'Every shortcut has a secret.',
+        year: 2023,
+    },
+    {
+        categoryId: '5303',
+        name: 'Neon Sparrow',
+        description:
+            'A rooftop messenger follows glowing clues that only appear after midnight rain.',
+        director: 'Rafi North',
+        actors: 'Elle Fenn, Bram Cole, Cora Vale, Juno Pike',
+        genre: 'Cyberpunk Mystery',
+        rating: 7.8,
+        tagline: 'Small wings, bright city.',
+        year: 2024,
+    },
+    {
+        categoryId: '5304',
+        name: 'Cape Makers',
+        description:
+            'A fictional behind-the-scenes series about the tailors, engineers, and artists who design stage gear.',
+        director: 'Juno Pike',
+        actors: 'Mara Sol, Tessa Moon, Pax Arden, Ren Sato',
+        genre: 'Mockumentary, Design',
+        rating: 8.4,
+        tagline: 'Every symbol is handmade.',
+        year: 2024,
+    },
+    {
+        categoryId: '5304',
+        name: 'Citizens of the Beacon',
+        description:
+            'Ordinary residents tell the stories behind a citywide rescue network built after the first beacon lit.',
+        director: 'Noah Kade',
+        actors: 'Milo Grey, Nova Bell, Lena Voss, Rafi North',
+        genre: 'Mockumentary, Human Interest',
+        rating: 8.0,
+        tagline: 'A city can be a hero too.',
+        year: 2022,
+    },
+    {
+        categoryId: '5304',
+        name: 'Bubble Street Workshop',
+        description:
+            'Neighbors build simple inventions from circles, paper, and string in a cheerful street workshop.',
+        director: 'Iris Vale',
+        actors: 'Anika Fern, Milo Grey, Pax Arden, Elle Fenn',
+        genre: 'Flat Kids Craft Cartoon',
+        rating: 7.9,
+        tagline: 'Round ideas roll further.',
+        year: 2026,
+    },
+    {
+        categoryId: '5303',
+        name: 'Flatland Detectives',
+        description:
+            'Two geometric detectives solve gentle neighborhood mysteries using maps, shadows, and shape clues.',
+        director: 'Mira Stone',
+        actors: 'Nico Reed, Cora Vale, Juno Pike, Bram Cole',
+        genre: 'Geometric Mystery Comedy',
+        rating: 7.7,
+        tagline: 'Every clue has a shape.',
+        year: 2025,
+    },
+    {
+        categoryId: '5302',
+        name: 'Color Orchard',
+        description:
+            'A preschool orchard changes color each morning while tiny caretakers learn seasons, sharing, and sound.',
+        director: 'Selene Park',
+        actors: 'Milo Grey, Nova Bell, Tessa Moon, Elle Fenn',
+        genre: 'Preschool Nature Cartoon',
+        rating: 8.1,
+        tagline: 'Pick a color, grow a song.',
+        year: 2024,
+    },
+    {
+        categoryId: '5302',
+        name: 'Museum of Little Robots',
+        description:
+            'Small helpful robots wake up after closing time to arrange exhibits in a quiet retro-future museum.',
+        director: 'Vera Lin',
+        actors: 'Kai Mercer, Lina Storm, Ren Sato, Nova Bell',
+        genre: 'Flat Retro-Future Cartoon',
+        rating: 8.0,
+        tagline: 'Tiny gears, big curiosity.',
+        year: 2025,
+    },
+];
+
+export function buildMarketingPortalFixture(): MarketingPortalFixture {
+    const liveStreams = LIVE_CHANNELS.map((channel, index) =>
+        buildMarketingLiveStream(channel, index)
+    );
+    const vodStreams = MOVIES.map((movie, index) =>
+        buildMarketingVodStream(movie, index)
+    );
+    const seriesItems = SERIES.map((series, index) =>
+        buildMarketingSeriesItem(series, index)
+    );
+    const epgListingsByStreamId = new Map<number, RawEpgListing[]>();
+
+    liveStreams.forEach((stream, index) => {
+        epgListingsByStreamId.set(
+            stream.stream_id,
+            buildMarketingEpgListings(stream, LIVE_CHANNELS[index].epgTitles)
+        );
+    });
+
+    return {
+        liveCategories: LIVE_CATEGORIES,
+        liveStreams,
+        vodCategories: VOD_CATEGORIES,
+        vodStreams,
+        seriesCategories: SERIES_CATEGORIES,
+        seriesItems,
+        epgListingsByStreamId,
+    };
+}
+
+export function listMarketingArtworkFixtures(): MarketingArtworkFixture[] {
+    return [
+        ...MOVIES.map((movie) => ({
+            contentType: 'movie' as const,
+            description: movie.description,
+            genre: movie.genre,
+            name: movie.name,
+            slug: slugify(movie.name),
+            tagline: movie.tagline,
+            year: movie.year,
+        })),
+        ...SERIES.map((series) => ({
+            contentType: 'series' as const,
+            description: series.description,
+            genre: series.genre,
+            name: series.name,
+            slug: slugify(series.name),
+            tagline: series.tagline,
+            year: series.year,
+        })),
+    ];
+}
+
+export function buildMarketingVodDetails(stream: RawVodStream): RawVodDetails {
+    const movie = MOVIES.find((item) => item.name === stream.name) ?? MOVIES[0];
+    const durationSecs = 6_840 + (stream.stream_id % 5) * 600;
+    const hours = Math.floor(durationSecs / 3600);
+    const minutes = Math.floor((durationSecs % 3600) / 60);
+
+    return {
+        info: {
+            kinopoisk_url: '',
+            tmdb_id: stream.stream_id,
+            name: movie.name,
+            o_name: movie.name,
+            cover_big: marketingAssetUrl('poster', movie.name, '500x750'),
+            movie_image: marketingAssetUrl('poster', movie.name, '300x450'),
+            releasedate: `${movie.year}-04-18`,
+            episode_run_time: durationSecs,
+            youtube_trailer: '',
+            director: movie.director,
+            actors: movie.actors,
+            cast: movie.actors,
+            description: `${movie.tagline} ${movie.description}`,
+            plot: `${movie.tagline} ${movie.description}`,
+            age: '12',
+            mpaa_rating: 'PG-13',
+            rating_count_kinopoisk: 12_400 + stream.stream_id,
+            country: 'Meridian Union',
+            genre: movie.genre,
+            backdrop_path: [
+                marketingAssetUrl('backdrop', movie.name, '1280x720'),
+            ],
+            duration_secs: durationSecs,
+            duration: `${hours}h ${minutes}min`,
+            video: ['H.264'],
+            audio: ['AAC'],
+            bitrate: 4_200 + (stream.stream_id % 6) * 400,
+            rating: movie.rating,
+            rating_kinopoisk: movie.rating.toFixed(1),
+            rating_imdb: movie.rating.toFixed(1),
+        },
+        movie_data: {
+            stream_id: stream.stream_id,
+            name: movie.name,
+            added: stream.added,
+            category_id: stream.category_id,
+            container_extension: stream.container_extension,
+            custom_sid: '',
+            direct_source: '',
+        },
+    };
+}
+
+export function buildMarketingSeriesInfo(
+    series: RawSeriesItem,
+    seasonCount: number,
+    episodesPerSeason: number
+): RawSeriesInfo {
+    const seriesFixture =
+        SERIES.find((item) => item.name === series.name) ?? SERIES[0];
+    const seasons = Array.from({ length: seasonCount }, (_, seasonIndex) => {
+        const seasonNumber = seasonIndex + 1;
+        return {
+            air_date: `${seriesFixture.year + seasonIndex}-09-01`,
+            episode_count: episodesPerSeason,
+            id: series.series_id * 100 + seasonNumber,
+            name: `Season ${seasonNumber}`,
+            overview: `Season ${seasonNumber} expands ${seriesFixture.name} with new heroic alliances, brighter emblems, and city-scale rescues.`,
+            season_number: seasonNumber,
+            cover: marketingAssetUrl(
+                'season',
+                `${seriesFixture.name} Season ${seasonNumber}`,
+                '300x450'
+            ),
+            cover_big: marketingAssetUrl(
+                'season',
+                `${seriesFixture.name} Season ${seasonNumber}`,
+                '500x750'
+            ),
+        };
+    });
+    const episodes: RawSeriesInfo['episodes'] = {};
+
+    seasons.forEach((season) => {
+        episodes[String(season.season_number)] = Array.from(
+            { length: episodesPerSeason },
+            (_, episodeIndex) => {
+                const episodeNumber = episodeIndex + 1;
+                const episodeId =
+                    MARKETING_EPISODE_ID_BASE +
+                    (series.series_id - MARKETING_SERIES_ID_BASE) * 100 +
+                    season.season_number * 10 +
+                    episodeNumber;
+                return {
+                    id: String(episodeId),
+                    episode_num: episodeNumber,
+                    title: `${seriesFixture.name} S${season.season_number}E${episodeNumber}`,
+                    container_extension: 'mkv',
+                    info: {
+                        tmdb_id: episodeId,
+                        releasedate: `${seriesFixture.year + season.season_number - 1}-10-${String(
+                            episodeNumber
+                        ).padStart(2, '0')}`,
+                        plot: `A new emblem appears over the skyline while the team follows a rescue signal hidden in plain sight.`,
+                        duration_secs: 2_640,
+                        duration: '44min',
+                        movie_image: marketingAssetUrl(
+                            'episode',
+                            `${seriesFixture.name} Episode ${episodeNumber}`,
+                            '600x338'
+                        ),
+                        bitrate: 4_400,
+                        rating: Number(
+                            Math.min(
+                                9.2,
+                                seriesFixture.rating + episodeNumber / 20
+                            ).toFixed(1)
+                        ),
+                    },
+                    custom_sid: '',
+                    added: String(ADDED_BASE - episodeId),
+                    season: season.season_number,
+                    direct_source: '',
+                };
+            }
+        );
+    });
+
+    return {
+        seasons,
+        episodes,
+        info: {
+            name: seriesFixture.name,
+            cover: series.cover,
+            plot: `${seriesFixture.tagline} ${seriesFixture.description}`,
+            cast: seriesFixture.actors,
+            director: seriesFixture.director,
+            genre: seriesFixture.genre,
+            releaseDate: `${seriesFixture.year}-09-01`,
+            last_modified: '2026-04-20',
+            rating: seriesFixture.rating.toFixed(1),
+            rating_5based: Number((seriesFixture.rating / 2).toFixed(1)),
+            backdrop_path: [
+                marketingAssetUrl('backdrop', seriesFixture.name, '1280x720'),
+            ],
+            youtube_trailer: '',
+            episode_run_time: '44',
+            category_id: String(series.category_id),
+        },
+    };
+}
+
+export function marketingAssetUrl(
+    kind: MarketingAssetKind,
+    title: string,
+    size: string
+): string {
+    return `${marketingAssetOrigin()}/assets/marketing/${kind}/${slugify(
+        title
+    )}.svg?size=${encodeURIComponent(size)}`;
+}
+
+export function renderMarketingAssetSvg(
+    kind: MarketingAssetKind,
+    slug: string,
+    size: string | undefined
+): string {
+    const { width, height } = parseSize(size, kind);
+    const title = titleFromSlug(slug);
+    const palette = paletteFor(`${kind}:${slug}`);
+    const initials = title
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase() ?? '')
+        .join('');
+
+    if (kind === 'logo') {
+        return svgDocument(
+            width,
+            height,
+            `
+            <defs>
+                <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+                    <stop offset="0%" stop-color="${palette[0]}" />
+                    <stop offset="100%" stop-color="${palette[1]}" />
+                </linearGradient>
+            </defs>
+            <rect width="100%" height="100%" rx="${width * 0.22}" fill="url(#bg)" />
+            <circle cx="${width * 0.72}" cy="${height * 0.25}" r="${width * 0.2}" fill="${palette[2]}" opacity="0.35" />
+            <path d="M ${width * 0.16} ${height * 0.72} C ${width * 0.35} ${height * 0.48}, ${width * 0.58} ${height * 0.92}, ${width * 0.84} ${height * 0.58}" fill="none" stroke="#fff" stroke-width="${Math.max(8, width * 0.05)}" stroke-linecap="round" opacity="0.42" />
+            <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="${width * 0.3}" font-weight="800" fill="#fff">${escapeSvg(initials)}</text>
+            `
+        );
+    }
+
+    if (kind === 'backdrop' || kind === 'episode') {
+        const skylineY = height * 0.7;
+        const heroX = width * (0.34 + (hash(slug) % 20) / 100);
+        const heroY = height * 0.38;
+        const accentX = width * (0.68 + (hash(`${slug}:light`) % 16) / 100);
+
+        return svgDocument(
+            width,
+            height,
+            `
+            <defs>
+                <linearGradient id="sky" x1="0" x2="1" y1="0" y2="1">
+                    <stop offset="0%" stop-color="${palette[0]}" />
+                    <stop offset="48%" stop-color="${palette[1]}" />
+                    <stop offset="100%" stop-color="${palette[2]}" />
+                </linearGradient>
+                <radialGradient id="flare" cx="70%" cy="28%" r="52%">
+                    <stop offset="0%" stop-color="#fff4d2" stop-opacity="0.74" />
+                    <stop offset="42%" stop-color="#ffffff" stop-opacity="0.22" />
+                    <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+                </radialGradient>
+                <radialGradient id="groundGlow" cx="42%" cy="86%" r="66%">
+                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.24" />
+                    <stop offset="100%" stop-color="#000000" stop-opacity="0" />
+                </radialGradient>
+                <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
+                    <feGaussianBlur stdDeviation="${Math.max(8, width * 0.015)}" />
+                </filter>
+            </defs>
+            <rect width="100%" height="100%" fill="url(#sky)" />
+            <rect width="100%" height="100%" fill="url(#flare)" />
+            <rect width="100%" height="100%" fill="url(#groundGlow)" />
+            <circle cx="${accentX}" cy="${height * 0.26}" r="${Math.min(width, height) * 0.18}" fill="#ffffff" opacity="0.18" filter="url(#soft)" />
+            <path d="M ${width * 0.02} ${height * 0.78} C ${width * 0.22} ${height * 0.48}, ${width * 0.48} ${height * 0.92}, ${width * 0.98} ${height * 0.5}" fill="none" stroke="#ffffff" stroke-width="${Math.max(6, width * 0.012)}" stroke-linecap="round" opacity="0.18" />
+            <path d="M ${width * 0.08} ${height * 0.18} L ${width * 0.96} ${height * 0.58}" stroke="#ffffff" stroke-width="${Math.max(2, width * 0.003)}" opacity="0.16" />
+            <path d="M ${width * 0.92} ${height * 0.12} L ${width * 0.2} ${height * 0.66}" stroke="#ffffff" stroke-width="${Math.max(2, width * 0.003)}" opacity="0.12" />
+            <path d="M ${width * 0.02} ${skylineY} L ${width * 0.02} ${height} L ${width * 0.98} ${height} L ${width * 0.98} ${skylineY + height * 0.08} L ${width * 0.9} ${skylineY + height * 0.08} L ${width * 0.9} ${skylineY - height * 0.05} L ${width * 0.8} ${skylineY - height * 0.05} L ${width * 0.8} ${skylineY + height * 0.02} L ${width * 0.7} ${skylineY + height * 0.02} L ${width * 0.7} ${skylineY - height * 0.11} L ${width * 0.6} ${skylineY - height * 0.11} L ${width * 0.6} ${skylineY + height * 0.05} L ${width * 0.5} ${skylineY + height * 0.05} L ${width * 0.5} ${skylineY - height * 0.04} L ${width * 0.39} ${skylineY - height * 0.04} L ${width * 0.39} ${skylineY + height * 0.09} L ${width * 0.28} ${skylineY + height * 0.09} L ${width * 0.28} ${skylineY - height * 0.02} L ${width * 0.18} ${skylineY - height * 0.02} L ${width * 0.18} ${skylineY + height * 0.1} L ${width * 0.08} ${skylineY + height * 0.1} L ${width * 0.08} ${skylineY - height * 0.06} Z" fill="#030712" opacity="0.68" />
+            <path d="M ${heroX - width * 0.1} ${heroY + height * 0.06} C ${heroX - width * 0.3} ${heroY + height * 0.22}, ${heroX - width * 0.24} ${heroY + height * 0.46}, ${heroX + width * 0.02} ${heroY + height * 0.48} C ${heroX - width * 0.02} ${heroY + height * 0.24}, ${heroX + width * 0.02} ${heroY + height * 0.1}, ${heroX + width * 0.08} ${heroY + height * 0.02} Z" fill="#090b13" opacity="0.72" />
+            <ellipse cx="${heroX}" cy="${heroY}" rx="${width * 0.035}" ry="${height * 0.065}" fill="#151722" opacity="0.9" />
+            <path d="M ${heroX - width * 0.045} ${heroY + height * 0.07} L ${heroX + width * 0.052} ${heroY + height * 0.07} L ${heroX + width * 0.09} ${heroY + height * 0.36} L ${heroX - width * 0.08} ${heroY + height * 0.36} Z" fill="#0d1020" opacity="0.92" />
+            <path d="M ${heroX - width * 0.02} ${heroY + height * 0.14} L ${heroX + width * 0.045} ${heroY + height * 0.14} L ${heroX + width * 0.01} ${heroY + height * 0.22} Z" fill="#ffffff" opacity="0.34" />
+            <ellipse cx="${heroX + width * 0.01}" cy="${skylineY + height * 0.23}" rx="${width * 0.22}" ry="${height * 0.045}" fill="#000000" opacity="0.28" filter="url(#soft)" />
+            `
+        );
+    }
+
+    const titleFontSize = height * 0.07;
+    const subLabel =
+        kind === 'season' ? 'SEASON HERO ART' : 'FICTIONAL HERO FEATURE';
+    const creditLine = creditLineFor(`${kind}:${slug}`);
+    const cityY = height * 0.74;
+    const titleLines = title
+        .split(/\s+/)
+        .reduce<string[]>((lines, word) => {
+            const current = lines.at(-1) ?? '';
+            if (`${current} ${word}`.trim().length > 13 && current) {
+                lines.push(word);
+            } else if (lines.length === 0) {
+                lines.push(word);
+            } else {
+                lines[lines.length - 1] = `${current} ${word}`.trim();
+            }
+            return lines;
+        }, [])
+        .slice(0, 3);
+
+    return svgDocument(
+        width,
+        height,
+        `
+        <defs>
+            <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+                <stop offset="0%" stop-color="${palette[0]}" />
+                <stop offset="56%" stop-color="${palette[1]}" />
+                <stop offset="100%" stop-color="${palette[2]}" />
+            </linearGradient>
+            <radialGradient id="light" cx="70%" cy="22%" r="68%">
+                <stop offset="0%" stop-color="#ffffff" stop-opacity="0.38" />
+                <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+            </radialGradient>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#bg)" />
+        <rect width="100%" height="100%" fill="url(#light)" />
+        <polygon points="${width * 0.7},${height * 0.04} ${width * 0.78},${height * 0.32} ${width * 0.95},${height * 0.28} ${width * 0.82},${height * 0.5} ${width * 0.9},${height * 0.8} ${width * 0.66},${height * 0.54} ${width * 0.48},${height * 0.62} ${width * 0.58},${height * 0.38}" fill="#ffffff" opacity="0.18" />
+        <circle cx="${width * 0.18}" cy="${height * 0.22}" r="${Math.min(width, height) * 0.22}" fill="#ffffff" opacity="0.14" />
+        <circle cx="${width * 0.86}" cy="${height * 0.76}" r="${Math.min(width, height) * 0.3}" fill="#000000" opacity="0.2" />
+        <path d="M ${width * -0.1} ${height * 0.78} C ${width * 0.24} ${height * 0.48}, ${width * 0.52} ${height * 0.92}, ${width * 1.1} ${height * 0.42}" fill="none" stroke="#ffffff" stroke-width="${Math.max(10, width * 0.025)}" stroke-linecap="round" opacity="0.2" />
+        <path d="M ${width * 0.16} ${height * 0.28} C ${width * 0.32} ${height * 0.08}, ${width * 0.58} ${height * 0.08}, ${width * 0.76} ${height * 0.3} C ${width * 0.62} ${height * 0.44}, ${width * 0.36} ${height * 0.44}, ${width * 0.16} ${height * 0.28} Z" fill="#000000" opacity="0.24" />
+        <circle cx="${width * 0.36}" cy="${height * 0.27}" r="${Math.max(8, width * 0.035)}" fill="#ffffff" opacity="0.5" />
+        <circle cx="${width * 0.58}" cy="${height * 0.27}" r="${Math.max(8, width * 0.035)}" fill="#ffffff" opacity="0.5" />
+        <path d="M ${width * 0.06} ${cityY} L ${width * 0.06} ${height * 0.92} L ${width * 0.96} ${height * 0.92} L ${width * 0.96} ${cityY + height * 0.08} L ${width * 0.88} ${cityY + height * 0.08} L ${width * 0.88} ${cityY - height * 0.04} L ${width * 0.78} ${cityY - height * 0.04} L ${width * 0.78} ${cityY + height * 0.03} L ${width * 0.66} ${cityY + height * 0.03} L ${width * 0.66} ${cityY - height * 0.09} L ${width * 0.55} ${cityY - height * 0.09} L ${width * 0.55} ${cityY + height * 0.05} L ${width * 0.44} ${cityY + height * 0.05} L ${width * 0.44} ${cityY - height * 0.02} L ${width * 0.32} ${cityY - height * 0.02} L ${width * 0.32} ${cityY + height * 0.07} L ${width * 0.2} ${cityY + height * 0.07} L ${width * 0.2} ${cityY - height * 0.05} Z" fill="#050812" opacity="0.58" />
+        <path d="M ${width * 0.06} ${height * 0.09} L ${width * 0.94} ${height * 0.09}" stroke="#ffffff" stroke-width="2" opacity="0.28" />
+        <text x="${width * 0.08}" y="${height * 0.15}" font-family="Arial, Helvetica, sans-serif" font-size="${Math.max(11, height * 0.025)}" font-weight="700" letter-spacing="3" fill="#ffffff" opacity="0.76">${subLabel}</text>
+        ${titleLines
+            .map(
+                (line, index) =>
+                    `<text x="${width * 0.08}" y="${height * 0.58 + index * titleFontSize * 1.05}" font-family="Arial, Helvetica, sans-serif" font-size="${titleFontSize}" font-weight="900" fill="#ffffff">${escapeSvg(line.toUpperCase())}</text>`
+            )
+            .join('')}
+        <text x="${width * 0.08}" y="${height * 0.84}" font-family="Arial, Helvetica, sans-serif" font-size="${Math.max(11, height * 0.024)}" font-weight="800" fill="#ffffff" opacity="0.76">${escapeSvg(creditLine)}</text>
+        <text x="${width * 0.08}" y="${height * 0.9}" font-family="Arial, Helvetica, sans-serif" font-size="${Math.max(12, height * 0.028)}" font-weight="700" fill="#ffffff" opacity="0.72">IPTVnator fictional demo artwork</text>
+        `
+    );
+}
+
+function buildMarketingLiveStream(
+    channel: MarketingLiveChannel,
+    index: number
+): RawLiveStream {
+    const streamId = MARKETING_LIVE_STREAM_ID_BASE + index;
+    return {
+        num: index + 1,
+        name: channel.name,
+        stream_type: 'live',
+        stream_id: streamId,
+        stream_icon: marketingAssetUrl('logo', channel.name, '256x256'),
+        epg_channel_id: `marketing-channel-${streamId}`,
+        added: String(ADDED_BASE - index * 4_000),
+        category_id: channel.categoryId,
+        custom_sid: '',
+        direct_source: '',
+        tv_archive: 1,
+        tv_archive_duration: 3,
+        rating_imdb: (7.2 + index / 10).toFixed(1),
+    };
+}
+
+function buildMarketingVodStream(
+    movie: MarketingMovie,
+    index: number
+): RawVodStream {
+    const streamId = MARKETING_VOD_STREAM_ID_BASE + index;
+    return {
+        num: index + 1,
+        name: movie.name,
+        stream_type: 'movie',
+        stream_id: streamId,
+        stream_icon: marketingAssetUrl('poster', movie.name, '300x450'),
+        added: String(ADDED_BASE - index * 8_000),
+        category_id: movie.categoryId,
+        custom_sid: '',
+        direct_source: '',
+        rating: movie.rating,
+        rating_5based: Number((movie.rating / 2).toFixed(1)),
+        rating_imdb: movie.rating.toFixed(1),
+        container_extension: 'mkv',
+        type: 'movie',
+    };
+}
+
+function buildMarketingSeriesItem(
+    series: MarketingSeries,
+    index: number
+): RawSeriesItem {
+    const seriesId = MARKETING_SERIES_ID_BASE + index;
+    return {
+        num: index + 1,
+        name: series.name,
+        series_id: seriesId,
+        cover: marketingAssetUrl('poster', series.name, '300x450'),
+        plot: `${series.tagline} ${series.description}`,
+        cast: series.actors,
+        director: series.director,
+        genre: series.genre,
+        releaseDate: `${series.year}-09-01`,
+        last_modified: '2026-04-20',
+        rating: series.rating.toFixed(1),
+        rating_5based: Number((series.rating / 2).toFixed(1)),
+        backdrop_path: [marketingAssetUrl('backdrop', series.name, '1280x720')],
+        youtube_trailer: '',
+        episode_run_time: '44',
+        category_id: Number(series.categoryId),
+    };
+}
+
+function buildMarketingEpgListings(
+    stream: RawLiveStream,
+    titles: string[]
+): RawEpgListing[] {
+    const now = Math.floor(Date.now() / 1000);
+    const slotSeconds = 30 * 60;
+    const roundedNow = now - (now % slotSeconds);
+    const channelId = stream.epg_channel_id;
+
+    return Array.from({ length: 8 }, (_, index) => {
+        const title = titles[index % titles.length];
+        const startTimestamp = roundedNow + (index - 2) * slotSeconds;
+        return buildEpgListing({
+            id: `${stream.stream_id}-${index}`,
+            epgId: channelId,
+            title,
+            description: `${title} on ${stream.name}, part of the fictional IPTVnator demo schedule.`,
+            startTimestamp,
+            stopTimestamp: startTimestamp + slotSeconds,
+            channelId,
+        });
+    });
+}
+
+function marketingAssetOrigin(): string {
+    const port = process.env['PORT'] ?? '3211';
+    return `http://localhost:${port}`;
+}
+
+function slugify(value: string): string {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
+function titleFromSlug(slug: string): string {
+    return slug
+        .replace(/\.svg$/i, '')
+        .split('-')
+        .filter(Boolean)
+        .map((part) => `${part[0]?.toUpperCase() ?? ''}${part.slice(1)}`)
+        .join(' ');
+}
+
+function parseSize(
+    size: string | undefined,
+    kind: MarketingAssetKind
+): { width: number; height: number } {
+    const fallback =
+        kind === 'backdrop'
+            ? { width: 1280, height: 720 }
+            : kind === 'episode'
+              ? { width: 600, height: 338 }
+              : kind === 'logo'
+                ? { width: 256, height: 256 }
+                : { width: 300, height: 450 };
+    const match = size?.match(/^(\d+)x(\d+)$/);
+    if (!match) {
+        return fallback;
+    }
+    return {
+        width: Number(match[1]),
+        height: Number(match[2]),
+    };
+}
+
+function paletteFor(seed: string): [string, string, string] {
+    const palettes: Array<[string, string, string]> = [
+        ['#0b1026', '#1b6b77', '#f2a65a'],
+        ['#15111f', '#6b3fa0', '#20c7b5'],
+        ['#071b2c', '#2457a6', '#f05d5e'],
+        ['#1b1b24', '#8d4f2a', '#e9c46a'],
+        ['#10251d', '#2a9d8f', '#e76f51'],
+        ['#18151f', '#b23a48', '#f4a261'],
+    ];
+    const index = hash(seed) % palettes.length;
+    return palettes[index];
+}
+
+function creditLineFor(seed: string): string {
+    const credits = [
+        'STARRING MARA SOL / THEO QUILL / IRIS VALE',
+        'STARRING LENA VOSS / MATEO RINN / CORA VALE',
+        'STARRING KAI MERCER / NOVA BELL / REN SATO',
+        'STARRING ANIKA FERN / MILO GREY / PAX ARDEN',
+        'STARRING NICO REED / TESSA MOON / BRAM COLE',
+        'STARRING ELLE FENN / RAFI NORTH / MIRA STONE',
+    ];
+    return credits[hash(seed) % credits.length];
+}
+
+function hash(value: string): number {
+    return value.split('').reduce((acc, char) => {
+        return (acc * 31 + char.charCodeAt(0)) >>> 0;
+    }, 0);
+}
+
+function svgDocument(width: number, height: number, body: string): string {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img">${body}</svg>`;
+}
+
+function escapeSvg(value: string): string {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
diff --git a/apps/xtream-mock-server/src/app/generators/series.generator.ts b/apps/xtream-mock-server/src/app/generators/series.generator.ts
new file mode 100644
index 0000000..d9de871
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/generators/series.generator.ts
@@ -0,0 +1,184 @@
+import { faker } from '@faker-js/faker';
+import { RawCategory } from './categories.generator.js';
+
+export interface RawSeriesItem {
+    num: number;
+    name: string;
+    series_id: number;
+    cover: string;
+    plot: string;
+    cast: string;
+    director: string;
+    genre: string;
+    releaseDate: string;
+    last_modified: string;
+    rating: string;
+    rating_5based: number;
+    backdrop_path: string[];
+    youtube_trailer: string;
+    episode_run_time: string;
+    category_id: number;
+}
+
+export interface RawSeriesInfo {
+    seasons: RawSeason[];
+    info: RawSeriesInfoMeta;
+    episodes: Record<string, RawEpisode[]>;
+}
+
+export interface RawSeason {
+    air_date: string;
+    episode_count: number;
+    id: number;
+    name: string;
+    overview: string;
+    season_number: number;
+    cover: string;
+    cover_big: string;
+}
+
+export interface RawEpisode {
+    id: string;
+    episode_num: number;
+    title: string;
+    container_extension: string;
+    info: {
+        tmdb_id: number;
+        releasedate: string;
+        plot: string;
+        duration_secs: number;
+        duration: string;
+        movie_image: string;
+        bitrate: number;
+        rating: number;
+    };
+    custom_sid: string;
+    added: string;
+    season: number;
+    direct_source: string;
+}
+
+export interface RawSeriesInfoMeta {
+    name: string;
+    cover: string;
+    plot: string;
+    cast: string;
+    director: string;
+    genre: string;
+    releaseDate: string;
+    last_modified: string;
+    rating: string;
+    rating_5based: number;
+    backdrop_path: string[];
+    youtube_trailer: string;
+    episode_run_time: string;
+    category_id: string;
+}
+
+const SERIES_ID_BASE = 30_000;
+const EPISODE_ID_BASE = 50_000;
+
+export function generateSeriesItems(
+    categories: RawCategory[],
+    itemsPerCategory: number
+): RawSeriesItem[] {
+    const items: RawSeriesItem[] = [];
+    let num = 1;
+
+    for (const cat of categories) {
+        for (let i = 0; i < itemsPerCategory; i++) {
+            const seriesId = SERIES_ID_BASE + items.length;
+            const rating = (Math.random() * 4 + 5).toFixed(1);
+            items.push({
+                num: num++,
+                name: faker.company.catchPhrase(),
+                series_id: seriesId,
+                cover: `https://picsum.photos/seed/series-${seriesId}/300/450`,
+                plot: faker.lorem.paragraph(),
+                cast: Array.from({ length: 4 }, () => faker.person.fullName()).join(', '),
+                director: faker.person.fullName(),
+                genre: [faker.music.genre(), faker.music.genre()].join(', '),
+                releaseDate: faker.date.past({ years: 10 }).toISOString().slice(0, 10),
+                last_modified: faker.date.recent({ days: 30 }).toISOString().slice(0, 10),
+                rating,
+                rating_5based: parseFloat((parseFloat(rating) / 2).toFixed(1)),
+                backdrop_path: [
+                    `https://picsum.photos/seed/series-bg-${seriesId}/1280/720`,
+                ],
+                youtube_trailer: '',
+                episode_run_time: String(faker.number.int({ min: 22, max: 60 })),
+                category_id: parseInt(cat.category_id, 10),
+            });
+        }
+    }
+    return items;
+}
+
+export function generateSeriesInfo(
+    series: RawSeriesItem,
+    seasonCount: number,
+    episodesPerSeason: number
+): RawSeriesInfo {
+    const seasons: RawSeason[] = [];
+    const episodes: Record<string, RawEpisode[]> = {};
+    let episodeCounter = EPISODE_ID_BASE + series.series_id;
+
+    for (let s = 1; s <= seasonCount; s++) {
+        const episodeCount = episodesPerSeason;
+        seasons.push({
+            air_date: faker.date.past({ years: 5 }).toISOString().slice(0, 10),
+            episode_count: episodeCount,
+            id: series.series_id * 100 + s,
+            name: `Season ${s}`,
+            overview: faker.lorem.sentence(),
+            season_number: s,
+            cover: `https://picsum.photos/seed/season-${series.series_id}-${s}/300/450`,
+            cover_big: `https://picsum.photos/seed/season-big-${series.series_id}-${s}/500/750`,
+        });
+
+        const seasonEpisodes: RawEpisode[] = [];
+        for (let e = 1; e <= episodeCount; e++) {
+            const durationSecs = faker.number.int({ min: 1200, max: 3600 });
+            seasonEpisodes.push({
+                id: String(episodeCounter++),
+                episode_num: e,
+                title: `${series.name} S${s}E${e}`,
+                container_extension: 'mkv',
+                info: {
+                    tmdb_id: faker.number.int({ min: 100, max: 999999 }),
+                    releasedate: faker.date.past({ years: 5 }).toISOString().slice(0, 10),
+                    plot: faker.lorem.sentence(),
+                    duration_secs: durationSecs,
+                    duration: `${Math.floor(durationSecs / 60)}min`,
+                    movie_image: `https://picsum.photos/seed/ep-${episodeCounter}/300/200`,
+                    bitrate: faker.number.int({ min: 1500, max: 8000 }),
+                    rating: parseFloat((Math.random() * 3 + 7).toFixed(1)),
+                },
+                custom_sid: '',
+                added: String(Math.floor(Date.now() / 1000 - Math.random() * 1e7)),
+                season: s,
+                direct_source: '',
+            });
+        }
+        episodes[String(s)] = seasonEpisodes;
+    }
+
+    const info: RawSeriesInfoMeta = {
+        name: series.name,
+        cover: series.cover,
+        plot: series.plot,
+        cast: series.cast,
+        director: series.director,
+        genre: series.genre,
+        releaseDate: series.releaseDate,
+        last_modified: series.last_modified,
+        rating: series.rating,
+        rating_5based: series.rating_5based,
+        backdrop_path: series.backdrop_path,
+        youtube_trailer: '',
+        episode_run_time: series.episode_run_time,
+        category_id: String(series.category_id),
+    };
+
+    return { seasons, info, episodes };
+}
diff --git a/apps/xtream-mock-server/src/app/generators/vod.generator.ts b/apps/xtream-mock-server/src/app/generators/vod.generator.ts
new file mode 100644
index 0000000..1c7e8c5
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/generators/vod.generator.ts
@@ -0,0 +1,147 @@
+import { faker } from '@faker-js/faker';
+import { RawCategory } from './categories.generator.js';
+
+export interface RawVodStream {
+    num: number;
+    name: string;
+    stream_type: 'movie';
+    stream_id: number;
+    stream_icon: string;
+    added: string;
+    category_id: string;
+    custom_sid: string;
+    direct_source: string;
+    rating: number;
+    rating_5based: number;
+    rating_imdb: string;
+    container_extension: string;
+    type: 'movie';
+}
+
+export interface RawVodDetails {
+    info:
+        | {
+              kinopoisk_url: string;
+              tmdb_id: number;
+              name: string;
+              o_name: string;
+              cover_big: string;
+              movie_image: string;
+              releasedate: string;
+              episode_run_time: number;
+              youtube_trailer: string;
+              director: string;
+              actors: string;
+              cast: string;
+              description: string;
+              plot: string;
+              age: string;
+              mpaa_rating: string;
+              rating_count_kinopoisk: number;
+              country: string;
+              genre: string;
+              backdrop_path: string[];
+              duration_secs: number;
+              duration: string;
+              video: string[];
+              audio: string[];
+              bitrate: number;
+              rating: number;
+              rating_kinopoisk: string;
+              rating_imdb: string;
+          }
+        | [];
+    movie_data?: {
+        stream_id: number;
+        name: string;
+        added: string;
+        category_id: string;
+        container_extension: string;
+        custom_sid: string;
+        direct_source: string;
+    };
+}
+
+const VOD_STREAM_ID_BASE = 20_000;
+const CONTAINER_EXTENSIONS = ['mkv', 'mp4', 'avi'];
+
+export function generateVodStreams(
+    categories: RawCategory[],
+    itemsPerCategory: number
+): RawVodStream[] {
+    const streams: RawVodStream[] = [];
+    let num = 1;
+
+    for (const cat of categories) {
+        for (let i = 0; i < itemsPerCategory; i++) {
+            const streamId = VOD_STREAM_ID_BASE + streams.length;
+            const rating = Math.random() * 4 + 5;
+            streams.push({
+                num: num++,
+                name: faker.music.songName() + ': ' + faker.lorem.words(2),
+                stream_type: 'movie',
+                stream_id: streamId,
+                stream_icon: `https://picsum.photos/seed/vod-${streamId}/300/450`,
+                added: String(Math.floor(Date.now() / 1000 - Math.random() * 1e8)),
+                category_id: cat.category_id,
+                custom_sid: '',
+                direct_source: '',
+                rating: parseFloat(rating.toFixed(1)),
+                rating_5based: parseFloat((rating / 2).toFixed(1)),
+                rating_imdb: rating.toFixed(1),
+                container_extension: CONTAINER_EXTENSIONS[streamId % CONTAINER_EXTENSIONS.length],
+                type: 'movie',
+            });
+        }
+    }
+    return streams;
+}
+
+export function generateVodDetails(stream: RawVodStream): RawVodDetails {
+    const durationSecs = faker.number.int({ min: 3600, max: 9000 });
+    const hours = Math.floor(durationSecs / 3600);
+    const mins = Math.floor((durationSecs % 3600) / 60);
+    return {
+        info: {
+            kinopoisk_url: '',
+            tmdb_id: faker.number.int({ min: 100, max: 999999 }),
+            name: stream.name,
+            o_name: stream.name,
+            cover_big: `https://picsum.photos/seed/vod-big-${stream.stream_id}/500/750`,
+            movie_image: `https://picsum.photos/seed/vod-img-${stream.stream_id}/300/450`,
+            releasedate: faker.date.past({ years: 20 }).toISOString().slice(0, 10),
+            episode_run_time: durationSecs,
+            youtube_trailer: '',
+            director: faker.person.fullName(),
+            actors: Array.from({ length: 5 }, () => faker.person.fullName()).join(', '),
+            cast: Array.from({ length: 5 }, () => faker.person.fullName()).join(', '),
+            description: faker.lorem.paragraph(),
+            plot: faker.lorem.paragraph(),
+            age: '16',
+            mpaa_rating: 'PG-13',
+            rating_count_kinopoisk: faker.number.int({ min: 100, max: 50000 }),
+            country: faker.location.country(),
+            genre: [faker.music.genre(), faker.music.genre()].join(', '),
+            backdrop_path: [
+                `https://picsum.photos/seed/vod-backdrop-${stream.stream_id}/1280/720`,
+            ],
+            duration_secs: durationSecs,
+            duration: `${hours}h ${mins}min`,
+            video: ['H.264'],
+            audio: ['AAC'],
+            bitrate: faker.number.int({ min: 1500, max: 8000 }),
+            rating: stream.rating,
+            rating_kinopoisk: stream.rating_imdb,
+            rating_imdb: stream.rating_imdb,
+        },
+        movie_data: {
+            stream_id: stream.stream_id,
+            name: stream.name,
+            added: stream.added,
+            category_id: stream.category_id,
+            container_extension: stream.container_extension,
+            custom_sid: '',
+            direct_source: '',
+        },
+    };
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-account-info.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-account-info.handler.ts
new file mode 100644
index 0000000..681668b
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-account-info.handler.ts
@@ -0,0 +1,34 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+
+export function handleGetAccountInfo(req: Request, res: Response): void {
+    const { username = '', password = '' } = req.query as Record<string, string>;
+    const data = getPortalData(username, password);
+    const { scenario } = data;
+
+    res.json({
+        user_info: {
+            username,
+            password,
+            message: '',
+            auth: 1,
+            status: scenario.accountStatus,
+            exp_date: String(Math.floor(new Date(scenario.expiryDate).getTime() / 1000)),
+            is_trial: '0',
+            active_cons: '1',
+            created_at: String(Math.floor(Date.now() / 1000 - 86400 * 365)),
+            max_connections: '2',
+            allowed_output_formats: ['m3u8', 'ts', 'rtmp'],
+        },
+        server_info: {
+            url: `http://localhost:3211`,
+            port: '3211',
+            https_port: '',
+            server_protocol: 'http',
+            rtmp_port: '',
+            timezone: 'UTC',
+            timestamp_now: Math.floor(Date.now() / 1000),
+            time_now: new Date().toISOString().replace('T', ' ').replace('.000Z', ''),
+        },
+    });
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-categories.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-categories.handler.ts
new file mode 100644
index 0000000..0491da9
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-categories.handler.ts
@@ -0,0 +1,20 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+
+export function handleGetLiveCategories(req: Request, res: Response): void {
+    const { username = '', password = '' } = req.query as Record<string, string>;
+    const { liveCategories } = getPortalData(username, password);
+    res.json(liveCategories);
+}
+
+export function handleGetVodCategories(req: Request, res: Response): void {
+    const { username = '', password = '' } = req.query as Record<string, string>;
+    const { vodCategories } = getPortalData(username, password);
+    res.json(vodCategories);
+}
+
+export function handleGetSeriesCategories(req: Request, res: Response): void {
+    const { username = '', password = '' } = req.query as Record<string, string>;
+    const { seriesCategories } = getPortalData(username, password);
+    res.json(seriesCategories);
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-full-epg.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-full-epg.handler.ts
new file mode 100644
index 0000000..d57fa05
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-full-epg.handler.ts
@@ -0,0 +1,17 @@
+import { Request, Response } from 'express';
+import { getEpgListings } from '../data-store.js';
+
+export function handleGetFullEpg(req: Request, res: Response): void {
+    const {
+        username = '',
+        password = '',
+        stream_id,
+    } = req.query as Record<string, string>;
+    if (!stream_id) {
+        res.json({ epg_listings: [] });
+        return;
+    }
+
+    const id = parseInt(stream_id, 10);
+    res.json({ epg_listings: getEpgListings(username, password, id) });
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-series-info.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-series-info.handler.ts
new file mode 100644
index 0000000..957d90d
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-series-info.handler.ts
@@ -0,0 +1,16 @@
+import { Request, Response } from 'express';
+import { getSeriesInfo } from '../data-store.js';
+
+export function handleGetSeriesInfo(req: Request, res: Response): void {
+    const { username = '', password = '', series_id } = req.query as Record<string, string>;
+    if (!series_id) {
+        res.status(400).json({ error: 'series_id required' });
+        return;
+    }
+    const info = getSeriesInfo(username, password, parseInt(series_id, 10));
+    if (!info) {
+        res.status(404).json({ error: 'Series not found' });
+        return;
+    }
+    res.json(info);
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-short-epg.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-short-epg.handler.ts
new file mode 100644
index 0000000..cb53b6d
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-short-epg.handler.ts
@@ -0,0 +1,19 @@
+import { Request, Response } from 'express';
+import { getShortEpgListings } from '../data-store.js';
+
+export function handleGetShortEpg(req: Request, res: Response): void {
+    const {
+        username = '',
+        password = '',
+        stream_id,
+        limit,
+    } = req.query as Record<string, string>;
+    if (!stream_id) {
+        res.json({ epg_listings: [] });
+        return;
+    }
+    const id = parseInt(stream_id, 10);
+    const limitNum = limit ? Math.min(parseInt(limit, 10), 50) : 12;
+    const listings = getShortEpgListings(username, password, id, limitNum);
+    res.json({ epg_listings: listings });
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-streams.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-streams.handler.ts
new file mode 100644
index 0000000..6d0bad0
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-streams.handler.ts
@@ -0,0 +1,29 @@
+import { Request, Response } from 'express';
+import { getPortalData } from '../data-store.js';
+
+export function handleGetLiveStreams(req: Request, res: Response): void {
+    const { username = '', password = '', category_id } = req.query as Record<string, string>;
+    let { liveStreams } = getPortalData(username, password);
+    if (category_id) {
+        liveStreams = liveStreams.filter(s => String(s.category_id) === category_id);
+    }
+    res.json(liveStreams);
+}
+
+export function handleGetVodStreams(req: Request, res: Response): void {
+    const { username = '', password = '', category_id } = req.query as Record<string, string>;
+    let { vodStreams } = getPortalData(username, password);
+    if (category_id) {
+        vodStreams = vodStreams.filter(s => String(s.category_id) === category_id);
+    }
+    res.json(vodStreams);
+}
+
+export function handleGetSeriesStreams(req: Request, res: Response): void {
+    const { username = '', password = '', category_id } = req.query as Record<string, string>;
+    let { seriesItems } = getPortalData(username, password);
+    if (category_id) {
+        seriesItems = seriesItems.filter(s => String(s.category_id) === category_id);
+    }
+    res.json(seriesItems);
+}
diff --git a/apps/xtream-mock-server/src/app/handlers/get-vod-info.handler.ts b/apps/xtream-mock-server/src/app/handlers/get-vod-info.handler.ts
new file mode 100644
index 0000000..72d54b9
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/handlers/get-vod-info.handler.ts
@@ -0,0 +1,16 @@
+import { Request, Response } from 'express';
+import { getVodDetails } from '../data-store.js';
+
+export function handleGetVodInfo(req: Request, res: Response): void {
+    const { username = '', password = '', vod_id } = req.query as Record<string, string>;
+    if (!vod_id) {
+        res.status(400).json({ error: 'vod_id required' });
+        return;
+    }
+    const details = getVodDetails(username, password, parseInt(vod_id, 10));
+    if (!details) {
+        res.status(404).json({ error: 'VOD not found' });
+        return;
+    }
+    res.json(details);
+}
diff --git a/apps/xtream-mock-server/src/app/routes/dispatch.ts b/apps/xtream-mock-server/src/app/routes/dispatch.ts
new file mode 100644
index 0000000..9924018
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/routes/dispatch.ts
@@ -0,0 +1,52 @@
+import { Request, Response } from 'express';
+import { handleGetAccountInfo } from '../handlers/get-account-info.handler.js';
+import { handleGetLiveCategories, handleGetVodCategories, handleGetSeriesCategories } from '../handlers/get-categories.handler.js';
+import { handleGetLiveStreams, handleGetVodStreams, handleGetSeriesStreams } from '../handlers/get-streams.handler.js';
+import { handleGetVodInfo } from '../handlers/get-vod-info.handler.js';
+import { handleGetSeriesInfo } from '../handlers/get-series-info.handler.js';
+import { handleGetFullEpg } from '../handlers/get-full-epg.handler.js';
+import { handleGetShortEpg } from '../handlers/get-short-epg.handler.js';
+
+export function dispatchAction(req: Request, res: Response): void {
+    const action = (req.query['action'] as string) ?? '';
+
+    switch (action) {
+        case '':
+        case 'get_account_info':
+            handleGetAccountInfo(req, res);
+            break;
+        case 'get_live_categories':
+            handleGetLiveCategories(req, res);
+            break;
+        case 'get_vod_categories':
+            handleGetVodCategories(req, res);
+            break;
+        case 'get_series_categories':
+            handleGetSeriesCategories(req, res);
+            break;
+        case 'get_live_streams':
+            handleGetLiveStreams(req, res);
+            break;
+        case 'get_vod_streams':
+            handleGetVodStreams(req, res);
+            break;
+        case 'get_series':
+            handleGetSeriesStreams(req, res);
+            break;
+        case 'get_vod_info':
+            handleGetVodInfo(req, res);
+            break;
+        case 'get_series_info':
+            handleGetSeriesInfo(req, res);
+            break;
+        case 'get_short_epg':
+            handleGetShortEpg(req, res);
+            break;
+        case 'get_simple_data_table':
+        case 'get_simple_date_table':
+            handleGetFullEpg(req, res);
+            break;
+        default:
+            res.status(400).json({ error: `Unknown action: ${action}` });
+    }
+}
diff --git a/apps/xtream-mock-server/src/app/scenarios.ts b/apps/xtream-mock-server/src/app/scenarios.ts
new file mode 100644
index 0000000..94c6831
--- /dev/null
+++ b/apps/xtream-mock-server/src/app/scenarios.ts
@@ -0,0 +1,168 @@
+export interface ScenarioConfig {
+    name: string;
+    description: string;
+    seed: number;
+    categoryCount: { live: number; vod: number; series: number };
+    itemsPerCategory: number;
+    seasonsPerSeries: number;
+    episodesPerSeason: number;
+    /** 'Active' | 'Disabled' — mirrors real Xtream user status values.
+     *  Expired accounts still have status 'Active' but exp_date is in the past. */
+    accountStatus: 'Active' | 'Disabled';
+    /** ISO date string for subscription expiry */
+    expiryDate: string;
+    /** Optional deterministic EPG fixture profile for scenario-specific tests. */
+    epgFixture?: 'timezone-focus';
+    /** Optional deterministic VOD detail profile for metadata fallback tests. */
+    vodDetailsFixture?: 'empty-metadata';
+    /** Optional fictional release-marketing dataset with local demo artwork. */
+    marketingFixture?: true;
+}
+
+/**
+ * Predefined scenarios keyed by "username:password".
+ * Auth is username+password for Xtream (not MAC address like Stalker).
+ * Unknown credential pairs use a hash of "username:password" as seed.
+ */
+export const SCENARIOS: Record<string, ScenarioConfig> = {
+    'user1:pass1': {
+        name: 'default',
+        description: 'Balanced portal — 8 categories, 40 items each',
+        seed: 1001,
+        categoryCount: { live: 8, vod: 8, series: 8 },
+        itemsPerCategory: 40,
+        seasonsPerSeries: 3,
+        episodesPerSeason: 8,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+    },
+    'large:large': {
+        name: 'large',
+        description: 'Large catalog — 20 categories, 200 items each',
+        seed: 9999,
+        categoryCount: { live: 20, vod: 20, series: 20 },
+        itemsPerCategory: 200,
+        seasonsPerSeries: 5,
+        episodesPerSeason: 12,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+    },
+    'stress:stress': {
+        name: 'stress',
+        description:
+            'Stress catalog — deterministic CI-sized import/delete workload',
+        seed: 7777,
+        categoryCount: { live: 16, vod: 16, series: 16 },
+        itemsPerCategory: 120,
+        seasonsPerSeries: 4,
+        episodesPerSeason: 10,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+    },
+    'series:series': {
+        name: 'series-heavy',
+        description: 'Series-heavy — 15 series categories, 6 seasons × 10 episodes',
+        seed: 2002,
+        categoryCount: { live: 3, vod: 4, series: 15 },
+        itemsPerCategory: 30,
+        seasonsPerSeries: 6,
+        episodesPerSeason: 10,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+    },
+    'minimal:minimal': {
+        name: 'minimal',
+        description: 'Minimal — 2 categories, 5 items (edge case testing)',
+        seed: 3003,
+        categoryCount: { live: 2, vod: 2, series: 2 },
+        itemsPerCategory: 5,
+        seasonsPerSeries: 1,
+        episodesPerSeason: 3,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+    },
+    'epg:epg': {
+        name: 'epg-fixture',
+        description:
+            'Deterministic Xtream EPG fixture — stable live channels and timezone-focused guide data',
+        seed: 6006,
+        categoryCount: { live: 2, vod: 1, series: 1 },
+        itemsPerCategory: 3,
+        seasonsPerSeries: 1,
+        episodesPerSeason: 3,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+        epgFixture: 'timezone-focus',
+    },
+    'emptyvod:emptyvod': {
+        name: 'empty-vod-metadata',
+        description:
+            'Xtream VOD fixture with list data intact but empty get_vod_info metadata responses',
+        seed: 7007,
+        categoryCount: { live: 2, vod: 2, series: 2 },
+        itemsPerCategory: 5,
+        seasonsPerSeries: 2,
+        episodesPerSeason: 4,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+        vodDetailsFixture: 'empty-metadata',
+    },
+    'marketing:marketing': {
+        name: 'marketing-demo',
+        description:
+            'Fictional catalog for release screenshots — local generated artwork, no real media covers',
+        seed: 8020,
+        categoryCount: { live: 4, vod: 4, series: 4 },
+        itemsPerCategory: 6,
+        seasonsPerSeries: 3,
+        episodesPerSeason: 6,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+        marketingFixture: true,
+    },
+    'expired:expired': {
+        name: 'expired',
+        description: 'Expired account — tests subscription expiry UI flow',
+        seed: 4004,
+        categoryCount: { live: 4, vod: 4, series: 4 },
+        itemsPerCategory: 10,
+        seasonsPerSeries: 2,
+        episodesPerSeason: 5,
+        accountStatus: 'Active', // Active but exp_date is in the past → service treats as expired
+        expiryDate: '2020-01-01',
+    },
+    'inactive:inactive': {
+        name: 'inactive',
+        description: 'Disabled account — tests account disabled UI flow',
+        seed: 5005,
+        categoryCount: { live: 4, vod: 4, series: 4 },
+        itemsPerCategory: 10,
+        seasonsPerSeries: 2,
+        episodesPerSeason: 5,
+        accountStatus: 'Disabled',
+        expiryDate: '2020-01-01',
+    },
+};
+
+/** Convert credential pair to a numeric seed for unknown credentials. */
+export function credentialsToSeed(username: string, password: string): number {
+    const str = `${username}:${password}`;
+    return str.split('').reduce((acc, ch) => (acc * 31 + ch.charCodeAt(0)) | 0, 0) >>> 0;
+}
+
+/** Return the scenario config for a given username+password pair. */
+export function getScenario(username: string, password: string): ScenarioConfig {
+    const key = `${username}:${password}`;
+    if (SCENARIOS[key]) return SCENARIOS[key];
+    return {
+        name: 'auto',
+        description: `Auto-generated for ${username}`,
+        seed: credentialsToSeed(username, password),
+        categoryCount: { live: 6, vod: 6, series: 6 },
+        itemsPerCategory: 30,
+        seasonsPerSeries: 3,
+        episodesPerSeason: 8,
+        accountStatus: 'Active',
+        expiryDate: '2099-12-31',
+    };
+}
diff --git a/apps/xtream-mock-server/src/main.ts b/apps/xtream-mock-server/src/main.ts
new file mode 100644
index 0000000..34d8b8e
--- /dev/null
+++ b/apps/xtream-mock-server/src/main.ts
@@ -0,0 +1,176 @@
+import http from 'http';
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+import express from 'express';
+import cors from 'cors';
+import { dispatchAction } from './app/routes/dispatch.js';
+import { resetAll } from './app/data-store.js';
+import { renderMarketingAssetSvg } from './app/generators/marketing.generator.js';
+
+const app = express();
+const PORT = parseInt(process.env['PORT'] ?? '3211', 10);
+const marketingRasterAssetRoot = join(
+    process.cwd(),
+    'apps/xtream-mock-server/public/marketing'
+);
+
+app.use(cors());
+app.use(express.json());
+
+// ─── Health check ──────────────────────────────────────────────────────────────
+app.get('/health', (_req, res) => {
+    res.json({ status: 'ok', server: 'xtream-mock-server', port: PORT });
+});
+
+// ─── Reset all cached data ─────────────────────────────────────────────────────
+app.post('/reset', (_req, res) => {
+    resetAll();
+    res.json({ status: 'reset' });
+});
+
+// ─── Local fictional artwork for release screenshots ──────────────────────────
+app.get('/assets/marketing/:kind/:slug', (req, res) => {
+    const kind = req.params['kind'] as
+        | 'backdrop'
+        | 'episode'
+        | 'logo'
+        | 'poster'
+        | 'season';
+    const slug = req.params['slug'] ?? '';
+    const size =
+        typeof req.query['size'] === 'string' ? req.query['size'] : undefined;
+
+    if (!['backdrop', 'episode', 'logo', 'poster', 'season'].includes(kind)) {
+        res.status(404).send('Unknown marketing asset kind');
+        return;
+    }
+
+    const rasterSlug = slug.replace(/\.(svg|png)$/i, '');
+    const rasterPath = join(marketingRasterAssetRoot, kind, `${rasterSlug}.png`);
+
+    if (existsSync(rasterPath)) {
+        res
+            .type('image/png')
+            .set('Cache-Control', 'public, max-age=3600')
+            .send(readFileSync(rasterPath));
+        return;
+    }
+
+    res
+        .type('image/svg+xml')
+        .set('Cache-Control', 'public, max-age=3600')
+        .send(renderMarketingAssetSvg(kind, slug, size));
+});
+
+// ─── Direct Xtream player_api.php endpoint ─────────────────────────────────────
+app.get('/player_api.php', dispatchAction);
+
+// ─── Stream stub endpoints (Xtream stream URLs reference these) ────────────────
+// Returns a valid HLS playlist redirect for any stream type.
+// In production these would be actual video streams.
+const HLS_STUB = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+
+app.get('/live/:username/:password/:streamId.m3u8', (_req, res) => {
+    res.redirect(HLS_STUB);
+});
+
+app.get('/live/:username/:password/:streamId.ts', (_req, res) => {
+    res.redirect(HLS_STUB);
+});
+
+app.get('/movie/:username/:password/:streamId.:ext', (_req, res) => {
+    res.redirect(HLS_STUB);
+});
+
+app.get('/series/:username/:password/:streamId.:ext', (_req, res) => {
+    res.redirect(HLS_STUB);
+});
+
+app.all(
+    '/timeshift/:username/:password/:duration/:start/:streamId.ts',
+    (_req, res) => {
+        res.redirect(HLS_STUB);
+    }
+);
+
+app.all('/streaming/timeshift.php', (_req, res) => {
+    res.redirect(HLS_STUB);
+});
+
+// ─── PWA CORS proxy endpoint ────────────────────────────────────────────────────
+// IPTVnator PWA routes Xtream calls through:
+//   GET /xtream?url=<serverUrl>&action=<action>&username=X&password=Y
+// and expects: { payload: <data>, action: <action> }
+app.get('/xtream', async (req, res) => {
+    const { url: _url, action, ...rest } = req.query as Record<string, string>;
+
+    const syntheticReq = {
+        query: { action, ...rest },
+        headers: req.headers,
+        params: {},
+    } as unknown as express.Request;
+
+    // Capture response via monkey-patched json method
+    let payload: unknown;
+    let statusCode = 200;
+
+    const syntheticRes = {
+        json(data: unknown) {
+            payload = data;
+            return this;
+        },
+        status(code: number) {
+            statusCode = code;
+            return this;
+        },
+    } as unknown as express.Response;
+
+    dispatchAction(syntheticReq, syntheticRes);
+
+    if (statusCode !== 200) {
+        res.status(statusCode).json({ error: payload });
+        return;
+    }
+
+    res.json({ payload, action });
+});
+
+// ─── Server lifecycle ──────────────────────────────────────────────────────────
+const server = http.createServer(app);
+
+server.on('error', (err: NodeJS.ErrnoException) => {
+    if (err.code === 'EADDRINUSE') {
+        console.error(`[xtream-mock] Port ${PORT} is already in use.`);
+    } else {
+        console.error('[xtream-mock] Server error:', err.message);
+    }
+    process.exit(1);
+});
+
+server.listen(PORT, () => {
+    console.log(`[xtream-mock] Listening on http://localhost:${PORT}`);
+    console.log(`[xtream-mock] Direct API:  http://localhost:${PORT}/player_api.php?username=user1&password=pass1&action=get_account_info`);
+    console.log(`[xtream-mock] PWA proxy:   http://localhost:${PORT}/xtream?url=http://localhost:${PORT}&username=user1&password=pass1&action=get_account_info`);
+    console.log(`[xtream-mock] Health:      http://localhost:${PORT}/health`);
+});
+
+const shutdown = () => {
+    console.log('\n[xtream-mock] Shutting down...');
+    server.close(() => process.exit(0));
+};
+
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);
+process.on('uncaughtException', (err) => {
+    console.error('[xtream-mock] Uncaught exception:', err);
+    process.exit(1);
+});
+process.on('unhandledRejection', (reason) => {
+    console.error('[xtream-mock] Unhandled rejection:', reason);
+    process.exit(1);
+});
+
+// When Nx (or any process manager) closes stdin, prevent auto-exit.
+// The HTTP server handle is what keeps the process alive.
+process.stdin.resume();
+process.stdin.on('end', () => { /* ignore stdin close */ });
diff --git a/apps/xtream-mock-server/tsconfig.json b/apps/xtream-mock-server/tsconfig.json
new file mode 100644
index 0000000..b94d5fe
--- /dev/null
+++ b/apps/xtream-mock-server/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "CommonJS",
+        "moduleResolution": "node",
+        "lib": ["ES2022"],
+        "outDir": "../../dist/apps/xtream-mock-server",
+        "rootDir": "src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "resolveJsonModule": true
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["node_modules", "dist"]
+}
diff --git a/docker/Dockerfile b/docker/Dockerfile
new file mode 100644
index 0000000..04fe1d6
--- /dev/null
+++ b/docker/Dockerfile
@@ -0,0 +1,32 @@
+# Stage 1 - build environment
+FROM node:22-alpine AS build
+
+RUN apk add --no-cache python3 make g++ git
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Swtich to node user
+#RUN chown node:node ./
+#USER node
+
+COPY .npmrc ./
+COPY package.json pnpm-lock.yaml ./
+
+# Install app dependencies
+RUN corepack enable && pnpm install --frozen-lockfile
+
+# Copy all required files
+COPY . .
+
+# Build the application
+RUN pnpm run build:web
+
+# Stage 2 - the production environment
+FROM nginx:stable-alpine
+
+# Copy artifacts and nignx.conf
+COPY --from=build /usr/src/app/dist/browser /usr/share/nginx/html
+COPY --from=build /usr/src/app/docker/nginx.conf /etc/nginx/conf.d/default.conf
+
+CMD sed -i "s#http://localhost:3333#$BACKEND_URL#g" /usr/share/nginx/html/main.js && nginx -g 'daemon off;'
diff --git a/docker/README.md b/docker/README.md
new file mode 100644
index 0000000..7c895db
--- /dev/null
+++ b/docker/README.md
@@ -0,0 +1,16 @@
+# Self-hosted version of IPTVnator
+
+You can deploy and run the PWA version of IPTVnator on your own machine with `docker-compose` using the following command:
+
+    $ cd docker
+    $ docker-compose up -d
+
+This command will launch the frontend and backend applications. By default, the application will be available at: http://localhost:4333/. The ports can be configured in the `docker-compose.yml` file.
+
+## Build frontend 
+
+    $ docker build -t 4gray/iptvnator -f docker/Dockerfile .
+
+## Build backend
+
+You can find the backend app with all instructions in a separate GitHub repository - https://github.com/4gray/iptvnator-backend
\ No newline at end of file
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
new file mode 100644
index 0000000..d36ab1c
--- /dev/null
+++ b/docker/docker-compose.yml
@@ -0,0 +1,18 @@
+---
+services:
+  backend:
+    image: 4gray/iptvnator-backend:latest
+    ports:
+      - "7333:3000"
+    environment:
+      - CLIENT_URL=http://localhost:4333 
+      # this one should match with the address and port in frontend CLIENT_URL env
+      
+  frontend: 
+    image: 4gray/iptvnator:latest
+    ports:
+      - "4333:80"
+    environment:
+      - BACKEND_URL=http://localhost:7333 
+      # this one should match with the address of the backend service
+      
diff --git a/docker/nginx.conf b/docker/nginx.conf
new file mode 100644
index 0000000..3eacd96
--- /dev/null
+++ b/docker/nginx.conf
@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+  
+  include /etc/nginx/extra-conf.d/*.conf;
+}
\ No newline at end of file
diff --git a/docs/architecture/category-management.md b/docs/architecture/category-management.md
new file mode 100644
index 0000000..1773789
--- /dev/null
+++ b/docs/architecture/category-management.md
@@ -0,0 +1,174 @@
+# Category Management Feature
+
+## Overview
+
+Xtream API playlists often contain many categories, some of which may be empty, in another language, or simply not relevant to the user. The category management feature allows users to hide unwanted categories from the sidebar while keeping them in the database for potential future use.
+
+## User Flow
+
+1. User navigates to an Xtream playlist (Live TV, Movies, or Series section)
+2. In the sidebar header, next to "All categories", there's a **tune icon button**
+3. Clicking it opens the **Category Management Dialog**
+4. User sees all categories with checkboxes (checked = visible, unchecked = hidden)
+5. User can:
+    - Individually toggle categories
+    - Use "Select All" / "Deselect All" buttons
+    - Search/filter categories by name
+6. On save, visibility preferences are persisted to the database
+7. Hidden categories no longer appear in the sidebar
+
+## Technical Implementation
+
+### Database Schema
+
+Added `hidden` column to the `categories` table:
+
+```sql
+ALTER TABLE categories ADD COLUMN hidden INTEGER DEFAULT 0
+```
+
+- `hidden = 0` (false): Category is visible (default)
+- `hidden = 1` (true): Category is hidden
+
+**Migration**: Uses a safe migration pattern in `connection.ts` that catches errors for already-applied migrations, ensuring existing users get the new column automatically.
+
+### Backend (Electron)
+
+**File**: `apps/electron-backend/src/app/events/database/category.events.ts`
+
+| IPC Handler                     | Purpose                                            |
+| ------------------------------- | -------------------------------------------------- |
+| `DB_GET_CATEGORIES`             | Returns visible categories only (`hidden = false`) |
+| `DB_GET_ALL_CATEGORIES`         | Returns all categories (for management dialog)     |
+| `DB_UPDATE_CATEGORY_VISIBILITY` | Batch updates `hidden` status for category IDs     |
+
+### Frontend Services
+
+**File**: `libs/services/src/lib/database-electron.service.ts`
+
+| Method                       | Purpose                        |
+| ---------------------------- | ------------------------------ |
+| `getXtreamCategories()`      | Sidebar display (filtered)     |
+| `getAllXtreamCategories()`   | Management dialog (unfiltered) |
+| `updateCategoryVisibility()` | Save visibility changes        |
+
+### Components
+
+**Category Management Dialog**
+
+- Path: `libs/portal/xtream/feature/src/lib/category-management-dialog/`
+- Features:
+    - Checkbox list of all categories
+    - Select All / Deselect All buttons
+    - Search/filter with clearable input
+    - Shows selected count vs total
+    - Saves changes to database on confirm
+
+**Integration Points**
+
+- `xtream-main-container.component.ts` - Movies & Series sections
+- `live-stream-layout.component.ts` - Live TV section
+
+Both components:
+
+1. Add a "tune" icon button in the sidebar header
+2. Open the dialog with playlist ID and content type
+3. Call `xtreamStore.reloadCategories()` after dialog closes with changes
+
+### Store
+
+**File**: `libs/portal/xtream/data-access/src/lib/stores/xtream.store.ts`
+
+Added `reloadCategories()` method to refresh categories from database after visibility changes, ensuring the sidebar updates immediately.
+
+## Behavior Notes
+
+- **New categories**: When a playlist is refreshed, new categories from the remote API are added with `hidden = false` (visible by default)
+- **Persistence**: Visibility settings survive playlist refresh (see below)
+- **Per-playlist, per-type**: Categories are managed per playlist and per content type (live/movies/series)
+- **No content deletion**: Hiding a category only affects sidebar visibility; the category and its content remain in the database
+
+### Visibility Preservation During Refresh
+
+When a user refreshes an Xtream playlist, hidden category preferences are preserved through the following mechanism:
+
+1. **Before deletion**: The `DB_DELETE_XTREAM_CONTENT` handler extracts and returns the `hidden` status of all categories (keyed by `xtreamId` and `type`)
+2. **Temporary storage**: The hidden categories are stored in `localStorage` under key `xtream-restore-{playlistId}` along with favorites and recently viewed data
+3. **During re-import**: When categories are saved via `DB_SAVE_CATEGORIES`, the data source checks `localStorage` for saved hidden category xtreamIds
+4. **Restoration**: Categories matching the saved xtreamIds are inserted with `hidden = true`, preserving the user's visibility preferences
+5. **ID normalization**: Xtream category IDs arrive from the API as strings, while SQLite stores `categories.xtream_id` as an integer. Restoration must normalize incoming `category_id` values before matching them against saved hidden-category xtreamIds.
+
+This ensures that users don't lose their category visibility customizations when refreshing playlists to get updated content.
+
+### Debugging Note
+
+Hidden-category restoration runs through the Electron DB worker. When debugging
+or validating a fix in a live Electron app:
+
+1. rebuild the worker-backed Electron runtime
+2. restart the running Electron process
+3. reconnect `agent-browser --cdp 9222`
+
+Otherwise the app may still be using an older
+`dist/apps/electron-backend/workers/database.worker.js` bundle even though the
+TypeScript source has already been updated.
+
+## Files Changed
+
+```
+libs/shared/database/src/lib/
+├── schema.ts                    # Added hidden column to categories table
+└── connection.ts                # Added migration for existing databases
+
+apps/electron-backend/src/app/
+├── events/database/category.events.ts  # IPC handlers (including hidden category restoration)
+├── events/database/xtream.events.ts    # Returns hidden categories during content deletion
+└── api/main.preload.ts                 # Exposed new IPC methods (with hidden category params)
+
+libs/services/src/lib/
+└── database-electron.service.ts  # Service methods (with hidden category support)
+
+libs/ui/components/src/lib/recent-playlists/
+└── recent-playlists.component.ts  # Stores hidden categories to localStorage on refresh
+
+libs/portal/xtream/feature/src/lib/
+├── category-management-dialog/        # Dialog component
+│   ├── category-management-dialog.component.ts
+│   ├── category-management-dialog.component.html
+│   └── category-management-dialog.component.scss
+├── xtream-main-container.component.ts # Added button & dialog
+├── xtream-main-container.component.html
+├── live-stream-layout/
+│   ├── live-stream-layout.component.ts # Added button & dialog
+│   └── live-stream-layout.component.html
+
+libs/portal/xtream/data-access/src/lib/
+├── data-sources/
+│   └── electron-xtream-data-source.ts # Reads/passes hidden categories on save
+└── stores/xtream.store.ts             # Added reloadCategories method
+
+apps/web/src/assets/i18n/
+└── en.json                      # Added translation keys
+
+global.d.ts                      # TypeScript types for IPC methods
+```
+
+## Translation Keys
+
+```json
+{
+    "XTREAM": {
+        "CATEGORY_MANAGEMENT": {
+            "TITLE": "Manage Categories",
+            "LOADING": "Loading categories...",
+            "SELECTED": "Selected",
+            "SELECT_ALL": "Select All",
+            "DESELECT_ALL": "Deselect All",
+            "SEARCH_PLACEHOLDER": "Search categories...",
+            "NO_RESULTS": "No matching categories found",
+            "NO_CATEGORIES": "No categories available",
+            "SAVE": "Save"
+        }
+    }
+}
+```
diff --git a/docs/architecture/date-handling.md b/docs/architecture/date-handling.md
new file mode 100644
index 0000000..467bf4f
--- /dev/null
+++ b/docs/architecture/date-handling.md
@@ -0,0 +1,25 @@
+# Date Handling
+
+## Rules
+
+- Use native `Date`, ISO strings, and epoch timestamps as the stored/runtime values.
+- Use `date-fns` for parsing, arithmetic, and normalization logic.
+- Use Angular `DatePipe` in templates when the value is already a `Date`, ISO string, or epoch timestamp.
+- Use cached `Intl.DateTimeFormat` helpers in TypeScript-only formatting paths where Angular pipes are not available.
+- Do not add new `moment` usage. The app no longer depends on it.
+
+## Locale Strategy
+
+- Date display should follow the user-selected app language from `TranslateService`.
+- When a template renders localized month or weekday names, pass the normalized app locale explicitly to `DatePipe`.
+- Angular locale data is registered in [apps/web/src/app/app-date-locales.ts](/Users/4gray/Code/iptvnator/apps/web/src/app/app-date-locales.ts).
+- App language aliases are normalized in [libs/ui/pipes/src/lib/date-format.util.ts](/Users/4gray/Code/iptvnator/libs/ui/pipes/src/lib/date-format.util.ts):
+  - `ary` -> `ar-MA`
+  - `by` -> `be`
+  - `zhtw` -> `zh-Hant`
+
+## Parsing Boundaries
+
+- Normalize provider-specific or legacy date strings to ISO as early as possible.
+- Keep optional epoch fields such as `startTimestamp` and `stopTimestamp` when the provider already supplies them.
+- Avoid new non-standard `Date.parse(...)` usage for provider formats; prefer explicit `date-fns` parsing when the input is not ISO.
diff --git a/docs/architecture/download-manager.md b/docs/architecture/download-manager.md
new file mode 100644
index 0000000..20dd78b
--- /dev/null
+++ b/docs/architecture/download-manager.md
@@ -0,0 +1,41 @@
+# Download Manager Architecture
+
+The download manager is a desktop-only feature that layers a curated queue, progress tracking, storage configuration, and playback controls on top of the existing Xtream (xtream-electron folder) + Stalker viewers. Backend work is handled in the Electron process while the Angular renderer surface exposes a dedicated `/downloads` route, contextual buttons, and theme-aware styling.
+
+## Backend responsibilities
+
+- **Queue control (apps/electron-backend/src/app/events/downloads.events.ts)**  
+  `DownloadTask` mirrors the shared `DownloadItem` table plus transient cancel/progress helpers. `enqueueDownload()` resolves a unique file path, persists a `queued` row in `downloads`, pushes the task onto `downloadQueue`, and triggers `processQueue()`. `processQueue()` keeps one active download, updates the row to `downloading`, and calls `startDownload()`.
+- **electron-dl integration**  
+  `startDownload()` now calls `electron-dl`’s `download()` helper. Headers (user agent, referer, origin) are attached, and the `onStarted`, `onProgress`, `onCompleted`, and `onCancel` callbacks translate the helper’s payload into Drizzle updates. The handler throttles progress broadcast, saves `filePath`/`fileName` from `electron-dl`, and marks failures/cancellations cleanly. Errors and cancellations delete partial files.
+- **IPC surface**  
+  The backend exposes `DOWNLOADS_*` handlers for list retrieval, start/cancel/retry/remove operations, folder selection/reveal, and the `DOWNLOADS_UPDATE_EVENT` emitter that the renderer listens to in order to refresh its signal store.
+
+## Renderer architecture
+
+- **Downloads service** (`apps/web/src/app/services/downloads.service.ts`)
+  Signals back the current download list while `hasDownloads` and `isAvailable` gates UI rendering. Before each download the service resolves a download folder (stored in `SettingsStore` or fetched via `downloadsGetDefaultFolder`) and calls `downloadsStart`. The backend extracts the file extension from the URL or falls back to `mp4`. `onDownloadsUpdate` updates the signal, while helper methods `retryDownload`, `removeDownload`, `cancelDownload`, and `playDownload` talk to the corresponding IPC commands so retries reuse existing rows and completed items can open the recorded path.
+- **Downloads view** (`libs/portal/downloads/feature`)  
+  A standalone page exposes the queue, desktop-only messaging, folder picker, and action buttons. `downloads.component.html` now wraps the list inside a scrollable panel (`downloads__list-wrapper`) so long queues stay reachable, and `downloads.component.scss` drives a bold two-tone aesthetic inspired by the frontend-design mandate—gradient cards, floating avatars, and theme-aware variables triggered via `body.dark-theme`.
+  Failed/canceled cards now show retry/delete controls, queued/downloading cards show a cancel icon, and completed cards render inline play/open buttons with `mat-icon` cues. The header also shows the resolved download folder and a `CHANGE FOLDER` action.
+- **Theme fixes**  
+  To keep typography legible in both modes, `app-search-result-item` now inherits color from `:host-context(body.dark-theme)` and `:host-context(body:not(.dark-theme))`, ensuring dense light-theme grids no longer show white text on white backgrounds.
+
+## Global API surface
+
+- **Preload + types**  
+  `apps/electron-backend/src/app/api/main.preload.ts` wires every download IPC command plus the `onDownloadsUpdate` listener to `window.electron`. `global.d.ts` now mirrors those methods, adds playback-position helpers, and exposes `onPlaybackPositionUpdate` / `removePlaybackPositionListener` so Angular can type-check the new APIs. This keeps the renderer typing in sync with the backend implementation.
+
+## Routing and navigation
+
+- `/downloads` is available under both portal flavors: the Xtream routes already load `DownloadsComponent`, and the Stalker routes now import the same component so the sidebar link can target `/stalker/:id/downloads` without returning to the startup screen.
+- The navigation component already points `routerLink="./downloads"` inside the shared nav pane, so both portals reuse the same download page.
+
+## Queuing, persistence, and UX notes
+
+- Every download row writes to the shared `downloads` table with statuses (`queued`, `downloading`, `completed`, `failed`, `canceled`) plus metadata such as `bytesDownloaded`, `totalBytes`, `errorMessage`, and Xtream identifiers. Stale downloads reset to `failed` on startup.
+- Queue cancellation removes the task or calls `downloadItem.cancel()` if the item is active; retries reuse the same database entry, preventing duplicate rows.
+- Folder selection first checks stored preferences, falls back to the OS default downloads path, and finally prompts the user to pick a folder. The downloads service persists the chosen path via `SettingsStore`.
+- The new UI leverages CSS variables for theme-specific backgrounds/borders, ensures `.downloads__list` can scroll inside its panel, and brings consistent badge/typography treatments to each card.
+
+Keeping the backend queue, IPC handlers, shared schema, and renderer signals synchronized minimizes drift between platform rules and the UI. Future work might cover download list filters, cancel-all actions, or integration with upcoming playback analytics.
diff --git a/docs/architecture/embedded-inline-playback.md b/docs/architecture/embedded-inline-playback.md
new file mode 100644
index 0000000..6495a5e
--- /dev/null
+++ b/docs/architecture/embedded-inline-playback.md
@@ -0,0 +1,138 @@
+# Embedded Inline Playback
+
+This document records the current contract for embedded playback in portal detail views.
+
+## Summary
+
+- Embedded web players are `videojs`, `html5`, and `artplayer`.
+- External players are `mpv` and `vlc`.
+- Flatpak launches external players on the host via `flatpak-spawn --host`.
+- Live playback stays inline in dedicated live layouts.
+- VOD and series detail playback now also stays inline on canonical detail surfaces.
+- Material dialog playback remains only as a fallback for older non-detail callers.
+
+## Scope
+
+The first pass is intentionally limited:
+
+- Xtream VOD detail route
+- Xtream series detail route
+- Stalker VOD detail view
+- Stalker series detail view
+
+Not migrated in this pass:
+
+- Generic non-detail playback entry points that still call `PlayerService.openPlayer(...)`
+- Any collection/search surface that does not host a canonical detail surface of its own
+
+## Components
+
+Shared inline player shell:
+
+- `/Users/4gray/Code/iptvnator/libs/ui/components/src/lib/portal-inline-player/portal-inline-player.component.ts`
+
+Xtream detail hosts:
+
+- `/Users/4gray/Code/iptvnator/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.ts`
+
+Stalker detail hosts:
+
+- `/Users/4gray/Code/iptvnator/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/ui/components/src/lib/stalker-series-view/stalker-series-view.component.ts`
+
+Fallback dialog path:
+
+- `/Users/4gray/Code/iptvnator/apps/web/src/app/services/player.service.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.ts`
+
+## Playback Decision Rule
+
+When a detail view starts playback:
+
+1. Resolve or construct a typed playback payload.
+2. Check the active player setting.
+3. If the player is embedded, render the inline player inside the current detail view.
+4. If the player is external, hand the same payload to `PlayerService` for MPV/VLC playback.
+
+The detail host owns inline state. `PlayerService` is no longer the primary owner of UI playback state for canonical VOD/series detail screens.
+
+## Flatpak External Players
+
+Flatpak cannot execute host-installed `mpv` or `vlc` binaries directly from the sandbox.
+
+Current contract:
+
+- Flatpak launches external players through `flatpak-spawn --host`.
+- AppImage, deb/rpm, snap, macOS, and Windows keep the existing direct process spawn flow.
+- VLC keeps the current external-session flow in Flatpak, including the RC port used for progress polling.
+- MPV is intentionally reduced in Flatpak: the app does not reuse an existing MPV instance there and does not open the Unix socket bridge used for non-Flatpak progress polling.
+
+This keeps non-Flatpak behavior unchanged while allowing Flatpak builds to open host-installed external players.
+
+## Typed Playback Payload
+
+Shared playback payloads live in:
+
+- `/Users/4gray/Code/iptvnator/libs/shared/interfaces/src/lib/portal-playback.interface.ts`
+
+Types introduced:
+
+- `PlayerContentInfo`
+- `ResolvedPortalPlayback`
+
+These provide a single shape for:
+
+- `streamUrl`
+- `title`
+- optional thumbnail and resume start time
+- playback-position metadata
+- optional external-player headers and request metadata
+
+## Xtream Behavior
+
+Xtream detail views already own canonical routes, so they construct playback locally and decide inline vs external locally.
+
+Behavior to preserve:
+
+- resume/playback position continues saving from `timeUpdate`
+- back navigation clears inline playback with the route
+- favorites, recent, and search still route into canonical Xtream detail screens before playback
+
+## Stalker Behavior
+
+Stalker previously resolved playback and opened UI in the same method.
+
+Current contract:
+
+- `resolveVodPlayback(...)` returns a `ResolvedPortalPlayback`
+- `createLinkToPlayVod(...)` remains as a compatibility wrapper for untouched callers
+- canonical Stalker detail views use the resolver directly and decide inline vs external locally
+
+This keeps:
+
+- inline/store-state detail navigation intact
+- series and VOD-as-series support intact
+- non-detail callers working until they are migrated
+
+## Playback Position Saving
+
+The old dialog path saved playback positions from inside `PlayerDialogComponent`.
+
+The new contract is:
+
+- inline detail hosts listen to `timeUpdate`
+- each host throttles saves
+- each host persists via existing playback-position infrastructure
+
+This avoids coupling inline UI state to a global dialog.
+
+## Future Migration Rule
+
+If a non-detail surface is converted away from dialog playback:
+
+- give that surface a canonical inline host
+- switch it to `ResolvedPortalPlayback`
+- do not move portal-specific navigation into `PlayerService`
+
+The preferred direction is view-owned inline playback, not a larger dialog manager.
diff --git a/docs/architecture/external-wiki-sync.md b/docs/architecture/external-wiki-sync.md
new file mode 100644
index 0000000..ffbf004
--- /dev/null
+++ b/docs/architecture/external-wiki-sync.md
@@ -0,0 +1,97 @@
+# External Wiki Sync
+
+Related:
+
+- [Workspace Shell](./workspace-shell.md)
+- [SQLite DB Worker](./sqlite-db-worker.md)
+
+## Summary
+
+- Repo docs are canonical, even when they were originally drafted by an LLM.
+- The external Obsidian wiki imports canonical repo docs read-only into `_repo-context/`.
+- Higher-level synthesis pages stay outside `_repo-context/` in the wiki's own folders.
+- Sync is one-way by default: repo docs -> wiki context.
+
+## Ownership Model
+
+Canonical repo docs include:
+
+1. `docs/architecture/**/*.md`
+2. top-level workflow docs such as `README.md`, `GETTING-STARTED.md`, `AGENTS.md`, and `CLAUDE.md`
+3. selected module `README.md` files when they describe current code behavior or workflows
+
+The external wiki can add cross-links, feature pages, decision notes, and synthesis pages, but it must not become a second source of truth for the same implementation details.
+
+## Export Scope
+
+The repo-owned exporter writes only to `_repo-context/` inside the external vault.
+
+Current default export scope:
+
+1. `docs/architecture/**/*.md`
+2. `README.md`
+3. `GETTING-STARTED.md`
+4. `AGENTS.md`
+5. `CLAUDE.md`
+6. selected module `README.md` files
+
+The exporter also generates:
+
+1. `_repo-context/index.md`
+2. `_repo-context/repo-map.md`
+3. `_repo-context/recent-changes.md`
+4. `_repo-context/manifest.json`
+5. `_repo-context/state.json`
+
+## Running The Exporter
+
+Set the external vault path in the shell environment:
+
+```bash
+export IPTVNATOR_WIKI_VAULT=/absolute/path/to/your/obsidian-vault
+```
+
+Then run:
+
+```bash
+pnpm wiki:export --mode full
+pnpm wiki:export --mode changed
+```
+
+You can also override the vault path per command:
+
+```bash
+pnpm wiki:export --mode changed --vault /absolute/path/to/your/obsidian-vault
+```
+
+If the vault path is missing, the exporter skips cleanly and reports why it did not run.
+
+## Agent Workflow After Changes
+
+After a meaningful implementation change, agents must assess whether canonical repo docs need updates.
+
+Documentation-worthy changes include:
+
+1. new or changed user-visible behavior
+2. architecture or data-flow changes
+3. non-obvious maintenance workflows
+4. new setup, debugging, or operational steps
+5. new subsystem contracts or boundaries
+
+Prefer updating an existing authoritative doc before creating a new one:
+
+1. `README.md` for top-level developer or user workflows
+2. `docs/architecture/` for architecture, ownership, and behavior contracts
+3. the nearest module `README.md` for local usage or behavior
+
+If docs changed and `IPTVNATOR_WIKI_VAULT` is configured, agents should run `pnpm wiki:export --mode changed` before considering the task complete.
+
+## Promotion Workflow
+
+If a wiki page becomes stable enough to be canonical:
+
+1. promote that content back into a repo doc
+2. treat the repo doc as the source of truth
+3. export again so `_repo-context/` reflects the promoted canonical doc
+
+The wiki page can then either link to the repo-backed generated page or remain as a smaller synthesis page that references the canonical doc.
diff --git a/docs/architecture/iptvnator-ui-guidelines.md b/docs/architecture/iptvnator-ui-guidelines.md
new file mode 100644
index 0000000..1ead04c
--- /dev/null
+++ b/docs/architecture/iptvnator-ui-guidelines.md
@@ -0,0 +1,252 @@
+# IPTVnator UI Guidelines
+
+This document captures the current UI language used across IPTVnator, with emphasis on channel lists, EPG views, settings surfaces, and shared selection patterns.
+
+Use it when changing existing views or introducing new list-based UI in the workspace, Xtream, or Stalker flows.
+
+## Core Principles
+
+1. Prefer shared components over duplicated markup.
+   The canonical channel row is `app-channel-list-item`.
+
+2. Drive emphasis through selection state, not through constant decoration.
+   Neutral rows should stay quiet. Only active or current items should pick up strong color.
+
+3. Use the same selection language everywhere.
+   Selected nav items, channels, and current EPG cards should feel like the same system.
+
+4. Keep dark and light themes intentionally different.
+   Dark theme can carry more density and tinted surfaces.
+   Light theme should be flatter and cleaner, with white or near-white cards.
+
+5. Scroll ownership must be explicit.
+   Headers stay visible. Lists scroll. Do not let nested panes compete for scroll.
+
+## Canonical References
+
+- Channel row:
+  `libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html`
+- Channel row styles:
+  `libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss`
+- Shared EPG pane:
+  `libs/ui/shared-portals/src/lib/epg-view/epg-view.component.html`
+- Shared EPG pane styles:
+  `libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss`
+- Shared list selection style:
+  `apps/web/src/nav-list.scss`
+- Theme tokens:
+  `apps/web/src/m3-theme.scss`
+- Settings surfaces:
+  `apps/web/src/app/settings/settings.component.scss`
+
+## Shared Tokens
+
+These tokens are the base for interactive emphasis:
+
+- `--app-selection-color`
+- `--app-selection-surface`
+- `--app-selection-surface-strong`
+- `--app-selection-border`
+- `--app-selection-glow`
+
+Use Material surface tokens for neutral surfaces:
+
+- `--mat-sys-surface`
+- `--mat-sys-surface-container-low`
+- `--mat-sys-surface-container`
+- `--mat-sys-surface-container-high`
+- `--mat-sys-outline-variant`
+- `--mat-sys-on-surface`
+- `--mat-sys-on-surface-variant`
+
+Do not hardcode unrelated accent colors for selected state when these tokens already exist.
+
+## Selection Pattern
+
+Apply the same visual recipe to selected list items, active channels, and current EPG items:
+
+- Background:
+  `linear-gradient(135deg, var(--app-selection-surface-strong), var(--app-selection-surface))`
+- Border:
+  `var(--app-selection-border)`
+- Glow:
+  outer shadow using `var(--app-selection-glow)`
+- Lift:
+  `transform: translateY(-1px)` for selected list items only
+- Text:
+  selected text should inherit `var(--app-selection-color)`
+
+Use this pattern for:
+
+- `.nav-item.selected` / `.nav-item.active`
+- `.channel-list-item.active`
+- `.epg-item.current-program`
+
+Do not add extra badges, left rails, or second selection systems unless there is a strong reason.
+
+## Channel List Item
+
+The shared row should be reused instead of rebuilding channel markup per view.
+
+### Structure
+
+- Min height:
+  `68px`
+- Horizontal gap:
+  `12px`
+- Padding:
+  `8px 10px 8px 12px`
+- Radius:
+  `12px`
+- Logo shell:
+  `44x44`, rounded, subtle inset treatment
+- Compact variant:
+  `52px` min height with slightly tighter padding
+
+### Content Layout
+
+- Title is one line, medium-bold, slightly condensed
+- Program title is a secondary line with lower emphasis
+- Timeline uses three columns:
+  start time, progress bar, end time
+- Action buttons sit on the trailing edge and inherit row color
+
+### Logo Rules
+
+- Show fallback icon only when no image is available or image loading fails
+- Do not render placeholder and real logo at the same time
+- Keep logos contained with `object-fit: contain`
+
+## EPG Views
+
+### Shared EPG Pane
+
+- Header title stays sticky
+- Program list is the only scrolling region
+- Add bottom padding so the last program is not clipped
+- Current program card uses the same selection treatment as selected channels
+
+### EPG Card
+
+- Radius:
+  `14px`
+- Neutral cards use low-contrast surface treatment
+- Current card uses selection surface and selection border
+- Description should clamp rather than overflow
+
+### Sticky Header
+
+- Keep the title readable above content
+- Use a solid or near-solid backing surface
+- Do not let it overlap or cover player controls
+
+## Progress Bars
+
+Channel preview progress and EPG current-program progress should stay visually aligned.
+
+### Track
+
+- Height:
+  `6px`
+- Shape:
+  full pill radius
+- Neutral background:
+  medium gray or neutral surface tint
+- Include a slight inset edge so the remaining duration is visible
+
+### Fill
+
+- Use `--app-selection-color`
+- Add a subtle sheen, not a heavy gradient
+- Add a restrained glow, not a neon effect
+
+The progress bar should clearly communicate:
+
+- completed duration
+- remaining duration
+
+Avoid making the track too faint, especially in dark theme.
+
+## Navigation Lists
+
+Use the shared `nav-list.scss` treatment for sidebar and context-panel list items.
+
+### Rules
+
+- Keep labels one line with ellipsis
+- Keep icon area clear from the selection border and any decorative rail
+- Hover is neutral surface, not the selected color
+- Selected state uses the shared selection recipe
+
+If the label is too long for the rail, shorten the label key instead of shrinking the component until it becomes inconsistent.
+
+## Settings Surfaces
+
+Settings use the same system but are flatter than content-heavy views.
+
+### Light Theme
+
+- Prefer white or near-white cards
+- Use neutral borders from `--mat-sys-outline-variant`
+- Keep active sections mostly defined by outline and subtle tint
+- Avoid dark translucent backgrounds
+
+### Dark Theme
+
+- Denser tinted surfaces are acceptable
+- Neutral rows can use low-opacity dark overlays
+- Keep strong blue tint reserved for active sections and selected items
+
+## Theme Guidance
+
+### Light Theme
+
+- Flat beats glossy
+- White and surface-container layers should separate content
+- Selection should read as a blue outline plus soft tint, not a solid slab
+
+### Dark Theme
+
+- Slight translucency is acceptable
+- Background layers can be deeper and more cinematic
+- Keep contrast readable without going pure white everywhere
+
+## Reuse Strategy
+
+Before creating new markup or CSS:
+
+1. Check whether `app-channel-list-item` can be reused.
+2. Check whether `app-epg-view` already provides the correct structure.
+3. Check whether `nav-list.scss` already solves the list-selection problem.
+4. Extend tokens first, duplicate styles last.
+
+## Implementation Workflow
+
+When updating IPTVnator UI:
+
+1. Inspect the current shared component first.
+2. Reuse the shared structure where possible.
+3. Keep selection, progress, and spacing in sync across Xtream, Stalker, and shared portal views.
+4. Verify in both light and dark themes.
+5. Verify in the running Electron app when the change is visual or layout-sensitive.
+
+## Anti-Patterns
+
+Avoid these:
+
+- introducing a new selected-state color unrelated to the theme tokens
+- duplicating channel row markup in portal-specific views
+- showing placeholder logos behind real logos
+- making entire panes scroll when only the list should scroll
+- using dark translucent fills unchanged in light theme
+- solving cramped sidebars with smaller fonts instead of shorter labels
+
+## Definition Of Done For UI Changes
+
+A visual change is not done until:
+
+1. Shared component reuse was considered first.
+2. Light theme and dark theme both look intentional.
+3. Selection and progress states match existing IPTVnator patterns.
+4. Scroll behavior is correct.
+5. The result was checked in the running app for layout-sensitive work.
diff --git a/docs/architecture/m3u-playlist-module.md b/docs/architecture/m3u-playlist-module.md
new file mode 100644
index 0000000..aa85a41
--- /dev/null
+++ b/docs/architecture/m3u-playlist-module.md
@@ -0,0 +1,424 @@
+# M3U Playlist Module Architecture
+
+This document describes the M3U playlist module architecture, which handles traditional M3U/M3U8 playlists (as opposed to Xtream Codes or Stalker Portal).
+
+## Overview
+
+The M3U playlist module provides:
+- Channel list display with virtual scrolling (90,000+ channels support)
+- EPG (Electronic Program Guide) integration
+- Favorites management with drag-and-drop reordering
+- Channel grouping and search
+- Per-playlist group visibility management in the groups view
+- Video playback with multiple player backends
+
+## Module Structure
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                         VIDEO PLAYER PAGE                            │
+│          libs/playlist/m3u/feature-player/src/lib/video-player/     │
+├─────────────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐  ┌──────────────────────┐  ┌────────────────────┐ │
+│  │   Sidebar   │  │    Video Player      │  │   EPG List         │ │
+│  │             │  │  (ArtPlayer/Video.js)│  │   (Right drawer)   │ │
+│  │ ┌─────────┐ │  │                      │  │                    │ │
+│  │ │Channel  │ │  │                      │  │                    │ │
+│  │ │List     │ │  │                      │  │                    │ │
+│  │ │Container│ │  │                      │  │                    │ │
+│  │ └─────────┘ │  │                      │  │                    │ │
+│  └─────────────┘  └──────────────────────┘  └────────────────────┘ │
+└─────────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│                        NgRx STORE (m3u-state)                        │
+│                         libs/m3u-state/                              │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐  │
+│  │ Playlist │ │ Channel  │ │   EPG    │ │Favorites │ │  Filter  │  │
+│  │ Reducer  │ │ Reducer  │ │ Reducer  │ │ Reducer  │ │ Reducer  │  │
+│  └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘  │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+## State Management (libs/m3u-state/)
+
+### State Structure
+
+```typescript
+interface PlaylistState {
+    // Active channel being played
+    active: Channel | undefined;
+
+    // Whether the current route is still resolving channel data
+    channelsLoading: boolean;
+
+    // All channels from current playlist
+    channels: Channel[];
+
+    // EPG state
+    epg: {
+        epgAvailable: boolean;
+        activeEpgProgram: EpgProgram | undefined;
+        currentEpgProgram: EpgProgram | undefined;
+    };
+
+    // Playlist metadata (entity adapter)
+    playlistsMeta: {
+        ids: string[];
+        entities: Record<string, PlaylistMeta>;
+        selectedId: string | undefined;
+        allPlaylistsLoaded: boolean;
+        selectedFilters: PlaylistSourceFilter[];
+    };
+}
+```
+
+`PlaylistMeta` is the persisted playlist-facing subset of the playlist entity.
+For M3U playlists it now also carries `hiddenGroupTitles?: string[]`, which is
+used by the groups view to remember which group titles the user has hidden.
+
+### Actions
+
+| Action Group | Actions | Purpose |
+|--------------|---------|---------|
+| **PlaylistActions** | `loadPlaylists`, `addPlaylist`, `removePlaylist`, `parsePlaylist`, `setActivePlaylist` | Playlist CRUD |
+| **ChannelActions** | `setChannels`, `setActiveChannel`, `setAdjacentChannelAsActive` | Channel selection & navigation |
+| **EpgActions** | `setActiveEpgProgram`, `setCurrentEpgProgram`, `setEpgAvailableFlag` | EPG state |
+| **FavoritesActions** | `updateFavorites`, `setFavorites` | Favorites management |
+| **FilterActions** | `setSelectedFilters` | Playlist type filtering |
+
+### Key Selectors
+
+```typescript
+// Channel selectors
+selectActive          // Current playing channel
+selectChannelsLoading // Channel list loading flag
+selectChannels        // All channels array
+selectFavorites       // Favorite channel URLs
+
+// Playlist selectors
+selectAllPlaylistsMeta    // All playlists
+selectActivePlaylistId    // Selected playlist ID
+selectCurrentPlaylist     // Active playlist object
+selectPlaylistTitle       // Title with "Global favorites" fallback
+
+// EPG selectors
+selectIsEpgAvailable      // EPG data available flag
+selectCurrentEpgProgram   // Current playing program
+```
+
+## Channel List Container
+
+**Location**: `libs/ui/components/src/lib/channel-list-container/`
+
+### Component Architecture
+
+```
+channel-list-container/
+├── channel-list-container.component.ts   # Parent - shared state coordinator
+├── channel-list-container.component.html
+├── channel-list-container.component.scss
+│
+├── all-channels-tab/                      # Virtual scroll + search
+│   ├── all-channels-tab.component.ts
+│   ├── all-channels-tab.component.html
+│   └── all-channels-tab.component.scss
+│
+├── groups-tab/                            # Expansion panels + infinite scroll
+│   ├── groups-tab.component.ts
+│   ├── groups-tab.component.html
+│   └── groups-tab.component.scss
+│
+├── favorites-tab/                         # Drag-drop reordering
+│   ├── favorites-tab.component.ts
+│   ├── favorites-tab.component.html
+│   └── favorites-tab.component.scss
+│
+└── channel-list-item/                     # Individual channel display
+    ├── channel-list-item.component.ts
+    ├── channel-list-item.component.html
+    └── channel-list-item.component.scss
+```
+
+### Data Flow
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│              ChannelListContainerComponent                    │
+│                      (Parent)                                 │
+│  ┌────────────────────────────────────────────────────────┐  │
+│  │ Shared State (Signals):                                │  │
+│  │  - channelEpgMap: Map<string, EpgProgram>              │  │
+│  │  - progressTick: number (30s interval)                 │  │
+│  │  - shouldShowEpg: boolean                              │  │
+│  │  - favoriteIds: Set<string>                            │  │
+│  └────────────────────────────────────────────────────────┘  │
+│                           │                                   │
+│     ┌─────────────────────┼─────────────────────┐            │
+│     ▼                     ▼                     ▼            │
+│ ┌─────────┐         ┌──────────┐         ┌───────────┐      │
+│ │   All   │         │  Groups  │         │ Favorites │      │
+│ │Channels │         │   Tab    │         │    Tab    │      │
+│ │  Tab    │         │          │         │           │      │
+│ └────┬────┘         └────┬─────┘         └─────┬─────┘      │
+│      │                   │                     │             │
+│      └───────────────────┴─────────────────────┘             │
+│                          │                                   │
+│                          ▼                                   │
+│              (channelSelected) output                        │
+│                          │                                   │
+└──────────────────────────┼───────────────────────────────────┘
+                           ▼
+                    Store Dispatch
+              ChannelActions.setActiveChannel
+```
+
+### Loading States
+
+- `M3uWorkspaceRouteSession` owns route-driven channel loading for the player/sidebar routes: `all` and `groups`.
+- The route session sets `channelsLoading` before `getPlaylist()` resolves and clears it when `ChannelActions.setChannels` lands.
+- `ChannelListContainerComponent` now renders a dedicated skeleton state while `channelsLoading` is true.
+- `ChannelListContainerComponent` no longer clears `channels` on destroy; route/session code is the single owner of shared list lifecycle during navigation.
+- The dedicated `/workspace/playlists/:id/favorites` and `/workspace/playlists/:id/recent` collection routes do not drive the shared sidebar channel list; they default to the `playlist` scope so rail links always open the current playlist view, not the last persisted global scope.
+- Empty playlists and empty search results are no longer conflated:
+  - loading: skeletons
+  - empty source: no channels in the playlist after loading completes
+  - empty search: no matches within an already loaded playlist
+
+### Group Visibility Management
+
+- `GroupsViewComponent` owns the M3U-only "Manage groups" action and dialog in
+  `libs/ui/components/src/lib/channel-list-container/groups-view/`.
+- The groups rail header also owns an inline search toggle that filters the
+  currently visible groups without mutating the workspace-level route search
+  term used by the broader channel views.
+- The dialog operates on the full grouped dataset, while the left rail and
+  channel pane render only groups whose titles are not listed in
+  `hiddenGroupTitles`.
+- `ChannelListContainerComponent` reads `hiddenGroupTitles` from the active M3U
+  playlist metadata and passes it into the groups view. Saving dialog changes
+  dispatches `PlaylistActions.updatePlaylistMeta`.
+- `PlaylistsService.updatePlaylistMeta()` persists `hiddenGroupTitles` into the
+  stored playlist payload, and M3U refresh/update flows preserve the existing
+  value when refreshed playlist data omits the field.
+- The groups route keeps the manage action reachable even when every group is
+  hidden by separating "playlist has no groups" from "no visible/search-matching
+  groups" empty states.
+
+### EnrichedChannel Pattern
+
+For performance optimization, channels are pre-enriched with EPG data:
+
+```typescript
+interface EnrichedChannel extends Channel {
+    epgProgram: EpgProgram | null | undefined;
+    logo: string;                // Playlist tvg-logo first, XMLTV icon fallback second
+    progressPercentage: number;  // Pre-computed by parent
+}
+```
+
+The renderer now keeps two lookup maps for M3U collection views:
+
+- `channelEpgMap` for current-program preview data
+- `channelIconMap` for XMLTV channel icon fallback data
+
+Logo resolution is runtime-only and follows this rule:
+
+1. playlist `tvg-logo`
+2. matched XMLTV `<channel><icon src="...">`
+3. generic `live_tv` fallback in the list item component
+
+EPG lookup keys use the same precedence in both program and icon paths:
+
+1. `tvg-id`
+2. `tvg-name`
+3. channel name
+
+### Performance Optimizations
+
+| Optimization | Implementation |
+|--------------|----------------|
+| **Virtual Scroll** | CDK virtual scroll for 90,000+ channels |
+| **Computed Signals** | `enrichedChannels` computed signal replaces template pipe |
+| **Debounced Search** | 300ms debounce on search input |
+| **Global Progress Tick** | Single 30s interval instead of per-item intervals |
+| **OnPush Change Detection** | All components use OnPush |
+| **Infinite Scroll in Groups** | IntersectionObserver loads 50 channels at a time |
+| **Memoized Group Enrichment** | `enrichedGroupChannelsMap` computed signal |
+
+### Tab Components
+
+#### AllChannelsTabComponent
+- **Inputs**: `channels`, `channelEpgMap`, `channelIconMap`, `progressTick`, `shouldShowEpg`, `itemSize`, `activeChannelUrl`, `favoriteIds`
+- **Outputs**: `channelSelected`, `favoriteToggled`
+- **Features**: Search with 300ms debounce, virtual scrolling, no-results placeholder
+
+#### GroupsTabComponent
+- **Inputs**: Same as AllChannelsTab + `groupedChannels`
+- **Outputs**: `channelSelected`, `favoriteToggled`
+- **Features**: Expansion panels, infinite scroll with IntersectionObserver, lazy loading
+
+#### FavoritesTabComponent
+- **Inputs**: `favorites`, `channelEpgMap`, `channelIconMap`, `progressTick`, `shouldShowEpg`, `activeChannelUrl`
+- **Outputs**: `channelSelected`, `favoriteToggled`, `favoritesReordered`
+- **Features**: Drag-and-drop reordering with CDK DragDrop
+
+## EPG Integration
+
+### EpgService (libs/services/)
+
+```typescript
+class EpgService {
+    // Fetch EPG for multiple URLs
+    fetchEpg(urls: string[]): void;
+
+    // Get programs for a channel
+    getChannelPrograms(channelId: string): void;
+
+    // Batch fetch current programs
+    getCurrentProgramsForChannels(channelIds: string[]): Observable<Map<string, EpgProgram>>;
+
+    // Batch fetch XMLTV channel metadata for logo fallback
+    getChannelMetadataForChannels(channelIds: string[]): Observable<Map<string, EpgChannelMetadata | null>>;
+
+    // Observables
+    epgAvailable$: Observable<boolean>;
+    currentEpgPrograms$: Observable<EpgProgram[]>;
+}
+```
+
+### EPG Components
+
+| Component | Purpose |
+|-----------|---------|
+| `EpgListComponent` | Timeline view for single channel |
+| `EpgListItemComponent` | Individual program in timeline |
+| `EpgItemDescriptionComponent` | Program details dialog |
+| `MultiEpgContainerComponent` | Grid view of all channels' schedules |
+
+## Video Player
+
+**Location**: `libs/playlist/m3u/feature-player/src/lib/video-player/`
+
+### Supported Players
+- **ArtPlayer** (default) - Modern player with plugins
+- **Video.js** - Fallback with HLS support
+- **HTML5** - Basic video element
+- **Audio** - For radio streams
+
+### Player Features
+- Channel navigation (prev/next)
+- Favorites toggle
+- EPG sidebar
+- Multi-EPG modal view
+- Channel info overlay
+- External player support (MPV, VLC) in Electron
+- M3U archive/catch-up playback for supported replay schemes
+
+### Archive / Catch-Up Playback
+
+- The shared EPG UI only shows the archive replay badge when the host confirms
+  that the selected M3U channel has a playable replay scheme. Archive days
+  alone are not enough.
+- M3U catch-up support is resolved in `m3u-utils` from channel metadata and
+  the archived program start time.
+- Supported replay precedence:
+  1. `catchup.source` if it is an HTTP(S) URL. IPTVNator rewrites or appends
+     standard `utc` and `lutc` query params on that URL.
+  2. Legacy same-stream shift playback when `catchup.type === 'shift'`. In
+     that case IPTVNator rewrites or appends `utc` and `lutc` on `channel.url`.
+  3. Legacy same-stream shift fallback when no explicit catch-up mode is
+     declared, archive-day metadata exists (`tvg.rec`, `timeshift`, or
+     `catchup.days`), and `channel.url` itself is an HTTP(S) stream URL. This
+     covers providers that only advertise archive retention such as
+     `tvg-rec="7"` but still expect standard `utc` and `lutc` query params on
+     the live URL.
+- `tvg.rec`, `timeshift`, and `catchup.days` still define the archive window
+  shown in the EPG, but replay remains unavailable when the provider declares a
+  different explicit catch-up scheme that IPTVNator does not understand or when
+  the stream URL itself is not an HTTP(S) replay target.
+- Active replay is stored separately from the selected channel in
+  `playlistState.activePlaybackUrl`. Inline and external players use
+  `activePlaybackUrl ?? activeChannel.url`, and returning to live playback
+  clears the override.
+
+## Interfaces
+
+### Channel Interface
+```typescript
+interface Channel {
+    id: string;
+    url: string;
+    name: string;
+    group: { title: string };
+    tvg: {
+        id: string;      // For EPG matching
+        name: string;
+        url: string;
+        logo: string;
+        rec: string;
+    };
+    epgParams?: string;
+    timeshift?: string;
+    catchup?: { type?: string; source?: string; days?: string };
+    radio: string;
+    http: {
+        referrer: string;
+        'user-agent': string;
+        origin: string;
+    };
+}
+```
+
+### Playlist State Additions
+
+```typescript
+interface PlaylistState {
+    active: Channel | undefined;
+    activePlaybackUrl: string | null;
+    currentEpgProgram: EpgProgram | undefined;
+    epgAvailable: boolean;
+    channels: Channel[];
+}
+```
+
+### EpgProgram Interface
+```typescript
+interface EpgProgram {
+    start: string;      // ISO string
+    stop: string;       // ISO string
+    channel: string;    // TVG ID
+    title: string;
+    desc: string | null;
+    category: string | null;
+    episodeNum?: string | null;
+    iconUrl?: string | null;
+    rating?: string | null;
+}
+```
+
+## Routes
+
+```
+/playlists/:id          # Video player with playlist
+/iptv                   # Default IPTV route
+```
+
+## Adding New Features
+
+### To add a new tab to channel list:
+1. Create component in `channel-list-container/new-tab/`
+2. Accept inputs: `channels`, `channelEpgMap`, `progressTick`, `shouldShowEpg`, `activeChannelUrl`
+3. Emit `channelSelected` output
+4. Add to parent template and imports
+
+### To add EPG-related features:
+1. Use `EpgService` for data fetching
+2. Subscribe to `channelEpgMap` signal for current programs
+3. Dispatch `EpgActions` for state updates
+
+### To modify favorites behavior:
+1. Dispatch `FavoritesActions.updateFavorites` for toggle
+2. Dispatch `FavoritesActions.setFavorites` for reordering
+3. Effects automatically persist to database
diff --git a/docs/architecture/navigation-ux-analysis.md b/docs/architecture/navigation-ux-analysis.md
new file mode 100644
index 0000000..f6ad597
--- /dev/null
+++ b/docs/architecture/navigation-ux-analysis.md
@@ -0,0 +1,119 @@
+# UX/UI Analysis: Header vs Rail Navigation
+
+Date: 2026-03-22
+
+## Overview
+
+Evaluation of IPTVnator's navigation architecture — specifically the separation between **global actions in the top header** and **playlist-local actions in the left rail sidebar**, assessed from a user understanding perspective.
+
+## Current Architecture
+
+| Region | Intended Scope | Actual Contents |
+|--------|---------------|-----------------|
+| **Header** (top) | Global / app-wide | Playlist switcher, search, add playlist, global favorites, downloads, **context menu with local actions** |
+| **Rail** (left) | Local / playlist-specific | Dashboard (global), Sources (global), **dynamic provider links** (local), Settings (global) |
+
+Neither region is purely global or purely local. Both mix scopes, which muddies the mental model.
+
+## Strengths
+
+- **Playlist switcher in the header** is excellent placement. Acts like a "workspace context selector" — similar to Slack's workspace switcher or VS Code's project selector.
+- **Command palette** nails the global-vs-local distinction with explicit "GLOBAL ACTIONS" and "THIS PLAYLIST" section headers. Clearest articulation of scope in the entire UI.
+- **Rail dividers** between static workspace links (Dashboard, Sources) and dynamic provider links provide a subtle visual boundary hinting at the scope change.
+- **Search bar adapting its placeholder text** per route is good contextual affordance.
+- **Settings at the rail bottom** follows a well-established pattern (Slack, Discord, VS Code).
+
+## Confusion Points
+
+### A. Rail Mixes Global and Local Without Explaining Why
+
+When a user selects an Xtream playlist, the rail shows:
+```
+Dashboard        <- global
+Sources          <- global
+-----------------
+Movies           <- local (Xtream)
+Live TV          <- local (Xtream)
+Series           <- local (Xtream)
+-----------------
+Search           <- local (Xtream)
+Recently viewed  <- local (Xtream)
+Favorites        <- local (Xtream)
+-----------------
+Settings         <- global
+```
+
+When switching to M3U:
+```
+Dashboard        <- global
+Sources          <- global
+-----------------
+All channels     <- local (M3U)
+Groups           <- local (M3U)
+Recently viewed  <- local (M3U)
+Favorites        <- local (M3U)
+-----------------
+Settings         <- global
+```
+
+**Issue:** The dynamic links change silently. There's no label like "rucolor.tv" or "clean.m3u" above the provider links to indicate *which* playlist these links belong to. Users who switch playlists via the header dropdown may not immediately notice the rail updated.
+
+**Severity:** Medium.
+
+### B. Header's Three-Dot Menu Breaks the "Global Header" Mental Model
+
+The context actions menu in the header contains:
+- **Playlist Info** — local to the current playlist
+- **Account Info** — local to the current Xtream portal
+- **Clear Recently Viewed** — local bulk action
+
+These are playlist-scoped actions living in what should be the "global" header area.
+
+**Severity:** Low-Medium.
+
+### C. "Favorites" Appears in Both Global and Local Contexts
+
+- **Header:** Global Favorites star icon (cross-playlist)
+- **Rail:** Favorites link (playlist-specific)
+
+A user clicking the star in the header vs the heart in the rail gets *different* favorites views with *no* clear labeling of "global" vs "this playlist."
+
+**Severity:** Medium-High. Most likely source of user confusion.
+
+### D. Search Bar Scope Is Invisible
+
+The search bar disables itself on some routes and changes behavior on others. The placeholder text changes, but "Search in this section..." doesn't clarify *which* section.
+
+**Severity:** Low.
+
+## Recommendations
+
+### Quick Wins (Low Effort, High Impact)
+
+1. **Add a playlist name label above the dynamic rail links.** Small, muted text showing "clean.m3u" or "rucolor.tv" above the provider-specific navigation.
+2. **Keep Global Favorites as a single left-rail destination.** Avoid reintroducing a second header shortcut for the same global destination; reserve header actions for contextual controls.
+3. **Add a scope label to the search bar** when active: "Searching in Live TV" or "Searching in clean.m3u" instead of generic "Search in this section..."
+
+### Medium Effort
+
+4. **Consider moving the three-dot context menu into the context panel** rather than the header, keeping the header purely global.
+5. **Animate the rail transition** when switching playlists — a subtle slide or fade to signal that links changed.
+
+## Overall Assessment
+
+**Score: 7/10 — Good, with clear improvement opportunities.**
+
+The architecture follows patterns users will recognize from Slack, VS Code, and Spotify. The main risks are the **silent dynamic rail** and the **favorites scope ambiguity**. Fixing those two issues would bring this to a 9/10 for navigational clarity.
+
+### Design Principle
+
+The command palette already has the right model: **explicit scope labels**. Apply this same principle to the rail and header. Anywhere an action's scope isn't obvious from its placement, label it.
+
+## Key Files
+
+- `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html`
+- `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts`
+- `libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts`
+- `libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts`
+- `libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts`
+- `libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts`
diff --git a/docs/architecture/playlist-backup-restore.md b/docs/architecture/playlist-backup-restore.md
new file mode 100644
index 0000000..3a4589b
--- /dev/null
+++ b/docs/architecture/playlist-backup-restore.md
@@ -0,0 +1,171 @@
+# Playlist Backup/Restore Architecture
+
+This document describes the versioned playlist backup/restore flow used by the
+settings screen.
+
+## Entry Points
+
+- UI: `/Users/4gray/Code/iptvnator/apps/web/src/app/settings/settings.component.ts`
+- Backup service: `/Users/4gray/Code/iptvnator/libs/services/src/lib/playlist-backup.service.ts`
+- Manifest types: `/Users/4gray/Code/iptvnator/libs/shared/interfaces/src/lib/playlist-backup.interface.ts`
+- Xtream pending restore storage:
+  `/Users/4gray/Code/iptvnator/libs/services/src/lib/xtream-pending-restore.service.ts`
+
+## Manifest Contract
+
+Backups are versioned JSON manifests, not raw `Playlist[]` dumps and not SQLite
+database snapshots.
+
+Top-level shape:
+
+- `kind: "iptvnator-playlist-backup"`
+- `version: 1`
+- `exportedAt`
+- `includeSecrets`
+- `settings?.epgUrls`
+- `playlists[]`
+
+The manifest is portable across machines because it stores playlist definitions
+and portable user state, while excluding cache-only database content.
+
+## Export Scope
+
+### M3U
+
+M3U backups are self-contained.
+
+- Always export canonical `rawM3u` from `PlaylistsService.getRawPlaylistById()`
+- Preserve source metadata when available:
+    - original source kind: `url`, `file`, or `text`
+    - original URL
+    - `userAgent`, `referrer`, `origin`
+    - `filePathHint` for provenance only
+- Export playlist-scoped user state:
+    - favorites by channel URL
+    - recently viewed M3U items
+    - hidden group titles
+
+The embedded raw text is the canonical restore artifact. The internal parsed
+playlist object graph is not the backup format.
+
+### Xtream
+
+Xtream backups export only connection metadata plus portable user state.
+
+- Connection metadata:
+    - `serverUrl`
+    - `username`
+    - `password`
+- User state:
+    - hidden categories by `{ categoryType, xtreamId }`
+    - favorites by `{ contentType, xtreamId, addedAt?, position? }`
+    - recently viewed by `{ contentType, xtreamId, viewedAt }`
+    - playback positions as `PlaybackPositionData[]`
+
+Explicitly excluded:
+
+- cached categories/content rows
+- import-status flags and other app-state cache markers
+- downloads
+
+### Stalker
+
+Stalker backups export connection metadata plus playlist-scoped favorites/recent
+state.
+
+- Exported connection fields:
+    - `portalUrl`
+    - `macAddress`
+    - `isFullStalkerPortal`
+    - `username`
+    - `password`
+    - `userAgent`
+    - `referrer`
+    - `origin`
+    - serial/device/signature fields when present
+- Exported user state:
+    - favorites snapshots
+    - recently viewed snapshots
+
+Explicitly excluded:
+
+- `stalkerToken`
+- `stalkerAccountInfo`
+- playback positions in v1
+
+### App Settings
+
+Only EPG source URLs are backed up at the app-settings level.
+
+- Exported: `settings.epgUrls`
+- Excluded: cached EPG database content
+
+## Import Flow
+
+The settings component hands file contents to `PlaylistBackupService`.
+
+The service:
+
+1. Validates the manifest kind/version before any writes.
+2. Rejects legacy raw `Playlist[]` JSON blobs.
+3. Builds stable source fingerprints for merge-vs-create decisions.
+4. Upserts playlists into app playlist storage.
+5. Restores provider-specific user state.
+
+Fingerprint rules:
+
+- M3U URL playlists: normalized URL
+- M3U without URL: hash of canonical `rawM3u`
+- Xtream: normalized `serverUrl + username`
+- Stalker: normalized `portalUrl + macAddress`
+
+If a fingerprint matches an existing playlist:
+
+- keep the existing playlist ID
+- update mutable metadata from the backup
+- replace playlist-scoped state with the backup payload
+
+If no fingerprint matches:
+
+- create a new playlist
+- reuse `exportedId` only when it is unused
+- otherwise generate a new UUID
+
+## Xtream Restore Contract
+
+Xtream restore is type-aware end to end. The app no longer stores plain
+`xtream_id[]` arrays for refresh/import restore because IDs can collide across
+`live`, `movie`, and `series`.
+
+Runtime contract:
+
+- shared shape: `XtreamPendingRestoreState`
+- persisted in local storage by playlist ID
+- consumed by:
+    - Xtream refresh actions
+    - settings backup import
+    - Xtream content initialization
+
+Electron restore behavior:
+
+1. Category import reads pending hidden-category state while saving categories.
+2. After content import, favorites/recent state is restored by typed
+   `{ contentType, xtreamId }` matching.
+3. Playback positions are cleared and re-applied from backup state.
+
+For existing Xtream playlists with a fully populated offline cache, backup
+import applies the restore immediately. Otherwise the typed restore payload is
+left pending until the next Xtream initialization/import.
+
+## Current UX
+
+The settings page now exports/imports “playlist backups” instead of the old
+raw JSON application dump.
+
+- Export filename:
+  `iptvnator-playlist-backup-YYYY-MM-DD.json`
+- Import summary reports:
+    - imported
+    - merged
+    - skipped
+    - failed
diff --git a/docs/architecture/portal-detail-navigation.md b/docs/architecture/portal-detail-navigation.md
new file mode 100644
index 0000000..7aaf342
--- /dev/null
+++ b/docs/architecture/portal-detail-navigation.md
@@ -0,0 +1,152 @@
+# Portal Detail Navigation
+
+This document records the current navigation contract for Xtream and Stalker detail flows, especially for favorites, recently viewed, search, and category content.
+
+Related:
+
+- [Embedded Inline Playback](./embedded-inline-playback.md)
+
+## Summary
+
+- Xtream category browsing uses a route-first detail model.
+- Stalker uses an inline/store-state detail model.
+- Favorites and recently viewed collections now use collection-owned inline detail
+  for non-live Xtream and Stalker items.
+- Provider-scoped collection routes fall back to the matching global collection
+  route when `All playlists` shows a non-live item from the other portal type,
+  so the correct detail host still opens without switching playlist context.
+- Dashboard `Global Favorites` and `Recently Watched` widgets hand off Xtream and
+  Stalker movies/series into the matching global collection route with detail
+  pre-opened.
+- Do not force both portals into the same browse/detail behavior unless the full
+  portal detail architecture is being changed.
+
+## Xtream
+
+Xtream category and search details are represented by canonical routes.
+
+Examples:
+
+- `/xtreams/:id/vod/:categoryId/:vodId`
+- `/xtreams/:id/series/:categoryId/:serialId`
+
+Implication:
+
+- Category browsing and search can still redirect to the original Xtream content
+  route and item route.
+- This keeps the URL, browser history, and detail rendering model aligned with
+  normal Xtream browsing.
+
+Current code paths:
+
+- `libs/portal/xtream/feature/src/lib/favorites/favorites.component.ts`
+- `libs/portal/xtream/feature/src/lib/search-results/search-results.component.ts`
+- `libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.ts`
+
+Collection behavior to preserve:
+
+- Selecting a non-live Xtream item from favorites/recent should keep the current
+  collection route and open inline detail inside the collection pane when the
+  current collection host is already Xtream-aware.
+- If a Stalker or M3U collection route is showing `All playlists` and the user
+  selects an Xtream movie/series item, route into `/workspace/global-favorites`
+  or `/workspace/global-recent` with detail pre-opened instead of trying to
+  render Xtream detail inside the wrong host.
+- The current playlist context must stay unchanged even when the selected item
+  belongs to a different Xtream source playlist.
+- The workspace/sidebar category panel should stay hidden for these collection
+  detail opens.
+- Back from a collection-owned detail should restore the previous collection
+  view state, including the active content tab and playlist/all-playlists
+  scope.
+- Live streams can still open through the player path rather than a detail
+  route.
+
+Dashboard behavior to preserve:
+
+- Dashboard `Global Favorites` and `Recently Watched` widgets should route
+  Xtream movie/series items into `/workspace/global-favorites` or
+  `/workspace/global-recent` with collection detail pre-opened from navigation
+  state.
+- Back from the collection detail should return to the dashboard handoff state,
+  not switch the active playlist.
+
+Search behavior to preserve:
+
+- Selecting an Xtream item from search should still navigate to the canonical
+  Xtream content type/category/item route when the item is not a live stream.
+
+## Stalker
+
+Stalker details are represented by store state and inline detail rendering on the current screen.
+
+Examples:
+
+- Category content sets `selectedItem` and renders details inline.
+- Search sets `selectedItem` and stays on the search view.
+- Favorites and recently viewed stay on their current collection screen and open
+  inline detail when the current collection host is already Stalker-aware.
+
+Implication:
+
+- Favorites, recently viewed, and search should remain in the current Stalker view when opening VOD/series details.
+- This keeps Stalker behavior aligned with its normal category-content and search flow.
+
+Current code paths:
+
+- `libs/portal/stalker/feature/src/lib/stalker-favorites/stalker-favorites.component.ts`
+- `libs/portal/stalker/feature/src/lib/recently-viewed/recently-viewed.component.ts`
+- `libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.ts`
+- `libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.ts` (Stalker branch)
+
+Behavior to preserve:
+
+- Favorites/recent/search should not navigate away to a canonical Stalker detail route because Stalker does not currently use one.
+- If an Xtream or M3U collection route is showing `All playlists` and the user
+  selects a Stalker VOD/series item, route into `/workspace/global-favorites`
+  or `/workspace/global-recent` with detail pre-opened so the Stalker inline
+  detail host still renders on a compatible screen.
+- ITV/live items can still trigger playback immediately.
+- Stalker VOD items that are displayed as series because of `is_series=1`
+  remain VOD-backed when opened from favorites/recent/global collections; the
+  collection host must not convert them into regular `/series` detail mode.
+- Dashboard `Global Favorites` and `Recently Watched` widgets should route
+  Stalker movie/series items into `/workspace/global-favorites` or
+  `/workspace/global-recent` with detail pre-opened inline, again without
+  switching playlist context or showing the workspace category sidebar.
+- Back from the collection-owned detail should restore the previous collection
+  tab and scope instead of resetting the collection screen to its defaults.
+
+## Decision Rule For Future Changes
+
+When deciding how a favorites/recent/search click should behave:
+
+1. Follow the portal's canonical detail model.
+2. Prefer local consistency within the portal over cross-portal sameness.
+3. Only unify Xtream and Stalker behavior if the full detail architecture is being unified as well.
+
+That means:
+
+- Xtream browse/search: navigate to the canonical route.
+- Xtream favorites/recent/global collection widgets: open collection-owned
+  detail without switching playlist context. Use the current route when it can
+  host Xtream detail, otherwise fall back to the matching global collection
+  route.
+- Stalker non-live items: open collection-owned detail without switching
+  playlist context. Use the current route when it can host Stalker detail,
+  otherwise fall back to the matching global collection route.
+
+## Refactor Guidance
+
+If a future change proposes that Stalker favorites/recent should deep-link into category routes:
+
+- also update Stalker category-content and search behavior
+- define a canonical Stalker detail route model first
+- update architecture docs and portal skills together
+
+If a future change proposes that Xtream favorites/recent should stay inline:
+
+- keep the existing route-based detail pages reusable from the collection-owned
+  detail host
+- verify history/back behavior, playlist preservation, and dashboard handoff
+  behavior still make sense
diff --git a/docs/architecture/remote-control.md b/docs/architecture/remote-control.md
new file mode 100644
index 0000000..28f647c
--- /dev/null
+++ b/docs/architecture/remote-control.md
@@ -0,0 +1,245 @@
+# Remote Control Architecture
+
+This document describes the current remote control implementation in IPTVnator, including:
+
+- HTTP API exposed by Electron main process
+- IPC bridge between Electron main and Angular renderer
+- Feature support and integration points for M3U, Xtream, and Stalker
+- Remote web UI structure and behavior
+
+Related architecture docs:
+
+- [Stalker Portal Architecture](./stalker-portal.md)
+- [Stalker Portal EPG Architecture](./stalker-epg.md)
+
+## Scope
+
+Remote control is a desktop-only feature that serves a mobile-friendly web app from the Electron backend and routes remote actions into the running renderer.
+
+Current capabilities:
+
+- Channel up / down
+- Channel select by number
+- Volume commands (implemented in command layer; active support currently in M3U flow)
+- Playback status polling (portal, live-state, channel name/number, EPG now, volume capability)
+
+## High-Level Flow
+
+1. User opens remote web UI (`http://<local-ip>:<port>`).
+2. Remote web app calls `/api/remote-control/*`.
+3. Electron main handles API request and sends IPC to renderer:
+   - `CHANNEL_CHANGE` for up/down
+   - `REMOTE_CONTROL_COMMAND` for numeric/volume commands
+4. Renderer-specific feature module (M3U/Xtream/Stalker) applies action.
+5. Renderer pushes status snapshots back to main via:
+   - `REMOTE_CONTROL_STATUS_UPDATE`
+6. Remote web app polls `/api/remote-control/status` and updates UI.
+
+## Backend (Electron Main)
+
+### HTTP server and static app hosting
+
+- File: `apps/electron-backend/src/app/server/http-server.ts`
+- Responsibilities:
+  - Serves static remote app from:
+    - dev: `dist/apps/remote-control-web/browser`
+    - prod: `<appPath>/remote-control-web/browser`
+  - Routes `/api/remote-control/*` to registered handlers.
+  - Starts/stops/restarts on settings updates.
+
+### Remote control event module
+
+- File: `apps/electron-backend/src/app/events/remote-control.events.ts`
+- Bootstrapped in: `apps/electron-backend/src/main.ts` via `RemoteControlEvents.bootstrapRemoteControlEvents()`
+
+Registered endpoints:
+
+- `POST /api/remote-control/channel/up`
+- `POST /api/remote-control/channel/down`
+- `POST /api/remote-control/channel/select-number` with `{ number: <int> }`
+- `POST /api/remote-control/volume/up`
+- `POST /api/remote-control/volume/down`
+- `POST /api/remote-control/volume/toggle-mute`
+- `GET /api/remote-control/status`
+
+IPC emitted to renderer:
+
+- `CHANNEL_CHANGE` payload: `{ direction: 'up' | 'down' }`
+- `REMOTE_CONTROL_COMMAND` payload:
+  - `{ type: 'channel-select-number', number }`
+  - `{ type: 'volume-up' | 'volume-down' | 'volume-toggle-mute' }`
+
+Status ingestion from renderer:
+
+- Listens on `REMOTE_CONTROL_STATUS_UPDATE`
+- Maintains in-memory `RemoteControlStatus` object returned by `/status`
+
+### Settings integration
+
+- Main handler: `apps/electron-backend/src/app/events/settings.events.ts`
+- On `SETTINGS_UPDATE`, reads `remoteControl` and `remoteControlPort`, persists to store, and calls:
+  - `httpServer.updateSettings(enabled, port)`
+
+## Preload Bridge
+
+- File: `apps/electron-backend/src/app/api/main.preload.ts`
+
+Exposed APIs relevant to remote control:
+
+- `onChannelChange(callback) => unsubscribe`
+- `onRemoteControlCommand(callback) => unsubscribe`
+- `updateRemoteControlStatus(status) => void`
+
+Type definitions:
+
+- `apps/web/src/typings.d.ts`
+- `global.d.ts`
+
+## Renderer Integrations
+
+## Shared helpers
+
+- File: `libs/portal/shared/util/src/lib/remote-channel-navigation.ts`
+
+Functions:
+
+- `getAdjacentChannelItem(...)`: wraps around on boundaries for up/down
+- `getChannelItemByNumber(...)`: 1-based number to list item mapping
+
+Used by M3U, Xtream, and Stalker live integrations.
+
+## M3U integration
+
+- File: `libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts`
+
+Implemented behavior:
+
+- Subscribes to:
+  - `onChannelChange` (up/down)
+  - `onRemoteControlCommand` (number + volume)
+- Applies channel up/down by active channel URL over `channels$`
+- Applies number select through existing `switchToChannelByNumber(...)`
+- Applies volume commands:
+  - up/down in 0.1 increments
+  - toggle mute with last non-zero volume restore
+  - persists to `localStorage`
+- Publishes status snapshots via `updateRemoteControlStatus(...)`:
+  - `portal: 'm3u'`
+  - `isLiveView: true`
+  - channel name/number
+  - EPG now fields
+  - `supportsVolume: true`, `volume`, `muted`
+- Cleans listeners/subscriptions in `ngOnDestroy`.
+
+## Xtream integration (live view)
+
+- File: `libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.ts`
+
+Implemented behavior:
+
+- Subscribes to:
+  - `onChannelChange` for up/down
+  - `onRemoteControlCommand` for number select
+- Up/down:
+  - Uses selected live item `selectedItem().xtream_id`
+  - Navigates inside `selectItemsFromSelectedCategory()`
+  - Calls `playLive(nextItem)`
+- Number select:
+  - Maps number to item in current category list
+  - Calls `playLive(channel)`
+- Publishes status via effect:
+  - `portal: 'xtream'`
+  - `isLiveView` only when selected content type is `live` and item is selected
+  - channel name/number + current EPG item
+  - `supportsVolume: false`
+- Cleans listeners in `ngOnDestroy`.
+
+## Stalker integration (ITV live view)
+
+- File: `libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts`
+
+Implemented behavior:
+
+- Subscribes to:
+  - `onChannelChange` for up/down
+  - `onRemoteControlCommand` for number select
+- Up/down:
+  - Uses `selectedItem().id`
+  - Navigates inside `itvChannels()`
+  - Calls `playChannel(nextItem)`
+- Number select:
+  - Maps number into `itvChannels()`
+  - Calls `playChannel(channel)`
+- Publishes status via effect:
+  - `portal: 'stalker'`
+  - `isLiveView` only for selected content type `itv` with active item
+  - channel name/number + current EPG item
+  - `supportsVolume: false`
+- Cleans listeners in `ngOnDestroy`.
+
+## Remote Web App
+
+### App shell
+
+- App: `apps/remote-control-web/src/app/app.ts`
+- Template: `apps/remote-control-web/src/app/app.html`
+- Style: `apps/remote-control-web/src/app/app.scss`
+- Renders shared library component: `<lib-remote-control />`
+
+### Shared remote UI library
+
+- Component:
+  - `libs/ui/remote-control/src/lib/remote-control/remote-control.component.ts`
+  - `libs/ui/remote-control/src/lib/remote-control/remote-control.component.html`
+  - `libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss`
+- Service:
+  - `libs/ui/remote-control/src/lib/remote-control/remote-control.service.ts`
+
+Implemented UI behavior:
+
+- Channel pad (`CH+`, `CH-`)
+- Numeric keypad (`0-9`, `DEL`, `CLR`, `OK`)
+- Volume controls (`VOL-`, `MUTE/UNMUTE`, `VOL+`)
+- Status card (portal, channel name/number, current program)
+- Polls `/status` every 2s
+- Uses action wrapper to refresh status after command execution
+
+## Settings UI and discoverability
+
+- Files:
+  - `apps/web/src/app/settings/settings.component.ts`
+  - `apps/web/src/app/settings/settings.component.html`
+- Features:
+  - Toggle `remoteControl`
+  - Configure `remoteControlPort`
+  - Display local URLs and QR codes for remote access
+  - Local IP list loaded via `getLocalIpAddresses()`
+
+## Feature Matrix (Current)
+
+| Capability | M3U | Xtream Live | Stalker ITV |
+|---|---|---|---|
+| Channel up/down | Yes | Yes | Yes |
+| Number select | Yes | Yes | Yes |
+| Status publish | Yes | Yes | Yes |
+| Volume command handling | Yes | No | No |
+| `supportsVolume` in status | true | false | false |
+
+## Known limitations
+
+- Volume commands are currently no-op in Xtream and Stalker integrations.
+- Remote status uses polling from web UI (2s), not push/WebSocket.
+- Number-based selection is list-position based (1-based index in active list scope), not global EPG number mapping.
+- Remote API currently has no auth/TLS; intended for trusted local networks.
+
+## Operational notes
+
+- UI updates in remote web app require rebuilding `remote-control-web` so Electron serves fresh `dist` assets.
+- If stale UI appears, clear browser cache/hard-refresh mobile browser.
+
+## Future extension points
+
+- Add optional auth token for `/api/remote-control/*` endpoints.
+- Add WebSocket/SSE status push for lower latency and reduced polling.
+- Add cross-portal volume abstraction and capability negotiation.
+- Add last-channel, favorites navigation, and search/select commands.
diff --git a/docs/architecture/sqlite-db-worker.md b/docs/architecture/sqlite-db-worker.md
new file mode 100644
index 0000000..a6a8e99
--- /dev/null
+++ b/docs/architecture/sqlite-db-worker.md
@@ -0,0 +1,558 @@
+# SQLite DB Worker
+
+This document records the current non-EPG SQLite worker implementation in the
+Electron app.
+
+Related:
+
+- [Category Management](./category-management.md)
+- [Workspace Shell](./workspace-shell.md)
+
+## Summary
+
+- Heavy non-EPG SQLite work no longer runs on Electron's main thread.
+- A dedicated long-lived database worker now handles the slow Xtream and
+  playlist database operations that were freezing the UI.
+- Renderer APIs stay stable. The main change is that progress and long-running
+  state now flow through a request-scoped `DB_OPERATION_EVENT` contract instead
+  of a single global progress event.
+
+## Goals
+
+The worker cutover addresses three concrete problems:
+
+1. Main-process UI stalls during large SQLite operations.
+2. Xtream import progress events were global and unsafe for concurrent jobs.
+3. EPG and non-EPG writers needed shared SQLite concurrency settings so they
+   can coexist without `SQLITE_BUSY` regressions.
+
+## Current Ownership
+
+### Main-process runtime wiring
+
+These files own worker lifecycle and IPC bridging:
+
+1. `apps/electron-backend/src/app/services/database-worker-client.ts`
+2. `apps/electron-backend/src/app/events/database/category.events.ts`
+3. `apps/electron-backend/src/app/events/database/content.events.ts`
+4. `apps/electron-backend/src/app/events/database/playlist.events.ts`
+5. `apps/electron-backend/src/app/events/database/xtream.events.ts`
+6. `apps/electron-backend/src/main.ts`
+
+### Worker runtime
+
+These files own the worker protocol and the SQLite work itself:
+
+1. `apps/electron-backend/src/app/workers/database-worker.types.ts`
+2. `apps/electron-backend/src/app/workers/database.worker.ts`
+3. `apps/electron-backend/src/app/workers/database.worker-connection.ts`
+4. `apps/electron-backend/src/app/workers/worker-runtime-paths.ts`
+
+### Pure database operation modules
+
+Keep SQL-heavy logic here so the worker entry remains a thin dispatcher:
+
+1. `apps/electron-backend/src/app/database/operations/category.operations.ts`
+2. `apps/electron-backend/src/app/database/operations/content.operations.ts`
+3. `apps/electron-backend/src/app/database/operations/playlist.operations.ts`
+4. `apps/electron-backend/src/app/database/operations/xtream.operations.ts`
+
+## Worker Architecture
+
+### Request flow
+
+1. Renderer calls the existing preload API such as `window.electron.dbSaveContent`.
+2. `ipcMain.handle(...)` in the Electron backend builds a payload and delegates
+   to `DatabaseWorkerClient`.
+3. `DatabaseWorkerClient` lazily starts one long-lived `worker_threads` worker
+   and correlates requests with a generated `requestId`.
+4. The worker executes SQLite work and sends back either:
+    1. `ready`
+    2. `event`
+    3. `response`
+5. The main process resolves the IPC request and forwards worker events back to
+   the originating renderer process.
+
+### Why one long-lived worker
+
+- It avoids worker startup cost on every search/delete/import.
+- It centralizes failure handling and restart behavior.
+- It mirrors the existing EPG worker approach without multiplying writable
+  SQLite owners.
+
+### Packaged worker bootstrap
+
+Packaged Electron builds do not load worker scripts and native modules from the
+same place:
+
+1. worker scripts live under `Resources/dist/apps/electron-backend/workers`
+2. unpacked native modules live under one of the approved
+   `app.asar.unpacked/.../node_modules` locations
+
+Both the EPG worker and the DB worker now share the same runtime helper:
+
+1. `resolveWorkerRuntimeBootstrap(...)` for main-process worker launch
+2. `loadNativeModuleFromSearchPaths(...)` for worker-side native module loading
+
+The helper uses `process.resourcesPath` as the primary packaged base and keeps
+`path.dirname(app.getAppPath())` only as a fallback.
+
+## Worker Message Contract
+
+The worker contract lives in
+`apps/electron-backend/src/app/workers/database-worker.types.ts`.
+
+### Core message types
+
+1. `DbWorkerRequestMessage`
+2. `DbWorkerResponseMessage`
+3. `DbWorkerEventMessage`
+4. `DbOperationEvent`
+
+### Progress event contract
+
+The worker now emits request-scoped events with:
+
+- `operationId`
+- `operation`
+- `playlistId`
+- `status`
+- optional `phase`
+- optional `current`
+- optional `total`
+- optional `increment`
+
+Current shipped operation names:
+
+1. `save-content`
+2. `delete-xtream-content`
+3. `restore-xtream-user-data`
+4. `delete-playlist`
+5. `delete-all-playlists`
+
+The event is forwarded to the renderer as `DB_OPERATION_EVENT`.
+
+### Cancellation contract
+
+Long-running Xtream and playlist operations now support best-effort
+cancellation.
+
+Renderer requests cancellation via:
+
+1. `DB_CANCEL_OPERATION`
+2. `window.electron.dbCancelOperation(operationId)`
+3. `DatabaseService.cancelOperation(operationId)`
+
+If a worker operation is canceled:
+
+1. the worker emits a final `cancelled` event
+2. the request rejects with an `AbortError`
+3. the UI clears its busy state without treating the operation as success
+
+Cancellation is cooperative and chunk-based. Already committed SQLite batches
+stay committed.
+
+## Renderer Contract
+
+The preload bridge keeps the existing database methods but adds scoped worker
+events.
+
+### Important preload APIs
+
+1. `onDbOperationEvent(callback)`
+2. `dbSaveContent(playlistId, streams, type, operationId?)`
+3. `dbDeleteXtreamContent(playlistId, operationId?)`
+4. `dbRestoreXtreamUserData(..., operationId?)`
+5. `dbDeletePlaylist(playlistId, operationId?)`
+6. `dbDeleteAllPlaylists(operationId?)`
+7. `dbCancelOperation(operationId)`
+8. legacy compatibility:
+    1. `onDbSaveContentProgress(callback)`
+    2. `removeDbSaveContentProgress()`
+
+`DatabaseService.saveXtreamContent(...)` now generates an `operationId`,
+subscribes to `onDbOperationEvent`, filters by that `operationId`, and only
+falls back to the legacy progress API if the newer event channel is missing.
+
+`DatabaseService` also owns:
+
+1. `createOperationId(...)`
+2. `cancelOperation(operationId)`
+3. `isDbAbortError(error)`
+
+## Migrated Operations
+
+The worker now owns all heavy non-EPG SQLite paths plus the remaining portal
+state handlers that still used direct main-thread SQLite access.
+
+### Categories
+
+1. `DB_HAS_CATEGORIES`
+2. `DB_GET_CATEGORIES`
+3. `DB_SAVE_CATEGORIES`
+4. `DB_GET_ALL_CATEGORIES`
+5. `DB_UPDATE_CATEGORY_VISIBILITY`
+
+### Content
+
+1. `DB_HAS_CONTENT`
+2. `DB_GET_CONTENT`
+3. `DB_SAVE_CONTENT`
+4. `DB_GET_CONTENT_BY_XTREAM_ID`
+5. `DB_SEARCH_CONTENT`
+6. `DB_GLOBAL_SEARCH`
+7. `DB_GET_GLOBAL_RECENTLY_ADDED`
+
+### Playlist metadata
+
+1. `DB_CREATE_PLAYLIST`
+2. `DB_UPSERT_APP_PLAYLIST`
+3. `DB_UPSERT_APP_PLAYLISTS`
+4. `DB_GET_APP_PLAYLISTS`
+5. `DB_GET_APP_PLAYLIST`
+6. `DB_GET_PLAYLIST`
+7. `DB_UPDATE_PLAYLIST`
+8. `DB_DELETE_PLAYLIST`
+9. `DB_DELETE_ALL_PLAYLISTS`
+10. `DB_GET_APP_STATE`
+11. `DB_SET_APP_STATE`
+
+### Xtream refresh helpers
+
+1. `DB_DELETE_XTREAM_CONTENT`
+2. `DB_RESTORE_XTREAM_USER_DATA`
+
+### Favorites
+
+1. `DB_ADD_FAVORITE`
+2. `DB_REMOVE_FAVORITE`
+3. `DB_IS_FAVORITE`
+4. `DB_GET_FAVORITES`
+5. `DB_GET_GLOBAL_FAVORITES`
+6. `DB_GET_ALL_GLOBAL_FAVORITES`
+7. `DB_REORDER_GLOBAL_FAVORITES`
+
+### Recently viewed
+
+1. `DB_GET_RECENTLY_VIEWED`
+2. `DB_CLEAR_RECENTLY_VIEWED`
+3. `DB_GET_RECENT_ITEMS`
+4. `DB_ADD_RECENT_ITEM`
+5. `DB_CLEAR_PLAYLIST_RECENT_ITEMS`
+6. `DB_REMOVE_RECENT_ITEM`
+
+### Playback positions
+
+1. `DB_SAVE_PLAYBACK_POSITION`
+2. `DB_GET_PLAYBACK_POSITION`
+3. `DB_GET_SERIES_PLAYBACK_POSITIONS`
+4. `DB_GET_RECENT_PLAYBACK_POSITIONS`
+5. `DB_GET_ALL_PLAYBACK_POSITIONS`
+6. `DB_CLEAR_PLAYBACK_POSITION`
+
+## SQLite Concurrency Rules
+
+EPG remains on its own worker, so both workers must use compatible SQLite
+pragmas.
+
+Applied now in both the shared connection path and worker-owned connections:
+
+1. `foreign_keys = ON`
+2. `journal_mode = WAL`
+3. `busy_timeout = 5000`
+
+Current sources:
+
+1. `libs/shared/database/src/lib/connection.ts`
+2. `apps/electron-backend/src/app/workers/database.worker-connection.ts`
+3. `apps/electron-backend/src/app/workers/epg-parser.worker.ts`
+
+## UI Behavior Changes
+
+### Search
+
+Xtream search now guards against stale async responses:
+
+1. local playlist search uses a monotonically increasing request version
+2. global search uses a separate request version in the dialog component
+3. clearing search invalidates older pending results
+
+This prevents an older worker response from repainting over a newer query or a
+cleared search state.
+
+### Xtream type-aware content lookup
+
+Xtream UI flows must treat `xtream_id` as only partially unique.
+
+Current contract:
+
+1. `xtream_id` can collide across `live`, `movie`, and `series` within the same
+   playlist.
+2. Any DB-backed lookup that starts from an Xtream result card, favorite button,
+   recent-item update, continue-watching flow, or detail route must resolve
+   content by:
+   - `playlist_id`
+   - `xtream_id`
+   - `content.type`
+3. Mixed Xtream collection identity must key entries by `type + xtream_id`,
+   not `xtream_id` alone. This includes favorites maps, recent-item lists,
+   dashboard collection payloads, and other UI state keyed off persisted
+   Xtream content.
+
+Why this matters:
+
+- Search results are already type-filtered, so resolving favorites by only
+  `playlist_id + xtream_id` can favorite the wrong persisted row when IDs
+  collide.
+- Continue-watching / recently-viewed flows that resolve by only
+  `playlist_id + xtream_id` can store the wrong persisted row when a series or
+  movie ID collides with a live entry.
+- Mixed favorites maps keyed only by `xtream_id` can mark an unrelated live row
+  as favorited when the actual favorite is a movie or series with the same
+  numeric ID.
+- Mixed recent/favorites collection items keyed only by `xtream_id` can cause
+  local UI state to remove, reorder, or reactivate the wrong Xtream entry when
+  different content types collide.
+
+Current implementation paths:
+
+1. `apps/electron-backend/src/app/database/operations/content.operations.ts`
+2. `libs/portal/xtream/data-access/src/lib/with-favorites.feature.ts`
+3. `libs/portal/xtream/data-access/src/lib/with-recent-items.ts`
+4. `libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.ts`
+5. `libs/portal/shared/util/src/lib/collection/unified-recent-data.service.ts`
+6. `libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.ts`
+
+### Busy states
+
+The UI now has explicit long-running state for destructive operations:
+
+1. recent playlist rows show row-level refresh/delete spinners
+2. Xtream import overlay shows phase text and a cancel action
+3. Xtream playlist rows show request-scoped progress and cancel actions
+4. busy rows block repeat clicks while an operation is in flight
+5. settings "remove all playlists" owns its own spinner/disabled state and
+   consumes request-scoped DB operation events for progress text while the
+   worker deletes playlist data
+
+These changes matter because once SQLite work leaves the main thread, the
+renderer can actually paint the loading state instead of freezing.
+
+## Build And Packaging Notes
+
+### Worker bundling
+
+`apps/electron-backend/build-worker.js` now bundles both:
+
+1. `epg-parser.worker.ts`
+2. `database.worker.ts`
+
+The worker build also aliases:
+
+1. `database-schema`
+2. `database-path-utils`
+
+These aliases avoid importing the shared database barrel from inside the worker,
+which would otherwise pull in runtime code that assumes the main Electron
+process environment.
+
+### Worker path resolution
+
+`DatabaseWorkerClient` resolves:
+
+1. development path from `__dirname`
+2. packaged path from `process.resourcesPath/dist/apps/electron-backend/workers/...`
+3. fallback packaged path from `path.dirname(app.getAppPath())`
+
+### Packaged artifact verification
+
+`tools/packaging/verify-electron-package-layout.mjs` verifies packaged worker
+artifacts for:
+
+1. Linux unpacked resources
+2. macOS app bundles
+3. Windows unpacked app resources
+
+The script checks:
+
+1. `epg-parser.worker.js`
+2. `database.worker.js`
+3. `better-sqlite3` in one approved unpacked node_modules location
+4. Snap packaging compatibility settings for `better-sqlite3`:
+    - `snap.base = core22`
+    - Snap launch args keep the X11 fallback
+    - Snap and the other non-Flatpak Linux artifacts build on Ubuntu 22.04, while Flatpak builds on a separate Ubuntu 24.04 CI runner
+
+### Development rebuild rule
+
+Worker-backed database logic is executed from the compiled bundle at:
+
+1. `dist/apps/electron-backend/workers/database.worker.js`
+
+Do not assume a source edit is active in the live app. If a fix touches:
+
+1. `apps/electron-backend/src/app/database/operations/`
+2. `apps/electron-backend/src/app/workers/`
+3. `apps/electron-backend/src/app/events/database/`
+4. preload-backed DB methods consumed by the renderer
+
+then the safe workflow is:
+
+1. rebuild the worker bundle, or the full `electron-backend` target if preload,
+   main-process, or web output also changed
+2. confirm the new `dist/` artifact exists or has a fresh timestamp
+3. restart the Electron process
+4. only then rerun CDP/manual checks or Electron E2E
+
+A running Electron app keeps using the worker bundle it already loaded at
+startup. This is a common reason a worker fix appears "not working" in manual
+verification even when the source patch is correct.
+
+## Testing
+
+### Unit coverage added
+
+`apps/electron-backend/src/app/services/database-worker-client.spec.ts`
+covers:
+
+1. worker ready -> request -> response flow
+2. event forwarding to a pending request
+3. serialized worker error propagation
+4. `AbortError` propagation for cancelled work
+5. cancel message routing to the live worker
+6. worker exit recovery and fresh worker startup
+
+`apps/electron-backend/src/app/events/epg.events.spec.ts` covers:
+
+1. shared worker bootstrap usage for the EPG worker
+2. `nativeModuleSearchPaths` forwarding into workerData
+3. actionable worker-path resolution failures
+
+`apps/electron-backend/src/app/workers/worker-runtime-paths.spec.ts` covers:
+
+1. packaged and development worker path resolution
+2. packaged native-module search path ordering
+3. aggregated native module resolution errors
+
+### Electron responsiveness coverage
+
+`apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts` covers:
+
+1. large Xtream import shows the overlay promptly
+2. DB worker progress events advance during import
+3. renderer animation frames continue while import/delete are in progress
+4. large Xtream playlist delete shows row-level busy UI and completes cleanly
+
+`apps/electron-backend-e2e/src/electron-test-fixtures.ts` now also captures:
+
+1. `DB_OPERATION_EVENT` history in the renderer
+2. a requestAnimationFrame counter for repaint assertions
+
+For deterministic E2E timing, tests may set:
+
+```bash
+IPTVNATOR_DB_WORKER_BATCH_DELAY_MS=20
+```
+
+This delay is test-only and disabled by default.
+
+### Useful verification commands
+
+```bash
+pnpm exec jest --config apps/electron-backend/jest.config.ts --runInBand apps/electron-backend/src/app/services/database-worker-client.spec.ts apps/electron-backend/src/app/events/epg.events.spec.ts apps/electron-backend/src/app/workers/worker-runtime-paths.spec.ts
+pnpm nx run electron-backend:build-worker
+pnpm exec tsc -p apps/electron-backend/tsconfig.app.json --noEmit
+pnpm exec tsc -p apps/web/tsconfig.app.json --noEmit
+pnpm nx run electron-backend-e2e:e2e -- --project=electron --grep "Electron Xtream Responsiveness"
+pnpm run verify:package-layout -- macos arm64
+pnpm run verify:package-layout -- linux
+pnpm run verify:package-layout -- windows
+```
+
+### Electron runtime validation
+
+```bash
+pnpm nx serve electron-backend
+agent-browser --cdp 9222 tab list
+agent-browser --cdp 9222 tab 1
+agent-browser --cdp 9222 snapshot -i -c -d 3
+pnpm run smoke:packaged -- macos arm64
+```
+
+When worker-backed behavior changed, rebuild and restart before reconnecting:
+
+```bash
+pnpm nx run electron-backend:build-worker
+CI=1 NX_TASKS_RUNNER_DYNAMIC_OUTPUT=false pnpm nx run electron-backend:build --skip-nx-cache
+stat -f "%Sm %N" dist/apps/electron-backend/workers/database.worker.js
+```
+
+Then restart the Electron process and reconnect to `127.0.0.1:9222`.
+
+### Electron freeze tracing
+
+When a renderer route freezes before DevTools become usable, start Electron with
+one of these opt-in trace flags and inspect the terminal output:
+
+```bash
+IPTVNATOR_TRACE_STARTUP=1 pnpm run serve:backend
+```
+
+Available trace flags:
+
+1. `IPTVNATOR_TRACE_STARTUP=1`
+   Enables the broad startup trace set: BrowserWindow lifecycle, renderer
+   bridge calls, DB worker requests/events, and SQL tracing.
+2. `IPTVNATOR_TRACE_IPC=1`
+   Logs `window.electron.*` method calls crossing the preload bridge so you can
+   see whether the renderer is still reaching Electron main.
+3. `IPTVNATOR_TRACE_DB=1`
+   Logs `DatabaseWorkerClient` request dispatch, completion timing, and emitted
+   `DB_OPERATION_EVENT` payloads.
+4. `IPTVNATOR_TRACE_SQL=1`
+   Logs SQLite statements for the shared main-process connection and the DB
+   worker connection using `better-sqlite3` verbose hooks.
+5. `IPTVNATOR_TRACE_WINDOW=1`
+   Logs BrowserWindow loading, navigation, `unresponsive`, and
+   `render-process-gone` transitions.
+6. `IPTVNATOR_TRACE_RENDERER_CONSOLE=1`
+   Mirrors renderer console messages into the Electron terminal output when the
+   renderer itself is the thing getting wedged.
+
+### Electron E2E troubleshooting
+
+If a production-mode Electron or Electron E2E launch shows `ERR_FILE_NOT_FOUND`
+for hashed `chunk-*.js`, `main-*.js`, or `styles-*.css` assets:
+
+1. treat `dist/apps/web` as stale first
+2. rerun a deterministic production build, for example:
+
+```bash
+CI=1 NX_TASKS_RUNNER_DYNAMIC_OUTPUT=false pnpm nx run electron-backend:build --skip-nx-cache
+```
+
+3. verify `dist/apps/web/index.html` uses `<base href="./">` before relaunching
+   Electron in file-backed mode
+
+## Current Limitations
+
+These are intentionally still out of scope for this first cut:
+
+1. request cancellation
+2. moving network-heavy Xtream fetches off the current path
+3. migrating every remaining small SQLite IPC handler to the worker
+4. richer delete progress reporting for bulk destructive operations
+5. repo-wide Angular/Jest cleanup for the currently failing web test baseline
+
+## Extending The Worker
+
+When adding another heavy SQLite operation:
+
+1. Put SQL-heavy logic in `apps/electron-backend/src/app/database/operations/`.
+2. Add the channel name to `database-worker.types.ts`.
+3. Handle it in `database.worker.ts`.
+4. Proxy the IPC handler through `DatabaseWorkerClient`.
+5. If the renderer needs progress, emit a request-scoped `DbOperationEvent`.
+6. Reuse existing preload/service APIs where possible instead of creating a new
+   renderer-facing contract.
+7. Re-run the worker unit test and at least one Electron runtime smoke.
diff --git a/docs/architecture/stalker-epg.md b/docs/architecture/stalker-epg.md
new file mode 100644
index 0000000..26a6ab7
--- /dev/null
+++ b/docs/architecture/stalker-epg.md
@@ -0,0 +1,267 @@
+# Stalker Portal EPG Architecture
+
+This document describes the current EPG implementation for Stalker/Ministra ITV
+channels in IPTVnator.
+
+Related architecture docs:
+
+- [Stalker Portal Architecture](./stalker-portal.md)
+- [Remote Control Architecture](./remote-control.md)
+
+## Overview
+
+Stalker now uses two EPG paths with different purposes:
+
+- The active channel EPG panel uses `get_epg_info` as a bulk endpoint, fetches a
+  7-day window once per playlist session, caches programs by channel id, and
+  renders the selected channel through the shared `app-epg-list` component.
+- Channel rows no longer send preview EPG requests during initial category load.
+  They stay empty until bulk EPG has been fetched once, then derive their
+  current program and progress bar from the cached bulk map.
+- If a portal does not return usable bulk data for the selected channel, the
+  active panel falls back to `get_short_epg`.
+
+This keeps the live list cheap while giving the active panel the same
+date-navigator UI used in the M3U/Xtream flows.
+
+## Architecture
+
+```text
+┌────────────────────────────────────────────────────────────────────────────┐
+│                 StalkerLiveStreamLayoutComponent                          │
+│  libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/         │
+│                                                                            │
+│  sidebar rows                    active channel panel                      │
+│  ────────────                    ───────────────────                      │
+│  row preview map                 playChannel()                             │
+│  from bulk cache                 │                                          │
+│         │                        ▼                                          │
+│         │                  ensureBulkItvEpg(168)                           │
+│         │                  selectedItvEpgPrograms()                        │
+│         ▼                        │                                          │
+│  current program preview         ├── bulk hit → app-epg-list               │
+│  after first bulk load           └── empty/unsupported → short fallback    │
+└────────────────────────────────────────────────────────────────────────────┘
+                   │                                │
+                   ▼                                ▼
+┌────────────────────────────────────────────────────────────────────────────┐
+│                           with-stalker-epg.feature                         │
+│                                                                            │
+│  bulkItvEpgByChannel: Record<string, EpgProgram[]>                         │
+│  bulkItvEpgPlaylistId / bulkItvEpgPeriodHours / bulkItvEpgLoaded           │
+│  ensureBulkItvEpg()  selectedItvEpgPrograms()                              │
+└────────────────────────────────────────────────────────────────────────────┘
+                   │                                │
+                   ▼                                ▼
+┌────────────────────────────────────────────────────────────────────────────┐
+│                            Stalker Portal API                              │
+│                                                                            │
+│  action=create_link      action=get_short_epg      action=get_epg_info     │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+## Stalker EPG API
+
+### `get_short_epg` (active-panel fallback)
+
+**Request**
+
+```text
+GET load.php?type=itv&action=get_short_epg&ch_id={channel_id}&size={n}&JsHttpRequest=1-xml
+```
+
+**Current usage**
+
+- Active panel fallback path: `size=10`
+
+**Response**
+
+```json
+{
+  "js": {
+    "data": [
+      {
+        "id": "123",
+        "ch_id": "45",
+        "name": "Program Title",
+        "descr": "Program description",
+        "time": "2025-01-15 14:00:00",
+        "time_to": "2025-01-15 14:30:00",
+        "duration": "1800",
+        "start_timestamp": "1736949600",
+        "stop_timestamp": "1736951400"
+      }
+    ]
+  }
+}
+```
+
+**Notes**
+
+- The response is normalized into shared `EpgItem[]`
+- The list-preview path uses this directly
+- The active-panel fallback maps the result into controlled `EpgProgram[]`
+
+### `get_epg_info` (bulk active-panel source)
+
+**Request**
+
+```text
+GET load.php?type=itv&action=get_epg_info&period={hours}&JsHttpRequest=1-xml
+```
+
+**Current usage**
+
+- Fetched once with `period=168`
+- Scoped to the current playlist session
+- Not refetched on active-channel change
+
+**Expected response**
+
+```json
+{
+  "js": {
+    "data": {
+      "45": [
+        {
+          "id": "1",
+          "name": "Program Title",
+          "descr": "Program description",
+          "time": "2025-01-15 14:00:00",
+          "time_to": "2025-01-15 16:00:00",
+          "start_timestamp": "1736949600",
+          "stop_timestamp": "1736956800"
+        }
+      ]
+    }
+  }
+}
+```
+
+**Notes**
+
+- The store supports the channel-keyed bulk shape above as the primary contract
+- For weak or mock-style portals that still return array-style data, the store
+  treats the result as compatibility input and leaves the short-EPG fallback path
+  available
+
+## Data Mapping
+
+### Fallback data (`get_short_epg`) → `EpgItem`
+
+The short EPG path now exists only for the active-panel fallback flow.
+
+Key mapped fields:
+
+| Stalker field | `EpgItem` field |
+| --- | --- |
+| `id` | `id` |
+| `ch_id` | `channel_id` |
+| `name` | `title` |
+| `descr` | `description` |
+| `time` | `start` |
+| `time_to` | `end`, `stop` |
+| `start_timestamp` | `start_timestamp` |
+| `stop_timestamp` | `stop_timestamp` |
+
+### Active panel data (`get_epg_info` / fallback) → `EpgProgram`
+
+The active panel uses controlled `EpgProgram[]` because `app-epg-list` filters
+and groups by day.
+
+Normalization rules:
+
+- `start` / `end` are converted to ISO strings
+- `startTimestamp` / `stopTimestamp` are always populated
+- Programs are sorted by start time per channel
+- `selectedItvId` is used to project cached bulk data to the active channel
+
+## Implementation Details
+
+### Key files
+
+| File | Purpose |
+| --- | --- |
+| `libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.ts` | bulk cache and fallback handling |
+| `libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts` | active-channel EPG loading and controlled `app-epg-list` wiring |
+| `libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html` | active panel template |
+| `libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.ts` | row preview loading |
+| `libs/ui/shared-portals/src/lib/epg-list/epg-list.component.ts` | shared controlled EPG list with date navigator |
+
+### Store API
+
+The Stalker EPG feature exposes one bulk method plus the short-EPG fallback:
+
+```ts
+fetchChannelEpg(channelId: number | string, size?: number): Promise<EpgItem[]>
+ensureBulkItvEpg(periodHours = 168): Promise<void>
+```
+
+It also exposes:
+
+- `selectedItvEpgPrograms`
+- `clearBulkItvEpgCache()`
+
+Bulk state is keyed by playlist so cached results do not leak between Stalker
+playlists.
+
+### Active panel flow
+
+1. User activates a live channel
+2. The component ensures playback link resolution as before
+3. The component calls `ensureBulkItvEpg(168)` on first use for the playlist
+4. `selectedItvEpgPrograms()` feeds `app-epg-list`
+5. If the selected channel has no bulk programs, the component falls back to
+   `get_short_epg`
+
+The active panel no longer uses local EPG pagination or a "Load more" button.
+
+### Channel row preview flow
+
+Before the first live-channel playback, channel rows do not fetch EPG at all.
+
+After bulk EPG has been loaded once for the playlist, visible row previews are
+derived locally from `bulkItvEpgByChannel`:
+
+- pick the current program for the channel, if one exists
+- compute progress from the cached program timestamps
+- leave the row in its existing placeholder state when no current program exists
+
+## Cache Lifecycle
+
+- Bulk EPG is fetched once per playlist session
+- Channel switches only read from `bulkItvEpgByChannel`
+- The cache is cleared when the Stalker playlist changes
+- This implementation does not add TTL-based refresh or background polling
+
+## Authentication
+
+EPG requests follow the standard Stalker request path:
+
+| Portal type | Auth path |
+| --- | --- |
+| Full Stalker portal | `StalkerSessionService.makeAuthenticatedRequest()` |
+| Simple Stalker portal | generic IPC request path via Electron |
+
+No EPG-specific backend transport was needed; the Electron Stalker request
+handler forwards portal params directly.
+
+## Fallback Behavior
+
+Some providers do not implement `get_epg_info` consistently. The active panel
+therefore falls back to `get_short_epg` when:
+
+- the bulk request fails
+- the bulk response is empty
+- the selected channel has no programs in the cached bulk map
+
+This keeps the panel usable even on limited portals, while still taking
+advantage of the richer bulk API when it is available. Row previews do not
+fallback to per-channel requests in this mode; they remain empty until bulk EPG
+is available.
+
+## Future Enhancements
+
+- add cache refresh / invalidation for long-running live sessions
+- add Stalker catch-up support to `app-epg-list` once the playback flow exists
+- optionally add category-level prefetch timing metrics for bulk EPG
diff --git a/docs/architecture/stalker-mock-server.md b/docs/architecture/stalker-mock-server.md
new file mode 100644
index 0000000..1205f76
--- /dev/null
+++ b/docs/architecture/stalker-mock-server.md
@@ -0,0 +1,280 @@
+# Stalker Mock Server Architecture
+
+This document describes the design decisions, data flow, and extension points of the `stalker-mock-server` development tool.
+
+## Related Docs
+
+- [Stalker Portal Architecture](./stalker-portal.md)
+- [Stalker EPG Architecture](./stalker-epg.md)
+
+## Purpose
+
+The mock server enables:
+
+1. **Local development** without access to a real Stalker portal
+2. **Playwright E2E testing** with predictable, deterministic data
+3. **Scenario-based testing** via predefined MAC addresses that map to specific data shapes
+
+## Key Design Decisions
+
+### Seeded Determinism (Not Per-Request Random)
+
+Per-request random data would break navigation: if category IDs change between calls, content fetched under a category ID won't match the category list. Instead:
+
+- Data is generated **once per MAC address** on first request, then cached in memory.
+- `@faker-js/faker` is seeded with a numeric value derived from the MAC address before generation.
+- Same MAC → identical data on every server restart.
+- Restart the server to reshuffle all data.
+
+### MAC Address as Identity
+
+Stalker portals use MAC address as the primary credential. The mock server follows the same model:
+
+- Each unique MAC gets its own isolated dataset.
+- Predefined MACs map to specific `ScenarioConfig` shapes (see `src/app/scenarios.ts`).
+- Unknown MACs use the sum of their byte values as a seed, producing unique but deterministic data.
+
+### In-Memory Only
+
+No files or databases are written. All state (generated content + favorites) lives in process memory and resets on server restart. This is intentional — tests should not share state across runs.
+
+## Data Generation Pipeline
+
+```
+faker.seed(macToNumber(mac))
+│
+├── generateCategories('itv', N)  → itvCategories[]
+│     └── generateChannels()      → channels Map<categoryId, channel[]>
+│           └── generateEpg()     → epg Map<channelId, program[]>
+│
+├── generateCategories('vod', N)  → vodCategories[]
+│     └── generateVodItems()      → vod Map<categoryId, item[]>
+│           ├── normal VOD items
+│           ├── is_series=1 items (fraction, Ministra flow)
+│           └── embedded series[] items (fraction)
+│
+└── generateCategories('series', N) → seriesCategories[]
+      └── generateSeriesItems()    → series Map<categoryId, item[]>
+            └── generateSeasons()  → seasons Map<seriesItemId, season[]>
+```
+
+## Response Shapes
+
+All responses follow the Stalker `portal.php` envelope:
+
+```json
+{ "js": <action-specific payload> }
+```
+
+### `get_categories`
+
+```json
+{
+  "js": [
+    { "id": "2001", "title": "Action", "alias": "action" },
+    ...
+  ]
+}
+```
+
+### `get_ordered_list` (content)
+
+```json
+{
+  "js": {
+    "data": [
+      {
+        "id": "20001",
+        "name": "...",
+        "cmd": "ffrt4://vod/20001/index.m3u8",
+        "screenshot_uri": "https://picsum.photos/seed/vod-20001/300/200",
+        "cover": "https://picsum.photos/seed/vod-cover-20001/300/450",
+        "description": "...",
+        "actors": "...",
+        "director": "...",
+        "year": "2019",
+        "rating_imdb": "7.3",
+        "category_id": "2001",
+        "is_series": 0,
+        "has_files": 1
+      }
+    ],
+    "total_items": 40,
+    "max_page_items": 14,
+    "cur_page": 1,
+    "total_pages": 3
+  }
+}
+```
+
+### `get_ordered_list` (seasons — when `movie_id` is present)
+
+```json
+{
+  "js": [
+    {
+      "id": "30001-s1",
+      "name": "Season 1",
+      "cmd": "ffrt4://series/30001/season/1",
+      "series": ["30001-s1-e1", "30001-s1-e2", ...],
+      "screenshot_uri": "https://picsum.photos/seed/30001-s1/300/200",
+      "director": "...",
+      "actors": "...",
+      "year": "2021",
+      "rating_imdb": "8.1"
+    }
+  ]
+}
+```
+
+### `create_link`
+
+```json
+{
+  "js": {
+    "cmd": "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
+    "streamer_id": "1",
+    "load": "",
+    "error": ""
+  }
+}
+```
+
+The stream URL is selected from a pool of 4 real public HLS test streams. The choice is deterministic based on the `cmd` field's character sum, so the same item always returns the same stream.
+
+### `get_short_epg`
+
+```json
+{
+  "js": {
+    "data": [
+      {
+        "id": "1",
+        "name": "Channel Name: Program Title",
+        "start": "2026-02-21T10:00:00.000Z",
+        "stop": "2026-02-21T12:00:00.000Z",
+        "start_timestamp": 1740128400,
+        "stop_timestamp": 1740135600,
+        "descr": "...",
+        "category": "News"
+      }
+    ]
+  }
+}
+```
+
+`get_short_epg` returns the current program and upcoming items from the
+generated schedule, limited by the requested `size`.
+
+### `get_epg_info`
+
+```json
+{
+  "js": {
+    "data": {
+      "10000": [
+        {
+          "id": "1",
+          "name": "Channel Name: Program Title",
+          "start": "2026-02-21T10:00:00.000Z",
+          "stop": "2026-02-21T12:00:00.000Z",
+          "start_timestamp": 1740128400,
+          "stop_timestamp": 1740135600,
+          "descr": "...",
+          "category": "News"
+        }
+      ]
+    }
+  }
+}
+```
+
+`get_epg_info` returns bulk EPG keyed by channel id and filters the generated
+7-day schedule from the current UTC day start through `now + period`.
+
+EPG programs are generated as 2-hour slots across 7 days for each channel,
+starting at the current UTC day boundary.
+
+## Scenarios
+
+Scenarios are defined in `src/app/scenarios.ts`. Each scenario is a `ScenarioConfig`:
+
+```typescript
+interface ScenarioConfig {
+  name: string;
+  description: string;
+  seed: number;
+  categoryCount: { itv: number; vod: number; series: number };
+  itemsPerCategory: number;
+  seasonsPerSeries: number;
+  episodesPerSeason: number;
+  isSeriesFraction: number;      // 0–1: fraction of VOD with is_series=1
+  embeddedSeriesFraction: number; // 0–1: fraction of VOD with embedded series[]
+}
+```
+
+### Adding a New Scenario
+
+1. Add an entry to the `SCENARIOS` map in `src/app/scenarios.ts`.
+2. Use any unique MAC address as the key (lowercase, colon-separated).
+3. Document it in `README.md` and this file.
+
+## Favorites
+
+Favorites are stored in a `Map<mac, Set<itemId>>` in `src/app/data-store.ts`. They persist for the lifetime of the server process and are shared across all requests for the same MAC.
+
+Call `POST /reset` to clear all favorites (and regenerated data) between test runs.
+
+## Playwright Integration
+
+`apps/web-e2e/playwright.config.ts` registers the mock server as a second `webServer` entry:
+
+```typescript
+webServer: [
+  {
+    command: 'pnpm nx run web:serve',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+  },
+  {
+    command: 'pnpm nx run stalker-mock-server:serve',
+    url: 'http://localhost:3210/health',
+    reuseExistingServer: !process.env['CI'],
+  },
+]
+```
+
+Playwright waits for both servers to be healthy before starting tests. If either is already running (e.g. in local dev), it reuses the existing instance.
+
+### Test Isolation
+
+Each stalker e2e test calls `POST http://localhost:3210/reset` in `beforeEach` to clear in-memory state. This ensures tests don't bleed favorites or other mutable state into each other.
+
+The generated content (categories, items) is **not** cleared on reset — it's deterministic and doesn't need to be. Only in-memory favorites are cleared.
+
+### Recommended Test Structure
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+const MOCK_URL = 'http://localhost:3210/portal.php';
+const MOCK_MAC = '00:1A:79:00:00:01'; // default scenario
+
+test.beforeEach(async ({ request }) => {
+  await request.post('http://localhost:3210/reset');
+});
+
+test('browse VOD categories', async ({ page }) => {
+  // Add portal via UI or programmatically via IndexedDB
+  // Navigate to portal
+  // Assert category list matches expected count (8 for default scenario)
+});
+```
+
+## Extension Points
+
+- **New content types**: Add a new generator function in `data-generator.ts` and a new handler in `handlers/`.
+- **New scenarios**: Add to `SCENARIOS` in `scenarios.ts`.
+- **Stateful session tokens**: `handshake.handler.ts` generates a token from the MAC — extend this to track token expiry for testing re-auth flows.
+- **Error simulation**: Add a special MAC or query param to trigger error responses (e.g. 401, 500) for testing error handling in the Stalker store.
+- **Slow responses**: Add a `MOCK_DELAY_MS` env var and apply it in middleware for testing loading states.
diff --git a/docs/architecture/stalker-portal.md b/docs/architecture/stalker-portal.md
new file mode 100644
index 0000000..0ca3258
--- /dev/null
+++ b/docs/architecture/stalker-portal.md
@@ -0,0 +1,233 @@
+# Stalker Portal Architecture
+
+This document describes the Stalker portal implementation in IPTVnator and where each feature is integrated.
+
+## Related Docs
+
+- [Stalker Portal EPG Architecture](./stalker-epg.md)
+- [Playlist Backup/Restore Architecture](./playlist-backup-restore.md)
+- [Portal Detail Navigation](./portal-detail-navigation.md)
+- [Embedded Inline Playback](./embedded-inline-playback.md)
+- [Remote Control Architecture](./remote-control.md)
+- [Download Manager](./download-manager.md)
+- [Category Management](./category-management.md)
+- [Stalker Store API Baseline](./stalker-store-api-baseline.md)
+
+## Scope
+
+Stalker support covers:
+
+- Live TV (`itv`)
+- VOD (`vod`)
+- Series (`series`)
+- VOD-as-series flows (`is_series=1` and embedded `series[]`)
+- Favorites and recently viewed collections
+- Search
+- External player playback (shared Xtream player infrastructure)
+- Remote control for live ITV navigation
+
+## Routing Structure
+
+Primary route tree lives in `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-feature.routes.ts`.
+
+- `/stalker/:id/vod`
+- `/stalker/:id/series`
+- `/stalker/:id/itv`
+- `/stalker/:id/favorites`
+- `/stalker/:id/recent`
+- `/stalker/:id/search`
+- `/stalker/:id/downloads` (shared downloads module from Xtream UI)
+
+## Runtime Architecture
+
+1. Angular Stalker screens call methods/resources in `StalkerStore`.
+2. `StalkerStore` builds request params based on selected content type and current view state.
+3. Requests go through `DataService.sendIpcEvent(STALKER_REQUEST, ...)` or `StalkerSessionService` (full portal auth).
+4. Electron main process handles `STALKER_REQUEST` in `/Users/4gray/Code/iptvnator/apps/electron-backend/src/app/events/stalker.events.ts`.
+5. Axios calls Stalker `load.php` API with required headers/cookies and returns normalized payloads to renderer.
+
+## Main UI Components
+
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-main-container.component.ts`
+    - Category + content layout for `vod` and `series`
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts`
+    - ITV live playback, channel navigation, EPG panel integration
+- `/Users/4gray/Code/iptvnator/libs/ui/components/src/lib/stalker-series-view/stalker-series-view.component.ts`
+    - Season/episode UI for all Stalker series modes
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-favorites/stalker-favorites.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/recently-viewed/recently-viewed.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.ts`
+
+## Store and Data Flow
+
+Stalker store is now feature-composed:
+
+- Facade: `/Users/4gray/Code/iptvnator/libs/portal/stalker/data-access/src/lib/stalker.store.ts`
+- Feature slices: `/Users/4gray/Code/iptvnator/libs/portal/stalker/data-access/src/lib/stores/features/*`
+- Shared helpers: `/Users/4gray/Code/iptvnator/libs/portal/stalker/data-access/src/lib/*`
+
+Important store responsibilities:
+
+- Selected content/category/item state
+- Category and paginated content resources
+- ITV channel list + pagination
+- Regular series seasons resource
+- VOD-series (`is_series=1`) seasons + episodes resources
+- Playback link creation (`create_link` flow)
+- Favorites and recently viewed persistence helpers
+
+Internal structure to preserve:
+
+- `stalker.store.ts` stays as the thin facade that composes feature slices.
+- Cross-slice contracts live in `stores/stalker-store.contracts.ts` so
+  feature dependencies are declared instead of repeated `unknown` casts.
+- Request execution is centralized in `stores/utils/stalker-request.utils.ts`
+  for both authenticated full-portal calls and simple IPC-backed requests.
+- Playback link resolution and Stalker collection persistence live in
+  dedicated `stores/utils/` helpers so player/favorites/recent slices stay
+  focused on orchestration.
+- Category/content resources stay internal to the store slices. Feature
+  consumers should read `getCategoryResource()` and `getPaginatedContent()`,
+  which now always return arrays, and pair them with
+  `isCategoryResourceFailed()` / `isPaginatedContentFailed()` for explicit
+  error handling.
+
+Failure-handling rule:
+
+- Failed category or content requests must degrade into empty/error UI state,
+  not `undefined` collections or renderer exceptions. The workspace Stalker
+  context panel and live layout rely on this guarantee.
+
+## VOD/Series Modes
+
+Stalker has multiple real-world data shapes. The current implementation supports all three:
+
+1. Regular Series (`/series`):
+
+- Seasons come from API resource (`serialSeasonsResource`).
+- Episodes are derived from season payload.
+
+2. VOD with Embedded `series[]`:
+
+- Item is opened under VOD, but already contains episodes.
+- `StalkerSeriesViewComponent` creates a pseudo-season and renders episodes directly.
+
+3. VOD with `is_series=1` (Ministra plugin behavior):
+
+- Treated as series flow from VOD context.
+- Seasons are fetched lazily.
+- Episodes are fetched on season select.
+- Uses unique generated tracking IDs for episode playback position compatibility.
+
+Core decision logic and normalization are centralized in:
+
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/data-access/src/lib/models/*.ts`
+
+## Favorites and Recently Viewed
+
+Current implementation is shared via Stalker-specific helpers:
+
+- `createPortalCollectionResource(...)` generic collection loader
+- `createPortalFavoritesResource(...)` favorites wrapper
+- `createStalkerDetailViewState(...)` unified "open detail" decision
+- `toggleStalkerVodFavorite(...)` shared add/remove behavior
+- `normalizeStalkerEntityId(...)` and `normalizeStalkerEntityIdAsNumber(...)` for stable ID matching
+- `matchesFavoriteById(...)` for cross-shape favorite matching
+
+Where this is used:
+
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-favorites/stalker-favorites.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/recently-viewed/recently-viewed.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.ts`
+- `/Users/4gray/Code/iptvnator/libs/ui/components/src/lib/stalker-favorites-button/stalker-favorites-button.component.ts`
+
+Navigation rule to preserve:
+
+- Stalker favorites, recently viewed, and search stay in their current screen and open inline detail state.
+- They should not redirect into a canonical content/category/item route because Stalker detail rendering is currently store-state/inline driven, not route driven.
+- VOD-backed series favorites can be displayed in series collections, but detail
+  opening must preserve their VOD origin: `is_series=1` favorites set the
+  selected content type to `vod` so the lazy Ministra season/episode resources
+  run, and embedded `series[]` favorites render through the embedded VOD-series
+  branch.
+- See [Portal Detail Navigation](./portal-detail-navigation.md).
+
+## Backup and Restore
+
+Versioned playlist backups include Stalker connection metadata plus playlist-
+scoped favorites/recent snapshots.
+
+Exported fields:
+
+- `portalUrl`
+- `macAddress`
+- `isFullStalkerPortal`
+- optional `username` / `password`
+- optional request headers (`userAgent`, `referrer`, `origin`)
+- full-portal serial/device/signature fields when present
+- favorites and recently viewed collections
+
+Excluded fields:
+
+- `stalkerToken`
+- `stalkerAccountInfo`
+- playback positions in backup v1
+
+Import rule:
+
+- backups restore the saved portal definition and replace the stored
+  favorites/recent state for the matched playlist
+- a fresh handshake must happen after import for full-portal sessions; imported
+  backups never trust a serialized token
+
+## Remote Control Integration
+
+Stalker live remote control is implemented in:
+
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts`
+
+Supported today:
+
+- Channel up/down
+- Numeric channel selection (list-position based)
+- Status publish for remote UI (portal/channel/current program)
+
+See full backend and web-remote flow in [Remote Control Architecture](./remote-control.md).
+
+## EPG Integration
+
+Stalker ITV now splits EPG usage:
+
+- active channel panel: bulk `get_epg_info` cached once per playlist and rendered
+  through shared `app-epg-list`
+- channel row preview: no pre-playback network requests; previews are derived
+  from cached bulk EPG only after the first active-channel fetch succeeds
+- active panel fallback: `get_short_epg` when bulk EPG is missing or unsupported
+
+Full details are documented in [Stalker Portal EPG Architecture](./stalker-epg.md).
+
+## Shared/Reusable Infrastructure
+
+Stalker reuses some Xtream UI infrastructure deliberately:
+
+- Category content rendering route uses Xtream category content component
+- Season container for episodes uses shared Xtream season UI component
+- Playback position handling for series episodes reuses Xtream store position mechanisms
+- Downloads route reuses shared downloads feature
+
+This reduces duplicate UI logic across portal types and keeps compatibility behavior aligned.
+
+## Regression Coverage
+
+Focused regression tests for Stalker VOD mode branching live in:
+
+- `/Users/4gray/Code/iptvnator/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.spec.ts`
+
+Covered scenarios include:
+
+- Embedded `series[]` opens series view state
+- `is_series=1` opens lazy series state
+- VOD-backed series favorites keep VOD-series loading semantics when opened from
+  favorites/global favorites
+- Favorite toggle helper path invokes the expected add/remove flow
diff --git a/docs/architecture/stalker-store-api-baseline.md b/docs/architecture/stalker-store-api-baseline.md
new file mode 100644
index 0000000..b29f957
--- /dev/null
+++ b/docs/architecture/stalker-store-api-baseline.md
@@ -0,0 +1,133 @@
+# Stalker Store API Baseline
+
+This is the compatibility baseline for refactoring `libs/portal/stalker/data-access/src/lib/stalker.store.ts`.
+
+Goal: keep this public surface stable while splitting to feature stores.
+
+## Source of Truth
+
+- Store implementation: `libs/portal/stalker/data-access/src/lib/stalker.store.ts`
+- Baseline created on current branch state before feature-store extraction.
+
+## Public State Signals
+
+Direct signal properties currently exposed by `signalStore`:
+
+- `selectedContentType: 'vod' | 'itv' | 'series'`
+- `selectedCategoryId: string | null | undefined`
+- `selectedVodId: string | undefined`
+- `selectedSerialId: string | undefined`
+- `selectedItvId: string | undefined`
+- `limit: number`
+- `page: number`
+- `searchPhrase: string`
+- `currentPlaylist: PlaylistMeta | undefined`
+- `totalCount: number`
+- `selectedItem: StalkerVodSource | null | undefined`
+- `vodCategories: StalkerCategoryItem[]`
+- `seriesCategories: StalkerCategoryItem[]`
+- `itvCategories: StalkerCategoryItem[]`
+- `hasMoreChannels: boolean`
+- `itvChannels: StalkerItvChannel[]`
+- `vodSeriesSeasons: StalkerVodSeriesSeason[]`
+- `vodSeriesEpisodes: StalkerVodSeriesEpisode[]`
+- `selectedVodSeriesSeasonId: string | undefined`
+
+## Public Computed Selectors
+
+- `getTotalPages: number`
+- `getPaginatedContent: StalkerContentItem[]`
+- `isPaginatedContentLoading: boolean`
+- `isPaginatedContentFailed: unknown`
+- `getSerialSeasonsResource: StalkerSeason[]`
+- `isSerialSeasonsLoading: boolean`
+- `getVodSeriesSeasonsResource: StalkerVodSeriesSeason[]`
+- `isVodSeriesSeasonsLoading: boolean`
+- `getCategoryResource: StalkerCategoryItem[]`
+- `isCategoryResourceLoading: boolean`
+- `isCategoryResourceFailed: unknown`
+- `getSelectedCategoryName: string`
+
+## Exposed Resources/Props
+
+These are currently reachable on the store object and used internally by computed selectors:
+
+- `getCategoryResource` (computed selector with stable array output)
+- `categoryResource` (internal resource)
+- `getContentResource` (resource)
+- `serialSeasonsResource` (resource)
+- `vodSeriesSeasonsResource` (resource)
+- `makeStalkerRequest(...)`
+
+During refactor:
+
+- Keep compatibility for external callers that may read these directly.
+- If moved/renamed internally, provide facade aliases.
+
+## Public Methods (Compatibility Contract)
+
+- `setSelectedContentType(type: 'vod' | 'itv' | 'series'): void`
+- `setSelectedCategory(id: string | number | null): void`
+- `setSelectedSerialId(id: string): void`
+- `setSelectedVodId(id: string): void`
+- `setSelectedItvId(id: string): void`
+- `setLimit(limit: number): void`
+- `setPage(page: number): void`
+- `setCurrentPlaylist(playlist: PlaylistMeta | undefined): Promise<void>`
+- `setSelectedItem(selectedItem: StalkerVodSource | null | undefined): void`
+- `clearSelectedItem(): void`
+- `setCategories(type: 'vod' | 'series' | 'itv', categories: StalkerCategoryItem[]): void`
+- `resetCategories(): void`
+- `setItvChannels(channels: StalkerItvChannel[]): void`
+- `setSearchPhrase(phrase: string): void`
+- `fetchVodSeriesEpisodes(videoId: string, seasonId: string): Promise<StalkerVodSeriesEpisode[]>`
+- `getSelectedCategory(): { id: string | number; name: string; type: 'vod' | 'itv' | 'series' }`
+  Backed by `withComputed` for compatibility, not by `withMethods`.
+- `fetchLinkToPlay(portalUrl: string, macAddress: string, cmd: string, series?: number): Promise<string>`
+- `getExpireDate(): Promise<string>`
+- `addToFavorites(item: any, onDone?: () => void): void`
+- `removeFromFavorites(favoriteId: string, onDone?: () => void): void`
+- `fetchMovieFileId(movieId: string): Promise<string | null>`
+- `createLinkToPlayVod(cmd?: string, title?: string, thumbnail?: string, episodeNum?: number, episodeId?: number, startTime?: number): Promise<void>`
+- `addToRecentlyViewed(item: any): void`
+- `removeFromRecentlyViewed(itemId: number, onComplete?: () => void): void`
+- `fetchChannelEpg(channelId: number | string, size?: number): Promise<EpgItem[]>`
+
+## Current Consumers (Observed)
+
+Top observed store API usage in app code:
+
+- `currentPlaylist` (16 references)
+- `setSelectedContentType` (9)
+- `selectedItem` (9)
+- `setSelectedItem` (7)
+- `setSelectedCategory` (6)
+- `createLinkToPlayVod` (6)
+- `removeFromFavorites` (5)
+- `setPage` (4)
+- `addToFavorites` (4)
+- `fetchChannelEpg` (3)
+- plus lower-frequency calls for paging/resources/series/recent.
+
+Consumer directories sampled:
+
+- `libs/portal/stalker/**`
+- `libs/portal/xtream/feature/**`
+- `libs/portal/catalog/feature/**`
+- `libs/ui/components/**`
+
+## Invariants to Preserve During Refactor
+
+- Selection IDs (`selectedVodId`, `selectedSerialId`, `selectedItvId`) are synchronized in `setSelectedItem`.
+- `setSelectedCategory(...)` resets `page` to `0`.
+- `getPaginatedContent()` and `getCategoryResource()` always return arrays,
+  even when the underlying request fails.
+- Request failures must surface through `isPaginatedContentFailed()` and
+  `isCategoryResourceFailed()` rather than resource reads that throw.
+- `createLinkToPlayVod(...)` continues to:
+    - support episode playback metadata
+    - append recently viewed
+    - preserve external player payload shape
+- Full-portal auth path continues through `StalkerSessionService`.
+- Non-auth/simple path continues through `DataService.sendIpcEvent(STALKER_REQUEST, ...)`.
+- Resource-driven loading signals preserve existing names.
diff --git a/docs/architecture/workspace-dashboard.md b/docs/architecture/workspace-dashboard.md
new file mode 100644
index 0000000..6a5a471
--- /dev/null
+++ b/docs/architecture/workspace-dashboard.md
@@ -0,0 +1,167 @@
+# Workspace Dashboard
+
+This document records the current dashboard implementation inside the workspace
+shell.
+
+Related:
+
+- [Workspace Shell](./workspace-shell.md)
+
+## Summary
+
+- The dashboard is the default `/workspace` landing page.
+- It is a **rail-based** content surface (Netflix / Apple TV pattern), not a
+  customizable widget grid.
+- Layout is static and curated — there is no edit mode, drag-drop, size
+  stepper, show/hide toggle, or persisted layout. Rails auto-hide when empty.
+- First-run users see the shared welcome empty-state with a single primary
+  CTA to add their first playlist.
+
+Core implementation:
+
+1. `libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts`
+   — the page-level facade.
+2. `libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.ts`
+   — the reusable horizontal rail.
+3. `libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.ts`
+   — data aggregation (recent items, favorites, playlist stats). Shared across
+   rails.
+4. `libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.ts`
+   — reused welcome state with the primary "Add your first playlist" CTA.
+
+## Page Structure
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  Hero — Continue Watching (most recent item)                        │
+├─────────────────────────────────────────────────────────────────────┤
+│  Recently Watched · See all →                                       │
+│  [poster][poster][poster][poster] →→                                │
+├─────────────────────────────────────────────────────────────────────┤
+│  Global Favorites · See all →                                       │
+│  [poster][poster][poster] →→                                        │
+├─────────────────────────────────────────────────────────────────────┤
+│  Recently Used Sources · See all →                                  │
+│  [tile][tile][tile][tile] →→                                        │
+├─────────────────────────────────────────────────────────────────────┤
+│  Recently Added on Xtream (aggregated across providers)             │
+│  [poster][poster][poster] →→                                        │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+Render rules:
+
+1. `dashboardReady() === false` → render the page-level skeleton rails/hero.
+   The first-load gate waits for playlist metadata plus the first global
+   recent/global favorites reloads and, when Xtream playlists exist, the first
+   Xtream recently-added reload.
+2. `hasPlaylists() === false` → render `<app-empty-state type="welcome">`
+   full-bleed. All rails and the hero are skipped.
+3. `hero()` = `globalRecentItems()[0]`. If present, render the hero panel.
+4. Each rail is emitted via `@if (cards.length > 0)`. Empty rails are hidden
+   — there is no "empty widget" placeholder.
+5. The continue-watching hero prefers a stored Xtream `backdrop_url`; when it
+   is missing the UI falls back to a blurred poster treatment instead of
+   showing a flat panel.
+
+## Rail Contract
+
+`DashboardRailComponent` is purely presentational:
+
+1. Inputs: `label`, `items: DashboardRailCard[]`, optional `seeAllLink`,
+   optional `aspectRatio` (default `'2 / 3'`), optional `testId`.
+2. Behavior: horizontal flex track with `scroll-snap-type: x mandatory`.
+3. Chevron buttons fade in on hover (desktop only via `@media (hover: none)`).
+4. Cards are keyboard-focusable router links; `scroll-snap-align: start`
+   means arrow-key nav lands on card boundaries.
+5. Image handling: `loading="lazy"`, `decoding="async"`, fallback icon tile
+   when `imageUrl` is missing or `error` fires.
+6. Dashboard hero, rail containers, rail cards, and "Manage all" links expose
+   stable `data-test-id` hooks. Treat these as the supported Electron E2E
+   selector surface; do not target internal CSS class names.
+
+## Data Flow
+
+1. `WorkspaceDashboardRailsComponent` injects `DashboardDataService`.
+2. It derives five signals via `computed()`:
+    1. `hero` — first item of `globalRecentItems()`.
+    2. `recentlyWatchedCards` — maps `globalRecentItems()` to rail cards.
+    3. `xtreamRecentlyAddedCards` — maps `xtreamRecentlyAddedItems()` to rail
+       cards. Aggregates newly added VOD and series across *all* Xtream
+       playlists via `DashboardDataService.reloadXtreamRecentlyAddedItems()`,
+       which calls `getGlobalRecentlyAdded('all', limit, 'xtream')` with the
+       DB-level `playlists.type = 'xtream'` filter. The rail is Electron-only
+       (PWA returns `[]`) and auto-hides when empty, so users without Xtream
+       playlists never see it. Cards carry a `playlist_name · type` subtitle
+       so users can tell which provider each item came from. Driven by an
+       effect that re-runs whenever the Xtream playlist count changes.
+    4. `favoriteCards` — maps `globalFavoriteItems()` to rail cards.
+    5. `sourceCards` — maps `recentPlaylists()` to rail cards. `recentPlaylists()`
+       ranks M3U, Xtream, and Stalker sources by their latest recent activity
+       from `globalRecentItems()`, then falls back to playlist
+       `updateDate` / `importDate` for sources that have never been used.
+3. `DashboardDataService` is passive on construction. The dashboard feature
+   owns the initial reloads for recent items, favorites, and Xtream recently
+   added rows on page entry.
+4. No `Layout` state, no localStorage keys, no migrations.
+5. Navigation state + deep-link targets come from the existing
+   `getRecentItemLink()` / `getGlobalFavoriteLink()` / `getPlaylistLink()`
+   helpers on `DashboardDataService` and reuse the workspace navigation
+   helpers in `@iptvnator/portal/shared/util`.
+6. Xtream VOD and series detail pages opportunistically backfill
+   `content.backdrop_url` when metadata exposes a backdrop, but that write
+   must not refresh recently viewed ordering by itself.
+7. The dashboard feature triggers a fresh reload of DB-backed recent/favorite
+   rows on dashboard entry so newly backfilled backdrop data is visible as soon
+   as the user returns from a detail page.
+
+## Empty State
+
+The welcome state is rendered via the existing
+`EmptyStateComponent` (`type="welcome"`) from
+`libs/playlist/shared/ui`:
+
+1. Illustration + headline + description from the existing M3U welcome
+   strings (`HOME.PLAYLISTS.WELCOME_*`).
+2. Primary button emits `addPlaylistClicked`. The dashboard page wires this
+   to `WORKSPACE_SHELL_ACTIONS.openAddPlaylistDialog()`.
+3. Feature chips (M3U / Xtream / Stalker) are provided by the component.
+
+## UX Rules
+
+1. Rails represent content the user is likely to resume, not provider
+   internals. Never surface raw API objects.
+2. Each rail must auto-hide when its data source is empty.
+3. Image assets must degrade to a typed icon fallback — never show broken
+   images or empty tiles.
+4. The page must never show "No widgets" style text. If there is no content
+   and no playlists, render the welcome state; otherwise render whatever
+   rails have data.
+5. Navigation from a rail card must deep-link into the appropriate workspace
+   route without switching the active playlist in the header switcher.
+6. `Recently Used Sources` reflects recent source usage across all provider
+   types, not just recent imports.
+
+## Adding Or Changing Rails
+
+Current workflow:
+
+1. Add a new `computed()` signal for the card list in
+   `WorkspaceDashboardRailsComponent`, mapping your source data to
+   `DashboardRailCard`.
+2. Drop a `<lib-dashboard-rail>` in the template, gated by
+   `@if (cards.length > 0)`.
+3. If the data source is new, extend `DashboardDataService` rather than
+   reaching into DB services directly from the component.
+4. Provide a `seeAllLink` only if there is a dedicated "manage all" route
+   for that content type.
+
+## Deferred Work
+
+Intentionally out of scope:
+
+1. Customizable layout (drag/drop, resize, show/hide toggles, layout
+   persistence). Removed in favor of a curated, opinionated order.
+2. Freeform widget grid with collision management.
+3. External data rails such as RSS, sports, or news adapters.
+4. Per-user A/B variants of rail ordering.
diff --git a/docs/architecture/workspace-shell.md b/docs/architecture/workspace-shell.md
new file mode 100644
index 0000000..a6eec9f
--- /dev/null
+++ b/docs/architecture/workspace-shell.md
@@ -0,0 +1,141 @@
+# Workspace Shell
+
+This document records the current workspace-first shell contract. It is the
+stable replacement for the older UI refactor summary.
+
+Related:
+
+- [Workspace Dashboard](./workspace-dashboard.md)
+
+## Summary
+
+- `/workspace` is the primary app surface.
+- `WorkspaceShellComponent` owns the persistent frame: rail, header, optional
+  context panel, content outlet, and external playback footer.
+- Descendant workspace pages inherit `layout = 'workspace'` from the
+  `/workspace` root route.
+- Provider route trees now bootstrap through route-scoped session providers
+  instead of nested provider shell components.
+
+Core implementation:
+
+1. `apps/web/src/app/app.routes.ts`
+2. `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts`
+3. `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html`
+4. `libs/portal/shared/util/src/lib/navigation/portal-route.utils.ts`
+5. `libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts`
+6. `libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts`
+
+## Route Contract
+
+Current workspace routes:
+
+1. `/` -> `/workspace`
+2. `/workspace` -> `/workspace/dashboard`
+3. `/workspace/dashboard`
+4. `/workspace/sources`
+5. `/workspace/playlists/:id/:view`
+6. `/workspace/global-favorites`
+7. `/workspace/downloads`
+8. `/workspace/settings`
+9. `/workspace/xtreams/:id/...`
+10. `/workspace/stalker/:id/...`
+
+Compatibility redirect:
+
+1. `/settings` -> `/workspace/settings`
+
+Provider route integration:
+
+1. `apps/web/src/app/app.routes.ts` marks the `/workspace` root route with
+   `data.layout = 'workspace'`.
+2. `isWorkspaceLayoutRoute(...)` treats that layout marker as inherited route
+   state for all descendants.
+3. Xtream and Stalker parent routes attach route-scoped session providers that
+   bootstrap the active playlist, sync provider section state, and clean up
+   provider-local state when the route is destroyed.
+4. Workspace routes no longer rely on nested provider shell components for
+   hidden local chrome.
+
+## Shell Structure
+
+The shell is intentionally split into four persistent regions:
+
+1. Left rail:
+   1. Static workspace links for dashboard, sources, global favorites, and recently viewed.
+   2. Provider-aware context links derived from the active or current playlist.
+   3. Settings remains a persistent footer shortcut in the rail.
+2. Top header:
+   1. Playlist switcher.
+   2. Route-aware search input and command palette trigger.
+   3. Add source action.
+   4. Optional playlist refresh and route-specific shortcut actions.
+   5. Downloads shortcut in Electron.
+3. Main body:
+   1. Optional left context panel.
+   2. Main router outlet content.
+4. Optional footer:
+   1. External playback session bar when a docked session is visible.
+
+## Context Panel Rules
+
+The shell decides which secondary panel to show from the current route:
+
+1. `/workspace/sources`
+   1. `WorkspaceSourcesFiltersPanelComponent`
+2. Xtream category sections (`live`, `vod`, `series`)
+   1. `WorkspaceContextPanelComponent`
+3. Stalker category sections (`itv`, `vod`, `series`)
+   1. `WorkspaceContextPanelComponent`
+4. `/workspace/settings`
+   1. `WorkspaceSettingsContextPanelComponent`
+5. Downloads sections
+   1. `WorkspaceCollectionContextPanelComponent`
+
+The context panel is part of the shell contract. New workspace-level routes
+should explicitly decide whether they need one rather than adding local
+sidebars inside feature pages.
+
+## Search And Navigation Rules
+
+Search is shell-owned and route-aware:
+
+1. Disabled on settings routes.
+2. Enabled on sources routes.
+3. Enabled for supported Xtream and Stalker content/search views.
+4. Placeholder text and search handling vary by provider and section.
+5. Input changes are debounced before route/store updates are applied.
+
+Rail navigation is also shell-owned:
+
+1. Workspace-global entries are static.
+2. Provider entries come from `buildPortalRailLinks(...)`.
+3. On dashboard, sources, settings, and global favorites, the shell falls back
+   to the currently selected playlist so provider navigation remains available
+   even outside a provider route.
+
+Command palette behavior is shell-owned but view-extensible:
+
+1. The shell resolves commands into three groups in fixed order: current view,
+   this playlist, then global.
+2. Shell-owned commands are derived from route context and current playlist
+   state; empty groups are omitted instead of rendering disabled placeholders.
+3. Workspace features contribute current-view commands through
+   `WorkspaceViewCommandService`.
+4. Header shortcut actions can opt into palette exposure by attaching palette
+   metadata through `WorkspaceHeaderContextService`.
+5. Filtering matches command labels, descriptions, and keywords, and keyboard
+   selection always lands on the first enabled command.
+
+## Maintenance Guidance
+
+Use this document as the source of truth when changing workspace shell behavior.
+
+1. New top-level user destinations should default to child routes under
+   `/workspace`.
+2. Shared provider navigation logic belongs in portal-shared util/UI libraries,
+   not duplicated inside the shell.
+3. If a provider route changes how playlist/session bootstrap works, update the
+   route-session provider and shell-facing route contract together.
+4. Historical migration notes, cleanup lists, and one-off refactor steps should
+   stay out of this file; track them in issues or PR notes instead.
diff --git a/docs/architecture/xtream-mock-server.md b/docs/architecture/xtream-mock-server.md
new file mode 100644
index 0000000..7e52683
--- /dev/null
+++ b/docs/architecture/xtream-mock-server.md
@@ -0,0 +1,323 @@
+# Xtream Mock Server — Architecture
+
+## Purpose
+
+`apps/xtream-mock-server` is a self-contained Express server that emulates the
+Xtream Codes API protocol. It is used for:
+
+- **Local development** — run a full portal without a real Xtream subscription
+- **E2E testing** — Playwright spins it up alongside the Angular dev server
+
+---
+
+## Data Pipeline
+
+```
+credentials (username + password)
+        │
+        ▼
+credentialsToSeed(u, p)   ←── deterministic polynomial hash
+        │
+        ▼
+faker.seed(seed)           ←── all faker calls use same seed per credentials
+        │
+        ▼
+  generateCategories()     ←── live / vod / series categories
+        │
+  generateLiveStreams()     ←── live TV stream list
+  scenario EPG fixture?     ←── optional deterministic per-stream EPG override
+  generateVodStreams()      ←── VOD movie list
+  generateSeriesItems()     ←── series list
+  generateSeriesInfo()      ←── nested seasons + episodes (pre-populated)
+        │
+        ▼
+  PortalData (cached)       ←── Map<"username:password", PortalData>
+```
+
+Re-requesting with the same credentials returns the exact same data until
+`POST /reset` clears all caches.
+
+---
+
+## File Structure
+
+```
+apps/xtream-mock-server/
+├── project.json                  ← Nx targets: serve (port 3211), serve-with-watch
+├── public/
+│   └── marketing/                ← committed fictional release artwork PNGs
+├── tsconfig.json
+└── src/
+    ├── main.ts                   ← Express app bootstrap, all routes wired up
+    └── app/
+        ├── scenarios.ts          ← Credential → ScenarioConfig mapping
+        ├── data-store.ts         ← Lazy cache, per-credentials generation
+        ├── generators/
+        │   ├── categories.generator.ts
+        │   ├── live.generator.ts   ← Live streams + EPG listings
+        │   ├── marketing.generator.ts ← Fictional release screenshot fixture
+        │   ├── vod.generator.ts    ← VOD streams + VodDetails
+        │   └── series.generator.ts ← Series items + SeriesInfo
+        ├── handlers/
+        │   ├── get-account-info.handler.ts
+        │   ├── get-categories.handler.ts   ← live/vod/series categories
+        │   ├── get-full-epg.handler.ts     ← full EPG + legacy typo alias
+        │   ├── get-streams.handler.ts      ← live/vod/series stream lists
+        │   ├── get-vod-info.handler.ts
+        │   ├── get-series-info.handler.ts
+        │   └── get-short-epg.handler.ts
+        └── routes/
+            └── dispatch.ts               ← Action → handler routing
+```
+
+---
+
+## API Protocol
+
+### Direct Xtream endpoint
+
+```
+GET /player_api.php?action=<action>&username=<u>&password=<p>[&...]
+```
+
+Response: raw JSON (no envelope). Matches the real Xtream Codes API format.
+
+### PWA proxy endpoint
+
+IPTVnator's PWA routes Xtream calls through:
+
+```
+GET /xtream?url=<serverUrl>&action=<action>&username=<u>&password=<p>
+```
+
+Response: `{ payload: <data>, action: <action> }`
+
+This mirrors the backend proxy in `apps/electron-backend` so the same
+Angular service code works in both environments.
+
+### Stream stub endpoints
+
+```
+GET /live/<username>/<password>/<streamId>.m3u8
+GET /movie/<username>/<password>/<streamId>.<ext>
+GET /series/<username>/<password>/<streamId>.<ext>
+```
+
+All redirect to a publicly available HLS test stream
+(`https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8`).
+
+---
+
+## Key Response Shapes
+
+### `get_account_info`
+
+```json
+{
+    "user_info": {
+        "username": "user1",
+        "password": "pass1",
+        "status": "active",
+        "exp_date": "4102444799",
+        "is_trial": "0",
+        "active_cons": "1",
+        "max_connections": "2",
+        "allowed_output_formats": ["m3u8", "ts", "rtmp"]
+    },
+    "server_info": {
+        "url": "http://localhost:3211",
+        "port": "3211",
+        "timezone": "UTC",
+        "timestamp_now": 1234567890
+    }
+}
+```
+
+### `get_live_categories` / `get_vod_categories` / `get_series_categories`
+
+```json
+[
+  { "category_id": "101", "category_name": "News", "parent_id": 0 },
+  ...
+]
+```
+
+### `get_live_streams` (sample item)
+
+```json
+{
+    "num": 1,
+    "name": "Acme Corp TV",
+    "stream_type": "live",
+    "stream_id": 10000,
+    "stream_icon": "https://picsum.photos/seed/live-10000/100/100",
+    "epg_channel_id": "channel-10000.mock",
+    "category_id": "101",
+    "tv_archive": 0,
+    "tv_archive_duration": 0
+}
+```
+
+### `get_short_epg` (sample item)
+
+```json
+{
+    "epg_listings": [
+        {
+            "id": "1000000",
+            "epg_id": "channel-10000.mock",
+            "title": "base64encodedTitle",
+            "description": "base64encodedDescription",
+            "start": "2024-01-01 12:00:00",
+            "end": "2024-01-01 12:30:00",
+            "start_timestamp": "1704110400",
+            "stop_timestamp": "1704112200"
+        }
+    ]
+}
+```
+
+Note: `title` and `description` are **base64-encoded**, matching the real Xtream API.
+
+### `get_simple_data_table` / `get_simple_date_table`
+
+Both actions return the same full per-channel schedule shape:
+
+```json
+{
+    "epg_listings": [
+        {
+            "id": "10000-current",
+            "epg_id": "channel-10000.mock",
+            "title": "base64encodedTitle",
+            "description": "base64encodedDescription",
+            "start": "2026-04-05 04:30:00",
+            "end": "2026-04-05 05:00:00",
+            "start_timestamp": "1775363400",
+            "stop_timestamp": "1775365200",
+            "channel_id": "channel-10000.mock"
+        }
+    ]
+}
+```
+
+The legacy `get_simple_date_table` typo alias exists because real Xtream panels
+sometimes only respond to that misspelled action.
+
+### `get_series_info` (structure)
+
+```json
+{
+  "seasons": [
+    {
+      "id": 3000100, "name": "Season 1", "season_number": 1,
+      "episode_count": 8, "air_date": "2022-05-14",
+      "cover": "https://picsum.photos/seed/season-30001-1/300/450"
+    }
+  ],
+  "info": { "name": "...", "cover": "...", "plot": "...", "cast": "...", ... },
+  "episodes": {
+    "1": [
+      {
+        "id": "80001", "episode_num": 1, "title": "Series Name S1E1",
+        "season": 1, "container_extension": "mkv",
+        "info": { "duration_secs": 2400, "rating": 8.3, ... }
+      }
+    ]
+  }
+}
+```
+
+---
+
+## Scenarios
+
+| Key (`username:password`) | Seed | Categories               | Items/cat | Account status |
+| ------------------------- | ---- | ------------------------ | --------- | -------------- |
+| `user1:pass1`             | 1001 | 8 each                   | 40        | active         |
+| `large:large`             | 9999 | 20 each                  | 200       | active         |
+| `stress:stress`           | 7777 | 16 each                  | 120       | active         |
+| `series:series`           | 2002 | live:3, vod:4, series:15 | 30        | active         |
+| `minimal:minimal`         | 3003 | 2 each                   | 5         | active         |
+| `epg:epg`                 | 6006 | live:2, vod:1, series:1  | 3         | active         |
+| `emptyvod:emptyvod`       | 7007 | 2 each                   | 5         | active         |
+| `marketing:marketing`     | 8020 | live:4, vod:4, series:4  | curated   | active         |
+| `expired:expired`         | 4004 | 4 each                   | 10        | Expired        |
+| `inactive:inactive`       | 5005 | 4 each                   | 10        | Disabled       |
+| `<any other>`             | hash | 6 each                   | 30        | active         |
+
+### `epg:epg` fixture details
+
+This scenario is reserved for Xtream EPG tests:
+
+- live category `EPG Focus` contains deterministic channels such as `Timezone News`
+- `Timezone News` serves a fixed `get_short_epg` window and a full `get_simple_data_table` schedule
+- the full schedule includes a program that spans a UTC midnight boundary and another program after midnight
+- raw `start` / `end` strings are intentionally offset from `start_timestamp` / `stop_timestamp`
+
+That deliberate mismatch lets Electron tests verify the renderer uses timestamp
+fields for sorting, current-program selection, progress bars, and local clock
+labels instead of trusting provider-local strings.
+
+### `marketing:marketing` fixture details
+
+This scenario is reserved for release screenshots and marketing materials:
+
+- VOD and series data use 30 curated fictional titles instead of faker-generated
+  titles or real media metadata
+- posters and backdrops are served from committed PNG files in
+  `apps/xtream-mock-server/public/marketing/{poster,backdrop}/`
+- `tools/release/generate-marketing-artwork.ts` generates the PNGs with
+  `gpt-image-2` only when `OPENAI_API_KEY` is present; it also writes the
+  prompt/asset manifest at `apps/xtream-mock-server/public/marketing/manifest.json`
+- the manifest assigns distinct genre and visual-medium profiles per title,
+  including documentary, noir, animated family, retro rescue drama, cyberpunk,
+  anime-inspired space school, and workplace dramedy styles
+- screenshot capture remains deterministic and offline because
+  `tools/release/capture-v020-screenshots.ts` consumes the local mock server
+  assets and never calls OpenAI
+- the SVG renderer in `marketing.generator.ts` remains the fallback for missing
+  assets, live logos, season covers, and episode thumbnails
+
+---
+
+## Playwright Integration
+
+### Configuration (`apps/web-e2e/playwright.config.ts`)
+
+The mock server is listed as a third `webServer` entry:
+
+```typescript
+{
+  command: 'pnpm nx run xtream-mock-server:serve',
+  url: 'http://localhost:3211/health',
+  reuseExistingServer: !process.env['CI'],
+  cwd: workspaceRoot,
+}
+```
+
+### Request Interception
+
+The Angular PWA calls `localhost:3000/xtream?...`. Playwright intercepts these:
+
+```typescript
+await page.route('**/localhost:3000/xtream**', async (route) => {
+    const originalUrl = new URL(route.request().url());
+    const mockUrl = new URL('http://localhost:3211/xtream');
+    originalUrl.searchParams.forEach((v, k) => mockUrl.searchParams.set(k, v));
+    await route.continue({ url: mockUrl.toString() });
+});
+```
+
+---
+
+## Extension Points
+
+- **Add new actions**: Implement a handler function and add a `case` in `routes/dispatch.ts`
+- **Add new scenarios**: Add an entry to `SCENARIOS` in `scenarios.ts`
+- **Add deterministic EPG fixtures**: Extend `ScenarioConfig.epgFixture` and populate `epgListingsByStreamId` in `data-store.ts`
+- **Refresh release artwork**: Run `pnpm release:artwork:dry-run`, then
+  `OPENAI_API_KEY=... pnpm release:artwork:generate`, inspect the generated PNGs,
+  and finish with `pnpm release:artwork:validate`
+- **Adjust data volume**: Change `itemsPerCategory`, `seasonsPerSeries`, or `episodesPerSeason` per scenario
+- **Custom stream URLs**: Edit the HLS stub redirect in `main.ts`
diff --git a/drizzle.config.ts b/drizzle.config.ts
new file mode 100644
index 0000000..56943a6
--- /dev/null
+++ b/drizzle.config.ts
@@ -0,0 +1,22 @@
+import type { Config } from 'drizzle-kit';
+import { homedir } from 'os';
+import { join } from 'path';
+
+// Use home directory with a simple path (no spaces) to avoid libSQL issues
+// This matches the path used in connection.ts
+const dbDir = join(homedir(), '.iptvnator', 'databases');
+const dbPath = join(dbDir, 'iptvnator.db');
+// libSQL requires file: prefix
+const dbUrl = `file:${dbPath}`;
+
+export default {
+    schema: './apps/electron-backend/src/app/database/schema.ts',
+    out: './apps/electron-backend/src/app/database/migrations',
+    // libSQL/Turso dialect works for both remote and local file URLs
+    dialect: 'turso',
+    dbCredentials: {
+        // Use file: URL format
+        url: dbUrl,
+        // When using remote, set LIBSQL_URL/LIBSQL_AUTH_TOKEN envs and run studio with --config
+    },
+} satisfies Config;
diff --git a/electron-builder.json b/electron-builder.json
new file mode 100644
index 0000000..77bebca
--- /dev/null
+++ b/electron-builder.json
@@ -0,0 +1,128 @@
+{
+    "appId": "com.kiracloud.kiratv",
+    "productName": "KiraTV",
+    "artifactName": "${name}-${version}-${os}-${arch}.${ext}",
+    "directories": {
+        "buildResources": "dist/apps",
+        "output": "dist/executables"
+    },
+    "files": [
+        {
+            "from": "dist/apps/remote-control-web",
+            "to": "remote-control-web",
+            "filter": ["**/*"]
+        },
+        "electron-backend/**/*",
+        "web/**/*",
+        "!**/*.map"
+    ],
+    "asarUnpack": [
+        "**/better-sqlite3/**",
+        "**/bindings/**",
+        "**/file-uri-to-path/**"
+    ],
+    "extraMetadata": {
+        "main": "electron-backend/main.js"
+    },
+    "extraResources": ["dist/apps/electron-backend/workers"],
+    "mac": {
+        "target": {
+            "target": "dmg",
+            "arch": ["x64", "arm64"]
+        },
+        "category": "public.app-category.video",
+        "forceCodeSigning": true,
+        "gatekeeperAssess": false,
+        "hardenedRuntime": true,
+        "entitlements": "apps/electron-backend/macos/entitlements.mac.plist",
+        "entitlementsInherit": "apps/electron-backend/macos/entitlements.mac.inherit.plist",
+        "notarize": true,
+        "icon": "apps/web/src/assets/icons/favicon.icns"
+    },
+    "linux": {
+        "category": "Video",
+        "target": [
+            {
+                "target": "AppImage",
+                "arch": ["x64", "armv7l", "arm64"]
+            },
+            {
+                "target": "deb",
+                "arch": ["x64", "armv7l", "arm64"]
+            },
+            {
+                "target": "Snap",
+                "arch": ["x64", "armv7l"]
+            },
+            {
+                "target": "rpm",
+                "arch": ["x64"]
+            },
+            {
+                "target": "pacman",
+                "arch": ["x64"]
+            },
+            {
+                "target": "flatpak",
+                "arch": ["x64"]
+            }
+        ],
+        "artifactName": "${name}-${version}-${os}-${arch}.${ext}",
+        "icon": "apps/web/src/assets/icons"
+    },
+    "flatpak": {
+        "branch": "stable",
+        "runtime": "org.freedesktop.Platform",
+        "runtimeVersion": "24.08",
+        "sdk": "org.freedesktop.Sdk",
+        "base": "org.electronjs.Electron2.BaseApp",
+        "baseVersion": "24.08",
+        "finishArgs": [
+            "--socket=wayland",
+            "--socket=x11",
+            "--share=ipc",
+            "--device=dri",
+            "--socket=pulseaudio",
+            "--filesystem=home",
+            "--share=network",
+            "--talk-name=org.freedesktop.Notifications",
+            "--talk-name=org.freedesktop.Flatpak"
+        ],
+        "files": [
+            [
+                "apps/electron-backend/linux/com.kiracloud.kiratv.metainfo.xml",
+                "/share/metainfo/com.kiracloud.kiratv.metainfo.xml"
+            ]
+        ]
+    },
+    "afterPack": "./tools/packaging/linux-after-pack.cjs",
+    "snap": {
+        "base": "core22",
+        "confinement": "strict",
+        "grade": "stable",
+        "summary": "KiraTV — cliente IPTV para Kira Cloud (Xtream Codes)",
+        "executableArgs": ["--ozone-platform=x11"],
+        "environment": {
+            "DISABLE_WAYLAND": "1"
+        }
+    },
+    "win": {
+        "compression": "maximum",
+        "target": [
+            {
+                "target": "nsis",
+                "arch": ["x64", "ia32"]
+            }
+        ],
+        "artifactName": "${name}-${version}-windows-${arch}-setup.${ext}",
+        "icon": "apps/web/src/assets/icons/icon.png"
+    },
+    "nsis": {
+        "artifactName": "${name}-${version}-windows-${arch}-setup.${ext}",
+        "oneClick": false,
+        "allowToChangeInstallationDirectory": true,
+        "allowElevation": true,
+        "createDesktopShortcut": true,
+        "createStartMenuShortcut": true
+    }
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..217e5c3
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,197 @@
+import nx from '@nx/eslint-plugin';
+
+export default [
+    ...nx.configs['flat/base'],
+    ...nx.configs['flat/typescript'],
+    ...nx.configs['flat/javascript'],
+    {
+        ignores: ['**/dist'],
+    },
+    {
+        files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+        rules: {
+            '@nx/enforce-module-boundaries': [
+                'error',
+                {
+                    enforceBuildableLibDependency: true,
+                    allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?[jt]s$'],
+                    depConstraints: [
+                        {
+                            sourceTag: 'type:app',
+                            onlyDependOnLibsWithTags: [
+                                'type:feature',
+                                'type:ui',
+                                'type:data-access',
+                                'type:util',
+                            ],
+                        },
+                        {
+                            sourceTag: 'type:feature',
+                            onlyDependOnLibsWithTags: [
+                                'type:feature',
+                                'type:ui',
+                                'type:data-access',
+                                'type:util',
+                            ],
+                        },
+                        {
+                            sourceTag: 'type:ui',
+                            onlyDependOnLibsWithTags: [
+                                'type:ui',
+                                'type:data-access',
+                                'type:util',
+                            ],
+                        },
+                        {
+                            sourceTag: 'type:data-access',
+                            onlyDependOnLibsWithTags: [
+                                'type:data-access',
+                                'type:util',
+                            ],
+                        },
+                        {
+                            sourceTag: 'type:util',
+                            onlyDependOnLibsWithTags: ['type:util'],
+                        },
+                        {
+                            sourceTag: 'domain:portal-shared',
+                            onlyDependOnLibsWithTags: [
+                                'domain:portal-shared',
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                                'scope:portal',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:m3u',
+                            onlyDependOnLibsWithTags: [
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:portal-shared',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:playlist-import',
+                            onlyDependOnLibsWithTags: [
+                                'domain:m3u',
+                                'domain:playlist-import',
+                                'domain:playback',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'domain:stalker',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:playback',
+                            onlyDependOnLibsWithTags: [
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:portal-shared',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:shared-contracts',
+                            onlyDependOnLibsWithTags: [
+                                'domain:shared-contracts',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:shared-runtime',
+                            onlyDependOnLibsWithTags: [
+                                'domain:m3u',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:shared-ui',
+                            onlyDependOnLibsWithTags: [
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:portal-shared',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:xtream',
+                            onlyDependOnLibsWithTags: [
+                                'domain:xtream',
+                                'domain:portal-shared',
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:stalker',
+                            onlyDependOnLibsWithTags: [
+                                'domain:stalker',
+                                'domain:portal-shared',
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                            ],
+                        },
+                        {
+                            sourceTag: 'domain:workspace',
+                            onlyDependOnLibsWithTags: [
+                                'domain:workspace',
+                                'domain:portal-shared',
+                                'domain:xtream',
+                                'domain:stalker',
+                                'domain:m3u',
+                                'domain:playback',
+                                'domain:shared-contracts',
+                                'domain:shared-runtime',
+                                'domain:shared-ui',
+                                'scope:shared',
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        files: [
+            '**/*.ts',
+            '**/*.tsx',
+            '**/*.cts',
+            '**/*.mts',
+            '**/*.js',
+            '**/*.jsx',
+            '**/*.cjs',
+            '**/*.mjs',
+        ],
+        // Override or add rules here
+        rules: {
+            '@angular-eslint/template/click-events-have-key-events': 'off',
+            '@angular-eslint/template/interactive-supports-focus': 'off',
+        },
+    },
+];
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..80b615b
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,458 @@
+import 'jest-extended';
+import { ExternalPlayerSession } from './libs/shared/interfaces/src/lib/external-player-session.interface';
+import { PlaybackPositionData } from './libs/shared/interfaces/src/lib/playback-position.interface';
+import {
+    XtreamBackupFavoriteItem,
+    XtreamBackupHiddenCategory,
+    XtreamBackupRecentlyViewedItem,
+} from './libs/shared/interfaces/src/lib/playlist-backup.interface';
+import {
+    PlaylistRefreshEvent,
+    PlaylistRefreshPayload,
+} from './libs/shared/interfaces/src/lib/playlist-refresh.interface';
+import { Playlist } from './libs/shared/interfaces/src/lib/playlist.interface';
+
+declare module 'video.js' {
+    export interface VideoJsPlayer {
+        hlsQualitySelector(options?: Record<string, unknown>): void;
+    }
+}
+
+declare global {
+    interface ElectronDbOperationEvent {
+        operationId?: string;
+        operation: string;
+        playlistId?: string;
+        status: 'started' | 'progress' | 'completed' | 'cancelled' | 'error';
+        phase?: string;
+        current?: number;
+        total?: number;
+        increment?: number;
+        error?: string;
+    }
+
+    interface Window {
+        electron: {
+            onPlaylistRefreshEvent?: (
+                callback: (data: PlaylistRefreshEvent) => void
+            ) => () => void;
+            getAppVersion: () => Promise<string>;
+            platform: string;
+            fetchPlaylistByUrl: (
+                url: string,
+                title?: string
+            ) => Promise<Playlist>;
+            updatePlaylistFromFilePath: (
+                filePath: string,
+                title: string
+            ) => Promise<Playlist>;
+            openPlaylistFromFile: () => Promise<Playlist>;
+            saveFileDialog: (
+                defaultPath: string,
+                filters?: { name: string; extensions: string[] }[]
+            ) => Promise<string | null>;
+            writeFile: (
+                filePath: string,
+                content: string
+            ) => Promise<{ success: boolean }>;
+            setUserAgent: (userAgent: string, referer?: string) => void;
+            openInMpv: (
+                url: string,
+                title: string,
+                thumbnail: string,
+                userAgent: string,
+                referer?: string,
+                origin?: string,
+                contentInfo?: any,
+                startTime?: number,
+                headers?: Record<string, string>
+            ) => Promise<ExternalPlayerSession>;
+            openInVlc: (
+                url: string,
+                title: string,
+                thumbnail: string,
+                userAgent: string,
+                referer?: string,
+                origin?: string,
+                contentInfo?: any,
+                startTime?: number,
+                headers?: Record<string, string>
+            ) => Promise<ExternalPlayerSession>;
+            autoUpdatePlaylists: (playlists: Playlist[]) => Promise<Playlist[]>;
+            fetchEpg: (
+                urls: string[]
+            ) => Promise<{ success: boolean; message?: string }>;
+            getChannelPrograms: (channelId: string) => Promise<any>;
+            getEpgChannels: () => Promise<any>;
+            getEpgChannelsByRange: (
+                skip: number,
+                limit: number
+            ) => Promise<any>;
+            forceFetchEpg: (
+                url: string
+            ) => Promise<{ success: boolean; message?: string }>;
+            clearEpgData: () => Promise<{ success: boolean }>;
+            checkEpgFreshness: (
+                urls: string[],
+                maxAgeHours?: number
+            ) => Promise<{ staleUrls: string[]; freshUrls: string[] }>;
+            searchEpgPrograms: (
+                searchTerm: string,
+                limit?: number
+            ) => Promise<any[]>;
+            updateSettings: (settings: any) => Promise<void>;
+            getAiSettings: () => Promise<{
+                aiProvider: string;
+                aiModelName: string;
+                aiApiKey: string;
+            }>;
+            setMpvPlayerPath: (mpvPlayerPath: string) => Promise<void>;
+            setVlcPlayerPath: (vlcPlayerPath: string) => Promise<void>;
+            onExternalPlayerSessionUpdate?: (
+                callback: (data: ExternalPlayerSession) => void
+            ) => () => void;
+            closeExternalPlayerSession: (
+                sessionId: string
+            ) => Promise<ExternalPlayerSession | null>;
+            stalkerRequest: (payload: {
+                url: string;
+                macAddress: string;
+                params: Record<string, string>;
+                token?: string;
+                serialNumber?: string;
+                requestId?: string;
+            }) => Promise<any>;
+            xtreamRequest: (payload: {
+                url: string;
+                params: Record<string, string>;
+                requestId?: string;
+                sessionId?: string;
+                suppressErrorLog?: boolean;
+            }) => Promise<{ payload: any; action: string }>;
+            xtreamCancelSession: (
+                sessionId: string
+            ) => Promise<{ success: boolean; cancelled: number }>;
+            refreshPlaylist: (
+                payload: PlaylistRefreshPayload
+            ) => Promise<Playlist>;
+            cancelPlaylistRefresh: (
+                operationId: string
+            ) => Promise<{ success: boolean }>;
+            // Database operations
+            dbCreatePlaylist: (playlist: any) => Promise<{ success: boolean }>;
+            dbGetPlaylist: (playlistId: string) => Promise<any>;
+            dbUpsertAppPlaylist: (
+                playlist: any
+            ) => Promise<{ success: boolean }>;
+            dbUpsertAppPlaylists: (
+                playlists: any[]
+            ) => Promise<{ success: boolean; count: number }>;
+            dbGetAppPlaylists: () => Promise<any[]>;
+            dbGetAppPlaylist: (playlistId: string) => Promise<any | null>;
+            dbUpdatePlaylist: (
+                playlistId: string,
+                updates: any
+            ) => Promise<{ success: boolean }>;
+            dbDeletePlaylist: (
+                playlistId: string,
+                operationId?: string
+            ) => Promise<{ success: boolean }>;
+            dbDeleteXtreamContent: (
+                playlistId: string,
+                operationId?: string
+            ) => Promise<{
+                success: boolean;
+                favorites: XtreamBackupFavoriteItem[];
+                recentlyViewed: XtreamBackupRecentlyViewedItem[];
+                hiddenCategories: XtreamBackupHiddenCategory[];
+            }>;
+            dbRestoreXtreamUserData: (
+                playlistId: string,
+                favorites: XtreamBackupFavoriteItem[],
+                recentlyViewed: XtreamBackupRecentlyViewedItem[],
+                operationId?: string
+            ) => Promise<{ success: boolean }>;
+            dbHasCategories: (
+                playlistId: string,
+                type: string
+            ) => Promise<boolean>;
+            dbGetCategories: (
+                playlistId: string,
+                type: string
+            ) => Promise<any[]>;
+            dbSaveCategories: (
+                playlistId: string,
+                categories: any[],
+                type: string,
+                hiddenCategoryXtreamIds?: number[]
+            ) => Promise<{ success: boolean }>;
+            dbGetAllCategories: (
+                playlistId: string,
+                type: string
+            ) => Promise<any[]>;
+            dbUpdateCategoryVisibility: (
+                categoryIds: number[],
+                hidden: boolean
+            ) => Promise<{ success: boolean }>;
+            dbHasContent: (
+                playlistId: string,
+                type: string
+            ) => Promise<boolean>;
+            dbGetContent: (playlistId: string, type: string) => Promise<any[]>;
+            dbSaveContent: (
+                playlistId: string,
+                streams: any[],
+                type: string,
+                operationId?: string
+            ) => Promise<{ success: boolean; count: number }>;
+            dbClearXtreamImportCache: (
+                playlistId: string,
+                type: 'live' | 'movie' | 'series'
+            ) => Promise<{ success: boolean }>;
+            dbSearchContent: (
+                playlistId: string,
+                searchTerm: string,
+                types: string[],
+                excludeHidden?: boolean
+            ) => Promise<any[]>;
+            dbGlobalSearch: (
+                searchTerm: string,
+                types: string[],
+                excludeHidden?: boolean
+            ) => Promise<any[]>;
+            dbGetGlobalRecentlyAdded: (
+                kind: 'all' | 'vod' | 'series',
+                limit?: number,
+                playlistType?:
+                    | 'xtream'
+                    | 'stalker'
+                    | 'm3u-file'
+                    | 'm3u-text'
+                    | 'm3u-url'
+            ) => Promise<any[]>;
+            dbGetRecentlyViewed: () => Promise<any[]>;
+            dbClearRecentlyViewed: () => Promise<{ success: boolean }>;
+            // Favorites
+            dbAddFavorite: (
+                contentId: number,
+                playlistId: string,
+                backdropUrl?: string
+            ) => Promise<{ success: boolean }>;
+            dbRemoveFavorite: (
+                contentId: number,
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbIsFavorite: (
+                contentId: number,
+                playlistId: string
+            ) => Promise<boolean>;
+            dbGetFavorites: (playlistId: string) => Promise<any[]>;
+            dbGetGlobalFavorites: () => Promise<any[]>;
+            dbGetAllGlobalFavorites: () => Promise<any[]>;
+            dbReorderGlobalFavorites: (
+                updates: { content_id: number; position: number }[]
+            ) => Promise<{ success: boolean }>;
+            // Recently viewed (playlist-specific)
+            dbGetRecentItems: (playlistId: string) => Promise<any[]>;
+            dbAddRecentItem: (
+                contentId: number,
+                playlistId: string,
+                backdropUrl?: string
+            ) => Promise<{ success: boolean }>;
+            dbClearPlaylistRecentItems: (
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbRemoveRecentItem: (
+                contentId: number,
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbGetContentByXtreamId: (
+                xtreamId: number,
+                playlistId: string,
+                contentType?: 'live' | 'movie' | 'series'
+            ) => Promise<any | null>;
+            dbSetContentBackdropIfMissing: (
+                contentId: number,
+                backdropUrl?: string
+            ) => Promise<{ success: boolean }>;
+            dbGetAppState: (key: string) => Promise<string | null>;
+            dbSetAppState: (
+                key: string,
+                value: string
+            ) => Promise<{ success: boolean }>;
+            // Remote control
+            onChannelChange?: (
+                callback: (data: { direction: 'up' | 'down' }) => void
+            ) => () => void;
+            onRemoteControlCommand?: (
+                callback: (data: {
+                    type:
+                        | 'channel-select-number'
+                        | 'volume-up'
+                        | 'volume-down'
+                        | 'volume-toggle-mute';
+                    number?: number;
+                }) => void
+            ) => () => void;
+            updateRemoteControlStatus?: (status: {
+                portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
+                isLiveView: boolean;
+                channelName?: string;
+                channelNumber?: number;
+                epgTitle?: string;
+                epgStart?: string;
+                epgEnd?: string;
+                supportsVolume?: boolean;
+                volume?: number;
+                muted?: boolean;
+            }) => void;
+            // Player error notifications
+            onPlayerError?: (
+                callback: (data: {
+                    player: string;
+                    error: string;
+                    originalError: string;
+                }) => void
+            ) => void;
+            getLocalIpAddresses: () => Promise<string[]>;
+            // EPG progress listener
+            onEpgProgress?: (
+                callback: (data: {
+                    url: string;
+                    status: 'loading' | 'complete' | 'error';
+                    stats?: { totalChannels: number; totalPrograms: number };
+                    error?: string;
+                }) => void
+            ) => void;
+            // DB save content progress listener
+            onDbSaveContentProgress: (
+                callback: (count: number) => void
+            ) => void;
+            removeDbSaveContentProgress: () => void;
+            onDbOperationEvent?: (
+                callback: (data: ElectronDbOperationEvent) => void
+            ) => () => void;
+            dbDeleteAllPlaylists: (
+                operationId?: string
+            ) => Promise<{ success: boolean }>;
+            dbCancelOperation: (
+                operationId: string
+            ) => Promise<{ success: boolean }>;
+            // Playback positions
+            dbSavePlaybackPosition: (
+                playlistId: string,
+                data: any
+            ) => Promise<{ success: boolean }>;
+            dbGetPlaybackPosition: (
+                playlistId: string,
+                contentXtreamId: number,
+                contentType: 'vod' | 'episode'
+            ) => Promise<any | null>;
+            dbGetSeriesPlaybackPositions: (
+                playlistId: string,
+                seriesXtreamId: number
+            ) => Promise<any[]>;
+            dbGetRecentPlaybackPositions: (
+                playlistId: string,
+                limit?: number
+            ) => Promise<PlaybackPositionData[]>;
+            dbGetAllPlaybackPositions: (
+                playlistId: string
+            ) => Promise<PlaybackPositionData[]>;
+            dbClearAllPlaybackPositions: (
+                playlistId: string
+            ) => Promise<{ success: boolean }>;
+            dbClearPlaybackPosition: (
+                playlistId: string,
+                contentXtreamId: number,
+                contentType: 'vod' | 'episode'
+            ) => Promise<{ success: boolean }>;
+            onPlaybackPositionUpdate: (
+                callback: (data: any) => void
+            ) => () => void;
+            // Downloads
+            downloadsStart: (data: {
+                playlistId: string;
+                xtreamId: number;
+                contentType: 'vod' | 'episode';
+                title: string;
+                url: string;
+                posterUrl?: string;
+                downloadFolder: string;
+                headers?: {
+                    userAgent?: string;
+                    referer?: string;
+                    origin?: string;
+                };
+                seriesXtreamId?: number;
+                seasonNumber?: number;
+                episodeNumber?: number;
+                // Playlist info for auto-creation if needed
+                playlistName?: string;
+                playlistType?:
+                    | 'xtream'
+                    | 'stalker'
+                    | 'm3u-file'
+                    | 'm3u-text'
+                    | 'm3u-url';
+                serverUrl?: string;
+                portalUrl?: string;
+                macAddress?: string;
+            }) => Promise<{ success: boolean; id?: number; error?: string }>;
+            downloadsCancel: (
+                downloadId: number
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsRetry: (
+                downloadId: number,
+                downloadFolder: string
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsRemove: (
+                downloadId: number
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsGetList: (playlistId?: string) => Promise<DownloadItem[]>;
+            downloadsGet: (downloadId: number) => Promise<DownloadItem | null>;
+            downloadsGetDefaultFolder: () => Promise<string>;
+            downloadsSelectFolder: () => Promise<string | null>;
+            downloadsRevealFile: (
+                filePath: string
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsPlayFile: (
+                filePath: string
+            ) => Promise<{ success: boolean; error?: string }>;
+            downloadsClearCompleted: (
+                playlistId?: string
+            ) => Promise<{ success: boolean }>;
+            onDownloadsUpdate: (callback: () => void) => () => void;
+        };
+        process: NodeJS.Process;
+        require: NodeRequire;
+    }
+
+    /** Download item from the database */
+    interface DownloadItem {
+        id: number;
+        playlistId: string;
+        xtreamId: number;
+        contentType: 'vod' | 'episode';
+        seriesXtreamId?: number;
+        seasonNumber?: number;
+        episodeNumber?: number;
+        title: string;
+        url: string;
+        fileName?: string;
+        filePath?: string;
+        posterUrl?: string;
+        status: 'queued' | 'downloading' | 'completed' | 'failed' | 'canceled';
+        bytesDownloaded?: number;
+        totalBytes?: number;
+        errorMessage?: string;
+        createdAt?: string;
+        updatedAt?: string;
+    }
+}
+
+// SystemJS module definition
+declare const nodeModule: NodeModule;
+interface NodeModule {
+    id: string;
+}
diff --git a/iptv-dark-theme.png b/iptv-dark-theme.png
new file mode 100644
index 0000000..4551b79
Binary files /dev/null and b/iptv-dark-theme.png differ
diff --git a/iptv-epg.png b/iptv-epg.png
new file mode 100644
index 0000000..5c7a857
Binary files /dev/null and b/iptv-epg.png differ
diff --git a/iptv-main.png b/iptv-main.png
new file mode 100644
index 0000000..fa953d8
Binary files /dev/null and b/iptv-main.png differ
diff --git a/iptv-playlist-settings.png b/iptv-playlist-settings.png
new file mode 100644
index 0000000..6cfb13c
Binary files /dev/null and b/iptv-playlist-settings.png differ
diff --git a/iptv-settings.png b/iptv-settings.png
new file mode 100644
index 0000000..e6a68a0
Binary files /dev/null and b/iptv-settings.png differ
diff --git a/iptv-upload.png b/iptv-upload.png
new file mode 100644
index 0000000..d9bf3c1
Binary files /dev/null and b/iptv-upload.png differ
diff --git a/jest.config.ts b/jest.config.ts
new file mode 100644
index 0000000..c49c9a9
--- /dev/null
+++ b/jest.config.ts
@@ -0,0 +1,6 @@
+import type { Config } from 'jest';
+import { getJestProjectsAsync } from '@nx/jest';
+
+export default async (): Promise<Config> => ({
+  projects: await getJestProjectsAsync(),
+});
diff --git a/jest.preset.js b/jest.preset.js
new file mode 100644
index 0000000..f078ddc
--- /dev/null
+++ b/jest.preset.js
@@ -0,0 +1,3 @@
+const nxPreset = require('@nx/jest/preset').default;
+
+module.exports = { ...nxPreset };
diff --git a/jest.web-esm.workspace.ts b/jest.web-esm.workspace.ts
new file mode 100644
index 0000000..b8e3154
--- /dev/null
+++ b/jest.web-esm.workspace.ts
@@ -0,0 +1,41 @@
+import { nxPreset } from '@nx/jest/preset.js';
+import { createEsmPreset } from 'jest-preset-angular/presets/index.js';
+
+const angularEsmPreset = createEsmPreset({
+    diagnostics: false,
+    tsconfig: '<rootDir>/apps/web/tsconfig.spec.json',
+});
+
+export default {
+    ...nxPreset,
+    ...angularEsmPreset,
+    rootDir: '.',
+    roots: ['<rootDir>/apps/web', '<rootDir>/libs'],
+    setupFilesAfterEnv: ['<rootDir>/apps/web/src/test-setup.ts'],
+    resolver: nxPreset.resolver,
+    moduleFileExtensions: Array.from(
+        new Set([
+            ...(nxPreset.moduleFileExtensions ?? []),
+            ...(angularEsmPreset.moduleFileExtensions ?? []),
+        ])
+    ),
+    testMatch: nxPreset.testMatch,
+    testEnvironmentOptions: {},
+    snapshotSerializers: angularEsmPreset.snapshotSerializers,
+    moduleNameMapper: {
+        ...(angularEsmPreset.moduleNameMapper ?? {}),
+        '^@iptvnator/portal/xtream/feature$':
+            '<rootDir>/apps/web/src/test-stubs/xtream-feature.stub.ts',
+        tslib: 'tslib/tslib.es6.js',
+        '^iptv-playlist-parser$':
+            '<rootDir>/apps/web/src/test-stubs/iptv-playlist-parser.mjs',
+        '^rxjs': '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
+        '^uuid$': '<rootDir>/node_modules/uuid/wrapper.mjs',
+    },
+    transform: angularEsmPreset.transform,
+    transformIgnorePatterns: [],
+    extensionsToTreatAsEsm: angularEsmPreset.extensionsToTreatAsEsm,
+    modulePathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/.nx/'],
+    watchPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/.nx/'],
+    coverageReporters: [...(nxPreset.coverageReporters ?? [])],
+};
diff --git a/libs/epg/data-access/project.json b/libs/epg/data-access/project.json
new file mode 100644
index 0000000..3932217
--- /dev/null
+++ b/libs/epg/data-access/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "epg-data-access",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/epg/data-access/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:playback", "type:data-access"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/epg/data-access/src/index.ts b/libs/epg/data-access/src/index.ts
new file mode 100644
index 0000000..9100678
--- /dev/null
+++ b/libs/epg/data-access/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/epg-progress.service';
+export * from './lib/epg.service';
diff --git a/libs/epg/data-access/src/lib/epg-program-normalization.util.spec.ts b/libs/epg/data-access/src/lib/epg-program-normalization.util.spec.ts
new file mode 100644
index 0000000..12b05bf
--- /dev/null
+++ b/libs/epg/data-access/src/lib/epg-program-normalization.util.spec.ts
@@ -0,0 +1,37 @@
+import { EpgProgram } from 'shared-interfaces';
+import { normalizeEpgPrograms } from './epg-program-normalization.util';
+
+function buildProgram(overrides: Partial<EpgProgram> = {}): EpgProgram {
+    return {
+        start: '2026-04-15T20:00:00Z',
+        stop: '2026-04-15T21:00:00Z',
+        channel: 'channel-1',
+        title: 'Sample',
+        desc: null,
+        category: null,
+        iconUrl: null,
+        rating: null,
+        episodeNum: null,
+        ...overrides,
+    };
+}
+
+describe('normalizeEpgPrograms', () => {
+    it('keeps valid rows and normalizes dates', () => {
+        expect(normalizeEpgPrograms([buildProgram()])).toEqual([
+            expect.objectContaining({
+                start: '2026-04-15T20:00:00.000Z',
+                stop: '2026-04-15T21:00:00.000Z',
+            }),
+        ]);
+    });
+
+    it('drops rows with invalid stop dates', () => {
+        expect(
+            normalizeEpgPrograms([
+                buildProgram({ title: 'ok' }),
+                buildProgram({ title: 'bad', stop: '' }),
+            ])
+        ).toEqual([expect.objectContaining({ title: 'ok' })]);
+    });
+});
diff --git a/libs/epg/data-access/src/lib/epg-program-normalization.util.ts b/libs/epg/data-access/src/lib/epg-program-normalization.util.ts
new file mode 100644
index 0000000..b469581
--- /dev/null
+++ b/libs/epg/data-access/src/lib/epg-program-normalization.util.ts
@@ -0,0 +1,38 @@
+import { EpgProgram } from 'shared-interfaces';
+
+function toIsoDate(value: string | undefined): string | null {
+    if (!value) {
+        return null;
+    }
+
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return null;
+    }
+
+    return date.toISOString();
+}
+
+/**
+ * Drop malformed EPG rows instead of failing the whole channel request.
+ */
+export function normalizeEpgPrograms(programs: EpgProgram[]): EpgProgram[] {
+    const normalizedPrograms: EpgProgram[] = [];
+
+    for (const program of programs) {
+        const start = toIsoDate(program.start);
+        const stop = toIsoDate(program.stop);
+
+        if (!start || !stop) {
+            continue;
+        }
+
+        normalizedPrograms.push({
+            ...program,
+            start,
+            stop,
+        });
+    }
+
+    return normalizedPrograms;
+}
diff --git a/libs/epg/data-access/src/lib/epg-progress.service.ts b/libs/epg/data-access/src/lib/epg-progress.service.ts
new file mode 100644
index 0000000..277bca0
--- /dev/null
+++ b/libs/epg/data-access/src/lib/epg-progress.service.ts
@@ -0,0 +1,86 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+export interface EpgImportProgress {
+    url: string;
+    status: 'queued' | 'loading' | 'complete' | 'error';
+    stats?: { totalChannels: number; totalPrograms: number };
+    error?: string;
+    queuePosition?: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class EpgProgressService {
+    private readonly importsMap = signal<Map<string, EpgImportProgress>>(
+        new Map()
+    );
+    private initialized = false;
+
+    readonly imports = computed(() => Array.from(this.importsMap().values()));
+    readonly hasActiveImports = computed(() =>
+        this.imports().some((item) => item.status === 'loading')
+    );
+    readonly activeCount = computed(
+        () => this.imports().filter((item) => item.status === 'loading').length
+    );
+    readonly queuedImports = computed(() =>
+        this.imports()
+            .filter((item) => item.status === 'queued')
+            .sort(
+                (a, b) => (a.queuePosition ?? 0) - (b.queuePosition ?? 0)
+            )
+    );
+    readonly queuedCount = computed(() => this.queuedImports().length);
+    readonly isVisible = computed(() => this.imports().length > 0);
+
+    constructor() {
+        this.initializeListener();
+    }
+
+    dismiss(url: string): void {
+        this.removeImport(url);
+    }
+
+    dismissAll(): void {
+        this.importsMap.set(new Map());
+    }
+
+    retry(url: string): void {
+        // Clear the errored row so the backend's subsequent 'queued' event
+        // reappears cleanly rather than updating an existing error row.
+        this.removeImport(url);
+        void window.electron?.forceFetchEpg?.(url);
+    }
+
+    private initializeListener(): void {
+        if (this.initialized) {
+            return;
+        }
+        this.initialized = true;
+
+        if (window.electron?.onEpgProgress) {
+            window.electron.onEpgProgress((data) => {
+                this.updateProgress(data);
+            });
+        }
+    }
+
+    private updateProgress(progress: EpgImportProgress): void {
+        this.importsMap.update((current) => {
+            const updated = new Map(current);
+            updated.set(progress.url, progress);
+            return updated;
+        });
+
+        if (progress.status === 'complete' || progress.status === 'error') {
+            setTimeout(() => this.removeImport(progress.url), 5000);
+        }
+    }
+
+    private removeImport(url: string): void {
+        this.importsMap.update((current) => {
+            const updated = new Map(current);
+            updated.delete(url);
+            return updated;
+        });
+    }
+}
diff --git a/libs/epg/data-access/src/lib/epg.service.spec.ts b/libs/epg/data-access/src/lib/epg.service.spec.ts
new file mode 100644
index 0000000..5ba7937
--- /dev/null
+++ b/libs/epg/data-access/src/lib/epg.service.spec.ts
@@ -0,0 +1,119 @@
+/* import { TestBed } from '@angular/core/testing';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { TranslateService } from '@ngx-translate/core';
+import { invoke } from '@tauri-apps/api/core';
+import { MockModule, MockProviders } from 'ng-mocks';
+import { DataService } from './data.service';
+import { EpgService } from './epg.service';
+
+jest.mock('@tauri-apps/api/core', () => ({
+    invoke: jest.fn(),
+    isTauri: () => true,
+}));
+
+describe('EpgService', () => {
+    let service: EpgService;
+    let snackBar: MatSnackBar;
+    let store: MockStore;
+    let translateService: TranslateService;
+    let dispatchSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                EpgService,
+                MockProviders(DataService, TranslateService, MatSnackBar),
+                provideMockStore(),
+            ],
+            imports: [MockModule(MatSnackBarModule)],
+        });
+
+        service = TestBed.inject(EpgService);
+        snackBar = TestBed.inject(MatSnackBar);
+        store = TestBed.inject(MockStore);
+        translateService = TestBed.inject(TranslateService);
+
+        jest.spyOn(translateService, 'instant').mockImplementation(
+            (key) => key
+        );
+        jest.spyOn(snackBar, 'open');
+        dispatchSpy = jest.spyOn(store, 'dispatch');
+
+        // Suppress console.error during tests
+        jest.spyOn(console, 'error').mockImplementation(() => {});
+        jest.spyOn(console, 'log').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should create a service instance', () => {
+        expect(service).toBeTruthy();
+    });
+
+    describe('fetchEpg', () => {
+        it('should show success notification on successful fetch', async () => {
+            (invoke as jest.Mock).mockResolvedValueOnce({});
+            service.fetchEpg(['http://example.com/epg.xml']);
+
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            expect(snackBar.open).toHaveBeenCalledWith(
+                'EPG.FETCH_SUCCESS',
+                null,
+                expect.any(Object)
+            );
+        });
+
+        it('should show error notification on fetch failure', async () => {
+            (invoke as jest.Mock).mockRejectedValueOnce(new Error('Failed'));
+            service.fetchEpg(['http://example.com/epg.xml']);
+
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            expect(snackBar.open).toHaveBeenCalledWith(
+                'EPG.ERROR',
+                'CLOSE',
+                expect.any(Object)
+            );
+        });
+    });
+
+    describe('getChannelPrograms', () => {
+        it('should update programs and set EPG flag to true when programs exist', (done) => {
+            const mockPrograms = [
+                {
+                    start: new Date().toISOString(),
+                    stop: new Date().toISOString(),
+                    title: 'Test',
+                },
+            ];
+            (invoke as jest.Mock).mockResolvedValueOnce(mockPrograms);
+
+            service.getChannelPrograms('test-channel');
+
+            service.currentEpgPrograms$.subscribe((programs) => {
+                expect(programs).toHaveLength(1);
+                expect(dispatchSpy).toHaveBeenCalledWith(
+                    expect.objectContaining({ value: true })
+                );
+                done();
+            });
+        });
+
+        it('should set EPG flag to false when no programs found', (done) => {
+            (invoke as jest.Mock).mockResolvedValueOnce([]);
+
+            service.getChannelPrograms('test-channel');
+
+            service.currentEpgPrograms$.subscribe((programs) => {
+                expect(programs).toHaveLength(0);
+                expect(dispatchSpy).toHaveBeenCalledWith(
+                    expect.objectContaining({ value: false })
+                );
+                done();
+            });
+        });
+    });
+});
+ */
diff --git a/libs/epg/data-access/src/lib/epg.service.ts b/libs/epg/data-access/src/lib/epg.service.ts
new file mode 100644
index 0000000..dc9552d
--- /dev/null
+++ b/libs/epg/data-access/src/lib/epg.service.ts
@@ -0,0 +1,277 @@
+import { inject, Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, forkJoin, from, Observable, of } from 'rxjs';
+import { catchError, map, tap, timeout } from 'rxjs/operators';
+import { EpgChannelMetadata, EpgProgram } from 'shared-interfaces';
+import { normalizeEpgPrograms } from './epg-program-normalization.util';
+
+interface CachedProgram {
+    program: EpgProgram | null;
+    timestamp: number;
+}
+
+type EpgChannelMetadataApi = {
+    getEpgChannelMetadata?: (
+        channelIds: string[]
+    ) => Promise<Record<string, EpgChannelMetadata | null>>;
+};
+
+@Injectable({
+    providedIn: 'root',
+})
+export class EpgService {
+    private snackBar = inject(MatSnackBar);
+    private translate = inject(TranslateService);
+
+    private epgAvailable = new BehaviorSubject<boolean>(false);
+    private currentEpgPrograms = new BehaviorSubject<EpgProgram[]>([]);
+
+    // Cache for channel programs with 60-second TTL
+    private programCache = new Map<string, CachedProgram>();
+    private readonly CACHE_TTL = 60000; // 60 seconds
+
+    private readonly isDesktop = !!window.electron;
+
+    readonly epgAvailable$ = this.epgAvailable.asObservable();
+    readonly currentEpgPrograms$ = this.currentEpgPrograms.asObservable();
+
+    /**
+     * Fetches EPG from the given URLs
+     */
+    fetchEpg(urls: string[]): void {
+        if (!this.isDesktop) return;
+
+        // Filter out empty URLs and send all URLs at once
+        const validUrls = urls.filter((url) => url?.trim());
+        if (validUrls.length === 0) return;
+
+        from(window.electron.fetchEpg(validUrls))
+            .pipe(
+                tap((result) => {
+                    if (result.success) {
+                        this.epgAvailable.next(true);
+                    } else {
+                        this.epgAvailable.next(false);
+                        this.showErrorSnackbar(result.message);
+                    }
+                }),
+                catchError((err) => {
+                    console.error('EPG fetch error:', err);
+                    this.epgAvailable.next(false);
+                    this.showErrorSnackbar();
+                    return of(null);
+                })
+            )
+            .subscribe();
+    }
+
+    /**
+     * Gets EPG programs for a specific channel
+     */
+    getChannelPrograms(channelId: string): void {
+        if (!this.isDesktop) return;
+        console.log('Fetching EPG for channel ID:', channelId);
+
+        from(window.electron.getChannelPrograms(channelId))
+            .pipe(
+                timeout(3000),
+                map((programs: EpgProgram[]) => normalizeEpgPrograms(programs)),
+                catchError((err) => {
+                    console.error('EPG get programs error:', err);
+                    this.showErrorSnackbar();
+                    this.currentEpgPrograms.next([]);
+                    this.epgAvailable.next(false);
+                    return of([]);
+                })
+            )
+            .subscribe((programs) => {
+                this.epgAvailable.next(programs.length > 0);
+                this.currentEpgPrograms.next(programs);
+            });
+    }
+
+    /**
+     * Shows error snackbar
+     */
+    private showErrorSnackbar(message?: string): void {
+        const errorMessage = message || this.translate.instant('EPG.ERROR');
+        this.snackBar.open(errorMessage, this.translate.instant('CLOSE'), {
+            duration: 3000,
+            horizontalPosition: 'start',
+        });
+    }
+
+    /**
+     * Gets the current EPG program for a specific channel (with caching)
+     * @param channelId Channel ID (tvg-id or channel name)
+     * @returns Observable of current program or null
+     */
+    getCurrentProgramForChannel(
+        channelId: string
+    ): Observable<EpgProgram | null> {
+        if (!this.isDesktop || !channelId) {
+            return of(null);
+        }
+
+        // Check cache first
+        const cached = this.programCache.get(channelId);
+        const now = Date.now();
+
+        if (cached && now - cached.timestamp < this.CACHE_TTL) {
+            return of(cached.program);
+        }
+
+        // Fetch from backend
+        return from(window.electron.getChannelPrograms(channelId)).pipe(
+            map((programs: EpgProgram[]) => normalizeEpgPrograms(programs)),
+            map((programs: EpgProgram[]) => {
+                if (!programs.length) {
+                    this.programCache.set(channelId, {
+                        program: null,
+                        timestamp: now,
+                    });
+                    return null;
+                }
+
+                const currentProgram = this.findCurrentProgram(programs);
+
+                // Cache the result
+                this.programCache.set(channelId, {
+                    program: currentProgram,
+                    timestamp: now,
+                });
+
+                return currentProgram;
+            }),
+            catchError((err) => {
+                console.error('EPG get current program error:', err);
+                this.programCache.set(channelId, {
+                    program: null,
+                    timestamp: now,
+                });
+                return of(null);
+            })
+        );
+    }
+
+    /**
+     * Finds the current program from a list of programs
+     */
+    private findCurrentProgram(programs: EpgProgram[]): EpgProgram | null {
+        const now = new Date();
+
+        return (
+            programs.find((program) => {
+                const start = new Date(program.start);
+                const stop = new Date(program.stop);
+                return start <= now && now <= stop;
+            }) || null
+        );
+    }
+
+    /**
+     * Gets current programs for multiple channels (batch operation)
+     * @param channelIds Array of channel IDs
+     * @returns Observable of Map with channelId -> current program
+     */
+    getCurrentProgramsForChannels(
+        channelIds: string[]
+    ): Observable<Map<string, EpgProgram | null>> {
+        if (!this.isDesktop) {
+            return of(new Map());
+        }
+
+        if (!channelIds || channelIds.length === 0) {
+            return of(new Map());
+        }
+
+        const resultMap = new Map<string, EpgProgram | null>();
+        const channelsToFetch: string[] = [];
+        const now = Date.now();
+
+        // Check cache for each channel
+        channelIds.forEach((channelId) => {
+            const cached = this.programCache.get(channelId);
+            if (cached && now - cached.timestamp < this.CACHE_TTL) {
+                resultMap.set(channelId, cached.program);
+            } else {
+                channelsToFetch.push(channelId);
+            }
+        });
+
+        // If all channels were cached, return immediately
+        if (channelsToFetch.length === 0) {
+            return of(resultMap);
+        }
+
+        // Fetch uncached channels with timeout and error handling per request
+        const fetchObservables = channelsToFetch.map((channelId) =>
+            this.getCurrentProgramForChannel(channelId).pipe(
+                timeout(5000), // 5 second timeout per request
+                map((program) => ({ channelId, program })),
+                catchError(() => of({ channelId, program: null }))
+            )
+        );
+
+        // Combine all fetches using forkJoin
+        return forkJoin(fetchObservables).pipe(
+            map((results) => {
+                results.forEach((result) => {
+                    resultMap.set(result.channelId, result.program);
+                });
+                return resultMap;
+            })
+        );
+    }
+
+    getChannelMetadataForChannels(
+        channelIds: string[]
+    ): Observable<Map<string, EpgChannelMetadata | null>> {
+        if (!this.isDesktop) {
+            return of(new Map());
+        }
+
+        const normalizedChannelIds = Array.from(
+            new Set(
+                channelIds
+                    .map((channelId) => channelId.trim())
+                    .filter((channelId) => channelId.length > 0)
+            )
+        );
+
+        if (normalizedChannelIds.length === 0) {
+            return of(new Map());
+        }
+
+        const getEpgChannelMetadata = (
+            window.electron as EpgChannelMetadataApi | undefined
+        )?.getEpgChannelMetadata;
+
+        if (typeof getEpgChannelMetadata !== 'function') {
+            return of(new Map());
+        }
+
+        return from(getEpgChannelMetadata(normalizedChannelIds)).pipe(
+            map((metadataByChannelId) => {
+                return new Map<string, EpgChannelMetadata | null>(
+                    normalizedChannelIds.map((channelId) => [
+                        channelId,
+                        metadataByChannelId[channelId] ?? null,
+                    ])
+                );
+            }),
+            catchError((err) => {
+                console.error('EPG get channel metadata error:', err);
+                return of(new Map<string, EpgChannelMetadata | null>());
+            })
+        );
+    }
+
+    /**
+     * Clears the program cache (useful when EPG is refreshed)
+     */
+    clearCache(): void {
+        this.programCache.clear();
+    }
+}
diff --git a/libs/epg/data-access/tsconfig.json b/libs/epg/data-access/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/epg/data-access/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/epg/data-access/tsconfig.lib.json b/libs/epg/data-access/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/epg/data-access/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/m3u-state/README.md b/libs/m3u-state/README.md
new file mode 100644
index 0000000..e70be25
--- /dev/null
+++ b/libs/m3u-state/README.md
@@ -0,0 +1,7 @@
+# m3u-state
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test m3u-state` to execute the unit tests.
diff --git a/libs/m3u-state/eslint.config.mjs b/libs/m3u-state/eslint.config.mjs
new file mode 100644
index 0000000..9234ef5
--- /dev/null
+++ b/libs/m3u-state/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'lib',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'lib',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/m3u-state/jest.config.ts b/libs/m3u-state/jest.config.ts
new file mode 100644
index 0000000..549ab83
--- /dev/null
+++ b/libs/m3u-state/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'm3u-state',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../coverage/libs/m3u-state',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/m3u-state/project.json b/libs/m3u-state/project.json
new file mode 100644
index 0000000..3b07e51
--- /dev/null
+++ b/libs/m3u-state/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "m3u-state",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/m3u-state/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:playlist", "domain:m3u", "type:data-access"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/m3u-state/jest.config.ts",
+                "tsConfig": "libs/m3u-state/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/m3u-state/src/index.ts b/libs/m3u-state/src/index.ts
new file mode 100644
index 0000000..21ed1df
--- /dev/null
+++ b/libs/m3u-state/src/index.ts
@@ -0,0 +1,7 @@
+export * from './lib/actions';
+export * from './lib/channel-epg-lookup.util';
+export * from './lib/effects';
+export * from './lib/external-player-payload.util';
+export * from './lib/reducers';
+export * from './lib/router.selectors';
+export * from './lib/selectors';
diff --git a/libs/m3u-state/src/lib/actions.ts b/libs/m3u-state/src/lib/actions.ts
new file mode 100644
index 0000000..3d10cd2
--- /dev/null
+++ b/libs/m3u-state/src/lib/actions.ts
@@ -0,0 +1,72 @@
+import { createActionGroup, emptyProps, props } from '@ngrx/store';
+import { Channel, EpgProgram, Playlist, PlaylistMeta } from 'shared-interfaces';
+
+export const PlaylistActions = createActionGroup({
+    source: 'Playlists',
+    events: {
+        'Load Playlists': emptyProps(),
+        'Load Playlists Success': props<{ playlists: PlaylistMeta[] }>(),
+        'Add Playlist': props<{ playlist: Playlist }>(),
+        'Add Many Playlists': props<{ playlists: Playlist[] }>(),
+        'Remove Playlist': props<{ playlistId: string }>(),
+        'Update Playlist Meta': props<{ playlist: PlaylistMeta }>(),
+        'Update Playlist': props<{ playlist: Playlist; playlistId: string }>(),
+        'Update Many Playlists': props<{ playlists: Playlist[] }>(),
+        'Parse Playlist': props<{
+            uploadType: 'FILE' | 'URL' | 'TEXT';
+            playlist: string;
+            title: string;
+            path?: string;
+        }>(),
+        'Set Active Playlist': props<{ playlistId: string }>(),
+        'Update Playlist Positions': props<{
+            positionUpdates: { id: string; changes: { position: number } }[];
+        }>(),
+        'Remove All Playlists': emptyProps(),
+        'Handle Adding Playlist By Url': props<{
+            isTemporary: boolean;
+            playlist: Playlist;
+        }>(),
+    },
+});
+
+export const ChannelActions = createActionGroup({
+    source: 'Channels',
+    events: {
+        'Set Channels Loading': props<{ loading: boolean }>(),
+        'Set Channels': props<{ channels: Channel[] }>(),
+        'Set Active Channel': props<{ channel: Channel }>(),
+        'Set Active Channel Success': props<{ channel: Channel }>(),
+        'Reset Active Channel': emptyProps(),
+        'Set Adjacent Channel As Active': props<{
+            direction: 'next' | 'previous';
+        }>(),
+    },
+});
+
+export const EpgActions = createActionGroup({
+    source: 'EPG',
+    events: {
+        'Set Active Epg Program': props<{ program: EpgProgram }>(),
+        'Set Active Playback Url': props<{ playbackUrl: string }>(),
+        'Set Current Epg Program': props<{ program: EpgProgram }>(),
+        'Reset Active Epg Program': emptyProps(),
+        'Return To Live Playback': emptyProps(),
+        'Set Epg Available Flag': props<{ value: boolean }>(),
+    },
+});
+
+export const FavoritesActions = createActionGroup({
+    source: 'Favorites',
+    events: {
+        'Update Favorites': props<{ channel: Channel }>(),
+        'Set Favorites': props<{ channelIds: string[] }>(),
+    },
+});
+
+export const FilterActions = createActionGroup({
+    source: 'Filters',
+    events: {
+        'Set Selected Filters': props<{ selectedFilters: string[] }>(),
+    },
+});
diff --git a/libs/m3u-state/src/lib/channel-epg-lookup.util.spec.ts b/libs/m3u-state/src/lib/channel-epg-lookup.util.spec.ts
new file mode 100644
index 0000000..235f777
--- /dev/null
+++ b/libs/m3u-state/src/lib/channel-epg-lookup.util.spec.ts
@@ -0,0 +1,65 @@
+import { Channel } from 'shared-interfaces';
+import { resolveChannelEpgLookupKey } from './channel-epg-lookup.util';
+
+function buildChannel(overrides: Partial<Channel> = {}): Channel {
+    return {
+        id: 'channel-1',
+        url: 'https://example.com/live.m3u8',
+        name: 'Fallback Name',
+        group: { title: 'News' },
+        tvg: {
+            id: 'epg-id',
+            name: 'Guide Name',
+            url: '',
+            logo: '',
+            rec: '',
+        },
+        http: {
+            referrer: '',
+            'user-agent': '',
+            origin: '',
+        },
+        radio: 'false',
+        ...overrides,
+    };
+}
+
+describe('resolveChannelEpgLookupKey', () => {
+    it('prefers tvg id when present', () => {
+        expect(resolveChannelEpgLookupKey(buildChannel())).toBe('epg-id');
+    });
+
+    it('falls back to tvg name before channel name', () => {
+        expect(
+            resolveChannelEpgLookupKey(
+                buildChannel({
+                    tvg: {
+                        id: '   ',
+                        name: 'Guide Name',
+                        url: '',
+                        logo: '',
+                        rec: '',
+                    },
+                    name: 'Channel Name',
+                })
+            )
+        ).toBe('Guide Name');
+    });
+
+    it('falls back to channel name when tvg fields are empty', () => {
+        expect(
+            resolveChannelEpgLookupKey(
+                buildChannel({
+                    tvg: {
+                        id: ' ',
+                        name: ' ',
+                        url: '',
+                        logo: '',
+                        rec: '',
+                    },
+                    name: 'Channel Name',
+                })
+            )
+        ).toBe('Channel Name');
+    });
+});
diff --git a/libs/m3u-state/src/lib/channel-epg-lookup.util.ts b/libs/m3u-state/src/lib/channel-epg-lookup.util.ts
new file mode 100644
index 0000000..52e1ee6
--- /dev/null
+++ b/libs/m3u-state/src/lib/channel-epg-lookup.util.ts
@@ -0,0 +1,12 @@
+import { Channel } from 'shared-interfaces';
+
+export function resolveChannelEpgLookupKey(
+    channel: Channel | null | undefined
+): string {
+    return (
+        channel?.tvg?.id?.trim() ||
+        channel?.tvg?.name?.trim() ||
+        channel?.name?.trim() ||
+        ''
+    );
+}
diff --git a/libs/m3u-state/src/lib/effects.spec.ts b/libs/m3u-state/src/lib/effects.spec.ts
new file mode 100644
index 0000000..60abd11
--- /dev/null
+++ b/libs/m3u-state/src/lib/effects.spec.ts
@@ -0,0 +1,45 @@
+import { Channel } from 'shared-interfaces';
+import { buildExternalPlayerPayload } from './external-player-payload.util';
+
+describe('buildExternalPlayerPayload', () => {
+    const activeChannel: Channel = {
+        id: 'channel-1',
+        name: 'Sample TV',
+        url: 'https://streams.example.com/live.m3u8',
+        group: { title: 'News' },
+        tvg: {
+            id: 'sample-tv',
+            name: 'Sample TV',
+            url: '',
+            logo: '',
+            rec: '3',
+        },
+        catchup: {
+            type: 'shift',
+            days: '3',
+        },
+        timeshift: '3',
+        http: {
+            referrer: 'https://referrer.example.com',
+            'user-agent': 'Codex Test Agent',
+            origin: 'https://origin.example.com',
+        },
+        radio: 'false',
+        epgParams: '',
+    };
+
+    it('uses the resolved archive url while preserving headers and title', () => {
+        expect(
+            buildExternalPlayerPayload(
+                activeChannel,
+                'https://archive.example.com/replay.m3u8?utc=123&lutc=456'
+            )
+        ).toEqual({
+            url: 'https://archive.example.com/replay.m3u8?utc=123&lutc=456',
+            title: 'Sample TV',
+            'user-agent': 'Codex Test Agent',
+            referer: 'https://referrer.example.com',
+            origin: 'https://origin.example.com',
+        });
+    });
+});
diff --git a/libs/m3u-state/src/lib/effects.ts b/libs/m3u-state/src/lib/effects.ts
new file mode 100644
index 0000000..0e335ab
--- /dev/null
+++ b/libs/m3u-state/src/lib/effects.ts
@@ -0,0 +1,412 @@
+import { inject, Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { resolveM3uCatchupUrl } from 'm3u-utils';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslateService } from '@ngx-translate/core';
+import {
+    EMPTY,
+    filter,
+    firstValueFrom,
+    map,
+    switchMap,
+    tap,
+    withLatestFrom,
+} from 'rxjs';
+import { DataService, PlaylistsService } from 'services';
+import {
+    OPEN_MPV_PLAYER,
+    OPEN_VLC_PLAYER,
+    Channel,
+    Playlist,
+    STORE_KEY,
+    VideoPlayer,
+} from 'shared-interfaces';
+import {
+    ChannelActions,
+    EpgActions,
+    FavoritesActions,
+    PlaylistActions,
+} from './actions';
+import {
+    selectActive,
+    selectActivePlaylistId,
+    selectChannels,
+    selectFavorites,
+} from './selectors';
+import { resolveChannelEpgLookupKey } from './channel-epg-lookup.util';
+import { buildExternalPlayerPayload } from './external-player-payload.util';
+
+@Injectable({ providedIn: 'any' })
+export class PlaylistEffects {
+    private actions$ = inject(Actions);
+    private playlistsService = inject(PlaylistsService);
+    private dataService = inject(DataService);
+    private epgService = inject(EpgService);
+    private router = inject(Router);
+    private snackBar = inject(MatSnackBar);
+    private storage = inject(StorageMap);
+    private store = inject(Store);
+    private translate = inject(TranslateService);
+
+    updateFavorites$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(FavoritesActions.updateFavorites),
+                withLatestFrom(
+                    this.store.select(selectFavorites),
+                    this.store.select(selectActivePlaylistId)
+                ),
+                filter(([, , playlistId]) => !!playlistId),
+                switchMap(([, favorites, playlistId]) =>
+                    this.playlistsService.updateFavorites(playlistId, favorites)
+                ),
+                tap(() => {
+                    this.snackBar.open(
+                        this.translate.instant('CHANNELS.FAVORITES_UPDATED'),
+                        undefined,
+                        { duration: 2000 }
+                    );
+                })
+            );
+        },
+        { dispatch: false }
+    );
+
+    setFavorites$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(FavoritesActions.setFavorites),
+                withLatestFrom(this.store.select(selectActivePlaylistId)),
+                filter(([, playlistId]) => !!playlistId),
+                switchMap(([action, playlistId]) =>
+                    this.playlistsService.setFavorites(
+                        playlistId,
+                        action.channelIds
+                    )
+                )
+            );
+        },
+        {
+            dispatch: false,
+        }
+    );
+
+    resolveActiveEpgProgram$ = createEffect(() => {
+        return this.actions$.pipe(
+            ofType(EpgActions.setActiveEpgProgram),
+            withLatestFrom(this.store.select(selectActive)),
+            map(([action, activeChannel]) => {
+                const playbackUrl = activeChannel
+                    ? resolveM3uCatchupUrl(activeChannel, action.program)
+                    : null;
+
+                return playbackUrl
+                    ? EpgActions.setActivePlaybackUrl({ playbackUrl })
+                    : EpgActions.resetActiveEpgProgram();
+            })
+        );
+    });
+
+    openArchivedPlayback$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(EpgActions.setActivePlaybackUrl),
+                withLatestFrom(this.store.select(selectActive)),
+                tap(([action, activeChannel]) => {
+                    void this.openWithConfiguredExternalPlayer(
+                        action.playbackUrl,
+                        activeChannel
+                    );
+                })
+            );
+        },
+        { dispatch: false }
+    );
+
+    returnToLivePlayback$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(EpgActions.returnToLivePlayback),
+                withLatestFrom(this.store.select(selectActive)),
+                filter(([, activeChannel]) => Boolean(activeChannel?.url)),
+                tap(([, activeChannel]) => {
+                    void this.openWithConfiguredExternalPlayer(
+                        activeChannel?.url ?? '',
+                        activeChannel
+                    );
+                })
+            );
+        },
+        { dispatch: false }
+    );
+
+    setActiveChannel$ = createEffect(() => {
+        return this.actions$.pipe(
+            ofType(ChannelActions.setActiveChannel),
+            // Skip the effect entirely when channel is falsy
+            filter((action) => !!action.channel),
+            map((action) => {
+                const { channel } = action;
+
+                // Use modern EPG service to get channel programs
+                const channelId = resolveChannelEpgLookupKey(channel);
+                if (channelId) {
+                    this.epgService.getChannelPrograms(channelId);
+                }
+
+                // Set user agent if specified on channel
+                if (channel.http['user-agent']) {
+                    window.electron?.setUserAgent(
+                        channel.http['user-agent'],
+                        channel.http.referrer
+                    );
+                }
+
+                firstValueFrom(this.storage.get(STORE_KEY.Settings)).then(
+                    (settings: any) => {
+                        if (
+                            settings &&
+                            Object.keys(settings).length > 0 &&
+                            settings.player === VideoPlayer.MPV &&
+                            channel.radio !== 'true'
+                        ) {
+                            this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, {
+                                url: channel.url,
+                                title: channel.name ?? '',
+                                'user-agent': channel.http['user-agent'],
+                                referer: channel.http.referrer,
+                                origin: channel.http.origin,
+                            });
+                        } else if (
+                            settings &&
+                            Object.keys(settings).length > 0 &&
+                            settings.player === VideoPlayer.VLC &&
+                            channel.radio !== 'true'
+                        )
+                            this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, {
+                                url: channel.url,
+                                title: channel.name ?? '',
+                                'user-agent': channel.http['user-agent'],
+                                referer: channel.http.referrer,
+                                origin: channel.http.origin,
+                            });
+                    }
+                );
+
+                return ChannelActions.setActiveChannelSuccess({
+                    channel: action.channel,
+                });
+            })
+        );
+    });
+
+    loadPlaylists$ = createEffect(() => {
+        return this.actions$.pipe(
+            ofType(PlaylistActions.loadPlaylists),
+            switchMap(() =>
+                this.playlistsService.getAllPlaylists().pipe(
+                    map((playlists) =>
+                        PlaylistActions.loadPlaylistsSuccess({
+                            playlists,
+                        })
+                    )
+                )
+            )
+        );
+    });
+
+    private async openWithConfiguredExternalPlayer(
+        playbackUrl: string,
+        activeChannel: Channel | undefined | null
+    ): Promise<void> {
+        const payload = buildExternalPlayerPayload(activeChannel, playbackUrl);
+        if (!payload) {
+            return;
+        }
+
+        const settings: any = await firstValueFrom(
+            this.storage.get(STORE_KEY.Settings)
+        );
+        if (!settings || Object.keys(settings).length === 0) {
+            return;
+        }
+
+        if (settings.player === VideoPlayer.MPV) {
+            this.dataService.sendIpcEvent(OPEN_MPV_PLAYER, payload);
+            return;
+        }
+
+        if (settings.player === VideoPlayer.VLC) {
+            this.dataService.sendIpcEvent(OPEN_VLC_PLAYER, payload);
+        }
+    }
+
+    removePlaylist$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(PlaylistActions.removePlaylist),
+                switchMap(async (action) => {
+                    await firstValueFrom(
+                        this.playlistsService.deletePlaylist(action.playlistId)
+                    );
+                })
+            );
+        },
+        { dispatch: false }
+    );
+
+    updatePlaylist$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(PlaylistActions.updatePlaylist),
+                switchMap((action) =>
+                    this.playlistsService.updatePlaylist(action.playlistId, {
+                        ...action.playlist,
+                        _id: action.playlistId,
+                    })
+                )
+            );
+        },
+        { dispatch: false }
+    );
+
+    parsePlaylist$ = createEffect(() => {
+        return this.actions$.pipe(
+            ofType(PlaylistActions.parsePlaylist),
+            map((action) =>
+                this.playlistsService.handlePlaylistParsing(
+                    action.uploadType,
+                    action.playlist,
+                    action.title,
+                    action.path
+                )
+            ),
+            map((playlist) =>
+                PlaylistActions.addPlaylist({
+                    playlist,
+                })
+            )
+        );
+    });
+
+    addPlaylist$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(
+                    PlaylistActions.addPlaylist,
+                    PlaylistActions.handleAddingPlaylistByUrl
+                ),
+                tap((action) => {
+                    if ('isTemporary' in action && action.isTemporary) {
+                        return;
+                    }
+
+                    this.navigateToPlaylist(action.playlist);
+                }),
+                switchMap((action) => {
+                    if ('isTemporary' in action && action.isTemporary) {
+                        return EMPTY;
+                    }
+                    return this.playlistsService.addPlaylist(action.playlist);
+                })
+            );
+        },
+        { dispatch: false }
+    );
+
+    updatePlaylistMeta$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(PlaylistActions.updatePlaylistMeta),
+                switchMap((action) =>
+                    this.playlistsService.updatePlaylistMeta(action.playlist)
+                )
+            );
+        },
+        { dispatch: false }
+    );
+
+    updatePlaylistPositions$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(PlaylistActions.updatePlaylistPositions),
+                switchMap((action) =>
+                    this.playlistsService.updatePlaylistPositions(
+                        action.positionUpdates
+                    )
+                )
+            );
+        },
+        { dispatch: false }
+    );
+
+    addManyPlaylists$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(PlaylistActions.addManyPlaylists),
+                switchMap((action) =>
+                    this.playlistsService.addManyPlaylists(action.playlists)
+                )
+            );
+        },
+        { dispatch: false }
+    );
+
+    updateManyPlaylists$ = createEffect(
+        () => {
+            return this.actions$.pipe(
+                ofType(PlaylistActions.updateManyPlaylists),
+                switchMap((action) =>
+                    this.playlistsService.updateManyPlaylists(action.playlists)
+                )
+            );
+        },
+        { dispatch: false }
+    );
+
+    setAdjacentChannelAsActive$ = createEffect(() => {
+        return this.actions$.pipe(
+            ofType(ChannelActions.setAdjacentChannelAsActive),
+            withLatestFrom(
+                this.store.select(selectChannels),
+                this.store.select(selectActive)
+            ),
+            map(([action, channels, activeChannel]) => {
+                let adjacentChannel;
+                const index = channels.findIndex(
+                    (channel) => channel.id === activeChannel?.id
+                );
+                if (action.direction === 'next') {
+                    if (index === channels.length - 1)
+                        adjacentChannel = activeChannel;
+                    adjacentChannel = channels[index + 1];
+                } else if (action.direction === 'previous') {
+                    if (index === -1 || index === 0)
+                        adjacentChannel = activeChannel;
+                    adjacentChannel = channels[index - 1];
+                }
+                return ChannelActions.setActiveChannelSuccess({
+                    channel: adjacentChannel!,
+                });
+            })
+        );
+    });
+
+    private navigateToPlaylist(playlist: Playlist): void {
+        if (playlist.serverUrl) {
+            void this.router.navigate(['/workspace', 'xtreams', playlist._id]);
+            return;
+        }
+
+        if (playlist.macAddress) {
+            void this.router.navigate(['/workspace', 'stalker', playlist._id]);
+            return;
+        }
+
+        void this.router.navigate(['/workspace', 'playlists', playlist._id]);
+    }
+}
diff --git a/libs/m3u-state/src/lib/external-player-payload.util.ts b/libs/m3u-state/src/lib/external-player-payload.util.ts
new file mode 100644
index 0000000..902a152
--- /dev/null
+++ b/libs/m3u-state/src/lib/external-player-payload.util.ts
@@ -0,0 +1,26 @@
+import { Channel } from 'shared-interfaces';
+
+export function buildExternalPlayerPayload(
+    activeChannel: Channel | undefined | null,
+    playbackUrl: string
+):
+    | {
+          url: string;
+          title: string;
+          'user-agent': string | undefined;
+          referer: string | undefined;
+          origin: string | undefined;
+      }
+    | null {
+    if (!playbackUrl || !activeChannel) {
+        return null;
+    }
+
+    return {
+        url: playbackUrl,
+        title: activeChannel.name ?? '',
+        'user-agent': activeChannel.http?.['user-agent'],
+        referer: activeChannel.http?.referrer,
+        origin: activeChannel.http?.origin,
+    };
+}
diff --git a/libs/m3u-state/src/lib/playlists.state.ts b/libs/m3u-state/src/lib/playlists.state.ts
new file mode 100644
index 0000000..f0b0145
--- /dev/null
+++ b/libs/m3u-state/src/lib/playlists.state.ts
@@ -0,0 +1,27 @@
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+import { PlaylistMeta } from 'shared-interfaces';
+
+export const playlistsAdapter: EntityAdapter<PlaylistMeta> =
+    createEntityAdapter<PlaylistMeta>({
+        selectId: (item: PlaylistMeta) => item._id,
+    });
+
+export interface PlaylistMetaState extends EntityState<PlaylistMeta> {
+    selectedId: string;
+    allPlaylistsLoaded: boolean;
+    selectedFilters: string[];
+}
+
+export const initialPlaylistMetaState: PlaylistMetaState =
+    playlistsAdapter.getInitialState({
+        selectedId: '',
+        allPlaylistsLoaded: false,
+        selectedFilters: ['m3u', 'xtream', 'stalker'],
+    });
+
+export const {
+    selectIds,
+    selectEntities: getPlaylistMetaEntities,
+    selectAll: getAllPlaylistsMeta,
+    selectTotal,
+} = playlistsAdapter.getSelectors();
diff --git a/libs/m3u-state/src/lib/reducers.ts b/libs/m3u-state/src/lib/reducers.ts
new file mode 100644
index 0000000..bb775cb
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers.ts
@@ -0,0 +1,2 @@
+// Re-export from the new modular reducers structure
+export * from './reducers/index';
diff --git a/libs/m3u-state/src/lib/reducers/channel.reducers.spec.ts b/libs/m3u-state/src/lib/reducers/channel.reducers.spec.ts
new file mode 100644
index 0000000..1b22c93
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/channel.reducers.spec.ts
@@ -0,0 +1,53 @@
+import { createReducer } from '@ngrx/store';
+import { Channel } from 'shared-interfaces';
+import { ChannelActions } from '../actions';
+import { initialState } from '../state';
+import { channelReducers } from './channel.reducers';
+
+const reducer = createReducer(initialState, ...channelReducers);
+
+describe('channelReducers', () => {
+    const sampleChannel = {
+        epgParams: '',
+        http: {
+            origin: '',
+            referrer: '',
+            'user-agent': '',
+        },
+        id: 'channel-1',
+        name: 'Sample TV',
+        radio: 'false',
+        tvg: {
+            id: 'sample-tvg-id',
+            logo: '',
+            name: 'Sample TV',
+            rec: '',
+            url: '',
+        },
+        url: 'https://example.com/live.m3u8',
+    } as Channel;
+
+    it('tracks explicit channel loading state', () => {
+        const nextState = reducer(
+            initialState,
+            ChannelActions.setChannelsLoading({ loading: true })
+        );
+
+        expect(nextState.channelsLoading).toBe(true);
+    });
+
+    it('stores channels and clears the loading flag when channel data arrives', () => {
+        const loadingState = reducer(
+            initialState,
+            ChannelActions.setChannelsLoading({ loading: true })
+        );
+
+        const nextState = reducer(
+            loadingState,
+            ChannelActions.setChannels({ channels: [sampleChannel] })
+        );
+
+        expect(nextState.channels).toEqual([sampleChannel]);
+        expect(nextState.channelsLoading).toBe(false);
+    });
+});
diff --git a/libs/m3u-state/src/lib/reducers/channel.reducers.ts b/libs/m3u-state/src/lib/reducers/channel.reducers.ts
new file mode 100644
index 0000000..f640081
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/channel.reducers.ts
@@ -0,0 +1,38 @@
+import { on } from '@ngrx/store';
+import { Channel } from 'shared-interfaces';
+import { ChannelActions } from '../actions';
+import { PlaylistState } from '../state';
+
+export const channelReducers = [
+    on(ChannelActions.setChannelsLoading, (state, action): PlaylistState => {
+        return {
+            ...state,
+            channelsLoading: action.loading,
+        };
+    }),
+    on(
+        ChannelActions.setActiveChannelSuccess,
+        (state, action): PlaylistState => {
+            const { channel } = action;
+            return {
+                ...state,
+                active: { ...channel, epgParams: '' } as Channel,
+                activePlaybackUrl: null,
+            };
+        }
+    ),
+    on(ChannelActions.resetActiveChannel, (state): PlaylistState => {
+        return {
+            ...state,
+            active: undefined,
+            activePlaybackUrl: null,
+        };
+    }),
+    on(ChannelActions.setChannels, (state, action): PlaylistState => {
+        return {
+            ...state,
+            channelsLoading: false,
+            channels: action.channels,
+        };
+    }),
+];
diff --git a/libs/m3u-state/src/lib/reducers/epg.reducers.spec.ts b/libs/m3u-state/src/lib/reducers/epg.reducers.spec.ts
new file mode 100644
index 0000000..d7164f0
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/epg.reducers.spec.ts
@@ -0,0 +1,111 @@
+import { createReducer } from '@ngrx/store';
+import { EpgActions } from '../actions';
+import { initialState } from '../state';
+import { epgReducers } from './epg.reducers';
+
+const reducer = createReducer(initialState, ...epgReducers);
+
+describe('epgReducers', () => {
+    it('does not recreate the active channel when epg params are already empty', () => {
+        const state = {
+            ...initialState,
+            active: {
+                id: 'channel-1',
+                name: 'ARD-alpha',
+                url: 'https://example.com/live.m3u8',
+                tvg: {
+                    id: '',
+                    name: 'ARD-alpha',
+                    url: '',
+                    logo: '',
+                    rec: '',
+                },
+                group: { title: '' },
+                http: {
+                    referrer: '',
+                    'user-agent': '',
+                    origin: '',
+                },
+                radio: 'false',
+                epgParams: '',
+            },
+            activePlaybackUrl: null,
+        };
+
+        const nextState = reducer(state, EpgActions.resetActiveEpgProgram());
+
+        expect(nextState).toBe(state);
+    });
+
+    it('clears epg params when they are present', () => {
+        const state = {
+            ...initialState,
+            active: {
+                id: 'channel-1',
+                name: 'ARD-alpha',
+                url: 'https://example.com/live.m3u8',
+                tvg: {
+                    id: '',
+                    name: 'ARD-alpha',
+                    url: '',
+                    logo: '',
+                    rec: '',
+                },
+                group: { title: '' },
+                http: {
+                    referrer: '',
+                    'user-agent': '',
+                    origin: '',
+                },
+                radio: 'false',
+                epgParams: '?utc=123&lutc=456',
+            },
+            activePlaybackUrl: 'https://archive.example.com/catchup.m3u8',
+        };
+
+        const nextState = reducer(state, EpgActions.resetActiveEpgProgram());
+
+        expect(nextState).not.toBe(state);
+        expect(nextState.active?.epgParams).toBe('');
+        expect(nextState.activePlaybackUrl).toBeNull();
+    });
+
+    it('stores the resolved playback url without mutating the active channel', () => {
+        const state = {
+            ...initialState,
+            active: {
+                id: 'channel-1',
+                name: 'ARD-alpha',
+                url: 'https://example.com/live.m3u8',
+                tvg: {
+                    id: '',
+                    name: 'ARD-alpha',
+                    url: '',
+                    logo: '',
+                    rec: '',
+                },
+                group: { title: '' },
+                http: {
+                    referrer: '',
+                    'user-agent': '',
+                    origin: '',
+                },
+                radio: 'false',
+                epgParams: '',
+            },
+            activePlaybackUrl: null,
+        };
+
+        const nextState = reducer(
+            state,
+            EpgActions.setActivePlaybackUrl({
+                playbackUrl: 'https://archive.example.com/catchup.m3u8',
+            })
+        );
+
+        expect(nextState.activePlaybackUrl).toBe(
+            'https://archive.example.com/catchup.m3u8'
+        );
+        expect(nextState.active?.url).toBe('https://example.com/live.m3u8');
+    });
+});
diff --git a/libs/m3u-state/src/lib/reducers/epg.reducers.ts b/libs/m3u-state/src/lib/reducers/epg.reducers.ts
new file mode 100644
index 0000000..aafce29
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/epg.reducers.ts
@@ -0,0 +1,46 @@
+import { on } from '@ngrx/store';
+import { Channel } from 'shared-interfaces';
+import { EpgActions } from '../actions';
+import { PlaylistState } from '../state';
+
+export const epgReducers = [
+    on(EpgActions.setActivePlaybackUrl, (state, action): PlaylistState => ({
+        ...state,
+        activePlaybackUrl: action.playbackUrl,
+    })),
+    on(
+        EpgActions.resetActiveEpgProgram,
+        EpgActions.returnToLivePlayback,
+        (state): PlaylistState => {
+            if (!state.active && !state.activePlaybackUrl) {
+                return state;
+            }
+
+            if (!state.activePlaybackUrl && !state.active?.epgParams) {
+                return state;
+            }
+
+            return {
+                ...state,
+                activePlaybackUrl: null,
+                active: state.active
+                    ? ({ ...state.active, epgParams: '' } as Channel)
+                    : undefined,
+            };
+        }
+    ),
+    on(
+        EpgActions.setCurrentEpgProgram,
+        (state, action): PlaylistState => ({
+            ...state,
+            currentEpgProgram: action.program,
+        })
+    ),
+    on(
+        EpgActions.setEpgAvailableFlag,
+        (state, action): PlaylistState => ({
+            ...state,
+            epgAvailable: action.value,
+        })
+    ),
+];
diff --git a/libs/m3u-state/src/lib/reducers/favorites.reducers.ts b/libs/m3u-state/src/lib/reducers/favorites.reducers.ts
new file mode 100644
index 0000000..4e83e09
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/favorites.reducers.ts
@@ -0,0 +1,57 @@
+import { on } from '@ngrx/store';
+import { FavoritesActions } from '../actions';
+import { PlaylistState } from '../state';
+
+export const favoritesReducers = [
+    on(FavoritesActions.updateFavorites, (state, action): PlaylistState => {
+        const selectedId = state.playlists.selectedId;
+        const playlist = state.playlists.entities[selectedId];
+        if (!selectedId || !playlist) {
+            return state;
+        }
+
+        const { channel } = action;
+        const playlistFavorites = (playlist.favorites ?? []).filter(
+            (favorite): favorite is string => typeof favorite === 'string'
+        );
+        const favorites = playlistFavorites.includes(channel.url)
+            ? playlistFavorites.filter((url) => url !== channel.url)
+            : [...playlistFavorites, channel.url];
+
+        return {
+            ...state,
+            playlists: {
+                ...state.playlists,
+                entities: {
+                    ...state.playlists.entities,
+                    [selectedId]: {
+                        ...playlist,
+                        favorites,
+                    },
+                },
+            },
+        };
+    }),
+    on(FavoritesActions.setFavorites, (state, action): PlaylistState => {
+        const selectedId = state.playlists.selectedId;
+        const playlist = state.playlists.entities[selectedId];
+        if (!selectedId || !playlist) {
+            return state;
+        }
+
+        const { channelIds } = action;
+        return {
+            ...state,
+            playlists: {
+                ...state.playlists,
+                entities: {
+                    ...state.playlists.entities,
+                    [selectedId]: {
+                        ...playlist,
+                        favorites: channelIds,
+                    },
+                },
+            },
+        };
+    }),
+];
diff --git a/libs/m3u-state/src/lib/reducers/filter.reducers.ts b/libs/m3u-state/src/lib/reducers/filter.reducers.ts
new file mode 100644
index 0000000..a453399
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/filter.reducers.ts
@@ -0,0 +1,18 @@
+import { on } from '@ngrx/store';
+import { FilterActions } from '../actions';
+import { PlaylistState } from '../state';
+
+export const filterReducers = [
+    on(
+        FilterActions.setSelectedFilters,
+        (state, { selectedFilters }): PlaylistState => {
+            return {
+                ...state,
+                playlists: {
+                    ...state.playlists,
+                    selectedFilters,
+                },
+            };
+        }
+    ),
+];
diff --git a/libs/m3u-state/src/lib/reducers/index.ts b/libs/m3u-state/src/lib/reducers/index.ts
new file mode 100644
index 0000000..177a008
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/index.ts
@@ -0,0 +1,34 @@
+import { createReducer } from '@ngrx/store';
+import { initialState, PlaylistState } from '../state';
+import { channelReducers } from './channel.reducers';
+import { epgReducers } from './epg.reducers';
+import { favoritesReducers } from './favorites.reducers';
+import { filterReducers } from './filter.reducers';
+import { playlistReducers } from './playlist.reducers';
+
+export const playlistReducer = createReducer(
+    initialState,
+    ...epgReducers,
+    ...channelReducers,
+    ...playlistReducers,
+    ...favoritesReducers,
+    ...filterReducers
+);
+
+// Selectors
+export const selectPlaylists = (state: PlaylistState) => state.playlists;
+export const selectPlaylistId = (state: PlaylistState) =>
+    state.playlists?.selectedId;
+
+export const selectIsEpgAvailableReducer = (state: PlaylistState) =>
+    state.epgAvailable;
+export const selectActiveReducer = (state: PlaylistState) => state.active;
+export const selectActivePlaybackUrlReducer = (state: PlaylistState) =>
+    state.activePlaybackUrl;
+export const selectCurrentEpgProgramReducer = (state: PlaylistState) =>
+    state.currentEpgProgram;
+export const selectChannelsLoadingReducer = (state: PlaylistState) =>
+    state.channelsLoading;
+export const selectChannelsReducer = (state: PlaylistState) => state.channels;
+export const selectPlaylistsLoadingFlagReducer = (state: PlaylistState) =>
+    state.playlists?.allPlaylistsLoaded;
diff --git a/libs/m3u-state/src/lib/reducers/playlist.reducers.spec.ts b/libs/m3u-state/src/lib/reducers/playlist.reducers.spec.ts
new file mode 100644
index 0000000..1c3446d
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/playlist.reducers.spec.ts
@@ -0,0 +1,133 @@
+import { createReducer } from '@ngrx/store';
+import { PlaylistActions } from '../actions';
+import { playlistsAdapter } from '../playlists.state';
+import { initialState } from '../state';
+import { playlistReducers } from './playlist.reducers';
+import { Channel, Playlist, PlaylistMeta } from 'shared-interfaces';
+
+const reducer = createReducer(initialState, ...playlistReducers);
+
+describe('playlistReducers', () => {
+    it('persists updateDate and hiddenGroupTitles when playlist meta is updated', () => {
+        const existingPlaylist: PlaylistMeta = {
+            _id: 'playlist-1',
+            title: 'Xtream Playlist',
+            count: 0,
+            importDate: '2026-03-28T00:00:00.000Z',
+            autoRefresh: false,
+            serverUrl: 'http://localhost:8080',
+            username: 'demo',
+            password: 'secret',
+        };
+        const state = {
+            ...initialState,
+            playlists: playlistsAdapter.addOne(
+                existingPlaylist,
+                initialState.playlists
+            ),
+        };
+
+        const nextState = reducer(
+            state,
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    ...existingPlaylist,
+                    hiddenGroupTitles: ['Movies', 'News'],
+                    updateDate: 1712145600000,
+                },
+            })
+        );
+
+        expect(nextState.playlists.entities['playlist-1']?.updateDate).toBe(
+            1712145600000
+        );
+        expect(
+            nextState.playlists.entities['playlist-1']?.hiddenGroupTitles
+        ).toEqual(['Movies', 'News']);
+    });
+
+    it('updates the active playlist channel cache and clears loading on playlist refresh', () => {
+        const refreshedChannel = {
+            epgParams: '',
+            http: {
+                origin: '',
+                referrer: '',
+                'user-agent': '',
+            },
+            id: 'channel-1',
+            name: 'Refreshed TV',
+            radio: 'false',
+            tvg: {
+                id: 'channel-1',
+                logo: '',
+                name: 'Refreshed TV',
+                rec: '',
+                url: '',
+            },
+            url: 'https://example.com/refreshed.m3u8',
+        } as Channel;
+        const existingPlaylist: PlaylistMeta = {
+            _id: 'playlist-1',
+            count: 1,
+            importDate: '2026-03-28T00:00:00.000Z',
+            title: 'Playlist One',
+        } as PlaylistMeta;
+        const refreshedPlaylist = {
+            playlist: {
+                items: [refreshedChannel],
+            },
+        } as Playlist;
+        const state = {
+            ...initialState,
+            channelsLoading: true,
+            playlists: playlistsAdapter.addOne(existingPlaylist, {
+                ...initialState.playlists,
+                selectedId: 'playlist-1',
+            }),
+        };
+
+        const nextState = reducer(
+            state,
+            PlaylistActions.updatePlaylist({
+                playlist: refreshedPlaylist,
+                playlistId: 'playlist-1',
+            })
+        );
+
+        expect(nextState.channels).toEqual([refreshedChannel]);
+        expect(nextState.channelsLoading).toBe(false);
+    });
+
+    it('keeps hiddenGroupTitles on playlist refresh when the refreshed payload omits them', () => {
+        const existingPlaylist: PlaylistMeta = {
+            _id: 'playlist-1',
+            count: 1,
+            hiddenGroupTitles: ['Radio-de'],
+            importDate: '2026-03-28T00:00:00.000Z',
+            title: 'Playlist One',
+        } as PlaylistMeta;
+        const state = {
+            ...initialState,
+            playlists: playlistsAdapter.addOne(existingPlaylist, {
+                ...initialState.playlists,
+                selectedId: 'playlist-1',
+            }),
+        };
+
+        const nextState = reducer(
+            state,
+            PlaylistActions.updatePlaylist({
+                playlist: {
+                    playlist: {
+                        items: [],
+                    },
+                } as Playlist,
+                playlistId: 'playlist-1',
+            })
+        );
+
+        expect(
+            nextState.playlists.entities['playlist-1']?.hiddenGroupTitles
+        ).toEqual(['Radio-de']);
+    });
+});
diff --git a/libs/m3u-state/src/lib/reducers/playlist.reducers.ts b/libs/m3u-state/src/lib/reducers/playlist.reducers.ts
new file mode 100644
index 0000000..8962d60
--- /dev/null
+++ b/libs/m3u-state/src/lib/reducers/playlist.reducers.ts
@@ -0,0 +1,197 @@
+import { on } from '@ngrx/store';
+import { Channel } from 'shared-interfaces';
+import { PlaylistActions } from '../actions';
+import { playlistsAdapter } from '../playlists.state';
+import { PlaylistState } from '../state';
+
+export const playlistReducers = [
+    on(PlaylistActions.loadPlaylistsSuccess, (state, action): PlaylistState => {
+        return {
+            ...state,
+            playlists: playlistsAdapter.addMany(action.playlists, {
+                ...state.playlists,
+                allPlaylistsLoaded: true,
+            }),
+        };
+    }),
+    on(PlaylistActions.removePlaylist, (state, action): PlaylistState => {
+        const playlists = playlistsAdapter.removeOne(
+            action.playlistId,
+            state.playlists
+        );
+        return {
+            ...state,
+            playlists: {
+                ...playlists,
+                selectedId:
+                    state.playlists.selectedId === action.playlistId
+                        ? ''
+                        : playlists.selectedId,
+            },
+        };
+    }),
+    on(PlaylistActions.updatePlaylist, (state, action): PlaylistState => {
+        const isActivePlaylist =
+            state.playlists.selectedId === action.playlistId;
+        return {
+            ...state,
+            channels: isActivePlaylist
+                ? (action.playlist.playlist.items as Channel[])
+                : state.channels,
+            channelsLoading: isActivePlaylist ? false : state.channelsLoading,
+            playlists: playlistsAdapter.updateOne(
+                {
+                    id: action.playlistId,
+                    changes: {
+                        ...action.playlist,
+                        _id: action.playlistId,
+                        updateDate: Date.now(),
+                        count: action.playlist.playlist.items.length,
+                        userAgent: action.playlist.userAgent,
+                        favorites:
+                            state.playlists.entities[action.playlistId]
+                                ?.favorites ?? [],
+                    },
+                },
+                state.playlists
+            ),
+        };
+    }),
+    on(PlaylistActions.addPlaylist, (state, action): PlaylistState => {
+        return {
+            ...state,
+            playlists: playlistsAdapter.addOne(
+                action.playlist,
+                state.playlists
+            ),
+        };
+    }),
+    on(PlaylistActions.addManyPlaylists, (state, action): PlaylistState => {
+        return {
+            ...state,
+            playlists: playlistsAdapter.addMany(
+                action.playlists,
+                state.playlists
+            ),
+        };
+    }),
+    on(PlaylistActions.setActivePlaylist, (state, action): PlaylistState => {
+        return {
+            ...state,
+            playlists: {
+                ...state.playlists,
+                selectedId: action.playlistId,
+            },
+        };
+    }),
+    on(
+        PlaylistActions.updatePlaylistPositions,
+        (state, action): PlaylistState => {
+            return {
+                ...state,
+                playlists: playlistsAdapter.updateMany(
+                    action.positionUpdates,
+                    state.playlists
+                ),
+            };
+        }
+    ),
+    on(PlaylistActions.updatePlaylistMeta, (state, action): PlaylistState => {
+        const p = action.playlist;
+        return {
+            ...state,
+            playlists: playlistsAdapter.updateOne(
+                {
+                    id: p._id,
+                    changes: {
+                        ...(p.title != null ? { title: p.title } : {}),
+                        ...(p.autoRefresh != null
+                            ? { autoRefresh: p.autoRefresh }
+                            : {}),
+                        ...(p.userAgent != null
+                            ? { userAgent: p.userAgent }
+                            : {}),
+                        ...(p.referrer !== undefined
+                            ? { referrer: p.referrer }
+                            : {}),
+                        ...(p.origin !== undefined ? { origin: p.origin } : {}),
+                        ...(p.serverUrl != null
+                            ? { serverUrl: p.serverUrl }
+                            : {}),
+                        ...(p.username != null ? { username: p.username } : {}),
+                        ...(p.password != null ? { password: p.password } : {}),
+                        ...(p.macAddress != null
+                            ? { macAddress: p.macAddress }
+                            : {}),
+                        ...(p.portalUrl != null
+                            ? { portalUrl: p.portalUrl }
+                            : {}),
+                        ...(p.isFullStalkerPortal !== undefined
+                            ? {
+                                  isFullStalkerPortal: p.isFullStalkerPortal,
+                              }
+                            : {}),
+                        ...(p.favorites != null
+                            ? { favorites: p.favorites }
+                            : {}),
+                        ...(p.recentlyViewed != null
+                            ? { recentlyViewed: p.recentlyViewed }
+                            : {}),
+                        ...(p.hiddenGroupTitles != null
+                            ? { hiddenGroupTitles: p.hiddenGroupTitles }
+                            : {}),
+                        ...(p.updateDate !== undefined
+                            ? { updateDate: p.updateDate }
+                            : {}),
+                    },
+                },
+                state.playlists
+            ),
+        };
+    }),
+    on(PlaylistActions.updateManyPlaylists, (state, action): PlaylistState => {
+        return {
+            ...state,
+            playlists: playlistsAdapter.updateMany(
+                action.playlists.map((updatedPlaylist) => ({
+                    id: updatedPlaylist._id,
+                    changes: {
+                        ...updatedPlaylist,
+                        updateDate: Date.now(),
+                    },
+                })),
+                state.playlists
+            ),
+        };
+    }),
+    on(PlaylistActions.removeAllPlaylists, (state): PlaylistState => {
+        const playlists = playlistsAdapter.removeAll(state.playlists);
+        return {
+            ...state,
+            playlists: {
+                ...playlists,
+                selectedId: '',
+            },
+        };
+    }),
+    on(
+        PlaylistActions.handleAddingPlaylistByUrl,
+        (state, action): PlaylistState => {
+            if (action.isTemporary) {
+                return {
+                    ...state,
+                    channelsLoading: false,
+                    channels: action.playlist.playlist.items as Channel[],
+                };
+            } else {
+                return {
+                    ...state,
+                    playlists: playlistsAdapter.addOne(
+                        action.playlist,
+                        state.playlists
+                    ),
+                };
+            }
+        }
+    ),
+];
diff --git a/libs/m3u-state/src/lib/router.selectors.ts b/libs/m3u-state/src/lib/router.selectors.ts
new file mode 100644
index 0000000..d1f5e38
--- /dev/null
+++ b/libs/m3u-state/src/lib/router.selectors.ts
@@ -0,0 +1,14 @@
+import { getRouterSelectors } from '@ngrx/router-store';
+
+export const {
+    selectCurrentRoute,
+    selectFragment,
+    selectQueryParams,
+    selectQueryParam,
+    selectRouteParams,
+    selectRouteParam,
+    selectRouteData,
+    selectRouteDataParam,
+    selectUrl,
+    selectTitle,
+} = getRouterSelectors();
diff --git a/libs/m3u-state/src/lib/selectors.spec.ts b/libs/m3u-state/src/lib/selectors.spec.ts
new file mode 100644
index 0000000..861afb5
--- /dev/null
+++ b/libs/m3u-state/src/lib/selectors.spec.ts
@@ -0,0 +1,45 @@
+import { PlaylistMeta } from 'shared-interfaces';
+import { PlaylistState } from './state';
+import { selectActivePlaylist, selectChannelsLoading } from './selectors';
+
+describe('selectors', () => {
+    const playlistOne = {
+        _id: 'playlist-1',
+        title: 'Playlist One',
+    } as PlaylistMeta;
+    const playlistTwo = {
+        _id: 'playlist-2',
+        title: 'Playlist Two',
+    } as PlaylistMeta;
+    const entities = {
+        'playlist-1': playlistOne,
+        'playlist-2': playlistTwo,
+    };
+
+    describe('selectActivePlaylist', () => {
+        it('resolves the active playlist from entity state and selected id', () => {
+            expect(selectActivePlaylist.projector(entities, 'playlist-2')).toBe(
+                playlistTwo
+            );
+        });
+
+        it('returns null when there is no active playlist id', () => {
+            expect(selectActivePlaylist.projector(entities, '')).toBeNull();
+        });
+    });
+
+    describe('selectChannelsLoading', () => {
+        it('returns the current M3U channel loading flag', () => {
+            expect(
+                selectChannelsLoading.projector({
+                    channelsLoading: true,
+                } as PlaylistState)
+            ).toBe(true);
+            expect(
+                selectChannelsLoading.projector({
+                    channelsLoading: false,
+                } as PlaylistState)
+            ).toBe(false);
+        });
+    });
+});
diff --git a/libs/m3u-state/src/lib/selectors.ts b/libs/m3u-state/src/lib/selectors.ts
new file mode 100644
index 0000000..fe9a6fd
--- /dev/null
+++ b/libs/m3u-state/src/lib/selectors.ts
@@ -0,0 +1,105 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { Playlist } from 'shared-interfaces';
+import * as fromPlaylistMetaState from './playlists.state';
+import * as fromPlaylistState from './reducers';
+import { PlaylistState } from './state';
+
+export const selectPlaylistState =
+    createFeatureSelector<PlaylistState>('playlistState');
+
+export const selectIsEpgAvailable = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectIsEpgAvailableReducer
+);
+
+export const selectActive = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectActiveReducer
+);
+
+export const selectActivePlaybackUrl = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectActivePlaybackUrlReducer
+);
+
+export const selectCurrentEpgProgram = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectCurrentEpgProgramReducer
+);
+
+export const selectChannelsLoading = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectChannelsLoadingReducer
+);
+
+export const selectChannels = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectChannelsReducer
+);
+
+export const selectPlaylistsLoadingFlag = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectPlaylistsLoadingFlagReducer
+);
+
+/** Playlist entity store selectors */
+export const selectPlaylistsMetaState = createSelector(
+    selectPlaylistState,
+    fromPlaylistState.selectPlaylists
+);
+
+export const selectAllPlaylistsMeta = createSelector(
+    selectPlaylistsMetaState,
+    fromPlaylistMetaState.getAllPlaylistsMeta
+);
+
+export const selectActiveTypeFilters = createSelector(
+    selectPlaylistsMetaState,
+    (state) => state.selectedFilters
+);
+
+export const selectPlaylistEntity = (id: string) =>
+    createSelector(selectPlaylistEntities, (entities) => entities[id]);
+
+export const selectActivePlaylistId = createSelector(
+    selectPlaylistsMetaState,
+    (state) => state.selectedId
+);
+
+export const selectPlaylistEntities = createSelector(
+    selectPlaylistsMetaState,
+    fromPlaylistMetaState.getPlaylistMetaEntities
+);
+
+export const selectActivePlaylist = createSelector(
+    selectPlaylistEntities,
+    selectActivePlaylistId,
+    (entities, activePlaylistId) => {
+        if (!entities || !activePlaylistId) {
+            return null;
+        }
+
+        return entities[activePlaylistId] ?? null;
+    }
+);
+
+export const selectPlaylistTitle = createSelector(
+    selectActivePlaylist,
+    (playlist) => playlist?.title || playlist?.filename || 'Untitled playlist'
+);
+
+export const selectPlaylistById = (id: string) =>
+    createSelector(selectPlaylistEntities, (entities) => {
+        if (entities) {
+            return entities[id] as Playlist;
+        }
+        return null;
+    });
+
+export const selectFavorites = createSelector(
+    selectActivePlaylist,
+    (playlist) =>
+        (playlist?.favorites || []).filter(
+            (favorite): favorite is string => typeof favorite === 'string'
+        )
+);
diff --git a/libs/m3u-state/src/lib/state.ts b/libs/m3u-state/src/lib/state.ts
new file mode 100644
index 0000000..f0a2abc
--- /dev/null
+++ b/libs/m3u-state/src/lib/state.ts
@@ -0,0 +1,24 @@
+import { Channel } from 'shared-interfaces';
+import { initialPlaylistMetaState, PlaylistMetaState } from './playlists.state';
+
+import { EpgProgram } from 'shared-interfaces';
+
+export interface PlaylistState {
+    active: Channel | undefined;
+    activePlaybackUrl: string | null;
+    currentEpgProgram: EpgProgram | undefined;
+    epgAvailable: boolean;
+    channelsLoading: boolean;
+    channels: Channel[]; // TODO: use entity store
+    playlists: PlaylistMetaState;
+}
+
+export const initialState: PlaylistState = {
+    active: undefined,
+    activePlaybackUrl: null,
+    currentEpgProgram: undefined,
+    epgAvailable: false,
+    channelsLoading: false,
+    channels: [],
+    playlists: initialPlaylistMetaState,
+};
diff --git a/libs/m3u-state/src/test-setup.ts b/libs/m3u-state/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/m3u-state/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/m3u-state/tsconfig.json b/libs/m3u-state/tsconfig.json
new file mode 100644
index 0000000..7cac292
--- /dev/null
+++ b/libs/m3u-state/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/m3u-state/tsconfig.lib.json b/libs/m3u-state/tsconfig.lib.json
new file mode 100644
index 0000000..643cfe5
--- /dev/null
+++ b/libs/m3u-state/tsconfig.lib.json
@@ -0,0 +1,18 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "files": ["../../global.d.ts"],
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": ["src/**/*.ts"]
+}
diff --git a/libs/m3u-state/tsconfig.spec.json b/libs/m3u-state/tsconfig.spec.json
new file mode 100644
index 0000000..cc26179
--- /dev/null
+++ b/libs/m3u-state/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/playlist/import/feature/project.json b/libs/playlist/import/feature/project.json
new file mode 100644
index 0000000..f2b6b48
--- /dev/null
+++ b/libs/playlist/import/feature/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "playlist-import-feature",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/playlist/import/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:playlist", "domain:playlist-import", "type:feature"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/playlist/import/feature/src/index.ts b/libs/playlist/import/feature/src/index.ts
new file mode 100644
index 0000000..58e6f42
--- /dev/null
+++ b/libs/playlist/import/feature/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/add-playlist-dialog/add-playlist-dialog.component';
diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.html b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.html
new file mode 100644
index 0000000..54fbd3a
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.html
@@ -0,0 +1,155 @@
+<div class="apd">
+    <h2 mat-dialog-title>
+        @if (productBranding?.xtreamOnlyUi) {
+            {{ 'HOME.KIRATV.ADD_PLAYLIST_TITLE' | translate }}
+        } @else {
+            {{ 'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate }}
+        }
+    </h2>
+
+    <mat-dialog-content>
+        @if (!productBranding?.xtreamOnlyUi) {
+            <div class="apd-segmented" role="tablist" aria-label="Playlist category">
+                @for (opt of categoryOptions; track opt.value) {
+                    <button
+                        type="button"
+                        role="tab"
+                        [attr.aria-selected]="category() === opt.value"
+                        class="apd-segment"
+                        [class.active]="category() === opt.value"
+                        (click)="category.set(opt.value)"
+                    >
+                        {{ opt.label }}
+                    </button>
+                }
+            </div>
+
+            @if (category() === 'm3u') {
+                <div
+                    class="apd-segmented apd-segmented--sub"
+                    role="tablist"
+                    aria-label="M3U source"
+                >
+                    @for (opt of subtypeOptions; track opt.value) {
+                        <button
+                            type="button"
+                            role="tab"
+                            [attr.aria-selected]="m3uSubType() === opt.value"
+                            class="apd-segment"
+                            [class.active]="m3uSubType() === opt.value"
+                            (click)="m3uSubType.set(opt.value)"
+                        >
+                            {{ opt.labelKey | translate }}
+                        </button>
+                    }
+                </div>
+            }
+        }
+
+        <div class="apd-form-area">
+            @switch (playlistType()) {
+                @case ('file') {
+                    <app-file-upload
+                        (fileRejected)="rejectFile($event)"
+                        (imported)="onFileImported()"
+                        (closeDialog)="closeDialog()"
+                    />
+                }
+                @case ('url') {
+                    <app-url-upload />
+                }
+                @case ('text') {
+                    <app-text-import (textAdded)="uploadAsText($event)" />
+                }
+                @case ('stalker') {
+                    <app-stalker-portal-import (addClicked)="closeDialog()" />
+                }
+                @case ('xtream') {
+                    <app-xtream-code-import (addClicked)="closeDialog()" />
+                }
+            }
+        </div>
+    </mat-dialog-content>
+
+    <mat-dialog-actions align="end">
+        <button mat-button type="button" (click)="closeDialog()">
+            {{ 'CANCEL' | translate }}
+        </button>
+
+        @switch (playlistType()) {
+            @case ('url') {
+                <button
+                    mat-flat-button
+                    color="accent"
+                    type="button"
+                    [disabled]="!urlUpload()?.form?.valid"
+                    (click)="submitUrlPlaylist()"
+                >
+                    {{ 'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate }}
+                </button>
+            }
+            @case ('file') {
+                <button
+                    mat-flat-button
+                    color="accent"
+                    type="button"
+                    [disabled]="!fileUpload()?.selectedFile()"
+                    (click)="fileUpload()?.confirm()"
+                >
+                    {{ 'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate }}
+                </button>
+            }
+            @case ('text') {
+                <button
+                    mat-flat-button
+                    color="accent"
+                    type="button"
+                    [disabled]="!textImport()?.textForm?.valid"
+                    (click)="textImport()?.textAdded?.emit(textImport()?.textForm?.value?.text)"
+                >
+                    {{ 'HOME.TEXT_IMPORT.BUTTON_LABEL' | translate }}
+                </button>
+            }
+            @case ('xtream') {
+                <button
+                    mat-stroked-button
+                    type="button"
+                    [disabled]="!xtreamImport()?.form?.valid || xtreamImport()?.isTestingConnection"
+                    (click)="xtreamImport()?.testConnection()"
+                >
+                    {{
+                        xtreamImport()?.isTestingConnection
+                            ? ('HOME.XTREAM_PLAYLIST.TESTING' | translate)
+                            : ('HOME.XTREAM_PLAYLIST.TEST_CONNECTION' | translate)
+                    }}
+                </button>
+                <button
+                    mat-flat-button
+                    color="accent"
+                    type="button"
+                    [disabled]="!xtreamImport()?.form?.valid"
+                    (click)="xtreamImport()?.addPlaylist()"
+                >
+                    {{ 'HOME.XTREAM_PLAYLIST.ADD' | translate }}
+                </button>
+            }
+            @case ('stalker') {
+                @if (stalkerImport()?.isLoading()) {
+                    <button mat-flat-button color="accent" type="button" disabled>
+                        {{ 'HOME.STALKER_PORTAL.VALIDATING' | translate }}...
+                    </button>
+                } @else {
+                    <button
+                        mat-flat-button
+                        color="accent"
+                        type="button"
+                        [disabled]="!stalkerImport()?.form?.valid"
+                        (click)="stalkerImport()?.addPlaylist()"
+                    >
+                        {{ 'HOME.STALKER_PORTAL.ADD' | translate }}
+                    </button>
+                }
+            }
+        }
+    </mat-dialog-actions>
+</div>
diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
new file mode 100644
index 0000000..52fd704
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
@@ -0,0 +1,118 @@
+.apd {
+    --apd-border: var(--app-widget-header-border);
+    --apd-heading: var(--app-heading-color);
+    --apd-body: var(--app-body-color);
+    --apd-muted: var(--app-muted-color);
+    --apd-surface-raised: var(--app-widget-header-bg);
+    --apd-accent: var(--app-selection-color);
+    --apd-segment-track: color-mix(in srgb, var(--app-shell-bg) 70%, transparent);
+    --apd-segment-active: color-mix(
+        in srgb,
+        var(--app-widget-header-bg) 70%,
+        white 14%
+    );
+}
+
+// ─── Segmented control ──────────────────────────────────────────────────────
+.apd-segmented {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    background: var(--apd-segment-track);
+    border-radius: 12px;
+    padding: 4px;
+    gap: 2px;
+    margin-bottom: 14px;
+
+    &--sub {
+        background: color-mix(in srgb, var(--apd-segment-track) 85%, transparent);
+    }
+}
+
+.apd-segment {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--apd-body);
+    padding: 8px 14px;
+    border-radius: 9px;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    line-height: 1.3;
+    transition:
+        background-color 160ms ease,
+        color 160ms ease,
+        box-shadow 160ms ease;
+
+    &:hover:not(.active) {
+        color: var(--apd-heading);
+    }
+
+    &.active {
+        background: var(--apd-segment-active);
+        color: var(--apd-heading);
+        box-shadow:
+            0 1px 2px rgba(0, 0, 0, 0.25),
+            inset 0 0 0 1px color-mix(in srgb, white 6%, transparent);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--apd-accent);
+        outline-offset: 1px;
+    }
+}
+
+// ─── Form area ──────────────────────────────────────────────────────────────
+.apd-form-area {
+    min-height: 0;
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .w-full,
+    .mat-mdc-form-field {
+        width: 100%;
+    }
+
+    // Textarea overrides the compact density so multi-line input has room.
+    textarea.mat-mdc-input-element {
+        min-height: 140px;
+        padding-top: 8px;
+    }
+
+    app-text-import .mat-mdc-form-field-infix {
+        min-height: auto;
+    }
+
+    app-text-import .mat-mdc-form-field {
+        min-height: 180px;
+    }
+
+    .cors-note {
+        margin: 6px 0 0;
+        padding: 10px 12px;
+        border-radius: 8px;
+        background: color-mix(in srgb, var(--apd-surface-raised) 50%, transparent);
+        color: var(--apd-muted);
+        font-size: 11.5px;
+        line-height: 1.45;
+    }
+}
+
+// ─── Light-theme segmented control tweak ────────────────────────────────────
+// `.dark-theme` is on <body>, so target light mode via `body:not(...)`.
+body:not(.dark-theme) .apd {
+    --apd-segment-track: color-mix(in srgb, var(--app-content-bg) 70%, transparent);
+    --apd-segment-active: #ffffff;
+
+    .apd-segment.active {
+        box-shadow:
+            0 1px 2px rgba(0, 0, 0, 0.06),
+            0 0 0 1px rgba(0, 0, 0, 0.06);
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.spec.ts b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.spec.ts
new file mode 100644
index 0000000..a194499
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.spec.ts
@@ -0,0 +1,132 @@
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistActions } from 'm3u-state';
+import { DataService } from 'services';
+import { PLAYLIST_PARSE_BY_URL } from 'shared-interfaces';
+import { AddPlaylistDialogComponent } from './add-playlist-dialog.component';
+
+describe('AddPlaylistDialogComponent', () => {
+    let component: AddPlaylistDialogComponent;
+    let dataService: { sendIpcEvent: jest.Mock };
+    let dialogRef: { close: jest.Mock };
+    let store: { dispatch: jest.Mock };
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        dialogRef = {
+            close: jest.fn(),
+        };
+        store = {
+            dispatch: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                {
+                    provide: DataService,
+                    useValue: dataService,
+                },
+                {
+                    provide: MatDialogRef,
+                    useValue: dialogRef,
+                },
+                {
+                    provide: Store,
+                    useValue: store,
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((value: string) => value),
+                    },
+                },
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: null,
+                },
+            ],
+        });
+
+        component = TestBed.runInInjectionContext(
+            () => new AddPlaylistDialogComponent()
+        );
+    });
+
+    it('sends a trimmed custom title for URL playlists', () => {
+        (component as { urlUpload: jest.Mock }).urlUpload = jest.fn(() => ({
+            form: {
+                getRawValue: () => ({
+                    playlistName: '  My Playlist  ',
+                    playlistUrl: ' https://example.com/list.m3u ',
+                }),
+            },
+        }));
+
+        component.submitUrlPlaylist();
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            PLAYLIST_PARSE_BY_URL,
+            {
+                title: 'My Playlist',
+                url: 'https://example.com/list.m3u',
+            }
+        );
+        expect(dialogRef.close).toHaveBeenCalled();
+    });
+
+    it('omits the title when the optional name is blank', () => {
+        (component as { urlUpload: jest.Mock }).urlUpload = jest.fn(() => ({
+            form: {
+                getRawValue: () => ({
+                    playlistName: '   ',
+                    playlistUrl: 'https://example.com/list.m3u',
+                }),
+            },
+        }));
+
+        component.submitUrlPlaylist();
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            PLAYLIST_PARSE_BY_URL,
+            {
+                url: 'https://example.com/list.m3u',
+            }
+        );
+        expect(dialogRef.close).toHaveBeenCalled();
+    });
+
+    it('strips playlist extensions from uploaded file titles', () => {
+        component.handlePlaylist({
+            uploadEvent: {
+                target: {
+                    result: '#EXTM3U',
+                },
+            } as unknown as Event,
+            file: {
+                name: 'Local Source.m3u',
+                path: '/tmp/Local Source.m3u',
+            } as File,
+        });
+
+        expect(store.dispatch).toHaveBeenCalledWith(
+            PlaylistActions.parsePlaylist({
+                uploadType: 'FILE',
+                playlist: '#EXTM3U',
+                title: 'Local Source',
+                path: '/tmp/Local Source.m3u',
+            })
+        );
+        expect(dialogRef.close).toHaveBeenCalled();
+    });
+});
diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.ts b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.ts
new file mode 100644
index 0000000..83ede74
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.ts
@@ -0,0 +1,180 @@
+import {
+    Component,
+    computed,
+    inject,
+    signal,
+    ViewEncapsulation,
+    viewChild,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogModule,
+    MatDialogRef,
+} from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { PlaylistType } from '@iptvnator/playlist/shared/ui';
+import {
+    M3uSubType,
+    PlaylistCategory,
+} from '@iptvnator/workspace/shell/util';
+import { PlaylistActions } from 'm3u-state';
+import { DataService, WORKSPACE_PRODUCT_BRANDING } from 'services';
+import { PLAYLIST_PARSE_BY_URL } from 'shared-interfaces';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+import { StalkerPortalImportComponent } from '../stalker-portal-import/stalker-portal-import.component';
+import { TextImportComponent } from '../text-import/text-import.component';
+import { UrlUploadComponent } from '../url-upload/url-upload.component';
+import { XtreamCodeImportComponent } from '../xtream-code-import/xtream-code-import.component';
+
+interface CategoryOption {
+    value: PlaylistCategory;
+    label: string;
+}
+
+interface SubtypeOption {
+    value: M3uSubType;
+    labelKey: string;
+}
+
+@Component({
+    imports: [
+        FileUploadComponent,
+        MatButtonModule,
+        MatDialogModule,
+        StalkerPortalImportComponent,
+        TextImportComponent,
+        TranslateModule,
+        UrlUploadComponent,
+        XtreamCodeImportComponent,
+    ],
+    selector: 'app-add-playlist',
+    templateUrl: './add-playlist-dialog.component.html',
+    styleUrl: './add-playlist-dialog.component.scss',
+    encapsulation: ViewEncapsulation.None,
+})
+export class AddPlaylistDialogComponent {
+    private dataService = inject(DataService);
+    private dialogRef = inject(MatDialogRef<AddPlaylistDialogComponent>);
+    private store = inject(Store);
+    private snackBar = inject(MatSnackBar);
+    private translateService = inject(TranslateService);
+    private data = inject<{ type?: PlaylistType } | null>(MAT_DIALOG_DATA, {
+        optional: true,
+    });
+
+    readonly productBranding = inject(WORKSPACE_PRODUCT_BRANDING, {
+        optional: true,
+    });
+
+    readonly urlUpload = viewChild(UrlUploadComponent);
+    readonly fileUpload = viewChild(FileUploadComponent);
+    readonly textImport = viewChild(TextImportComponent);
+    readonly xtreamImport = viewChild(XtreamCodeImportComponent);
+    readonly stalkerImport = viewChild(StalkerPortalImportComponent);
+
+    readonly category = signal<PlaylistCategory>('m3u');
+    readonly m3uSubType = signal<M3uSubType>('url');
+
+    readonly categoryOptions: CategoryOption[] = [
+        { value: 'm3u', label: 'M3U' },
+        { value: 'xtream', label: 'Xtream' },
+        { value: 'stalker', label: 'Stalker' },
+    ];
+
+    readonly subtypeOptions: SubtypeOption[] = [
+        { value: 'url', labelKey: 'HOME.TABS.URL_UPLOAD' },
+        { value: 'file', labelKey: 'HOME.TABS.FILE_UPLOAD' },
+        { value: 'text', labelKey: 'HOME.TABS.TEXT_IMPORT' },
+    ];
+
+    readonly playlistType = computed<PlaylistType>(() => {
+        const cat = this.category();
+        if (cat === 'xtream') return 'xtream';
+        if (cat === 'stalker') return 'stalker';
+        return this.m3uSubType();
+    });
+
+    constructor() {
+        if (this.data?.type) {
+            this.initFromType(this.data.type);
+        } else if (this.productBranding?.xtreamOnlyUi) {
+            this.category.set('xtream');
+        }
+    }
+
+    private initFromType(type: PlaylistType): void {
+        if (type === 'xtream') {
+            this.category.set('xtream');
+        } else if (type === 'stalker') {
+            this.category.set('stalker');
+        } else {
+            this.category.set('m3u');
+            this.m3uSubType.set(type as M3uSubType);
+        }
+    }
+
+    /**
+     * Closes the dialog after a successful file import. The actual parse and
+     * dispatch happens inside `PlaylistFileImportService` (called from the
+     * `FileUploadComponent`).
+     */
+    onFileImported(): void {
+        this.closeDialog();
+    }
+
+    rejectFile(filename: string): void {
+        this.snackBar.open(
+            this.translateService.instant('HOME.FILE_UPLOAD.REJECTED', {
+                filename,
+            })
+        );
+    }
+
+    /**
+     * Sends url of the playlist to the renderer process and preserves the
+     * existing fallback title behavior when the optional name is blank.
+     */
+    submitUrlPlaylist(): void {
+        const formValue = this.urlUpload()?.form?.getRawValue();
+        const playlistUrl = formValue?.playlistUrl?.trim();
+
+        if (!playlistUrl) {
+            return;
+        }
+
+        const playlistName = this.normalizeOptionalValue(formValue?.playlistName);
+
+        this.dataService.sendIpcEvent(PLAYLIST_PARSE_BY_URL, {
+            url: playlistUrl,
+            ...(playlistName ? { title: playlistName } : {}),
+        });
+        this.closeDialog();
+    }
+
+    /**
+     * Sends IPC event to the renderer process to parse playlist
+     * @param text playlist as string
+     */
+    uploadAsText(playlist: string): void {
+        this.store.dispatch(
+            PlaylistActions.parsePlaylist({
+                uploadType: 'TEXT',
+                playlist,
+                title: this.translateService.instant('HOME.IMPORTED_AS_TEXT'),
+            })
+        );
+        this.closeDialog();
+    }
+
+    closeDialog(): void {
+        this.dialogRef.close();
+    }
+
+    private normalizeOptionalValue(value?: string | null): string | undefined {
+        const normalizedValue = value?.trim();
+        return normalizedValue ? normalizedValue : undefined;
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/file-upload/drag-drop-file-upload.directive.ts b/libs/playlist/import/feature/src/lib/file-upload/drag-drop-file-upload.directive.ts
new file mode 100644
index 0000000..f7c5c6c
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/file-upload/drag-drop-file-upload.directive.ts
@@ -0,0 +1,46 @@
+import {
+    Directive,
+    EventEmitter,
+    HostListener,
+    Output,
+} from '@angular/core';
+
+@Directive({
+    standalone: true,
+    selector: '[appDragDropFileUpload]',
+})
+export class DragDropFileUploadDirective {
+    @Output() fileDropped = new EventEmitter<FileList>();
+    @Output() dragStateChanged = new EventEmitter<boolean>();
+
+    @HostListener('dragenter', ['$event']) dragEnter(event: DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragStateChanged.emit(true);
+    }
+
+    @HostListener('dragover', ['$event']) dragOver(event: DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        this.dragStateChanged.emit(true);
+    }
+
+    @HostListener('dragleave', ['$event']) dragLeave(event: DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragStateChanged.emit(false);
+    }
+
+    @HostListener('drop', ['$event']) drop(event: DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragStateChanged.emit(false);
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.fileDropped.emit(files);
+        }
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.html b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.html
new file mode 100644
index 0000000..91b5f40
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.html
@@ -0,0 +1,53 @@
+@if (selectedFile(); as file) {
+    <div class="file-selected">
+        <div class="file-selected__icon">
+            <mat-icon>description</mat-icon>
+        </div>
+        <div class="file-selected__meta">
+            <div class="file-selected__name" [title]="file.name">
+                {{ file.name }}
+            </div>
+            <div class="file-selected__size">{{ formatSize(file.size) }}</div>
+        </div>
+        <button
+            type="button"
+            class="file-selected__remove"
+            (click)="clearSelection()"
+            [attr.aria-label]="'CLEAR' | translate"
+        >
+            <mat-icon>close</mat-icon>
+        </button>
+    </div>
+} @else {
+    <button
+        type="button"
+        class="file-drop"
+        [class.file-drop--dragging]="isDragging()"
+        appDragDropFileUpload
+        (fileDropped)="onFilesDropped($event)"
+        (dragStateChanged)="onDragStateChange($event)"
+        (click)="openPicker(fileField)"
+    >
+        <span class="file-drop__icon">
+            <mat-icon>file_download</mat-icon>
+        </span>
+        <span class="file-drop__title">
+            {{ 'HOME.FILE_UPLOAD.DRAG_DROP' | translate }}
+        </span>
+        <span class="file-drop__subtitle">
+            {{ 'HOME.FILE_UPLOAD.OR' | translate }}
+            {{ 'HOME.FILE_UPLOAD.CHOOSE_PLAYLIST' | translate }}
+        </span>
+        <span class="file-drop__browse">
+            {{ 'HOME.FILE_UPLOAD.BROWSE' | translate }}
+        </span>
+    </button>
+}
+<input
+    type="file"
+    name="playlist"
+    #fileField
+    (change)="onPicked(fileField)"
+    accept=".m3u,.m3u8"
+    hidden
+/>
diff --git a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
new file mode 100644
index 0000000..a1f9c6b
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
@@ -0,0 +1,194 @@
+:host {
+    display: block;
+    margin: 4px 0 12px;
+}
+
+// ─── Dashed drop zone ────────────────────────────────────────────────────────
+.file-drop {
+    width: 100%;
+    appearance: none;
+    font: inherit;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 36px 24px 28px;
+    border-radius: 16px;
+    border: 1.5px dashed
+        color-mix(in srgb, var(--app-body-color) 30%, transparent);
+    background: color-mix(in srgb, var(--app-shell-bg) 55%, transparent);
+    color: var(--app-heading-color);
+    transition:
+        border-color 160ms ease,
+        background-color 160ms ease,
+        transform 160ms ease;
+
+    &:hover {
+        border-color: color-mix(
+            in srgb,
+            var(--app-selection-color) 55%,
+            transparent
+        );
+        background: color-mix(
+            in srgb,
+            var(--app-selection-color) 4%,
+            var(--app-shell-bg) 70%
+        );
+    }
+
+    &--dragging {
+        border-color: var(--app-selection-color);
+        background: color-mix(
+            in srgb,
+            var(--app-selection-color) 10%,
+            var(--app-shell-bg) 70%
+        );
+        transform: scale(1.005);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-color);
+        outline-offset: 2px;
+    }
+
+    &__icon {
+        width: 44px;
+        height: 44px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--app-body-color);
+        margin-bottom: 6px;
+
+        mat-icon {
+            font-size: 30px;
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+
+    &__title {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--app-heading-color);
+        letter-spacing: -0.005em;
+    }
+
+    &__subtitle {
+        font-size: 12.5px;
+        color: var(--app-muted-color);
+        margin-bottom: 6px;
+    }
+
+    &__browse {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 18px;
+        border-radius: 9px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--app-heading-color);
+        background: transparent;
+        box-shadow: inset 0 0 0 1px
+            color-mix(in srgb, var(--app-body-color) 35%, transparent);
+        transition: background-color 160ms ease, box-shadow 160ms ease;
+    }
+
+    &:hover &__browse {
+        background: color-mix(in srgb, var(--app-hover-overlay) 100%, transparent);
+        box-shadow: inset 0 0 0 1px
+            color-mix(in srgb, var(--app-body-color) 55%, transparent);
+    }
+}
+
+// ─── Selected-file card ─────────────────────────────────────────────────────
+.file-selected {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 14px 14px 16px;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--app-shell-bg) 85%, transparent);
+    box-shadow: inset 0 0 0 1px var(--app-widget-header-border);
+
+    &__icon {
+        width: 40px;
+        height: 40px;
+        flex: 0 0 40px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        background: color-mix(
+            in srgb,
+            var(--app-selection-color) 16%,
+            transparent
+        );
+        color: var(--app-selection-color);
+
+        mat-icon {
+            font-size: 22px;
+            width: 22px;
+            height: 22px;
+            line-height: 22px;
+        }
+    }
+
+    &__meta {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    &__name {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--app-heading-color);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    &__size {
+        font-size: 12px;
+        color: var(--app-muted-color);
+    }
+
+    &__remove {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--app-muted-color);
+        cursor: pointer;
+        transition: background-color 120ms ease, color 120ms ease;
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+            line-height: 18px;
+        }
+
+        &:hover {
+            background: var(--app-hover-overlay);
+            color: var(--app-heading-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--app-selection-color);
+            outline-offset: 2px;
+        }
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.ts b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.ts
new file mode 100644
index 0000000..bcb887d
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.ts
@@ -0,0 +1,94 @@
+import { Component, EventEmitter, Output, inject, signal } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PlaylistFileImportService } from '@iptvnator/playlist/shared/util';
+import { DragDropFileUploadDirective } from './drag-drop-file-upload.directive';
+
+const MB = 1024 * 1024;
+const KB = 1024;
+
+@Component({
+    imports: [DragDropFileUploadDirective, MatIconModule, TranslatePipe],
+    selector: 'app-file-upload',
+    templateUrl: './file-upload.component.html',
+    styleUrls: ['./file-upload.component.scss'],
+})
+export class FileUploadComponent {
+    private readonly importService = inject(PlaylistFileImportService);
+
+    @Output() imported = new EventEmitter<{ title: string }>();
+    @Output() fileRejected = new EventEmitter<string>();
+    @Output() closeDialog = new EventEmitter<void>();
+
+    readonly selectedFile = signal<File | null>(null);
+    readonly isDragging = signal(false);
+    readonly isImporting = signal(false);
+
+    openPicker(input: HTMLInputElement): void {
+        input.value = '';
+        input.click();
+    }
+
+    onDragStateChange(isDragging: boolean): void {
+        this.isDragging.set(isDragging);
+    }
+
+    onFilesDropped(files: FileList): void {
+        this.setFile(files[0]);
+    }
+
+    onPicked(input: HTMLInputElement): void {
+        const file = input.files?.[0] as (File & { path?: string }) | undefined;
+        const pathOverride = input.dataset['filePathOverride'];
+
+        if (file && !file.path && pathOverride) {
+            Object.defineProperty(file, 'path', {
+                configurable: true,
+                value: pathOverride,
+            });
+        }
+
+        if (file) {
+            this.setFile(file);
+        }
+
+        delete input.dataset['filePathOverride'];
+        input.value = '';
+    }
+
+    clearSelection(): void {
+        this.selectedFile.set(null);
+    }
+
+    async confirm(): Promise<void> {
+        const file = this.selectedFile();
+        if (!file || this.isImporting()) return;
+
+        this.isImporting.set(true);
+        const result = await this.importService.importFile(file);
+        this.isImporting.set(false);
+
+        if (result.ok === true) {
+            this.imported.emit({ title: result.title });
+            return;
+        }
+
+        this.selectedFile.set(null);
+        this.fileRejected.emit(file.name);
+    }
+
+    formatSize(bytes: number): string {
+        if (bytes < KB) return `${bytes} B`;
+        if (bytes < MB) return `${(bytes / KB).toFixed(1)} KB`;
+        return `${(bytes / MB).toFixed(1)} MB`;
+    }
+
+    private setFile(file: File | undefined): void {
+        if (!file) return;
+        if (!this.importService.isSupportedFile(file)) {
+            this.fileRejected.emit(file.name);
+            return;
+        }
+        this.selectedFile.set(file);
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/stalker-portal-import/stalker-portal-import.component.html b/libs/playlist/import/feature/src/lib/stalker-portal-import/stalker-portal-import.component.html
new file mode 100644
index 0000000..e7eb3e6
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/stalker-portal-import/stalker-portal-import.component.html
@@ -0,0 +1,116 @@
+<form [formGroup]="form">
+    <mat-form-field class="w-full">
+        <mat-label for="title">{{
+            'HOME.STALKER_PORTAL.TITLE' | translate
+        }}</mat-label>
+        <input matInput type="text" id="title" formControlName="title" />
+    </mat-form-field>
+    <mat-form-field class="w-full" subscriptSizing="dynamic">
+        <mat-label for="portalUrl">{{
+            'HOME.STALKER_PORTAL.SERVER_URL' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="portalUrl"
+            formControlName="portalUrl"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.URL_VALIDATION_ERROR' | translate
+        }}</mat-hint>
+        <mat-error>{{ 'SETTINGS.EPG_URL_ERROR' | translate }}</mat-error>
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="macAddress">{{
+            'HOME.STALKER_PORTAL.MAC_ADDRESS' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="macAddress"
+            formControlName="macAddress"
+        />
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="serialNumber">{{
+            'HOME.STALKER_PORTAL.SERIAL_NUMBER' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="serialNumber"
+            formControlName="serialNumber"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.SERIAL_NUMBER_HINT' | translate
+        }}</mat-hint>
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="deviceId1">{{
+            'HOME.STALKER_PORTAL.DEVICE_ID_1' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="deviceId1"
+            formControlName="deviceId1"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.DEVICE_ID_HINT' | translate
+        }}</mat-hint>
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="deviceId2">{{
+            'HOME.STALKER_PORTAL.DEVICE_ID_2' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="deviceId2"
+            formControlName="deviceId2"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.DEVICE_ID_HINT' | translate
+        }}</mat-hint>
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="signature1">{{
+            'HOME.STALKER_PORTAL.SIGNATURE_1' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="signature1"
+            formControlName="signature1"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.SIGNATURE_HINT' | translate
+        }}</mat-hint>
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="signature2">{{
+            'HOME.STALKER_PORTAL.SIGNATURE_2' | translate
+        }}</mat-label>
+        <input
+            matInput
+            type="text"
+            id="signature2"
+            formControlName="signature2"
+        />
+        <mat-hint>{{
+            'HOME.STALKER_PORTAL.SIGNATURE_HINT' | translate
+        }}</mat-hint>
+    </mat-form-field>
+    <!-- <mat-form-field class="w-full">
+        <mat-label for="username">{{
+            'HOME.XTREAM_PLAYLIST.USERNAME' | translate
+        }}</mat-label>
+        <input matInput type="text" id="username" formControlName="username" />
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="password">{{
+            'HOME.XTREAM_PLAYLIST.PASSWORD' | translate
+        }}</mat-label>
+        <input matInput type="text" id="password" formControlName="password" />
+    </mat-form-field> -->
+</form>
diff --git a/libs/playlist/import/feature/src/lib/stalker-portal-import/stalker-portal-import.component.ts b/libs/playlist/import/feature/src/lib/stalker-portal-import/stalker-portal-import.component.ts
new file mode 100644
index 0000000..1451364
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/stalker-portal-import/stalker-portal-import.component.ts
@@ -0,0 +1,240 @@
+import { Component, inject, output, signal } from '@angular/core';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { PlaylistActions } from 'm3u-state';
+import {
+    STALKER_SERIAL_NUMBER,
+    StalkerSessionService,
+} from '@iptvnator/portal/stalker/data-access';
+import { Playlist } from 'shared-interfaces';
+import { v4 as uuid } from 'uuid';
+
+@Component({
+    imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        TranslatePipe,
+    ],
+    selector: 'app-stalker-portal-import',
+    templateUrl: './stalker-portal-import.component.html',
+    styles: [
+        `
+            :host {
+                display: flex;
+                margin: 10px;
+                justify-content: center;
+            }
+
+            form {
+                width: 100%;
+            }
+
+            .loading-container {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+        `,
+    ],
+})
+export class StalkerPortalImportComponent {
+    readonly addClicked = output<void>();
+    readonly URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
+
+    readonly form = new FormGroup({
+        _id: new FormControl(uuid()),
+        title: new FormControl('', [Validators.required]),
+        macAddress: new FormControl('', [Validators.required]),
+        serialNumber: new FormControl(''),
+        deviceId1: new FormControl(''),
+        deviceId2: new FormControl(''),
+        signature1: new FormControl(''),
+        signature2: new FormControl(''),
+        password: new FormControl(''),
+        username: new FormControl(''),
+        portalUrl: new FormControl('', [
+            Validators.required,
+            Validators.pattern(this.URL_REGEX),
+        ]),
+        importDate: new FormControl(new Date().toISOString()),
+        userAgent: new FormControl(''),
+    });
+
+    private readonly stalkerSessionService = inject(StalkerSessionService);
+    private readonly store = inject(Store);
+    private readonly snackBar = inject(MatSnackBar);
+    readonly translate = inject(TranslateService);
+
+    readonly isLoading = signal(false);
+
+    async addPlaylist() {
+        if (!this.form.valid || this.isLoading()) {
+            return;
+        }
+
+        this.isLoading.set(true);
+
+        try {
+            const originalUrl = this.form.value.portalUrl;
+            const transformedUrl = this.transformPortalUrl(originalUrl);
+            const isFullStalkerPortal =
+                this.isFullStalkerPortalUrl(originalUrl);
+
+            let stalkerToken: string | undefined;
+            let stalkerAccountInfo: Playlist['stalkerAccountInfo'] | undefined;
+            let stalkerSerialNumber: string | undefined;
+            let stalkerDeviceId1: string | undefined;
+            let stalkerDeviceId2: string | undefined;
+            let stalkerSignature1: string | undefined;
+            let stalkerSignature2: string | undefined;
+
+            // For full stalker portal URLs, perform handshake and get profile
+            if (isFullStalkerPortal) {
+                // Use provided serial number or generate a new one
+                stalkerSerialNumber =
+                    this.form.value.serialNumber?.trim() ||
+                    STALKER_SERIAL_NUMBER;
+
+                // Use provided device IDs if available (64 hex chars each)
+                stalkerDeviceId1 =
+                    this.form.value.deviceId1?.trim() || undefined;
+                stalkerDeviceId2 =
+                    this.form.value.deviceId2?.trim() || undefined;
+                stalkerSignature1 =
+                    this.form.value.signature1?.trim() || undefined;
+                stalkerSignature2 =
+                    this.form.value.signature2?.trim() || undefined;
+
+                try {
+                    const authResult =
+                        await this.stalkerSessionService.authenticate(
+                            transformedUrl,
+                            this.form.value.macAddress,
+                            stalkerSerialNumber,
+                            stalkerDeviceId1,
+                            stalkerDeviceId2
+                        );
+
+                    stalkerToken = authResult.token;
+
+                    if (authResult.accountInfo) {
+                        stalkerAccountInfo = {
+                            login: authResult.accountInfo.login,
+                            expireDate: authResult.accountInfo.expire_date,
+                            tariffPlanName:
+                                authResult.accountInfo.tariff_plan_name,
+                            status: authResult.accountInfo.status,
+                        };
+                    }
+
+                    // Show success notification with account info if available
+                    if (stalkerAccountInfo?.expireDate) {
+                        const expireDate = new Date(
+                            stalkerAccountInfo.expireDate * 1000
+                        );
+                        this.snackBar.open(
+                            `Portal validated. Expires: ${expireDate.toLocaleDateString()}`,
+                            null,
+                            { duration: 3000 }
+                        );
+                    }
+                } catch (error) {
+                    console.error(
+                        '[StalkerImport] Authentication failed:',
+                        error
+                    );
+                    this.snackBar.open(
+                        'Failed to authenticate with portal. Please check URL and MAC address.',
+                        null,
+                        { duration: 5000 }
+                    );
+                    this.isLoading.set(false);
+                    return;
+                }
+            }
+
+            const playlist: Playlist = {
+                ...this.form.value,
+                portalUrl: transformedUrl,
+                isFullStalkerPortal,
+                stalkerToken,
+                stalkerAccountInfo,
+                stalkerSerialNumber,
+                stalkerDeviceId1,
+                stalkerDeviceId2,
+                stalkerSignature1,
+                stalkerSignature2,
+            } as Playlist;
+
+            this.store.dispatch(PlaylistActions.addPlaylist({ playlist }));
+            this.addClicked.emit();
+        } finally {
+            this.isLoading.set(false);
+        }
+    }
+
+    /**
+     * Checks if the URL is a full stalker portal URL that requires handshake authentication
+     * Pattern: example.com/stalker_portal/c or example.com/stalker_portal/...
+     */
+    isFullStalkerPortalUrl(url: string): boolean {
+        return url.includes('/stalker_portal');
+    }
+
+    /**
+     * Transforms the portal URL to the correct API endpoint
+     * - Simple URL (example.com/c) -> example.com/portal.php
+     * - Full stalker portal (example.com/stalker_portal/c) -> example.com/stalker_portal/server/load.php
+     */
+    transformPortalUrl(url: string): string {
+        // Remove trailing slashes
+        url = url.replace(/\/+$/, '');
+
+        // Case 1: Simple URL ending with /c -> convert to /portal.php
+        if (url.endsWith('/c')) {
+            // Check if it's a full stalker portal URL
+            if (url.includes('/stalker_portal')) {
+                // example.com/stalker_portal/c -> example.com/stalker_portal/server/load.php
+                return url.replace(
+                    /\/stalker_portal\/c$/,
+                    '/stalker_portal/server/load.php'
+                );
+            }
+            // Simple URL: example.com/c -> example.com/portal.php
+            return url.replace(/\/c$/, '/portal.php');
+        }
+
+        // Case 2: Full stalker portal URL without /c at the end
+        if (
+            url.includes('/stalker_portal') &&
+            !url.includes('/server/load.php')
+        ) {
+            // example.com/stalker_portal -> example.com/stalker_portal/server/load.php
+            if (url.endsWith('/stalker_portal')) {
+                return url + '/server/load.php';
+            }
+            // If it has other path segments after /stalker_portal, append server/load.php
+            if (!url.endsWith('/load.php')) {
+                return url.replace(
+                    /\/stalker_portal(\/.*)?$/,
+                    '/stalker_portal/server/load.php'
+                );
+            }
+        }
+
+        // Otherwise keep the provided url
+        return url;
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/text-import/text-import.component.html b/libs/playlist/import/feature/src/lib/text-import/text-import.component.html
new file mode 100644
index 0000000..4fa1bf7
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/text-import/text-import.component.html
@@ -0,0 +1,6 @@
+<form [formGroup]="textForm">
+    <mat-form-field class="w-full">
+        <mat-label>{{ 'HOME.TEXT_IMPORT.LABEL' | translate }}</mat-label>
+        <textarea formControlName="text" matInput></textarea>
+    </mat-form-field>
+</form>
diff --git a/libs/playlist/import/feature/src/lib/text-import/text-import.component.scss b/libs/playlist/import/feature/src/lib/text-import/text-import.component.scss
new file mode 100644
index 0000000..9b7b1d0
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/text-import/text-import.component.scss
@@ -0,0 +1,7 @@
+button {
+    margin: 0 15px;
+}
+
+textarea {
+    height: 300px !important;
+}
diff --git a/libs/playlist/import/feature/src/lib/text-import/text-import.component.spec.ts b/libs/playlist/import/feature/src/lib/text-import/text-import.component.spec.ts
new file mode 100644
index 0000000..6e17770
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/text-import/text-import.component.spec.ts
@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { MockModule } from 'ng-mocks';
+import { TextImportComponent } from './text-import.component';
+
+describe('TextImportComponent', () => {
+    let component: TextImportComponent;
+    let fixture: ComponentFixture<TextImportComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                TextImportComponent,
+                MockModule(MatInputModule),
+                MockModule(FormsModule),
+                MockModule(ReactiveFormsModule),
+                TranslateModule.forRoot(),
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TextImportComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/libs/playlist/import/feature/src/lib/text-import/text-import.component.ts b/libs/playlist/import/feature/src/lib/text-import/text-import.component.ts
new file mode 100644
index 0000000..16b9259
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/text-import/text-import.component.ts
@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import {
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-text-import',
+    templateUrl: './text-import.component.html',
+    styleUrls: ['./text-import.component.scss'],
+    imports: [MatInputModule, ReactiveFormsModule, TranslatePipe],
+})
+export class TextImportComponent {
+    @Output() textAdded = new EventEmitter<string>();
+
+    textForm = new FormGroup({
+        text: new FormControl('', Validators.required),
+    });
+}
diff --git a/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.html b/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.html
new file mode 100644
index 0000000..8153a63
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.html
@@ -0,0 +1,15 @@
+<form [formGroup]="form">
+    <mat-form-field class="w-full">
+        <mat-label>{{ 'HOME.URL_UPLOAD.PLAYLIST_URL' | translate }}</mat-label>
+        <input type="url" matInput formControlName="playlistUrl" />
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label>{{ 'HOME.XTREAM_PLAYLIST.TITLE' | translate }}</mat-label>
+        <input type="text" matInput formControlName="playlistName" />
+    </mat-form-field>
+    @if (!isDesktop) {
+        <p class="cors-note">
+            {{ 'HOME.URL_UPLOAD.CORS_NOTE' | translate }}
+        </p>
+    }
+</form>
diff --git a/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.spec.ts b/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.spec.ts
new file mode 100644
index 0000000..f810f3b
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.spec.ts
@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockModule } from 'ng-mocks';
+import { UrlUploadComponent } from './url-upload.component';
+
+describe('UrlUploadComponent', () => {
+    let component: UrlUploadComponent;
+    let fixture: ComponentFixture<UrlUploadComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                UrlUploadComponent,
+                MockModule(FormsModule),
+                MockModule(MatFormFieldModule),
+                MockModule(ReactiveFormsModule),
+                TranslateModule.forRoot(),
+                NoopAnimationsModule,
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(UrlUploadComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('accepts an optional playlist name without affecting url validation', () => {
+        const testUrl = 'http://example.org/playlist.m3u';
+
+        component.form.setValue({
+            playlistName: '  Custom Playlist  ',
+            playlistUrl: 'wrong url here',
+        });
+        fixture.detectChanges();
+        expect(component.form.valid).toBeFalsy();
+
+        component.form.setValue({
+            playlistName: '',
+            playlistUrl: testUrl,
+        });
+        fixture.detectChanges();
+        expect(component.form.valid).toBeTruthy();
+
+        component.form.setValue({
+            playlistName: '   ',
+            playlistUrl: testUrl,
+        });
+        fixture.detectChanges();
+        expect(component.form.valid).toBeTruthy();
+    });
+});
diff --git a/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.ts b/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.ts
new file mode 100644
index 0000000..a6c1f16
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/url-upload/url-upload.component.ts
@@ -0,0 +1,42 @@
+import { Component, inject, OnInit } from '@angular/core';
+import {
+    FormBuilder,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-url-upload',
+    templateUrl: './url-upload.component.html',
+    imports: [
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        TranslatePipe,
+    ],
+})
+export class UrlUploadComponent implements OnInit {
+    private readonly fb = inject(FormBuilder);
+
+    form!: FormGroup<{
+        playlistName: FormControl<string>;
+        playlistUrl: FormControl<string>;
+    }>;
+    readonly isDesktop = !!window.electron;
+
+    ngOnInit(): void {
+        const urlRegex = '(https?://.*?)';
+        this.form = this.fb.nonNullable.group({
+            playlistUrl: [
+                '',
+                [Validators.required, Validators.pattern(urlRegex)],
+            ],
+            playlistName: [''],
+        });
+    }
+}
diff --git a/libs/playlist/import/feature/src/lib/xtream-code-import/xtream-code-import.component.html b/libs/playlist/import/feature/src/lib/xtream-code-import/xtream-code-import.component.html
new file mode 100644
index 0000000..c7656e6
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/xtream-code-import/xtream-code-import.component.html
@@ -0,0 +1,56 @@
+<form [formGroup]="form">
+    @if (!productBranding?.xtreamDefaultServerUrl) {
+        <mat-form-field class="w-full">
+            <mat-label for="title">{{
+                'HOME.XTREAM_PLAYLIST.TITLE' | translate
+            }}</mat-label>
+            <input matInput type="text" id="title" formControlName="title" />
+        </mat-form-field>
+        <mat-form-field class="w-full" subscriptSizing="dynamic">
+            <mat-label for="serverUrl">{{
+                'HOME.XTREAM_PLAYLIST.SERVER_URL' | translate
+            }}</mat-label>
+            <input
+                matInput
+                type="text"
+                id="serverUrl"
+                formControlName="serverUrl"
+                (input)="extractParams(form.value.serverUrl)"
+            />
+            <mat-hint>{{
+                'HOME.XTREAM_PLAYLIST.URL_VALIDATION_ERROR' | translate
+            }}</mat-hint>
+            <mat-error>{{ 'SETTINGS.EPG_URL_ERROR' | translate }}</mat-error>
+        </mat-form-field>
+    } @else {
+        <p class="kiratv-fixed-server" id="kiratv-fixed-server">
+            {{ 'HOME.KIRATV.FIXED_SERVER' | translate }}
+            <strong>{{ productBranding.xtreamDefaultServerUrl }}</strong>
+        </p>
+        <p class="kiratv-fixed-title" id="kiratv-fixed-title">
+            {{ 'HOME.KIRATV.FIXED_PLAYLIST_TITLE' | translate }}
+            <strong>{{ productBranding.defaultPlaylistTitle }}</strong>
+        </p>
+    }
+    <mat-form-field class="w-full">
+        <mat-label for="username">{{
+            'HOME.XTREAM_PLAYLIST.USERNAME' | translate
+        }}</mat-label>
+        <input matInput type="text" id="username" formControlName="username" />
+    </mat-form-field>
+    <mat-form-field class="w-full">
+        <mat-label for="password">{{
+            'HOME.XTREAM_PLAYLIST.PASSWORD' | translate
+        }}</mat-label>
+        <input matInput type="text" id="password" formControlName="password" />
+    </mat-form-field>
+
+    @if (connectionStatus) {
+        <div class="connection-status">
+            <mat-icon [class]="getStatusClass()">
+                {{ getStatusIcon() }}
+            </mat-icon>
+            <span [class]="getStatusClass()">{{ getStatusMessage() }}</span>
+        </div>
+    }
+</form>
diff --git a/libs/playlist/import/feature/src/lib/xtream-code-import/xtream-code-import.component.ts b/libs/playlist/import/feature/src/lib/xtream-code-import/xtream-code-import.component.ts
new file mode 100644
index 0000000..724a4bf
--- /dev/null
+++ b/libs/playlist/import/feature/src/lib/xtream-code-import/xtream-code-import.component.ts
@@ -0,0 +1,214 @@
+import {
+    Component,
+    EventEmitter,
+    OnInit,
+    Output,
+    inject,
+} from '@angular/core';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { Store } from '@ngrx/store';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PlaylistActions } from 'm3u-state';
+import {
+    PortalStatus,
+    PortalStatusService,
+    WORKSPACE_PRODUCT_BRANDING,
+} from 'services';
+import { Playlist } from 'shared-interfaces';
+import { v4 as uuid } from 'uuid';
+
+@Component({
+    imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatIcon,
+        MatInputModule,
+        ReactiveFormsModule,
+        TranslatePipe,
+    ],
+    selector: 'app-xtream-code-import',
+    templateUrl: './xtream-code-import.component.html',
+    styles: [
+        `
+            :host {
+                display: flex;
+                margin: 10px;
+                justify-content: center;
+            }
+
+            form {
+                width: 100%;
+            }
+
+            .status-active {
+                color: #4caf50;
+            }
+
+            .status-inactive {
+                color: #f44336;
+            }
+
+            .status-expired {
+                color: #ff9800;
+            }
+
+            .status-unavailable {
+                color: #9e9e9e;
+            }
+
+            .connection-status {
+                margin: 10px 0;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .kiratv-fixed-server,
+            .kiratv-fixed-title {
+                margin: 0 0 12px;
+                font-size: 14px;
+                line-height: 1.4;
+            }
+
+        `,
+    ],
+})
+export class XtreamCodeImportComponent implements OnInit {
+    @Output() addClicked = new EventEmitter<void>();
+    URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
+
+    readonly productBranding = inject(WORKSPACE_PRODUCT_BRANDING, {
+        optional: true,
+    });
+
+    form = new FormGroup({
+        _id: new FormControl(uuid()),
+        title: new FormControl('', [Validators.required]),
+        password: new FormControl('', [Validators.required]),
+        username: new FormControl('', [Validators.required]),
+        serverUrl: new FormControl('', [
+            Validators.required,
+            Validators.pattern(this.URL_REGEX),
+        ]),
+        importDate: new FormControl(new Date().toISOString()),
+    });
+
+    readonly store = inject(Store);
+    readonly portalStatusService = inject(PortalStatusService);
+
+    connectionStatus: PortalStatus | null = null;
+    isTestingConnection = false;
+
+    ngOnInit(): void {
+        this.applyProductBrandingDefaults();
+    }
+
+    private applyProductBrandingDefaults(): void {
+        const b = this.productBranding;
+        if (!b?.xtreamDefaultServerUrl) {
+            return;
+        }
+        this.form.patchValue({
+            serverUrl: b.xtreamDefaultServerUrl,
+            title: b.defaultPlaylistTitle,
+        });
+        this.form.get('serverUrl')?.disable({ emitEvent: false });
+        this.form.get('title')?.disable({ emitEvent: false });
+    }
+
+    async testConnection(): Promise<void> {
+        if (!this.form.valid) return;
+
+        this.isTestingConnection = true;
+        const serverUrlAsString = this.form.getRawValue().serverUrl as string;
+        const url = new URL(serverUrlAsString);
+        const serverUrl = `${url.protocol}//${url.hostname}${
+            url.port ? ':' + url.port : ''
+        }`;
+
+        try {
+            this.connectionStatus =
+                await this.portalStatusService.checkPortalStatus(
+                    serverUrl,
+                    this.form.getRawValue().username as string,
+                    this.form.getRawValue().password as string
+                );
+        } finally {
+            this.isTestingConnection = false;
+        }
+    }
+
+    getStatusMessage(): string {
+        return this.portalStatusService.getStatusMessage(this.connectionStatus);
+    }
+
+    getStatusClass(): string {
+        return this.portalStatusService.getStatusClass(this.connectionStatus);
+    }
+
+    getStatusIcon(): string {
+        return this.portalStatusService.getStatusIcon(this.connectionStatus);
+    }
+
+    clearForm() {
+        const b = this.productBranding;
+        this.form.reset({
+            _id: uuid(),
+            title: b?.defaultPlaylistTitle ?? '',
+            password: '',
+            username: '',
+            serverUrl: b?.xtreamDefaultServerUrl ?? '',
+            importDate: new Date().toISOString(),
+        });
+        this.applyProductBrandingDefaults();
+        this.connectionStatus = null;
+    }
+
+    addPlaylist() {
+        const raw = this.form.getRawValue();
+        const serverUrlAsString = raw.serverUrl as string;
+        const url = new URL(serverUrlAsString);
+        const serverUrl = `${url.protocol}//${url.hostname}${
+            url.port ? ':' + url.port : ''
+        }`;
+        this.store.dispatch(
+            PlaylistActions.addPlaylist({
+                playlist: {
+                    ...raw,
+                    serverUrl,
+                } as Playlist,
+            })
+        );
+        this.addClicked.emit();
+    }
+
+    extractParams(urlAsString: string): void {
+        if (
+            this.form.get('username').value !== '' ||
+            this.form.get('password').value !== ''
+        )
+            return;
+        try {
+            // Create a new URL object from the complete link
+            const url = new URL(urlAsString);
+
+            // Extract username and password from query parameters
+            const username = url.searchParams.get('username') || '';
+            const password = url.searchParams.get('password') || '';
+
+            this.form.get('username')?.setValue(username);
+            this.form.get('password')?.setValue(password);
+        } catch (error) {
+            console.error('Invalid URL', error);
+        }
+    }
+}
diff --git a/libs/playlist/m3u/feature-player/project.json b/libs/playlist/m3u/feature-player/project.json
new file mode 100644
index 0000000..ee3e59f
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "playlist-m3u-feature-player",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/playlist/m3u/feature-player/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:playlist", "domain:m3u", "type:feature"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/playlist/m3u/feature-player/src/index.ts b/libs/playlist/m3u/feature-player/src/index.ts
new file mode 100644
index 0000000..c57131e
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/index.ts
@@ -0,0 +1,3 @@
+export * from './lib/m3u-collection-route/m3u-collection-route.component';
+export * from './lib/m3u-workspace-route-session.service';
+export * from './lib/video-player/video-player.component';
diff --git a/libs/playlist/m3u/feature-player/src/lib/m3u-collection-route/m3u-collection-route.component.ts b/libs/playlist/m3u/feature-player/src/lib/m3u-collection-route/m3u-collection-route.component.ts
new file mode 100644
index 0000000..7736f74
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/m3u-collection-route/m3u-collection-route.component.ts
@@ -0,0 +1,38 @@
+import {
+    inject,
+    ChangeDetectionStrategy,
+    Component,
+    input,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UnifiedCollectionPageComponent } from '@iptvnator/portal/shared/ui';
+import {
+    CollectionScope,
+    routeParamSignal,
+} from '@iptvnator/portal/shared/util';
+
+@Component({
+    selector: 'app-m3u-collection-route',
+    imports: [UnifiedCollectionPageComponent],
+    template: `
+        <app-unified-collection-page
+            [mode]="mode()"
+            [portalType]="portalType()"
+            [playlistId]="playlistId()"
+            [defaultScope]="defaultScope()"
+        />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class M3uCollectionRouteComponent {
+    private readonly route = inject(ActivatedRoute);
+
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly portalType = input('m3u');
+    readonly defaultScope = input<CollectionScope | undefined>(undefined);
+    readonly playlistId = routeParamSignal<string | undefined>(
+        this.route,
+        'id',
+        (value) => value ?? undefined
+    );
+}
diff --git a/libs/playlist/m3u/feature-player/src/lib/m3u-workspace-route-session.service.spec.ts b/libs/playlist/m3u/feature-player/src/lib/m3u-workspace-route-session.service.spec.ts
new file mode 100644
index 0000000..9a133cb
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/m3u-workspace-route-session.service.spec.ts
@@ -0,0 +1,181 @@
+import { TestBed } from '@angular/core/testing';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { ChannelActions, FavoritesActions } from 'm3u-state';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { PlaylistsService } from 'services';
+import { Channel, Playlist } from 'shared-interfaces';
+import { Store } from '@ngrx/store';
+import { M3uWorkspaceRouteSession } from './m3u-workspace-route-session.service';
+
+const PLAYLIST_ID = 'playlist-1';
+const NEXT_PLAYLIST_ID = 'playlist-2';
+
+const PRIMARY_CHANNEL = {
+    epgParams: '',
+    http: {
+        origin: '',
+        referrer: '',
+        'user-agent': '',
+    },
+    id: 'channel-1',
+    name: 'Primary channel',
+    radio: 'false',
+    tvg: {
+        id: 'primary-channel',
+        logo: '',
+        name: 'Primary channel',
+        rec: '',
+        url: '',
+    },
+    url: 'https://example.com/primary.m3u8',
+} as Channel;
+
+const NEXT_CHANNEL = {
+    ...PRIMARY_CHANNEL,
+    id: 'channel-2',
+    name: 'Next channel',
+    tvg: {
+        ...PRIMARY_CHANNEL.tvg,
+        id: 'next-channel',
+        name: 'Next channel',
+    },
+    url: 'https://example.com/next.m3u8',
+} as Channel;
+
+async function flushEffects(): Promise<void> {
+    await Promise.resolve();
+    await Promise.resolve();
+}
+
+function getM3uRouteContext(url: string): {
+    inWorkspace: boolean;
+    playlistId: string | null;
+    provider: 'playlists' | null;
+    section: 'all' | 'favorites' | 'groups' | 'recent' | null;
+} {
+    const match = url.match(
+        /^\/workspace\/playlists\/([^/]+)\/([^/?]+)(?:\/|$)/
+    );
+
+    return {
+        inWorkspace: true,
+        playlistId: match?.[1] ?? null,
+        provider: match ? 'playlists' : null,
+        section:
+            (match?.[2] as 'all' | 'favorites' | 'groups' | 'recent' | null) ??
+            null,
+    };
+}
+
+describe('M3uWorkspaceRouteSession', () => {
+    const routerEvents = new Subject<NavigationEnd>();
+    const playlistContext = {
+        syncFromUrl: jest.fn(),
+    };
+    const playlistsService = {
+        getPlaylist: jest.fn(),
+    };
+    const store = {
+        dispatch: jest.fn(),
+    };
+    const router = {
+        url: `/workspace/playlists/${PLAYLIST_ID}/all`,
+        events: routerEvents.asObservable(),
+    };
+
+    beforeEach(async () => {
+        router.url = `/workspace/playlists/${PLAYLIST_ID}/all`;
+        playlistContext.syncFromUrl.mockImplementation((url: string) =>
+            getM3uRouteContext(url)
+        );
+        playlistsService.getPlaylist.mockReset();
+        store.dispatch.mockClear();
+
+        await TestBed.configureTestingModule({
+            providers: [
+                M3uWorkspaceRouteSession,
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: playlistContext,
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsService,
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: Store,
+                    useValue: store,
+                },
+            ],
+        });
+    });
+
+    it('does not start channel loading for collection routes like favorites', async () => {
+        router.url = `/workspace/playlists/${PLAYLIST_ID}/favorites`;
+
+        TestBed.inject(M3uWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(store.dispatch).toHaveBeenCalledWith(
+            ChannelActions.resetActiveChannel()
+        );
+        expect(store.dispatch).toHaveBeenCalledWith(
+            ChannelActions.setChannelsLoading({ loading: false })
+        );
+        expect(playlistsService.getPlaylist).not.toHaveBeenCalled();
+    });
+
+    it('ignores stale playlist responses after a newer route request wins', async () => {
+        const firstResponse = new Subject<Playlist>();
+        const secondResponse = new Subject<Playlist>();
+
+        playlistsService.getPlaylist.mockImplementation((playlistId: string) => {
+            return playlistId === PLAYLIST_ID
+                ? firstResponse.asObservable()
+                : secondResponse.asObservable();
+        });
+
+        TestBed.inject(M3uWorkspaceRouteSession);
+        await flushEffects();
+
+        router.url = `/workspace/playlists/${NEXT_PLAYLIST_ID}/all`;
+        routerEvents.next(new NavigationEnd(1, router.url, router.url));
+        await flushEffects();
+
+        secondResponse.next({
+            favorites: [NEXT_CHANNEL.url],
+            playlist: {
+                items: [NEXT_CHANNEL],
+            },
+        } as Playlist);
+        secondResponse.complete();
+        await flushEffects();
+
+        firstResponse.next({
+            favorites: [PRIMARY_CHANNEL.url],
+            playlist: {
+                items: [PRIMARY_CHANNEL],
+            },
+        } as Playlist);
+        firstResponse.complete();
+        await flushEffects();
+
+        const setChannelsCalls = store.dispatch.mock.calls.filter(
+            ([action]) => action.type === ChannelActions.setChannels.type
+        );
+
+        expect(setChannelsCalls).toEqual([
+            [ChannelActions.setChannels({ channels: [NEXT_CHANNEL] })],
+        ]);
+        expect(store.dispatch).toHaveBeenCalledWith(
+            FavoritesActions.setFavorites({
+                channelIds: [NEXT_CHANNEL.url],
+            })
+        );
+    });
+});
diff --git a/libs/playlist/m3u/feature-player/src/lib/m3u-workspace-route-session.service.ts b/libs/playlist/m3u/feature-player/src/lib/m3u-workspace-route-session.service.ts
new file mode 100644
index 0000000..9965b0f
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/m3u-workspace-route-session.service.ts
@@ -0,0 +1,157 @@
+import {
+    DestroyRef,
+    ENVIRONMENT_INITIALIZER,
+    inject,
+    Injectable,
+    Provider,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { ChannelActions, FavoritesActions } from 'm3u-state';
+import { filter, firstValueFrom } from 'rxjs';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { PlaylistsService } from 'services';
+
+type M3uLoadedSection = 'all' | 'groups';
+
+@Injectable()
+export class M3uWorkspaceRouteSession {
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly router = inject(Router);
+    private readonly store = inject(Store);
+
+    private currentPlaylistId: string | null = null;
+    private currentSection: string | null = null;
+    private loadRequestId = 0;
+
+    constructor() {
+        this.router.events
+            .pipe(
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe(() => {
+                void this.syncRouteContext();
+            });
+
+        void this.syncRouteContext();
+    }
+
+    private async syncRouteContext(): Promise<void> {
+        const routeContext = this.playlistContext.syncFromUrl(this.router.url);
+        const playlistId =
+            routeContext.provider === 'playlists'
+                ? routeContext.playlistId
+                : null;
+        const section =
+            routeContext.provider === 'playlists' ? routeContext.section : null;
+        const previousSection = this.currentSection;
+        this.currentSection = section;
+        const playlistChanged = playlistId !== this.currentPlaylistId;
+        const shouldLoadPlaylist = this.isLoadedSection(section);
+        const enteringLoadedSection =
+            shouldLoadPlaylist && !this.isLoadedSection(previousSection);
+
+        if (!playlistId) {
+            this.currentPlaylistId = null;
+            this.loadRequestId += 1;
+            this.store.dispatch(
+                ChannelActions.setChannelsLoading({ loading: false })
+            );
+            return;
+        }
+
+        if (playlistChanged) {
+            this.currentPlaylistId = playlistId;
+            this.store.dispatch(ChannelActions.resetActiveChannel());
+        }
+
+        if (!shouldLoadPlaylist) {
+            this.loadRequestId += 1;
+            this.store.dispatch(
+                ChannelActions.setChannelsLoading({ loading: false })
+            );
+            return;
+        }
+
+        if (!playlistChanged && !enteringLoadedSection) {
+            return;
+        }
+
+        const requestId = ++this.loadRequestId;
+        this.store.dispatch(ChannelActions.setChannelsLoading({ loading: true }));
+
+        try {
+            const playlist = await firstValueFrom(
+                this.playlistsService.getPlaylist(playlistId)
+            );
+
+            if (!this.isCurrentLoadRequest(requestId, playlistId, section)) {
+                return;
+            }
+
+            if (playlist.userAgent) {
+                window.electron?.setUserAgent(playlist.userAgent, 'localhost');
+            }
+
+            this.store.dispatch(
+                ChannelActions.setChannels({
+                    channels: playlist.playlist?.items ?? [],
+                })
+            );
+
+            const favorites = (playlist.favorites ?? []).filter(
+                (favorite): favorite is string => typeof favorite === 'string'
+            );
+            this.store.dispatch(
+                FavoritesActions.setFavorites({
+                    channelIds: favorites,
+                })
+            );
+        } catch {
+            if (!this.isCurrentLoadRequest(requestId, playlistId, section)) {
+                return;
+            }
+
+            this.store.dispatch(ChannelActions.setChannels({ channels: [] }));
+            this.store.dispatch(
+                FavoritesActions.setFavorites({ channelIds: [] })
+            );
+        }
+    }
+
+    private isLoadedSection(section: string | null): section is M3uLoadedSection {
+        return section === 'all' || section === 'groups';
+    }
+
+    private isCurrentLoadRequest(
+        requestId: number,
+        playlistId: string,
+        section: M3uLoadedSection
+    ): boolean {
+        return (
+            requestId === this.loadRequestId &&
+            this.currentPlaylistId === playlistId &&
+            this.currentSection === section
+        );
+    }
+}
+
+export function provideM3uWorkspaceRouteSession(): Provider[] {
+    return [
+        M3uWorkspaceRouteSession,
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                inject(M3uWorkspaceRouteSession);
+            },
+        },
+    ];
+}
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html
new file mode 100644
index 0000000..e2a5c02
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.html
@@ -0,0 +1,98 @@
+<div
+    class="sidebar"
+    appResizable
+    [minWidth]="sidebarMinWidth"
+    [maxWidth]="sidebarMaxWidth"
+    [defaultWidth]="sidebarWidth()"
+    [style.width.px]="sidebarWidth()"
+    [storageKey]="sidebarStorageKey()"
+    (widthChange)="onSidebarWidthChange($event)"
+    (resizeEnd)="onSidebarResizeEnd($event)"
+>
+    @defer {
+        <app-sidebar
+            [channels]="(channels$ | async)!"
+            [channelsLoading]="channelsLoading()"
+            [showPlaylistHeader]="!isWorkspaceLayout"
+            [activeView]="activeView()"
+            [sidebarWidth]="sidebarWidth()"
+            (sidebarWidthRequested)="onGroupedSidebarWidthRequested($event)"
+            (sidebarWidthRequestEnded)="onGroupedSidebarWidthRequestEnded($event)"
+        />
+    } @loading {
+        <app-channel-list-loading-state [view]="activeView()" />
+    } @placeholder {
+        <app-channel-list-loading-state [view]="activeView()" />
+    }
+</div>
+
+<div class="content-container">
+    @if (activeChannel(); as activeChannel) {
+        @let playbackTarget = playbackChannel();
+        @if (activeChannel.radio === 'true' || shouldShowInlinePlayer(activeChannel)) {
+            <div class="video-player">
+                @if (activeChannel.radio === 'true') {
+                    <app-audio-player
+                        [url]="activeChannel.url"
+                        [icon]="activeChannel?.tvg?.logo!"
+                        [channelName]="activeChannel.name || activeChannel?.tvg?.name || ''"
+                    />
+                } @else {
+                    @if (playerSettings.player === 'videojs') {
+                        <app-vjs-player
+                            [options]="{
+                                sources: [
+                                    {
+                                        src:
+                                            playbackTarget?.url +
+                                            playbackTarget?.epgParams,
+                                        type: 'application/x-mpegURL',
+                                    },
+                                ],
+                            }"
+                            [volume]="volume"
+                            [class.hide-captions]="!playerSettings.showCaptions"
+                        />
+                    }
+                    @if (playerSettings.player === 'html5') {
+                        <app-html-video-player
+                            [channel]="playbackTarget!"
+                            [volume]="volume"
+                            [showCaptions]="playerSettings.showCaptions!"
+                        />
+                    }
+                    @if (playerSettings.player === 'artplayer') {
+                        <app-art-player
+                            [channel]="playbackTarget!"
+                            [volume]="volume"
+                            [showCaptions]="playerSettings.showCaptions!"
+                        />
+                    }
+                }
+            </div>
+        }
+
+        @if (activeChannel.radio !== 'true') {
+            <div class="epg">
+                <div class="epg-content">
+                    <app-epg-list
+                        [archivePlaybackAvailable]="archivePlaybackAvailable()"
+                    />
+                </div>
+            </div>
+        }
+
+        @if (showChannelNumberOverlay) {
+            <div class="channel-number-overlay">
+                <div class="channel-number-display">
+                    {{ channelNumberInput }}
+                </div>
+            </div>
+        }
+    } @else {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
+        />
+    }
+</div>
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
new file mode 100644
index 0000000..806f3a2
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
@@ -0,0 +1,112 @@
+@use '../../../../../../ui/styles/portal-layout' as portal;
+
+@include portal.live-layout;
+
+:host {
+    min-height: 0;
+    background: var(--mat-sys-surface);
+}
+
+.sidebar {
+    > app-channel-list-loading-state {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    app-sidebar {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+    }
+}
+
+.content-container {
+    min-width: 0;
+    background: var(--mat-sys-surface);
+}
+
+.video-player {
+    background: #000;
+
+    &:has(> app-audio-player) {
+        background: var(--mat-sys-surface);
+    }
+
+    > app-audio-player,
+    > app-vjs-player,
+    > app-html-video-player,
+    > app-art-player {
+        flex: 1;
+        min-height: 0;
+        display: block;
+    }
+}
+
+.epg {
+    border-top: 1px solid var(--mat-sys-outline-variant);
+    background: var(--mat-sys-surface);
+}
+
+.epg-content {
+    > app-epg-list {
+        flex: 1;
+        min-height: 0;
+    }
+}
+
+.channel-number-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    pointer-events: none;
+}
+
+.channel-number-display {
+    min-width: 120px;
+    padding: 2rem 3rem;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    background: rgba(0, 0, 0, 0.85);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 6rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-align: center;
+    animation: scaleIn 0.15s ease-out;
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@media only screen and (max-width: 599px) {
+    :host {
+        flex-direction: column-reverse;
+    }
+
+    .sidebar {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        height: 50vh;
+        border-right: none;
+        border-top: 1px solid var(--mat-sys-outline-variant);
+    }
+
+    .content-container {
+        height: 50vh;
+    }
+}
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.spec.ts b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.spec.ts
new file mode 100644
index 0000000..a7c1062
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.spec.ts
@@ -0,0 +1,413 @@
+import { AsyncPipe } from '@angular/common';
+import { NO_ERRORS_SCHEMA, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+import { BehaviorSubject, of } from 'rxjs';
+import {
+    ChannelActions,
+    selectActive,
+    selectActivePlaybackUrl,
+    selectChannels,
+    selectChannelsLoading,
+    selectCurrentEpgProgram,
+} from 'm3u-state';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    WorkspaceHeaderContextService,
+} from '@iptvnator/portal/shared/util';
+import { DataService, PlaylistsService, SettingsStore } from 'services';
+import {
+    Channel,
+    Settings,
+    VideoPlayer,
+} from 'shared-interfaces';
+import { Overlay } from '@angular/cdk/overlay';
+import { VideoPlayerComponent } from './video-player.component';
+
+describe('VideoPlayerComponent', () => {
+    let fixture: ComponentFixture<VideoPlayerComponent>;
+    let component: VideoPlayerComponent;
+    let headerContext: WorkspaceHeaderContextService;
+
+    const playlistId = signal('playlist-1');
+    const activeChannel = signal<Channel | null>(null);
+    const activePlaybackUrl = signal<string | null>(null);
+    const channels = signal<Channel[]>([]);
+    const channelsLoading = signal(false);
+    const currentEpgProgram = signal(null);
+
+    const channels$ = new BehaviorSubject<Channel[]>([]);
+    const activeChannel$ = new BehaviorSubject<Channel | null>(null);
+    const currentEpgProgram$ = new BehaviorSubject(null);
+
+    const player = signal<VideoPlayer>(VideoPlayer.VideoJs);
+    const showCaptions = signal(false);
+
+    const overlayRef = {
+        attach: jest.fn().mockReturnValue({ instance: {} }),
+        backdropClick: jest.fn().mockReturnValue(of(undefined)),
+        dispose: jest.fn(),
+    };
+    const positionStrategy = {
+        centerHorizontally: jest.fn().mockReturnThis(),
+        centerVertically: jest.fn().mockReturnThis(),
+    };
+    const overlayMock = {
+        position: jest.fn().mockReturnValue({
+            global: jest.fn().mockReturnValue(positionStrategy),
+        }),
+        create: jest.fn().mockReturnValue(overlayRef),
+    };
+
+    const storeMock = {
+        dispatch: jest.fn(),
+        selectSignal: jest.fn((selector: unknown) => {
+            switch (selector) {
+                case selectActive:
+                    return activeChannel;
+                case selectActivePlaybackUrl:
+                    return activePlaybackUrl;
+                case selectChannels:
+                    return channels;
+                case selectChannelsLoading:
+                    return channelsLoading;
+                case selectCurrentEpgProgram:
+                    return currentEpgProgram;
+                default:
+                    return signal(null);
+            }
+        }),
+        select: jest.fn((selector: unknown) => {
+            switch (selector) {
+                case selectChannels:
+                    return channels$.asObservable();
+                case selectActive:
+                    return activeChannel$.asObservable();
+                case selectCurrentEpgProgram:
+                    return currentEpgProgram$.asObservable();
+                default:
+                    return of(null);
+            }
+        }),
+    };
+
+    const routerMock = {
+        url: '/workspace/playlists/playlist-1/all',
+        navigate: jest.fn(),
+        currentNavigation: jest.fn().mockReturnValue(null),
+    };
+
+    const playlistsServiceMock = {
+        getPlaylist: jest.fn(() =>
+            of({
+                playlist: {
+                    items: channels(),
+                },
+                favorites: [],
+            })
+        ),
+        getPlaylistWithGlobalFavorites: jest.fn(() =>
+            of({
+                playlist: {
+                    items: [],
+                },
+                favorites: [],
+            })
+        ),
+        addM3uRecentlyViewed: jest.fn(() =>
+            of({
+                recentlyViewed: [],
+            })
+        ),
+    };
+
+    const sampleChannel: Channel = {
+        id: 'channel-1',
+        url: 'http://localhost/live.m3u8',
+        name: 'Sample TV',
+        epgParams: '',
+        radio: 'false',
+        tvg: {
+            id: 'sample-tvg-id',
+            logo: 'http://localhost/logo.png',
+            name: 'Sample TV',
+        },
+    } as Channel;
+
+    function syncStoreState(channel: Channel | null): void {
+        activeChannel.set(channel);
+        activeChannel$.next(channel);
+        channels.set(channel ? [channel] : []);
+        channels$.next(channel ? [channel] : []);
+    }
+
+    beforeEach(async () => {
+        syncStoreState(null);
+        localStorage.removeItem('m3u-sidebar-width');
+        player.set(VideoPlayer.VideoJs);
+        showCaptions.set(false);
+        activePlaybackUrl.set(null);
+        channelsLoading.set(false);
+        currentEpgProgram.set(null);
+        currentEpgProgram$.next(null);
+        overlayMock.create.mockClear();
+        overlayRef.attach.mockClear();
+        overlayRef.dispose.mockClear();
+        storeMock.dispatch.mockClear();
+
+        await TestBed.configureTestingModule({
+            imports: [VideoPlayerComponent],
+            schemas: [NO_ERRORS_SCHEMA],
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        params: of({ id: playlistId(), view: 'all' }),
+                        queryParams: of({}),
+                        snapshot: {
+                            data: { layout: 'workspace' },
+                            queryParams: {},
+                        },
+                    },
+                },
+                {
+                    provide: Router,
+                    useValue: routerMock,
+                },
+                {
+                    provide: Store,
+                    useValue: storeMock,
+                },
+                {
+                    provide: Overlay,
+                    useValue: overlayMock,
+                },
+                {
+                    provide: DataService,
+                    useValue: {
+                        sendIpcEvent: jest.fn(),
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsServiceMock,
+                },
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: {
+                        resolvedPlaylistId: playlistId,
+                    },
+                },
+                {
+                    provide: SettingsStore,
+                    useValue: {
+                        player,
+                        showCaptions,
+                    },
+                },
+                {
+                    provide: StorageMap,
+                    useValue: {
+                        get: jest.fn(() =>
+                            of({
+                                player: player(),
+                                showCaptions: showCaptions(),
+                            } as Partial<Settings>)
+                        ),
+                    },
+                },
+                {
+                    provide: PORTAL_EXTERNAL_PLAYBACK,
+                    useValue: {
+                        activeSession: signal(null),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(VideoPlayerComponent, {
+                set: {
+                    imports: [
+                        AsyncPipe,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(VideoPlayerComponent);
+        component = fixture.componentInstance;
+        headerContext = TestBed.inject(WorkspaceHeaderContextService);
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('registers and clears the workspace multi-EPG header shortcut', () => {
+        fixture.detectChanges();
+
+        expect(headerContext.action()).toEqual(
+            expect.objectContaining({
+                id: 'm3u-multi-epg',
+                icon: 'view_list',
+            })
+        );
+
+        fixture.destroy();
+        expect(headerContext.action()).toBeNull();
+    });
+
+    it('renders the inline player with the embedded EPG panel', () => {
+        syncStoreState(sampleChannel);
+        player.set(VideoPlayer.VideoJs);
+
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.video-player')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('app-vjs-player')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('app-epg-list')
+        ).not.toBeNull();
+    });
+
+    it('renders only the EPG panel when an external player is configured', () => {
+        syncStoreState(sampleChannel);
+        player.set(VideoPlayer.MPV);
+
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.video-player')
+        ).toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('app-epg-list')
+        ).not.toBeNull();
+    });
+
+    it('uses the active playback override url when archive playback is active', () => {
+        syncStoreState(sampleChannel);
+        player.set(VideoPlayer.VideoJs);
+        activePlaybackUrl.set(
+            'http://localhost/archive.m3u8?utc=123&lutc=456'
+        );
+
+        fixture.detectChanges();
+
+        expect(component.playbackChannel()?.url).toBe(
+            'http://localhost/archive.m3u8?utc=123&lutc=456'
+        );
+
+        activePlaybackUrl.set(null);
+        fixture.detectChanges();
+
+        expect(component.playbackChannel()?.url).toBe(sampleChannel.url);
+    });
+
+    it('updates the outer sidebar width while grouped view requests a larger total width', () => {
+        fixture.detectChanges();
+
+        component.onGroupedSidebarWidthRequested(540);
+        fixture.detectChanges();
+
+        const sidebar = fixture.nativeElement.querySelector(
+            '.sidebar'
+        ) as HTMLElement | null;
+
+        expect(sidebar?.style.width).toBe('540px');
+    });
+
+    it('uses the single-pane sidebar key for all-channel view instead of the groups total key', () => {
+        fixture.destroy();
+
+        localStorage.setItem('m3u-sidebar-width', '320');
+        localStorage.setItem('m3u-groups-sidebar-width', '560');
+
+        fixture = TestBed.createComponent(VideoPlayerComponent);
+        component = fixture.componentInstance;
+        headerContext = TestBed.inject(WorkspaceHeaderContextService);
+
+        fixture.detectChanges();
+
+        const sidebar = fixture.nativeElement.querySelector(
+            '.sidebar'
+        ) as HTMLElement | null;
+
+        expect(sidebar?.style.width).toBe('320px');
+    });
+
+    it('tracks manual sidebar resize and persists the committed width', () => {
+        fixture.detectChanges();
+
+        component.onSidebarWidthChange(420);
+        fixture.detectChanges();
+
+        const sidebar = fixture.nativeElement.querySelector(
+            '.sidebar'
+        ) as HTMLElement | null;
+
+        expect(sidebar?.style.width).toBe('420px');
+
+        component.onSidebarResizeEnd(420);
+
+        expect(localStorage.getItem('m3u-sidebar-width')).toBe('420');
+    });
+
+    it('clamps and persists grouped-view sidebar width requests on resize end', () => {
+        fixture.detectChanges();
+
+        component.onGroupedSidebarWidthRequestEnded(640);
+        fixture.detectChanges();
+
+        const sidebar = fixture.nativeElement.querySelector(
+            '.sidebar'
+        ) as HTMLElement | null;
+
+        expect(sidebar?.style.width).toBe('600px');
+        expect(localStorage.getItem('m3u-sidebar-width')).toBe('600');
+    });
+
+    it('renders the shared empty state when no channel is active', () => {
+        fixture.detectChanges();
+
+        const emptyState = fixture.nativeElement.querySelector(
+            'app-portal-empty-state'
+        ) as HTMLElement | null;
+
+        expect(emptyState).not.toBeNull();
+        expect(emptyState?.textContent).toContain(
+            'CHANNELS.SELECT_CHANNEL_PLAYBACK'
+        );
+    });
+
+    it('reuses the registered header shortcut callback to open multi EPG', () => {
+        fixture.detectChanges();
+
+        headerContext.action()?.run();
+
+        expect(overlayMock.create).toHaveBeenCalledTimes(1);
+        expect(overlayRef.attach).toHaveBeenCalledTimes(1);
+    });
+
+    it('switches channels by number through the store action', () => {
+        syncStoreState(sampleChannel);
+        fixture.detectChanges();
+
+        component.switchToChannelByNumber(1);
+
+        expect(storeMock.dispatch).toHaveBeenCalledWith(
+            ChannelActions.setActiveChannel({ channel: sampleChannel })
+        );
+    });
+});
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts
new file mode 100644
index 0000000..96501d4
--- /dev/null
+++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.ts
@@ -0,0 +1,771 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { AsyncPipe, CommonModule } from '@angular/common';
+import {
+    Component,
+    HostListener,
+    Injector,
+    OnDestroy,
+    OnInit,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ResizableDirective } from 'components';
+import { isM3uCatchupPlaybackSupported } from 'm3u-utils';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    COMPONENT_OVERLAY_REF,
+    EpgListComponent,
+    MultiEpgContainerComponent,
+} from '@iptvnator/ui/epg';
+import {
+    ChannelActions,
+    PlaylistActions,
+    selectActive,
+    selectActivePlaybackUrl,
+    selectChannels,
+    selectChannelsLoading,
+    selectCurrentEpgProgram,
+} from 'm3u-state';
+import {
+    firstValueFrom,
+    Observable,
+    Subscription,
+    combineLatest,
+    combineLatestWith,
+    distinctUntilChanged,
+    filter,
+    map,
+    startWith,
+    switchMap,
+    take,
+} from 'rxjs';
+import {
+    getAdjacentChannelItem,
+    getChannelItemByNumber,
+    isWorkspaceLayoutRoute,
+    PORTAL_EXTERNAL_PLAYBACK,
+    WorkspaceHeaderContextService,
+} from '@iptvnator/portal/shared/util';
+import { PortalEmptyStateComponent } from '@iptvnator/portal/shared/ui';
+import {
+    ArtPlayerComponent,
+    AudioPlayerComponent,
+    HtmlVideoPlayerComponent,
+    SidebarComponent,
+    VjsPlayerComponent,
+} from '@iptvnator/ui/playback';
+import { ChannelListLoadingStateComponent } from 'components';
+import { DataService, PlaylistsService, SettingsStore } from 'services';
+import {
+    Channel,
+    EpgProgram,
+    ExternalPlayerSession,
+    PLAYLIST_PARSE_BY_URL,
+    M3uRecentlyViewedItem,
+    PlaylistMeta,
+    STORE_KEY,
+    Settings,
+    VideoPlayer,
+} from 'shared-interfaces';
+
+const M3U_MULTI_EPG_HEADER_ACTION_ID = 'm3u-multi-epg';
+const M3U_SIDEBAR_STORAGE_KEY = 'm3u-sidebar-width';
+const M3U_GROUPS_SIDEBAR_STORAGE_KEY = 'm3u-groups-sidebar-width';
+const M3U_SIDEBAR_MIN_WIDTH = 200;
+const M3U_SIDEBAR_MAX_WIDTH = 600;
+const M3U_SIDEBAR_DEFAULT_WIDTH = 460;
+
+@Component({
+    selector: 'app-video-player',
+    imports: [
+        ArtPlayerComponent,
+        AsyncPipe,
+        AudioPlayerComponent,
+        ChannelListLoadingStateComponent,
+        CommonModule,
+        EpgListComponent,
+        HtmlVideoPlayerComponent,
+        PortalEmptyStateComponent,
+        ResizableDirective,
+        SidebarComponent,
+        TranslatePipe,
+        VjsPlayerComponent,
+    ],
+    templateUrl: './video-player.component.html',
+    styleUrl: './video-player.component.scss',
+})
+export class VideoPlayerComponent implements OnInit, OnDestroy {
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly dataService = inject(DataService);
+    private readonly overlay = inject(Overlay);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly router = inject(Router);
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly storage = inject(StorageMap);
+    private readonly store = inject(Store);
+    private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    private readonly workspaceHeaderContext = inject(
+        WorkspaceHeaderContextService
+    );
+
+    /** Active selected channel */
+    readonly activeChannel = this.store.selectSignal(selectActive);
+    readonly activePlaybackUrl = this.store.selectSignal(
+        selectActivePlaybackUrl
+    );
+    readonly activePlaylistId = this.playlistContext.resolvedPlaylistId;
+    readonly channels = this.store.selectSignal(selectChannels);
+    readonly channelsLoading = this.store.selectSignal(selectChannelsLoading);
+    readonly archivePlaybackAvailable = computed(() =>
+        isM3uCatchupPlaybackSupported(this.activeChannel())
+    );
+    readonly playbackChannel = computed<Channel | null>(() => {
+        const activeChannel = this.activeChannel();
+        if (!activeChannel) {
+            return null;
+        }
+
+        const playbackUrl = this.activePlaybackUrl();
+        if (!playbackUrl) {
+            return activeChannel;
+        }
+
+        return {
+            ...activeChannel,
+            url: playbackUrl,
+            epgParams: '',
+        } as Channel;
+    });
+    readonly sidebarStorageKey = computed(() =>
+        this.activeView() === 'groups'
+            ? M3U_GROUPS_SIDEBAR_STORAGE_KEY
+            : M3U_SIDEBAR_STORAGE_KEY
+    );
+    readonly sidebarWidth = signal(M3U_SIDEBAR_DEFAULT_WIDTH);
+    readonly sidebarMinWidth = M3U_SIDEBAR_MIN_WIDTH;
+    readonly sidebarMaxWidth = M3U_SIDEBAR_MAX_WIDTH;
+
+    /** Channels list */
+    readonly channels$: Observable<Channel[]> = this.store.select(
+        selectChannels
+    ) as Observable<Channel[]>;
+
+    /** Current epg program */
+    readonly epgProgram = this.store.selectSignal(selectCurrentEpgProgram);
+
+    /** Active M3U view (all, groups, favorites, recent) */
+    readonly activeView = toSignal(
+        this.activatedRoute.params.pipe(
+            map((params) => params['view'] || 'all')
+        ),
+        { initialValue: 'all' }
+    );
+
+    /** Selected video player options */
+    playerSettings: Partial<Settings> = {
+        player: VideoPlayer.VideoJs,
+        showCaptions: false,
+    };
+
+    readonly isDesktop = !!window['electron'];
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.activatedRoute);
+
+    /** EPG overlay reference */
+    private overlayRef!: OverlayRef;
+    private unsubscribeRemoteChannelChange?: () => void;
+    private unsubscribeRemoteCommand?: () => void;
+    private statusSubscription?: Subscription;
+    private lastKnownVolume = 1;
+    private lastRecordedRecentKey = '';
+    private lastExternalSessionStateKey = this.getExternalSessionStateKey(
+        this.externalPlayback.activeSession()
+    );
+
+    /** Channel number input state */
+    channelNumberInput = '';
+    showChannelNumberOverlay = false;
+    private channelNumberTimeout?: number;
+
+    volume = 1;
+
+    constructor() {
+        // Initialize volume from localStorage in constructor
+        const savedVolume = localStorage.getItem('volume');
+        if (savedVolume !== null) {
+            this.volume = Number(savedVolume);
+        }
+
+        // React to settings changes
+        effect(() => {
+            this.playerSettings = {
+                player: this.settingsStore.player(),
+                showCaptions: this.settingsStore.showCaptions(),
+            };
+        });
+
+        effect(() => {
+            this.sidebarWidth.set(
+                this.loadSidebarWidth(this.sidebarStorageKey())
+            );
+        });
+
+        effect(() => {
+            const playlistId = this.activePlaylistId();
+            const activeChannel = this.activeChannel();
+
+            if (!playlistId || !activeChannel?.url) {
+                return;
+            }
+
+            const nextKey = `${playlistId}::${activeChannel.url}`;
+            if (this.lastRecordedRecentKey === nextKey) {
+                return;
+            }
+
+            this.lastRecordedRecentKey = nextKey;
+            void this.persistRecentlyViewedChannel(playlistId, activeChannel);
+        });
+
+        effect(() => {
+            const currentView = this.activeView();
+            const channels = this.channels();
+            const activeChannel = this.activeChannel();
+            const state =
+                this.router.currentNavigation()?.extras?.state ??
+                window.history.state;
+            const targetUrl =
+                typeof state?.openRecentChannelUrl === 'string'
+                    ? state.openRecentChannelUrl.trim()
+                    : '';
+
+            if (
+                currentView !== 'recent' ||
+                !targetUrl ||
+                channels.length === 0
+            ) {
+                return;
+            }
+
+            if (activeChannel?.url === targetUrl) {
+                this.clearConsumedRecentChannelState();
+                return;
+            }
+
+            const matchedChannel = channels.find(
+                (channel) => channel.url === targetUrl
+            );
+            if (!matchedChannel) {
+                return;
+            }
+
+            this.store.dispatch(
+                ChannelActions.setActiveChannel({ channel: matchedChannel })
+            );
+            this.clearConsumedRecentChannelState();
+        });
+
+        effect(() => {
+            const player = this.settingsStore.player();
+            const session = this.externalPlayback.activeSession();
+            const activeChannel = this.activeChannel();
+            const sessionStateKey = this.getExternalSessionStateKey(session);
+
+            if (sessionStateKey === this.lastExternalSessionStateKey) {
+                return;
+            }
+
+            this.lastExternalSessionStateKey = sessionStateKey;
+
+            if (
+                !activeChannel ||
+                !this.isExternalPlayer(player) ||
+                !this.isTerminalExternalSession(session)
+            ) {
+                return;
+            }
+
+            this.store.dispatch(ChannelActions.resetActiveChannel());
+        });
+    }
+
+    /**
+     * Sets video player and subscribes to channel list from the store
+     */
+    ngOnInit(): void {
+        this.applySettings();
+        this.getPlaylistUrlAsParam();
+        this.registerHeaderShortcut();
+
+        // Setup remote control channel change listener (Electron only)
+        if (this.isDesktop && window.electron?.onChannelChange) {
+            const unsubscribe = window.electron.onChannelChange(
+                (data: { direction: 'up' | 'down' }) => {
+                    this.handleRemoteChannelChange(data.direction);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteChannelChange = unsubscribe;
+            }
+        }
+        if (this.isDesktop && window.electron?.onRemoteControlCommand) {
+            const unsubscribe = window.electron.onRemoteControlCommand(
+                (command) => {
+                    this.handleRemoteControlCommand(command);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteCommand = unsubscribe;
+            }
+        }
+
+        this.statusSubscription = combineLatest([
+            this.channels$,
+            this.store.select(selectActive),
+            this.store.select(selectCurrentEpgProgram).pipe(startWith(null)),
+        ]).subscribe(([channels, activeChannel, epgProgram]) => {
+            if (!window.electron?.updateRemoteControlStatus || !activeChannel) {
+                return;
+            }
+
+            const currentEpgProgram = epgProgram as
+                | EpgProgram
+                | null
+                | undefined;
+            const currentIndex = channels.findIndex(
+                (channel) => channel.url === activeChannel.url
+            );
+
+            window.electron.updateRemoteControlStatus({
+                portal: 'm3u',
+                isLiveView: true,
+                channelName: activeChannel.name ?? activeChannel.tvg?.name,
+                channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
+                epgTitle: currentEpgProgram?.title,
+                epgStart: currentEpgProgram?.start,
+                epgEnd: currentEpgProgram?.stop,
+                supportsVolume: true,
+                volume: this.volume,
+                muted: this.volume === 0,
+            });
+        });
+    }
+
+    /**
+     * Handle remote control channel change
+     */
+    handleRemoteChannelChange(direction: 'up' | 'down'): void {
+        console.log(`Remote control: changing channel ${direction}`);
+
+        // Use combineLatest to get both values and take only the first emission
+        combineLatest([this.channels$, this.store.select(selectActive)])
+            .pipe(
+                filter(([channels, activeChannel]) => {
+                    return channels.length > 0 && !!activeChannel;
+                }),
+                take(1),
+                map(([channels, activeChannel]) => {
+                    return {
+                        channels,
+                        activeChannel: activeChannel as Channel,
+                    };
+                })
+            )
+            .subscribe({
+                next: ({ channels, activeChannel }) => {
+                    const nextChannel = getAdjacentChannelItem(
+                        channels,
+                        activeChannel.url,
+                        direction,
+                        (channel) => channel.url
+                    );
+
+                    if (!nextChannel) {
+                        return;
+                    }
+
+                    this.store.dispatch(
+                        ChannelActions.setActiveChannel({
+                            channel: nextChannel,
+                        })
+                    );
+                },
+                error: (err) => {
+                    console.error('Error changing channel:', err);
+                },
+            });
+    }
+
+    ngOnDestroy(): void {
+        this.workspaceHeaderContext.clearAction(M3U_MULTI_EPG_HEADER_ACTION_ID);
+        this.unsubscribeRemoteChannelChange?.();
+        this.unsubscribeRemoteCommand?.();
+        this.statusSubscription?.unsubscribe();
+    }
+
+    onSidebarWidthChange(width: number): void {
+        this.sidebarWidth.set(this.clampSidebarWidth(width));
+    }
+
+    onSidebarResizeEnd(width: number): void {
+        this.persistSidebarWidth(this.sidebarStorageKey(), width);
+    }
+
+    onGroupedSidebarWidthRequested(width: number): void {
+        this.sidebarWidth.set(this.clampSidebarWidth(width));
+    }
+
+    onGroupedSidebarWidthRequestEnded(width: number): void {
+        this.persistSidebarWidth(this.sidebarStorageKey(), width);
+    }
+
+    /**
+     * Opens a playlist provided as a url param
+     * e.g. iptvnat.or?url=http://...
+     * @pwaOnly
+     */
+    getPlaylistUrlAsParam() {
+        const URL_REGEX = /^(http|https|file):\/\/[^ "]+$/;
+        const playlistUrl = this.activatedRoute.snapshot.queryParams['url'];
+
+        if (playlistUrl && playlistUrl.match(URL_REGEX)) {
+            this.dataService.sendIpcEvent(PLAYLIST_PARSE_BY_URL, {
+                url: playlistUrl,
+                isTemporary: true,
+            });
+        }
+    }
+
+    /**
+     * Reads the app configuration from the browsers storage and applies the settings in the current component
+     */
+    applySettings(): void {
+        this.storage.get(STORE_KEY.Settings).subscribe((settings: unknown) => {
+            if (settings && Object.keys(settings as Settings).length > 0) {
+                this.playerSettings = {
+                    player:
+                        (settings as Settings).player || VideoPlayer.VideoJs,
+                    showCaptions: (settings as Settings).showCaptions || false,
+                };
+            }
+        });
+    }
+
+    private loadSidebarWidth(storageKey: string): number {
+        const fallbackKey =
+            storageKey === M3U_GROUPS_SIDEBAR_STORAGE_KEY
+                ? M3U_SIDEBAR_STORAGE_KEY
+                : '';
+        const storedWidth = Number.parseInt(
+            localStorage.getItem(storageKey) ??
+                (fallbackKey ? localStorage.getItem(fallbackKey) : '') ??
+                '',
+            10
+        );
+
+        return this.clampSidebarWidth(
+            Number.isNaN(storedWidth)
+                ? M3U_SIDEBAR_DEFAULT_WIDTH
+                : storedWidth
+        );
+    }
+
+    private persistSidebarWidth(storageKey: string, width: number): void {
+        const clampedWidth = this.clampSidebarWidth(width);
+        this.sidebarWidth.set(clampedWidth);
+        localStorage.setItem(storageKey, clampedWidth.toString());
+    }
+
+    private clampSidebarWidth(width: number): number {
+        return Math.max(
+            M3U_SIDEBAR_MIN_WIDTH,
+            Math.min(M3U_SIDEBAR_MAX_WIDTH, width)
+        );
+    }
+
+    private async persistRecentlyViewedChannel(
+        playlistId: string,
+        channel: Channel
+    ): Promise<void> {
+        const recentlyViewedItem: M3uRecentlyViewedItem = {
+            source: 'm3u',
+            id: channel.url,
+            url: channel.url,
+            title: channel.name?.trim() || channel.tvg?.name || channel.url,
+            channel_id: channel.id,
+            poster_url: channel.tvg?.logo || undefined,
+            tvg_id: channel.tvg?.id || undefined,
+            tvg_name: channel.tvg?.name || undefined,
+            group_title: channel.group?.title || undefined,
+            category_id: 'live',
+            added_at: new Date().toISOString(),
+        };
+
+        const updatedPlaylist = await firstValueFrom(
+            this.playlistsService.addM3uRecentlyViewed(
+                playlistId,
+                recentlyViewedItem
+            )
+        );
+
+        this.store.dispatch(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    _id: playlistId,
+                    recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                } as PlaylistMeta,
+            }) as any
+        );
+    }
+
+    private clearConsumedRecentChannelState(): void {
+        const historyState = (window.history.state ?? {}) as Record<
+            string,
+            unknown
+        >;
+        if (!historyState['openRecentChannelUrl']) {
+            return;
+        }
+
+        try {
+            const nextState = { ...historyState };
+            delete nextState['openRecentChannelUrl'];
+            window.history.replaceState(nextState, document.title);
+        } catch {
+            // no-op
+        }
+    }
+
+    /**
+     * Opens the overlay with multi EPG view
+     */
+    openMultiEpgView(): void {
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            positionStrategy,
+            width: '100%',
+            height: '100%',
+        });
+
+        const injector = Injector.create({
+            providers: [
+                {
+                    provide: COMPONENT_OVERLAY_REF,
+                    useValue: this.overlayRef,
+                },
+            ],
+        });
+
+        const portal = new ComponentPortal(
+            MultiEpgContainerComponent,
+            null,
+            injector
+        );
+
+        const componentRef = this.overlayRef.attach(portal);
+        componentRef.instance.playlistChannels = this.store.select(
+            selectChannels
+        ) as Observable<Channel[]>;
+
+        // Pass the active channel's tvg.id for highlighting
+        const currentChannel = this.activeChannel();
+        if (currentChannel) {
+            componentRef.instance.activeChannelId =
+                currentChannel.tvg?.id || null;
+        }
+
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.overlayRef.dispose();
+        });
+    }
+
+    @HostListener('document:keydown', ['$event'])
+    handleKeyPress(event: KeyboardEvent): void {
+        // Only handle digit keys (0-9)
+        if (event.key >= '0' && event.key <= '9') {
+            // Don't trigger hotkeys when user is typing in input fields
+            if (this.isTypingInInput(event)) {
+                return;
+            }
+            event.preventDefault();
+            this.handleChannelNumberInput(event.key);
+        }
+    }
+
+    /**
+     * Handle channel number input from keyboard
+     * Debounces input to allow multi-digit channel numbers
+     */
+    handleChannelNumberInput(digit: string): void {
+        // Clear existing timeout
+        if (this.channelNumberTimeout) {
+            clearTimeout(this.channelNumberTimeout);
+        }
+
+        // Add digit to current input
+        this.channelNumberInput += digit;
+        this.showChannelNumberOverlay = true;
+
+        // Set timeout to switch channel after 2 seconds of no input
+        this.channelNumberTimeout = window.setTimeout(() => {
+            this.switchToChannelByNumber(parseInt(this.channelNumberInput, 10));
+            this.clearChannelNumberInput();
+        }, 2000);
+    }
+
+    /**
+     * Switch to channel by number (1-based index)
+     */
+    switchToChannelByNumber(channelNumber: number): void {
+        this.channels$
+            .pipe(
+                take(1),
+                map((channels) =>
+                    getChannelItemByNumber(channels, channelNumber)
+                )
+            )
+            .subscribe((channel) => {
+                if (channel) {
+                    this.store.dispatch(
+                        ChannelActions.setActiveChannel({ channel })
+                    );
+                }
+            });
+    }
+
+    /**
+     * Clear channel number input and hide overlay
+     */
+    clearChannelNumberInput(): void {
+        this.channelNumberInput = '';
+        this.showChannelNumberOverlay = false;
+        if (this.channelNumberTimeout) {
+            clearTimeout(this.channelNumberTimeout);
+            this.channelNumberTimeout = undefined;
+        }
+    }
+
+    /**
+     * Check if the user is currently typing in an input or textarea field
+     * @param event Keyboard event
+     * @returns true if the event target is an input or textarea element
+     */
+    private isTypingInInput(event: Event): boolean {
+        const target = event.target;
+        return (
+            target instanceof HTMLInputElement ||
+            target instanceof HTMLTextAreaElement
+        );
+    }
+
+    private handleRemoteControlCommand(command: {
+        type:
+            | 'channel-select-number'
+            | 'volume-up'
+            | 'volume-down'
+            | 'volume-toggle-mute';
+        number?: number;
+    }): void {
+        if (command.type === 'channel-select-number' && command.number) {
+            this.switchToChannelByNumber(command.number);
+            return;
+        }
+
+        if (command.type === 'volume-up') {
+            this.setVolume(this.volume + 0.1);
+        } else if (command.type === 'volume-down') {
+            this.setVolume(this.volume - 0.1);
+        } else if (command.type === 'volume-toggle-mute') {
+            if (this.volume === 0) {
+                this.setVolume(this.lastKnownVolume || 1);
+            } else {
+                this.lastKnownVolume = this.volume;
+                this.setVolume(0);
+            }
+        }
+    }
+
+    private setVolume(next: number): void {
+        const clamped = Math.max(0, Math.min(1, Number(next.toFixed(2))));
+        this.volume = clamped;
+        if (clamped > 0) {
+            this.lastKnownVolume = clamped;
+        }
+        localStorage.setItem('volume', String(clamped));
+
+        if (window.electron?.updateRemoteControlStatus) {
+            window.electron.updateRemoteControlStatus({
+                portal: 'm3u',
+                isLiveView: true,
+                supportsVolume: true,
+                volume: this.volume,
+                muted: this.volume === 0,
+            });
+        }
+    }
+
+    shouldShowInlinePlayer(channel: Channel | null | undefined): boolean {
+        if (!channel) {
+            return false;
+        }
+
+        return !this.isExternalPlayer(this.playerSettings.player);
+    }
+
+    private getExternalSessionStateKey(
+        session: ExternalPlayerSession | null | undefined
+    ): string | null {
+        if (!session) {
+            return null;
+        }
+
+        return `${session.id}:${session.status}`;
+    }
+
+    private isExternalPlayer(
+        player: VideoPlayer | null | undefined
+    ): player is VideoPlayer.MPV | VideoPlayer.VLC {
+        return player === VideoPlayer.MPV || player === VideoPlayer.VLC;
+    }
+
+    private isTerminalExternalSession(
+        session: ExternalPlayerSession | null | undefined
+    ): boolean {
+        return session?.status === 'closed' || session?.status === 'error';
+    }
+
+    private registerHeaderShortcut(): void {
+        if (!this.isWorkspaceLayout) {
+            return;
+        }
+
+        this.workspaceHeaderContext.setAction({
+            id: M3U_MULTI_EPG_HEADER_ACTION_ID,
+            icon: 'view_list',
+            tooltipKey: 'TOP_MENU.OPEN_MULTI_EPG',
+            ariaLabelKey: 'TOP_MENU.OPEN_MULTI_EPG',
+            palette: {
+                labelKey: 'TOP_MENU.OPEN_MULTI_EPG',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_MULTI_EPG_DESCRIPTION',
+                keywords: ['epg', 'guide', 'schedule'],
+                priority: 10,
+            },
+            run: () => this.openMultiEpgView(),
+        });
+    }
+}
diff --git a/libs/playlist/shared/ui/jest.config.ts b/libs/playlist/shared/ui/jest.config.ts
new file mode 100644
index 0000000..b10246a
--- /dev/null
+++ b/libs/playlist/shared/ui/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'playlist-shared-ui',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/playlist/shared/ui',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/playlist/shared/ui/project.json b/libs/playlist/shared/ui/project.json
new file mode 100644
index 0000000..81a410e
--- /dev/null
+++ b/libs/playlist/shared/ui/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "playlist-shared-ui",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/playlist/shared/ui/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:playlist", "domain:m3u", "type:ui"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/playlist/shared/ui/jest.config.ts",
+                "tsConfig": "libs/playlist/shared/ui/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/index.ts b/libs/playlist/shared/ui/src/index.ts
new file mode 100644
index 0000000..e550324
--- /dev/null
+++ b/libs/playlist/shared/ui/src/index.ts
@@ -0,0 +1,6 @@
+export * from './lib/add-playlist-menu/playlist-type';
+export * from './lib/filter-sort-menu/filter-sort-menu.component';
+export * from './lib/playlist-switcher/playlist-switcher.component';
+export * from './lib/recent-playlists/playlist-info/playlist-info.component';
+export * from './lib/recent-playlists/recent-playlists.component';
+export * from './lib/recent-playlists/empty-state/empty-state.component';
diff --git a/libs/playlist/shared/ui/src/lib/add-playlist-menu/playlist-type.ts b/libs/playlist/shared/ui/src/lib/add-playlist-menu/playlist-type.ts
new file mode 100644
index 0000000..2a9fa16
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/add-playlist-menu/playlist-type.ts
@@ -0,0 +1 @@
+export type PlaylistType = 'xtream' | 'url' | 'text' | 'file' | 'stalker';
diff --git a/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.html b/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.html
new file mode 100644
index 0000000..fb70563
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.html
@@ -0,0 +1,140 @@
+<mat-menu #filterSortMenu="matMenu" class="filter-sort-menu" xPosition="before">
+    <section class="filter-section">
+        <div class="menu-section-header">
+            <mat-icon class="section-icon">filter_list</mat-icon>
+            <span>{{ 'HOME.FILTER_BY_TYPE' | translate }}</span>
+        </div>
+        @for (type of playlistTypes; track type.id) {
+            <button
+                mat-menu-item
+                (click)="togglePlaylistType(type); $event.stopPropagation()"
+                [class.active-option]="type.checked"
+            >
+                <mat-icon>{{ type.icon }}</mat-icon>
+                <span class="menu-item-text">{{
+                    type.translationKey | translate
+                }}</span>
+                <mat-icon
+                    class="check-icon"
+                    [class.check-visible]="type.checked"
+                    >check</mat-icon
+                >
+            </button>
+        }
+    </section>
+
+    <section class="sort-section">
+        <div class="menu-section-header">
+            <mat-icon class="section-icon">sort</mat-icon>
+            <span>{{ 'HOME.SORT_BY' | translate }}</span>
+        </div>
+        <button
+            mat-menu-item
+            (click)="
+                setSortOptions(SortBy.NAME, SortOrder.ASC);
+                $event.stopPropagation()
+            "
+            [class.active-option]="isSortActive(SortBy.NAME, SortOrder.ASC)"
+        >
+            <mat-icon>sort_by_alpha</mat-icon>
+            <span class="menu-item-text">{{
+                'HOME.SORT_OPTIONS.NAME_ASC' | translate
+            }}</span>
+            <mat-icon
+                class="check-icon"
+                [class.check-visible]="isSortActive(SortBy.NAME, SortOrder.ASC)"
+                >check</mat-icon
+            >
+        </button>
+        <button
+            mat-menu-item
+            (click)="
+                setSortOptions(SortBy.NAME, SortOrder.DESC);
+                $event.stopPropagation()
+            "
+            [class.active-option]="isSortActive(SortBy.NAME, SortOrder.DESC)"
+        >
+            <mat-icon>sort_by_alpha</mat-icon>
+            <span class="menu-item-text">{{
+                'HOME.SORT_OPTIONS.NAME_DESC' | translate
+            }}</span>
+            <mat-icon
+                class="check-icon"
+                [class.check-visible]="
+                    isSortActive(SortBy.NAME, SortOrder.DESC)
+                "
+                >check</mat-icon
+            >
+        </button>
+        <button
+            mat-menu-item
+            (click)="
+                setSortOptions(SortBy.DATE_ADDED, SortOrder.DESC);
+                $event.stopPropagation()
+            "
+            [class.active-option]="
+                isSortActive(SortBy.DATE_ADDED, SortOrder.DESC)
+            "
+        >
+            <mat-icon>date_range</mat-icon>
+            <span class="menu-item-text">{{
+                'HOME.SORT_OPTIONS.NEWEST' | translate
+            }}</span>
+            <mat-icon
+                class="check-icon"
+                [class.check-visible]="
+                    isSortActive(SortBy.DATE_ADDED, SortOrder.DESC)
+                "
+                >check</mat-icon
+            >
+        </button>
+        <button
+            mat-menu-item
+            (click)="
+                setSortOptions(SortBy.DATE_ADDED, SortOrder.ASC);
+                $event.stopPropagation()
+            "
+            [class.active-option]="
+                isSortActive(SortBy.DATE_ADDED, SortOrder.ASC)
+            "
+        >
+            <mat-icon>date_range</mat-icon>
+            <span class="menu-item-text">{{
+                'HOME.SORT_OPTIONS.OLDEST' | translate
+            }}</span>
+            <mat-icon
+                class="check-icon"
+                [class.check-visible]="
+                    isSortActive(SortBy.DATE_ADDED, SortOrder.ASC)
+                "
+                >check</mat-icon
+            >
+        </button>
+        <button
+            mat-menu-item
+            (click)="
+                setSortOptions(SortBy.CUSTOM, SortOrder.ASC);
+                $event.stopPropagation()
+            "
+            [class.active-option]="isSortActive(SortBy.CUSTOM, SortOrder.ASC)"
+        >
+            <mat-icon>drag_indicator</mat-icon>
+            <span class="menu-item-text">{{
+                'HOME.SORT_OPTIONS.CUSTOM_ORDER' | translate
+            }}</span>
+            <mat-icon
+                class="check-icon"
+                [class.check-visible]="
+                    isSortActive(SortBy.CUSTOM, SortOrder.ASC)
+                "
+                >check</mat-icon
+            >
+        </button>
+    </section>
+
+    <div class="menu-footer">
+        <button mat-button (click)="closeMenu()">
+            {{ 'CLOSE' | translate }}
+        </button>
+    </div>
+</mat-menu>
diff --git a/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.scss b/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.scss
new file mode 100644
index 0000000..3bbf883
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.scss
@@ -0,0 +1,87 @@
+.filter-section,
+.sort-section {
+    padding: 4px 0;
+}
+
+.menu-section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    pointer-events: none;
+
+    .section-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        color: rgba(139, 92, 246, 0.6);
+    }
+}
+
+::ng-deep .filter-sort-menu {
+    .mat-mdc-menu-item {
+        display: flex !important;
+        align-items: center !important;
+        gap: 12px !important;
+        min-height: 40px !important;
+        padding: 0 16px !important;
+
+        .mat-icon:first-child {
+            margin-right: 0 !important;
+            flex-shrink: 0;
+        }
+
+        .menu-item-text {
+            flex: 1;
+            text-align: left;
+        }
+
+        .check-icon {
+            margin-left: auto !important;
+            margin-right: 0 !important;
+            flex-shrink: 0;
+            opacity: 0;
+            transform: scale(0.8);
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &.check-visible {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    }
+}
+
+.active-option {
+    background-color: rgba(139, 92, 246, 0.12) !important;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 60%;
+        background: rgba(139, 92, 246, 0.8);
+        border-radius: 0 2px 2px 0;
+    }
+}
+
+.check-icon {
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+    color: rgba(139, 92, 246, 1) !important;
+}
+
+.menu-footer {
+    padding: 4px 8px 4px;
+    display: flex;
+    justify-content: center;
+}
diff --git a/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.ts b/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.ts
new file mode 100644
index 0000000..7eb37e7
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/filter-sort-menu/filter-sort-menu.component.ts
@@ -0,0 +1,118 @@
+import {
+    Component,
+    effect,
+    inject,
+    input,
+    output,
+    viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { FilterActions, selectActiveTypeFilters } from 'm3u-state';
+import { SortBy, SortOrder, SortService } from 'services';
+
+@Component({
+    selector: 'app-filter-sort-menu',
+    templateUrl: './filter-sort-menu.component.html',
+    styleUrls: ['./filter-sort-menu.component.scss'],
+    imports: [MatButtonModule, MatIconModule, MatMenuModule, TranslateModule],
+})
+export class FilterSortMenuComponent {
+    private readonly store = inject(Store);
+    private readonly sortService = inject(SortService);
+
+    readonly menu = viewChild.required<MatMenu>('filterSortMenu');
+    readonly menuTrigger = input<MatMenuTrigger>();
+    readonly filterChanged = output<void>();
+
+    playlistTypes = [
+        {
+            id: 'm3u',
+            icon: 'playlist_play',
+            translationKey: 'HOME.PLAYLIST_TYPES.M3U',
+            checked: true,
+        },
+        {
+            id: 'xtream',
+            icon: 'cloud',
+            translationKey: 'HOME.PLAYLIST_TYPES.XTREAM',
+            checked: true,
+        },
+        {
+            id: 'stalker',
+            icon: 'router',
+            translationKey: 'HOME.PLAYLIST_TYPES.STALKER',
+            checked: true,
+        },
+    ];
+
+    private readonly selectedTypeFilters = this.store.selectSignal(
+        selectActiveTypeFilters
+    );
+
+    readonly SortBy = SortBy;
+    readonly SortOrder = SortOrder;
+    private readonly currentSortOptions = toSignal(
+        this.sortService.getSortOptions(),
+        {
+            requireSync: true,
+        }
+    );
+
+    constructor() {
+        effect(() => {
+            if (this.selectedTypeFilters) {
+                this.playlistTypes = this.playlistTypes.map((type) => {
+                    type.checked = this.selectedTypeFilters().includes(type.id);
+                    return type;
+                });
+            }
+        });
+    }
+
+    togglePlaylistType(type: {
+        id: string;
+        icon: string;
+        translationKey: string;
+        checked: boolean;
+    }) {
+        const currentlySelectedCount = this.playlistTypes.filter(
+            (item) => item.checked
+        ).length;
+
+        if (type.checked && currentlySelectedCount === 1) {
+            return;
+        }
+
+        type.checked = !type.checked;
+        this.store.dispatch(
+            FilterActions.setSelectedFilters({
+                selectedFilters: this.playlistTypes
+                    .filter((item) => item.checked)
+                    .map((item) => item.id),
+            })
+        );
+        this.filterChanged.emit();
+    }
+
+    setSortOptions(by: SortBy, order: SortOrder): void {
+        this.sortService.setSortOptions({ by, order });
+    }
+
+    isSortActive(by: SortBy, order: SortOrder): boolean {
+        const options = this.currentSortOptions();
+        return options?.by === by && options?.order === order;
+    }
+
+    get activeFiltersCount(): number {
+        return this.playlistTypes.filter((type) => !type.checked).length;
+    }
+
+    closeMenu(): void {
+        this.menuTrigger()?.closeMenu();
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html
new file mode 100644
index 0000000..3e70348
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.html
@@ -0,0 +1,257 @@
+<div
+    class="playlist-switcher-trigger"
+    [class.is-open]="isMenuOpen()"
+    matRipple
+    [matRippleDisabled]="false"
+    [matMenuTriggerFor]="playlistMenu"
+    #menuTrigger="matMenuTrigger"
+    #triggerElement
+    (menuOpened)="onMenuOpened()"
+    (menuClosed)="onMenuClosed()"
+>
+    <div class="trigger-icon-container">
+        <mat-icon class="trigger-playlist-icon">playlist_play</mat-icon>
+    </div>
+    <div class="playlist-info">
+        <div class="name">{{ displayTitle() }}</div>
+        <div class="channels-count">{{ subtitle() }}</div>
+    </div>
+    @if (canRefreshActivePlaylist()) {
+        <button
+            type="button"
+            mat-icon-button
+            class="trigger-refresh-button"
+            [disabled]="isRefreshingActivePlaylist()"
+            (click)="onRefreshClick($event)"
+            (mousedown)="$event.stopPropagation()"
+            [matTooltip]="'WORKSPACE.SHELL.REFRESH_PLAYLIST' | translate"
+            [attr.aria-label]="
+                'WORKSPACE.SHELL.REFRESH_PLAYLIST' | translate
+            "
+        >
+            <mat-icon
+                class="trigger-refresh-icon"
+                [class.is-spinning]="isRefreshingActivePlaylist()"
+                >sync</mat-icon
+            >
+        </button>
+    }
+    <mat-icon class="dropdown-icon" [class.rotated]="isMenuOpen()">
+        expand_more
+    </mat-icon>
+</div>
+
+<mat-menu
+    #playlistMenu="matMenu"
+    panelClass="playlist-switcher-menu"
+    hasBackdrop
+    backdropClass="playlist-switcher-menu-backdrop"
+    overlapTrigger="false"
+    xPosition="after"
+    yPosition="below"
+>
+    <div class="menu-header">
+        <mat-icon class="menu-header-icon">playlist_play</mat-icon>
+        <span class="menu-header-title">{{
+            'HOME.PLAYLISTS.MY_PLAYLISTS' | translate
+        }}</span>
+        @if (hasSearchToggle()) {
+            <button
+                mat-icon-button
+                type="button"
+                class="search-toggle-btn"
+                [class.is-active]="searchExpanded()"
+                (click)="toggleSearchField($event)"
+                [attr.aria-label]="
+                    'HOME.PLAYLISTS.SEARCH_PLAYLISTS' | translate
+                "
+            >
+                <mat-icon>search</mat-icon>
+            </button>
+        }
+    </div>
+
+    @if (showSearchField()) {
+    <div class="search-container" (click)="$event.stopPropagation()">
+        <mat-icon class="search-icon">search</mat-icon>
+        <input
+            #searchInput
+            type="text"
+            class="search-input"
+            [placeholder]="'HOME.PLAYLISTS.SEARCH_PLAYLISTS' | translate"
+            [ngModel]="searchQuery()"
+            (ngModelChange)="setSearchQuery($event)"
+        />
+        @if (searchQuery()) {
+            <button
+                mat-icon-button
+                class="clear-btn"
+                (click)="setSearchQuery('')"
+            >
+                <mat-icon>close</mat-icon>
+            </button>
+        }
+    </div>
+    }
+
+    @if (showTypeFilters()) {
+        <div class="type-filters" (click)="$event.stopPropagation()">
+            @if (hasType('m3u')) {
+                <button
+                    type="button"
+                    class="type-filter-chip"
+                    [class.selected]="isTypeFilterSelected('m3u')"
+                    (click)="togglePlaylistTypeFilter('m3u', $event)"
+                >
+                    M3U
+                </button>
+            }
+            @if (hasType('stalker')) {
+                <button
+                    type="button"
+                    class="type-filter-chip"
+                    [class.selected]="isTypeFilterSelected('stalker')"
+                    (click)="togglePlaylistTypeFilter('stalker', $event)"
+                >
+                    Stalker
+                </button>
+            }
+            @if (hasType('xtream')) {
+                <button
+                    type="button"
+                    class="type-filter-chip"
+                    [class.selected]="isTypeFilterSelected('xtream')"
+                    (click)="togglePlaylistTypeFilter('xtream', $event)"
+                >
+                    Xtream
+                </button>
+            }
+        </div>
+    }
+
+    <div class="menu-content">
+        @for (playlist of filteredPlaylists(); track playlist._id) {
+            <div
+                class="playlist-item"
+                [class.selected]="isSelected(playlist)"
+                (click)="selectPlaylist(playlist)"
+            >
+                <!-- @if (isSelected(playlist)) {
+                    <mat-icon class="selected-indicator">check</mat-icon>
+                } @else {
+                    <div class="selected-indicator-placeholder"></div>
+                } -->
+
+                <div class="playlist-icon-container">
+                    <mat-icon class="playlist-type-icon">
+                        {{ getPlaylistIcon(playlist) }}
+                    </mat-icon>
+                    @if (playlist.serverUrl) {
+                        <span
+                            class="status-dot"
+                            [class]="getStatusClass(playlist._id)"
+                        ></span>
+                    }
+                    @if (
+                        playlist.autoRefresh &&
+                        !playlist.serverUrl &&
+                        !playlist.macAddress
+                    ) {
+                        <mat-icon class="auto-refresh-indicator"
+                            >autorenew</mat-icon
+                        >
+                    }
+                </div>
+
+                <div class="playlist-details">
+                    <span class="playlist-title">
+                        {{ playlist.title || playlist.filename }}
+                    </span>
+                    <span class="playlist-meta">
+                        {{ getPlaylistMetaLabel(playlist) }}
+                        @if (playlist.updateDate) {
+                            <span class="separator">·</span>
+                            {{
+                                playlist.updateDate
+                                    | date
+                                        : 'MMM d, HH:mm'
+                                        : undefined
+                                        : currentLocale()
+                            }}
+                        }
+                    </span>
+                </div>
+
+                <button
+                    type="button"
+                    class="item-action-trigger"
+                    mat-icon-button
+                    [matMenuTriggerFor]="itemMenu"
+                    [matMenuTriggerData]="{ playlist: playlist }"
+                    (click)="$event.stopPropagation()"
+                    aria-label="Playlist actions"
+                >
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+            </div>
+        } @empty {
+            <div class="empty-state">
+                <mat-icon>playlist_add</mat-icon>
+                <span>{{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }}</span>
+            </div>
+        }
+    </div>
+
+    @if (showAddPlaylist() || showAccountInfo()) {
+        <div class="context-actions-section">
+            @if (showAddPlaylist()) {
+                <button
+                    class="context-action-item"
+                    (click)="requestAddPlaylist()"
+                >
+                    <mat-icon>add</mat-icon>
+                    <span>{{
+                        'WORKSPACE.SHELL.ADD_PLAYLIST' | translate
+                    }}</span>
+                </button>
+            }
+            @if (showAccountInfo()) {
+                <button
+                    class="context-action-item"
+                    (click)="requestAccountInfo()"
+                >
+                    <mat-icon>person</mat-icon>
+                    <span>{{
+                        'WORKSPACE.SHELL.ACCOUNT_INFO' | translate
+                    }}</span>
+                </button>
+            }
+        </div>
+    }
+</mat-menu>
+
+<mat-menu #itemMenu="matMenu" class="playlist-item-action-menu">
+    <ng-template matMenuContent let-playlist="playlist">
+        <button mat-menu-item (click)="openPlaylistInfoFor(playlist, $event)">
+            <mat-icon>info</mat-icon>
+            <span>{{ 'WORKSPACE.SHELL.PLAYLIST_INFO' | translate }}</span>
+        </button>
+        @if (canRefreshPlaylist(playlist)) {
+            <button mat-menu-item (click)="refreshPlaylistFor(playlist, $event)">
+                <mat-icon>sync</mat-icon>
+                <span>{{
+                    'WORKSPACE.SHELL.REFRESH_PLAYLIST' | translate
+                }}</span>
+            </button>
+        }
+        <mat-divider />
+        <button
+            mat-menu-item
+            class="danger"
+            (click)="removePlaylistFor(playlist, $event)"
+        >
+            <mat-icon>delete</mat-icon>
+            <span>{{ 'HOME.PLAYLISTS.REMOVE_DIALOG.TITLE' | translate }}</span>
+        </button>
+    </ng-template>
+</mat-menu>
diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
new file mode 100644
index 0000000..c09cf72
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
@@ -0,0 +1,608 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.playlist-switcher-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 4px 8px 4px 4px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    background: color-mix(in srgb, var(--app-on-surface) 5%, transparent);
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline-variant) 36%, transparent);
+    app-region: no-drag;
+
+    &:hover {
+        background: color-mix(
+            in srgb,
+            var(--app-on-surface) 12%,
+            transparent
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--mat-sys-outline-variant) 64%,
+            transparent
+        );
+    }
+
+    &.is-open {
+        background: color-mix(
+            in srgb,
+            var(--app-on-surface) 12%,
+            transparent
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--mat-sys-outline-variant) 72%,
+            transparent
+        );
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+}
+
+.trigger-icon-container {
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(
+        in srgb,
+        var(--app-on-surface) 8%,
+        transparent
+    );
+    flex-shrink: 0;
+}
+
+.trigger-playlist-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.playlist-info {
+    flex: 1;
+    min-width: 0;
+
+    .name {
+        font-size: 0.95em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.25;
+        letter-spacing: 0.01em;
+    }
+
+    .channels-count {
+        font-size: 0.74em;
+        line-height: 1.3;
+        letter-spacing: 0.02em;
+        color: var(--mat-sys-on-surface-variant);
+    }
+}
+
+.trigger-refresh-button {
+    margin-left: auto;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 0;
+    line-height: 32px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mat-sys-on-surface-variant);
+    transition:
+        color 0.15s ease,
+        background 0.15s ease;
+
+    &:hover:not(:disabled) {
+        color: var(--mat-sys-on-surface);
+        background: var(--mat-sys-surface-container);
+    }
+
+    ::ng-deep .mat-mdc-button-touch-target {
+        width: 32px;
+        height: 32px;
+    }
+
+    ::ng-deep .mat-mdc-button-persistent-ripple,
+    ::ng-deep .mat-mdc-focus-indicator {
+        border-radius: 50%;
+    }
+}
+
+.trigger-refresh-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &.is-spinning {
+        animation: switcher-refresh-spin 1s linear infinite;
+    }
+}
+
+@keyframes switcher-refresh-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.dropdown-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: var(--mat-sys-on-surface-variant);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-left: 4px;
+
+    &.rotated {
+        transform: rotate(180deg);
+    }
+}
+
+::ng-deep .playlist-switcher-menu.mat-mdc-menu-panel {
+    --mat-menu-container-color: var(--mat-sys-surface-container-high);
+    width: min(
+        var(--playlist-switcher-overlay-width, 400px),
+        calc(100vw - 24px)
+    ) !important;
+    min-width: min(
+        var(--playlist-switcher-overlay-width, 400px),
+        calc(100vw - 24px)
+    ) !important;
+    max-width: min(
+        var(--playlist-switcher-overlay-width, 400px),
+        calc(100vw - 24px)
+    ) !important;
+    margin-top: -1px !important;
+    border-radius: 0 0 12px 12px !important;
+    border: 1px solid var(--mat-sys-outline) !important;
+    border-top: 0 !important;
+    overflow: hidden !important;
+    background: var(--mat-menu-container-color) !important;
+
+    .mat-mdc-menu-content {
+        padding: 0 !important;
+        background: var(--mat-menu-container-color) !important;
+    }
+}
+
+.menu-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px 6px;
+    font-size: 0.85em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    background: var(--mat-menu-container-color);
+
+    .menu-header-title {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0.7;
+    }
+
+    .menu-header-icon {
+        opacity: 0.7;
+    }
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+
+    .search-toggle-btn {
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.8;
+        padding: 0;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+            color: var(--mat-sys-on-surface);
+        }
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    margin: 0 8px 4px;
+    background: color-mix(
+        in srgb,
+        var(--app-on-surface) 6%,
+        transparent
+    );
+    border-radius: 8px;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.search-container:focus-within {
+    border-color: var(--mat-sys-primary);
+    background: var(--mat-sys-surface-container-highest);
+}
+
+.search-container .search-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.search-container .search-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-size: 0.86em;
+    font-weight: 500;
+    line-height: 1.4;
+    color: inherit;
+    min-width: 0;
+}
+
+.search-container .search-input::placeholder {
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.search-container .clear-btn {
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0;
+}
+
+.search-container .clear-btn mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+}
+
+.type-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 0 8px 8px;
+    margin-top: 6px;
+}
+
+.type-filter-chip {
+    height: 24px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-high) 78%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.16s ease;
+
+    &:hover {
+        background: var(--mat-sys-surface-container);
+        color: var(--mat-sys-on-surface);
+    }
+
+    &.selected {
+        border-color: var(--app-selection-border, var(--app-selection-color));
+        background: var(
+            --app-selection-surface-strong,
+            var(--app-selection-surface)
+        );
+        color: var(--app-selection-color, var(--mat-sys-primary));
+        /* box-shadow:
+            inset 0 0 0 1px
+                color-mix(in srgb, var(--app-selection-color) 18%, transparent),
+            0 0 0 1px
+                color-mix(in srgb, var(--app-selection-color) 12%, transparent),
+            0 0 10px var(--app-selection-glow, transparent); */
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-border, var(--mat-sys-primary));
+        outline-offset: 1px;
+    }
+}
+
+.menu-content {
+    max-height: 360px;
+    overflow-y: auto;
+    padding: 4px 0;
+    background: color-mix(in srgb, #000 22%, transparent);
+    border-top: 1px solid
+        color-mix(in srgb, var(--app-on-surface) 14%, transparent);
+    border-bottom: 1px solid
+        color-mix(in srgb, var(--app-on-surface) 14%, transparent);
+}
+
+.playlist-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 12px;
+    min-height: 44px;
+    transition: background-color 0.15s ease;
+    position: relative;
+    cursor: pointer;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid
+            color-mix(in srgb, var(--app-on-surface) 8%, transparent);
+    }
+}
+
+.playlist-item.selected {
+    background: var(--app-selection-surface, rgba(139, 92, 246, 0.1));
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 6px;
+        bottom: 6px;
+        width: 3px;
+        border-radius: 0 3px 3px 0;
+        background: var(--app-selection-color, #a78bfa);
+    }
+
+    .playlist-title,
+    .playlist-meta {
+        color: var(--app-selection-color, #a78bfa);
+    }
+}
+
+.item-action-trigger {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    flex-shrink: 0;
+    color: var(--mat-sys-on-surface-variant);padding: 0;
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.playlist-item:hover .item-action-trigger,
+.playlist-item.selected .item-action-trigger,
+.item-action-trigger:focus-visible,
+.item-action-trigger[aria-expanded='true'] {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+::ng-deep .playlist-item-action-menu {
+    .danger,
+    .danger mat-icon {
+        color: var(--mat-sys-error, #f44336);
+    }
+}
+
+.playlist-item:hover:not(.selected) {
+    background: color-mix(
+        in srgb,
+        var(--app-on-surface) 10%,
+        transparent
+    );
+}
+
+.playlist-icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    background: color-mix(
+        in srgb,
+        var(--app-on-surface) 6%,
+        transparent
+    );
+    flex-shrink: 0;
+}
+
+.playlist-type-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.status-dot {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    right: -4px;
+    bottom: -4px;
+    border: 2px solid var(--mat-menu-container-color, #2a2a2e);
+}
+
+.status-active {
+    background-color: #4caf50;
+    box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
+}
+
+.status-inactive {
+    background-color: #f44336;
+    box-shadow: 0 0 6px rgba(244, 67, 54, 0.4);
+}
+
+.status-expired {
+    background-color: #ff9800;
+    box-shadow: 0 0 6px rgba(255, 152, 0, 0.4);
+}
+
+.status-unavailable {
+    background-color: #666666;
+}
+
+.auto-refresh-indicator {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    font-size: 12px !important;
+    width: 14px !important;
+    height: 14px !important;
+    color: var(--mat-sys-primary);
+    background-color: var(--mat-menu-container-color, var(--mat-sys-surface));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.playlist-details {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.playlist-title {
+    font-size: 0.92em;
+    font-weight: 600;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.playlist-meta {
+    font-size: 0.73em;
+    line-height: 1.25;
+    letter-spacing: 0.01em;
+    color: var(--mat-sys-on-surface-variant);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .separator {
+        color: var(--mat-sys-on-surface-variant);
+    }
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 16px;
+    gap: 12px;
+    color: var(--mat-sys-on-surface-variant);
+
+    mat-icon {
+        font-size: 36px;
+        width: 36px;
+        height: 36px;
+    }
+
+    span {
+        font-size: 0.85em;
+    }
+}
+
+.context-actions-section {
+    padding: 6px 8px 8px;
+    background: var(--mat-menu-container-color);
+
+    .context-action-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+        padding: 8px 10px;
+        border: none;
+        border-radius: 8px;
+        background: transparent;
+        color: var(--mat-sys-on-surface-variant);
+        font: inherit;
+        font-size: 0.86em;
+        font-weight: 500;
+        cursor: pointer;
+        transition:
+            background 0.15s ease,
+            color 0.15s ease;
+
+        &:hover {
+            background: var(--mat-sys-surface-container);
+            color: var(--mat-sys-on-surface);
+        }
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .playlist-info .name {
+        font-size: 0.9em;
+    }
+
+    .playlist-icon-container {
+        display: none;
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.spec.ts b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.spec.ts
new file mode 100644
index 0000000..d04260c
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.spec.ts
@@ -0,0 +1,344 @@
+import { signal } from '@angular/core';
+import {
+    ComponentFixture,
+    TestBed,
+    fakeAsync,
+    flushMicrotasks,
+    tick,
+} from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+    PlaylistContextFacade,
+    PlaylistRefreshActionService,
+} from '@iptvnator/playlist/shared/util';
+import { DialogService } from 'components';
+import { DatabaseService, PortalStatusService } from 'services';
+import { PlaylistMeta } from 'shared-interfaces';
+import { PlaylistSwitcherComponent } from './playlist-switcher.component';
+
+const SEARCH_QUERY_STORAGE_KEY = 'playlist-switcher:search-query';
+const PLAYLIST_TYPE_FILTER_STORAGE_KEY = 'playlist-switcher:type-filters';
+
+function createPlaylist(
+    overrides: Partial<PlaylistMeta> & { _id: string }
+): PlaylistMeta {
+    return {
+        _id: overrides._id,
+        title: overrides.title ?? overrides.filename ?? overrides._id,
+        filename: overrides.filename,
+        count: overrides.count ?? 0,
+        importDate:
+            overrides.importDate ?? new Date('2026-04-05T10:00:00.000Z').toISOString(),
+        autoRefresh: overrides.autoRefresh ?? false,
+        ...overrides,
+    } as PlaylistMeta;
+}
+
+describe('PlaylistSwitcherComponent', () => {
+    let fixture: ComponentFixture<PlaylistSwitcherComponent>;
+    let component: PlaylistSwitcherComponent;
+    let playlistsSignal: ReturnType<typeof signal<PlaylistMeta[]>>;
+    let resolvedPlaylistIdSignal: ReturnType<typeof signal<string | null>>;
+    let activePlaylistSignal: ReturnType<typeof signal<PlaylistMeta | null>>;
+    let playlistContext: {
+        playlists: typeof playlistsSignal;
+        allPlaylistsLoaded: ReturnType<typeof signal<boolean>>;
+        resolvedPlaylistId: typeof resolvedPlaylistIdSignal;
+        activePlaylist: typeof activePlaylistSignal;
+        selectPlaylist: jest.Mock;
+    };
+    let portalStatusService: {
+        checkPortalStatus: jest.Mock;
+        getStatusClass: jest.Mock;
+    };
+    let refreshActionService: {
+        canRefresh: jest.Mock;
+        refresh: jest.Mock;
+    };
+    let dialog: {
+        open: jest.Mock;
+    };
+    let dialogService: {
+        openConfirmDialog: jest.Mock;
+    };
+    let databaseService: {
+        createOperationId: jest.Mock;
+        deletePlaylist: jest.Mock;
+    };
+    let snackBar: {
+        open: jest.Mock;
+    };
+    let store: {
+        dispatch: jest.Mock;
+    };
+
+    const m3uPlaylist = createPlaylist({
+        _id: 'm3u-1',
+        count: 24,
+        importDate: '2026-04-05T09:00:00.000Z',
+        title: 'Morning M3U',
+        url: 'http://example.test/m3u.m3u',
+    });
+    const stalkerPlaylist = createPlaylist({
+        _id: 'stalker-1',
+        importDate: '2026-04-05T11:00:00.000Z',
+        macAddress: '00:1A:79:00:00:01',
+        portalUrl: 'http://127.0.0.1:3210/portal.php',
+        title: 'Living Room Stalker',
+    });
+    const xtreamPlaylist = createPlaylist({
+        _id: 'xtream-1',
+        importDate: '2026-04-05T12:00:00.000Z',
+        password: 'pass1',
+        serverUrl: 'http://127.0.0.1:3211',
+        title: 'Cinema Xtream',
+        updateDate: new Date('2026-04-05T12:30:00.000Z').getTime(),
+        username: 'user1',
+    });
+
+    async function createComponent(): Promise<void> {
+        await TestBed.configureTestingModule({
+            imports: [
+                PlaylistSwitcherComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: playlistContext,
+                },
+                {
+                    provide: PortalStatusService,
+                    useValue: portalStatusService,
+                },
+                {
+                    provide: PlaylistRefreshActionService,
+                    useValue: refreshActionService,
+                },
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+                {
+                    provide: DialogService,
+                    useValue: dialogService,
+                },
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: snackBar,
+                },
+                {
+                    provide: Store,
+                    useValue: store,
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(PlaylistSwitcherComponent);
+        component = fixture.componentInstance;
+        fixture.componentRef.setInput('currentTitle', '');
+        fixture.componentRef.setInput('subtitle', '3 playlists');
+        fixture.detectChanges();
+    }
+
+    beforeEach(() => {
+        localStorage.clear();
+
+        playlistsSignal = signal([m3uPlaylist, stalkerPlaylist, xtreamPlaylist]);
+        resolvedPlaylistIdSignal = signal<string | null>(xtreamPlaylist._id);
+        activePlaylistSignal = signal<PlaylistMeta | null>(xtreamPlaylist);
+
+        playlistContext = {
+            playlists: playlistsSignal,
+            allPlaylistsLoaded: signal(true),
+            resolvedPlaylistId: resolvedPlaylistIdSignal,
+            activePlaylist: activePlaylistSignal,
+            selectPlaylist: jest.fn((playlist: PlaylistMeta) => {
+                resolvedPlaylistIdSignal.set(playlist._id);
+                activePlaylistSignal.set(playlist);
+            }),
+        };
+        portalStatusService = {
+            checkPortalStatus: jest
+                .fn()
+                .mockResolvedValueOnce('active')
+                .mockResolvedValueOnce('inactive'),
+            getStatusClass: jest.fn((status: string) => `status-${status}`),
+        };
+        refreshActionService = {
+            canRefresh: jest.fn(
+                (playlist: PlaylistMeta) =>
+                    Boolean(
+                        playlist.serverUrl || playlist.url || playlist.filePath
+                    )
+            ),
+            refresh: jest.fn(),
+        };
+        dialog = {
+            open: jest.fn(),
+        };
+        dialogService = {
+            openConfirmDialog: jest.fn(),
+        };
+        databaseService = {
+            createOperationId: jest.fn(),
+            deletePlaylist: jest.fn(),
+        };
+        snackBar = {
+            open: jest.fn(),
+        };
+        store = {
+            dispatch: jest.fn(),
+        };
+    });
+
+    afterEach(() => {
+        localStorage.clear();
+        jest.restoreAllMocks();
+    });
+
+    it('reads persisted search and type filters on startup and filters playlists accordingly', async () => {
+        localStorage.setItem(SEARCH_QUERY_STORAGE_KEY, 'room');
+        localStorage.setItem(
+            PLAYLIST_TYPE_FILTER_STORAGE_KEY,
+            JSON.stringify({
+                m3u: false,
+                stalker: true,
+                xtream: true,
+            })
+        );
+
+        await createComponent();
+
+        expect(component.searchQuery()).toBe('room');
+        expect(component.isTypeFilterSelected('m3u')).toBe(false);
+        expect(component.filteredPlaylists()).toEqual([stalkerPlaylist]);
+    });
+
+    it('sorts playlists by import date descending and prevents clearing the last enabled type filter', async () => {
+        await createComponent();
+
+        expect(component.filteredPlaylists().map((playlist) => playlist._id)).toEqual([
+            xtreamPlaylist._id,
+            stalkerPlaylist._id,
+            m3uPlaylist._id,
+        ]);
+
+        component.togglePlaylistTypeFilter('m3u');
+        component.togglePlaylistTypeFilter('stalker');
+        expect(component.playlistTypeFilters()).toEqual({
+            m3u: false,
+            stalker: false,
+            xtream: true,
+        });
+
+        component.togglePlaylistTypeFilter('xtream');
+        expect(component.playlistTypeFilters()).toEqual({
+            m3u: false,
+            stalker: false,
+            xtream: true,
+        });
+    });
+
+    it('selects a playlist, closes the menu, and emits the selected id', async () => {
+        await createComponent();
+
+        const closeMenuSpy = jest.spyOn(component.menuTrigger(), 'closeMenu');
+        const selectedIds: string[] = [];
+        component.playlistSelected.subscribe((playlistId) => {
+            selectedIds.push(playlistId);
+        });
+
+        component.selectPlaylist(stalkerPlaylist);
+        fixture.detectChanges();
+
+        expect(closeMenuSpy).toHaveBeenCalledTimes(1);
+        expect(playlistContext.selectPlaylist).toHaveBeenCalledWith(
+            stalkerPlaylist
+        );
+        expect(selectedIds).toEqual([stalkerPlaylist._id]);
+        expect(component.isSelected(stalkerPlaylist)).toBe(true);
+    });
+
+    it('emits playlist and account info requests through the context actions', async () => {
+        await createComponent();
+
+        const closeMenuSpy = jest.spyOn(component.menuTrigger(), 'closeMenu');
+        const playlistInfoSpy = jest.fn();
+        const accountInfoSpy = jest.fn();
+        component.playlistInfoRequested.subscribe(playlistInfoSpy);
+        component.accountInfoRequested.subscribe(accountInfoSpy);
+
+        component.requestPlaylistInfo();
+        component.requestAccountInfo();
+
+        expect(closeMenuSpy).toHaveBeenCalledTimes(2);
+        expect(playlistInfoSpy).toHaveBeenCalledTimes(1);
+        expect(accountInfoSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('opens the menu, syncs overlay width, and checks portal statuses for Xtream playlists', fakeAsync(async () => {
+        await createComponent();
+
+        const triggerElement = component.triggerElement().nativeElement;
+        jest.spyOn(triggerElement, 'getBoundingClientRect').mockReturnValue({
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 320,
+            toJSON: () => ({}),
+            top: 0,
+            width: 320,
+            x: 0,
+            y: 0,
+        });
+
+        component.onMenuOpened();
+        flushMicrotasks();
+        tick();
+
+        expect(component.isMenuOpen()).toBe(true);
+        expect(
+            document.documentElement.style.getPropertyValue(
+                '--playlist-switcher-overlay-width'
+            )
+        ).toBe('400px');
+        expect(portalStatusService.checkPortalStatus).toHaveBeenCalledTimes(1);
+        expect(portalStatusService.checkPortalStatus).toHaveBeenCalledWith(
+            xtreamPlaylist.serverUrl,
+            xtreamPlaylist.username,
+            xtreamPlaylist.password
+        );
+        expect(component.portalStatuses().get(xtreamPlaylist._id)).toBe('active');
+        expect(component.getStatusClass(xtreamPlaylist._id)).toBe('status-active');
+
+        component.onMenuClosed();
+        expect(component.isMenuOpen()).toBe(false);
+        expect(
+            document.documentElement.style.getPropertyValue(
+                '--playlist-switcher-overlay-width'
+            )
+        ).toBe('');
+    }));
+
+    it('falls back to the active playlist title when no explicit current title is provided', async () => {
+        await createComponent();
+
+        expect(component.displayTitle()).toBe('Cinema Xtream');
+
+        resolvedPlaylistIdSignal.set(null);
+        activePlaylistSignal.set(null);
+        fixture.detectChanges();
+
+        expect(component.displayTitle()).toBe('Select playlist');
+    });
+});
diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts
new file mode 100644
index 0000000..ab6a189
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts
@@ -0,0 +1,509 @@
+import { DatePipe, DOCUMENT } from '@angular/common';
+import {
+    Component,
+    computed,
+    DestroyRef,
+    ElementRef,
+    inject,
+    input,
+    output,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { MatIconButton } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenu, MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Store } from '@ngrx/store';
+import { normalizeDateLocale } from '@iptvnator/pipes';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { DialogService } from 'components';
+import { PlaylistActions } from 'm3u-state';
+import {
+    PlaylistContextFacade,
+    PlaylistRefreshActionService,
+} from '@iptvnator/playlist/shared/util';
+import {
+    DatabaseService,
+    PortalStatus,
+    PortalStatusService,
+} from 'services';
+import { PlaylistMeta } from 'shared-interfaces';
+import { startWith } from 'rxjs';
+import { PlaylistInfoComponent } from '../recent-playlists/playlist-info/playlist-info.component';
+
+type PlaylistFilterType = 'm3u' | 'stalker' | 'xtream';
+
+const SEARCH_QUERY_STORAGE_KEY = 'playlist-switcher:search-query';
+const PLAYLIST_TYPE_FILTER_STORAGE_KEY = 'playlist-switcher:type-filters';
+const DEFAULT_PLAYLIST_TYPE_FILTERS: Record<PlaylistFilterType, boolean> = {
+    m3u: true,
+    stalker: true,
+    xtream: true,
+};
+
+@Component({
+    selector: 'app-playlist-switcher',
+    templateUrl: './playlist-switcher.component.html',
+    styleUrls: ['./playlist-switcher.component.scss'],
+    imports: [
+        DatePipe,
+        FormsModule,
+        MatDivider,
+        MatIcon,
+        MatIconButton,
+        MatInputModule,
+        MatMenuModule,
+        MatRippleModule,
+        MatTooltip,
+        TranslatePipe,
+    ],
+})
+export class PlaylistSwitcherComponent {
+    private readonly document = inject(DOCUMENT);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly portalStatusService = inject(PortalStatusService);
+    private readonly translate = inject(TranslateService);
+    private readonly refreshAction = inject(PlaylistRefreshActionService);
+    private readonly dialog = inject(MatDialog);
+    private readonly dialogService = inject(DialogService);
+    private readonly databaseService = inject(DatabaseService);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly store = inject(Store);
+    private focusSearchTimeoutId: ReturnType<typeof setTimeout> | null = null;
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    readonly currentTitle = input.required<string>();
+    readonly subtitle = input<string>('');
+    readonly showPlaylistInfo = input(false);
+    readonly showAccountInfo = input(false);
+    readonly showAddPlaylist = input(false);
+    readonly canRefreshActivePlaylist = input(false);
+    readonly isRefreshingActivePlaylist = input(false);
+    readonly playlistSelected = output<string>();
+    readonly playlistInfoRequested = output<void>();
+    readonly accountInfoRequested = output<void>();
+    readonly addPlaylistRequested = output<void>();
+    readonly refreshPlaylistRequested = output<void>();
+
+    onRefreshClick(event: Event): void {
+        event.stopPropagation();
+        event.preventDefault();
+        this.refreshPlaylistRequested.emit();
+    }
+
+    readonly menuTrigger = viewChild.required<MatMenuTrigger>('menuTrigger');
+    readonly playlistMenu = viewChild.required<MatMenu>('playlistMenu');
+    readonly triggerElement =
+        viewChild.required<ElementRef<HTMLElement>>('triggerElement');
+    readonly searchInput =
+        viewChild<ElementRef<HTMLInputElement>>('searchInput');
+
+    readonly isMenuOpen = signal(false);
+    readonly searchQuery = signal(this.readPersistedSearchQuery());
+    readonly playlistTypeFilters = signal(this.readPersistedTypeFilters());
+    readonly searchExpanded = signal(false);
+    private static readonly SEARCH_AUTO_VISIBLE_THRESHOLD = 5;
+
+    readonly playlists = this.playlistContext.playlists;
+    readonly allPlaylistsLoaded = this.playlistContext.allPlaylistsLoaded;
+    readonly activePlaylistId = this.playlistContext.resolvedPlaylistId;
+    readonly activePlaylist = this.playlistContext.activePlaylist;
+    readonly filteredPlaylists = computed(() => {
+        const query = this.searchQuery().toLowerCase().trim();
+        const filters = this.playlistTypeFilters();
+        const allPlaylists = this.playlists();
+        const filteredByType = allPlaylists.filter((playlist) => {
+            const playlistType = this.getPlaylistFilterType(playlist);
+            return filters[playlistType];
+        });
+        const filtered = query
+            ? filteredByType.filter(
+                  (playlist) =>
+                      playlist.title?.toLowerCase().includes(query) ||
+                      playlist.filename?.toLowerCase().includes(query)
+              )
+            : filteredByType;
+
+        return [...filtered].sort(
+            (a, b) =>
+                new Date(b.importDate ?? 0).getTime() -
+                new Date(a.importDate ?? 0).getTime()
+        );
+    });
+    readonly displayTitle = computed(() => {
+        if (!this.activePlaylistId()) {
+            return 'Select playlist';
+        }
+
+        return (
+            this.currentTitle() ||
+            this.activePlaylist()?.title ||
+            this.activePlaylist()?.filename ||
+            this.activePlaylist()?.url ||
+            this.activePlaylist()?.portalUrl ||
+            'Untitled playlist'
+        );
+    });
+
+    readonly availablePlaylistTypes = computed(() => {
+        const types = new Set<PlaylistFilterType>();
+        for (const playlist of this.playlists()) {
+            types.add(this.getPlaylistFilterType(playlist));
+        }
+        return types;
+    });
+    readonly showTypeFilters = computed(
+        () => this.availablePlaylistTypes().size > 1
+    );
+    readonly hasSearchToggle = computed(
+        () =>
+            this.playlists().length <=
+            PlaylistSwitcherComponent.SEARCH_AUTO_VISIBLE_THRESHOLD
+    );
+    readonly showSearchField = computed(
+        () => !this.hasSearchToggle() || this.searchExpanded()
+    );
+
+    readonly portalStatuses = signal<Map<string, PortalStatus>>(new Map());
+    readonly currentLocale = computed(() => {
+        this.languageTick();
+        return normalizeDateLocale(
+            this.translate.currentLang || this.translate.defaultLang
+        );
+    });
+
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.clearMenuOverlayWidth();
+            this.clearSearchFocusTimeout();
+        });
+    }
+
+    onMenuOpened(): void {
+        this.isMenuOpen.set(true);
+        this.syncMenuOverlayWidthToTrigger();
+        if (this.showSearchField()) {
+            this.focusSearchField();
+        }
+        void this.checkPortalStatuses(this.playlists());
+    }
+
+    onMenuClosed(): void {
+        this.isMenuOpen.set(false);
+        this.clearMenuOverlayWidth();
+        this.clearSearchFocusTimeout();
+        if (this.hasSearchToggle()) {
+            this.searchExpanded.set(false);
+        }
+    }
+
+    toggleSearchField(event?: Event): void {
+        event?.stopPropagation();
+        const next = !this.searchExpanded();
+        this.searchExpanded.set(next);
+        if (next) {
+            this.focusSearchField();
+        }
+    }
+
+    setSearchQuery(value: string): void {
+        this.searchQuery.set(value);
+        this.writePersistedSearchQuery(value);
+    }
+
+    togglePlaylistTypeFilter(type: PlaylistFilterType, event?: Event): void {
+        event?.stopPropagation();
+        const current = this.playlistTypeFilters();
+        const next = {
+            ...current,
+            [type]: !current[type],
+        };
+
+        if (!next.m3u && !next.stalker && !next.xtream) {
+            return;
+        }
+
+        this.playlistTypeFilters.set(next);
+        this.writePersistedTypeFilters(next);
+    }
+
+    isTypeFilterSelected(type: PlaylistFilterType): boolean {
+        return this.playlistTypeFilters()[type];
+    }
+
+    selectPlaylist(playlist: PlaylistMeta): void {
+        this.menuTrigger().closeMenu();
+        this.playlistContext.selectPlaylist(playlist);
+        this.playlistSelected.emit(playlist._id);
+    }
+
+    requestPlaylistInfo(): void {
+        this.menuTrigger().closeMenu();
+        this.playlistInfoRequested.emit();
+    }
+
+    requestAccountInfo(): void {
+        this.menuTrigger().closeMenu();
+        this.accountInfoRequested.emit();
+    }
+
+    requestAddPlaylist(): void {
+        this.menuTrigger().closeMenu();
+        this.addPlaylistRequested.emit();
+    }
+
+    hasType(type: PlaylistFilterType): boolean {
+        return this.availablePlaylistTypes().has(type);
+    }
+
+    canRefreshPlaylist(playlist: PlaylistMeta): boolean {
+        return this.refreshAction.canRefresh(playlist);
+    }
+
+    openPlaylistInfoFor(playlist: PlaylistMeta, event?: Event): void {
+        event?.stopPropagation();
+        this.menuTrigger().closeMenu();
+        this.dialog.open(PlaylistInfoComponent, { data: playlist });
+    }
+
+    refreshPlaylistFor(playlist: PlaylistMeta, event?: Event): void {
+        event?.stopPropagation();
+        this.menuTrigger().closeMenu();
+        this.refreshAction.refresh(playlist);
+    }
+
+    removePlaylistFor(playlist: PlaylistMeta, event?: Event): void {
+        event?.stopPropagation();
+        this.menuTrigger().closeMenu();
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.TITLE'),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
+            ),
+            onConfirm: () => this.removePlaylistConfirmed(playlist),
+        });
+    }
+
+    private async removePlaylistConfirmed(
+        playlist: PlaylistMeta
+    ): Promise<void> {
+        const operationId = playlist.serverUrl
+            ? this.databaseService.createOperationId('playlist-delete')
+            : undefined;
+
+        const deleted = await this.databaseService.deletePlaylist(
+            playlist._id,
+            operationId ? { operationId } : undefined
+        );
+
+        if (!deleted) {
+            return;
+        }
+
+        this.store.dispatch(
+            PlaylistActions.removePlaylist({ playlistId: playlist._id })
+        );
+        this.snackBar.open(
+            this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS'),
+            undefined,
+            { duration: 2000 }
+        );
+    }
+
+    getPlaylistIcon(playlist: PlaylistMeta): string {
+        if (playlist.macAddress) {
+            return 'dashboard';
+        }
+        if (playlist.serverUrl) {
+            return 'public';
+        }
+        if (playlist.url) {
+            return 'cloud';
+        }
+        return 'folder';
+    }
+
+    getPlaylistTypeLabel(playlist: PlaylistMeta): string {
+        if (playlist.macAddress) {
+            return 'Stalker Portal';
+        }
+        if (playlist.serverUrl) {
+            return 'Xtream Code';
+        }
+        return `${playlist.count} channels`;
+    }
+
+    getPlaylistMetaLabel(playlist: PlaylistMeta): string {
+        const count = playlist.count ?? 0;
+        const channelsLabel = this.translate.instant(
+            'HOME.PLAYLISTS.CHANNELS_COUNT',
+            { count }
+        );
+        const fallback = `${count} channels`;
+        const countLabel =
+            channelsLabel && channelsLabel !== 'HOME.PLAYLISTS.CHANNELS_COUNT'
+                ? channelsLabel
+                : fallback;
+
+        if (playlist.macAddress) {
+            return 'Stalker Portal';
+        }
+        if (playlist.serverUrl) {
+            return 'Xtream Code';
+        }
+        return countLabel;
+    }
+
+    getStatusClass(playlistId: string): string {
+        const status = this.portalStatuses().get(playlistId);
+        return this.portalStatusService.getStatusClass(status || 'unavailable');
+    }
+
+    isSelected(playlist: PlaylistMeta): boolean {
+        return this.activePlaylistId() === playlist._id;
+    }
+
+    private getPlaylistFilterType(playlist: PlaylistMeta): PlaylistFilterType {
+        if (playlist.macAddress) {
+            return 'stalker';
+        }
+        if (playlist.serverUrl) {
+            return 'xtream';
+        }
+        return 'm3u';
+    }
+
+    private async checkPortalStatuses(playlists: PlaylistMeta[]) {
+        const statusPromises = playlists
+            .filter(
+                (playlist) =>
+                    playlist.serverUrl && playlist.username && playlist.password
+            )
+            .map(async (playlist) => {
+                try {
+                    const status =
+                        await this.portalStatusService.checkPortalStatus(
+                            playlist.serverUrl,
+                            playlist.username,
+                            playlist.password
+                        );
+                    return { id: playlist._id, status };
+                } catch {
+                    return {
+                        id: playlist._id,
+                        status: 'unavailable' as PortalStatus,
+                    };
+                }
+            });
+
+        const results = await Promise.all(statusPromises);
+        const statusMap = new Map(
+            results.map((result) => [result.id, result.status])
+        );
+        this.portalStatuses.set(statusMap);
+    }
+
+    private syncMenuOverlayWidthToTrigger(): void {
+        const triggerWidth = Math.round(
+            this.triggerElement().nativeElement.getBoundingClientRect().width
+        );
+        const overlayWidth = Math.max(triggerWidth, 400);
+        this.document.documentElement.style.setProperty(
+            '--playlist-switcher-overlay-width',
+            `${overlayWidth}px`
+        );
+    }
+
+    private clearMenuOverlayWidth(): void {
+        this.document.documentElement.style.removeProperty(
+            '--playlist-switcher-overlay-width'
+        );
+    }
+
+    private focusSearchField(): void {
+        this.clearSearchFocusTimeout();
+        this.focusSearchTimeoutId = setTimeout(() => {
+            const input = this.searchInput()?.nativeElement;
+            if (!input) {
+                return;
+            }
+            input.focus();
+            input.select();
+            this.focusSearchTimeoutId = null;
+        }, 0);
+    }
+
+    private clearSearchFocusTimeout(): void {
+        if (this.focusSearchTimeoutId !== null) {
+            clearTimeout(this.focusSearchTimeoutId);
+            this.focusSearchTimeoutId = null;
+        }
+    }
+
+    private readPersistedSearchQuery(): string {
+        try {
+            return localStorage.getItem(SEARCH_QUERY_STORAGE_KEY) ?? '';
+        } catch {
+            return '';
+        }
+    }
+
+    private writePersistedSearchQuery(value: string): void {
+        try {
+            localStorage.setItem(SEARCH_QUERY_STORAGE_KEY, value);
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+
+    private readPersistedTypeFilters(): Record<PlaylistFilterType, boolean> {
+        try {
+            const raw = localStorage.getItem(PLAYLIST_TYPE_FILTER_STORAGE_KEY);
+            if (!raw) {
+                return { ...DEFAULT_PLAYLIST_TYPE_FILTERS };
+            }
+
+            const parsed = JSON.parse(raw) as Partial<
+                Record<PlaylistFilterType, boolean>
+            >;
+            const next = {
+                m3u: parsed.m3u !== false,
+                stalker: parsed.stalker !== false,
+                xtream: parsed.xtream !== false,
+            };
+
+            if (!next.m3u && !next.stalker && !next.xtream) {
+                return { ...DEFAULT_PLAYLIST_TYPE_FILTERS };
+            }
+
+            return next;
+        } catch {
+            return { ...DEFAULT_PLAYLIST_TYPE_FILTERS };
+        }
+    }
+
+    private writePersistedTypeFilters(
+        filters: Record<PlaylistFilterType, boolean>
+    ): void {
+        try {
+            localStorage.setItem(
+                PLAYLIST_TYPE_FILTER_STORAGE_KEY,
+                JSON.stringify(filters)
+            );
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.html b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.html
new file mode 100644
index 0000000..12651f1
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.html
@@ -0,0 +1,179 @@
+@switch (type()) {
+    @case ('welcome-dashboard') {
+        <div class="empty-state welcome-dashboard">
+            <div class="welcome-dashboard__hero">
+                <div class="welcome-dashboard__illustration-container">
+                    <svg class="welcome-dashboard__illustration" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                        <rect x="40" y="40" width="432" height="432" rx="80" class="icon-background"/>
+                        <rect x="134" y="387" width="244" height="18" rx="4" class="monitor-base"/>
+                        <rect x="238" y="347" width="36" height="40" rx="4" class="monitor-stand"/>
+                        <rect x="88" y="102" width="336" height="245" rx="12" stroke="currentColor" stroke-width="12" fill="none" class="screen-border"/>
+                        <circle cx="256" cy="280" r="16" class="wifi-dot"/>
+                        <path d="M 220 250 Q 256 220, 292 250" stroke="currentColor" stroke-width="14" fill="none" stroke-linecap="round" class="wifi-arc arc-1"/>
+                        <path d="M 200 230 Q 256 185, 312 230" stroke="currentColor" stroke-width="14" fill="none" stroke-linecap="round" class="wifi-arc arc-2"/>
+                        <path d="M 180 210 Q 256 150, 332 210" stroke="currentColor" stroke-width="14" fill="none" stroke-linecap="round" class="wifi-arc arc-3"/>
+                    </svg>
+                </div>
+
+                @if (productBranding?.xtreamOnlyUi) {
+                    <h2 class="welcome-dashboard__title">
+                        {{ 'HOME.KIRATV.WELCOME_TITLE' | translate }}
+                    </h2>
+                    <p class="welcome-dashboard__tagline">
+                        {{ 'HOME.KIRATV.WELCOME_TAGLINE' | translate }}
+                    </p>
+                    <p class="welcome-dashboard__description">
+                        {{ 'HOME.KIRATV.WELCOME_DESCRIPTION' | translate }}
+                    </p>
+                } @else {
+                    <h2 class="welcome-dashboard__title">
+                        {{ 'HOME.PLAYLISTS.WELCOME_TITLE' | translate }}
+                    </h2>
+                    <p class="welcome-dashboard__tagline">
+                        {{ 'HOME.PLAYLISTS.DASHBOARD_WELCOME_TAGLINE' | translate }}
+                    </p>
+                    <p class="welcome-dashboard__description">
+                        {{ 'HOME.PLAYLISTS.DASHBOARD_WELCOME_DESCRIPTION' | translate }}
+                    </p>
+                }
+
+                <button
+                    mat-raised-button
+                    type="button"
+                    class="welcome-dashboard__cta"
+                    (click)="onAddPlaylist()"
+                >
+                    <mat-icon>add_circle</mat-icon>
+                    @if (productBranding?.xtreamOnlyUi) {
+                        {{ 'HOME.KIRATV.ADD_FIRST_CTA' | translate }}
+                    } @else {
+                        {{ 'HOME.PLAYLISTS.ADD_YOUR_FIRST' | translate }}
+                    }
+                </button>
+            </div>
+
+            <ul class="welcome-dashboard__cards" role="list">
+                @for (card of featureCards; track card.titleKey) {
+                    @if (isFeatureCardVisible(card)) {
+                        <li class="feature-card">
+                            <div class="feature-card__icon-wrap">
+                                <mat-icon class="feature-card__icon">{{ card.icon }}</mat-icon>
+                            </div>
+                            <h3 class="feature-card__title">{{ card.titleKey | translate }}</h3>
+                            <p class="feature-card__desc">{{ card.descKey | translate }}</p>
+                        </li>
+                    }
+                }
+            </ul>
+        </div>
+    }
+    @case ('welcome-sources') {
+        <div class="empty-state welcome-sources">
+            <header class="welcome-sources__header">
+                <div class="welcome-sources__icon-wrap">
+                    <mat-icon class="welcome-sources__icon">playlist_add</mat-icon>
+                </div>
+                @if (productBranding?.xtreamOnlyUi) {
+                    <h2 class="welcome-sources__title">
+                        {{ 'HOME.KIRATV.WELCOME_TITLE' | translate }}
+                    </h2>
+                    <p class="welcome-sources__body">
+                        {{ 'HOME.KIRATV.WELCOME_DESCRIPTION' | translate }}
+                    </p>
+                } @else {
+                    <h2 class="welcome-sources__title">
+                        {{ 'HOME.PLAYLISTS.SOURCES_WELCOME_TITLE' | translate }}
+                    </h2>
+                    <p class="welcome-sources__body">
+                        {{ 'HOME.PLAYLISTS.SOURCES_WELCOME_BODY' | translate }}
+                    </p>
+                }
+            </header>
+
+            <div class="welcome-sources__grid">
+                @for (card of visibleSourceCards(); track card.type) {
+                    <article class="source-card">
+                        <div class="source-card__head">
+                            <mat-icon class="source-card__icon">{{ card.icon }}</mat-icon>
+                            <h3 class="source-card__name">{{ card.nameKey | translate }}</h3>
+                        </div>
+                        <p class="source-card__needs">{{ card.needsKey | translate }}</p>
+                        <ul class="source-card__chips" role="list">
+                            @for (chip of card.contentKeys; track chip) {
+                                <li class="source-card__chip">{{ chip | translate }}</li>
+                            }
+                        </ul>
+                        <button
+                            mat-raised-button
+                            type="button"
+                            class="source-card__cta"
+                            (click)="onAddPlaylist(card.type)"
+                        >
+                            <mat-icon>add</mat-icon>
+                            {{ card.addLabelKey | translate }}
+                        </button>
+                    </article>
+                }
+            </div>
+        </div>
+    }
+    @case ('no-results') {
+        <div class="empty-state no-results-state">
+            <div class="illustration-container small">
+                <svg class="illustration" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="65" cy="65" r="35" class="search-circle" stroke-width="4"/>
+                    <line x1="90" y1="90" x2="115" y2="115" class="search-handle" stroke-width="4" stroke-linecap="round"/>
+                    <rect x="45" y="50" width="40" height="30" rx="3" class="empty-box" stroke-width="2" opacity="0.4"/>
+                    <line x1="55" y1="65" x2="75" y2="65" class="empty-line" stroke-width="2" opacity="0.3"/>
+                </svg>
+            </div>
+
+            <div class="content">
+                <h3 class="title small">{{ 'HOME.PLAYLISTS.NO_RESULTS_TITLE' | translate }}</h3>
+                <p class="description">{{ 'HOME.PLAYLISTS.NO_RESULTS_DESCRIPTION' | translate }}</p>
+            </div>
+        </div>
+    }
+    @case ('no-data') {
+        <div class="empty-state no-data-state">
+            <div class="empty-icon-container">
+                <mat-icon class="empty-icon">{{ icon() }}</mat-icon>
+            </div>
+
+            <div class="content">
+                @if (titleKey()) {
+                    <h3 class="title small">{{ titleKey() | translate }}</h3>
+                }
+                @if (descriptionKey()) {
+                    <p class="description">{{ descriptionKey() | translate }}</p>
+                }
+
+                @if (primaryActionLabelKey() || secondaryActionLabelKey()) {
+                    <div class="actions">
+                        @if (primaryActionLabelKey(); as primaryLabel) {
+                            <button
+                                mat-raised-button
+                                type="button"
+                                class="primary-button"
+                                (click)="onPrimaryAction()"
+                            >
+                                <mat-icon>add_circle</mat-icon>
+                                {{ primaryLabel | translate }}
+                            </button>
+                        }
+                        @if (secondaryActionLabelKey(); as secondaryLabel) {
+                            <button
+                                mat-button
+                                type="button"
+                                class="secondary-button"
+                                (click)="onSecondaryAction()"
+                            >
+                                {{ secondaryLabel | translate }}
+                            </button>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
new file mode 100644
index 0000000..9b6b348
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
@@ -0,0 +1,176 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    animation: fadeIn 0.6s ease-out;
+
+    .content {
+        max-width: 480px;
+        animation: slideUp 0.8s ease-out;
+    }
+
+    .title {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-weight: 500;
+        margin: 0 0 12px 0;
+        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+
+        &.small {
+            font-size: 1.5rem;
+        }
+    }
+
+    .description {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 0.95rem;
+        line-height: 1.6;
+        margin: 0 0 32px 0;
+        opacity: 0.7;
+    }
+}
+
+.no-results-state {
+    padding: 40px 24px;
+
+    .illustration-container {
+        margin-bottom: 24px;
+        opacity: 0.5;
+
+        &.small {
+            animation: gentleFloat 1s ease-out;
+        }
+    }
+
+    .illustration {
+        width: 120px;
+        height: 120px;
+
+        .search-circle,
+        .search-handle {
+            stroke: currentColor;
+            opacity: 0.4;
+        }
+
+        .empty-box,
+        .empty-line {
+            stroke: currentColor;
+        }
+    }
+
+    .description {
+        margin-bottom: 0;
+        font-size: 0.875rem;
+    }
+}
+
+.no-data-state {
+    padding: 56px 24px;
+
+    .empty-icon-container {
+        margin-bottom: 20px;
+        animation: gentleFloat 0.6s ease-out;
+    }
+
+    .empty-icon {
+        font-size: 72px;
+        width: 72px;
+        height: 72px;
+        color: #60a5fa;
+        opacity: 0.85;
+    }
+
+    .content {
+        max-width: 460px;
+    }
+
+    .title {
+        font-size: 1.5rem;
+        margin-bottom: 8px;
+    }
+
+    .description {
+        margin-bottom: 24px;
+    }
+
+    .actions {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        .primary-button {
+            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            color: white;
+            font-weight: 500;
+            padding: 10px 24px;
+            border-radius: 10px;
+            text-transform: none;
+            letter-spacing: 0.01em;
+            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
+            transition: all 0.25s ease;
+
+            mat-icon {
+                margin-right: 6px;
+            }
+
+            &:hover {
+                transform: translateY(-1px);
+                box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
+            }
+        }
+
+        .secondary-button {
+            color: #60a5fa;
+            font-weight: 500;
+            padding: 10px 18px;
+            text-transform: none;
+        }
+    }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes gentleFloat {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 0.85;
+        transform: scale(1);
+    }
+}
+
+@keyframes gridMove {
+    0% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+    100% {
+        transform: translate(40px, 40px) rotate(0.5deg);
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.ts b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.ts
new file mode 100644
index 0000000..1302082
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.ts
@@ -0,0 +1,152 @@
+import { Component, inject, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import type { WorkspacePlaylistType } from '@iptvnator/workspace/shell/util';
+import { WORKSPACE_PRODUCT_BRANDING } from 'services';
+
+export type EmptyStateType =
+    | 'welcome-dashboard'
+    | 'welcome-sources'
+    | 'no-results'
+    | 'no-data';
+
+interface FeatureCard {
+    icon: string;
+    titleKey: string;
+    descKey: string;
+    electronOnly?: boolean;
+}
+
+interface SourceCard {
+    type: WorkspacePlaylistType;
+    icon: string;
+    nameKey: string;
+    needsKey: string;
+    addLabelKey: string;
+    contentKeys: readonly string[];
+}
+
+const FEATURE_CARDS: readonly FeatureCard[] = [
+    {
+        icon: 'live_tv',
+        titleKey: 'HOME.PLAYLISTS.FEATURE_LIVE_TITLE',
+        descKey: 'HOME.PLAYLISTS.FEATURE_LIVE_DESC',
+    },
+    {
+        icon: 'movie',
+        titleKey: 'HOME.PLAYLISTS.FEATURE_VOD_TITLE',
+        descKey: 'HOME.PLAYLISTS.FEATURE_VOD_DESC',
+    },
+    {
+        icon: 'event_note',
+        titleKey: 'HOME.PLAYLISTS.FEATURE_EPG_TITLE',
+        descKey: 'HOME.PLAYLISTS.FEATURE_EPG_DESC',
+    },
+    {
+        icon: 'download_for_offline',
+        titleKey: 'HOME.PLAYLISTS.FEATURE_OFFLINE_TITLE',
+        descKey: 'HOME.PLAYLISTS.FEATURE_OFFLINE_DESC',
+        electronOnly: true,
+    },
+];
+
+const SOURCE_CARDS: readonly SourceCard[] = [
+    {
+        type: 'url',
+        icon: 'folder_open',
+        nameKey: 'HOME.PLAYLISTS.FEATURE_M3U',
+        needsKey: 'HOME.PLAYLISTS.SOURCE_M3U_NEEDS',
+        addLabelKey: 'HOME.PLAYLISTS.SOURCE_M3U_ADD',
+        contentKeys: [
+            'HOME.PLAYLISTS.CONTENT_LIVE',
+            'HOME.PLAYLISTS.CONTENT_EPG',
+        ],
+    },
+    {
+        type: 'xtream',
+        icon: 'cloud',
+        nameKey: 'HOME.PLAYLISTS.FEATURE_XTREAM',
+        needsKey: 'HOME.PLAYLISTS.SOURCE_XTREAM_NEEDS',
+        addLabelKey: 'HOME.PLAYLISTS.SOURCE_XTREAM_ADD',
+        contentKeys: [
+            'HOME.PLAYLISTS.CONTENT_LIVE',
+            'HOME.PLAYLISTS.CONTENT_VOD',
+            'HOME.PLAYLISTS.CONTENT_SERIES',
+            'HOME.PLAYLISTS.CONTENT_EPG',
+        ],
+    },
+    {
+        type: 'stalker',
+        icon: 'cast',
+        nameKey: 'HOME.PLAYLISTS.FEATURE_STALKER',
+        needsKey: 'HOME.PLAYLISTS.SOURCE_STALKER_NEEDS',
+        addLabelKey: 'HOME.PLAYLISTS.SOURCE_STALKER_ADD',
+        contentKeys: [
+            'HOME.PLAYLISTS.CONTENT_LIVE',
+            'HOME.PLAYLISTS.CONTENT_VOD',
+            'HOME.PLAYLISTS.CONTENT_SERIES',
+            'HOME.PLAYLISTS.CONTENT_EPG',
+        ],
+    },
+];
+
+@Component({
+    selector: 'app-empty-state',
+    templateUrl: './empty-state.component.html',
+    styleUrls: [
+        './empty-state.component.scss',
+        './empty-state.welcome-dashboard.scss',
+        './empty-state.welcome-sources.scss',
+        './empty-state.responsive.scss',
+        './empty-state.themes.scss',
+    ],
+    imports: [MatButtonModule, MatIcon, TranslatePipe],
+})
+export class EmptyStateComponent {
+    readonly productBranding = inject(WORKSPACE_PRODUCT_BRANDING, {
+        optional: true,
+    });
+
+    readonly type = input.required<EmptyStateType>();
+
+    readonly icon = input<string>('inbox');
+    readonly titleKey = input<string>('');
+    readonly descriptionKey = input<string>('');
+    readonly primaryActionLabelKey = input<string | null>(null);
+    readonly secondaryActionLabelKey = input<string | null>(null);
+
+    readonly showElectronOnlyValueProps = input<boolean>(false);
+
+    readonly addPlaylistClicked = output<WorkspacePlaylistType | undefined>();
+    readonly primaryActionClicked = output<void>();
+    readonly secondaryActionClicked = output<void>();
+
+    readonly featureCards = FEATURE_CARDS;
+
+    visibleSourceCards(): readonly SourceCard[] {
+        if (this.productBranding?.xtreamOnlyUi) {
+            return SOURCE_CARDS.filter((c) => c.type === 'xtream');
+        }
+        return SOURCE_CARDS;
+    }
+
+    onAddPlaylist(type?: WorkspacePlaylistType): void {
+        const resolved =
+            type ??
+            (this.productBranding?.xtreamOnlyUi ? 'xtream' : undefined);
+        this.addPlaylistClicked.emit(resolved);
+    }
+
+    onPrimaryAction(): void {
+        this.primaryActionClicked.emit();
+    }
+
+    onSecondaryAction(): void {
+        this.secondaryActionClicked.emit();
+    }
+
+    isFeatureCardVisible(card: FeatureCard): boolean {
+        return !card.electronOnly || this.showElectronOnlyValueProps();
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.responsive.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.responsive.scss
new file mode 100644
index 0000000..ba080ca
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.responsive.scss
@@ -0,0 +1,41 @@
+@media (max-width: 480px) {
+    .no-results-state {
+        padding: 30px 20px;
+
+        .illustration {
+            width: 100px;
+            height: 100px;
+        }
+    }
+
+    .no-data-state {
+        padding: 40px 20px;
+
+        .actions {
+            flex-direction: column;
+            gap: 8px;
+        }
+    }
+}
+
+@media (max-height: 700px) {
+    .no-results-state {
+        padding: 24px 20px;
+        .illustration-container { margin-bottom: 16px; }
+    }
+
+    .no-data-state {
+        padding: 32px 24px;
+        .empty-icon { font-size: 56px; width: 56px; height: 56px; }
+    }
+}
+
+@media (max-height: 550px) {
+    .no-results-state {
+        padding: 16px 20px;
+        .illustration-container { margin-bottom: 12px; }
+        .illustration { width: 80px; height: 80px; }
+        .title { font-size: 1.125rem; }
+        .description { font-size: 0.8125rem; }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.themes.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.themes.scss
new file mode 100644
index 0000000..4759085
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.themes.scss
@@ -0,0 +1,38 @@
+@media (prefers-color-scheme: light) {
+    .empty-state {
+        .title {
+            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .description {
+            opacity: 0.8;
+            color: #64748b;
+        }
+    }
+
+    .no-results-state {
+        .illustration {
+            opacity: 0.3;
+
+            .search-circle,
+            .search-handle,
+            .empty-box,
+            .empty-line {
+                stroke: #64748b;
+            }
+        }
+    }
+
+    .no-data-state {
+        .empty-icon {
+            color: #2563eb;
+        }
+
+        .secondary-button {
+            color: #2563eb;
+        }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
new file mode 100644
index 0000000..154d51b
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
@@ -0,0 +1,422 @@
+.welcome-dashboard {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    padding: clamp(16px, 3vh, 36px) clamp(12px, 3vw, 32px);
+    overflow: hidden;
+    text-align: center;
+    gap: clamp(16px, 3vh, 32px);
+    animation: fadeIn 0.5s ease-out;
+    min-width: 0;
+    min-height: 0;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: -50%;
+        background-image:
+            repeating-linear-gradient(
+                0deg,
+                transparent,
+                transparent 39px,
+                rgba(59, 130, 246, 0.03) 39px,
+                rgba(59, 130, 246, 0.03) 41px
+            ),
+            repeating-linear-gradient(
+                90deg,
+                transparent,
+                transparent 39px,
+                rgba(59, 130, 246, 0.03) 39px,
+                rgba(59, 130, 246, 0.03) 41px
+            ),
+            repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 79px,
+                rgba(59, 130, 246, 0.015) 79px,
+                rgba(59, 130, 246, 0.015) 81px
+            );
+        mask-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 0.7) 40%,
+            rgba(0, 0, 0, 0.3) 70%,
+            transparent 100%
+        );
+        -webkit-mask-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 0.7) 40%,
+            rgba(0, 0, 0, 0.3) 70%,
+            transparent 100%
+        );
+        animation: gridMove 60s linear infinite;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    > * {
+        position: relative;
+        z-index: 1;
+    }
+
+    .welcome-dashboard__hero {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        width: 100%;
+        max-width: 640px;
+        min-width: 0;
+        animation: slideUp 0.6s ease-out;
+    }
+
+    .welcome-dashboard__illustration-container {
+        position: relative;
+        margin-bottom: 4px;
+    }
+
+    .welcome-dashboard__illustration {
+        width: clamp(96px, 16vh, 160px);
+        height: clamp(96px, 16vh, 160px);
+        filter: drop-shadow(0 10px 30px rgba(59, 130, 246, 0.2));
+        color: #60a5fa;
+        display: block;
+
+        .icon-background {
+            fill: #3b82f6;
+            opacity: 0.15;
+        }
+
+        .monitor-base,
+        .monitor-stand {
+            fill: #3b82f6;
+        }
+
+        .screen-border {
+            stroke: #3b82f6;
+        }
+
+        .wifi-dot {
+            fill: #60a5fa;
+        }
+
+        .wifi-arc {
+            stroke: #60a5fa;
+            opacity: 0.7;
+
+            &.arc-1 { opacity: 0.9; }
+            &.arc-2 { opacity: 0.7; }
+            &.arc-3 { opacity: 0.5; }
+        }
+    }
+
+    .welcome-dashboard__title {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-weight: 600;
+        font-size: clamp(1.4rem, 3.4vh, 2.1rem);
+        margin: 0;
+        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        letter-spacing: -0.02em;
+    }
+
+    .welcome-dashboard__tagline {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: clamp(0.95rem, 1.9vh, 1.05rem);
+        font-weight: 500;
+        opacity: 0.85;
+        margin: 0;
+        line-height: 1.45;
+    }
+
+    .welcome-dashboard__description {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: clamp(0.8125rem, 1.7vh, 0.9375rem);
+        opacity: 0.65;
+        margin: 0;
+        line-height: 1.5;
+        max-width: 480px;
+    }
+
+    .welcome-dashboard__cta {
+        margin-top: 8px;
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        color: white;
+        font-weight: 500;
+        font-size: clamp(0.875rem, 1.8vh, 1rem);
+        padding: 10px 28px;
+        border-radius: 12px;
+        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+        text-transform: none;
+        letter-spacing: 0.01em;
+
+        mat-icon {
+            margin-right: 8px;
+        }
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
+        }
+
+        &:active {
+            transform: translateY(0);
+        }
+    }
+
+    .welcome-dashboard__cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
+        gap: clamp(10px, 1.6vw, 18px);
+        width: 100%;
+        max-width: 820px;
+        margin: 0 auto;
+        padding: 8px 4px 4px;
+        list-style: none;
+        justify-items: stretch;
+        align-items: stretch;
+        animation: slideUp 0.7s ease-out 0.1s backwards;
+        min-width: 0;
+    }
+
+    .feature-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 8px;
+        padding: clamp(12px, 2vh, 18px) clamp(10px, 1.5vw, 14px);
+        background: linear-gradient(
+            135deg,
+            rgba(96, 165, 250, 0.08),
+            rgba(37, 99, 235, 0.04)
+        );
+        border: 1px solid rgba(96, 165, 250, 0.18);
+        border-radius: 14px;
+        backdrop-filter: blur(8px);
+        transform: rotate(-2deg);
+        transform-origin: center;
+        transition:
+            transform 0.25s ease,
+            box-shadow 0.25s ease,
+            border-color 0.25s ease,
+            background 0.25s ease;
+        cursor: default;
+        min-width: 0;
+
+        &:nth-child(2) { transform: rotate(1.5deg); }
+        &:nth-child(3) { transform: rotate(-1deg); }
+        &:nth-child(4) { transform: rotate(2deg); }
+
+        &:hover {
+            transform: rotate(0deg) translateY(-4px) scale(1.04);
+            box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
+            border-color: rgba(96, 165, 250, 0.4);
+            background: linear-gradient(
+                135deg,
+                rgba(96, 165, 250, 0.16),
+                rgba(37, 99, 235, 0.1)
+            );
+
+            .feature-card__icon-wrap {
+                transform: scale(1.08);
+                box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
+            }
+        }
+    }
+
+    .feature-card__icon-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 11px;
+        background: linear-gradient(135deg, #3b82f6, #2563eb);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        transition:
+            transform 0.25s ease,
+            box-shadow 0.25s ease;
+        flex-shrink: 0;
+    }
+
+    .feature-card__icon {
+        font-size: 22px;
+        width: 22px;
+        height: 22px;
+        color: white;
+    }
+
+    .feature-card__title {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 0.9rem;
+        font-weight: 600;
+        margin: 0;
+        line-height: 1.25;
+        word-break: break-word;
+    }
+
+    .feature-card__desc {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 0.78125rem;
+        opacity: 0.7;
+        margin: 0;
+        line-height: 1.35;
+        word-break: break-word;
+    }
+}
+
+@media (max-width: 640px) {
+    .welcome-dashboard {
+        gap: 16px;
+
+        .welcome-dashboard__cards {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            max-width: 420px;
+        }
+    }
+}
+
+@media (max-width: 380px) {
+    .welcome-dashboard .welcome-dashboard__cards {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-height: 620px) {
+    .welcome-dashboard {
+        gap: 12px;
+
+        .welcome-dashboard__description {
+            display: none;
+        }
+
+        .welcome-dashboard__hero {
+            gap: 6px;
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .welcome-dashboard {
+        animation: none;
+
+        .welcome-dashboard__hero,
+        .welcome-dashboard__cards {
+            animation: none;
+        }
+
+        .feature-card,
+        .feature-card:nth-child(n) {
+            transform: none;
+
+            &:hover {
+                transform: translateY(-2px);
+            }
+        }
+
+        .welcome-dashboard__cta:hover {
+            transform: none;
+        }
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .welcome-dashboard {
+        &::before {
+            background-image:
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 39px,
+                    rgba(37, 99, 235, 0.04) 39px,
+                    rgba(37, 99, 235, 0.04) 41px
+                ),
+                repeating-linear-gradient(
+                    90deg,
+                    transparent,
+                    transparent 39px,
+                    rgba(37, 99, 235, 0.04) 39px,
+                    rgba(37, 99, 235, 0.04) 41px
+                ),
+                repeating-linear-gradient(
+                    45deg,
+                    transparent,
+                    transparent 79px,
+                    rgba(37, 99, 235, 0.02) 79px,
+                    rgba(37, 99, 235, 0.02) 81px
+                );
+        }
+
+        .welcome-dashboard__title {
+            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .welcome-dashboard__tagline {
+            color: #1e3a8a;
+            opacity: 0.85;
+        }
+
+        .welcome-dashboard__description {
+            color: #64748b;
+            opacity: 0.85;
+        }
+
+        .welcome-dashboard__illustration {
+            filter: drop-shadow(0 10px 30px rgba(37, 99, 235, 0.15));
+            color: #3b82f6;
+
+            .icon-background {
+                fill: #2563eb;
+                opacity: 0.12;
+            }
+
+            .monitor-base,
+            .monitor-stand {
+                fill: #2563eb;
+            }
+
+            .screen-border {
+                stroke: #2563eb;
+            }
+
+            .wifi-dot {
+                fill: #3b82f6;
+            }
+
+            .wifi-arc {
+                stroke: #3b82f6;
+            }
+        }
+
+        .feature-card {
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(29, 78, 216, 0.03));
+            border-color: rgba(37, 99, 235, 0.15);
+
+            &:hover {
+                background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(29, 78, 216, 0.06));
+                border-color: rgba(37, 99, 235, 0.3);
+            }
+        }
+
+        .feature-card__desc {
+            color: #475569;
+            opacity: 0.85;
+        }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
new file mode 100644
index 0000000..41e01a6
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
@@ -0,0 +1,259 @@
+.welcome-sources {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    padding: clamp(16px, 3vh, 36px) clamp(12px, 3vw, 32px);
+    overflow: hidden;
+    gap: clamp(16px, 3vh, 28px);
+    animation: fadeIn 0.5s ease-out;
+    min-width: 0;
+    min-height: 0;
+
+    .welcome-sources__header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 8px;
+        max-width: 540px;
+        width: 100%;
+        animation: slideUp 0.6s ease-out;
+    }
+
+    .welcome-sources__icon-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 12px;
+        animation: gentleFloat 0.6s ease-out;
+    }
+
+    .welcome-sources__icon {
+        font-size: 72px;
+        width: 72px;
+        height: 72px;
+        color: #60a5fa;
+        opacity: 0.85;
+    }
+
+    .welcome-sources__title {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-weight: 500;
+        font-size: 1.5rem;
+        margin: 0 0 8px 0;
+        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .welcome-sources__body {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 0.95rem;
+        line-height: 1.6;
+        opacity: 0.7;
+        margin: 0;
+    }
+
+    .welcome-sources__grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: clamp(10px, 1.6vw, 18px);
+        width: 100%;
+        max-width: 980px;
+        margin: 0 auto;
+        animation: slideUp 0.7s ease-out 0.1s backwards;
+        min-width: 0;
+    }
+
+    .source-card {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: clamp(14px, 2.2vh, 22px);
+        background: linear-gradient(
+            145deg,
+            rgba(96, 165, 250, 0.08),
+            rgba(37, 99, 235, 0.04)
+        );
+        border: 1px solid rgba(96, 165, 250, 0.2);
+        border-radius: 16px;
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease,
+            border-color 0.2s ease;
+        min-width: 0;
+
+        &:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 28px rgba(59, 130, 246, 0.22);
+            border-color: rgba(96, 165, 250, 0.4);
+        }
+    }
+
+    .source-card__head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 0;
+    }
+
+    .source-card__icon {
+        font-size: 28px;
+        width: 28px;
+        height: 28px;
+        color: #60a5fa;
+        flex-shrink: 0;
+    }
+
+    .source-card__name {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 1.05rem;
+        font-weight: 600;
+        margin: 0;
+        line-height: 1.2;
+        word-break: break-word;
+    }
+
+    .source-card__needs {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 0.8125rem;
+        opacity: 0.75;
+        margin: 0;
+        line-height: 1.45;
+        min-height: 2.5em;
+        word-break: break-word;
+    }
+
+    .source-card__chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .source-card__chip {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-size: 0.7rem;
+        font-weight: 500;
+        padding: 3px 9px;
+        border-radius: 999px;
+        background: rgba(96, 165, 250, 0.14);
+        color: #93c5fd;
+        border: 1px solid rgba(96, 165, 250, 0.22);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+    }
+
+    .source-card__cta {
+        margin-top: auto;
+        align-self: stretch;
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        color: white;
+        font-weight: 500;
+        font-size: 0.875rem;
+        padding: 8px 18px;
+        border-radius: 10px;
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+        text-transform: none;
+
+        mat-icon {
+            margin-right: 6px;
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
+        }
+    }
+}
+
+@media (max-width: 760px) {
+    .welcome-sources .welcome-sources__grid {
+        grid-template-columns: 1fr;
+        max-width: 480px;
+    }
+}
+
+@media (max-height: 620px) {
+    .welcome-sources {
+        gap: 14px;
+
+        .source-card__needs {
+            min-height: 0;
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .welcome-sources {
+        animation: none;
+
+        .welcome-sources__header,
+        .welcome-sources__grid {
+            animation: none;
+        }
+
+        .source-card:hover,
+        .source-card__cta:hover {
+            transform: none;
+        }
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .welcome-sources {
+        .welcome-sources__icon {
+            color: #2563eb;
+        }
+
+        .welcome-sources__title {
+            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .welcome-sources__body {
+            color: #64748b;
+            opacity: 0.85;
+        }
+
+        .source-card {
+            background: linear-gradient(145deg, rgba(37, 99, 235, 0.06), rgba(29, 78, 216, 0.03));
+            border-color: rgba(37, 99, 235, 0.15);
+
+            &:hover {
+                background: linear-gradient(145deg, rgba(37, 99, 235, 0.1), rgba(29, 78, 216, 0.05));
+                border-color: rgba(37, 99, 235, 0.3);
+            }
+        }
+
+        .source-card__icon {
+            color: #2563eb;
+        }
+
+        .source-card__needs {
+            color: #475569;
+            opacity: 0.9;
+        }
+
+        .source-card__chip {
+            background: rgba(37, 99, 235, 0.08);
+            color: #1d4ed8;
+            border-color: rgba(37, 99, 235, 0.18);
+        }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-info/playlist-info.component.html b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-info/playlist-info.component.html
new file mode 100644
index 0000000..b0cbe0e
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-info/playlist-info.component.html
@@ -0,0 +1,193 @@
+<form
+    [formGroup]="playlistDetails"
+    (ngSubmit)="saveChanges(playlistDetails.value)"
+>
+    <h2 mat-dialog-title>
+        {{ 'HOME.PLAYLISTS.INFO_DIALOG.PLAYLIST_DETAILS' | translate }}
+    </h2>
+    <mat-dialog-content class="mat-typography">
+        <mat-form-field class="w-full">
+            <mat-label>{{
+                'HOME.PLAYLISTS.INFO_DIALOG.TITLE' | translate
+            }}</mat-label>
+            <input formControlName="title" matInput />
+        </mat-form-field>
+        @if (playlist.portalUrl) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.SERVER_URL' | translate
+                }}</mat-label>
+                <input matInput formControlName="portalUrl" />
+            </mat-form-field>
+        }
+        @if (playlist.macAddress) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.MAC_ADDRESS' | translate
+                }}</mat-label>
+                <input matInput formControlName="macAddress" />
+            </mat-form-field>
+        }
+        @if (playlist.portalUrl) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.STALKER_PORTAL.SERIAL_NUMBER' | translate
+                }}</mat-label>
+                <input matInput formControlName="stalkerSerialNumber" />
+            </mat-form-field>
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.STALKER_PORTAL.DEVICE_ID_1' | translate
+                }}</mat-label>
+                <input matInput formControlName="stalkerDeviceId1" />
+            </mat-form-field>
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.STALKER_PORTAL.DEVICE_ID_2' | translate
+                }}</mat-label>
+                <input matInput formControlName="stalkerDeviceId2" />
+            </mat-form-field>
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.STALKER_PORTAL.SIGNATURE_1' | translate
+                }}</mat-label>
+                <input matInput formControlName="stalkerSignature1" />
+            </mat-form-field>
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.STALKER_PORTAL.SIGNATURE_2' | translate
+                }}</mat-label>
+                <input matInput formControlName="stalkerSignature2" />
+            </mat-form-field>
+        }
+        @if (playlist.serverUrl) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.SERVER_URL' | translate
+                }}</mat-label>
+                <input matInput formControlName="serverUrl" />
+            </mat-form-field>
+        }
+        @if (playlist.username) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.USERNAME' | translate
+                }}</mat-label>
+                <input matInput formControlName="username" />
+            </mat-form-field>
+        }
+        @if (playlist.password) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.PASSWORD' | translate
+                }}</mat-label>
+                <input matInput formControlName="password" />
+            </mat-form-field>
+        }
+        @if (playlist.url) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.FROM_URL' | translate
+                }}</mat-label>
+                <input matInput formControlName="url" />
+                <button
+                    mat-icon-button
+                    matSuffix
+                    type="button"
+                    (click)="copyUrl()"
+                    [matTooltip]="
+                        'HOME.PLAYLISTS.INFO_DIALOG.COPY_URL' | translate
+                    "
+                >
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </mat-form-field>
+        }
+        @if (playlist.filename) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.ORIGINAL_FILENAME' | translate
+                }}</mat-label>
+                <input matInput formControlName="filename" />
+            </mat-form-field>
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.IMPORT_DATE' | translate
+                }}</mat-label>
+                <input matInput formControlName="importDate" />
+            </mat-form-field>
+        }
+        @if (playlist.count) {
+            <mat-form-field class="w-full">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.CHANNELS' | translate
+                }}</mat-label>
+                <input matInput formControlName="count" />
+            </mat-form-field>
+        }
+        @if (isDesktop) {
+            <mat-form-field class="w-full mb-10">
+                <mat-label>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.USER_AGENT' | translate
+                }}</mat-label>
+                <input formControlName="userAgent" matInput />
+                <mat-hint>{{
+                    'HOME.PLAYLISTS.INFO_DIALOG.CUSTOM_USER_AGENT' | translate
+                }}</mat-hint>
+            </mat-form-field>
+        }
+        @if (playlist.filePath) {
+            <mat-form-field class="w-full">
+                <mat-label>
+                    {{ 'HOME.PLAYLISTS.INFO_DIALOG.FILE_PATH' | translate }}
+                </mat-label>
+                <input formControlName="filePath" matInput />
+                @if (playlist.updateState === 2) {
+                    <mat-hint>
+                        {{
+                            'HOME.PLAYLISTS.INFO_DIALOG.UPDATE_FAILED'
+                                | translate
+                        }}
+                    </mat-hint>
+                }
+            </mat-form-field>
+        }
+        @if (isDesktop && (playlist.url || playlist.filePath)) {
+            <mat-checkbox class="w-full" formControlName="autoRefresh">
+                {{ 'HOME.PLAYLISTS.INFO_DIALOG.AUTO_UPDATE' | translate }}
+            </mat-checkbox>
+            <p>
+                {{
+                    'HOME.PLAYLISTS.INFO_DIALOG.AUTO_UPDATE_DESCRIPTION'
+                        | translate
+                }}
+            </p>
+        }
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        @if (!playlist.serverUrl && !playlist.portalUrl) {
+            <button
+                mat-flat-button
+                color="accent"
+                type="button"
+                (click)="exportPlaylist()"
+            >
+                <mat-icon>download</mat-icon>
+                {{ 'HOME.PLAYLISTS.INFO_DIALOG.EXPORT_PLAYLIST' | translate }}
+            </button>
+        }
+        <span class="spacer"></span>
+        <button mat-button mat-dialog-close>
+            {{ 'HOME.PLAYLISTS.INFO_DIALOG.CLOSE' | translate }}
+        </button>
+        <button
+            mat-flat-button
+            mat-dialog-close
+            color="accent"
+            type="submit"
+            [disabled]="!playlistDetails.valid || playlistDetails.pristine"
+        >
+            {{ 'HOME.PLAYLISTS.INFO_DIALOG.SAVE' | translate }}
+        </button>
+    </mat-dialog-actions>
+</form>
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-info/playlist-info.component.ts b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-info/playlist-info.component.ts
new file mode 100644
index 0000000..51d42a3
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-info/playlist-info.component.ts
@@ -0,0 +1,275 @@
+import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
+import { DatePipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import {
+    FormControl,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Store } from '@ngrx/store';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { PlaylistActions } from 'm3u-state';
+import { firstValueFrom } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import { Playlist, PlaylistMeta } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-playlist-info',
+    templateUrl: './playlist-info.component.html',
+    styles: [
+        `
+            .spacer {
+                flex: 1 1 auto;
+            }
+
+            mat-dialog-content {
+                display: flex;
+                flex-direction: column;
+                gap: 14px;
+            }
+
+            // Material's '.mat-mdc-dialog-title + .mat-mdc-dialog-content' rule
+            // zeroes padding-top with higher specificity than a scoped override,
+            // which clips the first field's floating label. Pushing the first
+            // field down with margin-top side-steps that entirely.
+            mat-dialog-content > mat-form-field:first-child {
+                margin-top: 10px;
+            }
+
+            mat-dialog-content mat-checkbox {
+                margin-top: 4px;
+            }
+
+            mat-dialog-content p {
+                margin: 0;
+                color: var(--app-muted-color);
+                font-size: 12.5px;
+                line-height: 1.45;
+            }
+        `,
+    ],
+    providers: [DatePipe],
+    imports: [
+        ClipboardModule,
+        MatButton,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIcon,
+        MatIconButton,
+        MatInputModule,
+        MatTooltip,
+        ReactiveFormsModule,
+        TranslatePipe,
+    ],
+})
+export class PlaylistInfoComponent {
+    private clipboard = inject(Clipboard);
+    private datePipe = inject(DatePipe);
+    private formBuilder = inject(UntypedFormBuilder);
+    private playlistsService = inject(PlaylistsService);
+    private store = inject(Store);
+    private databaseService = inject(DatabaseService);
+    private snackBar = inject(MatSnackBar);
+    private translate = inject(TranslateService);
+    public playlistData = inject<Playlist & { id: string }>(MAT_DIALOG_DATA);
+
+    readonly isDesktop = !!window.electron;
+
+    /** Playlist object */
+    playlist: Playlist & { id: string };
+
+    /** Form group with playlist details */
+    playlistDetails!: UntypedFormGroup;
+
+    constructor() {
+        this.playlist = this.playlistData;
+        this.createForm();
+    }
+
+    /**
+     * Create the form and set initial data on component init
+     */
+    createForm(): void {
+        this.playlistDetails = this.formBuilder.group({
+            _id: this.playlist._id,
+            title: new FormControl(this.playlist.title, Validators.required),
+            userAgent: this.playlist.userAgent || '',
+            filename: new FormControl({
+                value: this.playlist.filename || '',
+                disabled: true,
+            }),
+            count: new FormControl({
+                value: this.playlist.count,
+                disabled: true,
+            }),
+            importDate: new FormControl({
+                value: this.datePipe.transform(this.playlist.importDate),
+                disabled: true,
+            }),
+            url: new FormControl({
+                value: this.playlist.url,
+                disabled: true,
+            }),
+            filePath: new FormControl({
+                value: this.playlist.filePath,
+                disabled: true,
+            }),
+            autoRefresh: new FormControl(this.playlist.autoRefresh),
+            serverUrl: new FormControl(this.playlist.serverUrl),
+            username: new FormControl(this.playlist.username),
+            password: new FormControl(this.playlist.password),
+            macAddress: new FormControl(this.playlist.macAddress),
+            portalUrl: new FormControl(this.playlist.portalUrl),
+            stalkerSerialNumber: new FormControl(
+                this.playlist.stalkerSerialNumber
+            ),
+            stalkerDeviceId1: new FormControl(this.playlist.stalkerDeviceId1),
+            stalkerDeviceId2: new FormControl(this.playlist.stalkerDeviceId2),
+            stalkerSignature1: new FormControl(this.playlist.stalkerSignature1),
+            stalkerSignature2: new FormControl(this.playlist.stalkerSignature2),
+        });
+    }
+
+    async saveChanges(playlist: PlaylistMeta): Promise<void> {
+        try {
+            const isXtream =
+                this.playlist &&
+                this.playlist.username &&
+                this.playlist.password &&
+                this.playlist.serverUrl;
+
+            if (isXtream) {
+                await this.updateXtreamPlaylist(playlist);
+            }
+
+            // Dispatch store action to update UI
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({ playlist })
+            );
+
+            this.snackBar.open(
+                this.translate.instant(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_SUCCESS'
+                ),
+                this.translate.instant('CLOSE'),
+                { duration: 3000 }
+            );
+        } catch (error) {
+            console.error('Error updating playlist:', error);
+            this.snackBar.open(
+                this.translate.instant('HOME.PLAYLISTS.PLAYLIST_UPDATE_FAILED'),
+                this.translate.instant('CLOSE'),
+                {
+                    duration: 3000,
+                }
+            );
+        }
+    }
+
+    async updateXtreamPlaylist(playlist: PlaylistMeta) {
+        const success = await this.databaseService.updateXtreamPlaylistDetails({
+            id: this.playlist._id,
+            title: playlist.title,
+            username: playlist.username,
+            password: playlist.password,
+            serverUrl: playlist.serverUrl,
+        });
+
+        if (!success) {
+            throw new Error('Failed to update playlist in database');
+        }
+
+        // TODO: circular dependency
+        /* this.xtreamStore.updatePlaylist({
+            name: playlist.title,
+            username: playlist.username,
+            password: playlist.password,
+            serverUrl: playlist.serverUrl,
+        }); */
+    }
+
+    async exportPlaylist() {
+        const playlistAsString = await firstValueFrom(
+            this.playlistsService.getRawPlaylistById(this.playlist._id)
+        );
+
+        if (this.isDesktop) {
+            try {
+                const savePath = await window.electron.saveFileDialog(
+                    `${this.playlist.title || 'exported'}.m3u8`,
+                    [
+                        {
+                            name: 'Playlist',
+                            extensions: ['m3u8', 'm3u'],
+                        },
+                    ]
+                );
+
+                if (savePath) {
+                    await window.electron.writeFile(savePath, playlistAsString);
+                    this.snackBar.open(
+                        this.translate.instant(
+                            'HOME.PLAYLISTS.INFO_DIALOG.PLAYLIST_EXPORT_SUCCESS'
+                        ),
+                        this.translate.instant('CLOSE'),
+                        { duration: 3000 }
+                    );
+                }
+            } catch (error) {
+                console.error('Failed to export playlist:', error);
+                this.snackBar.open(
+                    this.translate.instant(
+                        'HOME.PLAYLISTS.INFO_DIALOG.EXPORT_PLAYLIST_FAILED'
+                    ),
+                    this.translate.instant('CLOSE'),
+                    {
+                        duration: 3000,
+                    }
+                );
+            }
+        } else {
+            const element = document.createElement('a');
+            element.setAttribute(
+                'href',
+                'data:text/plain;charset=utf-8,' +
+                    encodeURIComponent(playlistAsString)
+            );
+            element.setAttribute(
+                'download',
+                this.playlist.title || 'exported.m3u'
+            );
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        }
+    }
+
+    /**
+     * Copy URL to clipboard
+     */
+    copyUrl(): void {
+        const url = this.playlistDetails.get('url')?.value;
+        if (url) {
+            const success = this.clipboard.copy(url);
+            if (success) {
+                this.snackBar.open(
+                    this.translate.instant(
+                        'HOME.PLAYLISTS.INFO_DIALOG.URL_COPIED'
+                    ),
+                    this.translate.instant('CLOSE'),
+                    { duration: 2000 }
+                );
+            }
+        }
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.html b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.html
new file mode 100644
index 0000000..b9856fc
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.html
@@ -0,0 +1,244 @@
+<div
+    class="playlist-item"
+    cdkDrag
+    [cdkDragDisabled]="!isDraggable() || isBusy()"
+    cdkDragPreviewContainer="parent"
+    [class.selected]="isSelected()"
+    [class.is-busy]="isBusy()"
+    (click)="onPlaylistClick()"
+>
+    @if (isDraggable()) {
+        <mat-icon cdkDragHandle class="drag-icon">drag_indicator</mat-icon>
+    }
+    <div class="playlist-icon">
+        @if (item.url) {
+            <div class="icon-container">
+                <mat-icon
+                    class="upload-type-icon"
+                    [matTooltip]="
+                        ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) +
+                        ' ' +
+                        item.url
+                    "
+                    >cloud</mat-icon
+                >
+                @if (item.autoRefresh) {
+                    <mat-icon
+                        class="auto-refresh-indicator"
+                        [matTooltip]="
+                            'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
+                        "
+                        >autorenew</mat-icon
+                    >
+                }
+            </div>
+        }
+        @if (!item.url && !item.serverUrl && !item.macAddress) {
+            <div class="icon-container">
+                <mat-icon
+                    class="upload-type-icon"
+                    [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
+                    >folder</mat-icon
+                >
+                @if (item.autoRefresh) {
+                    <mat-icon
+                        class="auto-refresh-indicator"
+                        [matTooltip]="
+                            'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
+                        "
+                        >autorenew</mat-icon
+                    >
+                }
+            </div>
+        }
+        @if (item.serverUrl) {
+            <div class="icon-container">
+                <mat-icon
+                    class="upload-type-icon"
+                    [matTooltip]="'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate"
+                    >public</mat-icon
+                >
+                <span
+                    class="status-dot"
+                    [class]="getStatusClass()"
+                    [matTooltip]="'Portal status: ' + portalStatus"
+                    [attr.aria-label]="'Portal status: ' + portalStatus"
+                ></span>
+            </div>
+        }
+        @if (item.macAddress) {
+            <mat-icon
+                class="upload-type-icon"
+                [matTooltip]="'HOME.PLAYLISTS.STALKER_PORTAL' | translate"
+                >dashboard</mat-icon
+            >
+        }
+    </div>
+    <div class="playlist-content">
+        <div class="playlist-title">
+            {{ item.title || item.filename }}
+        </div>
+        <div class="meta">
+            @if (!item.serverUrl && !item.portalUrl) {
+                {{ 'HOME.PLAYLISTS.CHANNELS' | translate }}: {{ item.count }}
+                @if (item.importDate.length > 3) {
+                    | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
+                    {{ item.importDate | date: undefined : undefined : currentLocale() }}
+                }
+                @if (item.updateDate) {
+                    | {{ 'HOME.PLAYLISTS.UPDATED' | translate }}:
+                    {{
+                        item.updateDate
+                            | date
+                                : 'MMMM d, yyyy, HH:mm'
+                                : undefined
+                                : currentLocale()
+                    }}
+                }
+                @if (item.updateState === 2) {
+                    <mat-icon
+                        [matTooltip]="
+                            'HOME.PLAYLISTS.INFO_DIALOG.UPDATE_FAILED'
+                                | translate
+                        "
+                        [inline]="true"
+                        >warning</mat-icon
+                    >
+                }
+            } @else {
+                @if (item.macAddress) {
+                    Stalker
+                } @else {
+                    Xtream
+                }
+                @if (item.importDate.length > 3) {
+                    | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
+                    {{ item.importDate | date: undefined : undefined : currentLocale() }}
+                }
+                @if (item.updateDate) {
+                    | {{ 'HOME.PLAYLISTS.UPDATED' | translate }}:
+                    {{
+                        item.updateDate
+                            | date
+                                : 'MMMM d, yyyy, HH:mm'
+                                : undefined
+                                : currentLocale()
+                    }}
+                }
+            }
+        </div>
+        @if (isBusy() && busyMessage()) {
+            <div class="busy-state">
+                <span class="busy-state__message">{{ busyMessage() }}</span>
+                @if (busyProgress() !== null) {
+                    <span class="busy-state__value">{{ busyProgress() }}%</span>
+                }
+            </div>
+        }
+        @if (isBusy() && busyMessage() && busyProgress() !== null) {
+            <div class="busy-state__bar">
+                <mat-progress-bar
+                    mode="determinate"
+                    [value]="busyProgress() ?? 0"
+                />
+            </div>
+        }
+        @if (isBusy() && busyMessage() && busyProgress() === null) {
+            <div class="busy-state__bar">
+                <mat-progress-bar mode="indeterminate" />
+            </div>
+        }
+    </div>
+
+    @if (showActions()) {
+        <div class="action-buttons">
+            @if (canCancelBusyAction()) {
+                <button
+                    mat-icon-button
+                    color="warn"
+                    class="cancel-btn"
+                    (click)="
+                        $event.stopPropagation(); cancelBusyActionClicked.emit()
+                    "
+                    [matTooltip]="
+                        'WORKSPACE.SHELL.XTREAM_IMPORT_CANCEL' | translate
+                    "
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+            @if (item.url || item.filePath) {
+                <button
+                    mat-icon-button
+                    class="refresh-btn"
+                    (click)="
+                        $event.stopPropagation(); refreshClicked.emit(item)
+                    "
+                    [disabled]="isBusy()"
+                    [matTooltip]="'HOME.PLAYLISTS.REFRESH' | translate"
+                >
+                    @if (isRefreshing()) {
+                        <mat-spinner
+                            class="action-spinner"
+                            diameter="18"
+                            strokeWidth="3"
+                        />
+                    } @else {
+                        <mat-icon>sync</mat-icon>
+                    }
+                </button>
+            }
+            @if (item.serverUrl && isElectron) {
+                <button
+                    mat-icon-button
+                    class="refresh-btn"
+                    (click)="
+                        $event.stopPropagation(); refreshClicked.emit(item)
+                    "
+                    [disabled]="isBusy()"
+                    [matTooltip]="'HOME.PLAYLISTS.REFRESH_XTREAM' | translate"
+                >
+                    @if (isRefreshing()) {
+                        <mat-spinner
+                            class="action-spinner"
+                            diameter="18"
+                            strokeWidth="3"
+                        />
+                    } @else {
+                        <mat-icon>sync</mat-icon>
+                    }
+                </button>
+            }
+
+            <button
+                mat-icon-button
+                class="edit-btn"
+                (click)="
+                    $event.stopPropagation(); editPlaylistClicked.emit(item)
+                "
+                [disabled]="isBusy()"
+                [matTooltip]="'HOME.PLAYLISTS.SHOW_DETAILS' | translate"
+            >
+                <mat-icon>edit</mat-icon>
+            </button>
+
+            <button
+                mat-icon-button
+                class="delete-btn"
+                (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
+                [disabled]="isBusy()"
+                [matTooltip]="'HOME.PLAYLISTS.REMOVE' | translate"
+            >
+                @if (isDeleting()) {
+                    <mat-spinner
+                        class="action-spinner"
+                        diameter="18"
+                        strokeWidth="3"
+                    />
+                } @else {
+                    <mat-icon>delete</mat-icon>
+                }
+            </button>
+        </div>
+    }
+</div>
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
new file mode 100644
index 0000000..b963935
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
@@ -0,0 +1,273 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.playlist-item {
+    width: 100%;
+    min-height: 68px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 10px 8px 12px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease,
+        color 0.15s ease;
+
+    &:hover {
+        background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+
+    &.selected {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        border-color: var(--app-selection-border);
+        color: var(--app-selection-color);
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+
+        .meta,
+        .upload-type-icon,
+        .drag-icon,
+        .action-buttons button,
+        .action-buttons mat-icon {
+            color: inherit;
+        }
+
+        .status-dot {
+            border-color: color-mix(
+                in srgb,
+                var(--app-selection-surface-strong) 85%,
+                transparent
+            );
+        }
+    }
+
+    &.is-busy {
+        cursor: progress;
+    }
+}
+
+.playlist-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+}
+
+.playlist-content {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+}
+
+.playlist-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.96rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+}
+
+.meta {
+    font-size: 0.82rem;
+    color: var(--mat-sys-on-surface-variant);
+    opacity: 0.84;
+    line-height: 1.2;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.busy-state {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 0.7rem;
+    color: var(--app-selection-border, #8aa4c8);
+    margin-top: 2px;
+}
+
+.busy-state__message {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.busy-state__value {
+    opacity: 0.8;
+}
+
+.busy-state__bar {
+    margin-top: 4px;
+}
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 8px;
+    box-shadow:
+        0 8px 24px rgba(0, 0, 0, 0.25),
+        0 4px 12px rgba(0, 0, 0, 0.15),
+        0 2px 6px rgba(0, 0, 0, 0.1);
+    opacity: 0.9;
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.drag-icon {
+    flex-shrink: 0;
+    cursor: move;
+    opacity: 0.46;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.action-buttons {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-inline-start: auto;
+
+    button {
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        color: inherit;
+        opacity: 0.76;
+        transition:
+            opacity 0.15s ease,
+            background-color 0.15s ease,
+            transform 0.15s ease;
+
+        &:hover {
+            opacity: 1;
+            background: color-mix(in srgb, currentColor 10%, transparent);
+            transform: translateY(-1px);
+        }
+
+        mat-icon {
+            width: 20px;
+            height: 20px;
+            font-size: 20px;
+        }
+
+        &:disabled {
+            transform: none;
+            opacity: 0.38;
+        }
+    }
+}
+
+.action-spinner {
+    display: block;
+    margin: 0 auto;
+}
+
+.icon-container {
+    position: relative;
+    display: inline-flex;
+
+    .upload-type-icon {
+        opacity: 0.75;
+        transition: opacity 0.15s ease;
+    }
+
+    .playlist-item:hover & .upload-type-icon {
+        opacity: 0.95;
+    }
+}
+
+.status-dot {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    right: 0;
+    bottom: 0;
+    border: 2px solid var(--mat-sys-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: all 0.15s ease;
+}
+
+.status-active {
+    background-color: #4caf50;
+    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
+}
+
+.status-inactive {
+    background-color: #f44336;
+    box-shadow: 0 0 8px rgba(244, 67, 54, 0.4);
+}
+
+.status-expired {
+    background-color: #ff9800;
+    box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
+}
+
+.status-unavailable {
+    background-color: var(--mat-sys-on-surface-variant);
+    opacity: 0.5;
+}
+
+.auto-refresh-indicator {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    font-size: 14px !important;
+    width: 14px !important;
+    height: 14px !important;
+    color: #4caf50;
+    background-color: var(--mat-sys-surface);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: all 0.15s ease;
+
+    .playlist-item:hover & {
+        color: #66bb6a;
+        transform: rotate(90deg);
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .upload-type-icon,
+    .icon-container,
+    .action-buttons .refresh-btn,
+    .action-buttons .edit-btn,
+    .action-buttons .delete-btn {
+        display: none;
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.spec.ts b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.spec.ts
new file mode 100644
index 0000000..e00aa93
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.spec.ts
@@ -0,0 +1,95 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockModule } from 'ng-mocks';
+import { PortalStatusService } from 'services';
+import { PlaylistItemComponent } from './playlist-item.component';
+
+describe('PlaylistItemComponent', () => {
+    let component: PlaylistItemComponent;
+    let fixture: ComponentFixture<PlaylistItemComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                PlaylistItemComponent,
+                MockModule(MatIconModule),
+                MockModule(MatListModule),
+                MockModule(MatTooltipModule),
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: PortalStatusService,
+                    useValue: {
+                        checkPortalStatus: jest
+                            .fn()
+                            .mockResolvedValue('active'),
+                        getStatusClass: jest.fn(() => 'status-active'),
+                        getStatusIcon: jest.fn(() => 'check_circle'),
+                    },
+                },
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PlaylistItemComponent);
+        component = fixture.componentInstance;
+        component.item = {
+            title: 'Playlist',
+            _id: '1',
+            count: 10,
+            importDate: Date.now().toString(),
+            autoRefresh: false,
+        };
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('shows busy UI and suppresses playlist clicks while deleting', () => {
+        const emitSpy = jest.spyOn(component.playlistClicked, 'emit');
+
+        fixture.componentRef.setInput('isDeleting', true);
+        fixture.detectChanges();
+
+        const nativeElement = fixture.nativeElement as HTMLElement;
+        const deleteButton = nativeElement.querySelector(
+            '.delete-btn'
+        ) as HTMLButtonElement;
+        const editButton = nativeElement.querySelector(
+            '.edit-btn'
+        ) as HTMLButtonElement;
+
+        expect(component.isBusy()).toBe(true);
+        expect(deleteButton.disabled).toBe(true);
+        expect(editButton.disabled).toBe(true);
+        expect(nativeElement.querySelector('.action-spinner')).not.toBeNull();
+
+        component.onPlaylistClick();
+        expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('renders cancel and progress UI for long-running playlist actions', () => {
+        fixture.componentRef.setInput('isDeleting', true);
+        fixture.componentRef.setInput('busyMessage', 'Removing cached content...');
+        fixture.componentRef.setInput('busyProgress', 42);
+        fixture.componentRef.setInput('canCancelBusyAction', true);
+        fixture.detectChanges();
+
+        const nativeElement = fixture.nativeElement as HTMLElement;
+
+        expect(nativeElement.querySelector('.busy-state__message')?.textContent).toContain(
+            'Removing cached content...'
+        );
+        expect(nativeElement.querySelector('.busy-state__value')?.textContent).toContain(
+            '42%'
+        );
+        expect(nativeElement.querySelector('.cancel-btn')).not.toBeNull();
+    });
+});
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.ts b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.ts
new file mode 100644
index 0000000..f3a5942
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.ts
@@ -0,0 +1,102 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DatePipe } from '@angular/common';
+import {
+    Component,
+    Input,
+    OnInit,
+    computed,
+    inject,
+    input,
+    output,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltip } from '@angular/material/tooltip';
+import { normalizeDateLocale } from '@iptvnator/pipes';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { startWith } from 'rxjs';
+import { PortalStatus, PortalStatusService } from 'services';
+import { PlaylistMeta } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-playlist-item',
+    templateUrl: './playlist-item.component.html',
+    styleUrls: ['./playlist-item.component.scss'],
+    imports: [
+        DatePipe,
+        DragDropModule,
+        MatIconButton,
+        MatIcon,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatTooltip,
+        TranslatePipe,
+    ],
+})
+export class PlaylistItemComponent implements OnInit {
+    @Input() item!: PlaylistMeta;
+    readonly showActions = input(true);
+    readonly isDraggable = input(false);
+    readonly isSelected = input(false);
+    readonly isRefreshing = input(false);
+    readonly isDeleting = input(false);
+    readonly busyMessage = input('');
+    readonly busyProgress = input<number | null>(null);
+    readonly canCancelBusyAction = input(false);
+    readonly isBusy = computed(() => this.isRefreshing() || this.isDeleting());
+
+    readonly editPlaylistClicked = output<PlaylistMeta>();
+    readonly playlistClicked = output<string>();
+    readonly refreshClicked = output<PlaylistMeta>();
+    readonly removeClicked = output<string>();
+    readonly cancelBusyActionClicked = output<void>();
+
+    portalStatus: PortalStatus = 'unavailable';
+    private readonly portalStatusService = inject(PortalStatusService);
+    private readonly translate = inject(TranslateService);
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    readonly isElectron = !!window.electron;
+    readonly currentLocale = computed(() => {
+        this.languageTick();
+        return normalizeDateLocale(
+            this.translate.currentLang || this.translate.defaultLang
+        );
+    });
+
+    async ngOnInit() {
+        await this.checkPortalStatus();
+    }
+
+    private async checkPortalStatus() {
+        if (this.item.serverUrl && this.item.username && this.item.password) {
+            this.portalStatus = await this.portalStatusService.checkPortalStatus(
+                this.item.serverUrl,
+                this.item.username,
+                this.item.password
+            );
+        }
+    }
+
+    getStatusClass(): string {
+        return this.portalStatusService.getStatusClass(this.portalStatus);
+    }
+
+    getStatusIcon(): string {
+        return this.portalStatusService.getStatusIcon(this.portalStatus);
+    }
+
+    onPlaylistClick(): void {
+        if (this.isBusy()) {
+            return;
+        }
+
+        this.playlistClicked.emit(this.item._id);
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.html b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.html
new file mode 100644
index 0000000..b795a9e
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.html
@@ -0,0 +1,45 @@
+@if (playlistsData(); as data) {
+    @if (data.playlists.length === 0) {
+        @if (data.totalCount === 0) {
+            <!-- Welcome state: no playlists at all -->
+            <app-empty-state
+                [type]="'welcome-sources'"
+                [showElectronOnlyValueProps]="isElectron"
+                (addPlaylistClicked)="onAddPlaylist($event)"
+            />
+        } @else {
+            <!-- No results state: search/filter returned nothing -->
+            <app-empty-state [type]="'no-results'" />
+        }
+    } @else {
+        <div
+            class="playlists-list"
+            cdkDropList
+            [cdkDropListDisabled]="!isCustomSortActive()"
+            (cdkDropListDropped)="drop($event, data.playlists)"
+        >
+            @for (
+                item of data.playlists;
+                track item._id;
+                let last = $last
+            ) {
+                <app-playlist-item
+                    [item]="item"
+                    [isSelected]="activePlaylistId() === item._id"
+                    [showActions]="!sidebarMode()"
+                    [isDraggable]="isCustomSortActive()"
+                    [isRefreshing]="isRefreshPending(item._id)"
+                    [isDeleting]="isDeletePending(item._id)"
+                    [busyMessage]="getBusyMessage(item)"
+                    [busyProgress]="getBusyProgress(item._id)"
+                    [canCancelBusyAction]="canCancelBusyOperation(item)"
+                    (editPlaylistClicked)="openInfoDialog($event)"
+                    (playlistClicked)="getPlaylist(item)"
+                    (refreshClicked)="refreshPlaylist($event)"
+                    (removeClicked)="removeClicked(item)"
+                    (cancelBusyActionClicked)="cancelBusyOperation(item)"
+                />
+            }
+        </div>
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.scss
new file mode 100644
index 0000000..ccb5152
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.scss
@@ -0,0 +1,49 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+:host app-empty-state {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.playlists-list {
+    padding: 0 6px;
+    width: 100%;
+    overflow-x: hidden;
+    box-sizing: border-box;
+}
+
+#skeleton-container {
+    padding-top: 10px;
+    width: 100%;
+
+    .skeleton-item {
+        display: flex;
+        padding: 0 20px;
+        height: 72px;
+
+        .text {
+            flex: 1;
+            align-self: center;
+            padding-left: 6px;
+            flex-direction: column;
+            display: flex;
+        }
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .favorites-icon {
+        padding-left: 0 !important;
+        display: none;
+    }
+}
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.spec.ts b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.spec.ts
new file mode 100644
index 0000000..8786af9
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.spec.ts
@@ -0,0 +1,420 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    PlaylistActions,
+    selectActiveTypeFilters,
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from 'm3u-state';
+import { of } from 'rxjs';
+import { DialogService } from 'components';
+import {
+    DatabaseService,
+    DataService,
+    PlaybackPositionService,
+    SortBy,
+    SortOrder,
+    SortService,
+} from 'services';
+import { PLAYLIST_UPDATE, PlaylistMeta } from 'shared-interfaces';
+import { RecentPlaylistsComponent } from './recent-playlists.component';
+
+function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return { promise, resolve, reject };
+}
+
+function createAbortError(): Error {
+    const error = new Error('Cancelled');
+    error.name = 'AbortError';
+    return error;
+}
+
+function createPlaylistMeta(
+    overrides: Partial<PlaylistMeta> = {}
+): PlaylistMeta {
+    return {
+        _id: 'playlist-1',
+        title: 'Xtream Playlist',
+        count: 0,
+        importDate: new Date('2026-03-28T00:00:00.000Z').toISOString(),
+        autoRefresh: false,
+        serverUrl: 'http://localhost:8080',
+        username: 'demo',
+        password: 'secret',
+        ...overrides,
+    } as PlaylistMeta;
+}
+
+describe('RecentPlaylistsComponent busy state', () => {
+    let component: RecentPlaylistsComponent;
+    let databaseService: {
+        cancelOperation: jest.Mock;
+        createOperationId: jest.Mock;
+        deletePlaylist: jest.Mock;
+        deleteXtreamPlaylistContent: jest.Mock;
+        updateXtreamPlaylistDetails: jest.Mock;
+    };
+    let dialogService: {
+        openConfirmDialog: jest.Mock;
+    };
+    let dataService: {
+        sendIpcEvent: jest.Mock;
+    };
+    let playbackPositionService: {
+        getAllPlaybackPositions: jest.Mock;
+    };
+    let router: {
+        navigate: jest.Mock;
+    };
+    let snackBar: {
+        open: jest.Mock;
+    };
+    let store: MockStore;
+
+    beforeEach(async () => {
+        databaseService = {
+            cancelOperation: jest.fn().mockResolvedValue(true),
+            createOperationId: jest.fn((prefix: string) => `${prefix}-op`),
+            deletePlaylist: jest.fn(),
+            deleteXtreamPlaylistContent: jest.fn(),
+            updateXtreamPlaylistDetails: jest.fn().mockResolvedValue(undefined),
+        };
+        dialogService = {
+            openConfirmDialog: jest.fn(),
+        };
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        playbackPositionService = {
+            getAllPlaybackPositions: jest.fn().mockResolvedValue([]),
+        };
+        router = {
+            navigate: jest.fn(),
+        };
+        snackBar = {
+            open: jest.fn(),
+        };
+        await TestBed.configureTestingModule({
+            imports: [RecentPlaylistsComponent],
+            providers: [
+                provideMockStore({
+                    selectors: [
+                        { selector: selectPlaylistsLoadingFlag, value: true },
+                        {
+                            selector: selectAllPlaylistsMeta,
+                            value: [],
+                        },
+                        {
+                            selector: selectActiveTypeFilters,
+                            value: ['xtream', 'm3u', 'stalker'],
+                        },
+                    ],
+                }),
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: DialogService,
+                    useValue: dialogService,
+                },
+                {
+                    provide: DataService,
+                    useValue: dataService,
+                },
+                {
+                    provide: PlaybackPositionService,
+                    useValue: playbackPositionService,
+                },
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: {
+                        resolvedPlaylistId: signal<string | null>(null),
+                    },
+                },
+                {
+                    provide: MatDialog,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: snackBar,
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: SortService,
+                    useValue: {
+                        getSortOptions: jest.fn(() =>
+                            of({
+                                by: SortBy.DATE_ADDED,
+                                order: SortOrder.DESC,
+                            })
+                        ),
+                        sortPlaylists: jest.fn(
+                            (playlists: PlaylistMeta[]) => playlists
+                        ),
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((key: string) => key),
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        component = TestBed.createComponent(
+            RecentPlaylistsComponent
+        ).componentInstance;
+        store = TestBed.inject(MockStore);
+        jest.spyOn(store, 'dispatch');
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        localStorage.clear();
+    });
+
+    it('tracks delete progress and clears the busy row after completion', async () => {
+        const item = createPlaylistMeta({ _id: 'playlist-delete-1' });
+        const deletion = createDeferred<boolean>();
+
+        databaseService.deletePlaylist.mockImplementation(
+            (
+                _playlistId: string,
+                options?: {
+                    onEvent?: (event: any) => void;
+                    operationId?: string;
+                }
+            ) => {
+                options?.onEvent?.({
+                    operation: 'delete-playlist',
+                    operationId: 'playlist-delete-op',
+                    status: 'progress',
+                    phase: 'deleting-content',
+                    current: 25,
+                    total: 100,
+                });
+                return deletion.promise;
+            }
+        );
+
+        const removalPromise = component.removePlaylist(item);
+
+        expect(component.isDeletePending(item._id)).toBe(true);
+        expect(component.getBusyMessage(item)).toBe(
+            'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_CONTENT'
+        );
+        expect(component.getBusyProgress(item._id)).toBe(25);
+        expect(component.canCancelBusyOperation(item)).toBe(true);
+
+        await component.cancelBusyOperation(item);
+        expect(databaseService.cancelOperation).toHaveBeenCalledWith(
+            'playlist-delete-op'
+        );
+
+        deletion.resolve(true);
+        await removalPromise;
+
+        expect(component.isDeletePending(item._id)).toBe(false);
+        expect(component.getBusyProgress(item._id)).toBeNull();
+        expect(store.dispatch).toHaveBeenCalledWith(
+            PlaylistActions.removePlaylist({ playlistId: item._id })
+        );
+        expect(snackBar.open).toHaveBeenCalledWith(
+            'HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS',
+            undefined,
+            { duration: 2000 }
+        );
+    });
+
+    it('tracks Xtream refresh progress and clears the busy row after abort', async () => {
+        const item = createPlaylistMeta({ _id: 'playlist-refresh-1' });
+        const refresh = createDeferred<{
+            success: boolean;
+            favorites: Array<{ xtreamId: number; contentType: string }>;
+            recentlyViewed: Array<{
+                xtreamId: number;
+                contentType: string;
+                viewedAt: string;
+            }>;
+            hiddenCategories: Array<{
+                xtreamId: number;
+                categoryType: string;
+            }>;
+        }>();
+        let confirmPromise: Promise<void> | undefined;
+
+        dialogService.openConfirmDialog.mockImplementation(
+            ({ onConfirm }: { onConfirm?: () => Promise<void> }) => {
+                confirmPromise = onConfirm?.();
+            }
+        );
+
+        databaseService.deleteXtreamPlaylistContent.mockImplementation(
+            (
+                _playlistId: string,
+                options?: {
+                    onEvent?: (event: any) => void;
+                    operationId?: string;
+                }
+            ) => {
+                options?.onEvent?.({
+                    operation: 'delete-xtream-content',
+                    operationId: 'xtream-refresh-op',
+                    status: 'progress',
+                    phase: 'collecting-user-data',
+                    current: 1,
+                    total: 4,
+                });
+                return refresh.promise;
+            }
+        );
+
+        component.refreshXtreamPlaylist(item);
+        await Promise.resolve();
+
+        expect(component.isRefreshPending(item._id)).toBe(true);
+        expect(component.getBusyMessage(item)).toBe(
+            'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.COLLECTING_DATA'
+        );
+        expect(component.getBusyProgress(item._id)).toBe(25);
+        expect(component.canCancelBusyOperation(item)).toBe(true);
+
+        await component.cancelBusyOperation(item);
+        expect(databaseService.cancelOperation).toHaveBeenCalledWith(
+            'xtream-refresh-op'
+        );
+
+        refresh.reject(createAbortError());
+        await confirmPromise;
+
+        expect(component.isRefreshPending(item._id)).toBe(false);
+        expect(component.getBusyProgress(item._id)).toBeNull();
+        expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('dispatches playlist meta with updateDate after Xtream refresh setup succeeds', async () => {
+        const item = createPlaylistMeta({ _id: 'playlist-refresh-success-1' });
+        let confirmPromise: Promise<void> | undefined;
+        const executionOrder: string[] = [];
+        const dateNowSpy = jest
+            .spyOn(Date, 'now')
+            .mockReturnValue(1712145600000);
+        const originalSetItem = Storage.prototype.setItem;
+        const setItemSpy = jest
+            .spyOn(Storage.prototype, 'setItem')
+            .mockImplementation(function (key: string, value: string) {
+                executionOrder.push('setItem');
+                return originalSetItem.call(this, key, value);
+            });
+
+        dialogService.openConfirmDialog.mockImplementation(
+            ({ onConfirm }: { onConfirm?: () => Promise<void> }) => {
+                confirmPromise = onConfirm?.();
+            }
+        );
+        (store.dispatch as jest.Mock).mockImplementation((action: unknown) => {
+            executionOrder.push('dispatch');
+            return action;
+        });
+        router.navigate.mockImplementation((commands: unknown[]) => {
+            executionOrder.push('navigate');
+            return Promise.resolve(Boolean(commands));
+        });
+        databaseService.deleteXtreamPlaylistContent.mockResolvedValue({
+            success: true,
+            favorites: [
+                { xtreamId: 101, contentType: 'live' },
+                { xtreamId: 202, contentType: 'movie' },
+            ],
+            recentlyViewed: [
+                {
+                    xtreamId: 303,
+                    contentType: 'series',
+                    viewedAt: '2026-04-03T11:15:00.000Z',
+                },
+            ],
+            hiddenCategories: [{ xtreamId: 404, categoryType: 'live' }],
+        });
+
+        component.refreshXtreamPlaylist(item);
+        await confirmPromise;
+
+        expect(
+            databaseService.updateXtreamPlaylistDetails
+        ).toHaveBeenCalledWith({
+            id: item._id,
+            updateDate: 1712145600000,
+        });
+        expect(store.dispatch).toHaveBeenCalledWith(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: { ...item, updateDate: 1712145600000 },
+            })
+        );
+        expect(setItemSpy).toHaveBeenCalledWith(
+            `xtream-restore-${item._id}`,
+            JSON.stringify({
+                hiddenCategories: [{ xtreamId: 404, categoryType: 'live' }],
+                favorites: [
+                    { xtreamId: 101, contentType: 'live' },
+                    { xtreamId: 202, contentType: 'movie' },
+                ],
+                recentlyViewed: [
+                    {
+                        xtreamId: 303,
+                        contentType: 'series',
+                        viewedAt: '2026-04-03T11:15:00.000Z',
+                    },
+                ],
+                playbackPositions: [],
+            })
+        );
+        expect(router.navigate).toHaveBeenCalledWith([
+            '/workspace',
+            'xtreams',
+            item._id,
+        ]);
+        expect(executionOrder).toEqual(['setItem', 'dispatch', 'navigate']);
+
+        setItemSpy.mockRestore();
+        dateNowSpy.mockRestore();
+    });
+
+    it('uses the legacy IPC refresh flow for non-Xtream playlists', () => {
+        const item = createPlaylistMeta({
+            _id: 'playlist-m3u-1',
+            serverUrl: undefined,
+            username: undefined,
+            password: undefined,
+            filePath: '/tmp/test.m3u',
+        });
+
+        component.refreshPlaylist(item);
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(PLAYLIST_UPDATE, {
+            id: item._id,
+            title: item.title,
+            filePath: item.filePath,
+        });
+    });
+});
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.ts b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.ts
new file mode 100644
index 0000000..45205bb
--- /dev/null
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/recent-playlists.component.ts
@@ -0,0 +1,739 @@
+import {
+    CdkDragDrop,
+    DragDropModule,
+    moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import {
+    Component,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatDialog } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import type { WorkspacePlaylistType } from '@iptvnator/workspace/shell/util';
+import {
+    PlaylistActions,
+    selectActiveTypeFilters,
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from 'm3u-state';
+import { BehaviorSubject, combineLatest, map } from 'rxjs';
+import { DialogService } from 'components';
+import {
+    DatabaseService,
+    DataService,
+    DbOperationEvent,
+    isDbAbortError,
+    PlaybackPositionService,
+    PlaylistRefreshService,
+    SortBy,
+    SortService,
+    XtreamPendingRestoreService,
+} from 'services';
+import {
+    PLAYLIST_UPDATE,
+    PlaylistMeta,
+    PlaylistRefreshEvent,
+} from 'shared-interfaces';
+
+import { EmptyStateComponent } from './empty-state/empty-state.component';
+import { PlaylistInfoComponent } from './playlist-info/playlist-info.component';
+import { PlaylistItemComponent } from './playlist-item/playlist-item.component';
+
+type PlaylistBusyOperation = {
+    current?: number;
+    operation: string;
+    operationId?: string;
+    phase?: string;
+    status: DbOperationEvent['status'];
+    total?: number;
+};
+
+@Component({
+    selector: 'app-recent-playlists',
+    templateUrl: './recent-playlists.component.html',
+    styleUrls: ['./recent-playlists.component.scss'],
+    imports: [
+        DragDropModule,
+        EmptyStateComponent,
+        MatInputModule,
+        PlaylistItemComponent,
+    ],
+})
+export class RecentPlaylistsComponent {
+    private readonly databaseService = inject(DatabaseService);
+    private readonly dialog = inject(MatDialog);
+    private readonly dialogService = inject(DialogService);
+    private readonly dataService = inject(DataService);
+    private readonly playbackPositionService = inject(PlaybackPositionService);
+    private readonly playlistRefreshService = inject(PlaylistRefreshService);
+    private readonly router = inject(Router);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly sortService = inject(SortService);
+    private readonly store = inject(Store);
+    private readonly translate = inject(TranslateService);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly pendingRestoreService = inject(
+        XtreamPendingRestoreService
+    );
+
+    readonly sidebarMode = input(false);
+    readonly searchQueryInput = input<string>('');
+    readonly playlistClicked = output<string>();
+    readonly addPlaylistClicked = output<WorkspacePlaylistType | undefined>();
+
+    readonly isElectron = !!window.electron;
+
+    readonly allPlaylistsLoaded = this.store.selectSignal(
+        selectPlaylistsLoadingFlag
+    );
+    readonly activePlaylistId = this.playlistContext.resolvedPlaylistId;
+
+    private readonly currentSortOptions = toSignal(
+        this.sortService.getSortOptions(),
+        { requireSync: true }
+    );
+
+    readonly isCustomSortActive = () =>
+        this.currentSortOptions().by === SortBy.CUSTOM;
+
+    readonly searchQuery = new BehaviorSubject<string>('');
+    readonly pendingDeletionIds = signal<Set<string>>(new Set());
+    readonly pendingRefreshIds = signal<Set<string>>(new Set());
+    readonly busyOperations = signal<Map<string, PlaylistBusyOperation>>(
+        new Map()
+    );
+
+    constructor() {
+        // Update searchQuery when input changes
+        effect(() => {
+            this.searchQuery.next(this.searchQueryInput());
+        });
+    }
+
+    readonly playlistsData$ = combineLatest([
+        this.store.select(selectAllPlaylistsMeta),
+        this.searchQuery,
+        this.store.select(selectActiveTypeFilters),
+        this.sortService.getSortOptions(),
+    ]).pipe(
+        map(([playlists, searchQuery, filters, sortOptions]) => {
+            const filteredPlaylists = playlists
+                .filter((item) => {
+                    const isStalkerFilter =
+                        item.macAddress && filters.includes('stalker');
+                    const isXtreamFilter =
+                        item.username &&
+                        item.password &&
+                        item.serverUrl &&
+                        filters.includes('xtream');
+                    const isM3uFilter =
+                        !item.username &&
+                        !item.password &&
+                        !item.serverUrl &&
+                        !item.macAddress &&
+                        filters.includes('m3u');
+
+                    return (
+                        (isStalkerFilter && filters.includes('stalker')) ||
+                        (isXtreamFilter && filters.includes('xtream')) ||
+                        (isM3uFilter && filters.includes('m3u'))
+                    );
+                })
+                .filter((item) =>
+                    (item.title || '')
+                        .toLowerCase()
+                        .includes(searchQuery.toLowerCase())
+                );
+
+            // Apply sorting using the SortService
+            const sortedPlaylists = this.sortService.sortPlaylists(
+                filteredPlaylists,
+                sortOptions
+            );
+
+            return {
+                playlists: sortedPlaylists,
+                totalCount: playlists.length,
+            };
+        })
+    );
+
+    readonly playlistsData = toSignal(this.playlistsData$, {
+        initialValue: {
+            playlists: [] as PlaylistMeta[],
+            totalCount: 0,
+        },
+    });
+
+    /**
+     * Opens the details dialog with the information about the provided playlist
+     * @param data selected playlist
+     */
+    openInfoDialog(data: PlaylistMeta): void {
+        this.dialog.open(PlaylistInfoComponent, {
+            data,
+        });
+    }
+
+    /**
+     * Drop event handler - applies the new sort order to the playlists array
+     * @param event drop event
+     */
+    drop(event: CdkDragDrop<PlaylistMeta[]>, playlists: PlaylistMeta[]): void {
+        moveItemInArray(playlists, event.previousIndex, event.currentIndex);
+        this.store.dispatch(
+            PlaylistActions.updatePlaylistPositions({
+                positionUpdates: playlists.map((item, index) => ({
+                    id: item._id,
+                    changes: { position: index },
+                })),
+            })
+        );
+    }
+
+    onAddPlaylist(type?: WorkspacePlaylistType) {
+        this.addPlaylistClicked.emit(type);
+    }
+
+    getPlaylist(playlistMeta: PlaylistMeta): void {
+        if (playlistMeta.serverUrl) {
+            this.router.navigate(['/workspace', 'xtreams', playlistMeta._id]);
+        } else if (playlistMeta.macAddress) {
+            this.router.navigate(['/workspace', 'stalker', playlistMeta._id]);
+        } else {
+            this.router.navigate(['/workspace', 'playlists', playlistMeta._id]);
+            this.playlistClicked.emit(playlistMeta._id);
+        }
+    }
+
+    /**
+     * Triggers on remove click
+     * @param playlistId playlist id to remove
+     */
+    removeClicked(item: PlaylistMeta): void {
+        if (this.isDeletePending(item._id) || this.isRefreshPending(item._id)) {
+            return;
+        }
+
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.TITLE'),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
+            ),
+            onConfirm: () => {
+                this.removePlaylist(item);
+            },
+        });
+    }
+
+    /**
+     * Removes the provided playlist from the database
+     * @param playlistId playlist id to remove
+     */
+    async removePlaylist(item: PlaylistMeta) {
+        if (this.isDeletePending(item._id) || this.isRefreshPending(item._id)) {
+            return;
+        }
+
+        this.setPendingDeletion(item._id, true);
+        const operationId = item.serverUrl
+            ? this.databaseService.createOperationId('playlist-delete')
+            : undefined;
+
+        try {
+            const deleted = await this.databaseService.deletePlaylist(
+                item._id,
+                operationId
+                    ? {
+                          operationId,
+                          onEvent: (event) =>
+                              this.updateBusyOperation(item._id, event),
+                      }
+                    : undefined
+            );
+            if (deleted) {
+                this.store.dispatch(
+                    PlaylistActions.removePlaylist({ playlistId: item._id })
+                );
+                this.snackBar.open(
+                    this.translate.instant(
+                        'HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS'
+                    ),
+                    undefined,
+                    {
+                        duration: 2000,
+                    }
+                );
+            }
+        } finally {
+            this.clearBusyOperation(item._id);
+            this.setPendingDeletion(item._id, false);
+        }
+    }
+
+    /**
+     * Sends an IPC event with the playlist details to the main process to trigger the refresh operation
+     * @param item playlist to update
+     */
+    refreshPlaylist(item: PlaylistMeta) {
+        if (this.isDeletePending(item._id) || this.isRefreshPending(item._id)) {
+            return;
+        }
+
+        if (item.serverUrl) {
+            // For Xtream playlists, delete and re-import
+            this.refreshXtreamPlaylist(item);
+        } else if (window.electron && (item.url || item.filePath)) {
+            void this.refreshM3uPlaylist(item);
+        } else {
+            // For M3U playlists, use existing refresh logic
+            this.dataService.sendIpcEvent(PLAYLIST_UPDATE, {
+                id: item._id,
+                title: item.title,
+                ...(item.url ? { url: item.url } : { filePath: item.filePath }),
+            });
+        }
+    }
+
+    /**
+     * Refresh Xtream playlist by deleting all data and re-importing from remote
+     * @param item Xtream playlist to refresh
+     */
+    async refreshXtreamPlaylist(item: PlaylistMeta) {
+        if (this.isDeletePending(item._id) || this.isRefreshPending(item._id)) {
+            return;
+        }
+
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant(
+                'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.TITLE'
+            ),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.MESSAGE'
+            ),
+            onConfirm: async () => {
+                if (
+                    this.isDeletePending(item._id) ||
+                    this.isRefreshPending(item._id)
+                ) {
+                    return;
+                }
+
+                this.setPendingRefresh(item._id, true);
+                const operationId =
+                    this.databaseService.createOperationId('xtream-refresh');
+
+                try {
+                    // Show immediate feedback — deletion can take several seconds
+                    // for large playlists.
+                    this.snackBar.open(
+                        this.translate.instant(
+                            'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.STARTED'
+                        ),
+                        undefined,
+                        { duration: 2000 }
+                    );
+
+                    // Delete content/categories and update the timestamp in
+                    // parallel — both operations are fully independent.
+                    const updateDate = Date.now();
+                    const [restoreState, playbackPositions] = await Promise.all(
+                        [
+                            this.databaseService.deleteXtreamPlaylistContent(
+                                item._id,
+                                {
+                                    operationId,
+                                    onEvent: (workerEvent) =>
+                                        this.updateBusyOperation(
+                                            item._id,
+                                            workerEvent
+                                        ),
+                                }
+                            ),
+                            this.playbackPositionService.getAllPlaybackPositions(
+                                item._id
+                            ),
+                            this.databaseService.updateXtreamPlaylistDetails({
+                                id: item._id,
+                                updateDate,
+                            }),
+                        ]
+                    );
+
+                    this.pendingRestoreService.set(item._id, {
+                        ...restoreState,
+                        playbackPositions,
+                    });
+
+                    // Update the timestamp in NgRx / IndexedDB
+                    this.store.dispatch(
+                        PlaylistActions.updatePlaylistMeta({
+                            playlist: { ...item, updateDate },
+                        })
+                    );
+
+                    // Navigate to the playlist to trigger re-import
+                    this.router.navigate(['/workspace', 'xtreams', item._id]);
+                } catch (error) {
+                    if (!isDbAbortError(error)) {
+                        console.error(
+                            'Error refreshing Xtream playlist:',
+                            error
+                        );
+                        this.snackBar.open(
+                            this.translate.instant(
+                                'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.ERROR'
+                            ),
+                            undefined,
+                            { duration: 3000 }
+                        );
+                    }
+                } finally {
+                    this.clearBusyOperation(item._id);
+                    this.setPendingRefresh(item._id, false);
+                }
+            },
+        });
+    }
+
+    private async refreshM3uPlaylist(item: PlaylistMeta): Promise<void> {
+        if (this.isDeletePending(item._id) || this.isRefreshPending(item._id)) {
+            return;
+        }
+
+        this.setPendingRefresh(item._id, true);
+        const operationId =
+            this.databaseService.createOperationId('playlist-refresh');
+
+        try {
+            const refreshedPlaylist =
+                await this.playlistRefreshService.refreshPlaylist(
+                    {
+                        operationId,
+                        playlistId: item._id,
+                        title: item.title,
+                        url: item.url,
+                        filePath: item.filePath,
+                    },
+                    {
+                        onEvent: (event) =>
+                            this.updateBusyOperation(
+                                item._id,
+                                this.toPlaylistRefreshBusyEvent(event)
+                            ),
+                    }
+                );
+
+            this.updateBusyOperation(item._id, {
+                operationId,
+                operation: 'playlist-refresh',
+                playlistId: item._id,
+                phase: 'saving',
+                status: 'progress',
+            });
+
+            this.store.dispatch(
+                PlaylistActions.updatePlaylist({
+                    playlist: {
+                        ...refreshedPlaylist,
+                        _id: item._id,
+                    },
+                    playlistId: item._id,
+                })
+            );
+
+            this.clearBusyOperation(item._id);
+            this.snackBar.open(
+                this.translate.instant(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_SUCCESS'
+                ),
+                null,
+                { duration: 2000 }
+            );
+        } catch (error) {
+            if (!isDbAbortError(error)) {
+                console.error('Error refreshing playlist:', error);
+                this.snackBar.open(
+                    this.getPlaylistRefreshErrorMessage(error, item),
+                    this.translate.instant('CLOSE'),
+                    { duration: 5000 }
+                );
+            }
+        } finally {
+            this.clearBusyOperation(item._id);
+            this.setPendingRefresh(item._id, false);
+        }
+    }
+
+    isDeletePending(playlistId: string): boolean {
+        return this.pendingDeletionIds().has(playlistId);
+    }
+
+    isRefreshPending(playlistId: string): boolean {
+        return this.pendingRefreshIds().has(playlistId);
+    }
+
+    getBusyMessage(item: PlaylistMeta): string {
+        const operation = this.busyOperations().get(item._id);
+        if (!operation) {
+            return '';
+        }
+
+        switch (operation.operation) {
+            case 'delete-playlist':
+                return this.translateDeletePhase(operation.phase);
+            case 'delete-xtream-content':
+                return this.translateRefreshPhase(operation.phase);
+            case 'playlist-refresh':
+                return this.translatePlaylistRefreshPhase(operation.phase);
+            default:
+                return '';
+        }
+    }
+
+    getBusyProgress(playlistId: string): number | null {
+        const operation = this.busyOperations().get(playlistId);
+        if (
+            !operation ||
+            operation.current == null ||
+            operation.total == null ||
+            operation.total <= 0
+        ) {
+            return null;
+        }
+
+        return Math.min(
+            100,
+            Math.round((operation.current / operation.total) * 100)
+        );
+    }
+
+    canCancelBusyOperation(item: PlaylistMeta): boolean {
+        const operation = this.busyOperations().get(item._id);
+        if (!operation?.operationId) {
+            return false;
+        }
+
+        if (operation.operation === 'playlist-refresh') {
+            return true;
+        }
+
+        return Boolean(item.serverUrl);
+    }
+
+    async cancelBusyOperation(item: PlaylistMeta): Promise<void> {
+        const operation = this.busyOperations().get(item._id);
+        if (!operation?.operationId) {
+            return;
+        }
+
+        if (operation.operation === 'playlist-refresh') {
+            await this.playlistRefreshService.cancelRefresh(
+                operation.operationId
+            );
+            return;
+        }
+
+        await this.databaseService.cancelOperation(operation.operationId);
+    }
+
+    private setPendingDeletion(playlistId: string, isPending: boolean): void {
+        this.pendingDeletionIds.update((current) => {
+            const next = new Set(current);
+            if (isPending) {
+                next.add(playlistId);
+            } else {
+                next.delete(playlistId);
+            }
+            return next;
+        });
+    }
+
+    private setPendingRefresh(playlistId: string, isPending: boolean): void {
+        this.pendingRefreshIds.update((current) => {
+            const next = new Set(current);
+            if (isPending) {
+                next.add(playlistId);
+            } else {
+                next.delete(playlistId);
+            }
+            return next;
+        });
+    }
+
+    private updateBusyOperation(
+        playlistId: string,
+        event: DbOperationEvent
+    ): void {
+        this.busyOperations.update((current) => {
+            const next = new Map(current);
+
+            if (
+                event.status === 'completed' ||
+                event.status === 'cancelled' ||
+                event.status === 'error'
+            ) {
+                next.delete(playlistId);
+                return next;
+            }
+
+            next.set(playlistId, {
+                operation: event.operation,
+                operationId: event.operationId,
+                phase: event.phase,
+                current: event.current,
+                total: event.total,
+                status: event.status,
+            });
+            return next;
+        });
+    }
+
+    private clearBusyOperation(playlistId: string): void {
+        this.busyOperations.update((current) => {
+            const next = new Map(current);
+            next.delete(playlistId);
+            return next;
+        });
+    }
+
+    private toPlaylistRefreshBusyEvent(
+        event: PlaylistRefreshEvent
+    ): DbOperationEvent {
+        return {
+            operationId: event.operationId,
+            operation: 'playlist-refresh',
+            playlistId: event.playlistId,
+            phase: event.phase,
+            status: event.status,
+            error: event.error,
+        };
+    }
+
+    private translateDeletePhase(phase?: string): string {
+        switch (phase) {
+            case 'deleting-favorites':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_FAVORITES'
+                );
+            case 'deleting-recently-viewed':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_RECENT'
+                );
+            case 'deleting-playback-positions':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_PROGRESS'
+                );
+            case 'deleting-downloads':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_DOWNLOADS'
+                );
+            case 'deleting-content':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_CONTENT'
+                );
+            case 'deleting-categories':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_CATEGORIES'
+                );
+            case 'deleting-playlist':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.DELETING_PLAYLIST'
+                );
+            default:
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REMOVE_DIALOG.IN_PROGRESS'
+                );
+        }
+    }
+
+    private translateRefreshPhase(phase?: string): string {
+        switch (phase) {
+            case 'collecting-user-data':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.COLLECTING_DATA'
+                );
+            case 'deleting-content':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.DELETING_CONTENT'
+                );
+            case 'deleting-categories':
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.DELETING_CATEGORIES'
+                );
+            default:
+                return this.translate.instant(
+                    'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.IN_PROGRESS'
+                );
+        }
+    }
+
+    private translatePlaylistRefreshPhase(phase?: string): string {
+        switch (phase) {
+            case 'fetching':
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.REFRESH_FETCHING',
+                    'Fetching playlist...'
+                );
+            case 'reading-file':
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.REFRESH_READING_FILE',
+                    'Reading playlist file...'
+                );
+            case 'parsing':
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.REFRESH_PARSING',
+                    'Parsing playlist...'
+                );
+            case 'saving':
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.REFRESH_SAVING',
+                    'Saving playlist...'
+                );
+            default:
+                return this.translate.instant('HOME.PLAYLISTS.REFRESH');
+        }
+    }
+
+    private getPlaylistRefreshErrorMessage(
+        error: unknown,
+        item: PlaylistMeta
+    ): string {
+        if (item.filePath) {
+            const message = String(
+                (error as { message?: string })?.message ?? error
+            );
+
+            if (/(ENOENT|no such file or directory|not found)/i.test(message)) {
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_FILE_NOT_FOUND',
+                    'Playlist refresh failed. The local file is no longer available. Check the file path or re-import the playlist.'
+                );
+            }
+
+            if (/(EACCES|EPERM|permission denied)/i.test(message)) {
+                return this.translateWithFallback(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_FILE_ACCESS_ERROR',
+                    'Playlist refresh failed. The app can no longer access the local file.'
+                );
+            }
+        }
+
+        return this.translate.instant('HOME.PLAYLISTS.PLAYLIST_UPDATE_ERROR');
+    }
+
+    private translateWithFallback(key: string, fallback: string): string {
+        const translated = this.translate.instant(key);
+        return translated === key ? fallback : translated;
+    }
+}
diff --git a/libs/playlist/shared/ui/src/test-setup.ts b/libs/playlist/shared/ui/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/playlist/shared/ui/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/playlist/shared/ui/tsconfig.json b/libs/playlist/shared/ui/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/playlist/shared/ui/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/playlist/shared/ui/tsconfig.lib.json b/libs/playlist/shared/ui/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/playlist/shared/ui/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/playlist/shared/ui/tsconfig.spec.json b/libs/playlist/shared/ui/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/playlist/shared/ui/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/playlist/shared/util/jest.config.ts b/libs/playlist/shared/util/jest.config.ts
new file mode 100644
index 0000000..264b8c1
--- /dev/null
+++ b/libs/playlist/shared/util/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'playlist-shared-util',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/playlist/shared/util',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/playlist/shared/util/project.json b/libs/playlist/shared/util/project.json
new file mode 100644
index 0000000..5c3b6a5
--- /dev/null
+++ b/libs/playlist/shared/util/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "playlist-shared-util",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/playlist/shared/util/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:playlist", "domain:m3u", "type:util"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/playlist/shared/util/jest.config.ts",
+                "tsConfig": "libs/playlist/shared/util/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/playlist/shared/util/src/index.ts b/libs/playlist/shared/util/src/index.ts
new file mode 100644
index 0000000..c52303d
--- /dev/null
+++ b/libs/playlist/shared/util/src/index.ts
@@ -0,0 +1,4 @@
+export * from './lib/playlist-player-actions';
+export * from './lib/playlist-context.facade';
+export * from './lib/playlist-file-import.service';
+export * from './lib/playlist-refresh-action.service';
diff --git a/libs/playlist/shared/util/src/lib/playlist-context.facade.spec.ts b/libs/playlist/shared/util/src/lib/playlist-context.facade.spec.ts
new file mode 100644
index 0000000..a78d291
--- /dev/null
+++ b/libs/playlist/shared/util/src/lib/playlist-context.facade.spec.ts
@@ -0,0 +1,422 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import {
+    PlaylistActions,
+    selectActivePlaylistId,
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from 'm3u-state';
+import { Subject } from 'rxjs';
+import { PlaylistMeta } from 'shared-interfaces';
+import {
+    PlaylistContextFacade,
+    PlaylistRouteContext,
+} from './playlist-context.facade';
+
+const LAST_SECTION_STORAGE_KEY = 'playlist-switcher:last-sections:v2';
+
+function createPlaylist(
+    overrides: Partial<PlaylistMeta> & { _id: string }
+): PlaylistMeta {
+    return {
+        _id: overrides._id,
+        title: overrides.title ?? overrides.filename ?? overrides._id,
+        count: overrides.count ?? 0,
+        importDate:
+            overrides.importDate ?? new Date('2026-04-05T10:00:00.000Z').toISOString(),
+        autoRefresh: overrides.autoRefresh ?? false,
+        ...overrides,
+    } as PlaylistMeta;
+}
+
+describe('PlaylistContextFacade', () => {
+    let facade: PlaylistContextFacade;
+    let routerEvents: Subject<NavigationEnd>;
+    let router: {
+        url: string;
+        events: ReturnType<Subject<NavigationEnd>['asObservable']>;
+        navigate: jest.Mock;
+    };
+    let dispatch: jest.Mock;
+    let playlistsSignal: ReturnType<typeof signal<PlaylistMeta[]>>;
+    let loadedSignal: ReturnType<typeof signal<boolean>>;
+    let activePlaylistIdSignal: ReturnType<typeof signal<string | null>>;
+    let originalElectron: unknown;
+
+    const xtreamA = createPlaylist({
+        _id: 'xtream-a',
+        password: 'secret',
+        serverUrl: 'http://127.0.0.1:3211',
+        title: 'Xtream A',
+        username: 'user-a',
+    });
+    const xtreamB = createPlaylist({
+        _id: 'xtream-b',
+        password: 'secret',
+        serverUrl: 'http://127.0.0.1:3211',
+        title: 'Xtream B',
+        username: 'user-b',
+    });
+    const stalkerA = createPlaylist({
+        _id: 'stalker-a',
+        macAddress: '00:1A:79:00:00:01',
+        portalUrl: 'http://127.0.0.1:3210/portal.php',
+        title: 'Stalker A',
+    });
+    const stalkerB = createPlaylist({
+        _id: 'stalker-b',
+        macAddress: '00:1A:79:00:00:02',
+        portalUrl: 'http://127.0.0.1:3210/portal.php',
+        title: 'Stalker B',
+    });
+    const m3uA = createPlaylist({
+        _id: 'm3u-a',
+        title: 'M3U A',
+        url: 'http://example.test/a.m3u',
+    });
+    const m3uB = createPlaylist({
+        _id: 'm3u-b',
+        title: 'M3U B',
+        url: 'http://example.test/b.m3u',
+    });
+
+    function setElectronAvailability(enabled: boolean): void {
+        Object.defineProperty(window, 'electron', {
+            configurable: true,
+            value: enabled ? {} : undefined,
+        });
+    }
+
+    function instantiateFacade(): PlaylistContextFacade {
+        facade = TestBed.inject(PlaylistContextFacade);
+        dispatch.mockClear();
+        router.navigate.mockClear();
+        return facade;
+    }
+
+    beforeEach(() => {
+        localStorage.clear();
+        originalElectron = (window as Window & { electron?: unknown }).electron;
+
+        routerEvents = new Subject<NavigationEnd>();
+        router = {
+            url: '/workspace/xtreams/xtream-a/live',
+            events: routerEvents.asObservable(),
+            navigate: jest.fn().mockResolvedValue(true),
+        };
+        dispatch = jest.fn((action: unknown) => action);
+        playlistsSignal = signal([
+            xtreamA,
+            xtreamB,
+            stalkerA,
+            stalkerB,
+            m3uA,
+            m3uB,
+        ]);
+        loadedSignal = signal(true);
+        activePlaylistIdSignal = signal<string | null>(xtreamA._id);
+        setElectronAvailability(true);
+
+        TestBed.configureTestingModule({
+            providers: [
+                PlaylistContextFacade,
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: Store,
+                    useValue: {
+                        dispatch,
+                        selectSignal: jest.fn((selector: unknown) => {
+                            if (selector === selectAllPlaylistsMeta) {
+                                return playlistsSignal;
+                            }
+                            if (selector === selectPlaylistsLoadingFlag) {
+                                return loadedSignal;
+                            }
+                            if (selector === selectActivePlaylistId) {
+                                return activePlaylistIdSignal;
+                            }
+
+                            throw new Error(
+                                `Unexpected selector: ${String(selector)}`
+                            );
+                        }),
+                    },
+                },
+            ],
+        });
+    });
+
+    afterEach(() => {
+        localStorage.clear();
+        Object.defineProperty(window, 'electron', {
+            configurable: true,
+            value: originalElectron,
+        });
+        routerEvents.complete();
+        jest.restoreAllMocks();
+    });
+
+    it('preserves same-provider Xtream sections when switching through selectPlaylist', () => {
+        router.url = '/workspace/xtreams/xtream-a/live';
+        const service = instantiateFacade();
+
+        service.selectPlaylist(xtreamB);
+
+        expect(dispatch).toHaveBeenCalledWith(
+            PlaylistActions.setActivePlaylist({ playlistId: xtreamB._id })
+        );
+        expect(router.navigate).toHaveBeenCalledWith([
+            'workspace',
+            'xtreams',
+            xtreamB._id,
+            'live',
+        ]);
+    });
+
+    it('preserves same-provider Stalker sections when resolving target commands', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('stalker', stalkerB._id, {
+                inWorkspace: true,
+                provider: 'stalker',
+                playlistId: stalkerA._id,
+                section: 'downloads',
+            })
+        ).toEqual(['workspace', 'stalker', stalkerB._id, 'downloads']);
+    });
+
+    it('preserves same-provider M3U sections when resolving target commands', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('playlists', m3uB._id, {
+                inWorkspace: true,
+                provider: 'playlists',
+                playlistId: m3uA._id,
+                section: 'groups',
+            })
+        ).toEqual(['workspace', 'playlists', m3uB._id, 'groups']);
+    });
+
+    it('maps Stalker ITV routes to Xtream live routes', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('xtreams', xtreamA._id, {
+                inWorkspace: true,
+                provider: 'stalker',
+                playlistId: stalkerA._id,
+                section: 'itv',
+            })
+        ).toEqual(['workspace', 'xtreams', xtreamA._id, 'live']);
+    });
+
+    it('maps Xtream live routes to Stalker ITV routes', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('stalker', stalkerA._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: 'live',
+            })
+        ).toEqual(['workspace', 'stalker', stalkerA._id, 'itv']);
+    });
+
+    it('maps Xtream recently-added routes to Stalker recent routes', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('stalker', stalkerA._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: 'recently-added',
+            })
+        ).toEqual(['workspace', 'stalker', stalkerA._id, 'recent']);
+    });
+
+    it('preserves recent and favorites sections across provider changes when both providers support them', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('xtreams', xtreamA._id, {
+                inWorkspace: true,
+                provider: 'playlists',
+                playlistId: m3uA._id,
+                section: 'recent',
+            })
+        ).toEqual(['workspace', 'xtreams', xtreamA._id, 'recent']);
+        expect(
+            service.resolveTargetCommands('stalker', stalkerA._id, {
+                inWorkspace: true,
+                provider: 'playlists',
+                playlistId: m3uA._id,
+                section: 'favorites',
+            })
+        ).toEqual(['workspace', 'stalker', stalkerA._id, 'favorites']);
+    });
+
+    it('falls back to M3U all when the current section has no M3U equivalent', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('playlists', m3uA._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: 'live',
+            })
+        ).toEqual(['workspace', 'playlists', m3uA._id, 'all']);
+    });
+
+    it('does not let stale M3U memory override the fallback to all for portal-only sections', () => {
+        localStorage.setItem(
+            LAST_SECTION_STORAGE_KEY,
+            JSON.stringify({
+                providers: {
+                    playlists: 'recent',
+                },
+                playlists: {
+                    [m3uA._id]: {
+                        provider: 'playlists',
+                        section: 'recent',
+                        updatedAt: 1,
+                    },
+                },
+            })
+        );
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('playlists', m3uA._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: 'live',
+            })
+        ).toEqual(['workspace', 'playlists', m3uA._id, 'all']);
+    });
+
+    it('uses playlist-specific section memory when the current route has no section', () => {
+        localStorage.setItem(
+            LAST_SECTION_STORAGE_KEY,
+            JSON.stringify({
+                providers: {},
+                playlists: {
+                    [xtreamB._id]: {
+                        provider: 'xtreams',
+                        section: 'series',
+                        updatedAt: 1,
+                    },
+                },
+            })
+        );
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('xtreams', xtreamB._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: null,
+            })
+        ).toEqual(['workspace', 'xtreams', xtreamB._id, 'series']);
+    });
+
+    it('uses provider-level section memory when no route section or playlist memory exists', () => {
+        localStorage.setItem(
+            LAST_SECTION_STORAGE_KEY,
+            JSON.stringify({
+                providers: {
+                    stalker: 'search',
+                },
+                playlists: {},
+            })
+        );
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('stalker', stalkerB._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: null,
+            })
+        ).toEqual(['workspace', 'stalker', stalkerB._id, 'search']);
+    });
+
+    it('omits Xtream sections outside Electron where section navigation is unsupported', () => {
+        setElectronAvailability(false);
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('xtreams', xtreamB._id, {
+                inWorkspace: true,
+                provider: 'xtreams',
+                playlistId: xtreamA._id,
+                section: 'live',
+            })
+        ).toEqual(['workspace', 'xtreams', xtreamB._id]);
+    });
+
+    it('returns null when switching from the workspace root before a provider route is selected', () => {
+        const service = instantiateFacade();
+
+        expect(
+            service.resolveTargetCommands('playlists', m3uA._id, {
+                inWorkspace: true,
+                provider: null,
+                playlistId: null,
+                section: null,
+            })
+        ).toBeNull();
+    });
+
+    it('syncs section memory from router navigation events', () => {
+        router.url = '/workspace/playlists/m3u-a/favorites';
+        const service = instantiateFacade();
+
+        router.url = '/workspace/xtreams/xtream-a/recently-added';
+        routerEvents.next(
+            new NavigationEnd(
+                1,
+                '/workspace/xtreams/xtream-a/recently-added',
+                '/workspace/xtreams/xtream-a/recently-added'
+            )
+        );
+
+        expect(service.routeContext()).toEqual<PlaylistRouteContext>({
+            inWorkspace: true,
+            provider: 'xtreams',
+            playlistId: xtreamA._id,
+            section: 'recently-added',
+        });
+        expect(JSON.parse(localStorage.getItem(LAST_SECTION_STORAGE_KEY) ?? '{}'))
+            .toEqual({
+                playlists: {
+                    [m3uA._id]: {
+                        provider: 'playlists',
+                        section: 'favorites',
+                        updatedAt: expect.any(Number),
+                    },
+                    [xtreamA._id]: {
+                        provider: 'xtreams',
+                        section: 'recently-added',
+                        updatedAt: expect.any(Number),
+                    },
+                },
+                providers: {
+                    playlists: 'favorites',
+                    xtreams: 'recently-added',
+                },
+            });
+    });
+});
diff --git a/libs/playlist/shared/util/src/lib/playlist-context.facade.ts b/libs/playlist/shared/util/src/lib/playlist-context.facade.ts
new file mode 100644
index 0000000..99ee469
--- /dev/null
+++ b/libs/playlist/shared/util/src/lib/playlist-context.facade.ts
@@ -0,0 +1,566 @@
+import {
+    computed,
+    DestroyRef,
+    effect,
+    inject,
+    Injectable,
+    signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import {
+    PlaylistActions,
+    selectActivePlaylistId,
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from 'm3u-state';
+import { filter } from 'rxjs';
+import { PlaylistMeta } from 'shared-interfaces';
+import {
+    PortalProvider,
+    PortalRailSection,
+} from '@iptvnator/portal/shared/util';
+
+export interface PlaylistRouteContext {
+    inWorkspace: boolean;
+    provider: PortalProvider | null;
+    playlistId: string | null;
+    section: PortalRailSection | null;
+}
+
+type PlaylistSectionMemory = {
+    providers: Partial<Record<PortalProvider, string>>;
+    playlists: Record<
+        string,
+        {
+            provider: PortalProvider;
+            section: string;
+            updatedAt: number;
+        }
+    >;
+};
+
+const LAST_SECTION_STORAGE_KEY = 'playlist-switcher:last-sections:v2';
+const LEGACY_LAST_SECTION_STORAGE_KEY = 'playlist-switcher:last-sections';
+const LAST_ACTIVE_PLAYLIST_STORAGE_KEY =
+    'playlist-switcher:last-active-playlist-id';
+const XTREAM_SECTIONS = [
+    'live',
+    'vod',
+    'series',
+    'favorites',
+    'recent',
+    'search',
+    'recently-added',
+    'downloads',
+] as const;
+const STALKER_SECTIONS = [
+    'itv',
+    'vod',
+    'series',
+    'favorites',
+    'recent',
+    'search',
+    'downloads',
+] as const;
+const M3U_SECTIONS = ['all', 'groups', 'favorites', 'recent'] as const;
+
+@Injectable({ providedIn: 'root' })
+export class PlaylistContextFacade {
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly router = inject(Router);
+    private readonly store = inject(Store);
+
+    readonly playlists = this.store.selectSignal(selectAllPlaylistsMeta);
+    readonly allPlaylistsLoaded = this.store.selectSignal(
+        selectPlaylistsLoadingFlag
+    );
+    readonly activePlaylistId = this.store.selectSignal(selectActivePlaylistId);
+
+    readonly currentUrl = signal(this.router.url);
+    readonly routeContext = computed(() =>
+        this.getRouteContext(this.currentUrl())
+    );
+    readonly routeProvider = computed(() => this.routeContext().provider);
+    readonly routePlaylistId = computed(() => this.routeContext().playlistId);
+    readonly routeSection = computed(() => this.routeContext().section);
+    readonly resolvedPlaylistId = computed(() => {
+        const routePlaylistId = this.routePlaylistId();
+        if (routePlaylistId) {
+            return routePlaylistId;
+        }
+
+        const activePlaylistId = this.activePlaylistId();
+        return activePlaylistId || null;
+    });
+    readonly activePlaylist = computed(() => {
+        const playlistId = this.resolvedPlaylistId();
+        if (!playlistId) {
+            return null;
+        }
+
+        return (
+            this.playlists().find((playlist) => playlist._id === playlistId) ??
+            null
+        );
+    });
+    readonly activeProvider = computed(() => {
+        const playlist = this.activePlaylist();
+        return playlist ? this.getProviderForPlaylist(playlist) : null;
+    });
+
+    constructor() {
+        this.clearLegacySectionMemory();
+        this.syncFromUrl(this.router.url);
+
+        effect(() => {
+            const allPlaylistsLoaded = this.allPlaylistsLoaded();
+            const playlistIds = this.playlists().map(
+                (playlist) => playlist._id
+            );
+            const playlistIdSet = new Set(playlistIds);
+            const selectedId = this.activePlaylistId() || null;
+            const routeId = this.routePlaylistId();
+            const storedId = this.readPersistedActivePlaylistId();
+
+            if (!allPlaylistsLoaded) {
+                if (routeId) {
+                    this.writePersistedActivePlaylistId(routeId);
+                    return;
+                }
+
+                if (selectedId) {
+                    this.writePersistedActivePlaylistId(selectedId);
+                }
+
+                return;
+            }
+
+            this.removeDeletedPlaylistsFromSectionMemory(playlistIds);
+
+            if (routeId && playlistIdSet.has(routeId)) {
+                this.writePersistedActivePlaylistId(routeId);
+                return;
+            }
+
+            if (selectedId && playlistIdSet.has(selectedId)) {
+                this.writePersistedActivePlaylistId(selectedId);
+                return;
+            }
+
+            if (
+                !routeId &&
+                !selectedId &&
+                storedId &&
+                playlistIdSet.has(storedId)
+            ) {
+                this.activatePlaylist(storedId);
+                return;
+            }
+
+            if (storedId && !playlistIdSet.has(storedId)) {
+                this.clearPersistedActivePlaylistId();
+            }
+        });
+
+        this.router.events
+            .pipe(
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe((event) => {
+                this.syncFromUrl(event.urlAfterRedirects);
+            });
+    }
+
+    syncFromUrl(url = this.router.url): PlaylistRouteContext {
+        this.currentUrl.set(url);
+        const routeContext = this.routeContext();
+
+        this.rememberSection(routeContext);
+
+        if (routeContext.playlistId) {
+            this.activatePlaylist(routeContext.playlistId);
+        }
+
+        return routeContext;
+    }
+
+    activatePlaylist(playlistId: string): void {
+        if (!playlistId || this.activePlaylistId() === playlistId) {
+            return;
+        }
+
+        this.store.dispatch(PlaylistActions.setActivePlaylist({ playlistId }));
+    }
+
+    selectPlaylist(playlist: PlaylistMeta): void {
+        const routeContext = this.routeContext();
+        const provider = this.getProviderForPlaylist(playlist);
+
+        this.activatePlaylist(playlist._id);
+
+        const targetCommands = this.resolveTargetCommands(
+            provider,
+            playlist._id,
+            routeContext
+        );
+
+        if (targetCommands) {
+            void this.router.navigate(targetCommands);
+        }
+    }
+
+    resolveTargetCommands(
+        provider: PortalProvider,
+        playlistId: string,
+        routeContext = this.routeContext()
+    ): string[] | null {
+        const prefix = routeContext.inWorkspace ? ['workspace'] : [];
+
+        if (routeContext.inWorkspace && !routeContext.provider) {
+            return null;
+        }
+
+        if (provider === 'playlists') {
+            const section = this.resolveTargetSection(
+                provider,
+                routeContext.section,
+                playlistId
+            );
+            return [...prefix, 'playlists', playlistId, section];
+        }
+
+        if (!this.supportsSectionNavigation(provider)) {
+            return [...prefix, provider, playlistId];
+        }
+
+        const section = this.resolveTargetSection(
+            provider,
+            routeContext.section,
+            playlistId
+        );
+        return [...prefix, provider, playlistId, section];
+    }
+
+    getProviderForPlaylist(playlist: PlaylistMeta): PortalProvider {
+        if (playlist.serverUrl) {
+            return 'xtreams';
+        }
+        if (playlist.macAddress) {
+            return 'stalker';
+        }
+        return 'playlists';
+    }
+
+    private isWorkspaceRoute(url: string): boolean {
+        return /^\/workspace(?:\/|$)/.test(url);
+    }
+
+    private getRouteContext(url: string): PlaylistRouteContext {
+        const match = url.match(
+            /^\/(?:workspace\/)?(playlists|xtreams|stalker)\/([^/?]+)(?:\/([^/?]+))?/
+        );
+
+        return {
+            inWorkspace: this.isWorkspaceRoute(url),
+            provider: (match?.[1] as PortalProvider | undefined) ?? null,
+            playlistId: match?.[2] ?? null,
+            section: (match?.[3] as PortalRailSection | undefined) ?? null,
+        };
+    }
+
+    private rememberSection(routeContext: PlaylistRouteContext): void {
+        if (!routeContext.provider || !routeContext.section) {
+            return;
+        }
+
+        const normalized = this.normalizeSectionForProvider(
+            routeContext.section,
+            routeContext.provider
+        );
+        if (!normalized) {
+            return;
+        }
+
+        const memory = this.readSectionMemory();
+        memory.providers[routeContext.provider] = normalized;
+        if (routeContext.playlistId) {
+            memory.playlists[routeContext.playlistId] = {
+                provider: routeContext.provider,
+                section: normalized,
+                updatedAt: Date.now(),
+            };
+        }
+        this.writeSectionMemory(memory);
+    }
+
+    private resolveTargetSection(
+        provider: PortalProvider,
+        currentSection: PortalRailSection | null,
+        targetPlaylistId: string
+    ): string {
+        const fromCurrent = this.normalizeSectionForProvider(
+            currentSection,
+            provider
+        );
+        if (fromCurrent) {
+            return fromCurrent;
+        }
+
+        if (provider === 'playlists' && currentSection) {
+            return 'all';
+        }
+
+        const memory = this.readSectionMemory();
+        const playlistMemory = memory.playlists[targetPlaylistId];
+        if (playlistMemory?.provider === provider) {
+            const normalizedPlaylistSection = this.normalizeSectionForProvider(
+                playlistMemory.section,
+                provider
+            );
+            if (normalizedPlaylistSection) {
+                return normalizedPlaylistSection;
+            }
+        }
+
+        const providerMemory = memory.providers[provider];
+        const normalizedProviderSection = this.normalizeSectionForProvider(
+            providerMemory,
+            provider
+        );
+        if (normalizedProviderSection) {
+            return normalizedProviderSection;
+        }
+
+        if (provider === 'playlists') {
+            return 'all';
+        }
+
+        return 'vod';
+    }
+
+    private supportsSectionNavigation(provider: PortalProvider): boolean {
+        if (provider === 'xtreams') {
+            return Boolean(window.electron);
+        }
+
+        return true;
+    }
+
+    private normalizeSectionForProvider(
+        section: string | null | undefined,
+        provider: PortalProvider
+    ): string | null {
+        if (!section) {
+            return null;
+        }
+
+        if (provider === 'xtreams') {
+            if (section === 'itv') {
+                return 'live';
+            }
+
+            return XTREAM_SECTIONS.includes(
+                section as (typeof XTREAM_SECTIONS)[number]
+            )
+                ? section
+                : null;
+        }
+
+        if (provider === 'playlists') {
+            return M3U_SECTIONS.includes(
+                section as (typeof M3U_SECTIONS)[number]
+            )
+                ? section
+                : null;
+        }
+
+        if (section === 'live') {
+            return 'itv';
+        }
+        if (section === 'recently-added') {
+            return 'recent';
+        }
+
+        return STALKER_SECTIONS.includes(
+            section as (typeof STALKER_SECTIONS)[number]
+        )
+            ? section
+            : null;
+    }
+
+    private readSectionMemory(): PlaylistSectionMemory {
+        const empty: PlaylistSectionMemory = { providers: {}, playlists: {} };
+
+        try {
+            this.clearLegacySectionMemory();
+            const raw = localStorage.getItem(LAST_SECTION_STORAGE_KEY);
+            if (!raw) {
+                return empty;
+            }
+            const parsed = JSON.parse(raw);
+            if (typeof parsed !== 'object' || parsed === null) {
+                return empty;
+            }
+
+            const providers: Partial<Record<PortalProvider, string>> = {};
+            const playlists: PlaylistSectionMemory['playlists'] = {};
+
+            const parsedProviders = (parsed as Record<string, unknown>)[
+                'providers'
+            ];
+            if (typeof parsedProviders === 'object' && parsedProviders !== null) {
+                const candidate = parsedProviders as Record<string, unknown>;
+                if (typeof candidate['playlists'] === 'string') {
+                    providers.playlists = candidate['playlists'];
+                }
+                if (typeof candidate['xtreams'] === 'string') {
+                    providers.xtreams = candidate['xtreams'];
+                }
+                if (typeof candidate['stalker'] === 'string') {
+                    providers.stalker = candidate['stalker'];
+                }
+            }
+
+            const parsedPlaylists = (parsed as Record<string, unknown>)[
+                'playlists'
+            ];
+            if (
+                typeof parsedPlaylists === 'object' &&
+                parsedPlaylists !== null
+            ) {
+                Object.entries(
+                    parsedPlaylists as Record<string, unknown>
+                ).forEach(([playlistId, value]) => {
+                    if (!value || typeof value !== 'object' || !playlistId) {
+                        return;
+                    }
+
+                    const row = value as Record<string, unknown>;
+                    const provider = row['provider'];
+                    const section = row['section'];
+                    const updatedAt = row['updatedAt'];
+                    const isProviderValid =
+                        provider === 'playlists' ||
+                        provider === 'xtreams' ||
+                        provider === 'stalker';
+                    if (!isProviderValid || typeof section !== 'string') {
+                        return;
+                    }
+
+                    playlists[playlistId] = {
+                        provider,
+                        section,
+                        updatedAt:
+                            typeof updatedAt === 'number'
+                                ? updatedAt
+                                : Date.now(),
+                    };
+                });
+            }
+
+            return { providers, playlists };
+        } catch {
+            return empty;
+        }
+    }
+
+    private writeSectionMemory(memory: PlaylistSectionMemory): void {
+        try {
+            localStorage.setItem(
+                LAST_SECTION_STORAGE_KEY,
+                JSON.stringify(memory)
+            );
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+
+    private removeDeletedPlaylistsFromSectionMemory(
+        existingIds: string[]
+    ): void {
+        const existingIdSet = new Set(existingIds);
+        const memory = this.readSectionMemory();
+        const currentEntries = Object.entries(memory.playlists);
+        if (currentEntries.length === 0) {
+            return;
+        }
+
+        const nextPlaylists: PlaylistSectionMemory['playlists'] = {};
+        let hasChanges = false;
+
+        currentEntries.forEach(([playlistId, entry]) => {
+            if (!existingIdSet.has(playlistId)) {
+                hasChanges = true;
+                return;
+            }
+
+            const normalizedSection = this.normalizeSectionForProvider(
+                entry.section,
+                entry.provider
+            );
+            if (!normalizedSection) {
+                hasChanges = true;
+                return;
+            }
+
+            nextPlaylists[playlistId] = {
+                ...entry,
+                section: normalizedSection,
+            };
+        });
+
+        if (!hasChanges) {
+            return;
+        }
+
+        this.writeSectionMemory({
+            providers: memory.providers,
+            playlists: nextPlaylists,
+        });
+    }
+
+    private readPersistedActivePlaylistId(): string | null {
+        try {
+            const value = localStorage.getItem(
+                LAST_ACTIVE_PLAYLIST_STORAGE_KEY
+            );
+            return value && value.trim().length > 0 ? value : null;
+        } catch {
+            return null;
+        }
+    }
+
+    private writePersistedActivePlaylistId(playlistId: string): void {
+        try {
+            localStorage.setItem(LAST_ACTIVE_PLAYLIST_STORAGE_KEY, playlistId);
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+
+    private clearPersistedActivePlaylistId(): void {
+        try {
+            localStorage.removeItem(LAST_ACTIVE_PLAYLIST_STORAGE_KEY);
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+
+    private clearLegacySectionMemory(): void {
+        try {
+            if (!localStorage.getItem(LEGACY_LAST_SECTION_STORAGE_KEY)) {
+                return;
+            }
+
+            localStorage.removeItem(LEGACY_LAST_SECTION_STORAGE_KEY);
+        } catch {
+            // Ignore storage read/write failures.
+        }
+    }
+}
diff --git a/libs/playlist/shared/util/src/lib/playlist-file-import.service.ts b/libs/playlist/shared/util/src/lib/playlist-file-import.service.ts
new file mode 100644
index 0000000..46e07eb
--- /dev/null
+++ b/libs/playlist/shared/util/src/lib/playlist-file-import.service.ts
@@ -0,0 +1,56 @@
+import { Injectable, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { PlaylistActions } from 'm3u-state';
+
+const M3U_EXTENSIONS = ['.m3u', '.m3u8'];
+
+export type PlaylistFileImportResult =
+    | { ok: true; title: string }
+    | { ok: false; reason: 'unsupported' | 'empty' | 'read-error' };
+
+@Injectable({ providedIn: 'root' })
+export class PlaylistFileImportService {
+    private readonly store = inject(Store);
+
+    isSupportedFile(file: File): boolean {
+        const lower = file.name.toLowerCase();
+        return M3U_EXTENSIONS.some((ext) => lower.endsWith(ext));
+    }
+
+    async importFile(file: File): Promise<PlaylistFileImportResult> {
+        if (!this.isSupportedFile(file)) {
+            return { ok: false, reason: 'unsupported' };
+        }
+
+        let playlist: string;
+        try {
+            playlist = await file.text();
+        } catch {
+            return { ok: false, reason: 'read-error' };
+        }
+
+        if (!playlist.trim()) {
+            return { ok: false, reason: 'empty' };
+        }
+
+        const title = this.normalizeTitle(file.name);
+        this.store.dispatch(
+            PlaylistActions.parsePlaylist({
+                uploadType: 'FILE',
+                playlist,
+                title,
+                path: (file as File & { path?: string }).path,
+            })
+        );
+
+        return { ok: true, title };
+    }
+
+    private normalizeTitle(filename: string): string {
+        const trimmed = filename.trim();
+        if (!trimmed) {
+            return filename;
+        }
+        return trimmed.replace(/\.(m3u8?|pls|txt)$/i, '') || trimmed;
+    }
+}
diff --git a/libs/playlist/shared/util/src/lib/playlist-player-actions.ts b/libs/playlist/shared/util/src/lib/playlist-player-actions.ts
new file mode 100644
index 0000000..2e52f33
--- /dev/null
+++ b/libs/playlist/shared/util/src/lib/playlist-player-actions.ts
@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+
+export interface PlaylistPlayerActions {
+    openSettings(): void;
+}
+
+export const PLAYLIST_PLAYER_ACTIONS =
+    new InjectionToken<PlaylistPlayerActions>('PLAYLIST_PLAYER_ACTIONS');
diff --git a/libs/playlist/shared/util/src/lib/playlist-refresh-action.service.spec.ts b/libs/playlist/shared/util/src/lib/playlist-refresh-action.service.spec.ts
new file mode 100644
index 0000000..2937478
--- /dev/null
+++ b/libs/playlist/shared/util/src/lib/playlist-refresh-action.service.spec.ts
@@ -0,0 +1,272 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { DialogService } from 'components';
+import {
+    DatabaseService,
+    PlaybackPositionService,
+    PlaylistRefreshService,
+} from 'services';
+import { ChannelActions, PlaylistActions } from 'm3u-state';
+import { Playlist, PlaylistMeta } from 'shared-interfaces';
+import { PlaylistContextFacade } from './playlist-context.facade';
+import { PlaylistRefreshActionService } from './playlist-refresh-action.service';
+
+function createPlaylistMeta(
+    overrides: Partial<PlaylistMeta> = {}
+): PlaylistMeta {
+    return {
+        _id: 'playlist-1',
+        title: 'Xtream Playlist',
+        serverUrl: 'http://localhost:8080',
+        username: 'demo',
+        password: 'secret',
+        ...overrides,
+    } as PlaylistMeta;
+}
+
+describe('PlaylistRefreshActionService', () => {
+    let service: PlaylistRefreshActionService;
+    let databaseService: {
+        createOperationId: jest.Mock;
+        deleteXtreamPlaylistContent: jest.Mock;
+        updateXtreamPlaylistDetails: jest.Mock;
+    };
+    let dialogService: {
+        openConfirmDialog: jest.Mock;
+    };
+    let router: {
+        navigate: jest.Mock;
+    };
+    let snackBar: {
+        open: jest.Mock;
+    };
+    let store: {
+        dispatch: jest.Mock;
+    };
+    let playlistRefreshService: {
+        refreshPlaylist: jest.Mock;
+    };
+    let playbackPositionService: {
+        getAllPlaybackPositions: jest.Mock;
+    };
+    let routeProvider: ReturnType<
+        typeof signal<'playlists' | 'xtreams' | null>
+    >;
+    let resolvedPlaylistId: ReturnType<typeof signal<string | null>>;
+
+    beforeEach(() => {
+        localStorage.clear();
+
+        databaseService = {
+            createOperationId: jest.fn((prefix: string) => `${prefix}-op`),
+            deleteXtreamPlaylistContent: jest.fn().mockResolvedValue({
+                success: true,
+                favorites: [
+                    {
+                        xtreamId: 101,
+                        contentType: 'live',
+                    },
+                    {
+                        xtreamId: 202,
+                        contentType: 'movie',
+                    },
+                ],
+                recentlyViewed: [
+                    {
+                        xtreamId: 303,
+                        contentType: 'series',
+                        viewedAt: '2026-04-04T08:00:00.000Z',
+                    },
+                ],
+                hiddenCategories: [{ xtreamId: 404, categoryType: 'live' }],
+            }),
+            updateXtreamPlaylistDetails: jest.fn().mockResolvedValue(true),
+        };
+        dialogService = {
+            openConfirmDialog: jest.fn(),
+        };
+        router = {
+            navigate: jest.fn().mockResolvedValue(true),
+        };
+        snackBar = {
+            open: jest.fn(),
+        };
+        store = {
+            dispatch: jest.fn(),
+        };
+        playlistRefreshService = {
+            refreshPlaylist: jest.fn(),
+        };
+        playbackPositionService = {
+            getAllPlaybackPositions: jest.fn().mockResolvedValue([]),
+        };
+        routeProvider = signal<'playlists' | 'xtreams' | null>('xtreams');
+        resolvedPlaylistId = signal<string | null>(null);
+
+        TestBed.configureTestingModule({
+            providers: [
+                PlaylistRefreshActionService,
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: Store,
+                    useValue: store,
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((key: string) => key),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: snackBar,
+                },
+                {
+                    provide: DialogService,
+                    useValue: dialogService,
+                },
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: PlaylistRefreshService,
+                    useValue: playlistRefreshService,
+                },
+                {
+                    provide: PlaybackPositionService,
+                    useValue: playbackPositionService,
+                },
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: {
+                        routeProvider,
+                        resolvedPlaylistId,
+                    },
+                },
+            ],
+        });
+
+        service = TestBed.inject(PlaylistRefreshActionService);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        localStorage.clear();
+    });
+
+    it('stores Xtream restore data before updating playlist meta and navigating', async () => {
+        const item = createPlaylistMeta();
+        const executionOrder: string[] = [];
+        let confirmPromise: Promise<void> | undefined;
+        const dateNowSpy = jest
+            .spyOn(Date, 'now')
+            .mockReturnValue(1712217600000);
+        const originalSetItem = Storage.prototype.setItem;
+        const setItemSpy = jest
+            .spyOn(Storage.prototype, 'setItem')
+            .mockImplementation(function (key: string, value: string) {
+                executionOrder.push('setItem');
+                return originalSetItem.call(this, key, value);
+            });
+
+        store.dispatch.mockImplementation((action: unknown) => {
+            executionOrder.push('dispatch');
+            return action;
+        });
+        router.navigate.mockImplementation((commands: unknown[]) => {
+            executionOrder.push('navigate');
+            return Promise.resolve(Boolean(commands));
+        });
+        dialogService.openConfirmDialog.mockImplementation(
+            ({ onConfirm }: { onConfirm?: () => Promise<void> }) => {
+                confirmPromise = onConfirm?.();
+            }
+        );
+
+        service.refresh(item);
+        await confirmPromise;
+
+        expect(setItemSpy).toHaveBeenCalledWith(
+            `xtream-restore-${item._id}`,
+            JSON.stringify({
+                hiddenCategories: [{ xtreamId: 404, categoryType: 'live' }],
+                favorites: [
+                    {
+                        xtreamId: 101,
+                        contentType: 'live',
+                    },
+                    {
+                        xtreamId: 202,
+                        contentType: 'movie',
+                    },
+                ],
+                recentlyViewed: [
+                    {
+                        xtreamId: 303,
+                        contentType: 'series',
+                        viewedAt: '2026-04-04T08:00:00.000Z',
+                    },
+                ],
+                playbackPositions: [],
+            })
+        );
+        expect(store.dispatch).toHaveBeenCalledWith(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: { ...item, updateDate: 1712217600000 },
+            })
+        );
+        expect(router.navigate).toHaveBeenCalledWith([
+            '/workspace',
+            'xtreams',
+            item._id,
+        ]);
+        expect(executionOrder).toEqual(['setItem', 'dispatch', 'navigate']);
+
+        setItemSpy.mockRestore();
+        dateNowSpy.mockRestore();
+    });
+
+    it('marks the active M3U route as loading before refreshing and clears loading after the update action', async () => {
+        const item = createPlaylistMeta({
+            _id: 'playlist-1',
+            filePath: '/tmp/playlist.m3u',
+            serverUrl: undefined,
+            url: 'https://example.com/playlist.m3u',
+        });
+        const refreshedPlaylist = {
+            _id: item._id,
+            playlist: {
+                items: [],
+            },
+        } as Playlist;
+        routeProvider.set('playlists');
+        resolvedPlaylistId.set(item._id);
+        playlistRefreshService.refreshPlaylist.mockResolvedValue(
+            refreshedPlaylist
+        );
+
+        service.refresh(item);
+        await Promise.resolve();
+        await Promise.resolve();
+
+        expect(store.dispatch).toHaveBeenNthCalledWith(
+            1,
+            ChannelActions.setChannelsLoading({ loading: true })
+        );
+        expect(store.dispatch).toHaveBeenNthCalledWith(
+            2,
+            PlaylistActions.updatePlaylist({
+                playlist: refreshedPlaylist,
+                playlistId: item._id,
+            })
+        );
+    });
+});
diff --git a/libs/playlist/shared/util/src/lib/playlist-refresh-action.service.ts b/libs/playlist/shared/util/src/lib/playlist-refresh-action.service.ts
new file mode 100644
index 0000000..1ec7d84
--- /dev/null
+++ b/libs/playlist/shared/util/src/lib/playlist-refresh-action.service.ts
@@ -0,0 +1,210 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DialogService } from 'components';
+import {
+    DatabaseService,
+    isDbAbortError,
+    PlaybackPositionService,
+    PlaylistRefreshService,
+    XtreamPendingRestoreService,
+} from 'services';
+import { ChannelActions, PlaylistActions } from 'm3u-state';
+import { PlaylistMeta } from 'shared-interfaces';
+import { PlaylistContextFacade } from './playlist-context.facade';
+
+@Injectable({ providedIn: 'root' })
+export class PlaylistRefreshActionService {
+    private readonly router = inject(Router);
+    private readonly store = inject(Store);
+    private readonly translate = inject(TranslateService);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly dialogService = inject(DialogService);
+    private readonly databaseService = inject(DatabaseService);
+    private readonly playbackPositionService = inject(PlaybackPositionService);
+    private readonly playlistRefreshService = inject(PlaylistRefreshService);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly pendingRestoreService = inject(
+        XtreamPendingRestoreService
+    );
+
+    readonly isRefreshing = signal(false);
+
+    canRefresh(playlist: PlaylistMeta | null): boolean {
+        if (!playlist || !window.electron) {
+            return false;
+        }
+
+        return Boolean(playlist.serverUrl || playlist.url || playlist.filePath);
+    }
+
+    refresh(playlist: PlaylistMeta): void {
+        if (this.isRefreshing()) {
+            return;
+        }
+
+        if (playlist.serverUrl) {
+            this.refreshXtream(playlist);
+        } else if (playlist.url || playlist.filePath) {
+            void this.refreshM3u(playlist);
+        }
+    }
+
+    private refreshXtream(item: PlaylistMeta): void {
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant(
+                'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.TITLE'
+            ),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.MESSAGE'
+            ),
+            onConfirm: async () => {
+                if (this.isRefreshing()) {
+                    return;
+                }
+
+                this.isRefreshing.set(true);
+                const operationId =
+                    this.databaseService.createOperationId('xtream-refresh');
+
+                try {
+                    this.snackBar.open(
+                        this.translate.instant(
+                            'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.STARTED'
+                        ),
+                        undefined,
+                        { duration: 2000 }
+                    );
+
+                    const updateDate = Date.now();
+                    const [restoreState, playbackPositions] = await Promise.all(
+                        [
+                            this.databaseService.deleteXtreamPlaylistContent(
+                                item._id,
+                                { operationId }
+                            ),
+                            this.playbackPositionService.getAllPlaybackPositions(
+                                item._id
+                            ),
+                            this.databaseService.updateXtreamPlaylistDetails({
+                                id: item._id,
+                                updateDate,
+                            }),
+                        ]
+                    );
+
+                    this.pendingRestoreService.set(item._id, {
+                        ...restoreState,
+                        playbackPositions,
+                    });
+
+                    this.store.dispatch(
+                        PlaylistActions.updatePlaylistMeta({
+                            playlist: { ...item, updateDate },
+                        })
+                    );
+
+                    await this.router.navigate([
+                        '/workspace',
+                        'xtreams',
+                        item._id,
+                    ]);
+                } catch (error) {
+                    if (!isDbAbortError(error)) {
+                        console.error(
+                            'Error refreshing Xtream playlist:',
+                            error
+                        );
+                        this.snackBar.open(
+                            this.translate.instant(
+                                'HOME.PLAYLISTS.REFRESH_XTREAM_DIALOG.ERROR'
+                            ),
+                            undefined,
+                            { duration: 3000 }
+                        );
+                    }
+                } finally {
+                    this.isRefreshing.set(false);
+                }
+            },
+        });
+    }
+
+    private async refreshM3u(item: PlaylistMeta): Promise<void> {
+        const isActiveM3uRoute =
+            this.playlistContext.routeProvider() === 'playlists' &&
+            this.playlistContext.resolvedPlaylistId() === item._id;
+
+        this.isRefreshing.set(true);
+        if (isActiveM3uRoute) {
+            this.store.dispatch(
+                ChannelActions.setChannelsLoading({ loading: true })
+            );
+        }
+
+        try {
+            const refreshedPlaylist =
+                await this.playlistRefreshService.refreshPlaylist({
+                    operationId:
+                        this.databaseService.createOperationId(
+                            'playlist-refresh'
+                        ),
+                    playlistId: item._id,
+                    title: item.title,
+                    url: item.url,
+                    filePath: item.filePath,
+                });
+
+            this.store.dispatch(
+                PlaylistActions.updatePlaylist({
+                    playlist: {
+                        ...refreshedPlaylist,
+                        _id: item._id,
+                    },
+                    playlistId: item._id,
+                })
+            );
+
+            this.snackBar.open(
+                this.translate.instant(
+                    'HOME.PLAYLISTS.PLAYLIST_UPDATE_SUCCESS'
+                ),
+                undefined,
+                { duration: 2000 }
+            );
+        } catch (error) {
+            if (!isDbAbortError(error)) {
+                console.error('Error refreshing playlist:', error);
+                this.snackBar.open(
+                    this.getRefreshErrorMessage(error, item),
+                    this.translate.instant('CLOSE'),
+                    { duration: 5000 }
+                );
+            }
+
+            if (isActiveM3uRoute) {
+                this.store.dispatch(
+                    ChannelActions.setChannelsLoading({ loading: false })
+                );
+            }
+        } finally {
+            this.isRefreshing.set(false);
+        }
+    }
+
+    private getRefreshErrorMessage(error: unknown, item: PlaylistMeta): string {
+        if (
+            error instanceof Error &&
+            error.message?.includes('ENOENT') &&
+            item.filePath
+        ) {
+            return this.translate.instant(
+                'HOME.PLAYLISTS.PLAYLIST_UPDATE_FILE_NOT_FOUND'
+            );
+        }
+
+        return this.translate.instant('HOME.PLAYLISTS.PLAYLIST_UPDATE_ERROR');
+    }
+}
diff --git a/libs/playlist/shared/util/src/test-setup.ts b/libs/playlist/shared/util/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/playlist/shared/util/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/playlist/shared/util/tsconfig.json b/libs/playlist/shared/util/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/playlist/shared/util/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/playlist/shared/util/tsconfig.lib.json b/libs/playlist/shared/util/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/playlist/shared/util/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/playlist/shared/util/tsconfig.spec.json b/libs/playlist/shared/util/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/playlist/shared/util/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/catalog/feature/jest.config.ts b/libs/portal/catalog/feature/jest.config.ts
new file mode 100644
index 0000000..7f2920c
--- /dev/null
+++ b/libs/portal/catalog/feature/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-catalog-feature',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/catalog/feature',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/catalog/feature/project.json b/libs/portal/catalog/feature/project.json
new file mode 100644
index 0000000..58afa7f
--- /dev/null
+++ b/libs/portal/catalog/feature/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-catalog-feature",
+    "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/catalog/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:portal-shared", "type:feature"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/catalog/feature/jest.config.ts",
+                "tsConfig": "libs/portal/catalog/feature/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/catalog/feature/src/index.ts b/libs/portal/catalog/feature/src/index.ts
new file mode 100644
index 0000000..2e6d41f
--- /dev/null
+++ b/libs/portal/catalog/feature/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/category-content-view/category-content-view.component';
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.html b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.html
new file mode 100644
index 0000000..bc50ea7
--- /dev/null
+++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.html
@@ -0,0 +1,106 @@
+@if (selectedCategory()) {
+    @if (selectedDetailComponent(); as detailComponentRef) {
+        <ng-container *ngComponentOutlet="detailComponentRef" />
+    } @else {
+        <div class="category-content-layout">
+            <div class="category-content-header">
+                <div class="category-meta">
+                    <h2 class="category-title">
+                        {{ selectedCategoryTitle() }}
+                    </h2>
+                    <div class="category-subtitle">
+                        {{ categoryItemSubtitle() }}
+                    </div>
+                </div>
+                @if (canSortContent()) {
+                    <button
+                        type="button"
+                        mat-icon-button
+                        class="sort-action"
+                        [matMenuTriggerFor]="sortContentMenu"
+                        matTooltip="Sort content"
+                        aria-label="Sort content"
+                    >
+                        <mat-icon>sort</mat-icon>
+                    </button>
+                    <mat-menu #sortContentMenu="matMenu">
+                        <button
+                            mat-menu-item
+                            (click)="setContentSortMode('date-desc')"
+                        >
+                            <span>{{
+                                'WORKSPACE.SORT_DATE_DESC' | translate
+                            }}</span>
+                            @if (contentSortMode() === 'date-desc') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                        <button
+                            mat-menu-item
+                            (click)="setContentSortMode('date-asc')"
+                        >
+                            <span>{{
+                                'WORKSPACE.SORT_DATE_ASC' | translate
+                            }}</span>
+                            @if (contentSortMode() === 'date-asc') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                        <button
+                            mat-menu-item
+                            (click)="setContentSortMode('name-asc')"
+                        >
+                            <span>{{
+                                'WORKSPACE.SORT_NAME_ASC' | translate
+                            }}</span>
+                            @if (contentSortMode() === 'name-asc') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                        <button
+                            mat-menu-item
+                            (click)="setContentSortMode('name-desc')"
+                        >
+                            <span>{{
+                                'WORKSPACE.SORT_NAME_DESC' | translate
+                            }}</span>
+                            @if (contentSortMode() === 'name-desc') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                    </mat-menu>
+                }
+                @if (categoryItemCount() > 0) {
+                    <mat-paginator
+                        [pageIndex]="pageIndex()"
+                        [length]="categoryItemCount()"
+                        [pageSize]="limit()"
+                        [pageSizeOptions]="pageSizeOptions"
+                        (page)="onPageChange($event)"
+                        aria-label="Select page"
+                    />
+                }
+            </div>
+            <app-grid-list
+                [isLoading]="isPaginatedContentLoading()"
+                [items]="contentWithProgress()"
+                (itemClicked)="onItemClick($event)"
+                [pageIndex]="pageIndex()"
+                [totalPages]="totalPages()"
+                [limit]="limit()"
+                [pageSizeOptions]="pageSizeOptions"
+                [showPaginator]="false"
+                (pageChange)="onPageChange($event)"
+            />
+        </div>
+    }
+} @else {
+    <app-playlist-error-view
+        [title]="'PORTALS.ERROR_VIEW.NO_CATEGORY_SELECTED.TITLE' | translate"
+        [description]="
+            'PORTALS.ERROR_VIEW.NO_CATEGORY_SELECTED.DESCRIPTION' | translate
+        "
+        [showActionButtons]="false"
+        [viewType]="'EMPTY_CATEGORY'"
+    />
+}
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
new file mode 100644
index 0000000..290c92f
--- /dev/null
+++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
@@ -0,0 +1,75 @@
+@use '../../../../../../ui/styles/panel-header' as panel;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.category-content-layout {
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+// ─── Sticky header bar — styled like a widget header ─────────────────────────
+.category-content-header {
+    @include panel.standard-panel-header($sticky: true);
+}
+
+// ─── Category meta (title + subtitle) ────────────────────────────────────────
+.category-meta {
+    @include panel.standard-panel-meta();
+}
+
+.category-title {
+    @include panel.standard-panel-title();
+}
+
+.category-subtitle {
+    @include panel.standard-panel-subtitle();
+}
+
+// ─── Paginator — flush right, no ghost background ────────────────────────────
+mat-paginator {
+    background: transparent !important;
+    flex-shrink: 0;
+    // Shrink paginator text to fit header height comfortably
+    --mat-paginator-container-size: 40px;
+    --mat-paginator-enabled-icon-color: var(--app-body-color, var(--mat-sys-on-surface-variant));
+    --mat-paginator-disabled-icon-color: rgba(255, 255, 255, 0.18);
+}
+
+// ─── Grid scroll area ─────────────────────────────────────────────────────────
+app-grid-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 16px 20px 20px;
+    display: block;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+}
+
+@media (max-width: 768px) {
+    .category-content-header {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 10px 16px;
+        min-height: unset;
+    }
+
+    .category-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    app-grid-list {
+        padding: 12px 16px 16px;
+    }
+}
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.spec.ts b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.spec.ts
new file mode 100644
index 0000000..46311d1
--- /dev/null
+++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.spec.ts
@@ -0,0 +1,307 @@
+import { Component, input, output, signal } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ReplaySubject, of } from 'rxjs';
+import {
+    PORTAL_CATALOG_DETAIL_COMPONENT,
+    PORTAL_CATALOG_FACADE,
+    PortalCatalogSortMode,
+} from '@iptvnator/portal/shared/util';
+import { CategoryContentViewComponent } from './category-content-view.component';
+
+@Component({
+    selector: 'app-grid-list',
+    standalone: true,
+    template: '',
+})
+class MockGridListComponent {
+    readonly isLoading = input<boolean>();
+    readonly items = input<unknown[]>();
+    readonly pageIndex = input<number>();
+    readonly totalPages = input<number>();
+    readonly limit = input<number>();
+    readonly pageSizeOptions = input<number[]>();
+    readonly showPaginator = input(true);
+    readonly itemClicked = output<unknown>();
+    readonly pageChange = output<unknown>();
+}
+
+@Component({
+    selector: 'app-playlist-error-view',
+    standalone: true,
+    template: '',
+})
+class MockPlaylistErrorViewComponent {
+    readonly title = input('');
+    readonly description = input('');
+    readonly showActionButtons = input(true);
+    readonly viewType = input('');
+}
+
+@Component({
+    standalone: true,
+    template: '',
+})
+class MockDetailComponent {}
+
+describe('CategoryContentViewComponent', () => {
+    let fixture: ComponentFixture<CategoryContentViewComponent>;
+    let router: { navigate: jest.Mock };
+    const paramMap$ = new ReplaySubject(1);
+    const queryParamMap$ = new ReplaySubject(1);
+    const isPaginatedContentLoading = signal(true);
+    const categoryItemCount = signal(0);
+    const contentSortMode = signal<PortalCatalogSortMode | null>(null);
+    const catalog = {
+        provider: 'xtream' as const,
+        pageSizeOptions: [10, 25, 50],
+        contentType: signal('vod'),
+        limit: signal(25),
+        pageIndex: signal(0),
+        selectedCategory: signal({ id: 1 }),
+        paginatedContent: signal<unknown[]>([]),
+        selectedCategoryTitle: signal('Movies'),
+        categoryItemCount,
+        selectedItem: signal(null),
+        totalPages: signal(0),
+        contentSortMode,
+        playlist: signal(null),
+        isPaginatedContentLoading,
+        initialize: jest.fn(),
+        setSearchQuery: jest.fn(),
+        clearSelectedItem: jest.fn(),
+        setPage: jest.fn(),
+        setLimit: jest.fn(),
+        setContentSortMode: jest.fn(),
+        selectItem: jest.fn().mockReturnValue(null),
+        getItemProgress: jest.fn().mockReturnValue({}),
+    };
+
+    beforeEach(async () => {
+        isPaginatedContentLoading.set(true);
+        categoryItemCount.set(0);
+        contentSortMode.set(null);
+        catalog.initialize.mockClear();
+        catalog.setSearchQuery.mockClear();
+        catalog.setPage.mockClear();
+        catalog.setLimit.mockClear();
+        catalog.selectItem.mockClear();
+        catalog.selectItem.mockReturnValue(null);
+        router = {
+            navigate: jest.fn(),
+        };
+        paramMap$.next(convertToParamMap({}));
+        queryParamMap$.next(convertToParamMap({}));
+
+        await TestBed.configureTestingModule({
+            imports: [CategoryContentViewComponent, NoopAnimationsModule],
+            providers: [
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) =>
+                            key === 'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+                                ? 'Fetching playlist data from source...'
+                                : key,
+                        get: (key: string) =>
+                            of(
+                                key === 'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+                                    ? 'Fetching playlist data from source...'
+                                    : key
+                            ),
+                        stream: (key: string) =>
+                            of(
+                                key === 'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+                                    ? 'Fetching playlist data from source...'
+                                    : key
+                            ),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+                {
+                    provide: PORTAL_CATALOG_FACADE,
+                    useValue: catalog,
+                },
+                {
+                    provide: PORTAL_CATALOG_DETAIL_COMPONENT,
+                    useValue: MockDetailComponent,
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        paramMap: paramMap$.asObservable(),
+                        queryParamMap: queryParamMap$.asObservable(),
+                        snapshot: {
+                            params: {},
+                        },
+                    },
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+            ],
+        })
+            .overrideComponent(CategoryContentViewComponent, {
+                set: {
+                    imports: [
+                        NgComponentOutlet,
+                        MockGridListComponent,
+                        MockPlaylistErrorViewComponent,
+                        MatIcon,
+                        MatIconButton,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        MatTooltip,
+                        TranslatePipe,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(CategoryContentViewComponent);
+    });
+
+    it('shows loading copy in the subtitle instead of 0 items while xtream content is still warming up', () => {
+        fixture.detectChanges();
+
+        const subtitle = fixture.nativeElement.querySelector(
+            '.category-subtitle'
+        ) as HTMLElement | null;
+
+        expect(catalog.initialize).toHaveBeenCalledWith(null);
+        expect(subtitle?.textContent?.trim()).toBe(
+            'Fetching playlist data from source...'
+        );
+    });
+
+    it('forwards query-param search updates to the catalog facade when supported', () => {
+        fixture.detectChanges();
+        catalog.setSearchQuery.mockClear();
+
+        queryParamMap$.next(
+            convertToParamMap({
+                q: 'matrix',
+            })
+        );
+
+        expect(catalog.setSearchQuery).toHaveBeenCalledWith('matrix');
+    });
+
+    it('restores the zero-based catalog page from the one-based page query param', () => {
+        fixture.detectChanges();
+        catalog.setPage.mockClear();
+
+        queryParamMap$.next(
+            convertToParamMap({
+                page: '3',
+            })
+        );
+
+        expect(catalog.setPage).toHaveBeenCalledWith(2);
+    });
+
+    it('falls back to the first catalog page when the page query param is absent or invalid', () => {
+        fixture.detectChanges();
+        catalog.setPage.mockClear();
+
+        queryParamMap$.next(convertToParamMap({}));
+        queryParamMap$.next(
+            convertToParamMap({
+                page: 'not-a-page',
+            })
+        );
+
+        expect(catalog.setPage).toHaveBeenNthCalledWith(1, 0);
+        expect(catalog.setPage).toHaveBeenNthCalledWith(2, 0);
+    });
+
+    it('writes one-based page query params when the paginator changes', () => {
+        fixture.detectChanges();
+
+        fixture.componentInstance.onPageChange({
+            length: 100,
+            pageIndex: 1,
+            pageSize: 25,
+            previousPageIndex: 0,
+        });
+
+        expect(catalog.setPage).toHaveBeenCalledWith(1);
+        expect(catalog.setLimit).toHaveBeenCalledWith(25);
+        expect(router.navigate).toHaveBeenCalledWith([], {
+            relativeTo: expect.any(Object),
+            queryParams: {
+                page: 2,
+            },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    });
+
+    it('removes the page query param when returning to the first page', () => {
+        fixture.detectChanges();
+
+        fixture.componentInstance.onPageChange({
+            length: 100,
+            pageIndex: 0,
+            pageSize: 25,
+            previousPageIndex: 1,
+        });
+
+        expect(router.navigate).toHaveBeenCalledWith([], {
+            relativeTo: expect.any(Object),
+            queryParams: {
+                page: null,
+            },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    });
+
+    it('scrolls the grid list host to the top when the paginator changes', () => {
+        fixture.detectChanges();
+        const gridList = fixture.nativeElement.querySelector(
+            'app-grid-list'
+        ) as HTMLElement;
+        const scrollTo = jest.fn();
+        Object.defineProperty(gridList, 'scrollTo', {
+            configurable: true,
+            value: scrollTo,
+        });
+
+        fixture.componentInstance.onPageChange({
+            length: 100,
+            pageIndex: 1,
+            pageSize: 25,
+            previousPageIndex: 0,
+        });
+
+        expect(scrollTo).toHaveBeenCalledWith({ top: 0 });
+    });
+
+    it('preserves query params when navigating from an item to Xtream details', () => {
+        catalog.selectItem.mockReturnValue(['42']);
+        fixture.detectChanges();
+
+        fixture.componentInstance.onItemClick({
+            xtream_id: 42,
+        });
+
+        expect(router.navigate).toHaveBeenCalledWith(['42'], {
+            relativeTo: expect.any(Object),
+            queryParamsHandling: 'preserve',
+        });
+    });
+});
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.ts b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.ts
new file mode 100644
index 0000000..53ecde1
--- /dev/null
+++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.ts
@@ -0,0 +1,185 @@
+import { NgComponentOutlet } from '@angular/common';
+import {
+    Component,
+    computed,
+    DestroyRef,
+    ElementRef,
+    inject,
+    OnInit,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import {
+    GridListComponent,
+    PlaylistErrorViewComponent,
+} from '@iptvnator/portal/shared/ui';
+import {
+    clearNavigationStateKeys,
+    getOpenStalkerItemState,
+    PortalCatalogFacade,
+    OPEN_STALKER_ITEM_STATE_KEY,
+    PORTAL_CATALOG_DETAIL_COMPONENT,
+    PORTAL_CATALOG_FACADE,
+    PortalCatalogSortMode,
+} from '@iptvnator/portal/shared/util';
+
+interface CategoryContentItem {
+    id?: number | string;
+    is_series?: number | string | boolean;
+    xtream_id?: number | string;
+    series_id?: number | string;
+    stream_id?: number | string;
+    category_id?: number | string;
+    [key: string]: unknown;
+}
+
+@Component({
+    selector: 'app-category-content-view',
+    templateUrl: './category-content-view.component.html',
+    styleUrls: ['./category-content-view.component.scss'],
+    imports: [
+        GridListComponent,
+        MatIcon,
+        MatIconButton,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatTooltip,
+        NgComponentOutlet,
+        PlaylistErrorViewComponent,
+        TranslatePipe,
+    ],
+})
+export class CategoryContentViewComponent implements OnInit {
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly hostElement = inject(ElementRef<HTMLElement>);
+    private readonly router = inject(Router);
+    private readonly translate = inject(TranslateService);
+    private readonly catalog = inject(
+        PORTAL_CATALOG_FACADE
+    ) as PortalCatalogFacade<
+        CategoryContentItem,
+        CategoryContentItem,
+        CategoryContentItem
+    >;
+
+    readonly detailComponent = inject(PORTAL_CATALOG_DETAIL_COMPONENT);
+    readonly contentType = this.catalog.contentType;
+    readonly limit = this.catalog.limit;
+    readonly pageIndex = this.catalog.pageIndex;
+    readonly pageSizeOptions = Array.from(this.catalog.pageSizeOptions);
+    readonly selectedCategory = this.catalog.selectedCategory;
+    readonly paginatedContent = this.catalog.paginatedContent;
+    readonly selectedCategoryTitle = this.catalog.selectedCategoryTitle;
+    readonly categoryItemCount = this.catalog.categoryItemCount;
+    readonly selectedItem = this.catalog.selectedItem;
+    readonly totalPages = this.catalog.totalPages;
+    readonly contentSortMode = this.catalog.contentSortMode;
+    readonly isPaginatedContentLoading = this.catalog.isPaginatedContentLoading;
+    readonly isXtreamLoadingSubtitle = computed(
+        () =>
+            this.catalog.provider === 'xtream' &&
+            this.isPaginatedContentLoading()
+    );
+    readonly categoryItemSubtitle = computed(() => {
+        if (this.isXtreamLoadingSubtitle()) {
+            return this.translate.instant(
+                'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+            );
+        }
+
+        const itemCount = this.categoryItemCount();
+        return `${itemCount} ${itemCount === 1 ? 'item' : 'items'}`;
+    });
+    readonly canSortContent = computed(() => this.contentSortMode() !== null);
+    readonly selectedDetailComponent = computed(() =>
+        this.selectedItem() ? this.detailComponent : null
+    );
+    readonly contentWithProgress = computed(() =>
+        (this.paginatedContent() ?? []).map((item: CategoryContentItem) => ({
+            ...item,
+            ...this.catalog.getItemProgress(item),
+        }))
+    );
+
+    setContentSortMode(mode: PortalCatalogSortMode): void {
+        this.catalog.setContentSortMode(mode);
+    }
+
+    ngOnInit(): void {
+        this.activatedRoute.paramMap
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((params) => {
+                this.catalog.initialize(params.get('categoryId'));
+                this.openStalkerItemFromNavigationState();
+            });
+
+        this.activatedRoute.queryParamMap
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((params) => {
+                this.catalog.setSearchQuery?.(params.get('q') ?? '');
+                this.catalog.setPage(this.toPageIndex(params.get('page')));
+            });
+    }
+
+    onPageChange(event: PageEvent): void {
+        this.catalog.setPage(event.pageIndex);
+        this.catalog.setLimit(event.pageSize);
+        this.scrollGridToTop();
+
+        void this.router.navigate([], {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                page: event.pageIndex > 0 ? event.pageIndex + 1 : null,
+            },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    }
+
+    onItemClick(item: CategoryContentItem): void {
+        const navigation = this.catalog.selectItem(item);
+        if (navigation?.length) {
+            this.router.navigate(navigation, {
+                relativeTo: this.activatedRoute,
+                queryParamsHandling: 'preserve',
+            });
+        }
+    }
+
+    private toPageIndex(value: string | null): number {
+        const page = Number(value);
+        return Number.isInteger(page) && page > 0 ? page - 1 : 0;
+    }
+
+    private scrollGridToTop(): void {
+        const gridList = this.hostElement.nativeElement.querySelector(
+            'app-grid-list'
+        ) as HTMLElement | null;
+        gridList?.scrollTo?.({ top: 0 });
+    }
+
+    private openStalkerItemFromNavigationState(): void {
+        if (this.catalog.provider !== 'stalker') {
+            return;
+        }
+
+        const item = getOpenStalkerItemState(window.history.state);
+        if (!item) {
+            return;
+        }
+
+        this.catalog.selectItem(item as CategoryContentItem);
+        clearNavigationStateKeys([
+            OPEN_STALKER_ITEM_STATE_KEY,
+            'openFavoriteItem',
+            'openRecentItem',
+        ]);
+    }
+}
diff --git a/libs/portal/catalog/feature/src/test-setup.ts b/libs/portal/catalog/feature/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/catalog/feature/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/catalog/feature/tsconfig.json b/libs/portal/catalog/feature/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/portal/catalog/feature/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/portal/catalog/feature/tsconfig.lib.json b/libs/portal/catalog/feature/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/portal/catalog/feature/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/catalog/feature/tsconfig.spec.json b/libs/portal/catalog/feature/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/catalog/feature/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/downloads/feature/project.json b/libs/portal/downloads/feature/project.json
new file mode 100644
index 0000000..305cabd
--- /dev/null
+++ b/libs/portal/downloads/feature/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "portal-downloads-feature",
+    "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/downloads/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:portal-shared", "type:feature"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/downloads/feature/src/index.ts b/libs/portal/downloads/feature/src/index.ts
new file mode 100644
index 0000000..0499a3e
--- /dev/null
+++ b/libs/portal/downloads/feature/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/downloads.component';
diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.html b/libs/portal/downloads/feature/src/lib/downloads.component.html
new file mode 100644
index 0000000..61876a0
--- /dev/null
+++ b/libs/portal/downloads/feature/src/lib/downloads.component.html
@@ -0,0 +1,331 @@
+<div class="downloads-layout">
+    <div class="downloads">
+        <header class="downloads__header">
+            <div class="downloads__header-left">
+                <div class="settings-group__header-text">
+                    <h1>{{ 'DOWNLOADS.TITLE' | translate }}</h1>
+                    @if (activeCount() > 0) {
+                        <span class="downloads__badge">{{
+                            activeCount()
+                        }}</span>
+                    }
+                </div>
+            </div>
+            <div class="downloads__header-actions">
+                @if (isAvailable()) {
+                    <div
+                        class="downloads__folder-inline"
+                        [attr.title]="
+                            downloadFolder() ||
+                            ('DOWNLOADS.NO_FOLDER' | translate)
+                        "
+                    >
+                        <mat-icon>folder_open</mat-icon>
+                        <span class="downloads__folder-inline-path">
+                            {{
+                                downloadFolder() ||
+                                    ('DOWNLOADS.NO_FOLDER' | translate)
+                            }}
+                        </span>
+                    </div>
+                    <button mat-stroked-button (click)="changeFolder()">
+                        {{ 'DOWNLOADS.CHANGE_FOLDER' | translate }}
+                    </button>
+                    @if (hasClearableDownloads()) {
+                        <button
+                            mat-stroked-button
+                            (click)="clearCompleted()"
+                            [matTooltip]="'DOWNLOADS.CLEAR_COMPLETED' | translate"
+                            [attr.aria-label]="
+                                'DOWNLOADS.CLEAR_COMPLETED' | translate
+                            "
+                        >
+                            <mat-icon>delete_sweep</mat-icon>
+                            {{ 'DOWNLOADS.CLEAR_COMPLETED' | translate }}
+                        </button>
+                    }
+                }
+            </div>
+        </header>
+
+        @if (!isAvailable()) {
+            <div class="downloads__empty">
+                <mat-icon>desktop_access_disabled</mat-icon>
+                <p>{{ 'DOWNLOADS.NOT_AVAILABLE' | translate }}</p>
+                <span>{{ 'DOWNLOADS.DESKTOP_ONLY' | translate }}</span>
+            </div>
+        } @else if (hasNoPlaylists()) {
+            <app-empty-state
+                type="no-data"
+                icon="download_for_offline"
+                titleKey="DOWNLOADS.NO_PLAYLISTS_TITLE"
+                descriptionKey="DOWNLOADS.NO_PLAYLISTS_BODY"
+                primaryActionLabelKey="HOME.PLAYLISTS.ADD_YOUR_FIRST"
+                secondaryActionLabelKey="WORKSPACE.SHELL.GO_TO_SOURCES"
+                (primaryActionClicked)="addPlaylist()"
+                (secondaryActionClicked)="goToSources()"
+            />
+        } @else if (!hasDownloads()) {
+            <app-empty-state
+                type="no-data"
+                icon="download_for_offline"
+                titleKey="DOWNLOADS.EMPTY"
+                descriptionKey="DOWNLOADS.NO_ITEMS_BODY"
+                secondaryActionLabelKey="WORKSPACE.SHELL.GO_TO_DASHBOARD"
+                (secondaryActionClicked)="goToDashboard()"
+            />
+        } @else if (filteredDownloads().length === 0) {
+            <div class="downloads__empty">
+                <mat-icon>search_off</mat-icon>
+                <p>{{ 'DOWNLOADS.NO_FILTER_MATCH' | translate }}</p>
+                <span>{{ 'DOWNLOADS.NO_FILTER_MATCH_HINT' | translate }}</span>
+            </div>
+        } @else {
+            <div class="downloads__list-wrapper">
+                <div class="downloads__list">
+                    @for (item of filteredDownloads(); track item.id) {
+                        <div
+                            class="downloads__item"
+                            [class]="getStatusColor(item.status)"
+                            [class.downloads__item--clickable]="
+                                isItemNavigable(item)
+                            "
+                            [class.downloads__item--unavailable]="
+                                !hasSourcePlaylist(item)
+                            "
+                            [attr.role]="
+                                isItemNavigable(item) ? 'button' : null
+                            "
+                            [attr.tabindex]="isItemNavigable(item) ? 0 : null"
+                            [matTooltip]="
+                                !hasSourcePlaylist(item)
+                                    ? ('DOWNLOADS.SOURCE_PLAYLIST_MISSING'
+                                      | translate)
+                                    : null
+                            "
+                            (click)="openInLibrary(item)"
+                            (keydown)="onItemCardKeydown($event, item)"
+                        >
+                            <div class="downloads__item-poster">
+                                @if (hasPoster(item)) {
+                                    <img
+                                        [src]="item.posterUrl"
+                                        [alt]="item.title"
+                                        loading="lazy"
+                                        (error)="markPosterFailed(item)"
+                                    />
+                                } @else {
+                                    <mat-icon>{{
+                                        getPosterPlaceholderIcon(item)
+                                    }}</mat-icon>
+                                }
+                            </div>
+
+                            <div class="downloads__item-info">
+                                <div class="downloads__item-title">
+                                    <span class="downloads__item-title-text">
+                                        {{ item.title }}
+                                    </span>
+                                    @if (item.contentType === 'episode') {
+                                        <span class="downloads__episode-badge">
+                                            {{ formatEpisodeLabel(item) }}
+                                        </span>
+                                    }
+                                </div>
+
+                                <div class="downloads__item-meta">
+                                    <span
+                                        class="downloads__item-status"
+                                        [class]="getStatusColor(item.status)"
+                                    >
+                                        <mat-icon>{{
+                                            getStatusIcon(item.status)
+                                        }}</mat-icon>
+                                        {{
+                                            'DOWNLOADS.STATUS.' +
+                                                item.status.toUpperCase()
+                                                | translate
+                                        }}
+                                    </span>
+
+                                    @if (
+                                        item.status === 'downloading' ||
+                                        item.status === 'completed'
+                                    ) {
+                                        <span class="downloads__item-size">
+                                            {{
+                                                formatBytes(
+                                                    item.bytesDownloaded
+                                                )
+                                            }}
+                                            @if (item.totalBytes) {
+                                                /
+                                                {{
+                                                    formatBytes(item.totalBytes)
+                                                }}
+                                            }
+                                        </span>
+                                    }
+
+                                    @if (item.errorMessage) {
+                                        <span class="downloads__item-error">
+                                            {{ item.errorMessage }}
+                                        </span>
+                                    }
+                                </div>
+
+                                @if (item.status === 'downloading') {
+                                    <mat-progress-bar
+                                        mode="determinate"
+                                        [value]="getProgress(item)"
+                                    ></mat-progress-bar>
+                                }
+
+                                <div class="downloads__item-actions">
+                                    <button
+                                        mat-icon-button
+                                        (click)="
+                                            $event.stopPropagation();
+                                            copyUrl(item)
+                                        "
+                                        [matTooltip]="
+                                            'DOWNLOADS.COPY_URL' | translate
+                                        "
+                                    >
+                                        <mat-icon>content_copy</mat-icon>
+                                    </button>
+                                    @switch (item.status) {
+                                        @case ('queued') {
+                                            <button
+                                                mat-icon-button
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    cancel(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.CANCEL' | translate
+                                                "
+                                            >
+                                                <mat-icon>close</mat-icon>
+                                            </button>
+                                        }
+                                        @case ('downloading') {
+                                            <button
+                                                mat-icon-button
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    cancel(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.CANCEL' | translate
+                                                "
+                                            >
+                                                <mat-icon>close</mat-icon>
+                                            </button>
+                                        }
+                                        @case ('completed') {
+                                            <button
+                                                mat-icon-button
+                                                color="primary"
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    play(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.PLAY' | translate
+                                                "
+                                            >
+                                                <mat-icon>play_arrow</mat-icon>
+                                            </button>
+                                            <button
+                                                mat-icon-button
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    reveal(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.REVEAL' | translate
+                                                "
+                                            >
+                                                <mat-icon>folder_open</mat-icon>
+                                            </button>
+                                            <button
+                                                mat-icon-button
+                                                color="warn"
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    remove(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.REMOVE' | translate
+                                                "
+                                            >
+                                                <mat-icon>delete</mat-icon>
+                                            </button>
+                                        }
+                                        @case ('failed') {
+                                            <button
+                                                mat-icon-button
+                                                color="accent"
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    retry(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.RETRY' | translate
+                                                "
+                                            >
+                                                <mat-icon>refresh</mat-icon>
+                                            </button>
+                                            <button
+                                                mat-icon-button
+                                                color="warn"
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    remove(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.REMOVE' | translate
+                                                "
+                                            >
+                                                <mat-icon>delete</mat-icon>
+                                            </button>
+                                        }
+                                        @case ('canceled') {
+                                            <button
+                                                mat-icon-button
+                                                color="accent"
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    retry(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.RETRY' | translate
+                                                "
+                                            >
+                                                <mat-icon>refresh</mat-icon>
+                                            </button>
+                                            <button
+                                                mat-icon-button
+                                                color="warn"
+                                                (click)="
+                                                    $event.stopPropagation();
+                                                    remove(item)
+                                                "
+                                                [matTooltip]="
+                                                    'DOWNLOADS.REMOVE' | translate
+                                                "
+                                            >
+                                                <mat-icon>delete</mat-icon>
+                                            </button>
+                                        }
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+    </div>
+</div>
diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.scss b/libs/portal/downloads/feature/src/lib/downloads.component.scss
new file mode 100644
index 0000000..b6401a6
--- /dev/null
+++ b/libs/portal/downloads/feature/src/lib/downloads.component.scss
@@ -0,0 +1,418 @@
+:host {
+    width: 100%;
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+}
+
+.downloads-layout {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+.downloads {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        padding: 24px 16px 12px;
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
+
+        &-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+
+            .settings-group__header-text {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+
+                h1 {
+                    margin: 0;
+                    font-size: 1.2rem;
+                    font-weight: 650;
+                    letter-spacing: -0.02em;
+                }
+            }
+
+            .back-btn {
+                margin-right: 0.5rem;
+            }
+        }
+
+        &-actions {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+    }
+
+    &__badge {
+        background: var(--mat-sys-primary);
+        color: var(--mat-sys-on-primary);
+        padding: 0.125rem 0.5rem;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    &__folder-inline {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        max-width: min(42vw, 460px);
+        padding: 7px 10px;
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 86%,
+            transparent
+        );
+        border: 1px solid var(--mat-sys-outline-variant);
+        border-radius: 8px;
+        box-shadow: inset 0 1px 0
+            color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
+
+        mat-icon {
+            width: 16px;
+            height: 16px;
+            font-size: 16px;
+            color: var(--mat-sys-primary);
+            flex-shrink: 0;
+        }
+    }
+
+    &__folder-inline-path {
+        font-family:
+            'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas,
+            monospace;
+        font-size: 0.78rem;
+        color: var(--mat-sys-on-surface);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        text-align: center;
+        color: var(--mat-sys-on-surface-variant);
+
+        mat-icon {
+            font-size: 4rem;
+            width: 4rem;
+            height: 4rem;
+            margin-bottom: 1rem;
+            opacity: 0.4;
+        }
+
+        p {
+            margin: 0 0 0.5rem;
+            font-size: 1.05rem;
+            font-weight: 520;
+            letter-spacing: -0.01em;
+            color: var(--mat-sys-on-surface);
+        }
+
+        span {
+            font-size: 0.875rem;
+        }
+    }
+
+    &__list-wrapper {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 0 16px;
+        container-type: inline-size;
+    }
+
+    &__list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
+        gap: 12px;
+        padding-bottom: 24px;
+        align-content: start;
+    }
+
+    &__item {
+        display: grid;
+        grid-template-columns: 64px minmax(0, 1fr);
+        align-items: stretch;
+        gap: 1rem;
+        padding: 1rem;
+        min-width: 0;
+        background: var(
+            --app-widget-bg,
+            var(--mat-sys-surface-container-high)
+        );
+        border-radius: 14px;
+        border: 1px solid var(--app-separator, var(--mat-sys-outline-variant));
+        box-shadow: var(--app-widget-shadow, none);
+        transition:
+            background 0.18s ease,
+            border-color 0.18s ease,
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
+
+        &--clickable {
+            cursor: pointer;
+
+            &:focus-visible {
+                outline: 2px solid var(--mat-sys-primary);
+                outline-offset: 2px;
+            }
+        }
+
+        &:hover {
+            background: var(--app-selection-surface);
+            border-color: color-mix(
+                in srgb,
+                var(--app-selection-border) 72%,
+                transparent
+            );
+        }
+
+        &--unavailable {
+            cursor: default;
+        }
+
+        &-poster {
+            width: 64px;
+            height: 90px;
+            border-radius: 10px;
+            overflow: hidden;
+            flex-shrink: 0;
+            background: var(
+                --app-widget-header-bg,
+                var(--mat-sys-surface-container-high)
+            );
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--app-separator, var(--mat-sys-outline-variant));
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            mat-icon {
+                font-size: 2rem;
+                width: 2rem;
+                height: 2rem;
+                color: var(--mat-sys-on-surface-variant);
+                opacity: 0.5;
+            }
+        }
+
+        &-info {
+            flex: 1;
+            min-width: 0;
+            min-height: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        &-title {
+            font-size: 1.05rem;
+            font-weight: 600;
+            color: var(--mat-sys-on-surface);
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+            min-width: 0;
+        }
+
+        &-title-text {
+            min-width: 0;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            line-height: 1.3;
+        }
+
+        &-meta {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+            font-size: 0.85rem;
+            color: var(--mat-sys-on-surface-variant);
+        }
+
+        &-status {
+            display: flex;
+            align-items: center;
+            gap: 0.35rem;
+            font-weight: 500;
+            padding: 2px 8px;
+            border-radius: 12px;
+            background: var(
+                --app-widget-header-bg,
+                var(--mat-sys-surface-container-high)
+            );
+
+            mat-icon {
+                font-size: 1.1rem;
+                width: 1.1rem;
+                height: 1.1rem;
+            }
+
+            &.status-downloading {
+                color: #2196f3;
+                background: color-mix(in srgb, #2196f3 12%, transparent);
+            }
+
+            &.status-completed {
+                color: #4caf50;
+                background: color-mix(in srgb, #4caf50 12%, transparent);
+            }
+
+            &.status-failed {
+                color: var(--mat-sys-error);
+                background: color-mix(
+                    in srgb,
+                    var(--mat-sys-error) 12%,
+                    transparent
+                );
+            }
+
+            &.status-queued {
+                color: var(--mat-sys-on-surface-variant);
+            }
+        }
+
+        &-size {
+            font-family:
+                'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas,
+                monospace;
+            background: transparent;
+            padding: 2px 8px;
+            border-radius: 12px;
+        }
+
+        &-error {
+            color: var(--mat-sys-error);
+            font-size: 0.8rem;
+            background: color-mix(
+                in srgb,
+                var(--mat-sys-error) 12%,
+                transparent
+            );
+            padding: 2px 8px;
+            border-radius: 12px;
+        }
+
+        &-actions {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 0.2rem;
+            margin-top: auto;
+            padding-top: 0.65rem;
+            border-top: 1px solid
+                color-mix(
+                    in srgb,
+                    var(--app-separator, var(--mat-sys-outline-variant)) 72%,
+                    transparent
+                );
+
+            button {
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
+                min-height: 32px;
+                padding: 0;
+                border-radius: 9px;
+                --mdc-icon-button-state-layer-size: 32px;
+                transition:
+                    background-color 0.15s ease,
+                    transform 0.15s ease,
+                    opacity 0.15s ease;
+                opacity: 0.86;
+
+                &:hover {
+                    background: var(--app-selection-surface);
+                    transform: translateY(-1px);
+                    opacity: 1;
+                }
+            }
+
+            mat-icon {
+                width: 18px;
+                height: 18px;
+                font-size: 18px;
+            }
+        }
+
+        mat-progress-bar {
+            margin-top: 0.15rem;
+            border-radius: 4px;
+        }
+    }
+
+    &__episode-badge {
+        background: var(--mat-sys-primary);
+        color: var(--mat-sys-on-primary);
+        padding: 0.125rem 0.5rem;
+        border-radius: 6px;
+        font-size: 0.7rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+}
+
+.sidebar-header h2 {
+    margin: 0;
+}
+
+@media (max-width: 980px) {
+    .downloads {
+        &__header {
+            align-items: flex-start;
+            gap: 12px;
+        }
+
+        &__header-actions {
+            width: 100%;
+            justify-content: flex-start;
+        }
+
+        &__folder-inline {
+            max-width: 100%;
+        }
+
+        &__list {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+@container (max-width: 760px) {
+    .downloads__item {
+        align-items: start;
+    }
+}
diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.ts b/libs/portal/downloads/feature/src/lib/downloads.component.ts
new file mode 100644
index 0000000..a9dafaa
--- /dev/null
+++ b/libs/portal/downloads/feature/src/lib/downloads.component.ts
@@ -0,0 +1,559 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { DialogService } from 'components';
+import { firstValueFrom, map } from 'rxjs';
+import {
+    DatabaseService,
+    type DownloadItem,
+    DownloadsService,
+    PlaylistsService,
+} from 'services';
+import { EmptyStateComponent } from '@iptvnator/playlist/shared/ui';
+import { queryParamSignal } from '@iptvnator/portal/shared/util';
+import { createPortalCollectionContext } from '@iptvnator/portal/shared/util';
+import { WORKSPACE_SHELL_ACTIONS } from '@iptvnator/workspace/shell/util';
+import {
+    buildStandardCollectionCategories,
+    filterCollectionBucket,
+} from '@iptvnator/portal/shared/util';
+import { PortalCollectionContextService } from '@iptvnator/portal/shared/util';
+import { Playlist } from 'shared-interfaces';
+
+type PortalSource = 'xtream' | 'stalker';
+const DOWNLOAD_COLLECTION_LABELS = {
+    all: 'All',
+    movie: 'Movies',
+    live: 'Live TV',
+    series: 'Series',
+};
+
+@Component({
+    selector: 'app-downloads',
+    templateUrl: './downloads.component.html',
+    styleUrls: [
+        './downloads.component.scss',
+        '../../../../shared/ui/src/lib/styles/portal-sidebar.scss',
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        EmptyStateComponent,
+        MatButtonModule,
+        MatIcon,
+        MatProgressBarModule,
+        MatTooltip,
+        TranslatePipe,
+    ],
+})
+export class DownloadsComponent {
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+    private readonly dbService = inject(DatabaseService);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly collectionCtx = inject(PortalCollectionContextService);
+    private readonly dialogService = inject(DialogService);
+    private readonly translate = inject(TranslateService);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly shellActions = inject(WORKSPACE_SHELL_ACTIONS);
+    readonly downloadsService = inject(DownloadsService);
+
+    readonly downloads = this.downloadsService.downloads;
+    readonly downloadFolder = this.downloadsService.downloadFolder;
+    readonly isAvailable = this.downloadsService.isAvailable;
+    readonly hasDownloads = this.downloadsService.hasDownloads;
+    readonly activeCount = this.downloadsService.activeCount;
+    readonly playlistId = toSignal(
+        this.route.paramMap.pipe(map((params) => params.get('id') ?? '')),
+        { initialValue: this.route.snapshot.params['id'] ?? '' }
+    );
+    readonly searchTerm = queryParamSignal(this.route, 'q', (value) =>
+        (value ?? '').trim().toLowerCase()
+    );
+    readonly playlists = toSignal(this.playlistsService.getAllPlaylists(), {
+        initialValue: [] as Playlist[],
+    });
+    readonly hasNoPlaylists = computed(() => this.playlists().length === 0);
+
+    addPlaylist(): void {
+        this.shellActions.openAddPlaylistDialog();
+    }
+
+    goToSources(): void {
+        void this.router.navigate(['/workspace', 'sources']);
+    }
+
+    goToDashboard(): void {
+        void this.router.navigate(['/workspace', 'dashboard']);
+    }
+
+    readonly scopedDownloads = computed(() => {
+        const playlistId = this.playlistId();
+        const downloads = this.downloads();
+        return playlistId
+            ? downloads.filter((item) => item.playlistId === playlistId)
+            : downloads;
+    });
+
+    readonly categories = computed(() => {
+        const downloads = this.scopedDownloads();
+        const moviesCount = downloads.filter(
+            (item) => item.contentType === 'vod'
+        ).length;
+        const seriesCount = downloads.filter(
+            (item) => item.contentType === 'episode'
+        ).length;
+
+        return buildStandardCollectionCategories({
+            labels: DOWNLOAD_COLLECTION_LABELS,
+            counts: {
+                all: downloads.length,
+                movie: moviesCount,
+                series: seriesCount,
+            },
+        });
+    });
+    readonly collectionContext = createPortalCollectionContext({
+        ctx: this.collectionCtx,
+        categories: this.categories,
+    });
+    readonly selectedCategoryId = this.collectionContext.selectedCategoryId;
+    readonly failedPosterKeys = signal<Record<string, true>>({});
+
+    /** Filter downloads for current playlist and sort by newest first */
+    readonly filteredDownloads = computed(() => {
+        const term = this.searchTerm();
+        const downloads = this.scopedDownloads();
+        const filteredByTerm = filterCollectionBucket({
+            selectedCategoryId: this.selectedCategoryId(),
+            allItems: downloads,
+            buckets: {
+                movie: downloads.filter((item) => item.contentType === 'vod'),
+                series: downloads.filter(
+                    (item) => item.contentType === 'episode'
+                ),
+            },
+            searchTerm: term,
+            textOf: (item) => `${item.title ?? ''} ${item.errorMessage ?? ''}`,
+        });
+
+        // Sort by createdAt descending (newest first)
+        return [...filteredByTerm].sort((a, b) => {
+            const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+            const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+            return dateB - dateA;
+        });
+    });
+    readonly hasClearableDownloads = computed(() =>
+        this.scopedDownloads().some(
+            (item) =>
+                item.status === 'completed' ||
+                item.status === 'failed' ||
+                item.status === 'canceled'
+        )
+    );
+    readonly availablePlaylistIds = computed(
+        () => new Set(this.playlists().map((playlist) => playlist._id))
+    );
+
+    constructor() {
+        effect(() => {
+            const playlistId = this.playlistId();
+            this.collectionContext.setCategoryId('all');
+            void this.downloadsService.loadDownloads(playlistId || undefined);
+        });
+    }
+
+    getProgress(item: DownloadItem): number {
+        return this.downloadsService.getProgressPercent(item);
+    }
+
+    formatBytes(bytes: number | undefined): string {
+        if (!bytes) return '0 B';
+        return this.downloadsService.formatBytes(bytes);
+    }
+
+    getStatusIcon(status: string): string {
+        switch (status) {
+            case 'queued':
+                return 'schedule';
+            case 'downloading':
+                return 'downloading';
+            case 'completed':
+                return 'check_circle';
+            case 'failed':
+                return 'error';
+            case 'canceled':
+                return 'cancel';
+            default:
+                return 'help';
+        }
+    }
+
+    getStatusColor(status: string): string {
+        switch (status) {
+            case 'queued':
+                return 'status-queued';
+            case 'downloading':
+                return 'status-downloading';
+            case 'completed':
+                return 'status-completed';
+            case 'failed':
+            case 'canceled':
+                return 'status-failed';
+            default:
+                return '';
+        }
+    }
+
+    async copyUrl(item: DownloadItem): Promise<void> {
+        try {
+            await navigator.clipboard.writeText(item.url);
+            this.snackBar.open(
+                this.translate.instant('DOWNLOADS.URL_COPIED'),
+                undefined,
+                { duration: 2000, horizontalPosition: 'start' }
+            );
+        } catch {
+            this.snackBar.open(
+                this.translate.instant('DOWNLOADS.URL_COPY_FAILED'),
+                undefined,
+                { duration: 3000, horizontalPosition: 'start' }
+            );
+        }
+    }
+
+    async cancel(item: DownloadItem) {
+        await this.downloadsService.cancelDownload(item.id);
+    }
+
+    async retry(item: DownloadItem) {
+        await this.downloadsService.retryDownload(item.id);
+    }
+
+    async remove(item: DownloadItem) {
+        await this.downloadsService.removeDownload(item.id);
+    }
+
+    async play(item: DownloadItem) {
+        if (item.filePath) {
+            const result = await this.downloadsService.playDownload(
+                item.filePath
+            );
+            if (!result.success) {
+                this.handleFileActionError(result.error);
+            }
+        }
+    }
+
+    async reveal(item: DownloadItem) {
+        if (item.filePath) {
+            const result = await this.downloadsService.revealFile(item.filePath);
+            if (!result.success) {
+                this.handleFileActionError(result.error);
+            }
+        }
+    }
+
+    async changeFolder() {
+        await this.downloadsService.selectFolder();
+    }
+
+    async clearCompleted() {
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant(
+                'DOWNLOADS.CLEAR_COMPLETED_DIALOG.TITLE'
+            ),
+            message: this.translate.instant(
+                'DOWNLOADS.CLEAR_COMPLETED_DIALOG.MESSAGE'
+            ),
+            confirmLabel: this.translate.instant('DOWNLOADS.CLEAR_COMPLETED'),
+            onConfirm: async (): Promise<void> => {
+                await this.downloadsService.clearCompleted(this.playlistId());
+            },
+        });
+    }
+
+    formatEpisodeLabel(item: DownloadItem): string {
+        if (item.contentType !== 'episode') return '';
+        const s = item.seasonNumber?.toString().padStart(2, '0') || '00';
+        const e = item.episodeNumber?.toString().padStart(2, '0') || '00';
+        return `S${s}E${e}`;
+    }
+
+    hasPoster(item: DownloadItem): boolean {
+        return !!item.posterUrl && !this.failedPosterKeys()[this.getPosterKey(item)];
+    }
+
+    markPosterFailed(item: DownloadItem): void {
+        const key = this.getPosterKey(item);
+        this.failedPosterKeys.update((state) => {
+            if (state[key]) {
+                return state;
+            }
+
+            return {
+                ...state,
+                [key]: true,
+            };
+        });
+    }
+
+    getPosterPlaceholderIcon(item: DownloadItem): string {
+        return item.contentType === 'episode' ? 'video_library' : 'movie';
+    }
+
+    hasSourcePlaylist(item: DownloadItem): boolean {
+        return this.availablePlaylistIds().has(item.playlistId);
+    }
+
+    isItemNavigable(item: DownloadItem): boolean {
+        return (
+            !!item.playlistId &&
+            this.hasSourcePlaylist(item) &&
+            this.getTargetContentId(item) !== null
+        );
+    }
+
+    onItemCardKeydown(event: KeyboardEvent, item: DownloadItem): void {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+
+        event.preventDefault();
+        void this.openInLibrary(item);
+    }
+
+    async openInLibrary(item: DownloadItem): Promise<void> {
+        if (!this.hasSourcePlaylist(item)) {
+            this.snackBar.open(
+                this.translate.instant('DOWNLOADS.SOURCE_PLAYLIST_MISSING'),
+                undefined,
+                { duration: 3000, horizontalPosition: 'start' }
+            );
+            return;
+        }
+
+        if (!this.isItemNavigable(item)) {
+            return;
+        }
+
+        const source = await this.resolveSourceType(item.playlistId);
+        if (!source) {
+            return;
+        }
+
+        if (source === 'xtream') {
+            await this.openXtreamItem(item);
+            return;
+        }
+
+        await this.openStalkerItem(item);
+    }
+
+    private getTargetContentId(item: DownloadItem): number | null {
+        const id =
+            item.contentType === 'episode'
+                ? (item.seriesXtreamId ?? item.xtreamId)
+                : item.xtreamId;
+        const numeric = Number(id);
+        return Number.isFinite(numeric) ? numeric : null;
+    }
+
+    private buildPlaylistRoute(
+        source: PortalSource,
+        playlistId: string,
+        segments: Array<string | number>
+    ): Array<string | number> {
+        const sourceSegment = source === 'stalker' ? 'stalker' : 'xtreams';
+        return ['/workspace', sourceSegment, playlistId, ...segments];
+    }
+
+    private async resolveSourceType(
+        playlistId: string
+    ): Promise<PortalSource | null> {
+        try {
+            const playlist = await firstValueFrom(
+                this.playlistsService.getPlaylistById(playlistId)
+            );
+
+            if (!playlist) {
+                return null;
+            }
+
+            if (playlist.portalUrl && playlist.macAddress) {
+                return 'stalker';
+            }
+
+            return 'xtream';
+        } catch {
+            return null;
+        }
+    }
+
+    private async openXtreamItem(item: DownloadItem): Promise<void> {
+        const targetId = this.getTargetContentId(item);
+        if (targetId === null) return;
+
+        const contentType = item.contentType === 'episode' ? 'series' : 'vod';
+        const content = await this.dbService.getContentByXtreamId(
+            targetId,
+            item.playlistId
+        );
+        const categoryId = content?.category_id;
+
+        if (categoryId === null || categoryId === undefined) {
+            await this.router.navigate(
+                this.buildPlaylistRoute('xtream', item.playlistId, [
+                    contentType,
+                ])
+            );
+            return;
+        }
+
+        await this.router.navigate(
+            this.buildPlaylistRoute('xtream', item.playlistId, [
+                contentType,
+                String(categoryId),
+                String(targetId),
+            ])
+        );
+    }
+
+    private normalizePortalItemId(value: unknown): string {
+        const raw = String(value ?? '').trim();
+        if (!raw) return '';
+        return raw.includes(':') ? raw.split(':')[0] : raw;
+    }
+
+    private normalizeStalkerCategoryId(
+        value: unknown,
+        fallback: 'vod' | 'series'
+    ): 'vod' | 'series' | 'itv' {
+        const normalized = String(value ?? '').toLowerCase();
+        if (normalized === 'movie') return 'vod';
+        if (
+            normalized === 'vod' ||
+            normalized === 'series' ||
+            normalized === 'itv'
+        ) {
+            return normalized;
+        }
+        return fallback;
+    }
+
+    private findMatchingStalkerRecentItem(
+        items: Array<Record<string, unknown>>,
+        targetId: number
+    ): Record<string, unknown> | undefined {
+        const expectedId = String(targetId);
+        return items.find((recentItem) => {
+            const candidates = [
+                recentItem['id'],
+                recentItem['movie_id'],
+                recentItem['series_id'],
+                recentItem['stream_id'],
+            ];
+
+            return candidates.some(
+                (candidate) =>
+                    this.normalizePortalItemId(candidate) === expectedId
+            );
+        });
+    }
+
+    private async buildStalkerOpenState(
+        item: DownloadItem,
+        targetId: number,
+        fallbackCategory: 'vod' | 'series'
+    ): Promise<Record<string, unknown>> {
+        try {
+            const items = (await firstValueFrom(
+                this.playlistsService.getPortalRecentlyViewed(item.playlistId)
+            )) as Array<Record<string, unknown>>;
+
+            const matched = this.findMatchingStalkerRecentItem(items, targetId);
+
+            if (matched) {
+                return {
+                    ...matched,
+                    id:
+                        matched['id'] ??
+                        matched['series_id'] ??
+                        matched['movie_id'] ??
+                        String(targetId),
+                    category_id: this.normalizeStalkerCategoryId(
+                        matched['category_id'],
+                        fallbackCategory
+                    ),
+                    title: matched['title'] ?? item.title,
+                    name: matched['name'] ?? matched['o_name'] ?? item.title,
+                };
+            }
+        } catch {
+            // Ignore and use fallback state below.
+        }
+
+        return {
+            id: String(targetId),
+            category_id: fallbackCategory,
+            title: item.title,
+            name: item.title,
+            o_name: item.title,
+            cover: item.posterUrl,
+            logo: item.posterUrl,
+        };
+    }
+
+    private async openStalkerItem(item: DownloadItem): Promise<void> {
+        const targetId = this.getTargetContentId(item);
+        if (targetId === null) return;
+
+        const fallbackCategory =
+            item.contentType === 'episode' ? 'series' : 'vod';
+        const openRecentItem = await this.buildStalkerOpenState(
+            item,
+            targetId,
+            fallbackCategory
+        );
+
+        await this.router.navigate(
+            this.buildPlaylistRoute('stalker', item.playlistId, ['recent']),
+            {
+                state: { openRecentItem },
+            }
+        );
+    }
+
+    private getPosterKey(item: DownloadItem): string {
+        return `${item.id}:${item.posterUrl ?? ''}`;
+    }
+
+    private handleFileActionError(error?: string): void {
+        const message =
+            error === 'File not found'
+                ? this.translate.instant('DOWNLOADS.FILE_NOT_FOUND')
+                : this.translate.instant('DOWNLOADS.FILE_ACTION_ERROR');
+
+        this.snackBar.open(message, undefined, {
+            duration: 3000,
+            horizontalPosition: 'start',
+        });
+    }
+}
diff --git a/libs/portal/downloads/feature/tsconfig.json b/libs/portal/downloads/feature/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/portal/downloads/feature/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/portal/downloads/feature/tsconfig.lib.json b/libs/portal/downloads/feature/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/portal/downloads/feature/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/shared/ui/jest.config.ts b/libs/portal/shared/ui/jest.config.ts
new file mode 100644
index 0000000..250fe96
--- /dev/null
+++ b/libs/portal/shared/ui/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-shared-ui',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/shared/ui',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/shared/ui/project.json b/libs/portal/shared/ui/project.json
new file mode 100644
index 0000000..26214a4
--- /dev/null
+++ b/libs/portal/shared/ui/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-shared-ui",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/shared/ui/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:portal-shared", "type:ui"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/shared/ui/jest.config.ts",
+                "tsConfig": "libs/portal/shared/ui/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/shared/ui/src/index.ts b/libs/portal/shared/ui/src/index.ts
new file mode 100644
index 0000000..216b620
--- /dev/null
+++ b/libs/portal/shared/ui/src/index.ts
@@ -0,0 +1,19 @@
+export * from './lib/components/category-view/category-view.component';
+export * from './lib/components/content-card/content-card.component';
+export * from './lib/components/content-rail-shell/content-rail-shell.component';
+export * from './lib/components/favorites-layout/favorites-layout.component';
+export * from './lib/components/global-favorites-list/global-favorites-list.component';
+export * from './lib/components/grid-list/grid-list.component';
+export * from './lib/components/playlist-error-view/playlist-error-view.component';
+export { ProgressCapsuleComponent } from 'components';
+export * from './lib/components/portal-collection-live-shell/portal-collection-live-shell.component';
+export * from './lib/components/portal-collection-shell/portal-collection-shell.component';
+export * from './lib/components/portal-empty-state/portal-empty-state.component';
+export * from './lib/components/search-form/search-form.component';
+export * from './lib/components/search-layout/search-layout.component';
+export { WatchedBadgeComponent } from 'components';
+export * from './lib/components/unified-collection/unified-collection-page.component';
+export * from './lib/components/unified-collection/unified-collection-detail.directive';
+export * from './lib/components/unified-collection/unified-live-tab.component';
+export * from './lib/navigation/navigation.component';
+export * from './lib/navigation/portal-rail-links.component';
diff --git a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html
new file mode 100644
index 0000000..cd7746e
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.html
@@ -0,0 +1,49 @@
+@if (items()?.length > 0) {
+    <div class="nav-list">
+        @for (item of items(); track $index) {
+            <a
+                class="nav-item category-item"
+                [attr.data-category-id]="$any(item).category_id ?? item.id"
+                [class.selected]="isSelected(item)"
+                [class.category-item--selected]="isSelected(item)"
+                [attr.aria-current]="isSelected(item) ? 'true' : null"
+                (click)="categoryClicked.emit(item)"
+            >
+                <span class="nav-item-label">
+                    {{
+                        item.category_name ||
+                            $any(item).name ||
+                            'No category name'
+                    }}
+                </span>
+                @if (showCounts()) {
+                    <div class="nav-item-meta item-count">
+                        {{ getItemCount(item) }}
+                    </div>
+                } @else if ($any(item).count !== undefined) {
+                    <div class="nav-item-meta item-count">
+                        {{ $any(item).count }}
+                    </div>
+                }
+            </a>
+        } @empty {
+            <app-playlist-error-view
+                [title]="'PORTALS.EMPTY_LIST_VIEW.TITLE' | translate"
+                [description]="
+                    'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate
+                "
+                [showActionButtons]="false"
+                [viewType]="'NO_SEARCH_RESULTS'"
+            />
+        }
+    </div>
+} @else {
+    <div class="category-empty-state">
+        <app-playlist-error-view
+            [title]="'No categories available'"
+            [showIllustration]="false"
+            [showActionButtons]="false"
+            [viewType]="'EMPTY_CATEGORY'"
+        />
+    </div>
+}
diff --git a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss
new file mode 100644
index 0000000..dd702b5
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.scss
@@ -0,0 +1,68 @@
+@use '../../../../../../../../apps/web/src/nav-list.scss';
+
+:host {
+    display: block;
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.category-item {
+    cursor: pointer;
+    width: auto;
+
+    .item-count {
+        opacity: 0.6;
+        font-size: 0.85em;
+        margin-left: 4px;
+    }
+}
+
+.category-item--selected .item-count {
+    color: var(--app-selection-color) !important;
+    opacity: 0.95;
+}
+
+mat-card-content {
+    overflow-wrap: break-word;
+    padding: 12px;
+}
+
+.category-empty-state {
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(14px, 3vh, 28px) 12px clamp(20px, 4vh, 34px);
+    box-sizing: border-box;
+
+    app-playlist-error-view {
+        --error-empty-illustration-size: clamp(132px, 15vw, 180px);
+        --error-empty-max-width: min(270px, 100%);
+        --error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
+        --error-empty-title-weight: 610;
+        --error-empty-title-spacing: -0.006em;
+        --error-empty-copy-gap: 4px;
+        --error-empty-description-opacity: 0.82;
+    }
+}
+
+@media (max-width: 800px) {
+    .category-item {
+        width: 100%;
+        margin: 4px;
+    }
+
+    .category-empty-state {
+        app-playlist-error-view {
+            --error-empty-illustration-size: 142px;
+            --error-empty-max-width: 230px;
+            --error-empty-title-size: 1.05rem;
+            --error-empty-title-weight: 600;
+        }
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.ts b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.ts
new file mode 100644
index 0000000..1e9c021
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/category-view/category-view.component.ts
@@ -0,0 +1,92 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    output,
+} from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PlaylistErrorViewComponent } from '../playlist-error-view/playlist-error-view.component';
+
+interface CategoryViewItem {
+    readonly category_id?: string | number;
+    readonly category_name?: string;
+    readonly count?: number;
+    readonly id?: string | number;
+    readonly name?: string;
+}
+
+@Component({
+    selector: 'app-category-view',
+    imports: [MatListModule, PlaylistErrorViewComponent, TranslatePipe],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './category-view.component.html',
+    styleUrls: ['./category-view.component.scss'],
+})
+export class CategoryViewComponent {
+    readonly items = input<CategoryViewItem[]>([]);
+    readonly selectedCategoryId = input<string | number | null | undefined>();
+    readonly itemCounts = input<Map<number, number>>(new Map());
+    readonly showCounts = input<boolean>(false);
+    private readonly hostEl = inject(ElementRef<HTMLElement>);
+
+    readonly categoryClicked = output<CategoryViewItem>();
+
+    constructor() {
+        effect(() => {
+            const selectedCategory = this.selectedCategoryId();
+            if (selectedCategory == null) return;
+
+            queueMicrotask(() => {
+                const container = this.hostEl.nativeElement as HTMLElement;
+                const candidates = Array.from(
+                    container.querySelectorAll('[data-category-id]')
+                ) as HTMLElement[];
+                const selected = candidates.find(
+                    (el) => el.dataset.categoryId === String(selectedCategory)
+                );
+                if (!selected) {
+                    return;
+                }
+
+                const containerRect = container.getBoundingClientRect();
+                const selectedRect = selected.getBoundingClientRect();
+                const targetTop =
+                    container.scrollTop +
+                    (selectedRect.top - containerRect.top) -
+                    container.clientHeight / 2 +
+                    selectedRect.height / 2;
+                const maxScrollTop = Math.max(
+                    0,
+                    container.scrollHeight - container.clientHeight
+                );
+
+                container.scrollTo({
+                    behavior: 'smooth',
+                    top: Math.min(maxScrollTop, Math.max(0, targetTop)),
+                });
+            });
+        });
+    }
+
+    isSelected(item: CategoryViewItem): boolean {
+        const selectedCategory = this.selectedCategoryId();
+        const itemId = item.category_id ?? item.id;
+
+        // Compare as strings to handle both numeric and string category IDs.
+        return (
+            selectedCategory != null &&
+            String(selectedCategory) === String(itemId)
+        );
+    }
+
+    getItemCount(item: CategoryViewItem): number {
+        // content.category_id references categories.id (internal DB id)
+        // For DB format categories, use id; for API format, use category_id
+        const itemId = Number(item.id ?? item.category_id);
+        return this.itemCounts().get(itemId) ?? 0;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.html b/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.html
new file mode 100644
index 0000000..d4d2812
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.html
@@ -0,0 +1,48 @@
+<div class="content-card" (click)="onCardClick()">
+    <div class="thumbnail-wrapper">
+        @if (showRemoveButton()) {
+            <button
+                mat-icon-button
+                class="remove-button"
+                [matTooltip]="removeTooltip()"
+                (click)="onRemoveClick($event)"
+            >
+                <mat-icon>close</mat-icon>
+            </button>
+        }
+
+        @if (posterUrl()) {
+            <img
+                [src]="posterUrl()"
+                [alt]="title()"
+                (error)="onImageError($event)"
+                class="poster"
+            />
+        } @else if (showPlaceholder()) {
+            <div class="poster-placeholder">
+                <mat-icon>{{ getPlaceholderIcon() }}</mat-icon>
+            </div>
+        } @else {
+            <img
+                src="./assets/images/default-poster.png"
+                [alt]="title()"
+                class="poster"
+            />
+        }
+
+        @if (type()) {
+            <span class="type-badge" [class]="type()">
+                {{ type() }}
+            </span>
+        }
+    </div>
+
+    <div class="card-info">
+        <h3>{{ title() }}</h3>
+        @if (date()) {
+            <p class="date-info">
+                {{ date() | date: 'd MMM, HH:mm' : undefined : currentLocale() }}
+            </p>
+        }
+    </div>
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.scss b/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.scss
new file mode 100644
index 0000000..6cc36de
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.scss
@@ -0,0 +1,21 @@
+@use '../../styles/content-grid' as grid;
+
+.content-card {
+    @include grid.content-card;
+
+    .thumbnail-wrapper {
+        @include grid.thumbnail-wrapper;
+
+        .remove-button {
+            @include grid.remove-button;
+        }
+
+        .type-badge {
+            @include grid.type-badge;
+        }
+    }
+
+    .card-info {
+        @include grid.card-info;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.ts b/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.ts
new file mode 100644
index 0000000..d4466e1
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/content-card/content-card.component.ts
@@ -0,0 +1,91 @@
+import { DatePipe } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    output,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { normalizeDateLocale } from '@iptvnator/pipes';
+import { TranslateService } from '@ngx-translate/core';
+import { startWith } from 'rxjs';
+
+@Component({
+    selector: 'app-content-card',
+    standalone: true,
+    imports: [DatePipe, MatIcon, MatIconButton, MatTooltip],
+    templateUrl: './content-card.component.html',
+    styleUrl: './content-card.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContentCardComponent {
+    private readonly translate = inject(TranslateService);
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    /** URL of the poster image */
+    readonly posterUrl = input<string>();
+
+    /** Title to display */
+    readonly title = input.required<string>();
+
+    /** Content type (live, movie, series) */
+    readonly type = input<string>();
+
+    /** Optional date to display (Date, string, or timestamp number) */
+    readonly date = input<Date | string | number>();
+
+    /** Whether to show the remove button */
+    readonly showRemoveButton = input<boolean>(false);
+
+    /** Tooltip text for the remove button */
+    readonly removeTooltip = input<string>('Remove');
+
+    /** Whether to show placeholder when no poster */
+    readonly showPlaceholder = input<boolean>(true);
+
+    /** Emitted when the card is clicked */
+    readonly cardClick = output<void>();
+
+    /** Emitted when the remove button is clicked */
+    readonly remove = output<void>();
+    readonly currentLocale = computed(() => {
+        this.languageTick();
+        return normalizeDateLocale(
+            this.translate.currentLang || this.translate.defaultLang
+        );
+    });
+
+    /** Get the icon for the placeholder based on type */
+    getPlaceholderIcon(): string {
+        switch (this.type()) {
+            case 'live':
+                return 'live_tv';
+            case 'series':
+                return 'tv';
+            default:
+                return 'movie';
+        }
+    }
+
+    onCardClick(): void {
+        this.cardClick.emit();
+    }
+
+    onRemoveClick(event: Event): void {
+        event.stopPropagation();
+        this.remove.emit();
+    }
+
+    onImageError(event: Event): void {
+        (event.target as HTMLImageElement).src =
+            './assets/images/default-poster.png';
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html
new file mode 100644
index 0000000..3e353d2
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.html
@@ -0,0 +1,57 @@
+<section class="rail" [class.rail--active]="active()">
+    <header class="rail__header">
+        <h3 class="rail__title">
+            <span class="rail__label">{{ label() }}</span>
+            @if ((totalCount() ?? 0) > 0) {
+                <span class="rail__count" aria-hidden="true">{{
+                    totalCount()
+                }}</span>
+            }
+        </h3>
+        @if (seeAllLink(); as link) {
+            <a class="rail__see-all" [routerLink]="link">
+                <span class="rail__see-all-label">
+                    @if (seeAllLabel()) {
+                        {{ seeAllLabel() }}
+                    } @else {
+                        {{ 'WORKSPACE.DASHBOARD.MANAGE_ALL' | translate }}
+                    }
+                </span>
+                <mat-icon>chevron_right</mat-icon>
+            </a>
+        }
+    </header>
+
+    <div class="rail__viewport">
+        <button
+            type="button"
+            class="rail__chev rail__chev--left"
+            [class.rail__chev--visible]="canScrollLeft()"
+            (click)="scrollBy(-1)"
+            aria-label="Scroll left"
+            tabindex="-1"
+        >
+            <mat-icon>chevron_left</mat-icon>
+        </button>
+
+        <div
+            #track
+            class="rail__track"
+            (scroll)="onScroll()"
+            role="list"
+        >
+            <ng-content></ng-content>
+        </div>
+
+        <button
+            type="button"
+            class="rail__chev rail__chev--right"
+            [class.rail__chev--visible]="canScrollRight()"
+            (click)="scrollBy(1)"
+            aria-label="Scroll right"
+            tabindex="-1"
+        >
+            <mat-icon>chevron_right</mat-icon>
+        </button>
+    </div>
+</section>
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
new file mode 100644
index 0000000..76123f0
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
@@ -0,0 +1,267 @@
+:host {
+    display: block;
+    --rail-gap: 16px;
+}
+
+.rail {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 0 0;
+    border: 1px solid transparent;
+    border-radius: 16px;
+    transition:
+        background 0.2s ease,
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+// Optional active accent — used by recently-added when a section matches the
+// currently-scoped content type. Mirrors the prior `.section--active` look.
+.rail--active {
+    padding: 12px 14px 0;
+    border-color: var(--app-selection-border);
+    background: linear-gradient(
+        145deg,
+        var(--app-selection-surface),
+        color-mix(in srgb, var(--app-selection-color) 6%, transparent)
+    );
+    box-shadow:
+        inset 0 0 0 1px var(--app-selection-border),
+        0 14px 24px -22px var(--app-selection-glow);
+
+    .rail__label {
+        color: var(--app-selection-color);
+    }
+}
+
+// ── Header ─────────────────────────────────────────────────────────────────
+.rail__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 0 2px;
+    min-height: 24px;
+}
+
+.rail__title {
+    margin: 0;
+    display: inline-flex;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.012em;
+    color: var(--app-heading-color, #1a1d23);
+}
+
+.rail__count {
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--app-muted-color, #8891a4);
+    font-variant-numeric: tabular-nums;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-muted-color, #8891a4) 18%,
+        transparent
+    );
+    letter-spacing: 0;
+}
+
+.rail__see-all {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 8px 4px 10px;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.005em;
+    color: var(--app-muted-color, #8891a4);
+    text-decoration: none;
+    transition:
+        color 0.15s ease,
+        background-color 0.15s ease;
+
+    mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        transition: transform 0.15s ease;
+    }
+
+    &:hover {
+        color: var(--app-selection-color, #2f7bff);
+        background: color-mix(
+            in srgb,
+            var(--app-selection-color, #2f7bff) 12%,
+            transparent
+        );
+
+        mat-icon {
+            transform: translateX(2px);
+        }
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-color, #2f7bff);
+        outline-offset: 2px;
+    }
+}
+
+// ── Viewport ───────────────────────────────────────────────────────────────
+.rail__viewport {
+    position: relative;
+    min-width: 0;
+
+    // Edge gradients hint at horizontal scroll without interaction.
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 32px;
+        pointer-events: none;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    &::before {
+        left: 0;
+        background: linear-gradient(
+            to right,
+            var(--app-content-bg, #161a22) 0%,
+            transparent 100%
+        );
+    }
+
+    &::after {
+        right: 0;
+        background: linear-gradient(
+            to left,
+            var(--app-content-bg, #161a22) 0%,
+            transparent 100%
+        );
+    }
+
+    &:has(.rail__chev--left.rail__chev--visible)::before {
+        opacity: 0.9;
+    }
+
+    &:has(.rail__chev--right.rail__chev--visible)::after {
+        opacity: 0.9;
+    }
+
+    &:hover .rail__chev--visible {
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+    }
+}
+
+.rail__track {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--rail-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline-start: 4px;
+    scrollbar-width: none;
+    padding: 4px 0 16px;
+    margin: -4px 0 0;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    // Callers style their own projected cards (width, scroll-snap-align,
+    // flex: 0 0 auto) — projected content stays in the parent's view
+    // encapsulation and can't be reached from here without `::ng-deep`.
+}
+
+// ── Chevron — streaming-app circle (matches dashboard rail) ────────────────
+.rail__chev {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%) scale(0.96);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: #fff;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 0.18s ease,
+        background-color 0.18s ease,
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+    z-index: 2;
+    box-shadow:
+        0 4px 14px -4px rgba(0, 0, 0, 0.55),
+        0 0 0 0 rgba(255, 255, 255, 0);
+
+    mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+    }
+
+    &--visible {
+        opacity: 0.5;
+        pointer-events: auto;
+    }
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.88);
+        transform: translateY(-50%) scale(1.08);
+        box-shadow:
+            0 8px 22px -6px rgba(0, 0, 0, 0.65),
+            0 0 0 4px rgba(255, 255, 255, 0.06);
+    }
+
+    &:active {
+        transform: translateY(-50%) scale(0.96);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-color, #78adff);
+        outline-offset: 3px;
+    }
+
+    &--left {
+        left: 6px;
+    }
+
+    &--right {
+        right: 6px;
+    }
+}
+
+@media (hover: none) {
+    .rail__chev {
+        display: none;
+    }
+
+    .rail__viewport::before,
+    .rail__viewport::after {
+        display: none;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.ts b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.ts
new file mode 100644
index 0000000..1f7593e
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.ts
@@ -0,0 +1,95 @@
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    OnDestroy,
+    effect,
+    input,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+
+/**
+ * Reusable horizontal-rail chrome: label + count badge + "see all" link,
+ * scroll-snap track with projected cards, fade-in chevrons and edge gradients
+ * that appear when scroll is possible. Matches the dashboard rail pattern so
+ * any rail-style surface in the app reads as part of the same design system.
+ *
+ * Card markup is projected — callers supply whatever card component fits the
+ * surface (simple poster tile, `app-content-card`, etc.). The shell only
+ * owns the container, header, and navigation affordances.
+ */
+@Component({
+    selector: 'app-content-rail-shell',
+    standalone: true,
+    imports: [MatIcon, RouterLink, TranslatePipe],
+    templateUrl: './content-rail-shell.component.html',
+    styleUrl: './content-rail-shell.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContentRailShellComponent implements AfterViewInit, OnDestroy {
+    readonly label = input.required<string>();
+    /** Subtle pill next to the label. Hidden when null or <= 0. */
+    readonly totalCount = input<number | null>(null);
+    readonly seeAllLink = input<string[] | null>(null);
+    /**
+     * Already-translated label for the see-all link. Falls back to the
+     * dashboard's "Manage all" translation when null, so dashboard callers
+     * don't need to pass anything.
+     */
+    readonly seeAllLabel = input<string | null>(null);
+    /** Optional active-accent decoration (e.g. the currently-scoped section). */
+    readonly active = input<boolean>(false);
+
+    private readonly track = viewChild.required<ElementRef<HTMLDivElement>>('track');
+
+    readonly canScrollLeft = signal(false);
+    readonly canScrollRight = signal(false);
+    private readonly viewReady = signal(false);
+
+    private resizeObserver?: ResizeObserver;
+
+    constructor() {
+        // Re-measure whenever the track contents change (projected cards).
+        effect(() => {
+            if (!this.viewReady()) return;
+            // Wait one frame so projected content lays out first.
+            requestAnimationFrame(() => this.updateScrollState());
+        });
+    }
+
+    ngAfterViewInit(): void {
+        this.viewReady.set(true);
+        this.updateScrollState();
+        this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
+        this.resizeObserver.observe(this.track().nativeElement);
+    }
+
+    ngOnDestroy(): void {
+        this.resizeObserver?.disconnect();
+    }
+
+    onScroll(): void {
+        this.updateScrollState();
+    }
+
+    scrollBy(direction: 1 | -1): void {
+        const el = this.track().nativeElement;
+        el.scrollBy({
+            left: direction * el.clientWidth * 0.85,
+            behavior: 'smooth',
+        });
+    }
+
+    private updateScrollState(): void {
+        const el = this.track().nativeElement;
+        this.canScrollLeft.set(el.scrollLeft > 4);
+        this.canScrollRight.set(
+            el.scrollLeft + el.clientWidth < el.scrollWidth - 4
+        );
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.html b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.html
new file mode 100644
index 0000000..8b2901c
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.html
@@ -0,0 +1,76 @@
+@if (!isWorkspaceLayout) {
+    <div
+        class="sidebar"
+        appResizable
+        [minWidth]="250"
+        [maxWidth]="600"
+        [defaultWidth]="400"
+        storageKey="sidebar-width"
+    >
+        <div class="sidebar-header">
+            <app-playlist-switcher
+                class="switcher"
+                [currentTitle]="playlistTitle()"
+                [subtitle]="playlistSubtitle()"
+            />
+        </div>
+        <app-category-view
+            [items]="categories()"
+            [selectedCategoryId]="$any(selectedCategoryId())"
+            (categoryClicked)="setCategoryId($event.category_id)"
+        />
+    </div>
+}
+
+<div class="main-content">
+    <div class="content-header">
+        <div class="category-meta">
+            <h2 class="category-title">
+                {{ titleTranslationString() | translate }}
+            </h2>
+            @if (selectedCategoryId()) {
+                <div class="category-subtitle">{{ selectedCategoryId() }}</div>
+            }
+        </div>
+        @if (showHeaderAction() && !isWorkspaceLayout) {
+            <button
+                type="button"
+                mat-icon-button
+                [matTooltip]="headerActionTooltip()"
+                (click)="onHeaderActionClick()"
+            >
+                <mat-icon>{{ headerActionIcon() }}</mat-icon>
+            </button>
+        }
+    </div>
+    <div class="scrollable-content">
+        @if (favorites().length) {
+            <div class="items-grid">
+                @for (item of favorites(); track $index) {
+                    <app-content-card
+                        [posterUrl]="item.poster_url || item.cover"
+                        [title]="
+                            item?.title ||
+                            item?.details?.info?.name ||
+                            'Unknown'
+                        "
+                        [type]="item.type"
+                        [date]="item.added_at"
+                        [showRemoveButton]="true"
+                        [removeTooltip]="
+                            removeTooltip() ||
+                            ('CHANNELS.REMOVE_FAVORITE' | translate)
+                        "
+                        (cardClick)="openFavorite(item)"
+                        (remove)="removeFromFavorites(item)"
+                    />
+                }
+            </div>
+        } @else {
+            <div class="no-items">
+                <mat-icon>{{ emptyIcon() }}</mat-icon>
+                <p>No items in the selected category</p>
+            </div>
+        }
+    </div>
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
new file mode 100644
index 0000000..64dc76e
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
@@ -0,0 +1,120 @@
+@use '@angular/material' as mat;
+@use '../../styles/content-grid' as grid;
+
+:host {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; // Important for proper flex behavior
+}
+
+.content-header {
+    padding: 8px 12px;
+    min-height: 48px;
+    background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid var(--app-separator);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.category-meta {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+}
+
+.category-title {
+    margin: 0;
+    font-size: 0.94rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--mat-sys-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// Informational badge — primary-tinted pill with definition ring
+.category-subtitle {
+    white-space: nowrap;
+    flex-shrink: 0;
+    font-size: 0.70rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: capitalize;
+    line-height: 1;
+    color: var(--mat-sys-primary);
+    background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface-container-high));
+    padding: 4px 10px;
+    border-radius: 999px;
+    box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent),
+        0 1px 3px rgba(0, 0, 0, 0.18);
+}
+
+.scrollable-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.favorites-container {
+    padding: 20px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.items-grid {
+    @include grid.content-grid(140px, 20px);
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.no-items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+        margin-bottom: 1rem;
+    }
+
+    p {
+        font-size: 0.85rem;
+        margin: 0;
+        opacity: 0.65;
+    }
+}
+
+.sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    button {
+        @include mat.form-field-density(-5);
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.ts b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.ts
new file mode 100644
index 0000000..c180481
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.ts
@@ -0,0 +1,96 @@
+import { Component, inject, input, output } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute } from '@angular/router';
+import { PlaylistSwitcherComponent } from '@iptvnator/playlist/shared/ui';
+import { isWorkspaceLayoutRoute } from '@iptvnator/portal/shared/util';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ResizableDirective } from 'components';
+import { StalkerPortalItem, XtreamCategory } from 'shared-interfaces';
+import { CategoryViewComponent } from '../category-view/category-view.component';
+import { ContentCardComponent } from '../content-card/content-card.component';
+
+interface FavoriteLayoutSelection {
+    readonly category_id?: string | number;
+}
+
+export interface FavoriteLayoutItem {
+    readonly added_at?: string | number;
+    readonly content_id?: number;
+    readonly category_id?: string | number;
+    readonly cover?: string;
+    readonly details?: {
+        readonly info?: {
+            readonly name?: string;
+        };
+    };
+    readonly id?: string | number;
+    readonly name?: string;
+    readonly o_name?: string;
+    readonly playlist_id?: string;
+    readonly playlist_name?: string;
+    readonly poster_url?: string;
+    readonly source?: 'xtream' | 'stalker' | 'm3u';
+    readonly stalker_item?: StalkerPortalItem;
+    readonly stream_icon?: string;
+    readonly title?: string;
+    readonly type?: string;
+    readonly viewed_at?: string;
+    readonly xtream_id?: string | number;
+}
+
+@Component({
+    selector: 'app-favorites-layout',
+    templateUrl: './favorites-layout.component.html',
+    styleUrls: [
+        './favorites-layout.component.scss',
+        '../../styles/portal-sidebar.scss',
+    ],
+    imports: [
+        CategoryViewComponent,
+        ContentCardComponent,
+        MatIcon,
+        MatIconButton,
+        PlaylistSwitcherComponent,
+        ResizableDirective,
+        TranslatePipe,
+        MatTooltip,
+    ],
+})
+export class FavoritesLayoutComponent {
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(inject(ActivatedRoute));
+
+    readonly categories = input<XtreamCategory[]>([]);
+    readonly favorites = input<FavoriteLayoutItem[]>([]);
+    readonly playlistSubtitle = input<string>('');
+    readonly playlistTitle = input<string>('Playlist');
+    readonly selectedCategoryId = input<string>('movie');
+    readonly titleTranslationString = input<string>('CHANNELS.FAVORITES');
+    readonly removeTooltip = input<string>('');
+    readonly emptyIcon = input<string>('favorite_border');
+    readonly showHeaderAction = input<boolean>(false);
+    readonly headerActionIcon = input<string>('delete_sweep');
+    readonly headerActionTooltip = input<string>('');
+
+    readonly categoryClicked = output<FavoriteLayoutSelection>();
+    readonly removeFavorite = output<FavoriteLayoutItem>();
+    readonly openItem = output<FavoriteLayoutItem>();
+    readonly headerActionClicked = output<void>();
+
+    setCategoryId(categoryId: string | number) {
+        this.categoryClicked.emit({ category_id: categoryId });
+    }
+
+    removeFromFavorites(item: FavoriteLayoutItem) {
+        this.removeFavorite.emit(item);
+    }
+
+    openFavorite(item: FavoriteLayoutItem) {
+        this.openItem.emit(item);
+    }
+
+    onHeaderActionClick() {
+        this.headerActionClicked.emit();
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html
new file mode 100644
index 0000000..675ee1f
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html
@@ -0,0 +1,49 @@
+<div
+    class="nav-list"
+    cdkDropList
+    [cdkDropListDisabled]="!canDragDrop()"
+    (cdkDropListDropped)="onDrop($event)"
+>
+    @if (enrichedChannels().length === 0) {
+        <div class="empty-state">
+            <mat-icon class="empty-icon">star_border</mat-icon>
+            @if (hasSearchTerm()) {
+                <p class="empty-title">
+                    {{ 'WORKSPACE.GLOBAL_FAVORITES.NO_RESULTS' | translate }}
+                </p>
+                <p class="empty-hint">
+                    {{
+                        'WORKSPACE.GLOBAL_FAVORITES.NO_RESULTS_HINT'
+                            | translate
+                    }}
+                </p>
+            } @else {
+                <p class="empty-title">
+                    {{
+                        'WORKSPACE.GLOBAL_FAVORITES.EMPTY_TITLE' | translate
+                    }}
+                </p>
+                <p class="empty-hint">
+                    {{ 'WORKSPACE.GLOBAL_FAVORITES.EMPTY_HINT' | translate }}
+                </p>
+            }
+        </div>
+    }
+
+    @for (ch of enrichedChannels(); track trackByUid($index, ch)) {
+        <app-channel-list-item
+            [isDraggable]="canDragDrop()"
+            [logo]="ch.logo"
+            [name]="ch.name"
+            [selected]="activeUid() === ch.uid"
+            [showEpg]="true"
+            [epgProgram]="ch.currentEpgProgram"
+            [progressPercentage]="ch.progressPercentage"
+            [showFavoriteButton]="true"
+            [isFavorite]="true"
+            [showProgramInfoButton]="true"
+            (clicked)="onChannelClick(ch)"
+            (favoriteToggled)="onFavoriteToggled(ch)"
+        />
+    }
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
new file mode 100644
index 0000000..3bb74e8
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
@@ -0,0 +1,72 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.search-panel {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -10px;
+    flex-shrink: 0;
+}
+
+.search-bar {
+    width: 90%;
+    @include mat.form-field-density(-5);
+}
+
+:host ::ng-deep .search-bar div {
+    border-radius: 20px;
+}
+
+:host ::ng-deep .search-bar div[matformfieldlineripple],
+:host ::ng-deep .search-bar .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
+
+.nav-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 8px 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+
+    .empty-icon {
+        font-size: 48px;
+        height: 48px;
+        width: 48px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+    }
+
+    .empty-title {
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0 0 8px;
+    }
+
+    .empty-hint {
+        font-size: 12px;
+        opacity: 0.7;
+        margin: 0;
+        max-width: 260px;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.ts b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.ts
new file mode 100644
index 0000000..d8bbad6
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.ts
@@ -0,0 +1,127 @@
+import {
+    CdkDragDrop,
+    DragDropModule,
+    moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    output,
+} from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { ChannelListItemComponent } from 'components';
+import { EpgProgram } from 'shared-interfaces';
+import {
+    DEFAULT_FAVORITES_CHANNEL_SORT_MODE,
+    FavoritesChannelSortMode,
+    sortFavoriteChannelItems,
+    UnifiedFavoriteChannel,
+} from '@iptvnator/portal/shared/util';
+import { TranslateModule } from '@ngx-translate/core';
+
+export interface EnrichedUnifiedFavorite extends UnifiedFavoriteChannel {
+    currentEpgProgram: EpgProgram | null;
+    progressPercentage: number;
+}
+
+@Component({
+    selector: 'app-global-favorites-list',
+    templateUrl: './global-favorites-list.component.html',
+    styleUrl: './global-favorites-list.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        ChannelListItemComponent,
+        DragDropModule,
+        MatIconModule,
+        TranslateModule,
+    ],
+})
+export class GlobalFavoritesListComponent {
+    readonly channels = input.required<UnifiedFavoriteChannel[]>();
+    readonly epgMap = input<Map<string, EpgProgram | null>>(new Map());
+    readonly progressTick = input<number>(0);
+    readonly activeUid = input<string | null>(null);
+    readonly searchTermInput = input('');
+    readonly draggable = input(true);
+    readonly sortMode = input<FavoritesChannelSortMode>(
+        DEFAULT_FAVORITES_CHANNEL_SORT_MODE
+    );
+
+    readonly channelSelected = output<UnifiedFavoriteChannel>();
+    readonly channelsReordered = output<UnifiedFavoriteChannel[]>();
+    readonly favoriteToggled = output<UnifiedFavoriteChannel>();
+
+    readonly isCustomSort = computed(() => this.sortMode() === 'custom');
+    readonly canDragDrop = computed(
+        () => this.draggable() && this.isCustomSort() && !this.hasSearchTerm()
+    );
+
+    readonly hasSearchTerm = computed(
+        () => this.searchTermInput().trim().length > 0
+    );
+
+    readonly enrichedChannels = computed((): EnrichedUnifiedFavorite[] => {
+        const channels = this.channels();
+        const epgMap = this.epgMap();
+        const term = this.searchTermInput().trim().toLowerCase();
+        this.progressTick();
+
+        const filtered = term
+            ? channels.filter((ch) => ch.name.toLowerCase().includes(term))
+            : channels;
+
+        const sorted = sortFavoriteChannelItems(filtered, this.sortMode(), {
+            getName: (ch) => ch.name,
+            getAddedAt: (ch) => ch.addedAt,
+        });
+
+        return sorted.map((ch) => {
+            const epgKey = ch.tvgId?.trim() || ch.name?.trim();
+            const currentEpgProgram = epgKey
+                ? (epgMap.get(epgKey) ?? null)
+                : null;
+            return {
+                ...ch,
+                currentEpgProgram,
+                progressPercentage: this.calcProgress(currentEpgProgram),
+            };
+        });
+    });
+
+    onChannelClick(channel: UnifiedFavoriteChannel): void {
+        this.channelSelected.emit(channel);
+    }
+
+    onFavoriteToggled(channel: UnifiedFavoriteChannel): void {
+        this.favoriteToggled.emit(channel);
+    }
+
+    onDrop(event: CdkDragDrop<EnrichedUnifiedFavorite[]>): void {
+        if (!this.canDragDrop()) {
+            return;
+        }
+
+        const list = [...this.channels()];
+        moveItemInArray(list, event.previousIndex, event.currentIndex);
+        this.channelsReordered.emit(list);
+    }
+
+    trackByUid(_: number, ch: EnrichedUnifiedFavorite): string {
+        return ch.uid;
+    }
+
+    private calcProgress(program: EpgProgram | null | undefined): number {
+        if (!program) {
+            return 0;
+        }
+
+        const now = Date.now();
+        const start = new Date(program.start).getTime();
+        const stop = new Date(program.stop).getTime();
+        const total = stop - start;
+        const elapsed = now - start;
+        return Math.min(100, Math.max(0, (elapsed / total) * 100));
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
new file mode 100644
index 0000000..86f4f4f
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
@@ -0,0 +1,147 @@
+@use '../../styles/skeleton';
+
+// ─── Card base ───────────────────────────────────────────────────────────────
+mat-card {
+    overflow: hidden;
+    transition:
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+    box-shadow: none;
+    background: transparent;
+}
+
+mat-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+// ─── Grid layout ─────────────────────────────────────────────────────────────
+.grid {
+    mat-card {
+        cursor: pointer;
+        width: 100%;
+
+        mat-card-content {
+            padding: 0;
+            margin: 0;
+        }
+
+        .card-thumbnail-container {
+            position: relative;
+            width: 100%;
+            border-radius: 10px;
+            overflow: hidden;
+            aspect-ratio: 2 / 3; // maintain poster ratio
+            background: var(--mat-sys-surface-container-high);
+        }
+
+        .stream-icon {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 10px;
+            display: block;
+            // No hardcoded light bg — uses parent container bg
+            background: transparent;
+        }
+
+        .stream-icon-placeholder {
+            width: 100%;
+            height: 100%;
+            min-height: 200px;
+            // Use graphite surface token, not hardcoded grey
+            background: var(--mat-sys-surface-container-high);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+            border-radius: 10px;
+
+            &::after {
+                content: 'No cover';
+                font-size: 0.75rem;
+                font-weight: 500;
+                letter-spacing: 0.03em;
+            }
+        }
+
+        .title {
+            margin-top: 8px;
+            padding: 0 2px;
+            word-break: break-word;
+            text-align: center;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            font-size: 0.8rem;
+            line-height: 1.35;
+            color: var(--app-body-color, var(--mat-sys-on-surface-variant));
+        }
+    }
+}
+
+// ─── Rating badge ─────────────────────────────────────────────────────────────
+.rating {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    // Use a solid or highly opaque dark pill to avoid expensive backdrop-filter
+    background: rgba(0, 0, 0, 0.85);
+    color: #4ade80; // green-400, readable across themes
+    font-size: 0.72rem;
+    font-weight: 600;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 5px;
+    gap: 2px;
+
+    mat-icon {
+        font-size: 13px;
+        height: 14px;
+        width: 14px;
+    }
+}
+
+.grid-empty-state {
+    grid-column: 1 / -1;
+    min-height: clamp(320px, 56vh, 620px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(12px, 2.8vw, 30px);
+    box-sizing: border-box;
+
+    app-playlist-error-view {
+        --error-empty-illustration-size: clamp(170px, 18vw, 250px);
+        --error-empty-max-width: min(480px, 100%);
+        --error-empty-title-size: clamp(1.45rem, 2vw, 1.9rem);
+        --error-empty-description-size: clamp(0.95rem, 1.15vw, 1.05rem);
+        --error-empty-title-weight: 660;
+        --error-empty-title-spacing: -0.014em;
+        --error-empty-copy-gap: 10px;
+        --error-empty-description-line-height: 1.44;
+        --error-empty-description-opacity: 0.9;
+    }
+}
+
+
+@media (max-width: 768px) {
+    .grid-empty-state {
+        min-height: clamp(260px, 48vh, 460px);
+        padding: 14px;
+
+        app-playlist-error-view {
+            --error-empty-illustration-size: 165px;
+            --error-empty-max-width: 310px;
+            --error-empty-title-size: 1.3rem;
+            --error-empty-description-size: 0.9rem;
+            --error-empty-title-weight: 640;
+            --error-empty-copy-gap: 8px;
+        }
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.spec.ts b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.spec.ts
new file mode 100644
index 0000000..f783b26
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.spec.ts
@@ -0,0 +1,30 @@
+import {
+    formatGridRating,
+    resolveGridRating,
+} from './grid-list.component';
+
+describe('grid list rating helpers', () => {
+    it('rounds numeric ratings to a single decimal place', () => {
+        expect(formatGridRating(7.243)).toBe('7.2');
+        expect(formatGridRating('6.529')).toBe('6.5');
+        expect(formatGridRating('6')).toBe('6.0');
+    });
+
+    it('prefers imdb ratings before generic ratings when both are present', () => {
+        expect(
+            resolveGridRating({
+                rating: '6.529',
+                rating_imdb: '7.243',
+            })
+        ).toBe('7.2');
+    });
+
+    it('falls back to the generic rating when imdb rating is blank', () => {
+        expect(
+            resolveGridRating({
+                rating: '5.67',
+                rating_imdb: '  ',
+            })
+        ).toBe('5.7');
+    });
+});
diff --git a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.ts b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.ts
new file mode 100644
index 0000000..58e635a
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.ts
@@ -0,0 +1,186 @@
+import { Component, computed, input, output } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    ProgressCapsuleComponent,
+    WatchedBadgeComponent,
+} from 'components';
+import { PlaylistErrorViewComponent } from '../playlist-error-view/playlist-error-view.component';
+
+interface GridListItem {
+    id?: number | string;
+    is_series?: number | string | boolean;
+    xtream_id?: number | string;
+    series_id?: number | string;
+    stream_id?: number | string;
+    category_id?: number | string;
+    poster_url?: string;
+    cover?: string;
+    title?: string;
+    o_name?: string;
+    name?: string;
+    rating?: string | number;
+    rating_imdb?: string | number;
+    progress?: number;
+    isWatched?: boolean;
+    hasSeriesProgress?: boolean;
+    [key: string]: unknown;
+}
+
+export function formatGridRating(value: unknown): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value.toFixed(1);
+    }
+
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+
+    const numericRating = Number.parseFloat(trimmed);
+    return Number.isFinite(numericRating) ? numericRating.toFixed(1) : trimmed;
+}
+
+export function resolveGridRating(
+    item: Pick<GridListItem, 'rating' | 'rating_imdb'>
+): string | undefined {
+    return formatGridRating(item.rating_imdb) ?? formatGridRating(item.rating);
+}
+
+@Component({
+    selector: 'app-grid-list',
+    template: `<div
+            class="grid grid-cols-[repeat(auto-fill,minmax(148px,1fr))] gap-4"
+        >
+            @if (isLoading()) {
+                @for (row of skeletonRows(); track row) {
+                    <div class="grid-skeleton-card" aria-hidden="true">
+                        <div class="grid-skeleton-thumb">
+                            <span class="grid-skeleton-badge"></span>
+                        </div>
+                        <div class="grid-skeleton-title">
+                            <span
+                                class="grid-skeleton-line grid-skeleton-line--primary"
+                            ></span>
+                            <span
+                                class="grid-skeleton-line grid-skeleton-line--secondary"
+                            ></span>
+                        </div>
+                    </div>
+                }
+            } @else {
+                @for (item of items(); track $index) {
+                    @let i = $any(item);
+                    <mat-card (click)="itemClicked.emit(item)">
+                        @let poster = i.poster_url ?? i.cover;
+                        <div class="card-thumbnail-container">
+                            <img
+                                class="stream-icon"
+                                [src]="
+                                    poster ||
+                                    './assets/images/default-poster.png'
+                                "
+                                (error)="
+                                    $event.target.src =
+                                        './assets/images/default-poster.png'
+                                "
+                                loading="lazy"
+                                alt="logo"
+                            />
+                            @if (i.progress && i.progress > 0) {
+                                <app-progress-capsule [progress]="i.progress" />
+                            }
+                            @if (i.isWatched) {
+                                <app-watched-badge
+                                    [isWatched]="true"
+                                    icon="check_circle"
+                                />
+                            } @else if (i.hasSeriesProgress) {
+                                <app-watched-badge
+                                    [isWatched]="true"
+                                    icon="remove_red_eye"
+                                />
+                            }
+                        </div>
+                        @let rating = resolveRating(i);
+                        @if (rating) {
+                            <div
+                                class="rating"
+                                [matTooltip]="'XTREAM.IMDB_RATING' | translate"
+                            >
+                                <mat-icon>star</mat-icon>{{ rating }}
+                            </div>
+                        }
+                        @let title = i.title ?? i.o_name ?? i.name;
+                        <mat-card-actions>
+                            <div class="title">
+                                {{ title || 'No name' }}
+                            </div>
+                        </mat-card-actions>
+                    </mat-card>
+                } @empty {
+                    <div class="grid-empty-state">
+                        <app-playlist-error-view
+                            [title]="
+                                'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE'
+                                    | translate
+                            "
+                            [description]="
+                                'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION'
+                                    | translate
+                            "
+                            [showActionButtons]="false"
+                            [viewType]="'EMPTY_CATEGORY'"
+                        />
+                    </div>
+                }
+            }
+        </div>
+        @if (showPaginator() && items()?.length > 0) {
+            <mat-paginator
+                [pageIndex]="pageIndex()"
+                [length]="totalPages() * limit()"
+                [pageSize]="limit()"
+                [pageSizeOptions]="pageSizeOptions()"
+                (page)="pageChange.emit($event)"
+                aria-label="Select page"
+            />
+        } `,
+    styleUrl: './grid-list.component.scss',
+    imports: [
+        TranslatePipe,
+        PlaylistErrorViewComponent,
+        MatCardModule,
+        MatIcon,
+        MatTooltip,
+        MatPaginatorModule,
+        ProgressCapsuleComponent,
+        WatchedBadgeComponent,
+    ],
+})
+export class GridListComponent {
+    readonly items = input<GridListItem[]>();
+    readonly isLoading = input<boolean>();
+    readonly showPaginator = input(true);
+    readonly itemClicked = output<GridListItem>();
+    readonly pageChange = output<PageEvent>();
+
+    readonly pageIndex = input<number>();
+    readonly totalPages = input<number>();
+    readonly limit = input<number>();
+    readonly pageSizeOptions = input<number[]>();
+    protected readonly resolveRating = resolveGridRating;
+
+    readonly skeletonRows = computed(() => {
+        const preferredCount = this.limit() ?? 12;
+        const count = Math.max(8, Math.min(18, preferredCount));
+        return Array.from({ length: count }, (_, index) => index);
+    });
+}
diff --git a/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.html b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.html
new file mode 100644
index 0000000..a5eb6b0
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.html
@@ -0,0 +1,45 @@
+<div
+    class="error-view"
+    [class.error-view--empty-category]="viewType() === 'EMPTY_CATEGORY'"
+    [class.error-view--text-only]="!showIllustration()"
+>
+    @if (showIllustration()) {
+        @if (viewType() === 'ERROR') {
+            <img
+                alt="Something went wrong"
+                src="./assets/images/broken-tv.svg"
+            />
+        } @else if (viewType() === 'EMPTY_CATEGORY') {
+            <img
+                alt="empty category"
+                class="error-view__illustration"
+                src="./assets/images/empty-category.svg"
+            />
+        } @else if (viewType() === 'NO_SEARCH_RESULTS') {
+            <mat-icon class="icon">search</mat-icon>
+        }
+    }
+    <div class="error-view__copy">
+        <h3 class="error-view__title">{{ title() }}</h3>
+        @if (description()) {
+            <p class="error-view__description">{{ description() }}</p>
+        }
+    </div>
+
+    @if (showActionButtons()) {
+        <div class="error-view__actions">
+            <button mat-stroked-button routerLink="/">
+                <mat-icon>home</mat-icon>
+                {{ 'PORTALS.ERROR_VIEW.HOME' | translate }}
+            </button>
+            <button mat-stroked-button (click)="openPlaylistDetails()">
+                <mat-icon>settings</mat-icon>
+                {{ 'PORTALS.ERROR_VIEW.PLAYLIST_SETTINGS' | translate }}
+            </button>
+            <button mat-stroked-button color="warn" (click)="removeClicked()">
+                <mat-icon>delete</mat-icon>
+                {{ 'PORTALS.ERROR_VIEW.DELETE' | translate }}
+            </button>
+        </div>
+    }
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.scss b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.scss
new file mode 100644
index 0000000..339477b
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.scss
@@ -0,0 +1,110 @@
+:host {
+    display: block;
+    width: 100%;
+    min-height: 0;
+}
+
+.error-view {
+    --error-view-illustration-size: var(
+        --error-empty-illustration-size,
+        clamp(170px, 28vw, 260px)
+    );
+    --error-view-copy-width: var(--error-empty-max-width, 420px);
+    --error-view-copy-gap: var(--error-empty-copy-gap, 8px);
+    --error-view-title-size: var(--error-empty-title-size, 1.55rem);
+    --error-view-title-weight: var(--error-empty-title-weight, 640);
+    --error-view-title-spacing: var(--error-empty-title-spacing, -0.012em);
+    --error-view-description-size: var(--error-empty-description-size, 0.98rem);
+    --error-view-description-line-height: var(
+        --error-empty-description-line-height,
+        1.4
+    );
+    --error-view-description-opacity: var(
+        --error-empty-description-opacity,
+        0.88
+    );
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    padding: clamp(12px, 2.2vw, 26px);
+    gap: 14px;
+    text-align: center;
+    box-sizing: border-box;
+    color: var(--app-body-color, var(--mat-sys-on-surface-variant));
+
+    img {
+        width: min(100%, var(--error-view-illustration-size));
+        height: auto;
+        filter: invert(80%);
+    }
+}
+
+.icon {
+    font-size: 64px;
+    height: 64px;
+    width: 64px;
+}
+
+.error-view--empty-category .error-view__illustration {
+    margin-top: clamp(0px, 1vh, 8px);
+}
+
+.error-view--text-only {
+    gap: 6px;
+}
+
+.error-view__copy {
+    max-width: var(--error-view-copy-width);
+    display: grid;
+    gap: var(--error-view-copy-gap);
+}
+
+.error-view__title {
+    margin: 0;
+    font-size: var(--error-view-title-size);
+    font-weight: var(--error-view-title-weight);
+    line-height: 1.12;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+    letter-spacing: var(--error-view-title-spacing);
+    text-wrap: balance;
+}
+
+.error-view__description {
+    margin: 0;
+    font-size: var(--error-view-description-size);
+    line-height: var(--error-view-description-line-height);
+    color: inherit;
+    opacity: var(--error-view-description-opacity);
+    text-wrap: balance;
+}
+
+.error-view__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+}
+
+@media (max-width: 1024px) {
+    .error-view {
+        --error-view-title-size: var(--error-empty-title-size, 1.4rem);
+        --error-view-description-size: var(
+            --error-empty-description-size,
+            0.92rem
+        );
+    }
+}
+
+::ng-deep {
+    .dark-theme {
+        .error-view {
+            img {
+                filter: invert(10%) !important;
+            }
+        }
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts
new file mode 100644
index 0000000..435859a
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/playlist-error-view/playlist-error-view.component.ts
@@ -0,0 +1,62 @@
+import { Component, inject, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { Router, RouterLink } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { PlaylistInfoComponent } from '@iptvnator/playlist/shared/ui';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { DialogService } from 'components';
+import { PlaylistActions } from 'm3u-state';
+
+@Component({
+    selector: 'app-playlist-error-view',
+    templateUrl: './playlist-error-view.component.html',
+    styleUrls: ['./playlist-error-view.component.scss'],
+    imports: [MatButtonModule, MatIconModule, RouterLink, TranslateModule],
+})
+export class PlaylistErrorViewComponent {
+    private dialog = inject(MatDialog);
+    private dialogService = inject(DialogService);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private router = inject(Router);
+    private store = inject(Store);
+    private translate = inject(TranslateService);
+
+    private readonly currentPlaylist = this.playlistContext.activePlaylist;
+
+    readonly description = input<string>(undefined);
+    readonly showIllustration = input(true);
+    readonly showActionButtons = input(true);
+    readonly title = input<string>(undefined);
+    readonly viewType = input<'ERROR' | 'EMPTY_CATEGORY' | 'NO_SEARCH_RESULTS'>(
+        'ERROR'
+    );
+
+    openPlaylistDetails() {
+        this.dialog.open(PlaylistInfoComponent, {
+            data: this.currentPlaylist(),
+        });
+    }
+
+    removeClicked(): void {
+        const currentPlaylist = this.currentPlaylist();
+        if (!currentPlaylist?._id) {
+            return;
+        }
+
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.TITLE'),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
+            ),
+            onConfirm: (): void => this.removePlaylist(currentPlaylist._id),
+        });
+    }
+
+    removePlaylist(playlistId: string): void {
+        this.store.dispatch(PlaylistActions.removePlaylist({ playlistId }));
+        this.router.navigate(['/']);
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.html b/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.html
new file mode 100644
index 0000000..41c3228
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.html
@@ -0,0 +1,55 @@
+<div
+    class="sidebar"
+    appResizable
+    [minWidth]="250"
+    [maxWidth]="600"
+    [defaultWidth]="400"
+    storageKey="sidebar-width"
+>
+    <div class="sidebar-header category-content-header">
+        <div class="category-meta">
+            <h2 class="category-title">{{ title() }}</h2>
+            <div class="category-subtitle">{{ subtitle() }}</div>
+        </div>
+        <ng-content select="[liveHeaderActions]" />
+    </div>
+
+    <ng-content select="[liveChannels]" />
+</div>
+
+<div class="content-container">
+    @if (hasSelection()) {
+        @if (streamUrl() && isEmbeddedPlayer()) {
+            <div class="video-player">
+                <app-web-player-view [streamUrl]="streamUrl()" />
+            </div>
+        }
+
+        <div class="epg">
+            <div class="epg-content">
+                @if (epgItems().length > 0) {
+                    <app-epg-view [epgItems]="epgItems()" />
+                }
+
+                @if (isLoadingEpg()) {
+                    <div class="loading-indicator">
+                        <mat-spinner diameter="24" />
+                    </div>
+                }
+
+                @if (hasMoreEpg() && !isLoadingEpg()) {
+                    <div class="load-more-epg">
+                        <button mat-button (click)="onLoadMoreEpg()">
+                            {{ 'CHANNELS.LOAD_MORE' | translate }}
+                        </button>
+                    </div>
+                }
+            </div>
+        </div>
+    } @else {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
+        />
+    }
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.scss b/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.scss
new file mode 100644
index 0000000..30fee35
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.scss
@@ -0,0 +1,81 @@
+@use '@angular/material' as mat;
+@use '../../styles/portal-layout' as portal;
+
+@include portal.live-layout;
+
+// ─── Sidebar panel header ─────────────────────────────────────────────────────
+.category-content-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    min-height: 48px;
+    flex-shrink: 0;
+    background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid var(--app-separator);
+    app-region: drag;
+
+    // Own buttons (direct children scoped to this component)
+    button {
+        @include mat.form-field-density(-5);
+        app-region: no-drag;
+    }
+
+    // Projected buttons (liveHeaderActions slot) — view encapsulation
+    // prevents the rule above from reaching them, so ng-deep is required.
+    ::ng-deep button {
+        app-region: no-drag;
+    }
+}
+
+.category-meta {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    flex: 1;
+}
+
+// ─── Title + count chip — now aligned with category-content-view ─────────────
+.category-title {
+    margin: 0;
+    font-size: 0.94rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--mat-sys-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// Informational badge — primary-tinted pill with definition ring
+.category-subtitle {
+    white-space: nowrap;
+    flex-shrink: 0;
+    font-size: 0.70rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: capitalize;
+    line-height: 1;
+    color: var(--mat-sys-primary);
+    background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface-container-high));
+    padding: 4px 10px;
+    border-radius: 999px;
+    box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent),
+        0 1px 3px rgba(0, 0, 0, 0.18);
+}
+
+// ─── EPG controls ─────────────────────────────────────────────────────────────
+.loading-indicator {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+}
+
+.load-more-epg {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0;
+}
diff --git a/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.ts b/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.ts
new file mode 100644
index 0000000..b85e0f9
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-collection-live-shell/portal-collection-live-shell.component.ts
@@ -0,0 +1,46 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+    output,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ResizableDirective } from 'components';
+import { EpgItem } from 'shared-interfaces';
+import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
+import { PortalEmptyStateComponent } from '../portal-empty-state/portal-empty-state.component';
+
+@Component({
+    selector: 'app-portal-collection-live-shell',
+    imports: [
+        EpgViewComponent,
+        MatButtonModule,
+        MatProgressSpinnerModule,
+        PortalEmptyStateComponent,
+        ResizableDirective,
+        TranslatePipe,
+        WebPlayerViewComponent,
+    ],
+    templateUrl: './portal-collection-live-shell.component.html',
+    styleUrl: './portal-collection-live-shell.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PortalCollectionLiveShellComponent {
+    readonly title = input<string>('Favorites');
+    readonly subtitle = input<string>('Live TV');
+    readonly count = input<number>(0);
+    readonly streamUrl = input<string>('');
+    readonly isEmbeddedPlayer = input<boolean>(true);
+    readonly hasSelection = input<boolean>(false);
+    readonly epgItems = input<EpgItem[]>([]);
+    readonly isLoadingEpg = input<boolean>(false);
+    readonly hasMoreEpg = input<boolean>(false);
+
+    readonly loadMoreEpgClicked = output<void>();
+
+    onLoadMoreEpg(): void {
+        this.loadMoreEpgClicked.emit();
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/portal-collection-shell/portal-collection-shell.component.html b/libs/portal/shared/ui/src/lib/components/portal-collection-shell/portal-collection-shell.component.html
new file mode 100644
index 0000000..81f2d5a
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-collection-shell/portal-collection-shell.component.html
@@ -0,0 +1,29 @@
+@switch (mode()) {
+    @case ('detail') {
+        <ng-content select="[details]" />
+    }
+    @case ('live') {
+        <ng-content select="[live]" />
+    }
+    @default {
+    <app-favorites-layout
+        [categories]="categories()"
+        [favorites]="items()"
+        [playlistSubtitle]="playlistSubtitle()"
+        [playlistTitle]="playlistTitle()"
+        [selectedCategoryId]="selectedCategoryId()"
+        [titleTranslationString]="
+            layout().titleTranslationKey || 'CHANNELS.FAVORITES'
+        "
+        [removeTooltip]="layout().removeTooltip || ''"
+        [emptyIcon]="layout().emptyIcon || 'favorite_border'"
+        [showHeaderAction]="layout().showHeaderAction || false"
+        [headerActionIcon]="layout().headerActionIcon || 'delete_sweep'"
+        [headerActionTooltip]="layout().headerActionTooltip || ''"
+        (categoryClicked)="onCategoryClicked($event)"
+        (removeFavorite)="removeItem.emit($event)"
+        (headerActionClicked)="headerActionClicked.emit()"
+        (openItem)="openItem.emit($event)"
+    />
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/portal-collection-shell/portal-collection-shell.component.ts b/libs/portal/shared/ui/src/lib/components/portal-collection-shell/portal-collection-shell.component.ts
new file mode 100644
index 0000000..df456a9
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-collection-shell/portal-collection-shell.component.ts
@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { XtreamCategory } from 'shared-interfaces';
+import {
+    FavoriteLayoutItem,
+    FavoritesLayoutComponent,
+} from '../favorites-layout/favorites-layout.component';
+
+interface PortalCategorySelection {
+    readonly category_id?: string | number;
+    readonly id?: string | number;
+}
+
+export interface PortalCollectionShellLayout {
+    titleTranslationKey?: string;
+    removeTooltip?: string;
+    emptyIcon?: string;
+    showHeaderAction?: boolean;
+    headerActionIcon?: string;
+    headerActionTooltip?: string;
+}
+
+export type PortalCollectionMode = 'grid' | 'detail' | 'live';
+
+@Component({
+    selector: 'app-portal-collection-shell',
+    imports: [FavoritesLayoutComponent],
+    templateUrl: './portal-collection-shell.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+            :host {
+                display: block;
+                height: 100%;
+                width: 100%;
+            }
+        `,
+    ],
+})
+export class PortalCollectionShellComponent {
+    readonly categories = input<XtreamCategory[]>([]);
+    readonly items = input<FavoriteLayoutItem[]>([]);
+    readonly playlistSubtitle = input<string>('');
+    readonly playlistTitle = input<string>('Playlist');
+    readonly selectedCategoryId = input<string>('all');
+    readonly layout = input<PortalCollectionShellLayout>({});
+    readonly mode = input<PortalCollectionMode>('grid');
+
+    readonly categoryClicked = output<string>();
+    readonly removeItem = output<FavoriteLayoutItem>();
+    readonly openItem = output<FavoriteLayoutItem>();
+    readonly headerActionClicked = output<void>();
+
+    onCategoryClicked(event: PortalCategorySelection): void {
+        const categoryId = event.category_id ?? event.id;
+        if (categoryId == null) {
+            return;
+        }
+
+        this.categoryClicked.emit(String(categoryId));
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.html b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.html
new file mode 100644
index 0000000..ca83703
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.html
@@ -0,0 +1,4 @@
+<div class="empty-state-container">
+    <mat-icon class="empty-state-icon">{{ icon() }}</mat-icon>
+    <h2 class="empty-state-title">{{ message() }}</h2>
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss
new file mode 100644
index 0000000..2a57f57
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.scss
@@ -0,0 +1,55 @@
+:host {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+}
+
+.empty-state-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+    animation: portal-empty-state-fade-in 220ms ease-out;
+}
+
+.empty-state-icon {
+    font-size: 72px;
+    width: 72px;
+    height: 72px;
+    margin-bottom: 24px;
+    opacity: 0.2;
+    animation: portal-empty-state-float 2.8s ease-in-out infinite;
+}
+
+.empty-state-title {
+    font-size: 1.05rem;
+    font-weight: 520;
+    letter-spacing: -0.01em;
+    margin: 0;
+    opacity: 0.5;
+}
+
+@keyframes portal-empty-state-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes portal-empty-state-float {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-4px);
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.ts b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.ts
new file mode 100644
index 0000000..7166cf0
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/portal-empty-state/portal-empty-state.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-portal-empty-state',
+    templateUrl: './portal-empty-state.component.html',
+    styleUrl: './portal-empty-state.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatIcon],
+})
+export class PortalEmptyStateComponent {
+    readonly icon = input<string>('live_tv');
+    readonly message = input.required<string>();
+}
diff --git a/libs/portal/shared/ui/src/lib/components/search-form/search-form.component.html b/libs/portal/shared/ui/src/lib/components/search-form/search-form.component.html
new file mode 100644
index 0000000..2ebb8f1
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/search-form/search-form.component.html
@@ -0,0 +1,36 @@
+<div class="search-container">
+    <div class="recent-search">
+        <mat-icon>search</mat-icon>
+        <input
+            #searchInput
+            type="search"
+            spellcheck="false"
+            autocomplete="off"
+            [placeholder]="placeholder"
+            [ngModel]="searchTerm()"
+            (ngModelChange)="onSearchTermChange()"
+        />
+        @if (searchTerm()) {
+            <button mat-icon-button class="clear-btn" (click)="clearSearch()">
+                <mat-icon>close</mat-icon>
+            </button>
+        }
+    </div>
+
+    @if (filterConfig.length > 0) {
+        <div class="type-filters">
+            @for (filter of filterConfig; track filter.key) {
+                <mat-checkbox
+                    [(ngModel)]="filters[filter.key]"
+                    (ngModelChange)="onFilterChange(filter.key)"
+                >
+                    @if (filter.translationKey) {
+                        {{ filter.translationKey | translate }}
+                    } @else {
+                        {{ filter.label }}
+                    }
+                </mat-checkbox>
+            }
+        </div>
+    }
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/search-form/search-form.component.ts b/libs/portal/shared/ui/src/lib/components/search-form/search-form.component.ts
new file mode 100644
index 0000000..fb1f59e
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/search-form/search-form.component.ts
@@ -0,0 +1,126 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    model,
+    Output,
+    ViewChild,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { TranslatePipe } from '@ngx-translate/core';
+
+export interface SearchFilters {
+    [key: string]: boolean;
+}
+
+export interface SearchFilter {
+    key: string;
+    label: string;
+    translationKey?: string;
+}
+
+@Component({
+    selector: 'app-search-form',
+    standalone: true,
+    imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        TranslatePipe,
+    ],
+    templateUrl: './search-form.component.html',
+    styles: [
+        `
+            .search-container {
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
+            }
+
+            .recent-search {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                padding: 0 12px;
+                height: 42px;
+                border-radius: 12px;
+                border: 1px solid rgba(255, 255, 255, 0.08);
+                background: rgba(255, 255, 255, 0.03);
+            }
+
+            .recent-search mat-icon {
+                opacity: 0.6;
+                font-size: 18px;
+                width: 18px;
+                height: 18px;
+            }
+
+            .recent-search input {
+                width: 100%;
+                border: 0;
+                background: transparent;
+                color: inherit;
+                font: inherit;
+                opacity: 0.95;
+            }
+
+            .recent-search input::placeholder {
+                opacity: 0.5;
+            }
+
+            .clear-btn {
+                width: 30px;
+                height: 30px;
+                min-width: 30px;
+            }
+        `,
+    ],
+})
+export class SearchFormComponent {
+    @ViewChild('searchInput') searchInput!: ElementRef;
+    @Input() placeholder = 'Search';
+    @Input() filters: SearchFilters = {};
+    @Input() filterConfig: SearchFilter[] = [];
+    @Input() singleSelection = false; // Add this new input
+    searchTerm = model<string>('');
+
+    @Output() filtersChange = new EventEmitter<SearchFilters>();
+    @Output() search = new EventEmitter<void>();
+
+    onFilterChange(changedKey: string) {
+        if (this.singleSelection) {
+            // Reset all other filters when in single selection mode
+            Object.keys(this.filters).forEach((key) => {
+                if (key !== changedKey) {
+                    this.filters[key] = false;
+                }
+            });
+        }
+        this.filtersChange.emit(this.filters);
+        this.search.emit();
+    }
+
+    onSearchTermChange() {
+        setTimeout(() => {
+            this.searchTerm.set(this.searchInput.nativeElement.value);
+        }, 500);
+    }
+
+    clearSearch() {
+        this.searchInput.nativeElement.value = '';
+        this.searchTerm.set('');
+    }
+
+    focusSearchInput() {
+        this.searchInput.nativeElement.focus();
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.html b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.html
new file mode 100644
index 0000000..25b0a95
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.html
@@ -0,0 +1,86 @@
+<div class="search-page">
+    <!-- Inline details slot (for stalker) - shown above everything when active -->
+    <ng-content select="[details]" />
+
+    @if (!showDetails()) {
+        <div class="search-content">
+            <div class="header sticky-header">
+                <div class="header-top">
+                    <div class="header-left">
+                        <h2>{{ title() | translate }}</h2>
+
+                        <!-- Filters slot -->
+                        <div class="type-filters">
+                            <ng-content select="[filters]" />
+                        </div>
+                    </div>
+
+                    <div class="header-right">
+                        @if (showResultsCount() && resultsCount() > 0) {
+                            <div class="results-count">
+                                {{
+                                    'PORTALS.SEARCH_VIEW.RESULTS_FOUND'
+                                        | translate: { count: resultsCount() }
+                                }}
+                            </div>
+                        }
+                        @if (showCloseButton()) {
+                            <button mat-icon-button (click)="onCloseClick()">
+                                <mat-icon>close</mat-icon>
+                            </button>
+                        }
+                        <!-- Extra header actions slot -->
+                        <ng-content select="[header-actions]" />
+                    </div>
+                </div>
+
+                @if (showSearchInput()) {
+                    <div class="search-input-container">
+                        <app-search-form
+                            [searchTerm]="searchTerm()"
+                            (searchTermChange)="onSearchTermChange($event)"
+                        />
+                    </div>
+                }
+
+                <!-- Subheader slot (info notes, secondary controls) -->
+                <ng-content select="[subheader]" />
+            </div>
+
+            <div class="results-container">
+                @if (isLoading()) {
+                    <div class="loading-state">
+                        <mat-spinner diameter="48" />
+                    </div>
+                } @else if (showResults) {
+                    <!-- Results slot -->
+                    <ng-content select="[results]" />
+                } @else if (showNoResults) {
+                    <div class="no-items">
+                        <mat-icon>search_off</mat-icon>
+                        <div class="no-items-content">
+                            <h3>{{ 'PORTALS.EMPTY_LIST_VIEW.TITLE' | translate }}</h3>
+                            <p>{{ 'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate }}</p>
+                            <p class="search-term-note">
+                                {{
+                                    'PORTALS.SEARCH_VIEW.NO_RESULTS_FOR'
+                                        | translate: { term: searchTerm() }
+                                }}
+                            </p>
+                        </div>
+                    </div>
+                } @else if (showInitialState) {
+                    <div class="no-items initial-state">
+                        <mat-icon>search</mat-icon>
+                        <div class="no-items-content">
+                            <h3>{{ 'PORTALS.SEARCH_VIEW.INITIAL_TITLE' | translate }}</h3>
+                            <p>{{ 'PORTALS.SEARCH_VIEW.INITIAL_DESCRIPTION' | translate }}</p>
+                        </div>
+                    </div>
+                }
+                <!-- Custom empty state slot (optional override) -->
+                <ng-content select="[empty]" />
+            </div>
+        </div>
+    }
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss
new file mode 100644
index 0000000..9d6b7b8
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss
@@ -0,0 +1,171 @@
+@use '../../styles/content-grid' as grid;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
+.search-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.search-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 20px 0 20px;
+}
+
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 20px 0 10px 0;
+    margin-bottom: 2px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
+
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+
+    .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .header-left {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        flex: 1;
+        flex-wrap: wrap;
+
+        h2 {
+            margin: 0;
+            white-space: nowrap;
+            font-size: 1.2rem;
+            font-weight: 650;
+            letter-spacing: -0.02em;
+        }
+
+        .type-filters {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+
+            ::ng-deep mat-checkbox {
+                margin: 0;
+            }
+        }
+    }
+
+    .header-right {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        .results-count {
+            font-size: 0.85rem;
+            padding: 6px 12px;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .search-input-container {
+        margin-bottom: 0;
+    }
+}
+
+.results-container {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.loading-state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4rem 2rem;
+}
+
+.no-items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    text-align: center;
+
+    mat-icon {
+        font-size: 64px;
+        width: 64px;
+        height: 64px;
+        margin-bottom: 1.5rem;
+        opacity: 0.5;
+    }
+
+    .no-items-content {
+        h3 {
+            margin: 0 0 0.5rem;
+            font-size: 1.05rem;
+            font-weight: 520;
+            letter-spacing: -0.01em;
+            color: var(--text-color);
+        }
+
+        p {
+            font-size: 0.85rem;
+            margin: 0;
+            opacity: 0.65;
+        }
+
+        .search-term-note {
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            font-style: italic;
+            opacity: 0.6;
+        }
+    }
+
+    &.initial-state {
+        opacity: 0.8;
+
+        mat-icon {
+            color: var(--primary-color);
+            opacity: 0.6;
+        }
+    }
+}
+
+// Results grid mixin for consumers
+::ng-deep .results-grid {
+    @include grid.content-grid(140px, 20px);
+    padding-bottom: 1rem;
+}
+
+// Global search overlay context
+:host-context(.global-search-overlay) {
+    // Prevent Electron's app-region: drag from bleeding through the dialog overlay
+    app-region: no-drag;
+
+    .search-page {
+        background: var(--background);
+        height: 100vh;
+    }
+
+    .header {
+        background: var(--background);
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.ts b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.ts
new file mode 100644
index 0000000..284810e
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.ts
@@ -0,0 +1,99 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+    output,
+    viewChild,
+} from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { TranslatePipe } from '@ngx-translate/core';
+import { SearchFormComponent } from '../search-form/search-form.component';
+
+@Component({
+    selector: 'app-search-layout',
+    standalone: true,
+    imports: [
+        MatIcon,
+        MatIconButton,
+        MatProgressSpinner,
+        SearchFormComponent,
+        TranslatePipe,
+    ],
+    templateUrl: './search-layout.component.html',
+    styleUrl: './search-layout.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchLayoutComponent {
+    private readonly searchFormComponent = viewChild(SearchFormComponent);
+
+    /** Page title translation key */
+    readonly title = input<string>('PORTALS.SIDEBAR.SEARCH');
+
+    /** Current search term */
+    readonly searchTerm = input<string>('');
+
+    /** Number of results found */
+    readonly resultsCount = input<number>(0);
+
+    /** Whether search is in progress */
+    readonly isLoading = input<boolean>(false);
+
+    /** Whether to show the close button (for dialog mode) */
+    readonly showCloseButton = input<boolean>(false);
+
+    /** Whether to show results count */
+    readonly showResultsCount = input<boolean>(true);
+
+    /** Whether to show the inline search input */
+    readonly showSearchInput = input<boolean>(true);
+
+    /** Whether inline details are active and should replace the search body */
+    readonly showDetails = input<boolean>(false);
+
+    /** Minimum characters required for search */
+    readonly minSearchLength = input<number>(3);
+
+    /** Emitted when search term changes */
+    readonly searchTermChange = output<string>();
+
+    /** Emitted when close button is clicked */
+    readonly closeClick = output<void>();
+
+    /** Focus the search input */
+    focusSearchInput(): void {
+        this.searchFormComponent()?.focusSearchInput();
+    }
+
+    onSearchTermChange(term: string): void {
+        this.searchTermChange.emit(term);
+    }
+
+    onCloseClick(): void {
+        this.closeClick.emit();
+    }
+
+    /** Check if we should show the "no results" state */
+    get showNoResults(): boolean {
+        return (
+            this.searchTerm().length >= this.minSearchLength() &&
+            this.resultsCount() === 0 &&
+            !this.isLoading()
+        );
+    }
+
+    /** Check if we should show the initial state */
+    get showInitialState(): boolean {
+        return (
+            this.searchTerm().length < this.minSearchLength() &&
+            this.resultsCount() === 0 &&
+            !this.isLoading()
+        );
+    }
+
+    /** Check if we should show results */
+    get showResults(): boolean {
+        return this.resultsCount() > 0 && !this.isLoading();
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-detail.directive.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-detail.directive.ts
new file mode 100644
index 0000000..bb9bc05
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-detail.directive.ts
@@ -0,0 +1,15 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import { UnifiedCollectionItem } from '@iptvnator/portal/shared/util';
+
+export interface UnifiedCollectionDetailContext {
+    $implicit: UnifiedCollectionItem;
+    item: UnifiedCollectionItem;
+    close: () => void;
+}
+
+@Directive({
+    selector: 'ng-template[unifiedCollectionDetail]',
+})
+export class UnifiedCollectionDetailDirective {
+    readonly templateRef = inject(TemplateRef<UnifiedCollectionDetailContext>);
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html
new file mode 100644
index 0000000..8e8909d
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.html
@@ -0,0 +1,228 @@
+<ng-content select="ng-template[unifiedCollectionDetail]"></ng-content>
+
+@if (detailContext(); as detailContext) {
+    <ng-container
+        [ngTemplateOutlet]="detailTemplate()?.templateRef ?? null"
+        [ngTemplateOutletContext]="detailContext"
+    />
+} @else if (isLoading()) {
+    <div class="collection-header">
+        <span class="collection-title">{{ title() | translate }}</span>
+        <div class="collection-header-toggles">
+            <span class="toggle-placeholder"></span>
+            @if (showScopeToggle()) {
+                <span
+                    class="toggle-placeholder toggle-placeholder--scope"
+                ></span>
+            }
+        </div>
+    </div>
+    @if (selectedContentType() === 'live') {
+        <div class="skeleton-list">
+            @for (row of skeletonRows; track row) {
+                <div class="list-skeleton-row" aria-hidden="true">
+                    <span class="list-skeleton-handle"></span>
+                    <span class="list-skeleton-avatar"></span>
+                    <div class="list-skeleton-text">
+                        <span
+                            class="grid-skeleton-line grid-skeleton-line--primary"
+                        ></span>
+                        <span
+                            class="grid-skeleton-line grid-skeleton-line--secondary"
+                        ></span>
+                    </div>
+                    <span class="list-skeleton-star"></span>
+                </div>
+            }
+        </div>
+    } @else {
+        <div class="skeleton-grid">
+            @for (card of skeletonCards; track card) {
+                <div class="grid-skeleton-card" aria-hidden="true">
+                    <div class="grid-skeleton-thumb">
+                        <span class="grid-skeleton-badge"></span>
+                    </div>
+                    <div class="grid-skeleton-title">
+                        <span
+                            class="grid-skeleton-line grid-skeleton-line--primary"
+                        ></span>
+                        <span
+                            class="grid-skeleton-line grid-skeleton-line--secondary"
+                        ></span>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+} @else {
+    <div class="collection-header">
+        <span class="collection-title">{{ title() | translate }}</span>
+
+        @if (showFavSortButton()) {
+            <button
+                type="button"
+                mat-icon-button
+                class="favorites-sort-button"
+                [matMenuTriggerFor]="favoritesSortMenu"
+                [matTooltip]="
+                    ('WORKSPACE.SORT_LABEL' | translate) +
+                    (favSortLabelKey() | translate)
+                "
+                [attr.aria-label]="'WORKSPACE.SORT_LABEL' | translate"
+            >
+                <mat-icon>sort_by_alpha</mat-icon>
+            </button>
+            <mat-menu #favoritesSortMenu="matMenu">
+                @for (option of favSortOptions; track option.mode) {
+                    <button
+                        mat-menu-item
+                        (click)="setFavSortMode(option.mode)"
+                    >
+                        <mat-icon>{{ option.icon }}</mat-icon>
+                        <span>{{ option.translationKey | translate }}</span>
+                        @if (favSortMode() === option.mode) {
+                            <mat-icon class="sort-check">check</mat-icon>
+                        }
+                    </button>
+                }
+            </mat-menu>
+        }
+
+        <div class="collection-header-toggles">
+            @if (showContentToggle()) {
+                <mat-button-toggle-group
+                    class="content-toggle"
+                    [value]="selectedContentType()"
+                    (change)="onContentTypeChange($event.value)"
+                    hideSingleSelectionIndicator
+                >
+                    @if (hasLive()) {
+                        <mat-button-toggle value="live">
+                            {{ 'PORTALS.LIVE_TV' | translate }}
+                        </mat-button-toggle>
+                    }
+                    @if (hasMovies()) {
+                        <mat-button-toggle value="movie">
+                            {{ 'PORTALS.MOVIES' | translate }}
+                        </mat-button-toggle>
+                    }
+                    @if (hasSeries()) {
+                        <mat-button-toggle value="series">
+                            {{ 'PORTALS.SERIES' | translate }}
+                        </mat-button-toggle>
+                    }
+                </mat-button-toggle-group>
+            }
+
+            @if (showScopeToggle()) {
+                <mat-button-toggle-group
+                    class="scope-toggle"
+                    [value]="scope()"
+                    (change)="onScopeChange($event.value)"
+                    hideSingleSelectionIndicator
+                >
+                    <mat-button-toggle value="playlist">
+                        <mat-icon>playlist_play</mat-icon>
+                        <span class="toggle-label">{{
+                            'PORTALS.THIS_PLAYLIST' | translate
+                        }}</span>
+                    </mat-button-toggle>
+                    <mat-button-toggle value="all">
+                        <mat-icon>public</mat-icon>
+                        <span class="toggle-label">{{
+                            'PORTALS.ALL_PLAYLISTS' | translate
+                        }}</span>
+                    </mat-button-toggle>
+                </mat-button-toggle-group>
+            }
+
+            @if (currentTypeItems().length > 0) {
+                <button
+                    type="button"
+                    mat-icon-button
+                    (click)="clearAllCurrent()"
+                    [matTooltip]="
+                        clearButtonTooltipKey()
+                            | translate
+                                : {
+                                      type:
+                                          currentTypeLabelKey() | translate,
+                                  }
+                    "
+                    [attr.aria-label]="
+                        clearButtonTooltipKey()
+                            | translate
+                                : {
+                                      type:
+                                          currentTypeLabelKey() | translate,
+                                  }
+                    "
+                >
+                    <mat-icon>delete_sweep</mat-icon>
+                </button>
+            }
+        </div>
+    </div>
+
+    @switch (selectedContentType()) {
+        @case ('live') {
+            @if (hasLive()) {
+                <app-unified-live-tab
+                    [items]="liveItems()"
+                    [mode]="mode()"
+                    [searchTerm]="workspaceSearchTerm()"
+                    [autoOpenItem]="pendingAutoOpenLiveItem()"
+                    [sortMode]="favSortMode()"
+                    (removeItem)="onRemoveItem($event)"
+                    (reorderItems)="onReorder($event)"
+                    (itemPlayed)="onItemPlayed($event)"
+                    (autoOpenHandled)="onLiveAutoOpenHandled()"
+                />
+            }
+        }
+        @case ('movie') {
+            @if (hasMovies()) {
+                <app-unified-grid-tab
+                    [items]="movieItems()"
+                    [mode]="mode()"
+                    [contentType]="'movie'"
+                    [searchTerm]="workspaceSearchTerm()"
+                    (itemSelected)="onGridItemSelected($event)"
+                    (removeItem)="onRemoveItem($event)"
+                />
+            }
+        }
+        @case ('series') {
+            @if (hasSeries()) {
+                <app-unified-grid-tab
+                    [items]="seriesItems()"
+                    [mode]="mode()"
+                    [contentType]="'series'"
+                    [searchTerm]="workspaceSearchTerm()"
+                    (itemSelected)="onGridItemSelected($event)"
+                    (removeItem)="onRemoveItem($event)"
+                />
+            }
+        }
+    }
+
+    @if (!hasLive() && !hasMovies() && !hasSeries()) {
+        @if (workspaceSearchTerm()) {
+            <div class="empty-state">
+                <mat-icon class="empty-icon">search_off</mat-icon>
+                <p class="empty-title">
+                    {{ 'WORKSPACE.GLOBAL_FAVORITES.NO_RESULTS' | translate }}
+                </p>
+            </div>
+        } @else {
+            <app-empty-state
+                type="no-data"
+                [icon]="emptyStateIcon()"
+                [titleKey]="emptyStateTitleKey()"
+                [descriptionKey]="emptyStateBodyKey()"
+                secondaryActionLabelKey="WORKSPACE.SHELL.GO_TO_DASHBOARD"
+                (secondaryActionClicked)="goToDashboard()"
+            />
+        }
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
new file mode 100644
index 0000000..f19944d
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
@@ -0,0 +1,116 @@
+@use '../../styles/skeleton';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.skeleton-list {
+    flex: 1;
+    overflow: hidden;
+}
+
+.skeleton-grid {
+    flex: 1;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
+    gap: 16px;
+    padding: 16px;
+    align-content: start;
+}
+
+.collection-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
+}
+
+.collection-title {
+    font-size: 0.94rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--mat-sys-on-surface);
+}
+
+.favorites-sort-button {
+    margin-left: -4px;
+}
+
+.collection-header-toggles {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-left: auto;
+}
+
+.toggle-placeholder {
+    height: 43px;
+    width: 120px;
+    border-radius: 18px;
+    background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
+
+    &--scope {
+        width: 200px;
+    }
+}
+
+.content-toggle,
+.scope-toggle {
+    .toggle-label {
+        margin-left: 4px;
+        font-size: 0.75rem;
+    }
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+app-unified-live-tab,
+app-unified-grid-tab {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+}
+
+app-unified-grid-tab {
+    flex-direction: column;
+}
+
+app-unified-live-tab {
+    flex-direction: row;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px 24px;
+    flex: 1;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+
+    .empty-icon {
+        font-size: 56px;
+        height: 56px;
+        width: 56px;
+        margin-bottom: 16px;
+        opacity: 0.4;
+    }
+
+    .empty-title {
+        font-size: 1.05rem;
+        font-weight: 520;
+        letter-spacing: -0.01em;
+        margin: 0;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.spec.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.spec.ts
new file mode 100644
index 0000000..3b6fe80
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.spec.ts
@@ -0,0 +1,734 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+    output,
+    signal,
+    ViewChild,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { DialogService } from 'components';
+import {
+    COLLECTION_VIEW_STATE_KEY,
+    CollectionScope,
+    FavoritesChannelSortMode,
+    OPEN_COLLECTION_DETAIL_STATE_KEY,
+    ScopeToggleService,
+    UnifiedCollectionItem,
+    UnifiedFavoritesDataService,
+    UnifiedRecentDataService,
+    WorkspaceViewCommandService,
+} from '@iptvnator/portal/shared/util';
+import { selectAllPlaylistsMeta, selectPlaylistsLoadingFlag } from 'm3u-state';
+import { BehaviorSubject } from 'rxjs';
+import { PlaylistMeta } from 'shared-interfaces';
+import { UnifiedCollectionPageComponent } from './unified-collection-page.component';
+import { UnifiedCollectionDetailDirective } from './unified-collection-detail.directive';
+import { UnifiedGridTabComponent } from './unified-grid-tab.component';
+import { UnifiedLiveTabComponent } from './unified-live-tab.component';
+
+@Component({
+    selector: 'app-unified-live-tab',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubUnifiedLiveTabComponent {
+    readonly items = input.required<UnifiedCollectionItem[]>();
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly searchTerm = input('');
+    readonly autoOpenItem = input<unknown>(null);
+    readonly sortMode = input<FavoritesChannelSortMode>('custom');
+
+    readonly removeItem = output<UnifiedCollectionItem>();
+    readonly reorderItems = output<UnifiedCollectionItem[]>();
+    readonly itemPlayed = output<UnifiedCollectionItem>();
+    readonly autoOpenHandled = output<void>();
+}
+
+@Component({
+    selector: 'app-unified-grid-tab',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubUnifiedGridTabComponent {
+    readonly items = input.required<UnifiedCollectionItem[]>();
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly contentType = input<'movie' | 'series'>('movie');
+    readonly searchTerm = input('');
+
+    readonly itemSelected = output<UnifiedCollectionItem>();
+    readonly removeItem = output<UnifiedCollectionItem>();
+}
+
+@Component({
+    template: `
+        <app-unified-collection-page
+            [mode]="mode"
+            [portalType]="portalType"
+            [defaultScope]="defaultScope"
+        >
+            <ng-template unifiedCollectionDetail let-item>
+                <div class="detail-probe">{{ item.name }}</div>
+            </ng-template>
+        </app-unified-collection-page>
+    `,
+    imports: [UnifiedCollectionDetailDirective, UnifiedCollectionPageComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class HostUnifiedCollectionPageComponent {
+    mode: 'favorites' | 'recent' = 'favorites';
+    portalType?: string;
+    defaultScope: CollectionScope | undefined = 'all';
+
+    @ViewChild(UnifiedCollectionPageComponent)
+    pageComponent?: UnifiedCollectionPageComponent;
+}
+
+describe('UnifiedCollectionPageComponent', () => {
+    let fixture: ComponentFixture<UnifiedCollectionPageComponent>;
+    let route: ActivatedRoute & {
+        snapshot: {
+            paramMap: ReturnType<typeof convertToParamMap>;
+            queryParamMap: ReturnType<typeof convertToParamMap>;
+            queryParams: Record<string, unknown>;
+            params: Record<string, unknown>;
+            data: Record<string, unknown>;
+            parent: null;
+        };
+        paramMap: ReturnType<
+            BehaviorSubject<
+                ReturnType<typeof convertToParamMap>
+            >['asObservable']
+        >;
+        queryParamMap: ReturnType<
+            BehaviorSubject<
+                ReturnType<typeof convertToParamMap>
+            >['asObservable']
+        >;
+        pathFromRoot: ActivatedRoute[];
+    };
+    let routeParamMap$: BehaviorSubject<ReturnType<typeof convertToParamMap>>;
+    let routeQueryParamMap$: BehaviorSubject<
+        ReturnType<typeof convertToParamMap>
+    >;
+    let workspaceParamMap$: BehaviorSubject<
+        ReturnType<typeof convertToParamMap>
+    >;
+    const playlistsLoaded = signal(false);
+    const playlists = signal<PlaylistMeta[]>([]);
+    const favoritesData = {
+        getFavorites: jest.fn().mockResolvedValue([]),
+        clearFavorites: jest.fn().mockResolvedValue(undefined),
+        removeFavorite: jest.fn(),
+        reorder: jest.fn(),
+    };
+    const recentData = {
+        getRecentItems: jest.fn().mockResolvedValue([]),
+        removeRecentItem: jest.fn(),
+        clearRecentItems: jest.fn(),
+    };
+    const dialogService = {
+        openConfirmDialog: jest.fn(),
+    };
+    const workspaceViewCommands = {
+        registerCommand: jest.fn(),
+    };
+    const router = {
+        navigate: jest.fn().mockResolvedValue(true),
+        url: '/workspace/global-favorites',
+    };
+
+    function toParamMapRecord(
+        values: Record<string, unknown>
+    ): Record<string, string> {
+        return Object.fromEntries(
+            Object.entries(values)
+                .filter(([, value]) => value != null)
+                .map(([key, value]) => [key, String(value)])
+        );
+    }
+
+    function setRouteParams(params: Record<string, unknown>): void {
+        const nextParamMap = convertToParamMap(toParamMapRecord(params));
+        route.snapshot.params = params;
+        route.snapshot.paramMap = nextParamMap;
+        routeParamMap$.next(nextParamMap);
+    }
+
+    function setRouteQueryParams(queryParams: Record<string, unknown>): void {
+        const nextQueryParamMap = convertToParamMap(
+            toParamMapRecord(queryParams)
+        );
+        route.snapshot.queryParams = queryParams;
+        route.snapshot.queryParamMap = nextQueryParamMap;
+        routeQueryParamMap$.next(nextQueryParamMap);
+    }
+
+    beforeEach(async () => {
+        playlistsLoaded.set(false);
+        playlists.set([]);
+        jest.clearAllMocks();
+        workspaceViewCommands.registerCommand.mockReturnValue(jest.fn());
+        routeParamMap$ = new BehaviorSubject(convertToParamMap({}));
+        routeQueryParamMap$ = new BehaviorSubject(convertToParamMap({}));
+        workspaceParamMap$ = new BehaviorSubject(convertToParamMap({}));
+
+        const workspaceRoute = {
+            snapshot: {
+                data: { layout: 'workspace' },
+                paramMap: convertToParamMap({}),
+                params: {},
+            },
+            paramMap: workspaceParamMap$.asObservable(),
+        } as ActivatedRoute;
+
+        route = {
+            snapshot: {
+                paramMap: convertToParamMap({}),
+                queryParamMap: convertToParamMap({}),
+                queryParams: {},
+                params: {},
+                data: {},
+                parent: null,
+            },
+            paramMap: routeParamMap$.asObservable(),
+            queryParamMap: routeQueryParamMap$.asObservable(),
+            pathFromRoot: [],
+        } as ActivatedRoute & {
+            snapshot: {
+                paramMap: ReturnType<typeof convertToParamMap>;
+                queryParamMap: ReturnType<typeof convertToParamMap>;
+                queryParams: Record<string, unknown>;
+                params: Record<string, unknown>;
+                data: Record<string, unknown>;
+                parent: null;
+            };
+            paramMap: ReturnType<
+                BehaviorSubject<
+                    ReturnType<typeof convertToParamMap>
+                >['asObservable']
+            >;
+            queryParamMap: ReturnType<
+                BehaviorSubject<
+                    ReturnType<typeof convertToParamMap>
+                >['asObservable']
+            >;
+            pathFromRoot: ActivatedRoute[];
+        };
+        route.pathFromRoot = [workspaceRoute, route];
+
+        await TestBed.configureTestingModule({
+            imports: [
+                HostUnifiedCollectionPageComponent,
+                UnifiedCollectionPageComponent,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: route,
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: Store,
+                    useValue: {
+                        selectSignal: jest.fn((selector: unknown) => {
+                            if (selector === selectAllPlaylistsMeta) {
+                                return playlists;
+                            }
+                            if (selector === selectPlaylistsLoadingFlag) {
+                                return playlistsLoaded;
+                            }
+                            return signal(null);
+                        }),
+                    },
+                },
+                {
+                    provide: ScopeToggleService,
+                    useValue: {
+                        getScope: jest.fn(() => signal<CollectionScope>('all')),
+                        setScope: jest.fn(),
+                    },
+                },
+                {
+                    provide: UnifiedFavoritesDataService,
+                    useValue: favoritesData,
+                },
+                {
+                    provide: UnifiedRecentDataService,
+                    useValue: recentData,
+                },
+                {
+                    provide: DialogService,
+                    useValue: dialogService,
+                },
+                {
+                    provide: WorkspaceViewCommandService,
+                    useValue: workspaceViewCommands,
+                },
+            ],
+        })
+            .overrideComponent(UnifiedCollectionPageComponent, {
+                remove: {
+                    imports: [UnifiedGridTabComponent, UnifiedLiveTabComponent],
+                },
+                add: {
+                    imports: [
+                        StubUnifiedGridTabComponent,
+                        StubUnifiedLiveTabComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(UnifiedCollectionPageComponent);
+        fixture.componentRef.setInput('mode', 'favorites');
+        fixture.componentRef.setInput('defaultScope', 'all');
+        window.history.replaceState({}, document.title);
+    });
+
+    it('reloads favorites after playlist hydration completes', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(1);
+
+        playlists.set([
+            {
+                _id: 'xtream-1',
+                title: 'Xtream One',
+                count: 1,
+                importDate: '2026-04-03T10:00:00.000Z',
+                autoRefresh: false,
+                serverUrl: 'https://example.com',
+                favorites: ['fav-1'],
+            } as PlaylistMeta,
+        ]);
+        playlistsLoaded.set(true);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(2);
+        expect(favoritesData.getFavorites).toHaveBeenLastCalledWith(
+            'all',
+            undefined,
+            undefined
+        );
+    });
+
+    it('prefers the route default scope over the persisted collection scope', async () => {
+        setRouteParams({ id: 'playlist-1' });
+        playlistsLoaded.set(true);
+        fixture.componentRef.setInput('portalType', 'm3u');
+        fixture.componentRef.setInput('defaultScope', 'playlist');
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(1);
+        expect(favoritesData.getFavorites).toHaveBeenLastCalledWith(
+            'playlist',
+            'playlist-1',
+            'm3u'
+        );
+    });
+
+    it('does not reload when local item state changes on empty playlist favorites', async () => {
+        setRouteParams({ id: 'playlist-1' });
+        setRouteQueryParams({ scope: 'playlist' });
+        playlistsLoaded.set(true);
+        playlists.set([
+            {
+                _id: 'playlist-1',
+                title: 'Playlist One',
+                count: 0,
+                importDate: '2026-04-05T20:00:00.000Z',
+                autoRefresh: false,
+                favorites: [],
+            } as PlaylistMeta,
+        ]);
+
+        fixture.componentRef.setInput('portalType', 'm3u');
+        fixture.componentRef.setInput('defaultScope', undefined);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(1);
+        expect(favoritesData.getFavorites).toHaveBeenLastCalledWith(
+            'playlist',
+            'playlist-1',
+            'm3u'
+        );
+
+        fixture.componentInstance.allItems.set([]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(1);
+    });
+
+    it('reloads favorites when the playlist id changes in place', async () => {
+        setRouteParams({ id: 'playlist-1' });
+        setRouteQueryParams({ scope: 'playlist' });
+        playlistsLoaded.set(true);
+        fixture.componentRef.setInput('portalType', 'm3u');
+        fixture.componentRef.setInput('defaultScope', undefined);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(1);
+        expect(favoritesData.getFavorites).toHaveBeenLastCalledWith(
+            'playlist',
+            'playlist-1',
+            'm3u'
+        );
+
+        setRouteParams({ id: 'playlist-2' });
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(2);
+        expect(favoritesData.getFavorites).toHaveBeenLastCalledWith(
+            'playlist',
+            'playlist-2',
+            'm3u'
+        );
+    });
+
+    it('reloads recent items when the playlist id changes in place', async () => {
+        setRouteParams({ id: 'playlist-1' });
+        setRouteQueryParams({ scope: 'playlist' });
+        playlistsLoaded.set(true);
+        fixture.componentRef.setInput('mode', 'recent');
+        fixture.componentRef.setInput('portalType', 'm3u');
+        fixture.componentRef.setInput('defaultScope', undefined);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(recentData.getRecentItems).toHaveBeenCalledTimes(1);
+        expect(recentData.getRecentItems).toHaveBeenLastCalledWith(
+            'playlist',
+            'playlist-1',
+            'm3u'
+        );
+
+        setRouteParams({ id: 'playlist-2' });
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(recentData.getRecentItems).toHaveBeenCalledTimes(2);
+        expect(recentData.getRecentItems).toHaveBeenLastCalledWith(
+            'playlist',
+            'playlist-2',
+            'm3u'
+        );
+    });
+
+    it('clears current favorites through the bulk clear service path', async () => {
+        const liveItems = [
+            {
+                uid: 'm3u::playlist-1::one',
+                name: 'Favorite One',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'playlist-1',
+                playlistName: 'Playlist One',
+                streamUrl: 'https://example.com/one.m3u8',
+            },
+            {
+                uid: 'm3u::playlist-1::two',
+                name: 'Favorite Two',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'playlist-1',
+                playlistName: 'Playlist One',
+                streamUrl: 'https://example.com/two.m3u8',
+            },
+        ] satisfies UnifiedCollectionItem[];
+        favoritesData.getFavorites.mockResolvedValueOnce(liveItems);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        fixture.componentInstance.clearAllCurrent();
+        const [dialogConfig] = dialogService.openConfirmDialog.mock.calls.at(
+            -1
+        ) ?? [null];
+
+        expect(dialogConfig).toBeTruthy();
+
+        await dialogConfig.onConfirm();
+
+        expect(favoritesData.clearFavorites).toHaveBeenCalledTimes(1);
+        expect(favoritesData.clearFavorites).toHaveBeenCalledWith(liveItems);
+        expect(favoritesData.removeFavorite).not.toHaveBeenCalled();
+    });
+
+    it('registers a workspace command when the current view has actionable items', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect(fixture.componentInstance.isWorkspaceLayout).toBe(true);
+
+        fixture.componentInstance.allItems.set([
+            {
+                uid: 'm3u::playlist-1::one',
+                name: 'Favorite One',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'playlist-1',
+                playlistName: 'Playlist One',
+                streamUrl: 'https://example.com/one.m3u8',
+            },
+        ]);
+        TestBed.flushEffects();
+
+        expect(workspaceViewCommands.registerCommand).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: 'unified-collection-clear-current-favorites',
+                group: 'view',
+                icon: 'delete_sweep',
+                labelKey: 'WORKSPACE.SHELL.CLEAR_FAVORITES_TYPE',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.CLEAR_CURRENT_VIEW_DESCRIPTION',
+            })
+        );
+    });
+
+    it('unregisters the workspace command when the current view becomes empty', async () => {
+        const unregister = jest.fn();
+        workspaceViewCommands.registerCommand.mockReturnValue(unregister);
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        fixture.componentInstance.allItems.set([
+            {
+                uid: 'm3u::playlist-1::one',
+                name: 'Favorite One',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'playlist-1',
+                playlistName: 'Playlist One',
+                streamUrl: 'https://example.com/one.m3u8',
+            },
+        ]);
+        TestBed.flushEffects();
+
+        fixture.componentInstance.allItems.set([]);
+        TestBed.flushEffects();
+        fixture.detectChanges();
+
+        expect(unregister).toHaveBeenCalled();
+    });
+
+    it('reloads favorites when bulk clear persistence fails', async () => {
+        const liveItems = [
+            {
+                uid: 'm3u::playlist-1::one',
+                name: 'Favorite One',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'playlist-1',
+                playlistName: 'Playlist One',
+                streamUrl: 'https://example.com/one.m3u8',
+            },
+        ] satisfies UnifiedCollectionItem[];
+        favoritesData.getFavorites
+            .mockResolvedValueOnce(liveItems)
+            .mockResolvedValueOnce(liveItems);
+        favoritesData.clearFavorites.mockRejectedValueOnce(
+            new Error('clear failed')
+        );
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        fixture.componentInstance.clearAllCurrent();
+        const [dialogConfig] = dialogService.openConfirmDialog.mock.calls.at(
+            -1
+        ) ?? [null];
+
+        await dialogConfig.onConfirm();
+
+        expect(favoritesData.getFavorites).toHaveBeenCalledTimes(2);
+        expect(favoritesData.getFavorites).toHaveBeenLastCalledWith(
+            'all',
+            undefined,
+            undefined
+        );
+        expect(fixture.componentInstance.allItems()).toEqual(liveItems);
+    });
+
+    it('opens inline detail from history state when a detail template is projected', async () => {
+        const item: UnifiedCollectionItem = {
+            uid: 'xtream::xtream-1::77',
+            name: 'Inline Movie',
+            contentType: 'movie',
+            sourceType: 'xtream',
+            playlistId: 'xtream-1',
+            playlistName: 'Xtream One',
+            xtreamId: 77,
+            categoryId: 12,
+        };
+        window.history.replaceState(
+            {
+                [OPEN_COLLECTION_DETAIL_STATE_KEY]: {
+                    item,
+                },
+            },
+            document.title
+        );
+
+        const hostFixture = TestBed.createComponent(
+            HostUnifiedCollectionPageComponent
+        );
+
+        hostFixture.detectChanges();
+        await hostFixture.whenStable();
+        hostFixture.detectChanges();
+
+        expect(
+            hostFixture.nativeElement.querySelector('.detail-probe')
+                ?.textContent
+        ).toContain('Inline Movie');
+        expect(
+            hostFixture.componentInstance.pageComponent?.selectedContentType()
+        ).toBe('movie');
+    });
+
+    it('restores collection scope and selected content type from history state', async () => {
+        setRouteParams({ id: 'playlist-1' });
+        playlistsLoaded.set(true);
+        window.history.replaceState(
+            {
+                [COLLECTION_VIEW_STATE_KEY]: {
+                    selectedContentType: 'movie',
+                    scope: 'all',
+                },
+            },
+            document.title
+        );
+
+        const restoredFixture = TestBed.createComponent(
+            UnifiedCollectionPageComponent
+        );
+        restoredFixture.componentRef.setInput('mode', 'recent');
+        restoredFixture.componentRef.setInput('portalType', 'stalker');
+        restoredFixture.componentRef.setInput('defaultScope', 'playlist');
+
+        restoredFixture.detectChanges();
+        await restoredFixture.whenStable();
+
+        expect(restoredFixture.componentInstance.scope()).toBe('all');
+        expect(restoredFixture.componentInstance.selectedContentType()).toBe(
+            'movie'
+        );
+        expect(recentData.getRecentItems).toHaveBeenLastCalledWith(
+            'all',
+            'playlist-1',
+            'stalker'
+        );
+    });
+
+    it('closes inline detail when popstate removes the detail state', async () => {
+        const item: UnifiedCollectionItem = {
+            uid: 'stalker::stalker-1::series-9',
+            name: 'Inline Series',
+            contentType: 'series',
+            sourceType: 'stalker',
+            playlistId: 'stalker-1',
+            playlistName: 'Stalker One',
+            stalkerId: 'series-9',
+            categoryId: 'series',
+        };
+        const hostFixture = TestBed.createComponent(
+            HostUnifiedCollectionPageComponent
+        );
+
+        hostFixture.detectChanges();
+        await hostFixture.whenStable();
+        hostFixture.componentInstance.pageComponent?.onGridItemSelected(item);
+        hostFixture.detectChanges();
+
+        expect(
+            hostFixture.nativeElement.querySelector('.detail-probe')
+                ?.textContent
+        ).toContain('Inline Series');
+
+        window.history.replaceState({}, document.title);
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        await hostFixture.whenStable();
+        hostFixture.detectChanges();
+
+        expect(
+            hostFixture.nativeElement.querySelector('.detail-probe')
+        ).toBeNull();
+    });
+
+    it('routes cross-provider collection detail opens through the global collection route', async () => {
+        const item: UnifiedCollectionItem = {
+            uid: 'xtream::xtream-1::77',
+            name: 'Cross Provider Movie',
+            contentType: 'movie',
+            sourceType: 'xtream',
+            playlistId: 'xtream-1',
+            playlistName: 'Xtream One',
+            xtreamId: 77,
+            categoryId: 12,
+        };
+        const hostFixture = TestBed.createComponent(
+            HostUnifiedCollectionPageComponent
+        );
+        setRouteParams({ id: 'host-playlist' });
+        router.url = '/workspace/stalker/host/recent';
+        hostFixture.componentInstance.mode = 'recent';
+        hostFixture.componentInstance.portalType = 'stalker';
+
+        hostFixture.detectChanges();
+        await hostFixture.whenStable();
+        hostFixture.componentInstance.pageComponent?.onScopeChange('all');
+        hostFixture.componentInstance.pageComponent?.onContentTypeChange(
+            'movie'
+        );
+
+        hostFixture.componentInstance.pageComponent?.onGridItemSelected(item);
+
+        expect(window.history.state).toEqual(
+            expect.objectContaining({
+                [COLLECTION_VIEW_STATE_KEY]: {
+                    selectedContentType: 'movie',
+                    scope: 'all',
+                },
+            })
+        );
+        expect(router.navigate).toHaveBeenCalledWith(
+            ['/workspace', 'global-recent'],
+            {
+                state: {
+                    [OPEN_COLLECTION_DETAIL_STATE_KEY]: {
+                        item: expect.objectContaining({
+                            uid: item.uid,
+                            name: item.name,
+                            contentType: item.contentType,
+                            sourceType: item.sourceType,
+                            playlistId: item.playlistId,
+                            playlistName: item.playlistName,
+                            xtreamId: item.xtreamId,
+                            categoryId: String(item.categoryId),
+                        }),
+                    },
+                },
+            }
+        );
+    });
+});
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts
new file mode 100644
index 0000000..26defbd
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.ts
@@ -0,0 +1,817 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    contentChild,
+    DestroyRef,
+    effect,
+    inject,
+    linkedSignal,
+    input,
+    signal,
+    untracked,
+} from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconButton } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { DialogService } from 'components';
+import {
+    buildGlobalCollectionDetailNavigationTarget,
+    buildCollectionViewState,
+    buildOpenCollectionDetailItemState,
+    clearNavigationStateKeys,
+    COLLECTION_VIEW_STATE_KEY,
+    CollectionContentType,
+    CollectionScope,
+    CollectionViewState,
+    FavoritesChannelSortMode,
+    getFavoritesChannelSortModeTranslationKey,
+    getOpenCollectionDetailItemState,
+    getCollectionViewState,
+    getOpenLiveCollectionItemState,
+    getUnifiedCollectionNavigation,
+    isWorkspaceLayoutRoute,
+    OPEN_COLLECTION_DETAIL_STATE_KEY,
+    OPEN_LIVE_COLLECTION_ITEM_STATE_KEY,
+    persistFavoritesChannelSortMode,
+    queryParamSignal,
+    restoreFavoritesChannelSortMode,
+    routeParamSignal,
+    ScopeToggleService,
+    STALKER_RETURN_TO_STATE_KEY,
+    UnifiedCollectionItem,
+    UnifiedFavoritesDataService,
+    UnifiedRecentDataService,
+    WorkspaceViewCommandService,
+} from '@iptvnator/portal/shared/util';
+import { selectAllPlaylistsMeta, selectPlaylistsLoadingFlag } from 'm3u-state';
+import { EmptyStateComponent } from '@iptvnator/playlist/shared/ui';
+import { UnifiedLiveTabComponent } from './unified-live-tab.component';
+import { UnifiedGridTabComponent } from './unified-grid-tab.component';
+import {
+    UnifiedCollectionDetailContext,
+    UnifiedCollectionDetailDirective,
+} from './unified-collection-detail.directive';
+
+@Component({
+    selector: 'app-unified-collection-page',
+    templateUrl: './unified-collection-page.component.html',
+    styleUrl: './unified-collection-page.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        EmptyStateComponent,
+        NgTemplateOutlet,
+        MatButtonToggleModule,
+        MatIconButton,
+        MatIconModule,
+        MatMenuModule,
+        MatTooltip,
+        TranslatePipe,
+        UnifiedGridTabComponent,
+        UnifiedLiveTabComponent,
+    ],
+})
+export class UnifiedCollectionPageComponent implements AfterContentInit {
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly portalType = input<string>();
+    readonly playlistIdInput = input<string | undefined>(undefined, {
+        alias: 'playlistId',
+    });
+    readonly defaultScope = input<CollectionScope>();
+
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+    private readonly store = inject(Store);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly scopeService = inject(ScopeToggleService);
+    private readonly favoritesData = inject(UnifiedFavoritesDataService);
+    private readonly recentData = inject(UnifiedRecentDataService);
+    private readonly dialogService = inject(DialogService);
+    private readonly translate = inject(TranslateService);
+    private readonly workspaceViewCommands = inject(WorkspaceViewCommandService);
+    readonly detailTemplate = contentChild(UnifiedCollectionDetailDirective);
+    private readonly playlists = this.store.selectSignal(
+        selectAllPlaylistsMeta
+    );
+    private readonly playlistsLoaded = this.store.selectSignal(
+        selectPlaylistsLoadingFlag
+    );
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.route);
+    private readonly queryScope = queryParamSignal<CollectionScope | null>(
+        this.route,
+        'scope',
+        (value) => (value === 'all' || value === 'playlist' ? value : null)
+    );
+    private readonly routeSearchTerm = queryParamSignal(
+        this.route,
+        'q',
+        (value) => (value ?? '').trim()
+    );
+    private readonly routePlaylistId = routeParamSignal<string | undefined>(
+        this.route,
+        'id',
+        (value) => value ?? undefined
+    );
+    readonly playlistId = computed(
+        () => this.playlistIdInput() ?? this.routePlaylistId()
+    );
+    readonly workspaceSearchTerm = computed(() =>
+        this.isWorkspaceLayout ? this.routeSearchTerm() : ''
+    );
+    private readonly historyCollectionViewState =
+        signal<CollectionViewState | null>(
+            getCollectionViewState(window.history.state)
+        );
+
+    readonly isLoading = signal(true);
+    readonly allItems = signal<UnifiedCollectionItem[]>([]);
+    readonly selectedContentType = signal<CollectionContentType>(
+        this.historyCollectionViewState()?.selectedContentType ?? 'live'
+    );
+    readonly selectedDetailItem = signal<UnifiedCollectionItem | null>(null);
+    readonly pendingAutoOpenLiveItem = signal(
+        getOpenLiveCollectionItemState(window.history.state)
+    );
+    readonly detailContext = computed<UnifiedCollectionDetailContext | null>(
+        () => {
+            const item = this.selectedDetailItem();
+            if (!item) {
+                return null;
+            }
+
+            return {
+                $implicit: item,
+                item,
+                close: this.requestCloseDetail,
+            };
+        }
+    );
+
+    readonly skeletonRows = Array.from({ length: 12 }, (_, i) => i);
+    readonly skeletonCards = Array.from({ length: 8 }, (_, i) => i);
+
+    readonly scopeKey = computed(() => this.mode());
+    private readonly persistedScope = computed(() =>
+        this.scopeService.getScope(this.scopeKey())()
+    );
+    readonly scope = linkedSignal<CollectionScope>(() => {
+        if (!this.showScopeToggle()) {
+            return 'all';
+        }
+
+        const queryScope = this.queryScope();
+        if (queryScope) {
+            return queryScope;
+        }
+
+        const historyScope = this.historyCollectionViewState()?.scope;
+        if (historyScope) {
+            return historyScope;
+        }
+
+        const defaultScope = this.defaultScope();
+        if (defaultScope) {
+            return defaultScope;
+        }
+
+        return this.persistedScope();
+    });
+    readonly showScopeToggle = computed(() => Boolean(this.playlistId()));
+    readonly effectiveScope = computed<CollectionScope>(() =>
+        this.showScopeToggle() ? this.scope() : 'all'
+    );
+
+    readonly liveItems = computed(() =>
+        this.allItems().filter((i) => i.contentType === 'live')
+    );
+    readonly movieItems = computed(() =>
+        this.allItems().filter((i) => i.contentType === 'movie')
+    );
+    readonly seriesItems = computed(() =>
+        this.allItems().filter((i) => i.contentType === 'series')
+    );
+
+    readonly hasLive = computed(() => this.liveItems().length > 0);
+    readonly hasMovies = computed(() => this.movieItems().length > 0);
+    readonly hasSeries = computed(() => this.seriesItems().length > 0);
+
+    readonly availableTypes = computed(() => {
+        const types: CollectionContentType[] = [];
+        if (this.hasLive()) types.push('live');
+        if (this.hasMovies()) types.push('movie');
+        if (this.hasSeries()) types.push('series');
+        return types;
+    });
+
+    readonly showContentToggle = computed(
+        () => this.availableTypes().length > 1
+    );
+
+    readonly currentTypeItems = computed(() => {
+        switch (this.selectedContentType()) {
+            case 'live':
+                return this.liveItems();
+            case 'movie':
+                return this.movieItems();
+            case 'series':
+                return this.seriesItems();
+        }
+    });
+
+    readonly currentTypeLabelKey = computed(() => {
+        switch (this.selectedContentType()) {
+            case 'live':
+                return 'PORTALS.LIVE_TV';
+            case 'movie':
+                return 'PORTALS.MOVIES';
+            case 'series':
+                return 'PORTALS.SERIES';
+        }
+    });
+
+    readonly clearButtonTooltipKey = computed(() =>
+        this.mode() === 'favorites'
+            ? 'WORKSPACE.SHELL.CLEAR_FAVORITES_TYPE'
+            : 'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_TYPE'
+    );
+
+    readonly title = computed(() => {
+        return this.mode() === 'favorites'
+            ? 'PORTALS.FAVORITES'
+            : 'PORTALS.RECENTLY_VIEWED';
+    });
+
+    readonly favSortMode = signal<FavoritesChannelSortMode>(
+        restoreFavoritesChannelSortMode()
+    );
+    readonly favSortLabelKey = computed(() =>
+        getFavoritesChannelSortModeTranslationKey(this.favSortMode())
+    );
+    readonly showFavSortButton = computed(
+        () =>
+            this.mode() === 'favorites' &&
+            this.selectedContentType() === 'live' &&
+            this.hasLive()
+    );
+    readonly favSortOptions: ReadonlyArray<{
+        mode: FavoritesChannelSortMode;
+        translationKey: string;
+        icon: string;
+    }> = [
+        {
+            mode: 'custom',
+            translationKey: 'WORKSPACE.SORT_CUSTOM',
+            icon: 'drag_indicator',
+        },
+        {
+            mode: 'name-asc',
+            translationKey: 'WORKSPACE.SORT_NAME_ASC',
+            icon: 'sort_by_alpha',
+        },
+        {
+            mode: 'name-desc',
+            translationKey: 'WORKSPACE.SORT_NAME_DESC',
+            icon: 'sort_by_alpha',
+        },
+        {
+            mode: 'date-desc',
+            translationKey: 'WORKSPACE.SORT_DATE_DESC',
+            icon: 'schedule',
+        },
+    ];
+
+    private readonly favoritesReloadKey = computed(() => {
+        if (this.mode() !== 'favorites') {
+            return 'recent';
+        }
+
+        if (!this.playlistsLoaded()) {
+            return null;
+        }
+
+        return this.playlists()
+            .map((playlist) =>
+                [
+                    playlist._id,
+                    playlist.serverUrl
+                        ? 'xtream'
+                        : playlist.macAddress
+                          ? 'stalker'
+                          : 'm3u',
+                    JSON.stringify(playlist.favorites ?? []),
+                ].join('::')
+            )
+            .join('|');
+    });
+    private readonly loadRequest = computed(() => ({
+        mode: this.mode(),
+        portalType: this.portalType(),
+        playlistId: this.playlistId(),
+        scope: this.effectiveScope(),
+        reloadKey: this.favoritesReloadKey(),
+    }));
+
+    private loadRequestId = 0;
+
+    private readonly loadEffect = effect(() => {
+        const { mode, portalType, playlistId, scope } = this.loadRequest();
+        untracked(() => {
+            void this.loadData({
+                mode,
+                portalType,
+                playlistId,
+                scope,
+            });
+        });
+    });
+    private readonly persistCollectionViewState = effect(() => {
+        const selectedContentType = this.selectedContentType();
+        const scope = this.showScopeToggle() ? this.scope() : undefined;
+
+        untracked(() => {
+            this.syncCollectionViewStateToHistory({
+                selectedContentType,
+                scope,
+            });
+        });
+    });
+    private readonly crossProviderDetailRedirect = effect(() => {
+        const item = this.selectedDetailItem();
+        if (!item || this.canRenderInlineDetailOnCurrentRoute(item)) {
+            return;
+        }
+
+        const navigation = this.getGlobalCollectionDetailNavigation(item);
+        if (!navigation) {
+            return;
+        }
+
+        untracked(() => {
+            this.selectedDetailItem.set(null);
+            void this.router.navigate(navigation.link, {
+                state: navigation.state,
+            });
+        });
+    });
+    private readonly workspaceCommandEffect = effect((onCleanup) => {
+        if (!this.isWorkspaceLayout) {
+            return;
+        }
+
+        const items = this.currentTypeItems();
+        if (items.length === 0) {
+            return;
+        }
+
+        const unregister = this.workspaceViewCommands.registerCommand({
+            id: `unified-collection-clear-current-${this.mode()}`,
+            group: 'view',
+            icon: 'delete_sweep',
+            labelKey: this.clearButtonTooltipKey(),
+            labelParams: () => ({
+                type: this.translate.instant(this.currentTypeLabelKey()),
+            }),
+            descriptionKey:
+                'WORKSPACE.SHELL.COMMANDS.CLEAR_CURRENT_VIEW_DESCRIPTION',
+            descriptionParams: () => ({
+                type: this.translate.instant(this.currentTypeLabelKey()),
+            }),
+            keywords: () =>
+                this.mode() === 'favorites'
+                    ? ['clear', 'favorites', 'remove', this.selectedContentType()]
+                    : ['clear', 'recent', 'history', this.selectedContentType()],
+            priority: 10,
+            run: () => this.clearAllCurrent(),
+        });
+
+        onCleanup(unregister);
+    });
+
+    constructor() {
+        if (typeof window !== 'undefined') {
+            const onPopState = () => {
+                this.syncCollectionViewStateFromHistory();
+                this.syncDetailFromHistoryState();
+            };
+            window.addEventListener('popstate', onPopState);
+            this.destroyRef.onDestroy(() => {
+                window.removeEventListener('popstate', onPopState);
+            });
+        }
+    }
+
+    ngAfterContentInit(): void {
+        this.syncCollectionViewStateFromHistory();
+        this.syncDetailFromHistoryState();
+    }
+
+    onScopeChange(value: CollectionScope): void {
+        if (!this.showScopeToggle()) {
+            return;
+        }
+
+        this.scope.set(value);
+        this.scopeService.setScope(this.scopeKey(), value);
+    }
+
+    onContentTypeChange(value: CollectionContentType): void {
+        this.selectedContentType.set(value);
+    }
+
+    readonly emptyStateIcon = computed(() =>
+        this.mode() === 'favorites' ? 'favorite_border' : 'history_toggle_off'
+    );
+
+    readonly emptyStateTitleKey = computed(() =>
+        this.mode() === 'favorites'
+            ? 'WORKSPACE.GLOBAL_FAVORITES.NO_ITEMS_TITLE'
+            : 'WORKSPACE.GLOBAL_RECENT.NO_ITEMS_TITLE'
+    );
+
+    readonly emptyStateBodyKey = computed(() =>
+        this.mode() === 'favorites'
+            ? 'WORKSPACE.GLOBAL_FAVORITES.NO_ITEMS_BODY'
+            : 'WORKSPACE.GLOBAL_RECENT.NO_ITEMS_BODY'
+    );
+
+    goToDashboard(): void {
+        void this.router.navigate(['/workspace', 'dashboard']);
+    }
+
+    setFavSortMode(mode: FavoritesChannelSortMode): void {
+        this.favSortMode.set(mode);
+        persistFavoritesChannelSortMode(mode);
+    }
+
+    onGridItemSelected(item: UnifiedCollectionItem): void {
+        this.syncCurrentCollectionViewState();
+
+        if (this.canOpenInlineDetail(item)) {
+            this.pushInlineDetailState(item);
+            this.openInlineDetail(item);
+            return;
+        }
+
+        const globalDetailNavigation =
+            this.getGlobalCollectionDetailNavigation(item);
+        if (globalDetailNavigation) {
+            void this.router.navigate(globalDetailNavigation.link, {
+                state: globalDetailNavigation.state,
+            });
+            return;
+        }
+
+        const navigation = getUnifiedCollectionNavigation(item);
+        if (!navigation) {
+            return;
+        }
+
+        const state =
+            item.sourceType === 'stalker' && item.contentType !== 'live'
+                ? {
+                      ...(navigation.state ?? {}),
+                      [STALKER_RETURN_TO_STATE_KEY]: this.router.url,
+                  }
+                : navigation.state;
+
+        void this.router.navigate(navigation.link, { state });
+    }
+
+    async onRemoveItem(item: UnifiedCollectionItem): Promise<void> {
+        if (this.mode() === 'favorites') {
+            await this.favoritesData.removeFavorite(item);
+        } else {
+            await this.recentData.removeRecentItem(item);
+        }
+        this.allItems.update((items) =>
+            items.filter((i) => i.uid !== item.uid)
+        );
+    }
+
+    clearAllCurrent(): void {
+        const itemsToRemove = this.currentTypeItems();
+        if (itemsToRemove.length === 0) {
+            return;
+        }
+
+        const isFavorites = this.mode() === 'favorites';
+        const type = this.translate.instant(this.currentTypeLabelKey());
+        const isPlaylistScope = this.effectiveScope() === 'playlist';
+        const titleKey = isFavorites
+            ? 'WORKSPACE.SHELL.CLEAR_FAVORITES_DIALOG_TITLE'
+            : 'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_DIALOG_TITLE';
+        const messageKey = isFavorites
+            ? isPlaylistScope
+                ? 'WORKSPACE.SHELL.CLEAR_FAVORITES_DIALOG_MESSAGE_PLAYLIST'
+                : 'WORKSPACE.SHELL.CLEAR_FAVORITES_DIALOG_MESSAGE_ALL'
+            : isPlaylistScope
+              ? 'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_PLAYLIST'
+              : 'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_ALL';
+
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant(titleKey, { type }),
+            message: this.translate.instant(messageKey, { type }),
+            onConfirm: async () => {
+                if (isFavorites) {
+                    await this.clearCurrentFavorites(itemsToRemove);
+                    return;
+                }
+
+                const removedType = this.selectedContentType();
+                this.allItems.update((items) =>
+                    items.filter((item) => item.contentType !== removedType)
+                );
+                const remaining = this.availableTypes();
+                if (remaining.length > 0) {
+                    this.selectedContentType.set(remaining[0]);
+                }
+                void Promise.all(
+                    itemsToRemove.map((item) =>
+                        this.recentData.removeRecentItem(item)
+                    )
+                );
+            },
+        });
+    }
+
+    async onReorder(items: UnifiedCollectionItem[]): Promise<void> {
+        const nonLive = this.allItems().filter((i) => i.contentType !== 'live');
+        this.allItems.set([...items, ...nonLive]);
+        await this.favoritesData.reorder(items, {
+            scope: this.effectiveScope(),
+            playlistId: this.playlistId(),
+            portalType: this.portalType(),
+        });
+    }
+
+    onItemPlayed(item: UnifiedCollectionItem): void {
+        if (this.mode() !== 'recent') {
+            return;
+        }
+
+        this.allItems.update((items) => {
+            const nextItems = [
+                item,
+                ...items.filter((candidate) => candidate.uid !== item.uid),
+            ];
+            return nextItems.sort(
+                (a, b) =>
+                    new Date(b.viewedAt ?? 0).getTime() -
+                    new Date(a.viewedAt ?? 0).getTime()
+            );
+        });
+    }
+
+    private async clearCurrentFavorites(
+        itemsToRemove: UnifiedCollectionItem[]
+    ): Promise<void> {
+        const removedType = this.selectedContentType();
+        this.allItems.update((items) =>
+            items.filter((item) => item.contentType !== removedType)
+        );
+        const remaining = this.availableTypes();
+        if (remaining.length > 0) {
+            this.selectedContentType.set(remaining[0]);
+        }
+
+        try {
+            await this.favoritesData.clearFavorites(itemsToRemove);
+        } catch {
+            await this.reloadCurrentCollection();
+        }
+    }
+
+    private async loadData(params: {
+        mode: 'favorites' | 'recent';
+        portalType?: string;
+        playlistId?: string;
+        scope: CollectionScope;
+    }): Promise<void> {
+        const requestId = ++this.loadRequestId;
+        if (this.allItems().length === 0) {
+            this.isLoading.set(true);
+        }
+
+        try {
+            const items =
+                params.mode === 'favorites'
+                    ? await this.favoritesData.getFavorites(
+                          params.scope,
+                          params.playlistId,
+                          params.portalType
+                      )
+                    : await this.recentData.getRecentItems(
+                          params.scope,
+                          params.playlistId,
+                          params.portalType
+                      );
+            if (requestId !== this.loadRequestId) {
+                return;
+            }
+            this.allItems.set(items);
+            this.autoSelectContentType();
+            if (
+                this.pendingAutoOpenLiveItem() &&
+                items.some((item) => item.contentType === 'live')
+            ) {
+                this.selectedContentType.set('live');
+            }
+        } catch {
+            if (requestId !== this.loadRequestId) {
+                return;
+            }
+            this.allItems.set([]);
+        } finally {
+            if (requestId === this.loadRequestId) {
+                this.isLoading.set(false);
+            }
+        }
+    }
+
+    private async reloadCurrentCollection(): Promise<void> {
+        await this.loadData({
+            mode: this.mode(),
+            portalType: this.portalType(),
+            playlistId: this.playlistId(),
+            scope: this.effectiveScope(),
+        });
+    }
+
+    private autoSelectContentType(): void {
+        if (this.selectedDetailItem()) {
+            return;
+        }
+
+        const types = this.availableTypes();
+        if (types.length > 0 && !types.includes(this.selectedContentType())) {
+            this.selectedContentType.set(types[0]);
+        }
+    }
+
+    onLiveAutoOpenHandled(): void {
+        this.pendingAutoOpenLiveItem.set(null);
+        clearNavigationStateKeys([OPEN_LIVE_COLLECTION_ITEM_STATE_KEY]);
+    }
+
+    private readonly requestCloseDetail = (): void => {
+        if (getOpenCollectionDetailItemState(window.history.state)) {
+            window.history.back();
+            return;
+        }
+
+        this.clearInlineDetail();
+    };
+
+    private canOpenInlineDetail(item: UnifiedCollectionItem): boolean {
+        return (
+            Boolean(this.detailTemplate()) &&
+            item.contentType !== 'live' &&
+            (item.sourceType === 'xtream' || item.sourceType === 'stalker') &&
+            this.canRenderInlineDetailOnCurrentRoute(item)
+        );
+    }
+
+    private canRenderInlineDetailOnCurrentRoute(
+        item: UnifiedCollectionItem
+    ): boolean {
+        const url = this.router.url;
+
+        if (url.includes('/workspace/xtreams/')) {
+            return item.sourceType === 'xtream';
+        }
+
+        if (url.includes('/workspace/stalker/')) {
+            return item.sourceType === 'stalker';
+        }
+
+        if (
+            url.includes('/workspace/global-favorites') ||
+            url.includes('/workspace/global-recent')
+        ) {
+            return (
+                item.sourceType === 'xtream' || item.sourceType === 'stalker'
+            );
+        }
+
+        const portalType = this.portalType();
+        return !portalType || portalType === item.sourceType;
+    }
+
+    private getGlobalCollectionDetailNavigation(item: UnifiedCollectionItem) {
+        if (
+            item.contentType === 'live' ||
+            (item.sourceType !== 'xtream' && item.sourceType !== 'stalker')
+        ) {
+            return null;
+        }
+
+        return buildGlobalCollectionDetailNavigationTarget(this.mode(), item);
+    }
+
+    private openInlineDetail(item: UnifiedCollectionItem): void {
+        this.selectedContentType.set(item.contentType);
+        this.selectedDetailItem.set(item);
+    }
+
+    private clearInlineDetail(): void {
+        this.selectedDetailItem.set(null);
+        this.autoSelectContentType();
+        clearNavigationStateKeys([OPEN_COLLECTION_DETAIL_STATE_KEY]);
+    }
+
+    private pushInlineDetailState(item: UnifiedCollectionItem): void {
+        const currentState = window.history.state ?? {};
+        window.history.pushState(
+            {
+                ...currentState,
+                [OPEN_COLLECTION_DETAIL_STATE_KEY]:
+                    buildOpenCollectionDetailItemState(item),
+            },
+            document.title
+        );
+    }
+
+    private syncCollectionViewStateFromHistory(): void {
+        const collectionViewState = getCollectionViewState(
+            window.history.state
+        );
+        this.historyCollectionViewState.set(collectionViewState);
+
+        if (collectionViewState?.selectedContentType) {
+            this.selectedContentType.set(
+                collectionViewState.selectedContentType
+            );
+        }
+    }
+
+    private syncCurrentCollectionViewState(): void {
+        this.syncCollectionViewStateToHistory({
+            selectedContentType: this.selectedContentType(),
+            scope: this.showScopeToggle() ? this.scope() : undefined,
+        });
+    }
+
+    private syncCollectionViewStateToHistory(state: CollectionViewState): void {
+        const nextCollectionViewState = buildCollectionViewState(state);
+        const currentCollectionViewState = this.historyCollectionViewState();
+
+        if (
+            this.isSameCollectionViewState(
+                currentCollectionViewState,
+                nextCollectionViewState
+            )
+        ) {
+            return;
+        }
+
+        const currentState = this.toHistoryStateRecord(window.history.state);
+        const nextState = { ...currentState };
+
+        if (nextCollectionViewState) {
+            nextState[COLLECTION_VIEW_STATE_KEY] = nextCollectionViewState;
+        } else {
+            delete nextState[COLLECTION_VIEW_STATE_KEY];
+        }
+
+        window.history.replaceState(nextState, document.title);
+        this.historyCollectionViewState.set(nextCollectionViewState);
+    }
+
+    private syncDetailFromHistoryState(): void {
+        const detailItem = getOpenCollectionDetailItemState(
+            window.history.state
+        )?.item;
+
+        if (detailItem && this.canOpenInlineDetail(detailItem)) {
+            this.openInlineDetail(detailItem);
+            return;
+        }
+
+        if (this.selectedDetailItem()) {
+            this.clearInlineDetail();
+        }
+    }
+
+    private isSameCollectionViewState(
+        left: CollectionViewState | null,
+        right: CollectionViewState | null
+    ): boolean {
+        return (
+            left?.selectedContentType === right?.selectedContentType &&
+            left?.scope === right?.scope
+        );
+    }
+
+    private toHistoryStateRecord(state: unknown): Record<string, unknown> {
+        return state && typeof state === 'object'
+            ? { ...(state as Record<string, unknown>) }
+            : {};
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.html b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.html
new file mode 100644
index 0000000..be6ee50
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.html
@@ -0,0 +1,39 @@
+@if (filteredItems().length === 0) {
+    <div class="empty-state">
+        <mat-icon class="empty-icon">{{
+            contentType() === 'movie' ? 'movie' : 'tv'
+        }}</mat-icon>
+        <p class="empty-title">
+            @if (searchTerm()) {
+                {{ 'WORKSPACE.GLOBAL_FAVORITES.NO_RESULTS' | translate }}
+            } @else {
+                {{
+                    (mode() === 'favorites'
+                        ? 'PORTALS.NO_FAVORITES'
+                        : 'PORTALS.NO_RECENT_ITEMS'
+                    ) | translate
+                }}
+            }
+        </p>
+    </div>
+} @else {
+    <div class="grid-container">
+        @for (item of filteredItems(); track trackByUid($index, item)) {
+            <app-content-card
+                [posterUrl]="item.posterUrl ?? ''"
+                [title]="item.name"
+                [type]="item.contentType"
+                [date]="item.addedAt ?? item.viewedAt"
+                [showRemoveButton]="true"
+                [removeTooltip]="
+                    (mode() === 'favorites'
+                        ? 'PORTALS.REMOVE_FROM_FAVORITES'
+                        : 'PORTALS.REMOVE_FROM_RECENT'
+                    ) | translate
+                "
+                (cardClick)="onCardClick(item)"
+                (remove)="onRemove(item)"
+            />
+        }
+    </div>
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
new file mode 100644
index 0000000..7cbd36c
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
@@ -0,0 +1,69 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.search-panel {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -10px;
+    flex-shrink: 0;
+    padding: 0 16px;
+}
+
+.search-bar {
+    width: 100%;
+    max-width: 400px;
+    @include mat.form-field-density(-5);
+}
+
+:host ::ng-deep .search-bar div {
+    border-radius: 20px;
+}
+
+:host ::ng-deep .search-bar div[matformfieldlineripple],
+:host ::ng-deep .search-bar .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
+
+.grid-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 16px;
+    padding: 16px;
+    align-content: start;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px 24px;
+    flex: 1;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+
+    .empty-icon {
+        font-size: 48px;
+        height: 48px;
+        width: 48px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+    }
+
+    .empty-title {
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.ts
new file mode 100644
index 0000000..7a73b22
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.ts
@@ -0,0 +1,51 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    output,
+} from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    CollectionContentType,
+    UnifiedCollectionItem,
+} from '@iptvnator/portal/shared/util';
+import { ContentCardComponent } from '../content-card/content-card.component';
+
+@Component({
+    selector: 'app-unified-grid-tab',
+    templateUrl: './unified-grid-tab.component.html',
+    styleUrl: './unified-grid-tab.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ContentCardComponent, MatIconModule, TranslatePipe],
+})
+export class UnifiedGridTabComponent {
+    readonly items = input.required<UnifiedCollectionItem[]>();
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly contentType = input<CollectionContentType>('movie');
+    readonly searchTerm = input('');
+
+    readonly removeItem = output<UnifiedCollectionItem>();
+    readonly itemSelected = output<UnifiedCollectionItem>();
+
+    readonly filteredItems = computed(() => {
+        const term = this.searchTerm().trim().toLowerCase();
+        const all = this.items();
+        return term
+            ? all.filter((i) => i.name.toLowerCase().includes(term))
+            : all;
+    });
+
+    onCardClick(item: UnifiedCollectionItem): void {
+        this.itemSelected.emit(item);
+    }
+
+    onRemove(item: UnifiedCollectionItem): void {
+        this.removeItem.emit(item);
+    }
+
+    trackByUid(_: number, item: UnifiedCollectionItem): string {
+        return item.uid;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html
new file mode 100644
index 0000000..4ea757e
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.html
@@ -0,0 +1,132 @@
+<div
+    class="sidebar"
+    appResizable
+    [minWidth]="250"
+    [maxWidth]="600"
+    [defaultWidth]="360"
+    storageKey="unified-live-tab-sidebar-width"
+>
+    <app-global-favorites-list
+        [channels]="channelsForList()"
+        [epgMap]="epgMap()"
+        [progressTick]="progressTick()"
+        [activeUid]="activeUid()"
+        [searchTermInput]="searchTerm()"
+        [draggable]="mode() === 'favorites'"
+        [sortMode]="sortMode()"
+        (channelSelected)="onChannelSelected($event)"
+        (channelsReordered)="onReorder($event)"
+        (favoriteToggled)="onFavoriteToggled($event)"
+    />
+</div>
+
+<div class="content-container">
+    @if (activeDetail()) {
+        @if (shouldUseInlinePlayer()) {
+            <div class="video-player" [class.video-player--radio]="isRadioSelection()">
+                @if (isRadioSelection()) {
+                    <button
+                        mat-icon-button
+                        (click)="onClose()"
+                        class="radio-close-btn"
+                        aria-label="Close player"
+                    >
+                        <mat-icon>close</mat-icon>
+                    </button>
+
+                    <app-audio-player
+                        [url]="currentStreamUrl()"
+                        [icon]="
+                            activeRadioChannel()?.tvg?.logo ??
+                            activeDetail()?.playback?.thumbnail ??
+                            ''
+                        "
+                        [channelName]="
+                            activeRadioChannel()?.name ||
+                            activeDetail()?.playback?.title ||
+                            ''
+                        "
+                    />
+                } @else {
+                    <div class="player-toolbar">
+                        <span class="player-title">{{
+                            activeDetail()?.playback?.title
+                        }}</span>
+                        <button
+                            mat-icon-button
+                            (click)="onClose()"
+                            class="close-btn"
+                        >
+                            <mat-icon>close</mat-icon>
+                        </button>
+                    </div>
+
+                    @if (player() === 'videojs') {
+                        <app-vjs-player
+                            [options]="{
+                                sources: [
+                                    {
+                                        src: currentStreamUrl(),
+                                        type: 'application/x-mpegURL',
+                                    },
+                                ],
+                            }"
+                            [volume]="1"
+                        />
+                    }
+                    @if (player() === 'html5') {
+                        <app-html-video-player
+                            [channel]="activeChannelForOverlay()!"
+                            [volume]="1"
+                            [showCaptions]="false"
+                        />
+                    }
+                    @if (player() === 'artplayer') {
+                        <app-art-player
+                            [channel]="activeChannelForOverlay()!"
+                            [volume]="1"
+                            [showCaptions]="false"
+                        />
+                    }
+                }
+            </div>
+        }
+
+        @if (!isRadioSelection()) {
+            <div class="epg">
+                @if (!shouldUseInlinePlayer()) {
+                    <div class="player-toolbar">
+                        <span class="player-title">{{
+                            activeDetail()?.playback?.title
+                        }}</span>
+                        <button
+                            mat-icon-button
+                            (click)="onClose()"
+                            class="close-btn"
+                        >
+                            <mat-icon>close</mat-icon>
+                        </button>
+                    </div>
+                }
+                <div class="epg-content">
+                    @if (isM3uSelection()) {
+                        <app-epg-list
+                            [controlledChannel]="currentM3uChannel()"
+                            [controlledPrograms]="currentM3uPrograms()"
+                            [archivePlaybackAvailable]="
+                                currentM3uArchivePlaybackAvailable()
+                            "
+                        />
+                    } @else {
+                        <app-epg-view [epgItems]="currentPortalEpgItems()" />
+                    }
+                </div>
+            </div>
+        }
+    } @else {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
+        />
+    }
+</div>
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss
new file mode 100644
index 0000000..83f4e68
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.scss
@@ -0,0 +1,101 @@
+@use '../../styles/portal-layout' as portal;
+
+@include portal.live-layout;
+
+.sidebar {
+    > app-global-favorites-list {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+    }
+}
+
+.content-container {
+    background: var(--mat-sys-surface);
+
+    &:has(> app-portal-empty-state) {
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.video-player {
+    background: #000;
+    display: flex;
+    flex-direction: column;
+
+    &--radio {
+        position: relative;
+        background: var(--mat-sys-surface);
+    }
+
+    > app-vjs-player,
+    > app-html-video-player,
+    > app-art-player,
+    > app-audio-player {
+        flex: 1;
+        min-height: 0;
+        display: block;
+    }
+}
+
+.player-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 12px 4px 16px;
+    flex-shrink: 0;
+    background: var(--mat-sys-surface-container-low);
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
+    min-height: 40px;
+}
+
+.player-title {
+    flex: 1;
+    min-width: 0;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--mat-sys-on-surface);
+}
+
+.close-btn {
+    flex-shrink: 0;
+}
+
+.radio-close-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 4;
+    color: var(--mat-sys-on-surface);
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-high) 72%,
+        transparent
+    );
+    backdrop-filter: blur(12px);
+}
+
+.epg {
+    border-top: 1px solid var(--mat-sys-outline-variant);
+    background: var(--mat-sys-surface);
+    display: flex;
+    flex-direction: column;
+}
+
+.epg-content {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    > app-epg-view,
+    > app-epg-list {
+        flex: 1;
+        min-height: 0;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts
new file mode 100644
index 0000000..e742fa4
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-live-tab.component.ts
@@ -0,0 +1,370 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    DestroyRef,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslatePipe } from '@ngx-translate/core';
+import { isM3uCatchupPlaybackSupported } from 'm3u-utils';
+import {
+    DEFAULT_FAVORITES_CHANNEL_SORT_MODE,
+    FavoritesChannelSortMode,
+    matchesOpenLiveCollectionItem,
+    OpenLiveCollectionItemState,
+    PORTAL_PLAYER,
+    ResolvedLiveCollectionDetail,
+    StreamResolverService,
+    UnifiedCollectionItem,
+    UnifiedFavoriteChannel,
+    UnifiedRecentDataService,
+} from '@iptvnator/portal/shared/util';
+import { EpgListComponent } from '@iptvnator/ui/epg';
+import { GlobalFavoritesListComponent } from '../global-favorites-list/global-favorites-list.component';
+import { PortalEmptyStateComponent } from '../portal-empty-state/portal-empty-state.component';
+import {
+    AudioPlayerComponent,
+    ArtPlayerComponent,
+    HtmlVideoPlayerComponent,
+    VjsPlayerComponent,
+} from '@iptvnator/ui/playback';
+import { ResizableDirective } from 'components';
+import { SettingsStore } from 'services';
+import { Channel, EpgProgram } from 'shared-interfaces';
+import { EpgViewComponent } from 'shared-portals';
+
+@Component({
+    selector: 'app-unified-live-tab',
+    templateUrl: './unified-live-tab.component.html',
+    styleUrl: './unified-live-tab.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        AudioPlayerComponent,
+        ArtPlayerComponent,
+        EpgListComponent,
+        EpgViewComponent,
+        GlobalFavoritesListComponent,
+        HtmlVideoPlayerComponent,
+        MatButtonModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        PortalEmptyStateComponent,
+        ResizableDirective,
+        TranslatePipe,
+        VjsPlayerComponent,
+    ],
+})
+export class UnifiedLiveTabComponent {
+    readonly items = input.required<UnifiedCollectionItem[]>();
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly searchTerm = input('');
+    readonly autoOpenItem = input<OpenLiveCollectionItemState | null>(null);
+    readonly sortMode = input<FavoritesChannelSortMode>(
+        DEFAULT_FAVORITES_CHANNEL_SORT_MODE
+    );
+
+    readonly removeItem = output<UnifiedCollectionItem>();
+    readonly reorderItems = output<UnifiedCollectionItem[]>();
+    readonly itemPlayed = output<UnifiedCollectionItem>();
+    readonly autoOpenHandled = output<void>();
+
+    private readonly streamResolver = inject(StreamResolverService);
+    private readonly recentData = inject(UnifiedRecentDataService);
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+    private readonly destroyRef = inject(DestroyRef);
+
+    readonly player = this.settingsStore.player;
+    readonly isEmbeddedPlayer = computed(() =>
+        this.portalPlayer.isEmbeddedPlayer()
+    );
+
+    readonly activeDetail = signal<ResolvedLiveCollectionDetail | null>(null);
+    readonly activeUid = signal<string | null>(null);
+    readonly isSelecting = signal(false);
+    readonly epgMap = signal<Map<string, EpgProgram | null>>(new Map());
+    readonly progressTick = signal(0);
+    readonly currentStreamUrl = computed(
+        () => this.activeDetail()?.playback.streamUrl ?? ''
+    );
+    readonly isM3uSelection = computed(
+        () => this.activeDetail()?.epgMode === 'm3u'
+    );
+    readonly currentPortalEpgItems = computed(
+        () => this.activeDetail()?.epgItems ?? []
+    );
+    readonly currentM3uPrograms = computed(() => {
+        const detail = this.activeDetail();
+        if (detail?.epgMode !== 'm3u') {
+            return [];
+        }
+
+        return detail.epgPrograms ?? [];
+    });
+    readonly currentM3uChannel = computed(() => {
+        const detail = this.activeDetail();
+        if (detail?.epgMode !== 'm3u') {
+            return null;
+        }
+
+        return detail.channel ?? null;
+    });
+    readonly currentM3uArchivePlaybackAvailable = computed(() =>
+        isM3uCatchupPlaybackSupported(this.currentM3uChannel())
+    );
+    readonly activeRadioChannel = computed(() => {
+        const channel = this.currentM3uChannel();
+        return channel?.radio === 'true' ? channel : null;
+    });
+    readonly isRadioSelection = computed(() => this.activeRadioChannel() !== null);
+    readonly shouldUseInlinePlayer = computed(() => {
+        return this.isRadioSelection() || this.isEmbeddedPlayer();
+    });
+
+    readonly activeChannelForOverlay = computed((): Channel | undefined => {
+        const detail = this.activeDetail();
+        if (!detail) {
+            return undefined;
+        }
+
+        if (detail.channel) {
+            return detail.channel;
+        }
+
+        return {
+            id: this.activeUid() ?? '',
+            name: detail.playback.title ?? '',
+            url: detail.playback.streamUrl,
+            tvg: {
+                logo: detail.playback.thumbnail ?? '',
+                id: '',
+                name: '',
+                rec: '',
+                url: '',
+            },
+            group: { title: '' },
+            http: {
+                referrer: detail.playback.referer ?? '',
+                'user-agent': detail.playback.userAgent ?? '',
+                origin: detail.playback.origin ?? '',
+            },
+            radio: 'false',
+            epgParams: '',
+        } satisfies Channel;
+    });
+
+    readonly channelsForList = computed((): UnifiedFavoriteChannel[] =>
+        this.items().map((item) => ({
+            uid: item.uid,
+            name: item.name,
+            logo: item.logo ?? null,
+            sourceType: item.sourceType,
+            playlistId: item.playlistId,
+            playlistName: item.playlistName,
+            streamUrl: item.streamUrl,
+            xtreamId: item.xtreamId,
+            tvgId: item.tvgId,
+            stalkerCmd: item.stalkerCmd,
+            stalkerPortalUrl: item.stalkerPortalUrl,
+            stalkerMacAddress: item.stalkerMacAddress,
+            addedAt: item.addedAt ?? new Date(0).toISOString(),
+            position: item.position ?? 0,
+            contentId: item.contentId,
+        }))
+    );
+
+    private selectionRequestId = 0;
+
+    constructor() {
+        effect(() => {
+            const items = this.items();
+            void this.loadEpgMap(items);
+
+            const activeUid = this.activeUid();
+            if (activeUid && !items.some((item) => item.uid === activeUid)) {
+                this.onClose();
+            }
+        });
+
+        effect(() => {
+            const target = this.autoOpenItem();
+            const items = this.items();
+            if (!target || items.length === 0) {
+                return;
+            }
+
+            const matchedItem = items.find((item) =>
+                matchesOpenLiveCollectionItem(item, target)
+            );
+            if (!matchedItem) {
+                return;
+            }
+
+            if (this.activeUid() === matchedItem.uid) {
+                if (this.activeDetail()) {
+                    this.autoOpenHandled.emit();
+                    return;
+                }
+
+                if (this.isSelecting()) {
+                    return;
+                }
+            }
+
+            void this.activateItem(matchedItem, true);
+        });
+
+        const tickInterval = setInterval(
+            () => this.progressTick.update((tick) => tick + 1),
+            30_000
+        );
+        this.destroyRef.onDestroy(() => clearInterval(tickInterval));
+    }
+
+    async onChannelSelected(channel: UnifiedFavoriteChannel): Promise<void> {
+        const item = this.items().find(
+            (candidate) => candidate.uid === channel.uid
+        );
+        if (item) {
+            await this.activateItem(item);
+        }
+    }
+
+    onFavoriteToggled(channel: UnifiedFavoriteChannel): void {
+        const item = this.items().find(
+            (candidate) => candidate.uid === channel.uid
+        );
+        if (item) {
+            this.removeItem.emit(item);
+        }
+    }
+
+    onReorder(channels: UnifiedFavoriteChannel[]): void {
+        const reordered = channels
+            .map((channel) =>
+                this.items().find((candidate) => candidate.uid === channel.uid)
+            )
+            .filter(Boolean) as UnifiedCollectionItem[];
+        this.reorderItems.emit(reordered);
+    }
+
+    onClose(): void {
+        this.selectionRequestId += 1;
+        this.isSelecting.set(false);
+        this.activeDetail.set(null);
+        this.activeUid.set(null);
+    }
+
+    private async loadEpgMap(items: UnifiedCollectionItem[]): Promise<void> {
+        const epgMap = await this.streamResolver.loadEpgForItems(items);
+        this.epgMap.set(epgMap);
+    }
+
+    private async activateItem(
+        item: UnifiedCollectionItem,
+        isAutoOpen = false
+    ): Promise<void> {
+        if (this.activeUid() === item.uid && this.activeDetail()) {
+            if (isAutoOpen) {
+                this.autoOpenHandled.emit();
+            }
+            return;
+        }
+
+        const requestId = ++this.selectionRequestId;
+        this.activeUid.set(item.uid);
+        this.activeDetail.set(null);
+        this.isSelecting.set(true);
+
+        try {
+            const detail =
+                item.sourceType === 'm3u'
+                    ? await this.streamResolver.resolveM3uPlaybackDetail(item)
+                    : await this.streamResolver.resolveLiveDetail(item);
+            if (requestId !== this.selectionRequestId) {
+                return;
+            }
+
+            this.activeDetail.set(detail);
+
+            if (detail.epgMode === 'm3u') {
+                void this.hydrateSelectedM3uPrograms(item, detail, requestId);
+            }
+
+            if (this.shouldOpenExternalPlayback(detail)) {
+                void this.portalPlayer.openResolvedPlayback(detail.playback);
+            }
+
+            try {
+                const updatedItem =
+                    await this.recentData.recordLivePlayback(item);
+                if (requestId === this.selectionRequestId) {
+                    this.itemPlayed.emit(updatedItem);
+                }
+            } catch {
+                // Keep playback/EPG visible even if history persistence fails.
+            }
+
+            if (requestId === this.selectionRequestId && isAutoOpen) {
+                this.autoOpenHandled.emit();
+            }
+        } catch {
+            if (requestId === this.selectionRequestId) {
+                this.activeDetail.set(null);
+                this.activeUid.set(null);
+            }
+        } finally {
+            if (requestId === this.selectionRequestId) {
+                this.isSelecting.set(false);
+            }
+        }
+    }
+
+    private shouldOpenExternalPlayback(
+        detail: ResolvedLiveCollectionDetail
+    ): boolean {
+        return !this.isRadioDetail(detail) && !this.portalPlayer.isEmbeddedPlayer();
+    }
+
+    private isRadioDetail(
+        detail: ResolvedLiveCollectionDetail | null | undefined
+    ): boolean {
+        return detail?.epgMode === 'm3u' && detail.channel?.radio === 'true';
+    }
+
+    private async hydrateSelectedM3uPrograms(
+        item: UnifiedCollectionItem,
+        detail: ResolvedLiveCollectionDetail,
+        requestId: number
+    ): Promise<void> {
+        if (detail.epgMode !== 'm3u') {
+            return;
+        }
+
+        const epgPrograms = await this.streamResolver.loadM3uProgramsForItem(
+            item,
+            detail.channel
+        );
+        if (requestId !== this.selectionRequestId) {
+            return;
+        }
+
+        this.activeDetail.update((currentDetail) => {
+            if (!currentDetail || currentDetail.epgMode !== 'm3u') {
+                return currentDetail;
+            }
+
+            return {
+                ...currentDetail,
+                epgPrograms,
+            };
+        });
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/navigation/navigation.component.html b/libs/portal/shared/ui/src/lib/navigation/navigation.component.html
new file mode 100644
index 0000000..76dcf67
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/navigation/navigation.component.html
@@ -0,0 +1,78 @@
+<div
+    class="portal-status-container"
+    [class]="getStatusColor()"
+    [matTooltip]="portalStatus() ?? ''"
+    matTooltipPosition="right"
+>
+    <mat-icon class="status-watermark">{{ getStatusIcon() }}</mat-icon>
+</div>
+<div class="nav-section">
+    <mat-nav-list>
+        <a
+            class="portal-nav-link nav-item"
+            mat-list-item
+            routerLink="/"
+            routerLinkActive="active"
+            [routerLinkActiveOptions]="{ exact: true }"
+            [matTooltip]="'PORTALS.SIDEBAR.HOME' | translate"
+            matTooltipPosition="right"
+        >
+            <mat-icon matListItemIcon>home</mat-icon>
+        </a>
+    </mat-nav-list>
+</div>
+<mat-divider />
+<div class="nav-section">
+    <app-portal-rail-links
+        variant="list"
+        activeClass="active"
+        [selectedSection]="selectedContentType()"
+        [links]="primaryLinks()"
+    />
+</div>
+<mat-divider />
+
+<div class="nav-section">
+    <app-portal-rail-links
+        variant="list"
+        activeClass="active"
+        [selectedSection]="selectedContentType()"
+        [links]="secondaryLinks()"
+    />
+</div>
+
+<div class="navigation-bottom">
+    <mat-divider />
+    <mat-nav-list>
+        @if (!isStalkerPlaylist()) {
+            <a
+                mat-list-item
+                class="portal-nav-link nav-item action-button"
+                (click)="openAccountInfo()"
+                [matTooltip]="'PORTALS.SIDEBAR.ACCOUNT_INFO' | translate"
+                matTooltipPosition="right"
+            >
+                <mat-icon>person</mat-icon>
+            </a>
+        }
+        <a
+            class="portal-nav-link nav-item"
+            mat-list-item
+            (click)="openPlaylistInfo()"
+            [matTooltip]="'PORTALS.SIDEBAR.PLAYLIST_INFO' | translate"
+            matTooltipPosition="right"
+        >
+            <mat-icon matListItemIcon>playlist_play</mat-icon>
+        </a>
+        <mat-divider />
+        <a
+            class="portal-nav-link nav-item"
+            mat-list-item
+            (click)="openSettings()"
+            [matTooltip]="'MENU.SETTINGS' | translate"
+            matTooltipPosition="right"
+        >
+            <mat-icon matListItemIcon>settings</mat-icon>
+        </a>
+    </mat-nav-list>
+</div>
diff --git a/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss b/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
new file mode 100644
index 0000000..d12c17c
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
@@ -0,0 +1,116 @@
+@use '../../../../../../../apps/web/src/nav-list.scss';
+
+:host {
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.mdc-list {
+    padding: 2px 0;
+}
+
+.mat-nav-list {
+    padding: 0;
+    margin: 0;
+
+    .portal-nav-link.mdc-list-item {
+        min-height: 28px;
+        height: 28px;
+        padding: 0 !important;
+        border-radius: 10px;
+        margin: 2px 0;
+        display: flex;
+        justify-content: center;
+        color: var(--mat-sys-on-surface-variant);
+
+        .mdc-list-item__start {
+            margin-inline-end: 0 !important;
+            margin-inline-start: 0 !important;
+        }
+
+        .mdc-list-item__content {
+            display: none;
+        }
+    }
+
+    mat-icon.mat-mdc-list-item-icon,
+    mat-icon {
+        font-size: 18px !important;
+        width: 18px !important;
+        height: 18px !important;
+    }
+}
+
+.navigation-bottom {
+    margin-top: auto;
+    padding-bottom: 2px;
+}
+
+.active {
+    color: var(--app-selection-color);
+
+    mat-icon {
+        color: var(--app-selection-color);
+    }
+}
+
+mat-divider {
+    margin: 1px 0;
+}
+
+mat-icon {
+    margin-right: 0;
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+}
+
+a.mat-mdc-list-item.mdc-list-item {
+    padding-right: 0;
+}
+
+.portal-status-container {
+    app-region: drag;
+    margin: -4px -4px 0;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    background: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface-variant);
+    border: 1px solid var(--mat-sys-outline-variant);
+}
+
+.portal-status-container.status-active {
+    background: var(--mat-sys-primary-container);
+    color: var(--mat-sys-on-primary-container);
+}
+
+.portal-status-container.status-inactive,
+.portal-status-container.status-unavailable {
+    background: var(--mat-sys-error-container);
+    color: var(--mat-sys-on-error-container);
+}
+
+.portal-status-container.status-expired {
+    background: var(--mat-sys-tertiary-container);
+    color: var(--mat-sys-on-tertiary-container);
+}
+
+.portal-status-container .status-watermark {
+    font-size: 24px !important;
+    width: 24px !important;
+    height: 24px !important;
+    margin: 0;
+}
+
+.nav-section {
+    app-portal-rail-links {
+        display: block;
+        padding: 0;
+        margin: 0;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/navigation/navigation.component.ts b/libs/portal/shared/ui/src/lib/navigation/navigation.component.ts
new file mode 100644
index 0000000..2b09e04
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/navigation/navigation.component.ts
@@ -0,0 +1,112 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    buildPortalRailLinks,
+    PORTAL_NAVIGATION_ACTIONS,
+    PortalRailSection,
+} from '@iptvnator/portal/shared/util';
+import { selectPlaylistById } from 'm3u-state';
+import { Playlist } from 'shared-interfaces';
+import { PortalRailLinksComponent } from './portal-rail-links.component';
+
+@Component({
+    selector: 'app-navigation',
+    imports: [
+        MatDividerModule,
+        MatIcon,
+        MatListModule,
+        MatTooltip,
+        RouterLink,
+        RouterLinkActive,
+        TranslatePipe,
+        PortalRailLinksComponent,
+    ],
+    templateUrl: './navigation.component.html',
+    styleUrl: './navigation.component.scss',
+})
+export class NavigationComponent {
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly navigationActions = inject(PORTAL_NAVIGATION_ACTIONS);
+    private readonly store = inject(Store);
+
+    readonly portalStatus = input<
+        'active' | 'inactive' | 'expired' | 'unavailable'
+    >();
+    readonly selectedContentType = input<PortalRailSection | undefined>();
+
+    readonly currentPlaylist = this.store.selectSignal(
+        selectPlaylistById(this.activatedRoute.snapshot.params.id)
+    );
+
+    readonly isStalkerPlaylist = computed(
+        () => !!(this.currentPlaylist() as Playlist | undefined)?.macAddress
+    );
+
+    readonly isElectron = !!window.electron;
+
+    readonly railLinks = computed(() => {
+        const playlistId =
+            (this.currentPlaylist() as Playlist | undefined)?._id ??
+            this.activatedRoute.snapshot.params['id'];
+        if (!playlistId) {
+            return { primary: [], secondary: [] };
+        }
+
+        return buildPortalRailLinks({
+            provider: this.isStalkerPlaylist() ? 'stalker' : 'xtreams',
+            playlistId,
+            isElectron: this.isElectron,
+            workspace: false,
+        });
+    });
+    readonly primaryLinks = computed(() => this.railLinks().primary);
+    readonly secondaryLinks = computed(() => this.railLinks().secondary);
+
+    getStatusColor(): string {
+        if (this.isStalkerPlaylist()) return 'status-active';
+
+        switch (this.portalStatus()) {
+            case 'active':
+                return 'status-active';
+            case 'inactive':
+                return 'status-inactive';
+            case 'expired':
+                return 'status-expired';
+            default:
+                return 'status-unavailable';
+        }
+    }
+
+    getStatusIcon(): string {
+        if (this.isStalkerPlaylist()) return 'play_circle';
+
+        switch (this.portalStatus()) {
+            case 'active':
+                return 'check_circle';
+            case 'inactive':
+                return 'cancel';
+            case 'expired':
+                return 'warning';
+            default:
+                return 'error';
+        }
+    }
+
+    openAccountInfo(): void {
+        this.navigationActions.openAccountInfo();
+    }
+
+    openSettings(): void {
+        this.navigationActions.openSettings();
+    }
+
+    openPlaylistInfo(): void {
+        this.navigationActions.openPlaylistInfo(this.currentPlaylist());
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.html b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.html
new file mode 100644
index 0000000..d2211b9
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.html
@@ -0,0 +1,44 @@
+@if (variant() === 'list') {
+    <mat-nav-list class="p-0 m-0">
+        @for (link of links(); track link.path.join('/')) {
+            <a
+                class="portal-rail-link nav-item"
+                mat-list-item
+                [routerLink]="link.path"
+                [routerLinkActive]="activeClass()"
+                [routerLinkActiveOptions]="{ exact: link.exact ?? false }"
+                [matTooltip]="link.tooltip"
+                matTooltipPosition="right"
+                [attr.aria-label]="link.tooltip"
+                [attr.aria-current]="isActive(link) ? 'page' : null"
+                [class.active]="activeClass() === 'active' && isActive(link)"
+                [class.is-active]="
+                    activeClass() === 'is-active' && isActive(link)
+                "
+            >
+                <mat-icon matListItemIcon>{{ resolveIcon(link) }}</mat-icon>
+            </a>
+        }
+    </mat-nav-list>
+} @else {
+    <nav class="flex flex-col items-center gap-2 w-full">
+        @for (link of links(); track link.path.join('/')) {
+            <a
+                class="portal-rail-link nav-item"
+                [routerLink]="link.path"
+                [routerLinkActive]="activeClass()"
+                [routerLinkActiveOptions]="{ exact: link.exact ?? false }"
+                [matTooltip]="link.tooltip"
+                [matTooltipPosition]="'right'"
+                [attr.aria-label]="link.tooltip"
+                [attr.aria-current]="isActive(link) ? 'page' : null"
+                [class.active]="activeClass() === 'active' && isActive(link)"
+                [class.is-active]="
+                    activeClass() === 'is-active' && isActive(link)
+                "
+            >
+                <mat-icon>{{ resolveIcon(link) }}</mat-icon>
+            </a>
+        }
+    </nav>
+}
diff --git a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
new file mode 100644
index 0000000..dda2ea5
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
@@ -0,0 +1,94 @@
+@use '../../../../../../../apps/web/src/nav-list.scss';
+
+:host {
+    display: block;
+    width: 100%;
+    --rail-link-color: var(--mat-sys-on-surface-variant);
+}
+
+.p-0.m-0 {
+    .portal-rail-link.mdc-list-item {
+        min-height: 28px;
+        height: 28px;
+        padding: 0 !important;
+        border-radius: 10px;
+        margin: 2px 0;
+        display: flex;
+        justify-content: center;
+        color: var(--rail-link-color);
+        transition:
+            background 0.2s ease,
+            color 0.2s ease,
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
+
+        .mdc-list-item__start {
+            margin-inline-end: 0 !important;
+            margin-inline-start: 0 !important;
+        }
+
+        .mdc-list-item__content {
+            display: none;
+        }
+    }
+
+    mat-icon.mat-mdc-list-item-icon,
+    mat-icon {
+        font-size: 18px !important;
+        width: 18px !important;
+        height: 18px !important;
+    }
+}
+
+nav.flex .portal-rail-link {
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    gap: 0;
+    border-radius: 14px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rail-link-color);
+    app-region: no-drag;
+    animation: rail-link-enter 0.2s ease-out both;
+}
+
+@for $i from 1 through 8 {
+    nav.flex .portal-rail-link:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 30}ms;
+    }
+}
+
+@keyframes rail-link-enter {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+nav.flex .portal-rail-link.is-active,
+nav.flex .portal-rail-link.active {
+    box-shadow:
+        inset 0 0 0 1px var(--app-selection-border),
+        0 10px 20px -16px var(--app-selection-glow);
+}
+
+nav.flex .portal-rail-link.is-active::after,
+nav.flex .portal-rail-link.active::after {
+    content: '';
+    position: absolute;
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 20px;
+    border-radius: 999px;
+    background: var(--app-selection-color);
+    box-shadow: 0 0 10px var(--app-selection-glow);
+}
diff --git a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts
new file mode 100644
index 0000000..c52c784
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts
@@ -0,0 +1,54 @@
+import { Component, inject, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltip } from '@angular/material/tooltip';
+import {
+    IsActiveMatchOptions,
+    Router,
+    RouterLink,
+    RouterLinkActive,
+} from '@angular/router';
+import { PortalRailLink, PortalRailSection } from '@iptvnator/portal/shared/util';
+
+@Component({
+    selector: 'app-portal-rail-links',
+    imports: [MatIcon, MatListModule, MatTooltip, RouterLink, RouterLinkActive],
+    templateUrl: './portal-rail-links.component.html',
+    styleUrl: './portal-rail-links.component.scss',
+})
+export class PortalRailLinksComponent {
+    private readonly router = inject(Router);
+
+    readonly links = input<PortalRailLink[]>([]);
+    readonly selectedSection = input<
+        PortalRailSection | string | null | undefined
+    >(null);
+    readonly activeClass = input<'active' | 'is-active'>('active');
+    readonly variant = input<'list' | 'rail'>('list');
+
+    resolveIcon(link: PortalRailLink): string {
+        const normalizedPath = link.path.map((segment) => String(segment)).join('/');
+        if (normalizedPath.includes('/workspace/sources')) {
+            return 'playlist_play';
+        }
+
+        return link.icon;
+    }
+
+    isActive(link: PortalRailLink): boolean {
+        const selectedSection = this.selectedSection();
+        if (selectedSection && link.section) {
+            return selectedSection === link.section;
+        }
+
+        const commands = link.path.map((segment) => String(segment));
+        const tree = this.router.createUrlTree(commands);
+        const matchOptions: IsActiveMatchOptions = {
+            paths: link.exact ? 'exact' : 'subset',
+            queryParams: 'ignored',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+        };
+        return this.router.isActive(tree, matchOptions);
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/styles/_content-grid.scss b/libs/portal/shared/ui/src/lib/styles/_content-grid.scss
new file mode 100644
index 0000000..4c4ecc2
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/styles/_content-grid.scss
@@ -0,0 +1,3 @@
+// Canonical source: libs/ui/styles/_content-grid.scss
+// This stub forwards the mixins for components that @use this file directly.
+@forward '../../../../../../../libs/ui/styles/content-grid';
diff --git a/libs/portal/shared/ui/src/lib/styles/_portal-layout.scss b/libs/portal/shared/ui/src/lib/styles/_portal-layout.scss
new file mode 100644
index 0000000..f551781
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/styles/_portal-layout.scss
@@ -0,0 +1,3 @@
+// Canonical source: libs/ui/styles/_portal-layout.scss
+// This stub forwards the mixin for components that @use this file directly.
+@forward '../../../../../../../libs/ui/styles/portal-layout';
diff --git a/libs/portal/shared/ui/src/lib/styles/_skeleton.scss b/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
new file mode 100644
index 0000000..2ac9351
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
@@ -0,0 +1,162 @@
+// ─── Shared skeleton / shimmer primitives ────────────────────────────────────
+// Used by grid-list (poster cards) and unified-collection (channel list rows).
+
+// ─── Grid skeleton (poster cards) ────────────────────────────────────────────
+
+.grid-skeleton-card {
+    width: 100%;
+}
+
+.grid-skeleton-thumb {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    border-radius: 10px;
+    overflow: hidden;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 84%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 16%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 94%,
+            transparent
+        );
+}
+
+.grid-skeleton-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 34px;
+    height: 14px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 56%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 44%
+    );
+}
+
+.grid-skeleton-title {
+    margin-top: 10px;
+    padding: 0 3px;
+    display: grid;
+    gap: 6px;
+}
+
+.grid-skeleton-line {
+    height: 9px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
+    );
+
+    &--primary {
+        width: 92%;
+    }
+
+    &--secondary {
+        width: 68%;
+    }
+}
+
+// ─── List skeleton (channel rows) ────────────────────────────────────────────
+
+.list-skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px;
+    border-bottom: 1px solid
+        color-mix(
+            in srgb,
+            var(--mat-sys-outline-variant) 40%,
+            transparent
+        );
+}
+
+.list-skeleton-handle {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 60%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 40%
+    );
+}
+
+.list-skeleton-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    flex-shrink: 0;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 84%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 16%
+    );
+}
+
+.list-skeleton-text {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+    gap: 6px;
+}
+
+.list-skeleton-star {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 60%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 40%
+    );
+}
+
+// ─── Shimmer animation (shared) ──────────────────────────────────────────────
+
+.grid-skeleton-thumb,
+.grid-skeleton-badge,
+.grid-skeleton-line,
+.list-skeleton-handle,
+.list-skeleton-avatar,
+.list-skeleton-star,
+.list-skeleton-text .grid-skeleton-line {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 10%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 20%,
+                    transparent
+                )
+                46%,
+            transparent 76%
+        );
+        transform: translateX(-120%);
+        animation: skeleton-shimmer 1.2s ease-in-out infinite;
+    }
+}
+
+@keyframes skeleton-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/styles/portal-main-container.scss b/libs/portal/shared/ui/src/lib/styles/portal-main-container.scss
new file mode 100644
index 0000000..0c3a417
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/styles/portal-main-container.scss
@@ -0,0 +1,78 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    app-region: drag;
+
+    &.sidebar-header--workspace {
+        justify-content: flex-end;
+    }
+
+    button {
+        @include mat.form-field-density(-5);
+        app-region: no-drag;
+    }
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.content-header {
+    padding: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    app-region: drag;
+
+    h2 {
+        margin: 0;
+        font-size: 1.2rem;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    button {
+        app-region: no-drag;
+    }
+}
+
+.header-left {
+    min-width: 0;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    app-region: no-drag;
+}
+
+.category-search {
+    width: 240px;
+}
+
+.scrollable-content {
+    flex: 1;
+    overflow-y: auto;
+
+    &.no-header {
+        margin-top: 0;
+    }
+}
diff --git a/libs/portal/shared/ui/src/lib/styles/portal-sidebar.scss b/libs/portal/shared/ui/src/lib/styles/portal-sidebar.scss
new file mode 100644
index 0000000..bcf319b
--- /dev/null
+++ b/libs/portal/shared/ui/src/lib/styles/portal-sidebar.scss
@@ -0,0 +1,3 @@
+// Canonical source: libs/ui/styles/_portal-sidebar.scss
+// This stub forwards the rules for components that @use this file directly.
+@forward '../../../../../../../libs/ui/styles/portal-sidebar';
diff --git a/libs/portal/shared/ui/src/test-setup.ts b/libs/portal/shared/ui/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/shared/ui/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/shared/ui/tsconfig.json b/libs/portal/shared/ui/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/portal/shared/ui/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/portal/shared/ui/tsconfig.lib.json b/libs/portal/shared/ui/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/portal/shared/ui/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/shared/ui/tsconfig.spec.json b/libs/portal/shared/ui/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/shared/ui/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/shared/util/jest.config.ts b/libs/portal/shared/util/jest.config.ts
new file mode 100644
index 0000000..f720a5e
--- /dev/null
+++ b/libs/portal/shared/util/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-shared-util',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/shared/util',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/shared/util/project.json b/libs/portal/shared/util/project.json
new file mode 100644
index 0000000..7b1fc5e
--- /dev/null
+++ b/libs/portal/shared/util/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-shared-util",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/shared/util/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:portal-shared", "type:util"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/shared/util/jest.config.ts",
+                "tsConfig": "libs/portal/shared/util/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/shared/util/src/index.ts b/libs/portal/shared/util/src/index.ts
new file mode 100644
index 0000000..00a61df
--- /dev/null
+++ b/libs/portal/shared/util/src/index.ts
@@ -0,0 +1,20 @@
+export * from './lib/logger';
+export * from './lib/channel-sort';
+export * from './lib/favorites-channel-sort';
+export * from './lib/portal-catalog-detail';
+export * from './lib/portal-catalog-facade';
+export * from './lib/portal-external-playback';
+export * from './lib/portal-player';
+export * from './lib/portal-playback-positions';
+export * from './lib/portal-navigation-actions';
+export * from './lib/portal-collection-context';
+export * from './lib/portal-collection-context.service';
+export * from './lib/portal-collection-items';
+export * from './lib/remote-channel-navigation';
+export * from './lib/workspace-header-context.service';
+export * from './lib/workspace-view-command.types';
+export * from './lib/workspace-view-command.service';
+export * from './lib/navigation/portal-rail-links';
+export * from './lib/navigation/portal-route.utils';
+export * from './lib/navigation/workspace-portal-navigation';
+export * from './lib/collection';
diff --git a/libs/portal/shared/util/src/lib/channel-sort.ts b/libs/portal/shared/util/src/lib/channel-sort.ts
new file mode 100644
index 0000000..6f86c26
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/channel-sort.ts
@@ -0,0 +1,61 @@
+const CHANNEL_SORT_COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+});
+
+export type PortalChannelSortMode = 'server' | 'name-asc' | 'name-desc';
+
+export const DEFAULT_PORTAL_CHANNEL_SORT_MODE: PortalChannelSortMode = 'server';
+
+export function isPortalChannelSortMode(
+    value: unknown
+): value is PortalChannelSortMode {
+    return value === 'server' || value === 'name-asc' || value === 'name-desc';
+}
+
+export function restorePortalChannelSortMode(
+    storageKey: string,
+    fallback: PortalChannelSortMode = DEFAULT_PORTAL_CHANNEL_SORT_MODE
+): PortalChannelSortMode {
+    const storedValue = localStorage.getItem(storageKey);
+    return isPortalChannelSortMode(storedValue) ? storedValue : fallback;
+}
+
+export function persistPortalChannelSortMode(
+    storageKey: string,
+    mode: PortalChannelSortMode
+): void {
+    localStorage.setItem(storageKey, mode);
+}
+
+export function getPortalChannelSortModeLabel(
+    mode: PortalChannelSortMode
+): string {
+    if (mode === 'name-asc') {
+        return 'Name A-Z';
+    }
+
+    if (mode === 'name-desc') {
+        return 'Name Z-A';
+    }
+
+    return 'Server Order';
+}
+
+export function sortPortalChannelItems<T>(
+    items: readonly T[],
+    mode: PortalChannelSortMode,
+    getDisplayName: (item: T) => string | null | undefined
+): readonly T[] {
+    if (mode === 'server') {
+        return items;
+    }
+
+    return [...items].sort((a, b) => {
+        const result = CHANNEL_SORT_COLLATOR.compare(
+            getDisplayName(a) ?? '',
+            getDisplayName(b) ?? ''
+        );
+        return mode === 'name-asc' ? result : -result;
+    });
+}
diff --git a/libs/portal/shared/util/src/lib/collection/collection-helpers.ts b/libs/portal/shared/util/src/lib/collection/collection-helpers.ts
new file mode 100644
index 0000000..72167a8
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/collection-helpers.ts
@@ -0,0 +1,36 @@
+import { StalkerPortalItem } from 'shared-interfaces';
+import { CollectionContentType } from './unified-collection-item.interface';
+
+export interface XtreamFavoriteRow {
+    readonly id: number;
+    readonly category_id: number;
+    readonly playlist_id: string;
+    readonly playlist_name: string;
+    readonly xtream_id: number;
+    readonly title: string;
+    readonly type: string;
+    readonly poster_url?: string | null;
+    readonly rating?: string | null;
+    readonly added_at?: string | null;
+    readonly position?: number | null;
+}
+
+export function isStalkerItem(
+    v: string | StalkerPortalItem
+): v is StalkerPortalItem {
+    return typeof v !== 'string';
+}
+
+export function stalkerContentType(
+    fav: StalkerPortalItem
+): CollectionContentType {
+    if (fav.movie_id) return 'movie';
+    if (fav.series_id) return 'series';
+    return 'live';
+}
+
+export function xtreamContentType(type: string): CollectionContentType {
+    if (type === 'movie' || type === 'movies') return 'movie';
+    if (type === 'series') return 'series';
+    return 'live';
+}
diff --git a/libs/portal/shared/util/src/lib/collection/index.ts b/libs/portal/shared/util/src/lib/collection/index.ts
new file mode 100644
index 0000000..50330be
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/index.ts
@@ -0,0 +1,6 @@
+export * from './unified-collection-item.interface';
+export * from './unified-favorite-channel.interface';
+export * from './scope-toggle.service';
+export * from './unified-favorites-data.service';
+export * from './unified-recent-data.service';
+export * from './stream-resolver.service';
diff --git a/libs/portal/shared/util/src/lib/collection/scope-toggle.service.ts b/libs/portal/shared/util/src/lib/collection/scope-toggle.service.ts
new file mode 100644
index 0000000..1acd690
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/scope-toggle.service.ts
@@ -0,0 +1,38 @@
+import { Injectable, signal } from '@angular/core';
+
+export type CollectionScope = 'playlist' | 'all';
+
+const STORAGE_PREFIX = 'collection-scope-';
+
+@Injectable({ providedIn: 'root' })
+export class ScopeToggleService {
+    private readonly scopes = new Map<string, ReturnType<typeof signal<CollectionScope>>>();
+
+    getScope(viewKey: string): ReturnType<typeof signal<CollectionScope>> {
+        if (!this.scopes.has(viewKey)) {
+            const persisted = this.readFromStorage(viewKey);
+            this.scopes.set(viewKey, signal<CollectionScope>(persisted));
+        }
+        return this.scopes.get(viewKey)!;
+    }
+
+    setScope(viewKey: string, value: CollectionScope): void {
+        const s = this.getScope(viewKey);
+        s.set(value);
+        try {
+            localStorage.setItem(STORAGE_PREFIX + viewKey, value);
+        } catch {
+            // storage full or unavailable
+        }
+    }
+
+    private readFromStorage(viewKey: string): CollectionScope {
+        try {
+            const stored = localStorage.getItem(STORAGE_PREFIX + viewKey);
+            if (stored === 'all' || stored === 'playlist') return stored;
+        } catch {
+            // ignore
+        }
+        return 'playlist';
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/collection/stream-resolver.service.spec.ts b/libs/portal/shared/util/src/lib/collection/stream-resolver.service.spec.ts
new file mode 100644
index 0000000..6c1e793
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/stream-resolver.service.spec.ts
@@ -0,0 +1,448 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import {
+    XtreamApiService,
+    XtreamUrlService,
+} from '@iptvnator/portal/xtream/data-access';
+import { StalkerSessionService } from '@iptvnator/portal/stalker/data-access';
+import { DataService, PlaylistsService } from 'services';
+import { Playlist } from 'shared-interfaces';
+import { UnifiedCollectionItem } from './unified-collection-item.interface';
+import {
+    ResolvedLiveCollectionDetail,
+    StreamResolverService,
+} from './stream-resolver.service';
+
+describe('StreamResolverService', () => {
+    let service: StreamResolverService;
+    let playlistsService: { getPlaylistById: jest.Mock };
+    let xtreamApi: { getShortEpg: jest.Mock };
+    let xtreamUrl: { constructLiveUrl: jest.Mock };
+    let dataService: { sendIpcEvent: jest.Mock };
+    let stalkerSession: { makeAuthenticatedRequest: jest.Mock };
+
+    beforeEach(() => {
+        playlistsService = {
+            getPlaylistById: jest.fn(),
+        };
+        xtreamApi = {
+            getShortEpg: jest.fn(),
+        };
+        xtreamUrl = {
+            constructLiveUrl: jest.fn(),
+        };
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        stalkerSession = {
+            makeAuthenticatedRequest: jest.fn(),
+        };
+
+        window.electron = {
+            ...window.electron,
+            getChannelPrograms: jest.fn(),
+        } as typeof window.electron;
+
+        TestBed.configureTestingModule({
+            providers: [
+                StreamResolverService,
+                { provide: PlaylistsService, useValue: playlistsService },
+                { provide: XtreamApiService, useValue: xtreamApi },
+                { provide: XtreamUrlService, useValue: xtreamUrl },
+                { provide: DataService, useValue: dataService },
+                { provide: StalkerSessionService, useValue: stalkerSession },
+            ],
+        });
+
+        service = TestBed.inject(StreamResolverService);
+    });
+
+    it('returns M3U live detail with the full channel and raw EPG programs', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'm3u-1',
+                playlist: {
+                    items: [
+                        {
+                            id: 'channel-1',
+                            name: 'News',
+                            url: 'https://example.com/live.m3u8',
+                            group: { title: 'News' },
+                            tvg: {
+                                id: 'news-id',
+                                name: 'News',
+                                url: '',
+                                logo: 'news.png',
+                                rec: '',
+                            },
+                            http: {
+                                referrer: 'https://ref.example.com',
+                                'user-agent': 'IPTVnator',
+                                origin: 'https://origin.example.com',
+                            },
+                            radio: 'false',
+                            epgParams: '',
+                        },
+                    ],
+                },
+            } satisfies Partial<Playlist>)
+        );
+        (window.electron.getChannelPrograms as jest.Mock).mockResolvedValue([
+            {
+                start: '2026-03-26T11:00:00.000Z',
+                stop: '2026-03-26T12:00:00.000Z',
+                channel: 'news-id',
+                title: 'Morning News',
+                desc: 'Latest headlines',
+                category: null,
+            },
+        ]);
+
+        const detail = await service.resolveLiveDetail({
+            uid: 'm3u::m3u-1::https://example.com/live.m3u8',
+            name: 'News',
+            contentType: 'live',
+            sourceType: 'm3u',
+            playlistId: 'm3u-1',
+            playlistName: 'M3U List',
+            streamUrl: 'https://example.com/live.m3u8',
+            channelId: 'channel-1',
+            tvgId: 'news-id',
+            logo: 'news.png',
+        } satisfies UnifiedCollectionItem);
+
+        expect(detail).toMatchObject<Partial<ResolvedLiveCollectionDetail>>({
+            epgMode: 'm3u',
+            channel: expect.objectContaining({
+                id: 'channel-1',
+                url: 'https://example.com/live.m3u8',
+            }),
+            playback: expect.objectContaining({
+                streamUrl: 'https://example.com/live.m3u8',
+                userAgent: 'IPTVnator',
+                referer: 'https://ref.example.com',
+                origin: 'https://origin.example.com',
+            }),
+        });
+        expect(detail.epgPrograms).toHaveLength(1);
+    });
+
+    it('resolves M3U playback detail without blocking on channel-program lookup', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'm3u-1',
+                playlist: {
+                    items: [
+                        {
+                            id: 'channel-1',
+                            name: 'News',
+                            url: 'https://example.com/live.m3u8',
+                            group: { title: 'News' },
+                            tvg: {
+                                id: 'news-id',
+                                name: 'News',
+                                url: '',
+                                logo: 'news.png',
+                                rec: '',
+                            },
+                            http: {
+                                referrer: 'https://ref.example.com',
+                                'user-agent': 'IPTVnator',
+                                origin: 'https://origin.example.com',
+                            },
+                            radio: 'false',
+                            epgParams: '',
+                        },
+                    ],
+                },
+            } satisfies Partial<Playlist>)
+        );
+
+        const detail = await service.resolveM3uPlaybackDetail({
+            uid: 'm3u::m3u-1::https://example.com/live.m3u8',
+            name: 'News',
+            contentType: 'live',
+            sourceType: 'm3u',
+            playlistId: 'm3u-1',
+            playlistName: 'M3U List',
+            streamUrl: 'https://example.com/live.m3u8',
+            channelId: 'channel-1',
+            tvgId: 'news-id',
+            logo: 'news.png',
+        } satisfies UnifiedCollectionItem);
+
+        expect(detail.playback.streamUrl).toBe('https://example.com/live.m3u8');
+        expect(detail.epgPrograms).toEqual([]);
+        expect(window.electron.getChannelPrograms).not.toHaveBeenCalled();
+    });
+
+    it('preserves the radio flag when M3U playback falls back to item metadata', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'm3u-1',
+                playlist: {
+                    items: [],
+                },
+            } satisfies Partial<Playlist>)
+        );
+
+        const detail = await service.resolveM3uPlaybackDetail({
+            uid: 'm3u::m3u-1::radio-channel',
+            name: 'Radio Channel',
+            contentType: 'live',
+            sourceType: 'm3u',
+            playlistId: 'm3u-1',
+            playlistName: 'M3U List',
+            streamUrl: 'https://example.com/radio.m3u8',
+            channelId: 'radio-channel',
+            tvgId: 'radio-id',
+            logo: 'radio.png',
+            radio: 'true',
+        } satisfies UnifiedCollectionItem);
+
+        expect(detail.channel).toMatchObject({
+            id: 'radio-channel',
+            url: 'https://example.com/radio.m3u8',
+            radio: 'true',
+        });
+    });
+
+    it('returns Xtream live detail with shared EPG items', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'xtream-1',
+                serverUrl: 'https://xtream.example.com',
+                username: 'user',
+                password: 'pass',
+            } satisfies Partial<Playlist>)
+        );
+        xtreamUrl.constructLiveUrl.mockReturnValue(
+            'https://xtream.example.com/live/1'
+        );
+        xtreamApi.getShortEpg.mockResolvedValue([
+            {
+                id: '1',
+                epg_id: '',
+                title: 'Xtream Show',
+                description: 'Current Xtream program',
+                lang: '',
+                start: '2026-03-26T11:00:00.000Z',
+                end: '2026-03-26T12:00:00.000Z',
+                stop: '2026-03-26T12:00:00.000Z',
+                channel_id: '1',
+                start_timestamp: '1774522800',
+                stop_timestamp: '1774526400',
+            },
+        ]);
+
+        const detail = await service.resolveLiveDetail({
+            uid: 'xtream::xtream-1::1',
+            name: 'Xtream Live',
+            contentType: 'live',
+            sourceType: 'xtream',
+            playlistId: 'xtream-1',
+            playlistName: 'Xtream',
+            xtreamId: 1,
+            logo: 'xtream.png',
+        } satisfies UnifiedCollectionItem);
+
+        expect(detail.epgMode).toBe('portal');
+        expect(detail.playback.streamUrl).toBe(
+            'https://xtream.example.com/live/1'
+        );
+        expect(detail.epgItems).toHaveLength(1);
+        expect(xtreamApi.getShortEpg).toHaveBeenCalledWith(
+            {
+                serverUrl: 'https://xtream.example.com',
+                username: 'user',
+                password: 'pass',
+            },
+            1,
+            10,
+            {
+                suppressErrorLog: true,
+            }
+        );
+    });
+
+    it('reuses cached empty Xtream preview EPG results instead of refetching immediately', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'xtream-1',
+                serverUrl: 'https://xtream.example.com',
+                username: 'user',
+                password: 'pass',
+            } satisfies Partial<Playlist>)
+        );
+        xtreamApi.getShortEpg.mockResolvedValue([]);
+
+        const items = [
+            {
+                uid: 'xtream::xtream-1::1',
+                name: 'Xtream Live',
+                contentType: 'live',
+                sourceType: 'xtream',
+                playlistId: 'xtream-1',
+                playlistName: 'Xtream',
+                xtreamId: 1,
+            } satisfies UnifiedCollectionItem,
+        ];
+
+        await service.loadEpgForItems(items);
+        await service.loadEpgForItems(items);
+
+        expect(xtreamApi.getShortEpg).toHaveBeenCalledTimes(1);
+        expect(xtreamApi.getShortEpg).toHaveBeenCalledWith(
+            {
+                serverUrl: 'https://xtream.example.com',
+                username: 'user',
+                password: 'pass',
+            },
+            1,
+            2,
+            {
+                suppressErrorLog: true,
+            }
+        );
+    });
+
+    it('backs off repeated Xtream detail EPG failures during the cooldown window', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'xtream-1',
+                serverUrl: 'https://xtream.example.com',
+                username: 'user',
+                password: 'pass',
+            } satisfies Partial<Playlist>)
+        );
+        xtreamUrl.constructLiveUrl.mockReturnValue(
+            'https://xtream.example.com/live/1'
+        );
+        xtreamApi.getShortEpg.mockRejectedValue(new Error('EPG failed'));
+
+        const item = {
+            uid: 'xtream::xtream-1::1',
+            name: 'Xtream Live',
+            contentType: 'live',
+            sourceType: 'xtream',
+            playlistId: 'xtream-1',
+            playlistName: 'Xtream',
+            xtreamId: 1,
+        } satisfies UnifiedCollectionItem;
+
+        const firstDetail = await service.resolveLiveDetail(item);
+        const secondDetail = await service.resolveLiveDetail(item);
+
+        expect(firstDetail.epgItems).toEqual([]);
+        expect(secondDetail.epgItems).toEqual([]);
+        expect(xtreamApi.getShortEpg).toHaveBeenCalledTimes(1);
+    });
+
+    it('falls back to empty Xtream EPG when the provider response is too slow', async () => {
+        jest.useFakeTimers();
+
+        try {
+            playlistsService.getPlaylistById.mockReturnValue(
+                of({
+                    _id: 'xtream-1',
+                    serverUrl: 'https://xtream.example.com',
+                    username: 'user',
+                    password: 'pass',
+                } satisfies Partial<Playlist>)
+            );
+            xtreamUrl.constructLiveUrl.mockReturnValue(
+                'https://xtream.example.com/live/1'
+            );
+            xtreamApi.getShortEpg.mockImplementation(
+                () =>
+                    new Promise((resolve) => {
+                        setTimeout(
+                            () =>
+                                resolve([
+                                    {
+                                        id: '1',
+                                        epg_id: '',
+                                        title: 'Late Xtream Show',
+                                        description: 'Delayed Xtream program',
+                                        lang: '',
+                                        start: '2026-03-26T11:00:00.000Z',
+                                        end: '2026-03-26T12:00:00.000Z',
+                                        stop: '2026-03-26T12:00:00.000Z',
+                                        channel_id: '1',
+                                        start_timestamp: '1774522800',
+                                        stop_timestamp: '1774526400',
+                                    },
+                                ]),
+                            10_000
+                        );
+                    })
+            );
+
+            const detailPromise = service.resolveLiveDetail({
+                uid: 'xtream::xtream-1::1',
+                name: 'Xtream Live',
+                contentType: 'live',
+                sourceType: 'xtream',
+                playlistId: 'xtream-1',
+                playlistName: 'Xtream',
+                xtreamId: 1,
+            } satisfies UnifiedCollectionItem);
+
+            await jest.advanceTimersByTimeAsync(3000);
+
+            await expect(detailPromise).resolves.toMatchObject({
+                epgMode: 'portal',
+                playback: expect.objectContaining({
+                    streamUrl: 'https://xtream.example.com/live/1',
+                }),
+                epgItems: [],
+            });
+        } finally {
+            jest.useRealTimers();
+        }
+    });
+
+    it('loads current Stalker EPG previews for live collection rows', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'stalker-1',
+                portalUrl: 'https://stalker.example.com',
+                macAddress: '00:11:22:33:44:55',
+                isFullStalkerPortal: false,
+            } satisfies Partial<Playlist>)
+        );
+        dataService.sendIpcEvent.mockResolvedValue({
+            js: [
+                {
+                    id: '10',
+                    name: 'Stalker Live',
+                    descr: 'Current Stalker program',
+                    time: '2026-03-26T11:00:00.000Z',
+                    time_to: '2026-03-26T12:00:00.000Z',
+                    ch_id: '77',
+                    start_timestamp: String(Math.floor(Date.now() / 1000) - 60),
+                    stop_timestamp: String(Math.floor(Date.now() / 1000) + 60),
+                },
+            ],
+        });
+
+        const epgMap = await service.loadEpgForItems([
+            {
+                uid: 'stalker::stalker-1::77',
+                name: 'Stalker Channel',
+                contentType: 'live',
+                sourceType: 'stalker',
+                playlistId: 'stalker-1',
+                playlistName: 'Stalker',
+                stalkerId: '77',
+                tvgId: '77',
+                stalkerCmd: 'ffmpeg http://stalker/77',
+            } satisfies UnifiedCollectionItem,
+        ]);
+
+        expect(epgMap.get('77')).toMatchObject({
+            title: 'Stalker Live',
+            channel: '77',
+        });
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/collection/stream-resolver.service.ts b/libs/portal/shared/util/src/lib/collection/stream-resolver.service.ts
new file mode 100644
index 0000000..de7e22c
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/stream-resolver.service.ts
@@ -0,0 +1,827 @@
+import { inject, Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { DataService, PlaylistsService } from 'services';
+import {
+    Channel,
+    EpgItem,
+    EpgProgram,
+    Playlist,
+    ResolvedPortalPlayback,
+    STALKER_REQUEST,
+    StalkerPortalActions,
+} from 'shared-interfaces';
+import {
+    XtreamApiService,
+    XtreamUrlService,
+} from '@iptvnator/portal/xtream/data-access';
+import { StalkerSessionService } from '@iptvnator/portal/stalker/data-access';
+import { UnifiedCollectionItem } from './unified-collection-item.interface';
+
+type PlaylistWithChannels = Playlist & {
+    readonly playlist?: { readonly items?: Channel[] };
+};
+
+interface StalkerCreateLinkResponse {
+    readonly js?: { readonly cmd?: string };
+}
+
+interface StalkerEpgEntry {
+    readonly id?: string | number;
+    readonly name?: string;
+    readonly descr?: string;
+    readonly time?: string;
+    readonly time_to?: string;
+    readonly ch_id?: string | number;
+    readonly start_timestamp?: string | number;
+    readonly stop_timestamp?: string | number;
+}
+
+interface StalkerEpgResponse {
+    readonly js?: StalkerEpgEntry[] | { readonly data?: StalkerEpgEntry[] };
+}
+
+interface XtreamEpgCacheEntry {
+    readonly data: EpgItem[];
+    readonly timestamp: number;
+}
+
+export interface ResolvedLiveCollectionDetail {
+    readonly playback: ResolvedPortalPlayback;
+    readonly epgMode: 'm3u' | 'portal';
+    readonly channel?: Channel;
+    readonly epgPrograms?: EpgProgram[];
+    readonly epgItems?: EpgItem[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class StreamResolverService {
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly xtreamApi = inject(XtreamApiService);
+    private readonly xtreamUrl = inject(XtreamUrlService);
+    private readonly dataService = inject(DataService);
+    private readonly stalkerSession = inject(StalkerSessionService);
+    private readonly m3uEpgTimeoutMs = 3000;
+    private readonly portalEpgTimeoutMs = 3000;
+    private readonly xtreamEpgCache = new Map<string, XtreamEpgCacheEntry>();
+    private readonly xtreamEpgFailureTimestamps = new Map<string, number>();
+    private readonly xtreamEpgCacheTtlMs = 60 * 1000;
+    private readonly xtreamEpgFailureCooldownMs = 60 * 1000;
+
+    private async getElectronPlaylist(
+        playlistId: string
+    ): Promise<Playlist | undefined> {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+
+        try {
+            return (
+                (await window.electron?.dbGetAppPlaylist?.(playlistId)) ??
+                undefined
+            );
+        } catch {
+            return undefined;
+        }
+    }
+
+    async resolvePlayback(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedPortalPlayback> {
+        if (item.sourceType === 'm3u') {
+            return (await this.resolveM3uPlaybackDetail(item)).playback;
+        }
+
+        return (await this.resolveLiveDetail(item)).playback;
+    }
+
+    async resolveLiveDetail(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedLiveCollectionDetail> {
+        switch (item.sourceType) {
+            case 'm3u':
+                return this.resolveM3uDetail(item);
+            case 'xtream':
+                return this.resolveXtreamDetail(item);
+            case 'stalker':
+                return this.resolveStalkerDetail(item);
+        }
+    }
+
+    async resolveM3uPlaybackDetail(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedLiveCollectionDetail> {
+        return this.buildM3uDetail(item, false);
+    }
+
+    async loadM3uProgramsForItem(
+        item: UnifiedCollectionItem,
+        channel?: Channel
+    ): Promise<EpgProgram[]> {
+        const epgLookupKey = channel
+            ? this.getM3uEpgLookupKey(channel, item)
+            : await this.getM3uEpgLookupKeyForItem(item);
+
+        return this.fetchM3uPrograms(epgLookupKey);
+    }
+
+    async loadEpgItems(item: UnifiedCollectionItem): Promise<EpgItem[]> {
+        const detail = await this.resolveLiveDetail(item);
+        if (detail.epgItems) {
+            return detail.epgItems;
+        }
+
+        return this.mapProgramsToEpgItems(detail.epgPrograms ?? []);
+    }
+
+    async loadEpgForItems(
+        items: UnifiedCollectionItem[]
+    ): Promise<Map<string, EpgProgram | null>> {
+        const epgMap = new Map<string, EpgProgram | null>();
+        const now = Date.now();
+        const xtreamByPlaylist = new Map<string, UnifiedCollectionItem[]>();
+        const stalkerByPlaylist = new Map<string, UnifiedCollectionItem[]>();
+
+        for (const item of items) {
+            if (item.contentType !== 'live') {
+                continue;
+            }
+
+            if (item.sourceType === 'xtream') {
+                const list = xtreamByPlaylist.get(item.playlistId) ?? [];
+                list.push(item);
+                xtreamByPlaylist.set(item.playlistId, list);
+                continue;
+            }
+
+            if (item.sourceType === 'stalker') {
+                const list = stalkerByPlaylist.get(item.playlistId) ?? [];
+                list.push(item);
+                stalkerByPlaylist.set(item.playlistId, list);
+                continue;
+            }
+        }
+
+        const tasks: Promise<void>[] = [];
+
+        for (const item of items) {
+            if (item.sourceType === 'm3u' && item.contentType === 'live') {
+                tasks.push(this.loadM3uEpg(item, epgMap, now));
+            }
+        }
+
+        for (const [playlistId, playlistItems] of xtreamByPlaylist.entries()) {
+            tasks.push(
+                this.loadXtreamEpgBatch(playlistId, playlistItems, epgMap, now)
+            );
+        }
+
+        for (const [playlistId, playlistItems] of stalkerByPlaylist.entries()) {
+            tasks.push(
+                this.loadStalkerEpgBatch(playlistId, playlistItems, epgMap, now)
+            );
+        }
+
+        await Promise.all(tasks.map((task) => task.catch(() => null)));
+        return epgMap;
+    }
+
+    private async resolveM3uDetail(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedLiveCollectionDetail> {
+        return this.buildM3uDetail(item, true);
+    }
+
+    private async resolveXtreamDetail(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedLiveCollectionDetail> {
+        const playback = await this.resolveXtream(item);
+        const epgItems = await this.withFallbackTimeout(
+            this.loadXtreamEpgItems(item),
+            this.portalEpgTimeoutMs,
+            []
+        );
+
+        return {
+            playback,
+            epgMode: 'portal',
+            epgItems,
+        };
+    }
+
+    private async resolveStalkerDetail(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedLiveCollectionDetail> {
+        const playback = await this.resolveStalker(item);
+        const epgItems = await this.withFallbackTimeout(
+            this.loadStalkerEpgItems(item, 10),
+            this.portalEpgTimeoutMs,
+            []
+        );
+
+        return {
+            playback,
+            epgMode: 'portal',
+            epgItems,
+        };
+    }
+
+    private buildM3uPlayback(
+        channel: Channel,
+        playlist?: Playlist
+    ): ResolvedPortalPlayback {
+        const userAgent =
+            channel.http?.['user-agent']?.trim() || playlist?.userAgent;
+        const referer = channel.http?.referrer?.trim() || playlist?.referrer;
+        const origin = channel.http?.origin?.trim() || playlist?.origin;
+        const headers: Record<string, string> = {};
+        if (userAgent) {
+            headers['User-Agent'] = userAgent;
+        }
+        if (referer) {
+            headers['Referer'] = referer;
+        }
+        if (origin) {
+            headers['Origin'] = origin;
+        }
+
+        return {
+            streamUrl: channel.url ?? '',
+            title: channel.name,
+            thumbnail: channel.tvg?.logo ?? null,
+            headers: Object.keys(headers).length > 0 ? headers : undefined,
+            userAgent,
+            referer,
+            origin,
+        };
+    }
+
+    private async resolveXtream(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedPortalPlayback> {
+        const creds = await this.getXtreamCredentials(item.playlistId);
+        if (!creds || item.xtreamId == null) {
+            throw new Error('Missing Xtream credentials');
+        }
+
+        const streamUrl = this.xtreamUrl.constructLiveUrl(creds, item.xtreamId);
+
+        return {
+            streamUrl,
+            title: item.name,
+            thumbnail: item.logo ?? null,
+        };
+    }
+
+    private async resolveStalker(
+        item: UnifiedCollectionItem
+    ): Promise<ResolvedPortalPlayback> {
+        const playlist = (await firstValueFrom(
+            this.playlistsService.getPlaylistById(item.playlistId)
+        )) as Playlist | undefined;
+        const portalUrl =
+            item.stalkerPortalUrl ?? playlist?.portalUrl ?? playlist?.url ?? '';
+        const macAddress = item.stalkerMacAddress ?? playlist?.macAddress ?? '';
+        const params = {
+            action: StalkerPortalActions.CreateLink,
+            cmd: item.stalkerCmd ?? '',
+            type: 'itv' as const,
+            disable_ad: '0',
+            download: '0',
+            JsHttpRequest: '1-xml',
+        };
+
+        let response: StalkerCreateLinkResponse | undefined;
+        if (playlist?.isFullStalkerPortal && playlist) {
+            response = await this.stalkerSession.makeAuthenticatedRequest(
+                playlist,
+                params
+            );
+        } else {
+            response = await this.dataService.sendIpcEvent(STALKER_REQUEST, {
+                url: portalUrl,
+                macAddress,
+                params,
+            });
+        }
+
+        const rawCmd = response?.js?.cmd ?? '';
+
+        return {
+            streamUrl: this.normalizeStalkerCmd(rawCmd),
+            title: item.name,
+            thumbnail: item.logo ?? null,
+        };
+    }
+
+    private async loadXtreamEpgItems(
+        item: UnifiedCollectionItem
+    ): Promise<EpgItem[]> {
+        try {
+            if (item.xtreamId == null) {
+                return [];
+            }
+
+            const creds = await this.getXtreamCredentials(item.playlistId);
+            if (!creds) {
+                return [];
+            }
+
+            return await this.fetchXtreamEpgItems(
+                item.playlistId,
+                creds,
+                item.xtreamId,
+                10
+            );
+        } catch {
+            return [];
+        }
+    }
+
+    private async loadStalkerEpgItems(
+        item: UnifiedCollectionItem,
+        size: number
+    ): Promise<EpgItem[]> {
+        const playlist = (await firstValueFrom(
+            this.playlistsService.getPlaylistById(item.playlistId)
+        )) as Playlist | undefined;
+        const channelId = String(
+            item.stalkerId ??
+                (item.stalkerItem as Record<string, unknown> | undefined)?.[
+                    'id'
+                ] ??
+                ''
+        ).trim();
+
+        if (!playlist || !channelId) {
+            return [];
+        }
+
+        return this.fetchStalkerShortEpg(playlist, channelId, size);
+    }
+
+    private async getXtreamCredentials(playlistId: string) {
+        const playlist =
+            (await this.getElectronPlaylist(playlistId)) ??
+            ((await firstValueFrom(
+                this.playlistsService.getPlaylistById(playlistId)
+            )) as Playlist | undefined);
+
+        if (!playlist?.serverUrl || !playlist.username || !playlist.password) {
+            return null;
+        }
+
+        return {
+            serverUrl: playlist.serverUrl,
+            username: playlist.username,
+            password: playlist.password,
+        };
+    }
+
+    private async loadM3uEpg(
+        item: UnifiedCollectionItem,
+        epgMap: Map<string, EpgProgram | null>,
+        now: number
+    ): Promise<void> {
+        const epgLookupKey = item.tvgId?.trim() || item.name?.trim();
+        if (!epgLookupKey) {
+            return;
+        }
+
+        const programs = await this.fetchM3uPrograms(epgLookupKey);
+        epgMap.set(epgLookupKey, this.findCurrentProgram(programs, now));
+    }
+
+    private async buildM3uDetail(
+        item: UnifiedCollectionItem,
+        includePrograms: boolean
+    ): Promise<ResolvedLiveCollectionDetail> {
+        const playlist = (await firstValueFrom(
+            this.playlistsService.getPlaylistById(item.playlistId)
+        )) as PlaylistWithChannels | undefined;
+        const channel =
+            this.findM3uChannel(playlist?.playlist?.items ?? [], item) ??
+            this.buildFallbackM3uChannel(item);
+        const epgPrograms = includePrograms
+            ? await this.fetchM3uPrograms(
+                  this.getM3uEpgLookupKey(channel, item)
+              )
+            : [];
+
+        return {
+            playback: this.buildM3uPlayback(channel, playlist),
+            epgMode: 'm3u',
+            channel,
+            epgPrograms,
+        };
+    }
+
+    private async getM3uEpgLookupKeyForItem(
+        item: UnifiedCollectionItem
+    ): Promise<string | null> {
+        const playlist = (await firstValueFrom(
+            this.playlistsService.getPlaylistById(item.playlistId)
+        )) as PlaylistWithChannels | undefined;
+        const channel =
+            this.findM3uChannel(playlist?.playlist?.items ?? [], item) ??
+            this.buildFallbackM3uChannel(item);
+
+        return this.getM3uEpgLookupKey(channel, item);
+    }
+
+    private async fetchM3uPrograms(
+        epgLookupKey?: string | null
+    ): Promise<EpgProgram[]> {
+        if (!window.electron?.getChannelPrograms || !epgLookupKey) {
+            return [];
+        }
+
+        return this.withFallbackTimeout(
+            window.electron.getChannelPrograms(epgLookupKey),
+            this.m3uEpgTimeoutMs,
+            []
+        );
+    }
+
+    private async withFallbackTimeout<T>(
+        promise: Promise<T>,
+        timeoutMs: number,
+        fallback: T
+    ): Promise<T> {
+        return new Promise((resolve) => {
+            const timeoutId = setTimeout(() => resolve(fallback), timeoutMs);
+
+            promise
+                .then((value) => {
+                    clearTimeout(timeoutId);
+                    resolve(value);
+                })
+                .catch(() => {
+                    clearTimeout(timeoutId);
+                    resolve(fallback);
+                });
+        });
+    }
+
+    private async loadXtreamEpgBatch(
+        playlistId: string,
+        channels: UnifiedCollectionItem[],
+        epgMap: Map<string, EpgProgram | null>,
+        now: number
+    ): Promise<void> {
+        const creds = await this.getXtreamCredentials(playlistId);
+        if (!creds) {
+            return;
+        }
+
+        await Promise.all(
+            channels.map(async (channel) => {
+                if (!channel.xtreamId) {
+                    return;
+                }
+
+                try {
+                    const items = await this.fetchXtreamEpgItems(
+                        playlistId,
+                        creds,
+                        channel.xtreamId,
+                        2
+                    );
+                    const nowSeconds = Math.floor(now / 1000);
+                    const currentItem =
+                        items.find(
+                            (item) =>
+                                Number(item.start_timestamp) <= nowSeconds &&
+                                nowSeconds < Number(item.stop_timestamp)
+                        ) ?? null;
+                    const epgKey =
+                        channel.tvgId?.trim() || channel.name?.trim();
+
+                    if (!epgKey) {
+                        return;
+                    }
+
+                    epgMap.set(
+                        epgKey,
+                        currentItem
+                            ? {
+                                  start: new Date(
+                                      Number(currentItem.start_timestamp) * 1000
+                                  ).toISOString(),
+                                  stop: new Date(
+                                      Number(currentItem.stop_timestamp) * 1000
+                                  ).toISOString(),
+                                  channel: String(channel.xtreamId),
+                                  title: currentItem.title,
+                                  desc: currentItem.description ?? null,
+                                  category: null,
+                              }
+                            : null
+                    );
+                } catch {
+                    const epgKey =
+                        channel.tvgId?.trim() || channel.name?.trim();
+                    if (epgKey) {
+                        epgMap.set(epgKey, null);
+                    }
+                }
+            })
+        );
+    }
+
+    private getXtreamEpgCacheKey(
+        playlistId: string,
+        streamId: number,
+        limit: number
+    ): string {
+        return `${playlistId}:${streamId}:${limit}`;
+    }
+
+    private getCachedXtreamEpgItems(cacheKey: string): EpgItem[] | null {
+        const entry = this.xtreamEpgCache.get(cacheKey);
+        if (!entry) {
+            return null;
+        }
+
+        if (Date.now() - entry.timestamp > this.xtreamEpgCacheTtlMs) {
+            this.xtreamEpgCache.delete(cacheKey);
+            return null;
+        }
+
+        return entry.data;
+    }
+
+    private isXtreamEpgFailureCoolingDown(cacheKey: string): boolean {
+        const timestamp = this.xtreamEpgFailureTimestamps.get(cacheKey);
+        if (timestamp == null) {
+            return false;
+        }
+
+        if (Date.now() - timestamp > this.xtreamEpgFailureCooldownMs) {
+            this.xtreamEpgFailureTimestamps.delete(cacheKey);
+            return false;
+        }
+
+        return true;
+    }
+
+    private async fetchXtreamEpgItems(
+        playlistId: string,
+        credentials: {
+            serverUrl: string;
+            username: string;
+            password: string;
+        },
+        streamId: number,
+        limit: number
+    ): Promise<EpgItem[]> {
+        const cacheKey = this.getXtreamEpgCacheKey(playlistId, streamId, limit);
+        const cached = this.getCachedXtreamEpgItems(cacheKey);
+        if (cached !== null) {
+            return cached;
+        }
+
+        if (this.isXtreamEpgFailureCoolingDown(cacheKey)) {
+            return [];
+        }
+
+        try {
+            const items = await this.xtreamApi.getShortEpg(
+                credentials,
+                streamId,
+                limit,
+                {
+                    suppressErrorLog: true,
+                }
+            );
+
+            this.xtreamEpgCache.set(cacheKey, {
+                data: items,
+                timestamp: Date.now(),
+            });
+            this.xtreamEpgFailureTimestamps.delete(cacheKey);
+            return items;
+        } catch {
+            this.xtreamEpgFailureTimestamps.set(cacheKey, Date.now());
+            return [];
+        }
+    }
+
+    private async loadStalkerEpgBatch(
+        playlistId: string,
+        channels: UnifiedCollectionItem[],
+        epgMap: Map<string, EpgProgram | null>,
+        now: number
+    ): Promise<void> {
+        const playlist = (await firstValueFrom(
+            this.playlistsService.getPlaylistById(playlistId)
+        )) as Playlist | undefined;
+
+        if (!playlist) {
+            return;
+        }
+
+        await Promise.all(
+            channels.map(async (channel) => {
+                const channelId = String(channel.stalkerId ?? '').trim();
+                const epgKey =
+                    channel.tvgId?.trim() || channelId || channel.name?.trim();
+
+                if (!channelId || !epgKey) {
+                    return;
+                }
+
+                try {
+                    const items = await this.fetchStalkerShortEpg(
+                        playlist,
+                        channelId,
+                        1
+                    );
+                    epgMap.set(
+                        epgKey,
+                        items.length > 0
+                            ? this.toPreviewProgram(items[0], channelId, now)
+                            : null
+                    );
+                } catch {
+                    epgMap.set(epgKey, null);
+                }
+            })
+        );
+    }
+
+    private async fetchStalkerShortEpg(
+        playlist: Playlist,
+        channelId: string,
+        size: number
+    ): Promise<EpgItem[]> {
+        const params = {
+            action: StalkerPortalActions.GetShortEpg,
+            type: 'itv',
+            ch_id: channelId,
+            size: String(size),
+        };
+
+        let response: StalkerEpgResponse;
+        if (playlist.isFullStalkerPortal) {
+            response = await this.stalkerSession.makeAuthenticatedRequest(
+                playlist,
+                params
+            );
+        } else {
+            response = await this.dataService.sendIpcEvent(STALKER_REQUEST, {
+                url: playlist.portalUrl,
+                macAddress: playlist.macAddress,
+                params,
+            });
+        }
+
+        const epgData = Array.isArray(response?.js)
+            ? response.js
+            : (response?.js?.data ?? []);
+
+        return epgData.map((item) => ({
+            id: String(item.id ?? ''),
+            epg_id: '',
+            title: item.name ?? '',
+            description: item.descr ?? '',
+            lang: '',
+            start: item.time ?? '',
+            end: item.time_to ?? '',
+            stop: item.time_to ?? '',
+            channel_id: String(item.ch_id ?? channelId),
+            start_timestamp: String(item.start_timestamp ?? ''),
+            stop_timestamp: String(item.stop_timestamp ?? ''),
+        }));
+    }
+
+    private findM3uChannel(
+        channels: Channel[],
+        item: UnifiedCollectionItem
+    ): Channel | undefined {
+        return channels.find(
+            (channel) =>
+                (item.streamUrl && channel.url === item.streamUrl) ||
+                (item.channelId && channel.id === item.channelId)
+        );
+    }
+
+    private buildFallbackM3uChannel(item: UnifiedCollectionItem): Channel {
+        return {
+            id: item.channelId ?? item.uid.split('::')[2] ?? '',
+            name: item.name,
+            url: item.streamUrl ?? '',
+            tvg: {
+                id: item.tvgId ?? '',
+                name: item.name,
+                url: '',
+                logo: item.logo ?? '',
+                rec: '',
+            },
+            group: { title: '' },
+            http: {
+                referrer: '',
+                'user-agent': '',
+                origin: '',
+            },
+            radio: item.radio ?? 'false',
+            epgParams: '',
+        };
+    }
+
+    private getM3uEpgLookupKey(
+        channel: Channel | undefined,
+        item: UnifiedCollectionItem
+    ): string {
+        return (
+            channel?.tvg?.id?.trim() ||
+            item.tvgId?.trim() ||
+            channel?.tvg?.name?.trim() ||
+            channel?.name?.trim() ||
+            item.name?.trim() ||
+            ''
+        );
+    }
+
+    private findCurrentProgram(
+        programs: EpgProgram[],
+        now: number
+    ): EpgProgram | null {
+        return (
+            programs.find((program) => {
+                const start = new Date(program.start).getTime();
+                const stop = new Date(program.stop).getTime();
+                return start <= now && now < stop;
+            }) ?? null
+        );
+    }
+
+    private toPreviewProgram(
+        item: EpgItem,
+        channelId: string | number,
+        now: number
+    ): EpgProgram | null {
+        const startTimestamp = Number(item.start_timestamp);
+        const stopTimestamp = Number(item.stop_timestamp);
+
+        if (
+            Number.isFinite(startTimestamp) &&
+            Number.isFinite(stopTimestamp) &&
+            startTimestamp > 0 &&
+            stopTimestamp > 0
+        ) {
+            const nowSeconds = Math.floor(now / 1000);
+            if (nowSeconds < startTimestamp || nowSeconds >= stopTimestamp) {
+                return null;
+            }
+        }
+
+        return {
+            start: item.start,
+            stop: item.stop || item.end,
+            channel: String(channelId),
+            title: item.title,
+            desc: item.description || null,
+            category: null,
+        };
+    }
+
+    private mapProgramsToEpgItems(programs: EpgProgram[]): EpgItem[] {
+        return programs.map((program, index) => ({
+            id: String(index),
+            epg_id: program.channel,
+            title: program.title,
+            lang: 'en',
+            start: program.start,
+            end: program.stop,
+            stop: program.stop,
+            description: program.desc ?? '',
+            channel_id: program.channel,
+            start_timestamp: String(
+                Math.floor(new Date(program.start).getTime() / 1000)
+            ),
+            stop_timestamp: String(
+                Math.floor(new Date(program.stop).getTime() / 1000)
+            ),
+        }));
+    }
+
+    private normalizeStalkerCmd(value: string): string {
+        const trimmed = String(value ?? '').trim();
+        if (!trimmed) {
+            return '';
+        }
+
+        const splitAt = trimmed.indexOf(' ');
+        if (splitAt > 0) {
+            const candidate = trimmed.slice(splitAt + 1).trim();
+            if (
+                candidate.startsWith('http://') ||
+                candidate.startsWith('https://')
+            ) {
+                return candidate;
+            }
+        }
+
+        return trimmed;
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/collection/unified-collection-item.interface.ts b/libs/portal/shared/util/src/lib/collection/unified-collection-item.interface.ts
new file mode 100644
index 0000000..1909ad0
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-collection-item.interface.ts
@@ -0,0 +1,96 @@
+/**
+ * Unified interface for displaying favorites or recently-viewed items
+ * from any source (M3U, Xtream, Stalker) in one list.
+ *
+ * Extends the previous live-only UnifiedFavoriteChannel to cover
+ * all content types: live TV, movies, and series.
+ */
+export type CollectionSourceType = 'm3u' | 'xtream' | 'stalker';
+export type CollectionContentType = 'live' | 'movie' | 'series';
+
+export interface UnifiedCollectionItem {
+    /** Unique identifier: `{sourceType}::{playlistId}::{sourceItemId}` */
+    uid: string;
+
+    /** Display name */
+    name: string;
+
+    /** Content type — determines which tab / layout to use */
+    contentType: CollectionContentType;
+
+    /** Source type — determines how to resolve playback */
+    sourceType: CollectionSourceType;
+
+    /** Parent playlist ID */
+    playlistId: string;
+
+    /** Human-readable playlist name */
+    playlistName: string;
+
+    /** Logo / thumbnail URL (live channels) */
+    logo?: string | null;
+
+    /** Poster image URL (movies / series) */
+    posterUrl?: string | null;
+
+    /** Direct stream URL (M3U channels only) */
+    streamUrl?: string;
+
+    /** Stable live-source EPG lookup key */
+    tvgId?: string;
+
+    /** M3U playlist channel id used to rehydrate the full channel object */
+    channelId?: string;
+
+    /** M3U radio flag used to preserve the dedicated radio player layout */
+    radio?: string;
+
+    /** Xtream numeric stream ID */
+    xtreamId?: number;
+
+    /** Xtream DB content id — used for reorder / remove IPC */
+    contentId?: number;
+
+    /** Stalker cmd for stream resolution */
+    stalkerId?: string | number;
+    stalkerCmd?: string;
+    stalkerPortalUrl?: string;
+    stalkerMacAddress?: string;
+
+    /** Category ID for VOD/Series navigation */
+    categoryId?: string | number;
+
+    /** Content rating (VOD) */
+    rating?: string;
+
+    /** ISO timestamp when added to favorites */
+    addedAt?: string;
+
+    /** Display order (favorites) */
+    position?: number;
+
+    /** ISO timestamp when viewed (recently-viewed) */
+    viewedAt?: string;
+
+    /** Original stalker item for detail navigation */
+    stalkerItem?: unknown;
+}
+
+/**
+ * Build a stable UID string for a unified collection item.
+ */
+export function buildCollectionUid(
+    sourceType: CollectionSourceType,
+    playlistId: string,
+    sourceItemId: string | number
+): string {
+    return `${sourceType}::${playlistId}::${sourceItemId}`;
+}
+
+export function buildXtreamCollectionUid(
+    playlistId: string,
+    contentType: CollectionContentType,
+    xtreamId: string | number
+): string {
+    return buildCollectionUid('xtream', playlistId, `${contentType}:${xtreamId}`);
+}
diff --git a/libs/portal/shared/util/src/lib/collection/unified-favorite-channel.interface.ts b/libs/portal/shared/util/src/lib/collection/unified-favorite-channel.interface.ts
new file mode 100644
index 0000000..3f9b888
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-favorite-channel.interface.ts
@@ -0,0 +1,73 @@
+/**
+ * Unified interface for displaying live TV favorites from any source
+ * (M3U playlists, Xtream Codes portals, Stalker portals) in one list.
+ */
+export type FavoriteSourceType = 'm3u' | 'xtream' | 'stalker';
+
+export interface UnifiedFavoriteChannel {
+    /**
+     * Unique identifier within the global-favorites list.
+     * Format: `{sourceType}::{playlistId}::{sourceItemId}`
+     */
+    uid: string;
+
+    /** Display name of the channel */
+    name: string;
+
+    /** Logo / thumbnail URL */
+    logo: string | null;
+
+    /** Source type – determines how to resolve the stream URL */
+    sourceType: FavoriteSourceType;
+
+    /** ID of the parent playlist */
+    playlistId: string;
+
+    /** Human-readable playlist name */
+    playlistName: string;
+
+    /** Direct stream URL (M3U channels only) */
+    streamUrl?: string;
+
+    /** Xtream numeric stream ID (Xtream channels only) */
+    xtreamId?: number;
+
+    /**
+     * TVG id for M3U EPG lookup.
+     * For Xtream channels, also used for short-EPG lookup.
+     */
+    tvgId?: string;
+
+    /**
+     * The stalker cmd value needed to resolve the stream URL.
+     * Stored for Stalker favorites that are live channels.
+     */
+    stalkerCmd?: string;
+
+    /** ISO timestamp when added to favorites */
+    addedAt: string;
+
+    /**
+     * Display order within the unified list.
+     * Lower values appear first. 0 = unset (sort by addedAt desc).
+     */
+    position: number;
+
+    /** Xtream DB content id — used for REORDER IPC call */
+    contentId?: number;
+
+    /** Stalker portal credentials needed to resolve the live stream */
+    stalkerPortalUrl?: string;
+    stalkerMacAddress?: string;
+}
+
+/**
+ * Build a stable UID string for a unified favorite channel.
+ */
+export function buildFavoriteUid(
+    sourceType: FavoriteSourceType,
+    playlistId: string,
+    sourceItemId: string | number
+): string {
+    return `${sourceType}::${playlistId}::${sourceItemId}`;
+}
diff --git a/libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.spec.ts b/libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.spec.ts
new file mode 100644
index 0000000..f43b14a
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.spec.ts
@@ -0,0 +1,442 @@
+import { TestBed } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import {
+    Channel,
+    Playlist,
+    PlaylistMeta,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import { UnifiedCollectionItem } from './unified-collection-item.interface';
+import { UnifiedFavoritesDataService } from './unified-favorites-data.service';
+
+describe('UnifiedFavoritesDataService', () => {
+    let service: UnifiedFavoritesDataService;
+    let electronApi: {
+        dbGetAllGlobalFavorites: jest.Mock;
+        dbRemoveFavorite: jest.Mock;
+    };
+    let databaseService: {
+        getAllGlobalFavorites: jest.Mock;
+        getFavorites: jest.Mock;
+    };
+    let playlistsService: {
+        getPlaylistById: jest.Mock;
+        setFavorites: jest.Mock;
+        setPortalFavorites: jest.Mock;
+    };
+
+    const m3uChannels: Channel[] = [
+        {
+            id: 'channel-1',
+            name: 'Channel One',
+            url: 'https://example.com/1.m3u8',
+            group: { title: 'News' },
+            tvg: {
+                id: 'one',
+                name: 'Channel One',
+                url: '',
+                logo: 'one.png',
+                rec: '',
+            },
+            http: { referrer: '', 'user-agent': '', origin: '' },
+            radio: 'false',
+            epgParams: '',
+        },
+        {
+            id: 'channel-2',
+            name: 'Channel Two',
+            url: 'https://example.com/2.m3u8',
+            group: { title: 'Sports' },
+            tvg: {
+                id: 'two',
+                name: 'Channel Two',
+                url: '',
+                logo: 'two.png',
+                rec: '',
+            },
+            http: { referrer: '', 'user-agent': '', origin: '' },
+            radio: 'true',
+            epgParams: '',
+        },
+    ];
+
+    const stalkerFavorites: StalkerPortalItem[] = [
+        {
+            id: '101',
+            title: 'Stalker One',
+            category_id: 'itv',
+            cmd: 'ffmpeg http://stalker/101',
+            logo: 'one.png',
+            added_at: '2026-03-26T10:00:00.000Z',
+        },
+        {
+            id: '202',
+            title: 'Stalker Two',
+            category_id: 'itv',
+            cmd: 'ffmpeg http://stalker/202',
+            logo: 'two.png',
+            added_at: '2026-03-26T11:00:00.000Z',
+        },
+    ];
+
+    beforeEach(() => {
+        electronApi = {
+            dbGetAllGlobalFavorites: jest.fn(),
+            dbRemoveFavorite: jest.fn().mockResolvedValue(undefined),
+        };
+        Object.defineProperty(window, 'electron', {
+            value: electronApi as Window['electron'],
+            configurable: true,
+        });
+
+        playlistsService = {
+            getPlaylistById: jest.fn(),
+            setFavorites: jest.fn().mockReturnValue(of({})),
+            setPortalFavorites: jest.fn().mockReturnValue(of({})),
+        };
+        databaseService = {
+            getAllGlobalFavorites: jest.fn().mockResolvedValue([]),
+            getFavorites: jest.fn().mockResolvedValue([]),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                UnifiedFavoritesDataService,
+                {
+                    provide: Store,
+                    useValue: {
+                        select: jest.fn(() =>
+                            of([
+                                {
+                                    _id: 'm3u-1',
+                                    title: 'M3U List',
+                                    favorites: [
+                                        'https://example.com/2.m3u8',
+                                        'channel-1',
+                                    ],
+                                },
+                                {
+                                    _id: 'stalker-1',
+                                    title: 'Stalker List',
+                                    macAddress: '00:11:22:33:44:55',
+                                    favorites: stalkerFavorites,
+                                },
+                            ] satisfies PlaylistMeta[])
+                        ),
+                    },
+                },
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsService,
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                    },
+                },
+            ],
+        });
+
+        service = TestBed.inject(UnifiedFavoritesDataService);
+    });
+
+    it('maps global Xtream favorites across live, movie, and series content types', async () => {
+        databaseService.getAllGlobalFavorites.mockResolvedValue([
+            {
+                id: 10,
+                category_id: 1,
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream One',
+                xtream_id: 101,
+                title: 'Live One',
+                type: 'live',
+                poster_url: 'live.png',
+                added_at: '2026-03-26T09:00:00.000Z',
+                position: 0,
+            },
+            {
+                id: 11,
+                category_id: 2,
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream One',
+                xtream_id: 102,
+                title: 'Movie One',
+                type: 'movie',
+                poster_url: 'movie.png',
+                added_at: '2026-03-26T08:00:00.000Z',
+                position: 1,
+            },
+            {
+                id: 12,
+                category_id: 3,
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream One',
+                xtream_id: 103,
+                title: 'Series One',
+                type: 'series',
+                poster_url: 'series.png',
+                added_at: '2026-03-26T07:00:00.000Z',
+                position: 2,
+            },
+        ]);
+
+        const items = await service.getFavorites('all');
+
+        expect(items).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    name: 'Live One',
+                    contentType: 'live',
+                    logo: 'live.png',
+                    posterUrl: null,
+                }),
+                expect.objectContaining({
+                    name: 'Movie One',
+                    contentType: 'movie',
+                    logo: null,
+                    posterUrl: 'movie.png',
+                }),
+                expect.objectContaining({
+                    name: 'Series One',
+                    contentType: 'series',
+                    logo: null,
+                    posterUrl: 'series.png',
+                }),
+            ])
+        );
+    });
+
+    it('preserves persisted M3U favorites order when extracting playlist favorites', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'm3u-1',
+                favorites: [
+                    'https://example.com/2.m3u8',
+                    'channel-1',
+                ],
+                playlist: {
+                    items: m3uChannels,
+                },
+            } satisfies Partial<Playlist>)
+        );
+
+        const items = await service.getFavorites('playlist', 'm3u-1', 'm3u');
+
+        expect(items.map((item) => item.streamUrl)).toEqual([
+            'https://example.com/2.m3u8',
+            'https://example.com/1.m3u8',
+        ]);
+        expect(items[1].channelId).toBe('channel-1');
+        expect(items[0].radio).toBe('true');
+    });
+
+    it('persists M3U playlist reorders through setFavorites', async () => {
+        const reorderedItems = [
+            {
+                uid: 'm3u::m3u-1::https://example.com/2.m3u8',
+                name: 'Channel Two',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'm3u-1',
+                playlistName: 'M3U List',
+                streamUrl: 'https://example.com/2.m3u8',
+                channelId: 'channel-2',
+            },
+            {
+                uid: 'm3u::m3u-1::https://example.com/1.m3u8',
+                name: 'Channel One',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'm3u-1',
+                playlistName: 'M3U List',
+                streamUrl: 'https://example.com/1.m3u8',
+                channelId: 'channel-1',
+            },
+        ] satisfies UnifiedCollectionItem[];
+
+        await service.reorder(reorderedItems, {
+            scope: 'playlist',
+            playlistId: 'm3u-1',
+            portalType: 'm3u',
+        });
+
+        expect(playlistsService.setFavorites).toHaveBeenCalledWith('m3u-1', [
+            'https://example.com/2.m3u8',
+            'https://example.com/1.m3u8',
+        ]);
+    });
+
+    it('persists Stalker playlist reorders through setPortalFavorites', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'stalker-1',
+                macAddress: '00:11:22:33:44:55',
+                favorites: stalkerFavorites,
+            } satisfies Partial<Playlist>)
+        );
+
+        await service.reorder(
+            [
+                {
+                    uid: 'stalker::stalker-1::202',
+                    name: 'Stalker Two',
+                    contentType: 'live',
+                    sourceType: 'stalker',
+                    playlistId: 'stalker-1',
+                    playlistName: 'Stalker List',
+                    stalkerId: '202',
+                },
+                {
+                    uid: 'stalker::stalker-1::101',
+                    name: 'Stalker One',
+                    contentType: 'live',
+                    sourceType: 'stalker',
+                    playlistId: 'stalker-1',
+                    playlistName: 'Stalker List',
+                    stalkerId: '101',
+                },
+            ] satisfies UnifiedCollectionItem[],
+            {
+                scope: 'playlist',
+                playlistId: 'stalker-1',
+                portalType: 'stalker',
+            }
+        );
+
+        expect(playlistsService.setPortalFavorites).toHaveBeenCalledWith(
+            'stalker-1',
+            [stalkerFavorites[1], stalkerFavorites[0]]
+        );
+    });
+
+    it('clears M3U favorites once per playlist with the remaining favorites preserved', async () => {
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'm3u-1',
+                favorites: [
+                    'https://example.com/2.m3u8',
+                    'channel-1',
+                    'https://example.com/3.m3u8',
+                ],
+            } satisfies Partial<Playlist>)
+        );
+
+        await service.clearFavorites([
+            {
+                uid: 'm3u::m3u-1::https://example.com/2.m3u8',
+                name: 'Channel Two',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'm3u-1',
+                playlistName: 'M3U List',
+                streamUrl: 'https://example.com/2.m3u8',
+                channelId: 'channel-2',
+            },
+            {
+                uid: 'm3u::m3u-1::channel-1',
+                name: 'Channel One',
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'm3u-1',
+                playlistName: 'M3U List',
+                streamUrl: 'https://example.com/1.m3u8',
+                channelId: 'channel-1',
+            },
+        ] satisfies UnifiedCollectionItem[]);
+
+        expect(playlistsService.setFavorites).toHaveBeenCalledTimes(1);
+        expect(playlistsService.setFavorites).toHaveBeenCalledWith('m3u-1', [
+            'https://example.com/3.m3u8',
+        ]);
+    });
+
+    it('clears Stalker favorites once per playlist with the remaining favorites preserved', async () => {
+        const remainingFavorite: StalkerPortalItem = {
+            id: '303',
+            title: 'Stalker Three',
+            category_id: 'itv',
+            cmd: 'ffmpeg http://stalker/303',
+            logo: 'three.png',
+            added_at: '2026-03-26T12:00:00.000Z',
+        };
+        playlistsService.getPlaylistById.mockReturnValue(
+            of({
+                _id: 'stalker-1',
+                macAddress: '00:11:22:33:44:55',
+                favorites: [...stalkerFavorites, remainingFavorite],
+            } satisfies Partial<Playlist>)
+        );
+
+        await service.clearFavorites([
+            {
+                uid: 'stalker::stalker-1::101',
+                name: 'Stalker One',
+                contentType: 'live',
+                sourceType: 'stalker',
+                playlistId: 'stalker-1',
+                playlistName: 'Stalker List',
+                stalkerId: '101',
+            },
+            {
+                uid: 'stalker::stalker-1::202',
+                name: 'Stalker Two',
+                contentType: 'live',
+                sourceType: 'stalker',
+                playlistId: 'stalker-1',
+                playlistName: 'Stalker List',
+                stalkerId: '202',
+            },
+        ] satisfies UnifiedCollectionItem[]);
+
+        expect(playlistsService.setPortalFavorites).toHaveBeenCalledTimes(1);
+        expect(playlistsService.setPortalFavorites).toHaveBeenCalledWith(
+            'stalker-1',
+            [remainingFavorite]
+        );
+    });
+
+    it('clears Xtream favorites through the bulk removal path', async () => {
+        await service.clearFavorites([
+            {
+                uid: 'xtream::xtream-1::101',
+                name: 'Xtream One',
+                contentType: 'live',
+                sourceType: 'xtream',
+                playlistId: 'xtream-1',
+                playlistName: 'Xtream One',
+                xtreamId: 101,
+                contentId: 10,
+            },
+            {
+                uid: 'xtream::xtream-1::102',
+                name: 'Xtream Two',
+                contentType: 'movie',
+                sourceType: 'xtream',
+                playlistId: 'xtream-1',
+                playlistName: 'Xtream One',
+                xtreamId: 102,
+                contentId: 11,
+            },
+        ] satisfies UnifiedCollectionItem[]);
+
+        expect(electronApi.dbRemoveFavorite).toHaveBeenCalledTimes(2);
+        expect(electronApi.dbRemoveFavorite).toHaveBeenNthCalledWith(
+            1,
+            10,
+            'xtream-1'
+        );
+        expect(electronApi.dbRemoveFavorite).toHaveBeenNthCalledWith(
+            2,
+            11,
+            'xtream-1'
+        );
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.ts b/libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.ts
new file mode 100644
index 0000000..b720efc
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-favorites-data.service.ts
@@ -0,0 +1,552 @@
+import { inject, Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { selectAllPlaylistsMeta } from 'm3u-state';
+import { firstValueFrom, map } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import {
+    Channel,
+    extractStalkerItemId,
+    extractStalkerItemPoster,
+    extractStalkerItemTitle,
+    extractStalkerItemType,
+    normalizeStalkerDate,
+    Playlist,
+    PlaylistMeta,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import {
+    buildCollectionUid,
+    buildXtreamCollectionUid,
+    UnifiedCollectionItem,
+} from './unified-collection-item.interface';
+import { CollectionScope } from './scope-toggle.service';
+import {
+    isStalkerItem,
+    xtreamContentType,
+    XtreamFavoriteRow,
+} from './collection-helpers';
+
+const GLOBAL_FAVORITES_ORDER_KEY = 'global-favorites-channel-order-v1';
+
+type PlaylistWithChannels = Playlist & {
+    readonly playlist?: { readonly items?: Channel[] };
+};
+
+@Injectable({ providedIn: 'root' })
+export class UnifiedFavoritesDataService {
+    private readonly store = inject(Store);
+    private readonly dbService = inject(DatabaseService);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly translate = inject(TranslateService);
+
+    async getFavorites(
+        scope: CollectionScope,
+        playlistId?: string,
+        portalType?: string
+    ): Promise<UnifiedCollectionItem[]> {
+        if (scope === 'playlist' && playlistId) {
+            return this.getPlaylistFavorites(playlistId, portalType);
+        }
+        return this.getAllFavorites();
+    }
+
+    async removeFavorite(item: UnifiedCollectionItem): Promise<void> {
+        switch (item.sourceType) {
+            case 'm3u': {
+                const playlist = await firstValueFrom(
+                    this.playlistsService.getPlaylistById(item.playlistId)
+                );
+                const filtered = ((playlist.favorites as string[]) ?? [])
+                    .filter(
+                        (favoriteId) =>
+                            favoriteId !== item.streamUrl &&
+                            favoriteId !== item.channelId
+                    );
+                await firstValueFrom(
+                    this.playlistsService.setFavorites(item.playlistId, filtered)
+                );
+                break;
+            }
+            case 'xtream':
+                if (window.electron && item.contentId != null) {
+                    await window.electron.dbRemoveFavorite(item.contentId, item.playlistId);
+                }
+                break;
+            case 'stalker': {
+                const sourceItemId = item.uid.split('::')[2];
+                await firstValueFrom(
+                    this.playlistsService.removeFromPortalFavorites(item.playlistId, sourceItemId)
+                );
+                break;
+            }
+        }
+    }
+
+    async clearFavorites(items: UnifiedCollectionItem[]): Promise<void> {
+        if (items.length === 0) {
+            return;
+        }
+
+        await Promise.all([
+            this.clearM3uFavorites(
+                items.filter((item) => item.sourceType === 'm3u')
+            ),
+            this.clearXtreamFavorites(
+                items.filter((item) => item.sourceType === 'xtream')
+            ),
+            this.clearStalkerFavorites(
+                items.filter((item) => item.sourceType === 'stalker')
+            ),
+        ]);
+    }
+
+    async reorder(
+        items: UnifiedCollectionItem[],
+        options?: {
+            scope: CollectionScope;
+            playlistId?: string;
+            portalType?: string;
+        }
+    ): Promise<void> {
+        if (
+            options?.scope === 'playlist' &&
+            options.playlistId &&
+            options.portalType === 'm3u'
+        ) {
+            await firstValueFrom(
+                this.playlistsService.setFavorites(
+                    options.playlistId,
+                    items
+                        .map((item) => item.streamUrl ?? item.channelId ?? '')
+                        .filter((value) => value.length > 0)
+                )
+            );
+            return;
+        }
+
+        if (
+            options?.scope === 'playlist' &&
+            options.playlistId &&
+            options.portalType === 'stalker'
+        ) {
+            const playlist = (await firstValueFrom(
+                this.playlistsService.getPlaylistById(options.playlistId)
+            )) as Playlist | undefined;
+            const currentFavorites = Array.isArray(playlist?.favorites)
+                ? playlist.favorites.filter(isStalkerItem)
+                : [];
+            const favoritesById = new Map(
+                currentFavorites.map((favorite) => [
+                    this.getStalkerFavoriteId(favorite),
+                    favorite,
+                ])
+            );
+            const reorderedFavorites = items
+                .map(
+                    (item) =>
+                        favoritesById.get(this.getStalkerFavoriteId(item)) ?? null
+                )
+                .filter(
+                    (favorite): favorite is StalkerPortalItem =>
+                        favorite !== null
+                );
+            await firstValueFrom(
+                this.playlistsService.setPortalFavorites(
+                    options.playlistId,
+                    reorderedFavorites
+                )
+            );
+            return;
+        }
+
+        const xtreamUpdates = this.buildXtreamPositionUpdates(items);
+
+        if (
+            options?.scope === 'playlist' &&
+            options.playlistId &&
+            options.portalType === 'xtream'
+        ) {
+            if (xtreamUpdates.length > 0 && window.electron) {
+                await window.electron.dbReorderGlobalFavorites(xtreamUpdates);
+            }
+            return;
+        }
+
+        await Promise.all([
+            xtreamUpdates.length > 0 && window.electron
+                ? window.electron.dbReorderGlobalFavorites(xtreamUpdates)
+                : Promise.resolve(),
+            this.saveOrder(items.map((item) => item.uid)),
+        ]);
+    }
+
+    private async getAllFavorites(): Promise<UnifiedCollectionItem[]> {
+        const [m3u, xtream, stalker, order] = await Promise.all([
+            this.getM3uFavorites(),
+            this.getXtreamAllFavorites(),
+            this.getStalkerAllFavorites(),
+            this.getSavedOrder(),
+        ]);
+        return this.applyOrder([...m3u, ...xtream, ...stalker], order);
+    }
+
+    private async clearM3uFavorites(
+        items: UnifiedCollectionItem[]
+    ): Promise<void> {
+        const groupedItems = this.groupItemsByPlaylist(items);
+
+        await Promise.all(
+            Array.from(groupedItems.entries()).map(
+                async ([playlistId, playlistItems]) => {
+                    const playlist = (await firstValueFrom(
+                        this.playlistsService.getPlaylistById(playlistId)
+                    )) as Playlist | undefined;
+                    const targetIds = new Set<string>();
+                    playlistItems.forEach((item) => {
+                        [item.streamUrl, item.channelId].forEach((value) => {
+                            const normalized = value?.trim();
+                            if (normalized) {
+                                targetIds.add(normalized);
+                            }
+                        });
+                    });
+                    const currentFavorites = Array.isArray(playlist?.favorites)
+                        ? playlist.favorites.filter(
+                              (favorite): favorite is string =>
+                                  typeof favorite === 'string'
+                          )
+                        : [];
+                    const nextFavorites = currentFavorites.filter(
+                        (favorite) => !targetIds.has(favorite.trim())
+                    );
+
+                    await firstValueFrom(
+                        this.playlistsService.setFavorites(
+                            playlistId,
+                            nextFavorites
+                        )
+                    );
+                }
+            )
+        );
+    }
+
+    private async clearXtreamFavorites(
+        items: UnifiedCollectionItem[]
+    ): Promise<void> {
+        if (!window.electron) {
+            return;
+        }
+
+        await Promise.all(
+            items
+                .filter((item) => item.contentId != null)
+                .map((item) =>
+                    window.electron!.dbRemoveFavorite(
+                        item.contentId!,
+                        item.playlistId
+                    )
+                )
+        );
+    }
+
+    private async clearStalkerFavorites(
+        items: UnifiedCollectionItem[]
+    ): Promise<void> {
+        const groupedItems = this.groupItemsByPlaylist(items);
+
+        await Promise.all(
+            Array.from(groupedItems.entries()).map(
+                async ([playlistId, playlistItems]) => {
+                    const playlist = (await firstValueFrom(
+                        this.playlistsService.getPlaylistById(playlistId)
+                    )) as Playlist | undefined;
+                    const targetIds = new Set(
+                        playlistItems.map((item) =>
+                            this.getStalkerFavoriteId(item)
+                        )
+                    );
+                    const currentFavorites = Array.isArray(playlist?.favorites)
+                        ? playlist.favorites.filter(isStalkerItem)
+                        : [];
+                    const nextFavorites = currentFavorites.filter(
+                        (favorite) =>
+                            !targetIds.has(this.getStalkerFavoriteId(favorite))
+                    );
+
+                    await firstValueFrom(
+                        this.playlistsService.setPortalFavorites(
+                            playlistId,
+                            nextFavorites
+                        )
+                    );
+                }
+            )
+        );
+    }
+
+    private async getPlaylistFavorites(
+        playlistId: string,
+        portalType?: string
+    ): Promise<UnifiedCollectionItem[]> {
+        if (portalType === 'xtream') return this.getXtreamPlaylistFavorites(playlistId);
+        if (portalType === 'stalker') return this.getStalkerPlaylistFavorites(playlistId);
+        return this.getM3uPlaylistFavorites(playlistId);
+    }
+
+    private async getM3uFavorites(): Promise<UnifiedCollectionItem[]> {
+        const allMeta = await this.getAllMeta();
+        const results: UnifiedCollectionItem[] = [];
+        for (const meta of allMeta.filter((p) => p._id && !p.serverUrl && !p.macAddress)) {
+            results.push(...(await this.extractM3uFavorites(meta)));
+        }
+        return results;
+    }
+
+    private async getM3uPlaylistFavorites(id: string): Promise<UnifiedCollectionItem[]> {
+        const meta = await this.getPlaylistMeta(id);
+        return meta ? this.extractM3uFavorites(meta) : [];
+    }
+
+    private async extractM3uFavorites(meta: PlaylistMeta): Promise<UnifiedCollectionItem[]> {
+        if (!meta.favorites?.length) return [];
+        const favoriteIds = (meta.favorites as string[]).map(String);
+        let playlist: PlaylistWithChannels | undefined;
+        try {
+            playlist = (await firstValueFrom(
+                this.playlistsService.getPlaylistById(meta._id)
+            )) as PlaylistWithChannels | undefined;
+        } catch { return []; }
+        const channels = playlist?.playlist?.items ?? [];
+        const channelsByFavoriteId = new Map<string, Channel>();
+        channels.forEach((channel) => {
+            if (channel.url?.trim()) {
+                channelsByFavoriteId.set(channel.url.trim(), channel);
+            }
+            if (channel.id?.trim()) {
+                channelsByFavoriteId.set(channel.id.trim(), channel);
+            }
+        });
+
+        const seenUrls = new Set<string>();
+        return favoriteIds
+            .map((favoriteId, index) => {
+                const channel = channelsByFavoriteId.get(favoriteId.trim());
+                if (!channel?.url || seenUrls.has(channel.url)) {
+                    return null;
+                }
+                seenUrls.add(channel.url);
+                const sourceItemId = channel.url?.trim() || channel.id?.trim();
+                if (!sourceItemId) {
+                    return null;
+                }
+
+                return {
+                    uid: buildCollectionUid('m3u', meta._id, sourceItemId),
+                    name: channel.name,
+                    contentType: 'live' as const,
+                    sourceType: 'm3u' as const,
+                    playlistId: meta._id,
+                    playlistName: meta.title || meta.filename || 'M3U',
+                    logo: channel.tvg?.logo ?? null,
+                    streamUrl: channel.url,
+                    channelId: channel.id,
+                    radio: channel.radio,
+                    tvgId: channel.tvg?.id || channel.tvg?.name || channel.name,
+                    addedAt: new Date(0).toISOString(),
+                    position: index,
+                } satisfies UnifiedCollectionItem;
+            })
+            .filter((channel) => channel !== null) as UnifiedCollectionItem[];
+    }
+
+    private async getXtreamAllFavorites(): Promise<UnifiedCollectionItem[]> {
+        if (!window.electron?.dbGetAllGlobalFavorites) return [];
+        try {
+            const rows = (await this.dbService.getAllGlobalFavorites()) as XtreamFavoriteRow[];
+            return rows.map((r) => this.mapXtreamRow(r));
+        } catch { return []; }
+    }
+
+    private async getXtreamPlaylistFavorites(playlistId: string): Promise<UnifiedCollectionItem[]> {
+        if (!window.electron) return [];
+        try {
+            const rows = await this.dbService.getFavorites(playlistId);
+            const meta = await this.getPlaylistMeta(playlistId);
+            return (rows as unknown as XtreamFavoriteRow[]).map((r) => ({
+                ...this.mapXtreamRow(r),
+                playlistId,
+                playlistName: meta?.title || 'Xtream',
+            }));
+        } catch { return []; }
+    }
+
+    private mapXtreamRow(row: XtreamFavoriteRow): UnifiedCollectionItem {
+        const ct = xtreamContentType(row.type);
+        return {
+            uid: buildXtreamCollectionUid(row.playlist_id, ct, row.xtream_id),
+            name: row.title,
+            contentType: ct,
+            sourceType: 'xtream',
+            playlistId: row.playlist_id,
+            playlistName: row.playlist_name ?? 'Xtream',
+            logo: ct === 'live' ? (row.poster_url ?? null) : null,
+            posterUrl: ct !== 'live' ? (row.poster_url ?? null) : null,
+            xtreamId: row.xtream_id,
+            categoryId: row.category_id,
+            tvgId: ct === 'live' ? String(row.xtream_id) : undefined,
+            rating: row.rating ?? undefined,
+            addedAt:
+                normalizeStalkerDate(row.added_at) ||
+                new Date(0).toISOString(),
+            position: row.position ?? 0,
+            contentId: row.id,
+        };
+    }
+
+    private async getStalkerAllFavorites(): Promise<UnifiedCollectionItem[]> {
+        const allMeta = await this.getAllMeta();
+        const results: UnifiedCollectionItem[] = [];
+        for (const meta of allMeta.filter((p) => p._id && p.macAddress)) {
+            results.push(...(await this.extractStalkerFavorites(meta)));
+        }
+        return results;
+    }
+
+    private async getStalkerPlaylistFavorites(id: string): Promise<UnifiedCollectionItem[]> {
+        const meta = await this.getPlaylistMeta(id);
+        return meta ? this.extractStalkerFavorites(meta) : [];
+    }
+
+    private async extractStalkerFavorites(meta: PlaylistMeta): Promise<UnifiedCollectionItem[]> {
+        if (!meta.favorites?.length) return [];
+        let playlist: Playlist | undefined;
+        try {
+            playlist = (await firstValueFrom(
+                this.playlistsService.getPlaylistById(meta._id)
+            )) as Playlist | undefined;
+        } catch { return []; }
+        const favs = Array.isArray(playlist?.favorites)
+            ? playlist.favorites.filter(isStalkerItem)
+            : [];
+
+        return favs.map((fav, index) => {
+            const ct = extractStalkerItemType(fav);
+            const stalkerId = extractStalkerItemId(fav, meta._id, index);
+            const poster = extractStalkerItemPoster(fav) || null;
+            return {
+                uid: buildCollectionUid('stalker', meta._id, stalkerId),
+                name:
+                    extractStalkerItemTitle(fav) ||
+                    this.translate.instant(
+                        'WORKSPACE.GLOBAL_FAVORITES.UNKNOWN_CHANNEL'
+                    ),
+                contentType: ct,
+                sourceType: 'stalker' as const,
+                playlistId: meta._id,
+                playlistName:
+                    meta.title ||
+                    meta.filename ||
+                    this.translate.instant(
+                        'WORKSPACE.DASHBOARD.STALKER_PORTAL'
+                    ),
+                logo: ct === 'live' ? poster : null,
+                posterUrl: ct !== 'live' ? poster : null,
+                tvgId: ct === 'live' ? stalkerId : undefined,
+                stalkerId,
+                stalkerCmd: fav.cmd,
+                stalkerPortalUrl: playlist?.portalUrl ?? playlist?.url,
+                stalkerMacAddress: playlist?.macAddress,
+                categoryId: fav.category_id,
+                stalkerItem: fav,
+                addedAt:
+                    normalizeStalkerDate(fav.added_at) ||
+                    new Date(0).toISOString(),
+                position: index,
+            };
+        });
+    }
+
+    private async getAllMeta(): Promise<PlaylistMeta[]> {
+        return firstValueFrom(
+            this.store.select(selectAllPlaylistsMeta).pipe(map((m) => m as PlaylistMeta[]))
+        );
+    }
+
+    private async getPlaylistMeta(id: string): Promise<PlaylistMeta | undefined> {
+        return (await this.getAllMeta()).find((p) => p._id === id);
+    }
+
+    private async getSavedOrder(): Promise<string[]> {
+        if (!window.electron?.dbGetAppState) return [];
+        try {
+            const raw = await window.electron.dbGetAppState(GLOBAL_FAVORITES_ORDER_KEY);
+            return raw ? (JSON.parse(raw) as string[]) : [];
+        } catch { return []; }
+    }
+
+    private async saveOrder(uidOrder: string[]): Promise<void> {
+        if (!window.electron?.dbSetAppState) return;
+        try {
+            await window.electron.dbSetAppState(GLOBAL_FAVORITES_ORDER_KEY, JSON.stringify(uidOrder));
+        } catch { /* ignore */ }
+    }
+
+    private applyOrder(items: UnifiedCollectionItem[], savedOrder: string[]): UnifiedCollectionItem[] {
+        if (!savedOrder.length) {
+            return items.slice().sort((a, b) => {
+                const pa = a.position ?? 0;
+                const pb = b.position ?? 0;
+                if (pa !== pb) return pa - pb;
+                return new Date(b.addedAt ?? 0).getTime() - new Date(a.addedAt ?? 0).getTime();
+            });
+        }
+        const orderMap = new Map(savedOrder.map((uid, i) => [uid, i]));
+        const ordered: UnifiedCollectionItem[] = [];
+        const unordered: UnifiedCollectionItem[] = [];
+        for (const item of items) {
+            const pos = orderMap.get(item.uid);
+            pos != null ? ordered.push({ ...item, position: pos }) : unordered.push(item);
+        }
+        ordered.sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+        unordered.sort((a, b) => new Date(b.addedAt ?? 0).getTime() - new Date(a.addedAt ?? 0).getTime());
+        return [...ordered, ...unordered];
+    }
+
+    private buildXtreamPositionUpdates(items: UnifiedCollectionItem[]) {
+        return items
+            .filter((item) => item.sourceType === 'xtream' && item.contentId != null)
+            .map((item, index) => ({
+                content_id: item.contentId!,
+                position: index,
+            }));
+    }
+
+    private groupItemsByPlaylist(
+        items: UnifiedCollectionItem[]
+    ): Map<string, UnifiedCollectionItem[]> {
+        return items.reduce((groups, item) => {
+            const group = groups.get(item.playlistId);
+            if (group) {
+                group.push(item);
+            } else {
+                groups.set(item.playlistId, [item]);
+            }
+
+            return groups;
+        }, new Map<string, UnifiedCollectionItem[]>());
+    }
+
+    private getStalkerFavoriteId(
+        favorite: Pick<UnifiedCollectionItem, 'stalkerId' | 'uid'> | StalkerPortalItem
+    ): string {
+        if ('uid' in favorite) {
+            return String(
+                favorite.stalkerId ?? favorite.uid.split('::')[2] ?? ''
+            ).trim();
+        }
+
+        return extractStalkerItemId(favorite);
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/collection/unified-live-tab.component.spec.ts b/libs/portal/shared/util/src/lib/collection/unified-live-tab.component.spec.ts
new file mode 100644
index 0000000..1bc2b28
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-live-tab.component.spec.ts
@@ -0,0 +1,579 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+    GlobalFavoritesListComponent,
+    UnifiedLiveTabComponent,
+} from '@iptvnator/portal/shared/ui';
+import {
+    AudioPlayerComponent,
+    ArtPlayerComponent,
+    HtmlVideoPlayerComponent,
+    VjsPlayerComponent,
+} from '@iptvnator/ui/playback';
+import { EpgListComponent } from '@iptvnator/ui/epg';
+import { ResizableDirective } from 'components';
+import { SettingsStore } from 'services';
+import { Channel, EpgItem, EpgProgram } from 'shared-interfaces';
+import { EpgViewComponent } from 'shared-portals';
+import {
+    DEFAULT_FAVORITES_CHANNEL_SORT_MODE,
+    PORTAL_PLAYER,
+    FavoritesChannelSortMode,
+    StreamResolverService,
+    UnifiedCollectionItem,
+    UnifiedFavoriteChannel,
+    UnifiedRecentDataService,
+} from '@iptvnator/portal/shared/util';
+
+@Directive({
+    selector: '[appResizable]',
+})
+class StubResizableDirective {
+    readonly minWidth = input<number>();
+    readonly maxWidth = input<number>();
+    readonly defaultWidth = input<number>();
+    readonly storageKey = input<string>('');
+}
+
+@Component({
+    selector: 'app-global-favorites-list',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubGlobalFavoritesListComponent {
+    readonly channels = input.required<UnifiedFavoriteChannel[]>();
+    readonly epgMap = input<Map<string, EpgProgram | null>>(new Map());
+    readonly progressTick = input(0);
+    readonly activeUid = input<string | null>(null);
+    readonly searchTermInput = input('');
+    readonly draggable = input(true);
+    readonly sortMode = input<FavoritesChannelSortMode>(
+        DEFAULT_FAVORITES_CHANNEL_SORT_MODE
+    );
+
+    readonly channelSelected = output<UnifiedFavoriteChannel>();
+    readonly channelsReordered = output<UnifiedFavoriteChannel[]>();
+    readonly favoriteToggled = output<UnifiedFavoriteChannel>();
+}
+
+@Component({
+    selector: 'app-epg-list',
+    template: '<div class="stub-epg-list"></div>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubEpgListComponent {
+    readonly controlledChannel = input<Channel | null>(null);
+    readonly controlledPrograms = input<EpgProgram[] | null>(null);
+    readonly archivePlaybackAvailable = input<boolean | null>(null);
+}
+
+@Component({
+    selector: 'app-epg-view',
+    template: '<div class="stub-epg-view"></div>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubEpgViewComponent {
+    readonly epgItems = input<EpgItem[]>([]);
+}
+
+@Component({
+    selector: 'app-vjs-player',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubVjsPlayerComponent {
+    readonly options = input<unknown>();
+    readonly volume = input(1);
+}
+
+@Component({
+    selector: 'app-html-video-player',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubHtmlVideoPlayerComponent {
+    readonly channel = input<Channel | null>(null);
+    readonly volume = input(1);
+    readonly showCaptions = input(false);
+}
+
+@Component({
+    selector: 'app-art-player',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubArtPlayerComponent {
+    readonly channel = input<Channel | null>(null);
+    readonly volume = input(1);
+    readonly showCaptions = input(false);
+}
+
+@Component({
+    selector: 'app-audio-player',
+    template: '<div class="stub-audio-player"></div>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubAudioPlayerComponent {
+    readonly icon = input('');
+    readonly url = input.required<string>();
+    readonly channelName = input('');
+}
+
+describe('UnifiedLiveTabComponent', () => {
+    let fixture: ComponentFixture<UnifiedLiveTabComponent>;
+    let component: UnifiedLiveTabComponent;
+    let streamResolver: {
+        resolveLiveDetail: jest.Mock;
+        resolveM3uPlaybackDetail: jest.Mock;
+        loadM3uProgramsForItem: jest.Mock;
+        loadEpgForItems: jest.Mock;
+    };
+    let recentData: {
+        recordLivePlayback: jest.Mock;
+    };
+    let portalPlayer: {
+        isEmbeddedPlayer: jest.Mock;
+        openResolvedPlayback: jest.Mock;
+    };
+
+    beforeEach(async () => {
+        streamResolver = {
+            resolveLiveDetail: jest.fn(),
+            resolveM3uPlaybackDetail: jest.fn(),
+            loadM3uProgramsForItem: jest.fn().mockResolvedValue([]),
+            loadEpgForItems: jest.fn().mockResolvedValue(new Map()),
+        };
+        recentData = {
+            recordLivePlayback: jest.fn(),
+        };
+        portalPlayer = {
+            isEmbeddedPlayer: jest.fn().mockReturnValue(false),
+            openResolvedPlayback: jest.fn(),
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [TranslateModule.forRoot(), UnifiedLiveTabComponent],
+            providers: [
+                { provide: StreamResolverService, useValue: streamResolver },
+                { provide: UnifiedRecentDataService, useValue: recentData },
+                {
+                    provide: SettingsStore,
+                    useValue: {
+                        player: signal('videojs'),
+                    },
+                },
+                { provide: PORTAL_PLAYER, useValue: portalPlayer },
+            ],
+        })
+            .overrideComponent(UnifiedLiveTabComponent, {
+                remove: {
+                    imports: [
+                        AudioPlayerComponent,
+                        ArtPlayerComponent,
+                        EpgListComponent,
+                        EpgViewComponent,
+                        GlobalFavoritesListComponent,
+                        HtmlVideoPlayerComponent,
+                        ResizableDirective,
+                        VjsPlayerComponent,
+                    ],
+                },
+                add: {
+                    imports: [
+                        StubAudioPlayerComponent,
+                        StubArtPlayerComponent,
+                        StubEpgListComponent,
+                        StubEpgViewComponent,
+                        StubGlobalFavoritesListComponent,
+                        StubHtmlVideoPlayerComponent,
+                        StubResizableDirective,
+                        StubVjsPlayerComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(UnifiedLiveTabComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('renders controlled M3U EPG and records recent history on selection', async () => {
+        const item = buildLiveItem('m3u');
+        streamResolver.resolveM3uPlaybackDetail.mockResolvedValue({
+            epgMode: 'm3u',
+            playback: {
+                streamUrl: 'https://example.com/m3u.m3u8',
+                title: 'M3U Live',
+            },
+            channel: {
+                id: 'm3u-channel',
+                name: 'M3U Live',
+                url: 'https://example.com/m3u.m3u8',
+                group: { title: 'News' },
+                tvg: {
+                    id: 'm3u-channel',
+                    name: 'M3U Live',
+                    url: '',
+                    logo: 'm3u.png',
+                    rec: '',
+                },
+                http: { referrer: '', 'user-agent': '', origin: '' },
+                radio: 'false',
+                epgParams: '',
+            },
+            epgPrograms: [],
+        });
+        streamResolver.loadM3uProgramsForItem.mockResolvedValue([
+            buildProgram('M3U Show'),
+        ]);
+        recentData.recordLivePlayback.mockResolvedValue({
+            ...item,
+            viewedAt: '2026-03-26T12:00:00.000Z',
+        });
+
+        fixture.componentRef.setInput('items', [item]);
+        fixture.componentRef.setInput('mode', 'recent');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        await component.onChannelSelected(component.channelsForList()[0]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(recentData.recordLivePlayback).toHaveBeenCalledWith(item);
+        expect(streamResolver.loadM3uProgramsForItem).toHaveBeenCalledWith(
+            item,
+            expect.objectContaining({
+                id: 'm3u-channel',
+            })
+        );
+        expect(
+            fixture.nativeElement.querySelector('app-epg-list')
+        ).not.toBeNull();
+        expect(fixture.nativeElement.querySelector('app-epg-view')).toBeNull();
+    });
+
+    it('does not wait for M3U program lookup before opening playback', async () => {
+        const item = buildLiveItem('m3u');
+        const pendingPrograms = createDeferred<EpgProgram[]>();
+        streamResolver.resolveM3uPlaybackDetail.mockResolvedValue({
+            epgMode: 'm3u',
+            playback: {
+                streamUrl: 'https://example.com/m3u.m3u8',
+                title: 'M3U Live',
+            },
+            channel: {
+                id: 'm3u-channel',
+                name: 'M3U Live',
+                url: 'https://example.com/m3u.m3u8',
+                group: { title: 'News' },
+                tvg: {
+                    id: 'm3u-channel',
+                    name: 'M3U Live',
+                    url: '',
+                    logo: 'm3u.png',
+                    rec: '',
+                },
+                http: { referrer: '', 'user-agent': '', origin: '' },
+                radio: 'false',
+                epgParams: '',
+            },
+            epgPrograms: [buildProgram('M3U Show')],
+        });
+        streamResolver.loadM3uProgramsForItem.mockReturnValue(
+            pendingPrograms.promise
+        );
+        recentData.recordLivePlayback.mockResolvedValue({
+            ...item,
+            viewedAt: '2026-03-26T12:00:00.000Z',
+        });
+
+        fixture.componentRef.setInput('items', [item]);
+        fixture.componentRef.setInput('mode', 'recent');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        await component.onChannelSelected(component.channelsForList()[0]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(portalPlayer.openResolvedPlayback).toHaveBeenCalledWith(
+            expect.objectContaining({
+                streamUrl: 'https://example.com/m3u.m3u8',
+            })
+        );
+        expect(recentData.recordLivePlayback).toHaveBeenCalledWith(item);
+        expect(streamResolver.loadM3uProgramsForItem).toHaveBeenCalled();
+
+        pendingPrograms.resolve([buildProgram('M3U Show')]);
+        await fixture.whenStable();
+    });
+
+    it('renders inline audio for M3U radio items and skips external playback', async () => {
+        const item = {
+            ...buildLiveItem('m3u'),
+            radio: 'true',
+        } satisfies UnifiedCollectionItem;
+        streamResolver.resolveM3uPlaybackDetail.mockResolvedValue({
+            epgMode: 'm3u',
+            playback: {
+                streamUrl: 'https://example.com/radio.m3u8',
+                title: 'M3U Radio',
+                thumbnail: 'radio.png',
+            },
+            channel: {
+                id: 'm3u-channel',
+                name: 'M3U Radio',
+                url: 'https://example.com/radio.m3u8',
+                group: { title: 'Radio' },
+                tvg: {
+                    id: 'm3u-channel',
+                    name: 'M3U Radio',
+                    url: '',
+                    logo: 'radio.png',
+                    rec: '',
+                },
+                http: { referrer: '', 'user-agent': '', origin: '' },
+                radio: 'true',
+                epgParams: '',
+            },
+            epgPrograms: [],
+        });
+        recentData.recordLivePlayback.mockResolvedValue({
+            ...item,
+            viewedAt: '2026-03-26T12:00:00.000Z',
+        });
+
+        fixture.componentRef.setInput('items', [item]);
+        fixture.componentRef.setInput('mode', 'recent');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        await component.onChannelSelected(component.channelsForList()[0]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(recentData.recordLivePlayback).toHaveBeenCalledWith(item);
+        expect(portalPlayer.openResolvedPlayback).not.toHaveBeenCalled();
+        expect(
+            fixture.nativeElement.querySelector('app-audio-player')
+        ).not.toBeNull();
+        expect(fixture.nativeElement.querySelector('app-epg-list')).toBeNull();
+        expect(fixture.nativeElement.querySelector('app-epg-view')).toBeNull();
+    });
+
+    it('renders shared EPG view for Xtream items and records recent history', async () => {
+        const item = buildLiveItem('xtream');
+        streamResolver.resolveLiveDetail.mockResolvedValue({
+            epgMode: 'portal',
+            playback: {
+                streamUrl: 'https://example.com/xtream.m3u8',
+                title: 'Xtream Live',
+            },
+            epgItems: [buildEpgItem('Xtream Show')],
+        });
+        recentData.recordLivePlayback.mockResolvedValue({
+            ...item,
+            viewedAt: '2026-03-26T12:00:00.000Z',
+        });
+
+        fixture.componentRef.setInput('items', [item]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        await component.onChannelSelected(component.channelsForList()[0]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(recentData.recordLivePlayback).toHaveBeenCalledWith(item);
+        expect(
+            fixture.nativeElement.querySelector('app-epg-view')
+        ).not.toBeNull();
+        expect(fixture.nativeElement.querySelector('app-epg-list')).toBeNull();
+    });
+
+    it('renders shared EPG view for Stalker items and records recent history', async () => {
+        const item = buildLiveItem('stalker');
+        streamResolver.resolveLiveDetail.mockResolvedValue({
+            epgMode: 'portal',
+            playback: {
+                streamUrl: 'https://example.com/stalker.m3u8',
+                title: 'Stalker Live',
+            },
+            epgItems: [buildEpgItem('Stalker Show')],
+        });
+        recentData.recordLivePlayback.mockResolvedValue({
+            ...item,
+            viewedAt: '2026-03-26T12:00:00.000Z',
+        });
+
+        fixture.componentRef.setInput('items', [item]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        await component.onChannelSelected(component.channelsForList()[0]);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(recentData.recordLivePlayback).toHaveBeenCalledWith(item);
+        expect(
+            fixture.nativeElement.querySelector('app-epg-view')
+        ).not.toBeNull();
+    });
+
+    it('does not restart auto-open while the same live item is still resolving', async () => {
+        const item = buildLiveItem('xtream');
+        const pendingDetail = createDeferred<{
+            epgMode: 'portal';
+            playback: {
+                streamUrl: string;
+                title: string;
+            };
+            epgItems: EpgItem[];
+        }>();
+        const autoOpenHandledSpy = jest.spyOn(
+            component.autoOpenHandled,
+            'emit'
+        );
+
+        streamResolver.resolveLiveDetail.mockReturnValue(pendingDetail.promise);
+        recentData.recordLivePlayback.mockResolvedValue({
+            ...item,
+            viewedAt: '2026-03-26T12:00:00.000Z',
+        });
+
+        fixture.componentRef.setInput('items', [item]);
+        fixture.componentRef.setInput('autoOpenItem', {
+            contentType: 'live',
+            sourceType: 'xtream',
+            playlistId: item.playlistId,
+            itemId: String(item.xtreamId),
+            title: item.name,
+            imageUrl: item.logo,
+        });
+        fixture.detectChanges();
+        await Promise.resolve();
+
+        expect(streamResolver.resolveLiveDetail).toHaveBeenCalledTimes(1);
+        expect(component.isSelecting()).toBe(true);
+
+        fixture.componentRef.setInput('items', [{ ...item }]);
+        fixture.detectChanges();
+        await Promise.resolve();
+
+        expect(streamResolver.resolveLiveDetail).toHaveBeenCalledTimes(1);
+
+        pendingDetail.resolve({
+            epgMode: 'portal',
+            playback: {
+                streamUrl: 'https://example.com/xtream.m3u8',
+                title: 'Xtream Live',
+            },
+            epgItems: [buildEpgItem('Xtream Show')],
+        });
+        await fixture.whenStable();
+        fixture.detectChanges();
+
+        expect(component.activeDetail()).toEqual(
+            expect.objectContaining({
+                playback: expect.objectContaining({
+                    streamUrl: 'https://example.com/xtream.m3u8',
+                }),
+            })
+        );
+        expect(autoOpenHandledSpy).toHaveBeenCalledTimes(1);
+    });
+});
+
+function buildLiveItem(
+    sourceType: 'm3u' | 'xtream' | 'stalker'
+): UnifiedCollectionItem {
+    if (sourceType === 'm3u') {
+        return {
+            uid: 'm3u::pl-1::m3u-channel',
+            name: 'M3U Live',
+            contentType: 'live',
+            sourceType: 'm3u',
+            playlistId: 'pl-1',
+            playlistName: 'Playlist One',
+            streamUrl: 'https://example.com/m3u.m3u8',
+            channelId: 'm3u-channel',
+            tvgId: 'm3u-channel',
+            logo: 'm3u.png',
+            radio: 'false',
+        };
+    }
+
+    if (sourceType === 'xtream') {
+        return {
+            uid: 'xtream::pl-2::20',
+            name: 'Xtream Live',
+            contentType: 'live',
+            sourceType: 'xtream',
+            playlistId: 'pl-2',
+            playlistName: 'Playlist Two',
+            xtreamId: 20,
+            tvgId: '20',
+            logo: 'xtream.png',
+        };
+    }
+
+    return {
+        uid: 'stalker::pl-3::30',
+        name: 'Stalker Live',
+        contentType: 'live',
+        sourceType: 'stalker',
+        playlistId: 'pl-3',
+        playlistName: 'Playlist Three',
+        stalkerId: '30',
+        stalkerCmd: 'ffmpeg http://stalker/30',
+        tvgId: '30',
+        logo: 'stalker.png',
+    };
+}
+
+function buildProgram(title: string): EpgProgram {
+    return {
+        start: '2026-03-26T11:00:00.000Z',
+        stop: '2026-03-26T12:00:00.000Z',
+        channel: 'test-channel',
+        title,
+        desc: `${title} description`,
+        category: null,
+    };
+}
+
+function buildEpgItem(title: string): EpgItem {
+    return {
+        id: '1',
+        epg_id: '',
+        title,
+        description: `${title} description`,
+        lang: '',
+        start: '2026-03-26T11:00:00.000Z',
+        end: '2026-03-26T12:00:00.000Z',
+        stop: '2026-03-26T12:00:00.000Z',
+        channel_id: '1',
+        start_timestamp: '1774522800',
+        stop_timestamp: '1774526400',
+    };
+}
+
+function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return { promise, resolve, reject };
+}
diff --git a/libs/portal/shared/util/src/lib/collection/unified-recent-data.service.spec.ts b/libs/portal/shared/util/src/lib/collection/unified-recent-data.service.spec.ts
new file mode 100644
index 0000000..a0160b8
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-recent-data.service.spec.ts
@@ -0,0 +1,309 @@
+import { TestBed } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { of } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import {
+    Channel,
+    M3uRecentlyViewedItem,
+    Playlist,
+    PlaylistMeta,
+} from 'shared-interfaces';
+import { UnifiedCollectionItem } from './unified-collection-item.interface';
+import { UnifiedRecentDataService } from './unified-recent-data.service';
+
+describe('UnifiedRecentDataService', () => {
+    let service: UnifiedRecentDataService;
+    let store: { select: jest.Mock; dispatch: jest.Mock };
+    let playlistsService: {
+        getPlaylistById: jest.Mock;
+        addM3uRecentlyViewed: jest.Mock;
+        removeFromM3uRecentlyViewed: jest.Mock;
+        removeFromPortalRecentlyViewed: jest.Mock;
+        clearPlaylistRecentlyViewed: jest.Mock;
+        getAllPlaylists: jest.Mock;
+    };
+    let dbService: {
+        getGlobalRecentlyViewed: jest.Mock;
+        getRecentItems: jest.Mock;
+        removeRecentItem: jest.Mock;
+        clearPlaylistRecentItems: jest.Mock;
+        clearGlobalRecentlyViewed: jest.Mock;
+        addRecentItem: jest.Mock;
+        getContentByXtreamId: jest.Mock;
+    };
+
+    const playlistMeta = {
+        _id: 'm3u-1',
+        title: 'M3U List',
+        recentlyViewed: [
+            {
+                source: 'm3u',
+                id: 'https://example.com/2.m3u8',
+                url: 'https://example.com/2.m3u8',
+                title: 'Recent Channel',
+                channel_id: 'channel-2',
+                tvg_id: 'recent-two',
+                category_id: 'live',
+                added_at: '2026-03-26T11:00:00.000Z',
+            },
+        ],
+    } satisfies PlaylistMeta;
+
+    const channels: Channel[] = [
+        {
+            id: 'channel-1',
+            name: 'Channel One',
+            url: 'https://example.com/1.m3u8',
+            group: { title: 'News' },
+            tvg: {
+                id: 'one',
+                name: 'Channel One',
+                url: '',
+                logo: 'one.png',
+                rec: '',
+            },
+            http: { referrer: '', 'user-agent': '', origin: '' },
+            radio: 'false',
+            epgParams: '',
+        },
+        {
+            id: 'channel-2',
+            name: 'Channel Two',
+            url: 'https://example.com/2.m3u8',
+            group: { title: 'Sports' },
+            tvg: {
+                id: '',
+                name: 'Channel Two',
+                url: '',
+                logo: 'two.png',
+                rec: '',
+            },
+            http: { referrer: '', 'user-agent': '', origin: '' },
+            radio: 'true',
+            epgParams: '',
+        },
+    ];
+
+    beforeEach(() => {
+        store = {
+            select: jest.fn(() => of([playlistMeta])),
+            dispatch: jest.fn(),
+        };
+        playlistsService = {
+            getPlaylistById: jest.fn().mockReturnValue(
+                of({
+                    _id: 'm3u-1',
+                    playlist: { items: channels },
+                } satisfies Partial<Playlist>)
+            ),
+            addM3uRecentlyViewed: jest.fn().mockReturnValue(
+                of({
+                    recentlyViewed: [
+                        {
+                            source: 'm3u',
+                            id: 'https://example.com/1.m3u8',
+                            url: 'https://example.com/1.m3u8',
+                            title: 'Channel One',
+                            category_id: 'live',
+                            added_at: '2026-03-26T12:00:00.000Z',
+                        },
+                    ],
+                })
+            ),
+            removeFromM3uRecentlyViewed: jest.fn().mockReturnValue(of({ recentlyViewed: [] })),
+            removeFromPortalRecentlyViewed: jest.fn().mockReturnValue(of({ recentlyViewed: [] })),
+            clearPlaylistRecentlyViewed: jest.fn().mockReturnValue(of({ recentlyViewed: [] })),
+            getAllPlaylists: jest.fn().mockReturnValue(of([])),
+        };
+        dbService = {
+            getGlobalRecentlyViewed: jest.fn().mockResolvedValue([]),
+            getRecentItems: jest.fn().mockResolvedValue([]),
+            removeRecentItem: jest.fn().mockResolvedValue(true),
+            clearPlaylistRecentItems: jest.fn().mockResolvedValue(true),
+            clearGlobalRecentlyViewed: jest.fn().mockResolvedValue(undefined),
+            addRecentItem: jest.fn().mockResolvedValue(true),
+            getContentByXtreamId: jest.fn().mockResolvedValue(null),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                UnifiedRecentDataService,
+                { provide: Store, useValue: store },
+                { provide: PlaylistsService, useValue: playlistsService },
+                { provide: DatabaseService, useValue: dbService },
+            ],
+        });
+
+        service = TestBed.inject(UnifiedRecentDataService);
+    });
+
+    it('rehydrates M3U recent items with stream and channel metadata', async () => {
+        const items = await service.getRecentItems('playlist', 'm3u-1', 'm3u');
+
+        expect(items).toHaveLength(1);
+        expect(items[0]).toMatchObject({
+            sourceType: 'm3u',
+            streamUrl: 'https://example.com/2.m3u8',
+            channelId: 'channel-2',
+            name: 'Recent Channel',
+            tvgId: 'recent-two',
+            logo: 'two.png',
+            radio: 'true',
+        });
+    });
+
+    it('records M3U live playback through playlist recently viewed storage', async () => {
+        const item = {
+            uid: 'm3u::m3u-1::https://example.com/1.m3u8',
+            name: 'Channel One',
+            contentType: 'live',
+            sourceType: 'm3u',
+            playlistId: 'm3u-1',
+            playlistName: 'M3U List',
+            streamUrl: 'https://example.com/1.m3u8',
+            channelId: 'channel-1',
+            tvgId: 'one',
+            logo: 'one.png',
+        } satisfies UnifiedCollectionItem;
+
+        const recorded = await service.recordLivePlayback(item);
+
+        expect(playlistsService.addM3uRecentlyViewed).toHaveBeenCalledWith(
+            'm3u-1',
+            expect.objectContaining<M3uRecentlyViewedItem>({
+                source: 'm3u',
+                url: 'https://example.com/1.m3u8',
+                channel_id: 'channel-1',
+                tvg_id: 'one',
+            })
+        );
+        expect(store.dispatch).toHaveBeenCalledWith(
+            expect.objectContaining({
+                type: expect.stringContaining('Update Playlist Meta'),
+            })
+        );
+        expect(recorded.viewedAt).toBeTruthy();
+    });
+
+    it('records Xtream playback with a type-aware fallback lookup', async () => {
+        dbService.getContentByXtreamId.mockResolvedValue({
+            id: 3867578,
+            xtream_id: 290,
+            type: 'live',
+            title: 'SE: V Film Premiere FHD',
+        });
+
+        const item = {
+            uid: 'xtream::xtream-1::live:290',
+            name: 'SE: V Film Premiere FHD',
+            contentType: 'live',
+            sourceType: 'xtream',
+            playlistId: 'xtream-1',
+            playlistName: 'Xtream One',
+            xtreamId: 290,
+        } satisfies UnifiedCollectionItem;
+
+        const recorded = await service.recordLivePlayback(item);
+
+        expect(dbService.getContentByXtreamId).toHaveBeenCalledWith(
+            290,
+            'xtream-1',
+            'live'
+        );
+        expect(dbService.addRecentItem).toHaveBeenCalledWith(
+            3867578,
+            'xtream-1'
+        );
+        expect(recorded).toEqual(
+            expect.objectContaining({
+                contentId: 3867578,
+                viewedAt: expect.any(String),
+            })
+        );
+    });
+
+    it('builds distinct Xtream recent UIDs when live and series share an xtream id', async () => {
+        store.select.mockReturnValue(
+            of([
+                {
+                    _id: 'xtream-1',
+                    title: 'Xtream One',
+                    serverUrl: 'https://example.com',
+                } satisfies Partial<PlaylistMeta>,
+            ])
+        );
+        dbService.getRecentItems.mockResolvedValue([
+            {
+                id: 3867578,
+                category_id: 11,
+                title: 'SE: V Film Premiere FHD',
+                poster_url: 'https://example.com/live.png',
+                xtream_id: 290,
+                type: 'live',
+                viewed_at: '2026-04-21T20:42:27.000Z',
+            },
+            {
+                id: 3941697,
+                category_id: 17,
+                title: 'Krypton',
+                poster_url: 'https://example.com/krypton.png',
+                xtream_id: 290,
+                type: 'series',
+                viewed_at: '2026-04-21T20:43:27.000Z',
+            },
+        ]);
+
+        const items = await service.getRecentItems('playlist', 'xtream-1', 'xtream');
+
+        expect(items).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    uid: 'xtream::xtream-1::live:290',
+                    contentType: 'live',
+                    contentId: 3867578,
+                }),
+                expect.objectContaining({
+                    uid: 'xtream::xtream-1::series:290',
+                    contentType: 'series',
+                    contentId: 3941697,
+                }),
+            ])
+        );
+    });
+
+    it('normalizes SQLite-style Xtream recent timestamps to ISO before exposing them', async () => {
+        store.select.mockReturnValue(
+            of([
+                playlistMeta,
+                {
+                    _id: 'xtream-1',
+                    title: 'Xtream One',
+                    serverUrl: 'https://example.com',
+                } satisfies Partial<PlaylistMeta>,
+            ])
+        );
+        dbService.getGlobalRecentlyViewed.mockResolvedValue([
+            {
+                id: 3940227,
+                category_id: 18,
+                title: 'Unter Nachbarn - 2011',
+                poster_url: 'https://example.com/unter.png',
+                xtream_id: 815302,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream One',
+                viewed_at: '2026-04-21 22:49:02',
+            },
+        ]);
+
+        const items = await service.getRecentItems('all');
+        const xtreamItem = items.find((item) => item.sourceType === 'xtream');
+
+        expect(xtreamItem).toEqual(
+            expect.objectContaining({
+                name: 'Unter Nachbarn - 2011',
+                viewedAt: '2026-04-21T22:49:02.000Z',
+            })
+        );
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/collection/unified-recent-data.service.ts b/libs/portal/shared/util/src/lib/collection/unified-recent-data.service.ts
new file mode 100644
index 0000000..b8bac3b
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/collection/unified-recent-data.service.ts
@@ -0,0 +1,511 @@
+import { inject, Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import {
+    PlaylistActions,
+    selectAllPlaylistsMeta,
+} from 'm3u-state';
+import { firstValueFrom, map } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import {
+    Channel,
+    extractStalkerItemId,
+    extractStalkerItemPoster,
+    extractStalkerItemTitle,
+    extractStalkerItemType,
+    isM3uRecentlyViewedItem,
+    M3uRecentlyViewedItem,
+    normalizeStalkerDate,
+    Playlist,
+    PlaylistMeta,
+    PlaylistRecentlyViewedItem,
+    PlaylistUpdateState,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import {
+    buildCollectionUid,
+    buildXtreamCollectionUid,
+    UnifiedCollectionItem,
+} from './unified-collection-item.interface';
+import { CollectionScope } from './scope-toggle.service';
+import { xtreamContentType } from './collection-helpers';
+
+type PlaylistWithChannels = Playlist & {
+    readonly playlist?: { readonly items?: Channel[] };
+};
+
+@Injectable({ providedIn: 'root' })
+export class UnifiedRecentDataService {
+    private readonly store = inject(Store);
+    private readonly dbService = inject(DatabaseService);
+    private readonly playlistsService = inject(PlaylistsService);
+
+    async getRecentItems(
+        scope: CollectionScope,
+        playlistId?: string,
+        portalType?: string
+    ): Promise<UnifiedCollectionItem[]> {
+        if (scope === 'playlist' && playlistId) {
+            return this.getPlaylistRecentItems(playlistId, portalType);
+        }
+
+        return this.getAllRecentItems();
+    }
+
+    async removeRecentItem(item: UnifiedCollectionItem): Promise<void> {
+        if (item.sourceType === 'xtream') {
+            if (item.contentId == null) {
+                return;
+            }
+
+            await this.dbService.removeRecentItem(item.contentId, item.playlistId);
+            return;
+        }
+
+        if (item.sourceType === 'm3u') {
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.removeFromM3uRecentlyViewed(
+                    item.playlistId,
+                    item.streamUrl ?? item.uid.split('::')[2]
+                )
+            );
+            this.dispatchPlaylistRecentUpdate(item.playlistId, updatedPlaylist);
+            return;
+        }
+
+        const updatedPlaylist = await firstValueFrom(
+            this.playlistsService.removeFromPortalRecentlyViewed(
+                item.playlistId,
+                item.stalkerId ?? item.uid.split('::')[2]
+            )
+        );
+        this.dispatchPlaylistRecentUpdate(item.playlistId, updatedPlaylist);
+    }
+
+    async clearRecentItems(
+        scope: CollectionScope,
+        playlistId?: string
+    ): Promise<void> {
+        if (scope === 'playlist' && playlistId) {
+            await this.dbService.clearPlaylistRecentItems(playlistId);
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.clearPlaylistRecentlyViewed(playlistId)
+            );
+            this.dispatchPlaylistRecentUpdate(playlistId, updatedPlaylist);
+            return;
+        }
+
+        await this.dbService.clearGlobalRecentlyViewed();
+        const playlists = (await firstValueFrom(
+            this.playlistsService.getAllPlaylists()
+        )) as Playlist[];
+
+        await Promise.all(
+            playlists
+                .filter((playlist) => Boolean(playlist.macAddress) || !playlist.serverUrl)
+                .map(async (playlist) => {
+                    const updatedPlaylist = await firstValueFrom(
+                        this.playlistsService.clearPlaylistRecentlyViewed(
+                            playlist._id
+                        )
+                    );
+                    this.dispatchPlaylistRecentUpdate(
+                        playlist._id,
+                        updatedPlaylist
+                    );
+                })
+        );
+    }
+
+    async recordLivePlayback(
+        item: UnifiedCollectionItem
+    ): Promise<UnifiedCollectionItem> {
+        const viewedAt = new Date().toISOString();
+
+        if (item.sourceType === 'm3u') {
+            if (!item.streamUrl) {
+                return item;
+            }
+
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.addM3uRecentlyViewed(item.playlistId, {
+                    source: 'm3u',
+                    id: item.streamUrl,
+                    url: item.streamUrl,
+                    title: item.name?.trim() || item.streamUrl,
+                    channel_id: item.channelId,
+                    poster_url: item.logo ?? undefined,
+                    tvg_id: item.tvgId,
+                    tvg_name: item.name,
+                    category_id: 'live',
+                    added_at: viewedAt,
+                } satisfies M3uRecentlyViewedItem)
+            );
+
+            this.dispatchPlaylistRecentUpdate(item.playlistId, updatedPlaylist);
+
+            return {
+                ...item,
+                viewedAt,
+            };
+        }
+
+        if (item.sourceType === 'xtream') {
+            const contentId =
+                item.contentId ??
+                (item.xtreamId != null
+                    ? (
+                          await this.dbService.getContentByXtreamId(
+                              item.xtreamId,
+                              item.playlistId,
+                              item.contentType
+                          )
+                      )?.id
+                    : null);
+
+            if (contentId != null) {
+                await this.dbService.addRecentItem(contentId, item.playlistId);
+            }
+
+            return {
+                ...item,
+                contentId: contentId ?? item.contentId,
+                viewedAt,
+            };
+        }
+
+        const stalkerItem =
+            (item.stalkerItem as StalkerPortalItem | undefined) ?? {};
+        const updatedPlaylist = await firstValueFrom(
+            this.playlistsService.addPortalRecentlyViewed(item.playlistId, {
+                ...stalkerItem,
+                id:
+                    item.stalkerId ??
+                    extractStalkerItemId(stalkerItem) ??
+                    item.uid.split('::')[2],
+                cmd: item.stalkerCmd ?? stalkerItem.cmd,
+                cover:
+                    stalkerItem.cover ??
+                    item.logo ??
+                    item.posterUrl ??
+                    undefined,
+                logo:
+                    stalkerItem.logo ??
+                    item.logo ??
+                    item.posterUrl ??
+                    undefined,
+                title: item.name,
+                name: stalkerItem.name ?? item.name,
+                o_name: stalkerItem.o_name ?? item.name,
+                category_id: 'itv',
+                added_at: Date.now(),
+            })
+        );
+
+        this.dispatchPlaylistRecentUpdate(item.playlistId, updatedPlaylist);
+
+        return {
+            ...item,
+            viewedAt,
+        };
+    }
+
+    private async getAllRecentItems(): Promise<UnifiedCollectionItem[]> {
+        const [xtream, m3u, stalker] = await Promise.all([
+            this.getXtreamGlobalRecent(),
+            this.getM3uGlobalRecent(),
+            this.getStalkerGlobalRecent(),
+        ]);
+
+        return [...xtream, ...m3u, ...stalker].sort(
+            (a, b) =>
+                new Date(b.viewedAt ?? 0).getTime() -
+                new Date(a.viewedAt ?? 0).getTime()
+        );
+    }
+
+    private async getPlaylistRecentItems(
+        playlistId: string,
+        portalType?: string
+    ): Promise<UnifiedCollectionItem[]> {
+        if (portalType === 'xtream') {
+            return this.getXtreamPlaylistRecent(playlistId);
+        }
+
+        if (portalType === 'stalker') {
+            return this.getStalkerPlaylistRecent(playlistId);
+        }
+
+        return this.getM3uPlaylistRecent(playlistId);
+    }
+
+    private async getXtreamGlobalRecent(): Promise<UnifiedCollectionItem[]> {
+        try {
+            const rows = await this.dbService.getGlobalRecentlyViewed();
+            return (rows || []).map((row) => ({
+                uid: buildXtreamCollectionUid(
+                    row.playlist_id,
+                    xtreamContentType(row.type),
+                    row.xtream_id
+                ),
+                name: row.title,
+                contentType: xtreamContentType(row.type),
+                sourceType: 'xtream' as const,
+                playlistId: row.playlist_id,
+                playlistName: row.playlist_name ?? 'Xtream',
+                logo: row.type === 'live' ? (row.poster_url ?? null) : null,
+                posterUrl: row.type !== 'live' ? (row.poster_url ?? null) : null,
+                xtreamId: row.xtream_id,
+                categoryId: row.category_id,
+                tvgId: row.type === 'live' ? String(row.xtream_id) : undefined,
+                contentId: row.id,
+                viewedAt: normalizeStalkerDate(row.viewed_at),
+            }));
+        } catch {
+            return [];
+        }
+    }
+
+    private async getXtreamPlaylistRecent(
+        playlistId: string
+    ): Promise<UnifiedCollectionItem[]> {
+        try {
+            const rows = await this.dbService.getRecentItems(playlistId);
+            const meta = await this.getPlaylistMeta(playlistId);
+
+            return (rows || []).map((row) => ({
+                uid: buildXtreamCollectionUid(
+                    playlistId,
+                    xtreamContentType(row.type),
+                    row.xtream_id
+                ),
+                name: row.title,
+                contentType: xtreamContentType(row.type),
+                sourceType: 'xtream' as const,
+                playlistId,
+                playlistName: meta?.title || 'Xtream',
+                logo: row.type === 'live' ? (row.poster_url ?? null) : null,
+                posterUrl: row.type !== 'live' ? (row.poster_url ?? null) : null,
+                xtreamId: row.xtream_id,
+                categoryId: row.category_id,
+                tvgId: row.type === 'live' ? String(row.xtream_id) : undefined,
+                contentId: row.id,
+                viewedAt: normalizeStalkerDate(row.viewed_at),
+            }));
+        } catch {
+            return [];
+        }
+    }
+
+    private async getM3uGlobalRecent(): Promise<UnifiedCollectionItem[]> {
+        const allMeta = await this.getAllMeta();
+        const results: UnifiedCollectionItem[] = [];
+
+        for (const meta of allMeta.filter((playlist) => this.isM3uPlaylist(playlist))) {
+            results.push(...(await this.extractM3uRecent(meta)));
+        }
+
+        return results;
+    }
+
+    private async getM3uPlaylistRecent(
+        playlistId: string
+    ): Promise<UnifiedCollectionItem[]> {
+        const meta = await this.getPlaylistMeta(playlistId);
+        return meta ? this.extractM3uRecent(meta) : [];
+    }
+
+    private async getStalkerGlobalRecent(): Promise<UnifiedCollectionItem[]> {
+        const allMeta = await this.getAllMeta();
+        const results: UnifiedCollectionItem[] = [];
+
+        for (const meta of allMeta.filter((playlist) => Boolean(playlist.macAddress))) {
+            results.push(...(await this.extractStalkerRecent(meta)));
+        }
+
+        return results;
+    }
+
+    private async getStalkerPlaylistRecent(
+        playlistId: string
+    ): Promise<UnifiedCollectionItem[]> {
+        const meta = await this.getPlaylistMeta(playlistId);
+        return meta ? this.extractStalkerRecent(meta) : [];
+    }
+
+    private async extractM3uRecent(
+        meta: PlaylistMeta
+    ): Promise<UnifiedCollectionItem[]> {
+        const recentItems = this.sortRecentItems(meta.recentlyViewed).filter(
+            isM3uRecentlyViewedItem
+        );
+
+        if (recentItems.length === 0) {
+            return [];
+        }
+
+        let playlist: PlaylistWithChannels | undefined;
+        try {
+            playlist = (await firstValueFrom(
+                this.playlistsService.getPlaylistById(meta._id)
+            )) as PlaylistWithChannels | undefined;
+        } catch {
+            return [];
+        }
+
+        const channels = playlist?.playlist?.items ?? [];
+        const channelsByUrl = new Map<string, Channel>(
+            channels
+                .filter((channel) => channel.url?.trim())
+                .map((channel) => [channel.url.trim(), channel] as const)
+        );
+        const channelsById = new Map<string, Channel>(
+            channels
+                .filter((channel) => channel.id?.trim())
+                .map((channel) => [channel.id.trim(), channel] as const)
+        );
+        const seenUrls = new Set<string>();
+
+        return recentItems
+            .map((recentItem) => {
+                const channel =
+                    channelsByUrl.get(recentItem.url.trim()) ||
+                    (recentItem.channel_id
+                        ? channelsById.get(String(recentItem.channel_id).trim())
+                        : undefined);
+                const fallbackSourceId =
+                    recentItem.url?.trim() ||
+                    String(recentItem.channel_id ?? '').trim();
+
+                if (!channel?.url || seenUrls.has(channel.url)) {
+                    return null;
+                }
+
+                seenUrls.add(channel.url);
+
+                return {
+                    uid: buildCollectionUid(
+                        'm3u',
+                        meta._id,
+                        fallbackSourceId || channel.url || channel.id
+                    ),
+                    name:
+                        recentItem.title?.trim() ||
+                        channel.name ||
+                        recentItem.tvg_name?.trim() ||
+                        recentItem.url,
+                    contentType: 'live' as const,
+                    sourceType: 'm3u' as const,
+                    playlistId: meta._id,
+                    playlistName: meta.title || meta.filename || 'M3U',
+                    logo: channel.tvg?.logo ?? recentItem.poster_url ?? null,
+                    streamUrl: channel.url,
+                    channelId: channel.id,
+                    radio: channel.radio,
+                    tvgId:
+                        channel.tvg?.id ||
+                        recentItem.tvg_id ||
+                        recentItem.tvg_name ||
+                        channel.tvg?.name ||
+                        channel.name,
+                    categoryId: recentItem.category_id,
+                    viewedAt: normalizeStalkerDate(recentItem.added_at),
+                } satisfies UnifiedCollectionItem;
+            })
+            .filter((item) => item !== null) as UnifiedCollectionItem[];
+    }
+
+    private async extractStalkerRecent(
+        meta: PlaylistMeta
+    ): Promise<UnifiedCollectionItem[]> {
+        const recentItems = this.sortRecentItems(meta.recentlyViewed).filter(
+            (item): item is StalkerPortalItem => !isM3uRecentlyViewedItem(item)
+        );
+
+        if (recentItems.length === 0) {
+            return [];
+        }
+
+        let playlist: Playlist | undefined;
+        try {
+            playlist = (await firstValueFrom(
+                this.playlistsService.getPlaylistById(meta._id)
+            )) as Playlist | undefined;
+        } catch {
+            return [];
+        }
+
+        return recentItems.map((item, index) => {
+            const stalkerId = extractStalkerItemId(item, meta._id, index);
+            const contentType = extractStalkerItemType(item);
+            const imageUrl = extractStalkerItemPoster(item) || null;
+
+            return {
+                uid: buildCollectionUid('stalker', meta._id, stalkerId),
+                name: extractStalkerItemTitle(item),
+                contentType,
+                sourceType: 'stalker' as const,
+                playlistId: meta._id,
+                playlistName: meta.title || meta.filename || 'Stalker Portal',
+                logo: contentType === 'live' ? imageUrl : null,
+                posterUrl: contentType !== 'live' ? imageUrl : null,
+                tvgId: contentType === 'live' ? stalkerId : undefined,
+                stalkerId,
+                stalkerCmd: item.cmd,
+                stalkerPortalUrl: playlist?.portalUrl ?? playlist?.url,
+                stalkerMacAddress: playlist?.macAddress,
+                categoryId: item.category_id,
+                stalkerItem: item,
+                viewedAt: normalizeStalkerDate(item.added_at),
+            } satisfies UnifiedCollectionItem;
+        });
+    }
+
+    private async getPlaylistMeta(
+        id: string
+    ): Promise<PlaylistMeta | undefined> {
+        return (await this.getAllMeta()).find((playlist) => playlist._id === id);
+    }
+
+    private async getAllMeta(): Promise<PlaylistMeta[]> {
+        return firstValueFrom(
+            this.store
+                .select(selectAllPlaylistsMeta)
+                .pipe(map((playlists) => playlists as PlaylistMeta[]))
+        );
+    }
+
+    private sortRecentItems(
+        items: PlaylistMeta['recentlyViewed']
+    ): PlaylistRecentlyViewedItem[] {
+        if (!Array.isArray(items)) {
+            return [];
+        }
+
+        return [...items].sort(
+            (a, b) =>
+                new Date(normalizeStalkerDate(b.added_at ?? '')).getTime() -
+                new Date(normalizeStalkerDate(a.added_at ?? '')).getTime()
+        );
+    }
+
+    private dispatchPlaylistRecentUpdate(
+        playlistId: string,
+        updatedPlaylist: Partial<Pick<Playlist, 'recentlyViewed'>> | undefined
+    ): void {
+        this.store.dispatch(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    _id: playlistId,
+                    recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                    updateState: PlaylistUpdateState.UPDATED,
+                } as PlaylistMeta,
+            })
+        );
+    }
+
+    private isM3uPlaylist(
+        playlist: Pick<PlaylistMeta, 'serverUrl' | 'macAddress'>
+    ): boolean {
+        return !playlist.serverUrl && !playlist.macAddress;
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/favorites-channel-sort.ts b/libs/portal/shared/util/src/lib/favorites-channel-sort.ts
new file mode 100644
index 0000000..2f946c7
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/favorites-channel-sort.ts
@@ -0,0 +1,90 @@
+const FAVORITES_SORT_COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+});
+
+export type FavoritesChannelSortMode =
+    | 'custom'
+    | 'name-asc'
+    | 'name-desc'
+    | 'date-desc';
+
+export const DEFAULT_FAVORITES_CHANNEL_SORT_MODE: FavoritesChannelSortMode =
+    'custom';
+
+export const FAVORITES_CHANNEL_SORT_STORAGE_KEY =
+    'favorites-channel-sort-mode';
+
+export function isFavoritesChannelSortMode(
+    value: unknown
+): value is FavoritesChannelSortMode {
+    return (
+        value === 'custom' ||
+        value === 'name-asc' ||
+        value === 'name-desc' ||
+        value === 'date-desc'
+    );
+}
+
+export function restoreFavoritesChannelSortMode(
+    storageKey: string = FAVORITES_CHANNEL_SORT_STORAGE_KEY,
+    fallback: FavoritesChannelSortMode = DEFAULT_FAVORITES_CHANNEL_SORT_MODE
+): FavoritesChannelSortMode {
+    const storedValue = localStorage.getItem(storageKey);
+    return isFavoritesChannelSortMode(storedValue) ? storedValue : fallback;
+}
+
+export function persistFavoritesChannelSortMode(
+    mode: FavoritesChannelSortMode,
+    storageKey: string = FAVORITES_CHANNEL_SORT_STORAGE_KEY
+): void {
+    localStorage.setItem(storageKey, mode);
+}
+
+export function getFavoritesChannelSortModeTranslationKey(
+    mode: FavoritesChannelSortMode
+): string {
+    switch (mode) {
+        case 'name-asc':
+            return 'WORKSPACE.SORT_NAME_ASC';
+        case 'name-desc':
+            return 'WORKSPACE.SORT_NAME_DESC';
+        case 'date-desc':
+            return 'WORKSPACE.SORT_DATE_DESC';
+        default:
+            return 'WORKSPACE.SORT_CUSTOM';
+    }
+}
+
+export function sortFavoriteChannelItems<T>(
+    items: readonly T[],
+    mode: FavoritesChannelSortMode,
+    accessors: {
+        getName: (item: T) => string | null | undefined;
+        getAddedAt?: (item: T) => string | null | undefined;
+    }
+): readonly T[] {
+    if (mode === 'custom') {
+        return items;
+    }
+
+    if (mode === 'date-desc') {
+        const getAddedAt = accessors.getAddedAt;
+        if (!getAddedAt) {
+            return items;
+        }
+        return [...items].sort((a, b) => {
+            const timeA = Date.parse(getAddedAt(a) ?? '') || 0;
+            const timeB = Date.parse(getAddedAt(b) ?? '') || 0;
+            return timeB - timeA;
+        });
+    }
+
+    return [...items].sort((a, b) => {
+        const result = FAVORITES_SORT_COLLATOR.compare(
+            accessors.getName(a) ?? '',
+            accessors.getName(b) ?? ''
+        );
+        return mode === 'name-asc' ? result : -result;
+    });
+}
diff --git a/libs/portal/shared/util/src/lib/logger.spec.ts b/libs/portal/shared/util/src/lib/logger.spec.ts
new file mode 100644
index 0000000..1691cae
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/logger.spec.ts
@@ -0,0 +1,88 @@
+import {
+    createPortalDebugErrorEvent,
+    createPortalDebugRequestContext,
+    createPortalDebugSuccessEvent,
+    logPortalDebugEvent,
+    logPortalDebugRequest,
+} from './logger';
+
+describe('portal debug logger', () => {
+    const globalWithNgDevMode = globalThis as typeof globalThis & {
+        ngDevMode?: boolean;
+    };
+    const originalNgDevMode = globalWithNgDevMode.ngDevMode;
+
+    beforeEach(() => {
+        globalWithNgDevMode.ngDevMode = true;
+        jest.spyOn(console, 'groupCollapsed').mockImplementation(() => undefined);
+        jest.spyOn(console, 'groupEnd').mockImplementation(() => undefined);
+        jest.spyOn(console, 'log').mockImplementation(() => undefined);
+        jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    });
+
+    afterEach(() => {
+        globalWithNgDevMode.ngDevMode = originalNgDevMode;
+        jest.restoreAllMocks();
+    });
+
+    it('does not log when production is enabled', () => {
+        globalWithNgDevMode.ngDevMode = false;
+
+        const context = createPortalDebugRequestContext({
+            provider: 'xtream',
+            operation: 'get_account_info',
+            transport: 'pwa-http',
+            request: { url: '/xtream' },
+        });
+
+        logPortalDebugRequest(context);
+        logPortalDebugEvent(createPortalDebugSuccessEvent(context, { ok: true }));
+
+        expect(console.groupCollapsed).not.toHaveBeenCalled();
+        expect(console.log).not.toHaveBeenCalled();
+    });
+
+    it('includes request id and duration in success events', () => {
+        const nowSpy = jest
+            .spyOn(performance, 'now')
+            .mockReturnValueOnce(10)
+            .mockReturnValueOnce(18);
+        const context = createPortalDebugRequestContext({
+            provider: 'stalker',
+            operation: 'get_ordered_list',
+            transport: 'electron-renderer',
+            request: { url: '/stalker' },
+        });
+
+        const event = createPortalDebugSuccessEvent(context, { js: [] });
+
+        expect(event.requestId).toBe(context.requestId);
+        expect(event.durationMs).toBe(8);
+        expect(event.response).toEqual({ js: [] });
+        expect(event.status).toBe('success');
+
+        nowSpy.mockRestore();
+    });
+
+    it('includes request id and duration in error events', () => {
+        const nowSpy = jest
+            .spyOn(performance, 'now')
+            .mockReturnValueOnce(100)
+            .mockReturnValueOnce(112.5);
+        const context = createPortalDebugRequestContext({
+            provider: 'xtream',
+            operation: 'get_vod_info',
+            transport: 'pwa-http',
+            request: { url: '/xtream' },
+        });
+
+        const event = createPortalDebugErrorEvent(context, new Error('boom'));
+
+        expect(event.requestId).toBe(context.requestId);
+        expect(event.durationMs).toBe(12.5);
+        expect(event.status).toBe('error');
+        expect((event.error as Error).message).toBe('boom');
+
+        nowSpy.mockRestore();
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/logger.ts b/libs/portal/shared/util/src/lib/logger.ts
new file mode 100644
index 0000000..3bf74f4
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/logger.ts
@@ -0,0 +1,184 @@
+import {
+    PortalDebugEvent,
+    PortalDebugProvider,
+    PortalDebugTransport,
+} from 'shared-interfaces';
+
+export interface Logger {
+    debug: (...args: unknown[]) => void;
+    info: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+}
+
+function isProductionBuild(): boolean {
+    const globalWithNgDevMode = globalThis as typeof globalThis & {
+        ngDevMode?: boolean;
+    };
+
+    return globalWithNgDevMode.ngDevMode === false;
+}
+
+export function createLogger(scope: string): Logger {
+    const prefix = `[${scope}]`;
+    const debugEnabled = !isProductionBuild();
+
+    return {
+        debug: (...args: unknown[]) => {
+            if (debugEnabled) {
+                console.debug(prefix, ...args);
+            }
+        },
+        info: (...args: unknown[]) => {
+            if (debugEnabled) {
+                console.info(prefix, ...args);
+            }
+        },
+        warn: (...args: unknown[]) => {
+            console.warn(prefix, ...args);
+        },
+        error: (...args: unknown[]) => {
+            console.error(prefix, ...args);
+        },
+    };
+}
+
+export interface PortalDebugRequestContext {
+    requestId: string;
+    provider: PortalDebugProvider;
+    operation: string;
+    transport: PortalDebugTransport;
+    request: unknown;
+    startedAt: number;
+    startedAtIso: string;
+}
+
+let portalRequestSequence = 0;
+
+function isPortalDebugEnabled(): boolean {
+    return !isProductionBuild();
+}
+
+function getNow(): number {
+    return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
+
+function createPortalRequestId(provider: PortalDebugProvider): string {
+    portalRequestSequence += 1;
+    return `${provider}-${Date.now().toString(36)}-${portalRequestSequence}`;
+}
+
+function formatDuration(durationMs: number): string {
+    return `${durationMs.toFixed(1)}ms`;
+}
+
+function logPortalDebugSection(
+    label: string,
+    value: unknown,
+    method: 'log' | 'error' = 'log'
+): void {
+    if (typeof console[method] === 'function') {
+        console[method](label, value);
+    }
+}
+
+export function createPortalDebugRequestContext(input: {
+    provider: PortalDebugProvider;
+    operation: string;
+    transport: PortalDebugTransport;
+    request: unknown;
+}): PortalDebugRequestContext {
+    return {
+        requestId: createPortalRequestId(input.provider),
+        provider: input.provider,
+        operation: input.operation,
+        transport: input.transport,
+        request: input.request,
+        startedAt: getNow(),
+        startedAtIso: new Date().toISOString(),
+    };
+}
+
+export function createPortalDebugSuccessEvent(
+    context: PortalDebugRequestContext,
+    response: unknown
+): PortalDebugEvent {
+    return {
+        requestId: context.requestId,
+        provider: context.provider,
+        operation: context.operation,
+        transport: context.transport,
+        request: context.request,
+        response,
+        startedAt: context.startedAtIso,
+        durationMs: getNow() - context.startedAt,
+        status: 'success',
+    };
+}
+
+export function createPortalDebugErrorEvent(
+    context: PortalDebugRequestContext,
+    error: unknown
+): PortalDebugEvent {
+    return {
+        requestId: context.requestId,
+        provider: context.provider,
+        operation: context.operation,
+        transport: context.transport,
+        request: context.request,
+        error,
+        startedAt: context.startedAtIso,
+        durationMs: getNow() - context.startedAt,
+        status: 'error',
+    };
+}
+
+export function logPortalDebugRequest(
+    context: PortalDebugRequestContext
+): void {
+    if (!isPortalDebugEnabled()) {
+        return;
+    }
+
+    console.groupCollapsed(
+        `[PortalDebug:${context.provider}] ${context.operation} request ${context.requestId}`
+    );
+    logPortalDebugSection('meta', {
+        requestId: context.requestId,
+        provider: context.provider,
+        operation: context.operation,
+        transport: context.transport,
+        startedAt: context.startedAtIso,
+    });
+    logPortalDebugSection('request', context.request);
+    console.groupEnd();
+}
+
+export function logPortalDebugEvent(event: PortalDebugEvent): void {
+    if (!isPortalDebugEnabled()) {
+        return;
+    }
+
+    const statusLabel = event.status === 'success' ? 'response' : 'error';
+    console.groupCollapsed(
+        `[PortalDebug:${event.provider}] ${event.operation} ${statusLabel} ${event.requestId} ${formatDuration(event.durationMs)}`
+    );
+    logPortalDebugSection('meta', {
+        requestId: event.requestId,
+        provider: event.provider,
+        operation: event.operation,
+        transport: event.transport,
+        startedAt: event.startedAt,
+        durationMs: event.durationMs,
+        status: event.status,
+    });
+    logPortalDebugSection('request', event.request);
+
+    if (event.status === 'success') {
+        logPortalDebugSection('response', event.response);
+    } else {
+        logPortalDebugSection('error', event.error, 'error');
+    }
+
+    console.groupEnd();
+}
diff --git a/libs/portal/shared/util/src/lib/navigation/portal-rail-links.spec.ts b/libs/portal/shared/util/src/lib/navigation/portal-rail-links.spec.ts
new file mode 100644
index 0000000..87e1d1f
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/navigation/portal-rail-links.spec.ts
@@ -0,0 +1,92 @@
+import { buildPortalRailLinks } from './portal-rail-links';
+
+describe('buildPortalRailLinks', () => {
+    it('builds Xtream links with scoped tooltip labels on Electron', () => {
+        const links = buildPortalRailLinks({
+            provider: 'xtreams',
+            playlistId: 'xtream-1',
+            isElectron: true,
+            workspace: false,
+        });
+
+        expect(links.primary.map((link) => link.section)).toEqual([
+            'vod',
+            'live',
+            'series',
+        ]);
+        expect(links.secondary.map((link) => link.section)).toEqual([
+            'recently-added',
+            'search',
+            'downloads',
+        ]);
+
+        expect(links.primary[0]?.tooltip).toBe('Movies (this playlist)');
+        expect(links.secondary[2]?.tooltip).toBe('Downloads (this playlist)');
+    });
+
+    it('builds workspace Xtream links without downloads on web', () => {
+        const links = buildPortalRailLinks({
+            provider: 'xtreams',
+            playlistId: 'xtream-web',
+            isElectron: false,
+            workspace: true,
+        });
+
+        expect(links.primary).toEqual([
+            {
+                icon: 'movie',
+                tooltip: 'Xtream library (this playlist)',
+                path: ['/workspace', 'xtreams', 'xtream-web'],
+                exact: true,
+                section: 'library',
+            },
+        ]);
+        expect(links.secondary).toEqual([]);
+    });
+
+    it('builds Stalker links with scoped tooltip labels', () => {
+        const links = buildPortalRailLinks({
+            provider: 'stalker',
+            playlistId: 'portal-1',
+            isElectron: false,
+            workspace: false,
+        });
+
+        expect(links.primary.map((link) => link.section)).toEqual([
+            'vod',
+            'itv',
+            'series',
+        ]);
+        expect(links.secondary.map((link) => link.section)).toEqual(['search']);
+
+        expect(links.primary[1]?.tooltip).toBe('Live TV (this playlist)');
+        expect(links.secondary[0]?.tooltip).toBe('Search (this playlist)');
+    });
+
+    it('builds M3U playlist links with scoped tooltip labels', () => {
+        const links = buildPortalRailLinks({
+            provider: 'playlists',
+            playlistId: 'm3u-1',
+            isElectron: true,
+            workspace: true,
+        });
+
+        expect(links.primary).toEqual([
+            {
+                icon: 'tv',
+                tooltip: 'All channels (this playlist)',
+                path: ['/workspace', 'playlists', 'm3u-1', 'all'],
+                exact: true,
+                section: 'all',
+            },
+            {
+                icon: 'folder',
+                tooltip: 'Groups (this playlist)',
+                path: ['/workspace', 'playlists', 'm3u-1', 'groups'],
+                exact: true,
+                section: 'groups',
+            },
+        ]);
+        expect(links.secondary).toEqual([]);
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts b/libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts
new file mode 100644
index 0000000..16085a4
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts
@@ -0,0 +1,175 @@
+export type PortalProvider = 'xtreams' | 'stalker' | 'playlists';
+export type PortalRailSection =
+    | 'all'
+    | 'downloads'
+    | 'favorites'
+    | 'groups'
+    | 'itv'
+    | 'library'
+    | 'live'
+    | 'recent'
+    | 'recently-added'
+    | 'search'
+    | 'series'
+    | 'vod';
+
+export interface PortalRailLink {
+    icon: string;
+    tooltip: string;
+    path: (string | number)[];
+    exact?: boolean;
+    section?: PortalRailSection;
+}
+
+interface BuildPortalRailLinksOptions {
+    provider: PortalProvider;
+    playlistId: string;
+    isElectron: boolean;
+    workspace: boolean;
+}
+
+interface PortalRailLinkGroups {
+    primary: PortalRailLink[];
+    secondary: PortalRailLink[];
+}
+
+export function buildPortalRailLinks(
+    options: BuildPortalRailLinksOptions
+): PortalRailLinkGroups {
+    const { provider, playlistId, isElectron, workspace } = options;
+    const root = workspace
+        ? ['/workspace', provider, playlistId]
+        : [`/${provider}`, playlistId];
+
+    if (provider === 'xtreams') {
+        const primary: PortalRailLink[] = [];
+        const secondary: PortalRailLink[] = [];
+
+        if (workspace && !isElectron) {
+            primary.push({
+                icon: 'movie',
+                tooltip: 'Xtream library (this playlist)',
+                path: root,
+                exact: true,
+                section: 'library',
+            });
+            return { primary, secondary };
+        }
+
+        primary.push(
+            {
+                icon: 'movie',
+                tooltip: 'Movies (this playlist)',
+                path: [...root, 'vod'],
+                section: 'vod',
+            },
+            {
+                icon: 'live_tv',
+                tooltip: 'Live TV (this playlist)',
+                path: [...root, 'live'],
+                section: 'live',
+            },
+            {
+                icon: 'tv',
+                tooltip: 'Series (this playlist)',
+                path: [...root, 'series'],
+                section: 'series',
+            }
+        );
+
+        secondary.push(
+            {
+                icon: 'new_releases',
+                tooltip: 'Recently added (this playlist)',
+                path: [...root, 'recently-added'],
+                section: 'recently-added',
+            },
+            {
+                icon: 'search',
+                tooltip: 'Search (this playlist)',
+                path: [...root, 'search'],
+                section: 'search',
+            }
+        );
+
+        if (isElectron) {
+            secondary.push({
+                icon: 'download',
+                tooltip: 'Downloads (this playlist)',
+                path: [...root, 'downloads'],
+                section: 'downloads',
+            });
+        }
+
+        return { primary, secondary };
+    }
+
+    if (provider === 'stalker') {
+        const primary: PortalRailLink[] = [
+            {
+                icon: 'movie',
+                tooltip: 'Movies (this playlist)',
+                path: [...root, 'vod'],
+                section: 'vod',
+            },
+            {
+                icon: 'live_tv',
+                tooltip: 'Live TV (this playlist)',
+                path: [...root, 'itv'],
+                section: 'itv',
+            },
+            {
+                icon: 'tv',
+                tooltip: 'Series (this playlist)',
+                path: [...root, 'series'],
+                section: 'series',
+            },
+        ];
+
+        const secondary: PortalRailLink[] = [
+            {
+                icon: 'search',
+                tooltip: 'Search (this playlist)',
+                path: [...root, 'search'],
+                section: 'search',
+            },
+        ];
+
+        if (isElectron) {
+            secondary.push({
+                icon: 'download',
+                tooltip: 'Downloads (this playlist)',
+                path: [...root, 'downloads'],
+                section: 'downloads',
+            });
+        }
+
+        return { primary, secondary };
+    }
+
+    if (provider === 'playlists') {
+        const primary: PortalRailLink[] = [
+            {
+                icon: 'tv',
+                tooltip: 'All channels (this playlist)',
+                path: [...root, 'all'],
+                exact: true,
+                section: 'all',
+            },
+            {
+                icon: 'folder',
+                tooltip: 'Groups (this playlist)',
+                path: [...root, 'groups'],
+                exact: true,
+                section: 'groups',
+            },
+        ];
+
+        return {
+            primary,
+            secondary: [],
+        };
+    }
+
+    return { primary: [], secondary: [] };
+}
diff --git a/libs/portal/shared/util/src/lib/navigation/portal-route.utils.spec.ts b/libs/portal/shared/util/src/lib/navigation/portal-route.utils.spec.ts
new file mode 100644
index 0000000..a4881be
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/navigation/portal-route.utils.spec.ts
@@ -0,0 +1,336 @@
+import {
+    createEnvironmentInjector,
+    EnvironmentInjector,
+    runInInjectionContext,
+} from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import {
+    extractPortalPlaylistId,
+    extractPortalSection,
+    isWorkspaceLayoutRoute,
+    queryParamSignal,
+    routeParamSignal,
+    resolveCurrentPortalPlaylistId,
+    resolveCurrentPortalSection,
+} from './portal-route.utils';
+
+describe('portal-route.utils', () => {
+    it('detects workspace layout from route data', () => {
+        const route = {
+            snapshot: {
+                data: {
+                    layout: 'workspace',
+                },
+            },
+        } as unknown as ActivatedRoute;
+
+        expect(isWorkspaceLayoutRoute(route)).toBe(true);
+    });
+
+    it('detects workspace layout from ancestor route data', () => {
+        const parentRoute = {
+            snapshot: {
+                data: {
+                    layout: 'workspace',
+                },
+            },
+        } as ActivatedRoute;
+        const childRoute = {
+            snapshot: {
+                data: {},
+            },
+            pathFromRoot: [
+                {
+                    snapshot: {
+                        data: {},
+                    },
+                },
+                parentRoute,
+                {
+                    snapshot: {
+                        data: {},
+                    },
+                },
+            ],
+        } as unknown as ActivatedRoute;
+
+        expect(isWorkspaceLayoutRoute(childRoute)).toBe(true);
+    });
+
+    it('extracts Xtream sections from workspace and local URLs', () => {
+        expect(extractPortalSection('/xtreams/123/search', 'xtreams')).toBe(
+            'search'
+        );
+        expect(
+            extractPortalSection('/workspace/xtreams/123/recent', 'xtreams')
+        ).toBe('recent');
+    });
+
+    it('extracts Stalker sections from workspace and local URLs', () => {
+        expect(extractPortalSection('/stalker/321/series', 'stalker')).toBe(
+            'series'
+        );
+        expect(
+            extractPortalSection('/workspace/stalker/321/favorites', 'stalker')
+        ).toBe('favorites');
+    });
+
+    it('extracts playlist ids from workspace and local URLs', () => {
+        expect(
+            extractPortalPlaylistId('/workspace/xtreams/123/search', 'xtreams')
+        ).toBe('123');
+        expect(extractPortalPlaylistId('/stalker/321/series', 'stalker')).toBe(
+            '321'
+        );
+    });
+
+    it('resolves portal sections from the active descendant chain and falls back to URL parsing', () => {
+        const routeWithDescendants = {
+            snapshot: {
+                url: [],
+            },
+            firstChild: {
+                snapshot: {
+                    url: [{ path: 'workspace' }],
+                },
+                firstChild: {
+                    snapshot: {
+                        url: [{ path: 'stalker' }],
+                    },
+                    firstChild: {
+                        snapshot: {
+                            url: [{ path: 'vod' }],
+                        },
+                        firstChild: null,
+                    },
+                },
+            },
+        } as unknown as ActivatedRoute;
+        const routeWithoutChild = {
+            snapshot: {
+                url: [],
+            },
+            firstChild: null,
+        } as unknown as ActivatedRoute;
+
+        expect(
+            resolveCurrentPortalSection(
+                routeWithDescendants,
+                '/workspace/stalker/123/search',
+                'stalker'
+            )
+        ).toBe('vod');
+        expect(
+            resolveCurrentPortalSection(
+                routeWithoutChild,
+                '/workspace/stalker/123/search',
+                'stalker'
+            )
+        ).toBe('search');
+    });
+
+    it('resolves playlist ids from ancestors and falls back to URL parsing', () => {
+        const routeWithParent = {
+            pathFromRoot: [
+                {
+                    snapshot: {
+                        params: {},
+                        paramMap: convertToParamMap({}),
+                    },
+                },
+                {
+                    snapshot: {
+                        params: { id: 'playlist-1' },
+                        paramMap: convertToParamMap({ id: 'playlist-1' }),
+                    },
+                },
+                {
+                    snapshot: {
+                        params: {},
+                        paramMap: convertToParamMap({}),
+                    },
+                },
+            ],
+        } as unknown as ActivatedRoute;
+        const routeWithoutParent = {
+            pathFromRoot: [
+                {
+                    snapshot: {
+                        params: {},
+                        paramMap: convertToParamMap({}),
+                    },
+                },
+            ],
+        } as unknown as ActivatedRoute;
+
+        expect(
+            resolveCurrentPortalPlaylistId(
+                routeWithParent,
+                '/workspace/xtreams/ignored/vod',
+                'xtreams'
+            )
+        ).toBe('playlist-1');
+        expect(
+            resolveCurrentPortalPlaylistId(
+                routeWithoutParent,
+                '/workspace/stalker/playlist-2/vod',
+                'stalker'
+            )
+        ).toBe('playlist-2');
+    });
+
+    it('creates normalized query-param signals', () => {
+        TestBed.configureTestingModule({});
+
+        const parentInjector = TestBed.inject(EnvironmentInjector);
+        const childInjector = createEnvironmentInjector([], parentInjector);
+        const queryParams$ = new BehaviorSubject(
+            convertToParamMap({
+                q: ' Matrix ',
+                refresh: '42',
+            })
+        );
+        const route = {
+            snapshot: {
+                data: {},
+                queryParamMap: convertToParamMap({
+                    q: ' Matrix ',
+                    refresh: '42',
+                }),
+            },
+            queryParamMap: queryParams$.asObservable(),
+        } as unknown as ActivatedRoute;
+
+        const searchTerm = runInInjectionContext(childInjector, () =>
+            queryParamSignal(route, 'q', (value) =>
+                (value ?? '').trim().toLowerCase()
+            )
+        );
+        const refreshToken = runInInjectionContext(childInjector, () =>
+            queryParamSignal(route, 'refresh', (value) => value ?? '')
+        );
+
+        expect(searchTerm()).toBe('matrix');
+        expect(refreshToken()).toBe('42');
+
+        queryParams$.next(
+            convertToParamMap({
+                q: 'Alien',
+                refresh: '84',
+            })
+        );
+
+        expect(searchTerm()).toBe('alien');
+        expect(refreshToken()).toBe('84');
+
+        childInjector.destroy();
+    });
+
+    it('creates route-param signals that react to current route param changes', () => {
+        TestBed.configureTestingModule({});
+
+        const parentInjector = TestBed.inject(EnvironmentInjector);
+        const childInjector = createEnvironmentInjector([], parentInjector);
+        const paramMap$ = new BehaviorSubject(
+            convertToParamMap({
+                id: 'playlist-1',
+            })
+        );
+        const route = {
+            snapshot: {
+                data: {},
+                paramMap: convertToParamMap({
+                    id: 'playlist-1',
+                }),
+                params: {
+                    id: 'playlist-1',
+                },
+            },
+            paramMap: paramMap$.asObservable(),
+        } as unknown as ActivatedRoute;
+
+        const playlistId = runInInjectionContext(childInjector, () =>
+            routeParamSignal(route, 'id', (value) => value ?? '')
+        );
+
+        expect(playlistId()).toBe('playlist-1');
+
+        route.snapshot.paramMap = convertToParamMap({
+            id: 'playlist-2',
+        });
+        route.snapshot.params = {
+            id: 'playlist-2',
+        };
+        paramMap$.next(
+            convertToParamMap({
+                id: 'playlist-2',
+            })
+        );
+
+        expect(playlistId()).toBe('playlist-2');
+
+        childInjector.destroy();
+    });
+
+    it('creates route-param signals that react to ancestor route param changes', () => {
+        TestBed.configureTestingModule({});
+
+        const parentInjector = TestBed.inject(EnvironmentInjector);
+        const childInjector = createEnvironmentInjector([], parentInjector);
+        const parentParamMap$ = new BehaviorSubject(
+            convertToParamMap({
+                id: 'playlist-1',
+            })
+        );
+        const childParamMap$ = new BehaviorSubject(convertToParamMap({}));
+        const parentRoute = {
+            snapshot: {
+                data: {},
+                paramMap: convertToParamMap({
+                    id: 'playlist-1',
+                }),
+                params: {
+                    id: 'playlist-1',
+                },
+            },
+            paramMap: parentParamMap$.asObservable(),
+        } as ActivatedRoute;
+        const route = {
+            snapshot: {
+                data: {},
+                paramMap: convertToParamMap({}),
+                params: {},
+            },
+            paramMap: childParamMap$.asObservable(),
+            pathFromRoot: [] as ActivatedRoute[],
+        } as ActivatedRoute & {
+            pathFromRoot: ActivatedRoute[];
+        };
+        route.pathFromRoot = [parentRoute, route];
+
+        const playlistId = runInInjectionContext(childInjector, () =>
+            routeParamSignal(route, 'id', (value) => value ?? '')
+        );
+
+        expect(playlistId()).toBe('playlist-1');
+
+        (parentRoute.snapshot as ActivatedRoute['snapshot']).paramMap =
+            convertToParamMap({
+                id: 'playlist-2',
+            });
+        (parentRoute.snapshot as ActivatedRoute['snapshot']).params = {
+            id: 'playlist-2',
+        };
+        parentParamMap$.next(
+            convertToParamMap({
+                id: 'playlist-2',
+            })
+        );
+
+        expect(playlistId()).toBe('playlist-2');
+
+        childInjector.destroy();
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/navigation/portal-route.utils.ts b/libs/portal/shared/util/src/lib/navigation/portal-route.utils.ts
new file mode 100644
index 0000000..9a2c812
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/navigation/portal-route.utils.ts
@@ -0,0 +1,161 @@
+import { Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { combineLatest, map, of } from 'rxjs';
+import {
+    PortalProvider,
+    PortalRailSection,
+} from './portal-rail-links';
+
+type QueryParamNormalizer<T> = (value: string | null) => T;
+type RouteParamNormalizer<T> = (value: string | null) => T;
+
+const PORTAL_SECTIONS = new Set<PortalRailSection>([
+    'all',
+    'downloads',
+    'favorites',
+    'groups',
+    'itv',
+    'library',
+    'live',
+    'recent',
+    'recently-added',
+    'search',
+    'series',
+    'vod',
+]);
+
+export function isWorkspaceLayoutRoute(route: ActivatedRoute): boolean {
+    const routeChain =
+        Array.isArray(route.pathFromRoot) && route.pathFromRoot.length > 0
+            ? route.pathFromRoot
+            : [route];
+
+    return routeChain.some(
+        (currentRoute) => currentRoute.snapshot.data['layout'] === 'workspace'
+    );
+}
+
+export function queryParamSignal<T = string>(
+    route: ActivatedRoute,
+    key: string,
+    normalizer?: QueryParamNormalizer<T>
+): Signal<T> {
+    const normalize =
+        normalizer ??
+        (((
+            value: string | null
+        ) => (value ?? '') as T) as QueryParamNormalizer<T>);
+
+    return toSignal(
+        route.queryParamMap.pipe(map((params) => normalize(params.get(key)))),
+        {
+            initialValue: normalize(route.snapshot.queryParamMap.get(key)),
+        }
+    );
+}
+
+export function routeParamSignal<T = string>(
+    route: ActivatedRoute,
+    key: string,
+    normalizer?: RouteParamNormalizer<T>
+): Signal<T> {
+    const normalize =
+        normalizer ??
+        (((
+            value: string | null
+        ) => (value ?? '') as T) as RouteParamNormalizer<T>);
+    const routeChain =
+        Array.isArray(route.pathFromRoot) && route.pathFromRoot.length > 0
+            ? route.pathFromRoot
+            : [route];
+
+    return toSignal(
+        combineLatest(
+            routeChain.map((currentRoute) =>
+                currentRoute.paramMap ??
+                of(
+                    currentRoute.snapshot.paramMap ??
+                        convertToParamMap(currentRoute.snapshot.params ?? {})
+                )
+            )
+        ).pipe(map(() => normalize(resolveCurrentRouteParam(route, key)))),
+        {
+            initialValue: normalize(resolveCurrentRouteParam(route, key)),
+        }
+    );
+}
+
+export function extractPortalSection(
+    url: string,
+    provider: PortalProvider
+): PortalRailSection | null {
+    const match = url.match(
+        new RegExp(`^/(?:workspace/)?${provider}/[^/?]+/([^/?]+)`)
+    );
+    return (match?.[1] as PortalRailSection | undefined) ?? null;
+}
+
+export function extractPortalPlaylistId(
+    url: string,
+    provider: PortalProvider
+): string | null {
+    const match = url.match(new RegExp(`^/(?:workspace/)?${provider}/([^/?]+)`));
+    return match?.[1] ?? null;
+}
+
+export function resolveCurrentPortalPlaylistId(
+    route: ActivatedRoute,
+    routerUrl: string,
+    provider: PortalProvider
+): string | null {
+    const resolved = resolveCurrentRouteParam(route, 'id');
+    if (resolved) {
+        return resolved;
+    }
+
+    return extractPortalPlaylistId(routerUrl, provider);
+}
+
+function resolveCurrentRouteParam(
+    route: ActivatedRoute,
+    key: string
+): string | null {
+    const routeChain =
+        Array.isArray(route.pathFromRoot) && route.pathFromRoot.length > 0
+            ? route.pathFromRoot
+            : [route];
+
+    for (let index = routeChain.length - 1; index >= 0; index -= 1) {
+        const currentRoute = routeChain[index];
+        const value =
+            currentRoute.snapshot.paramMap?.get(key) ??
+            currentRoute.snapshot.params?.[key];
+        if (value) {
+            return value;
+        }
+    }
+
+    return null;
+}
+
+export function resolveCurrentPortalSection(
+    route: ActivatedRoute,
+    routerUrl: string,
+    provider: PortalProvider
+): PortalRailSection | null {
+    let currentRoute: ActivatedRoute | null = route;
+    while (currentRoute) {
+        const currentSegment = currentRoute.snapshot.url?.[0]?.path;
+        if (
+            currentSegment &&
+            PORTAL_SECTIONS.has(currentSegment as PortalRailSection)
+        ) {
+            return currentSegment as PortalRailSection;
+        }
+
+        currentRoute = currentRoute.firstChild;
+    }
+
+    return extractPortalSection(routerUrl, provider);
+}
diff --git a/libs/portal/shared/util/src/lib/navigation/workspace-portal-navigation.spec.ts b/libs/portal/shared/util/src/lib/navigation/workspace-portal-navigation.spec.ts
new file mode 100644
index 0000000..6a0c5a9
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/navigation/workspace-portal-navigation.spec.ts
@@ -0,0 +1,248 @@
+import {
+    buildCollectionViewState,
+    buildStalkerStateItem,
+    buildXtreamItemLink,
+    COLLECTION_VIEW_STATE_KEY,
+    getGlobalFavoriteNavigation,
+    getCollectionViewState,
+    getOpenCollectionDetailItemState,
+    getOpenLiveCollectionItemState,
+    getOpenStalkerItemState,
+    getRecentItemNavigation,
+    getStalkerReturnToState,
+    getUnifiedCollectionNavigation,
+    OPEN_COLLECTION_DETAIL_STATE_KEY,
+    matchesOpenLiveCollectionItem,
+    OPEN_LIVE_COLLECTION_ITEM_STATE_KEY,
+    OPEN_STALKER_ITEM_STATE_KEY,
+    STALKER_RETURN_TO_STATE_KEY,
+} from './workspace-portal-navigation';
+
+describe('workspace-portal-navigation', () => {
+    it('builds canonical Xtream live links without category segments', () => {
+        expect(
+            buildXtreamItemLink({
+                playlistId: 'xtream-1',
+                type: 'live',
+                categoryId: 42,
+                itemId: 99,
+            })
+        ).toEqual(['/workspace', 'xtreams', 'xtream-1', 'live']);
+    });
+
+    it('builds Xtream detail links with category and item ids', () => {
+        expect(
+            buildXtreamItemLink({
+                playlistId: 'xtream-1',
+                type: 'movie',
+                categoryId: 42,
+                itemId: 99,
+            })
+        ).toEqual(['/workspace', 'xtreams', 'xtream-1', 'vod', '42', '99']);
+    });
+
+    it('normalizes collection view state for history persistence', () => {
+        expect(
+            buildCollectionViewState({
+                selectedContentType: 'movie',
+                scope: 'all',
+            })
+        ).toEqual({
+            selectedContentType: 'movie',
+            scope: 'all',
+        });
+        expect(
+            getCollectionViewState({
+                [COLLECTION_VIEW_STATE_KEY]: {
+                    selectedContentType: 'series',
+                    scope: 'playlist',
+                },
+            })
+        ).toEqual({
+            selectedContentType: 'series',
+            scope: 'playlist',
+        });
+    });
+
+    it('routes live M3U favorites to the playlist favorites collection with auto-open state', () => {
+        const navigation = getGlobalFavoriteNavigation({
+            id: 'channel-1',
+            title: 'Channel One',
+            type: 'live',
+            playlist_id: 'm3u-1',
+            category_id: 'live',
+            xtream_id: 'channel-1',
+            source: 'm3u',
+            poster_url: 'https://example.com/logo.png',
+            added_at: '2026-03-01T00:00:00.000Z',
+        });
+
+        expect(navigation).toEqual({
+            link: ['/workspace', 'playlists', 'm3u-1', 'favorites'],
+            state: {
+                openLiveCollectionItem: {
+                    contentType: 'live',
+                    sourceType: 'm3u',
+                    playlistId: 'm3u-1',
+                    itemId: 'channel-1',
+                    title: 'Channel One',
+                    imageUrl: 'https://example.com/logo.png',
+                },
+            },
+        });
+        expect(getOpenLiveCollectionItemState(navigation.state)).toEqual(
+            navigation.state?.[OPEN_LIVE_COLLECTION_ITEM_STATE_KEY]
+        );
+    });
+
+    it('routes Stalker movie favorites into the global favorites page with inline detail state', () => {
+        const navigation = getGlobalFavoriteNavigation({
+            id: 'movie-7',
+            title: 'Movie Seven',
+            type: 'movie',
+            playlist_id: 'stalker-1',
+            category_id: '17',
+            xtream_id: 'movie-7',
+            source: 'stalker',
+            poster_url: 'https://example.com/poster.png',
+            added_at: '2026-03-01T00:00:00.000Z',
+        });
+
+        expect(navigation).toEqual({
+            link: ['/workspace', 'global-favorites'],
+            state: {
+                openCollectionDetailItem: {
+                    item: expect.objectContaining({
+                        uid: 'stalker::stalker-1::movie-7',
+                        name: 'Movie Seven',
+                        contentType: 'movie',
+                        sourceType: 'stalker',
+                        playlistId: 'stalker-1',
+                        categoryId: '17',
+                        stalkerId: 'movie-7',
+                    }),
+                },
+            },
+        });
+        expect(getOpenCollectionDetailItemState(navigation.state)).toEqual(
+            navigation.state?.[OPEN_COLLECTION_DETAIL_STATE_KEY]
+        );
+    });
+
+    it('routes Stalker live recents to the collection route with auto-open state', () => {
+        const navigation = getRecentItemNavigation({
+            id: 'stalker-live-1',
+            title: 'Live One',
+            type: 'live',
+            playlist_id: 'stalker-1',
+            category_id: 'itv',
+            xtream_id: 'stalker-live-1',
+            source: 'stalker',
+            poster_url: 'https://example.com/poster.png',
+            viewed_at: '2026-03-01T00:00:00.000Z',
+        });
+
+        expect(navigation).toEqual({
+            link: ['/workspace', 'stalker', 'stalker-1', 'recent'],
+            state: {
+                openLiveCollectionItem: {
+                    contentType: 'live',
+                    sourceType: 'stalker',
+                    playlistId: 'stalker-1',
+                    itemId: 'stalker-live-1',
+                    title: 'Live One',
+                    imageUrl: 'https://example.com/poster.png',
+                },
+            },
+        });
+    });
+
+    it('matches collection live state against multiple live item identifiers', () => {
+        expect(
+            matchesOpenLiveCollectionItem(
+                {
+                    uid: 'm3u::m3u-1::https://example.com/live.m3u8',
+                    name: 'Channel One',
+                    contentType: 'live',
+                    sourceType: 'm3u',
+                    playlistId: 'm3u-1',
+                    playlistName: 'M3U Playlist',
+                    streamUrl: 'https://example.com/live.m3u8',
+                    channelId: 'channel-1',
+                },
+                {
+                    contentType: 'live',
+                    sourceType: 'm3u',
+                    playlistId: 'm3u-1',
+                    itemId: 'channel-1',
+                    title: 'Channel One',
+                }
+            )
+        ).toBe(true);
+    });
+
+    it('builds unified Stalker grid navigation with detail state', () => {
+        expect(
+            getUnifiedCollectionNavigation({
+                uid: 'stalker::stalker-1::series-9',
+                name: 'Series Nine',
+                contentType: 'series',
+                sourceType: 'stalker',
+                playlistId: 'stalker-1',
+                playlistName: 'Stalker Playlist',
+                stalkerId: 'series-9',
+                categoryId: '44',
+                posterUrl: 'https://example.com/poster.png',
+            })
+        ).toEqual({
+            link: ['/workspace', 'stalker', 'stalker-1', 'series', '44'],
+            state: {
+                openStalkerItem: expect.objectContaining({
+                    category_id: '44',
+                    id: 'series-9',
+                    title: 'Series Nine',
+                }),
+            },
+        });
+    });
+
+    it('preserves concrete Stalker category ids when building detail state', () => {
+        expect(
+            buildStalkerStateItem(
+                {
+                    id: '77',
+                    category_id: '101',
+                    title: 'Concrete Category Movie',
+                },
+                {
+                    id: '77',
+                    title: 'Concrete Category Movie',
+                    type: 'movie',
+                }
+            )
+        ).toEqual(
+            expect.objectContaining({
+                id: '77',
+                category_id: '101',
+                title: 'Concrete Category Movie',
+            })
+        );
+    });
+
+    it('builds unified Xtream grid navigation from category-aware items', () => {
+        expect(
+            getUnifiedCollectionNavigation({
+                uid: 'xtream::xtream-1::99',
+                name: 'Movie One',
+                contentType: 'movie',
+                sourceType: 'xtream',
+                playlistId: 'xtream-1',
+                playlistName: 'Xtream Playlist',
+                xtreamId: 99,
+                categoryId: 42,
+            })
+        ).toEqual({
+            link: ['/workspace', 'xtreams', 'xtream-1', 'vod', '42', '99'],
+        });
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/navigation/workspace-portal-navigation.ts b/libs/portal/shared/util/src/lib/navigation/workspace-portal-navigation.ts
new file mode 100644
index 0000000..5d11e0c
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/navigation/workspace-portal-navigation.ts
@@ -0,0 +1,736 @@
+import {
+    extractStalkerItemId,
+    PortalActivityType,
+    PortalFavoriteItem,
+    PortalRecentItem,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import {
+    buildCollectionUid,
+    buildXtreamCollectionUid,
+    CollectionContentType,
+    CollectionSourceType,
+    UnifiedCollectionItem,
+} from '../collection/unified-collection-item.interface';
+import { CollectionScope } from '../collection/scope-toggle.service';
+
+export interface WorkspaceNavigationTarget {
+    link: string[];
+    state?: Record<string, unknown>;
+}
+
+export const OPEN_LIVE_COLLECTION_ITEM_STATE_KEY = 'openLiveCollectionItem';
+export const OPEN_COLLECTION_DETAIL_STATE_KEY = 'openCollectionDetailItem';
+export const OPEN_STALKER_ITEM_STATE_KEY = 'openStalkerItem';
+export const STALKER_RETURN_TO_STATE_KEY = 'stalkerReturnTo';
+export const COLLECTION_VIEW_STATE_KEY = 'collectionViewState';
+
+export interface OpenLiveCollectionItemState {
+    contentType: 'live';
+    sourceType: CollectionSourceType;
+    playlistId: string;
+    itemId: string;
+    title?: string;
+    imageUrl?: string | null;
+}
+
+export interface OpenCollectionDetailItemState {
+    item: UnifiedCollectionItem;
+}
+
+export interface CollectionViewState {
+    selectedContentType?: CollectionContentType;
+    scope?: CollectionScope;
+}
+
+export function getRecentItemNavigation(
+    item: PortalRecentItem
+): WorkspaceNavigationTarget {
+    if (item.type === 'live') {
+        return buildLiveCollectionNavigationTarget({
+            mode: 'recent',
+            sourceType: item.source,
+            playlistId: item.playlist_id,
+            itemId: item.xtream_id ?? item.id,
+            title: item.title,
+            imageUrl: item.poster_url,
+        });
+    }
+
+    const collectionItem = buildDashboardCollectionDetailItem(item);
+    if (collectionItem) {
+        return buildGlobalCollectionDetailNavigationTarget(
+            'recent',
+            collectionItem
+        );
+    }
+
+    if (item.source === 'stalker') {
+        return buildStalkerDetailNavigationTarget({
+            playlistId: item.playlist_id,
+            type: item.type,
+            categoryId: item.category_id,
+            item: buildStalkerStateItem(item.stalker_item, item),
+            returnTo: '/workspace/dashboard',
+        });
+    }
+
+    return buildXtreamNavigationTarget({
+        playlistId: item.playlist_id,
+        type: item.type,
+        categoryId: item.category_id,
+        itemId: item.xtream_id,
+        title: item.title,
+        imageUrl: item.poster_url,
+    });
+}
+
+export function getGlobalFavoriteNavigation(
+    item: PortalFavoriteItem
+): WorkspaceNavigationTarget {
+    if (item.type === 'live') {
+        return buildLiveCollectionNavigationTarget({
+            mode: 'favorites',
+            sourceType: item.source,
+            playlistId: item.playlist_id,
+            itemId: item.xtream_id ?? item.id,
+            title: item.title,
+            imageUrl: item.poster_url,
+        });
+    }
+
+    const collectionItem = buildDashboardCollectionDetailItem(item);
+    if (collectionItem) {
+        return buildGlobalCollectionDetailNavigationTarget(
+            'favorites',
+            collectionItem
+        );
+    }
+
+    if (item.source === 'stalker') {
+        return buildStalkerDetailNavigationTarget({
+            playlistId: item.playlist_id,
+            type: item.type,
+            categoryId: item.category_id,
+            item: buildStalkerStateItem(item.stalker_item, item),
+            returnTo: '/workspace/dashboard',
+        });
+    }
+
+    return buildXtreamNavigationTarget({
+        playlistId: item.playlist_id,
+        type: item.type,
+        categoryId: item.category_id,
+        itemId: item.xtream_id,
+        title: item.title,
+        imageUrl: item.poster_url,
+    });
+}
+
+export function buildXtreamNavigationTarget(params: {
+    playlistId: string;
+    type: PortalActivityType;
+    categoryId?: string | number | null;
+    itemId?: string | number | null;
+    title?: string;
+    imageUrl?: string | null;
+}): WorkspaceNavigationTarget {
+    const link = buildXtreamItemLink(params);
+    const routeType = toXtreamRouteType(params.type);
+
+    if (routeType !== 'live') {
+        return { link };
+    }
+
+    const streamId = Number(toPathSegment(params.itemId));
+    if (!Number.isFinite(streamId) || streamId <= 0) {
+        return { link };
+    }
+
+    return {
+        link,
+        state: {
+            openXtreamLiveItemId: streamId,
+            openXtreamLiveTitle: params.title || '',
+            openXtreamLivePoster: params.imageUrl || '',
+        },
+    };
+}
+
+export function buildLiveCollectionNavigationTarget(params: {
+    mode: 'favorites' | 'recent';
+    sourceType: CollectionSourceType;
+    playlistId: string;
+    itemId?: string | number | null;
+    title?: string;
+    imageUrl?: string | null;
+}): WorkspaceNavigationTarget {
+    return {
+        link: buildCollectionRoute(
+            params.sourceType,
+            params.playlistId,
+            params.mode
+        ),
+        state: {
+            [OPEN_LIVE_COLLECTION_ITEM_STATE_KEY]:
+                buildOpenLiveCollectionItemState(params),
+        },
+    };
+}
+
+export function buildGlobalCollectionDetailNavigationTarget(
+    mode: 'favorites' | 'recent',
+    item: UnifiedCollectionItem
+): WorkspaceNavigationTarget {
+    return {
+        link: [
+            '/workspace',
+            mode === 'favorites' ? 'global-favorites' : 'global-recent',
+        ],
+        state: {
+            [OPEN_COLLECTION_DETAIL_STATE_KEY]:
+                buildOpenCollectionDetailItemState(item),
+        },
+    };
+}
+
+export function buildCollectionViewState(params: {
+    selectedContentType?: CollectionContentType | null;
+    scope?: CollectionScope | null;
+}): CollectionViewState | null {
+    const selectedContentType = normalizeCollectionContentType(
+        params.selectedContentType
+    );
+    const scope = normalizeCollectionScope(params.scope);
+
+    if (!selectedContentType && !scope) {
+        return null;
+    }
+
+    return {
+        ...(selectedContentType ? { selectedContentType } : {}),
+        ...(scope ? { scope } : {}),
+    };
+}
+
+export function getCollectionViewState(
+    state: unknown
+): CollectionViewState | null {
+    const record = toStateRecord(state);
+    const candidate = toStateRecord(record?.[COLLECTION_VIEW_STATE_KEY]);
+
+    return buildCollectionViewState({
+        selectedContentType: candidate?.[
+            'selectedContentType'
+        ] as CollectionContentType | null,
+        scope: candidate?.['scope'] as CollectionScope | null,
+    });
+}
+
+export function buildOpenCollectionDetailItemState(
+    item: UnifiedCollectionItem
+): OpenCollectionDetailItemState {
+    return {
+        item: normalizeCollectionDetailItem(item),
+    };
+}
+
+export function getOpenCollectionDetailItemState(
+    state: unknown
+): OpenCollectionDetailItemState | null {
+    const record = toStateRecord(state);
+    const candidate = toStateRecord(record?.[OPEN_COLLECTION_DETAIL_STATE_KEY]);
+    const item = normalizeCollectionDetailItem(candidate?.['item']);
+
+    return item ? { item } : null;
+}
+
+export function buildOpenLiveCollectionItemState(params: {
+    sourceType: CollectionSourceType;
+    playlistId: string;
+    itemId?: string | number | null;
+    title?: string;
+    imageUrl?: string | null;
+}): OpenLiveCollectionItemState {
+    return {
+        contentType: 'live',
+        sourceType: params.sourceType,
+        playlistId: params.playlistId,
+        itemId: toPathSegment(params.itemId),
+        title: params.title,
+        imageUrl: params.imageUrl,
+    };
+}
+
+export function getOpenLiveCollectionItemState(
+    state: unknown
+): OpenLiveCollectionItemState | null {
+    const record = toStateRecord(state);
+    const candidate = record?.[OPEN_LIVE_COLLECTION_ITEM_STATE_KEY];
+    if (!candidate || typeof candidate !== 'object') {
+        return null;
+    }
+
+    const sourceType = toPathSegment(
+        (candidate as Record<string, unknown>)['sourceType']
+    ) as CollectionSourceType;
+    const playlistId = toPathSegment(
+        (candidate as Record<string, unknown>)['playlistId']
+    );
+    const itemId = toPathSegment(
+        (candidate as Record<string, unknown>)['itemId']
+    );
+
+    if (
+        !playlistId ||
+        !itemId ||
+        (sourceType !== 'm3u' &&
+            sourceType !== 'xtream' &&
+            sourceType !== 'stalker')
+    ) {
+        return null;
+    }
+
+    return {
+        contentType: 'live',
+        sourceType,
+        playlistId,
+        itemId,
+        title: toOptionalPathSegment(
+            (candidate as Record<string, unknown>)['title']
+        ),
+        imageUrl: toOptionalPathSegment(
+            (candidate as Record<string, unknown>)['imageUrl']
+        ),
+    };
+}
+
+export function buildXtreamItemLink(params: {
+    playlistId: string;
+    type: PortalActivityType;
+    categoryId?: string | number | null;
+    itemId?: string | number | null;
+}): string[] {
+    const routeType = toXtreamRouteType(params.type);
+    const categoryId = toPathSegment(params.categoryId);
+    const itemId = toPathSegment(params.itemId);
+
+    if (routeType === 'live') {
+        return ['/workspace', 'xtreams', params.playlistId, 'live'];
+    }
+
+    if (categoryId && itemId) {
+        return [
+            '/workspace',
+            'xtreams',
+            params.playlistId,
+            routeType,
+            categoryId,
+            itemId,
+        ];
+    }
+
+    if (categoryId) {
+        return [
+            '/workspace',
+            'xtreams',
+            params.playlistId,
+            routeType,
+            categoryId,
+        ];
+    }
+
+    return ['/workspace', 'xtreams', params.playlistId, routeType];
+}
+
+export function getUnifiedCollectionNavigation(
+    item: UnifiedCollectionItem
+): WorkspaceNavigationTarget | null {
+    if (item.sourceType === 'xtream') {
+        return buildXtreamNavigationTarget({
+            playlistId: item.playlistId,
+            type: item.contentType,
+            categoryId: item.categoryId,
+            itemId: item.xtreamId,
+            title: item.name,
+            imageUrl: item.posterUrl ?? item.logo ?? null,
+        });
+    }
+
+    if (item.sourceType === 'stalker') {
+        if (item.contentType === 'live') {
+            return buildLiveCollectionNavigationTarget({
+                mode: 'favorites',
+                sourceType: item.sourceType,
+                playlistId: item.playlistId,
+                itemId: item.stalkerId,
+                title: item.name,
+                imageUrl: item.logo ?? item.posterUrl ?? null,
+            });
+        }
+
+        return buildStalkerDetailNavigationTarget({
+            playlistId: item.playlistId,
+            type: item.contentType,
+            categoryId: item.categoryId,
+            item: buildStalkerStateItem(
+                item.stalkerItem as StalkerPortalItem | undefined,
+                {
+                    id: item.stalkerId ?? getLastSegment(item.uid, '::') ?? '',
+                    title: item.name,
+                    type: item.contentType,
+                    category_id: item.categoryId,
+                    poster_url: item.posterUrl ?? item.logo ?? undefined,
+                }
+            ),
+        });
+    }
+
+    return null;
+}
+
+export function buildStalkerDetailNavigationTarget(params: {
+    playlistId: string;
+    type: Exclude<PortalActivityType, 'live'>;
+    categoryId?: string | number | null;
+    item: Record<string, unknown>;
+    returnTo?: string | string[] | null;
+}): WorkspaceNavigationTarget {
+    const section = params.type === 'movie' ? 'vod' : 'series';
+    const normalizedCategoryId = toPathSegment(
+        params.categoryId ?? toStalkerCategoryId(params.type)
+    );
+    const link = normalizedCategoryId
+        ? [
+              '/workspace',
+              'stalker',
+              params.playlistId,
+              section,
+              normalizedCategoryId,
+          ]
+        : ['/workspace', 'stalker', params.playlistId, section];
+
+    const state: Record<string, unknown> = {
+        [OPEN_STALKER_ITEM_STATE_KEY]: params.item,
+    };
+    const returnTo = normalizeReturnToState(params.returnTo);
+    if (returnTo) {
+        state[STALKER_RETURN_TO_STATE_KEY] = returnTo;
+    }
+
+    return {
+        link,
+        state,
+    };
+}
+
+export function getOpenStalkerItemState(
+    state: unknown
+): Record<string, unknown> | null {
+    const record = toStateRecord(state);
+    const candidate =
+        record?.[OPEN_STALKER_ITEM_STATE_KEY] ??
+        record?.['openFavoriteItem'] ??
+        record?.['openRecentItem'];
+    return candidate && typeof candidate === 'object'
+        ? (candidate as Record<string, unknown>)
+        : null;
+}
+
+export function getStalkerReturnToState(state: unknown): string | null {
+    const record = toStateRecord(state);
+    const candidate = record?.[STALKER_RETURN_TO_STATE_KEY];
+    return typeof candidate === 'string' && candidate.trim().length > 0
+        ? candidate.trim()
+        : null;
+}
+
+export function clearNavigationStateKeys(keys: string[]): void {
+    try {
+        const state = toStateRecord(window.history.state);
+        if (!state) {
+            return;
+        }
+
+        const nextState = { ...state };
+        let changed = false;
+        keys.forEach((key) => {
+            if (key in nextState) {
+                delete nextState[key];
+                changed = true;
+            }
+        });
+
+        if (changed) {
+            window.history.replaceState(nextState, document.title);
+        }
+    } catch {
+        // no-op
+    }
+}
+
+export function matchesOpenLiveCollectionItem(
+    item: UnifiedCollectionItem,
+    target: OpenLiveCollectionItemState
+): boolean {
+    if (
+        item.contentType !== 'live' ||
+        item.sourceType !== target.sourceType ||
+        item.playlistId !== target.playlistId
+    ) {
+        return false;
+    }
+
+    const targetId = toPathSegment(target.itemId);
+    const sourceItemId = getLastSegment(item.uid, '::') ?? '';
+    const candidates = [
+        sourceItemId,
+        item.streamUrl,
+        item.channelId,
+        item.xtreamId,
+        item.stalkerId,
+        item.contentId,
+    ]
+        .map((value) => toPathSegment(value))
+        .filter(Boolean);
+
+    if (candidates.includes(targetId)) {
+        return true;
+    }
+
+    const normalizedTargetTitle = target.title?.trim().toLowerCase();
+    return Boolean(
+        normalizedTargetTitle &&
+        item.name.trim().toLowerCase() === normalizedTargetTitle
+    );
+}
+
+function getLastSegment(value: string, separator: string): string | undefined {
+    const segments = value.split(separator);
+    return segments.length > 0 ? segments[segments.length - 1] : undefined;
+}
+
+function normalizeReturnToState(
+    value: string | string[] | null | undefined
+): string | null {
+    if (Array.isArray(value)) {
+        const normalized = value.join('/');
+        return normalized.trim() ? normalized : null;
+    }
+
+    if (typeof value === 'string' && value.trim().length > 0) {
+        return value.trim();
+    }
+
+    return null;
+}
+
+function normalizeCollectionContentType(
+    value: CollectionContentType | null | undefined
+): CollectionContentType | null {
+    return value === 'live' || value === 'movie' || value === 'series'
+        ? value
+        : null;
+}
+
+function normalizeCollectionScope(
+    value: CollectionScope | null | undefined
+): CollectionScope | null {
+    return value === 'playlist' || value === 'all' ? value : null;
+}
+
+function buildDashboardCollectionDetailItem(
+    item: PortalFavoriteItem | PortalRecentItem
+): UnifiedCollectionItem | null {
+    if (
+        item.type === 'live' ||
+        (item.source !== 'xtream' && item.source !== 'stalker')
+    ) {
+        return null;
+    }
+
+    if (item.source === 'xtream') {
+        return normalizeCollectionDetailItem({
+            uid: buildXtreamCollectionUid(
+                item.playlist_id,
+                item.type,
+                item.xtream_id
+            ),
+            name: item.title,
+            contentType: item.type,
+            sourceType: 'xtream',
+            playlistId: item.playlist_id,
+            playlistName: item.playlist_name ?? '',
+            posterUrl: item.poster_url ?? null,
+            xtreamId: toOptionalNumber(item.xtream_id),
+            contentId: toOptionalNumber(item.id),
+            categoryId: item.category_id,
+            addedAt: 'added_at' in item ? item.added_at : undefined,
+            viewedAt: 'viewed_at' in item ? item.viewed_at : undefined,
+        });
+    }
+
+    const stalkerItem = buildStalkerStateItem(item.stalker_item, {
+        id: item.id,
+        title: item.title,
+        type: item.type,
+        category_id: item.category_id,
+        poster_url: item.poster_url,
+    });
+    const stalkerId = extractStalkerItemId(stalkerItem, item.playlist_id);
+
+    return normalizeCollectionDetailItem({
+        uid: buildCollectionUid('stalker', item.playlist_id, stalkerId),
+        name: item.title,
+        contentType: item.type,
+        sourceType: 'stalker',
+        playlistId: item.playlist_id,
+        playlistName: item.playlist_name ?? '',
+        posterUrl: item.poster_url ?? null,
+        stalkerId,
+        categoryId: item.category_id,
+        stalkerItem,
+        addedAt: 'added_at' in item ? item.added_at : undefined,
+        viewedAt: 'viewed_at' in item ? item.viewed_at : undefined,
+    });
+}
+
+export function buildStalkerStateItem(
+    rawItem: StalkerPortalItem | undefined,
+    fallback: {
+        id: string | number;
+        title: string;
+        type: PortalActivityType;
+        category_id?: string | number | null;
+        poster_url?: string;
+    }
+): Record<string, unknown> {
+    const normalizedCategory =
+        toOptionalPathSegment(rawItem?.category_id) ??
+        toOptionalPathSegment(fallback.category_id) ??
+        toStalkerCategoryId(fallback.type);
+    if (rawItem) {
+        return {
+            ...(rawItem as Record<string, unknown>),
+            category_id: normalizedCategory,
+        };
+    }
+
+    const title = fallback.title || '';
+    return {
+        id: String(fallback.id ?? ''),
+        title,
+        name: title,
+        o_name: title,
+        category_id: normalizedCategory,
+        cover: fallback.poster_url || '',
+        logo: fallback.poster_url || '',
+    };
+}
+
+export function toXtreamRouteType(
+    type: PortalActivityType
+): 'live' | 'vod' | 'series' {
+    return type === 'movie' ? 'vod' : type;
+}
+
+export function toStalkerCategoryId(value: unknown): 'vod' | 'series' | 'itv' {
+    const normalized = String(value ?? '').toLowerCase();
+    if (normalized === 'series') return 'series';
+    if (normalized === 'itv' || normalized === 'live') return 'itv';
+    return 'vod';
+}
+
+function toPathSegment(value: unknown): string {
+    return String(value ?? '').trim();
+}
+
+function toOptionalPathSegment(value: unknown): string | undefined {
+    const normalized = toPathSegment(value);
+    return normalized ? normalized : undefined;
+}
+
+function toOptionalNumber(value: unknown): number | undefined {
+    const rawValue = String(value ?? '').trim();
+    if (!rawValue) {
+        return undefined;
+    }
+
+    const normalized = Number(rawValue);
+    return Number.isFinite(normalized) ? normalized : undefined;
+}
+
+function normalizeCollectionDetailItem(
+    candidate: unknown
+): UnifiedCollectionItem | null {
+    const record = toStateRecord(candidate);
+    if (!record) {
+        return null;
+    }
+
+    const contentType = toPathSegment(record['contentType']);
+    const sourceType = toPathSegment(
+        record['sourceType']
+    ) as CollectionSourceType;
+    const uid = toPathSegment(record['uid']);
+    const name = toPathSegment(record['name']);
+    const playlistId = toPathSegment(record['playlistId']);
+
+    if (
+        !uid ||
+        !name ||
+        !playlistId ||
+        (contentType !== 'movie' && contentType !== 'series') ||
+        (sourceType !== 'xtream' && sourceType !== 'stalker')
+    ) {
+        return null;
+    }
+
+    return {
+        uid,
+        name,
+        contentType,
+        sourceType,
+        playlistId,
+        playlistName: toPathSegment(record['playlistName']),
+        posterUrl:
+            toOptionalPathSegment(record['posterUrl']) ??
+            toOptionalPathSegment(record['logo']) ??
+            null,
+        logo: toOptionalPathSegment(record['logo']) ?? null,
+        xtreamId: toOptionalNumber(record['xtreamId']),
+        contentId: toOptionalNumber(record['contentId']),
+        stalkerId: toOptionalPathSegment(record['stalkerId']),
+        stalkerCmd: toOptionalPathSegment(record['stalkerCmd']),
+        stalkerPortalUrl: toOptionalPathSegment(record['stalkerPortalUrl']),
+        stalkerMacAddress: toOptionalPathSegment(record['stalkerMacAddress']),
+        categoryId: toOptionalPathSegment(record['categoryId']),
+        rating: toOptionalPathSegment(record['rating']),
+        addedAt: toOptionalPathSegment(record['addedAt']),
+        viewedAt: toOptionalPathSegment(record['viewedAt']),
+        position: toOptionalNumber(record['position']),
+        stalkerItem: toStateRecord(record['stalkerItem']) ?? undefined,
+    };
+}
+
+function buildCollectionRoute(
+    sourceType: CollectionSourceType,
+    playlistId: string,
+    mode: 'favorites' | 'recent'
+): string[] {
+    if (sourceType === 'xtream') {
+        return ['/workspace', 'xtreams', playlistId, mode];
+    }
+
+    if (sourceType === 'stalker') {
+        return ['/workspace', 'stalker', playlistId, mode];
+    }
+
+    return ['/workspace', 'playlists', playlistId, mode];
+}
+
+function toStateRecord(state: unknown): Record<string, unknown> | null {
+    return state && typeof state === 'object'
+        ? (state as Record<string, unknown>)
+        : null;
+}
diff --git a/libs/portal/shared/util/src/lib/portal-catalog-detail.ts b/libs/portal/shared/util/src/lib/portal-catalog-detail.ts
new file mode 100644
index 0000000..86939d1
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-catalog-detail.ts
@@ -0,0 +1,6 @@
+import { InjectionToken, Type } from '@angular/core';
+
+export const PORTAL_CATALOG_DETAIL_COMPONENT =
+    new InjectionToken<Type<unknown> | null>('PORTAL_CATALOG_DETAIL_COMPONENT', {
+        factory: () => null,
+    });
diff --git a/libs/portal/shared/util/src/lib/portal-catalog-facade.ts b/libs/portal/shared/util/src/lib/portal-catalog-facade.ts
new file mode 100644
index 0000000..debb0ae
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-catalog-facade.ts
@@ -0,0 +1,94 @@
+import { InjectionToken, Signal } from '@angular/core';
+import { ResolvedPortalPlayback } from 'shared-interfaces';
+
+export type PortalCatalogProvider = 'xtream' | 'stalker';
+
+export type PortalCatalogSortMode =
+    | 'date-desc'
+    | 'date-asc'
+    | 'name-asc'
+    | 'name-desc';
+
+export interface PortalCatalogPlaylistMeta {
+    id: string;
+    title?: string;
+    portalUrl?: string;
+    macAddress?: string;
+    userAgent?: string;
+    referer?: string;
+    origin?: string;
+}
+
+export interface PortalCatalogItemProgress {
+    progress?: number;
+    isWatched?: boolean;
+    hasSeriesProgress?: boolean;
+}
+
+export interface PortalCatalogFacade<
+    TCategory = unknown,
+    TItem = unknown,
+    TSelectedItem = unknown,
+> {
+    readonly provider: PortalCatalogProvider;
+    readonly pageSizeOptions: readonly number[];
+    readonly contentType: Signal<string | null | undefined>;
+    readonly limit: Signal<number>;
+    readonly pageIndex: Signal<number>;
+    readonly selectedCategory: Signal<TCategory | null | undefined>;
+    readonly paginatedContent: Signal<readonly TItem[] | undefined>;
+    readonly selectedItem: Signal<TSelectedItem | null | undefined>;
+    readonly totalPages: Signal<number>;
+    readonly isPaginatedContentLoading: Signal<boolean>;
+    readonly selectedCategoryTitle: Signal<string>;
+    readonly categoryItemCount: Signal<number>;
+    readonly contentSortMode: Signal<PortalCatalogSortMode | null>;
+    readonly playlist: Signal<PortalCatalogPlaylistMeta | null>;
+
+    initialize(categoryId?: string | null): void;
+    setSearchQuery?(query: string): void;
+    clearSelectedItem(): void;
+    setPage(page: number): void;
+    setLimit(limit: number): void;
+    setContentSortMode(mode: PortalCatalogSortMode): void;
+    selectItem(item: TItem): string[] | null;
+    getItemProgress(item: TItem): PortalCatalogItemProgress;
+}
+
+export interface StalkerPortalCatalogFacade<
+    TCategory = unknown,
+    TItem = unknown,
+    TSelectedItem = unknown,
+> extends PortalCatalogFacade<TCategory, TItem, TSelectedItem> {
+    readonly provider: 'stalker';
+
+    createLinkToPlayVod(
+        cmd?: string,
+        title?: string,
+        thumbnail?: string
+    ): Promise<void>;
+    addToFavorites(item: Record<string, unknown>, onDone?: () => void): void;
+    removeFromFavorites(favoriteId: string, onDone?: () => void): void;
+    fetchMovieFileId(itemId: string): Promise<string | null>;
+    fetchLinkToPlay(
+        portalUrl: string,
+        macAddress: string,
+        cmd: string
+    ): Promise<string>;
+    resolveVodPlayback(
+        cmd?: string,
+        title?: string,
+        thumbnail?: string,
+        startTime?: number
+    ): Promise<ResolvedPortalPlayback>;
+}
+
+export const PORTAL_CATALOG_FACADE = new InjectionToken<PortalCatalogFacade>(
+    'PORTAL_CATALOG_FACADE'
+);
+
+export function isStalkerPortalCatalogFacade(
+    facade: PortalCatalogFacade
+): facade is StalkerPortalCatalogFacade {
+    return facade.provider === 'stalker';
+}
diff --git a/libs/portal/shared/util/src/lib/portal-collection-context.service.ts b/libs/portal/shared/util/src/lib/portal-collection-context.service.ts
new file mode 100644
index 0000000..9105daa
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-collection-context.service.ts
@@ -0,0 +1,35 @@
+import { Injectable, signal } from '@angular/core';
+import { XtreamCategory } from 'shared-interfaces';
+
+/**
+ * Lightweight service that bridges collection-backed routed
+ * components (inside the router-outlet) with the WorkspaceShellComponent
+ * (the outer shell that renders the context panel aside).
+ *
+ * The active routed component pushes its category list here via an effect;
+ * the workspace shell reads it to populate the context panel.
+ */
+@Injectable({ providedIn: 'root' })
+export class PortalCollectionContextService {
+    /** Category list managed by the active routed component (Favorites / RecentlyViewed). */
+    readonly categories = signal<XtreamCategory[]>([]);
+
+    /** Currently selected category id — shared between panel and content. */
+    readonly selectedCategoryId = signal<string>('all');
+
+    /** Called by the context panel when the user clicks a category. */
+    setCategoryId(id: string): void {
+        this.selectedCategoryId.set(id);
+    }
+
+    /** Called by the routed component to push its category list into the panel. */
+    setCategories(categories: XtreamCategory[]): void {
+        this.categories.set(categories);
+    }
+
+    /** Reset to defaults when navigating away from favorites/recent sections. */
+    reset(): void {
+        this.categories.set([]);
+        this.selectedCategoryId.set('all');
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/portal-collection-context.spec.ts b/libs/portal/shared/util/src/lib/portal-collection-context.spec.ts
new file mode 100644
index 0000000..abcd203
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-collection-context.spec.ts
@@ -0,0 +1,129 @@
+import {
+    createEnvironmentInjector,
+    EnvironmentInjector,
+    runInInjectionContext,
+    signal,
+} from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { createPortalCollectionContext } from './portal-collection-context';
+import { PortalCollectionContextService } from './portal-collection-context.service';
+
+describe('portal-collection-context', () => {
+    it('syncs categories into the shared collection context', () => {
+        TestBed.configureTestingModule({
+            providers: [PortalCollectionContextService],
+        });
+
+        const parentInjector = TestBed.inject(EnvironmentInjector);
+        const childInjector = createEnvironmentInjector([], parentInjector);
+        const ctx = TestBed.inject(PortalCollectionContextService);
+        const categories = signal([
+            {
+                id: 1,
+                category_id: 'all',
+                category_name: 'All',
+                count: 2,
+                parent_id: 0,
+            },
+        ]);
+
+        const bridge = runInInjectionContext(childInjector, () =>
+            createPortalCollectionContext({
+                ctx,
+                categories,
+            })
+        );
+        TestBed.flushEffects();
+
+        bridge.setCategoryId('all');
+
+        expect(ctx.categories()).toEqual(categories());
+        expect(ctx.selectedCategoryId()).toBe('all');
+
+        childInjector.destroy();
+    });
+
+    it('does not mutate the shared context when disabled', () => {
+        TestBed.configureTestingModule({
+            providers: [PortalCollectionContextService],
+        });
+
+        const parentInjector = TestBed.inject(EnvironmentInjector);
+        const childInjector = createEnvironmentInjector([], parentInjector);
+        const ctx = TestBed.inject(PortalCollectionContextService);
+        const categories = signal([
+            {
+                id: 1,
+                category_id: 'movie',
+                category_name: 'Movies',
+                count: 1,
+                parent_id: 0,
+            },
+        ]);
+
+        ctx.setCategories([
+            {
+                id: 99,
+                category_id: 'all',
+                category_name: 'Existing',
+                count: 5,
+                parent_id: 0,
+            },
+        ]);
+        ctx.setCategoryId('series');
+
+        const bridge = runInInjectionContext(childInjector, () =>
+            createPortalCollectionContext({
+                ctx,
+                categories,
+                enabled: () => false,
+            })
+        );
+        TestBed.flushEffects();
+
+        bridge.setCategoryId('movie');
+
+        expect(ctx.categories()[0]?.category_name).toBe('Existing');
+        expect(ctx.selectedCategoryId()).toBe('series');
+
+        childInjector.destroy();
+
+        expect(ctx.categories()[0]?.category_name).toBe('Existing');
+        expect(ctx.selectedCategoryId()).toBe('series');
+    });
+
+    it('resets managed context state on destroy', () => {
+        TestBed.configureTestingModule({
+            providers: [PortalCollectionContextService],
+        });
+
+        const parentInjector = TestBed.inject(EnvironmentInjector);
+        const childInjector = createEnvironmentInjector([], parentInjector);
+        const ctx = TestBed.inject(PortalCollectionContextService);
+        const categories = signal([
+            {
+                id: 1,
+                category_id: 'all',
+                category_name: 'All',
+                count: 3,
+                parent_id: 0,
+            },
+        ]);
+
+        runInInjectionContext(childInjector, () =>
+            createPortalCollectionContext({
+                ctx,
+                categories,
+            })
+        );
+        TestBed.flushEffects();
+
+        ctx.setCategoryId('movie');
+
+        childInjector.destroy();
+        TestBed.flushEffects();
+
+        expect(ctx.categories()).toEqual([]);
+        expect(ctx.selectedCategoryId()).toBe('all');
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/portal-collection-context.ts b/libs/portal/shared/util/src/lib/portal-collection-context.ts
new file mode 100644
index 0000000..70dfabe
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-collection-context.ts
@@ -0,0 +1,46 @@
+import { DestroyRef, Signal, effect, inject } from '@angular/core';
+import { XtreamCategory } from 'shared-interfaces';
+import { PortalCollectionContextService } from './portal-collection-context.service';
+
+export interface PortalCollectionContextBridge {
+    readonly selectedCategoryId: Signal<string>;
+    setCategoryId(id: string): void;
+}
+
+interface CreatePortalCollectionContextOptions {
+    ctx: PortalCollectionContextService;
+    categories: () => XtreamCategory[];
+    enabled?: () => boolean;
+}
+
+export function createPortalCollectionContext(
+    options: CreatePortalCollectionContextOptions
+): PortalCollectionContextBridge {
+    const destroyRef = inject(DestroyRef);
+    const isEnabled = options.enabled ?? (() => true);
+    let managesContext = false;
+
+    effect(() => {
+        if (!isEnabled()) {
+            return;
+        }
+
+        managesContext = true;
+        options.ctx.setCategories(options.categories());
+    });
+
+    destroyRef.onDestroy(() => {
+        if (managesContext && isEnabled()) {
+            options.ctx.reset();
+        }
+    });
+
+    return {
+        selectedCategoryId: options.ctx.selectedCategoryId,
+        setCategoryId(id: string): void {
+            if (isEnabled()) {
+                options.ctx.setCategoryId(id);
+            }
+        },
+    };
+}
diff --git a/libs/portal/shared/util/src/lib/portal-collection-items.spec.ts b/libs/portal/shared/util/src/lib/portal-collection-items.spec.ts
new file mode 100644
index 0000000..670f6b2
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-collection-items.spec.ts
@@ -0,0 +1,138 @@
+import {
+    buildStandardCollectionCategories,
+    filterCollectionBucket,
+} from './portal-collection-items';
+
+describe('portal-collection-items', () => {
+    it('builds 4-category collections when live content is included', () => {
+        const categories = buildStandardCollectionCategories({
+            labels: {
+                all: 'All',
+                movie: 'Movies',
+                live: 'Live TV',
+                series: 'Series',
+            },
+            counts: {
+                all: 10,
+                movie: 4,
+                live: 3,
+                series: 3,
+            },
+            includeLive: true,
+        });
+
+        expect(categories.map((category) => category.category_id)).toEqual([
+            'all',
+            'movie',
+            'live',
+            'series',
+        ]);
+        expect(categories[2]?.count).toBe(3);
+    });
+
+    it('supports alternate live category ids for stalker collections', () => {
+        const categories = buildStandardCollectionCategories({
+            labels: {
+                all: 'All',
+                movie: 'Movies',
+                live: 'Live TV',
+                series: 'Series',
+            },
+            counts: {
+                all: 3,
+                movie: 1,
+                live: 1,
+                series: 1,
+            },
+            includeLive: true,
+            liveCategoryId: 'itv',
+        });
+
+        expect(categories[2]?.category_id).toBe('itv');
+    });
+
+    it('builds 3-category collections when live content is excluded', () => {
+        const categories = buildStandardCollectionCategories({
+            labels: {
+                all: 'All',
+                movie: 'Movies',
+                live: 'Live TV',
+                series: 'Series',
+            },
+            counts: {
+                all: 5,
+                movie: 2,
+                series: 3,
+            },
+            includeLive: false,
+        });
+
+        expect(categories.map((category) => category.category_id)).toEqual([
+            'all',
+            'movie',
+            'series',
+        ]);
+        expect(categories[2]?.id).toBe(3);
+    });
+
+    it('filters items by selected category', () => {
+        const items = [
+            { title: 'Movie 1' },
+            { title: 'Series 1' },
+            { title: 'Live 1' },
+        ];
+
+        const filtered = filterCollectionBucket({
+            selectedCategoryId: 'series',
+            allItems: items,
+            buckets: {
+                movie: [items[0]],
+                live: [items[2]],
+                series: [items[1]],
+            },
+            searchTerm: '',
+            textOf: (item) => item.title,
+        });
+
+        expect(filtered).toEqual([items[1]]);
+    });
+
+    it('filters alternate live buckets without changing stalker category ids', () => {
+        const items = [
+            { name: 'Movie' },
+            { name: 'Live' },
+        ];
+
+        const filtered = filterCollectionBucket({
+            selectedCategoryId: 'itv',
+            allItems: items,
+            buckets: {
+                movie: [items[0]],
+                live: [items[1]],
+            },
+            liveCategoryId: 'itv',
+            textOf: (item) => item.name,
+        });
+
+        expect(filtered).toEqual([items[1]]);
+    });
+
+    it('filters items by search term using the provided text selector', () => {
+        const items = [
+            { name: 'Alien', o_name: 'Extended Cut' },
+            { name: 'Matrix', o_name: 'Neo' },
+        ];
+
+        const filtered = filterCollectionBucket({
+            selectedCategoryId: 'all',
+            allItems: items,
+            buckets: {
+                movie: items,
+            },
+            searchTerm: 'neo',
+            textOf: (item) => `${item.name} ${item.o_name}`,
+        });
+
+        expect(filtered).toEqual([items[1]]);
+    });
+});
diff --git a/libs/portal/shared/util/src/lib/portal-collection-items.ts b/libs/portal/shared/util/src/lib/portal-collection-items.ts
new file mode 100644
index 0000000..94109a9
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-collection-items.ts
@@ -0,0 +1,96 @@
+import { XtreamCategory } from 'shared-interfaces';
+
+type StandardCollectionBucket = 'all' | 'movie' | 'live' | 'series';
+
+interface BuildStandardCollectionCategoriesOptions {
+    labels: Record<StandardCollectionBucket, string>;
+    counts: Partial<Record<StandardCollectionBucket, number>>;
+    includeLive?: boolean;
+    liveCategoryId?: 'itv' | 'live';
+}
+
+interface FilterCollectionBucketOptions<T> {
+    selectedCategoryId: string | null | undefined;
+    allItems: readonly T[] | null | undefined;
+    buckets: Partial<Record<'movie' | 'live' | 'series', readonly T[] | null | undefined>>;
+    searchTerm?: string | null | undefined;
+    liveCategoryId?: string;
+    textOf: (item: T) => string;
+}
+
+export function buildStandardCollectionCategories(
+    options: BuildStandardCollectionCategoriesOptions
+): XtreamCategory[] {
+    const {
+        labels,
+        counts,
+        includeLive = false,
+        liveCategoryId = 'live',
+    } = options;
+    const categories: XtreamCategory[] = [
+        {
+            id: 1,
+            category_id: 'all',
+            category_name: labels.all,
+            count: counts.all ?? 0,
+            parent_id: 0,
+        },
+        {
+            id: 2,
+            category_id: 'movie',
+            category_name: labels.movie,
+            count: counts.movie ?? 0,
+            parent_id: 0,
+        },
+    ];
+
+    if (includeLive) {
+        categories.push({
+            id: 3,
+            category_id: liveCategoryId,
+            category_name: labels.live,
+            count: counts.live ?? 0,
+            parent_id: 0,
+        });
+    }
+
+    categories.push({
+        id: includeLive ? 4 : 3,
+        category_id: 'series',
+        category_name: labels.series,
+        count: counts.series ?? 0,
+        parent_id: 0,
+    });
+
+    return categories;
+}
+
+export function filterCollectionBucket<T>(
+    options: FilterCollectionBucketOptions<T>
+): T[] {
+    const {
+        selectedCategoryId,
+        allItems,
+        buckets,
+        searchTerm,
+        liveCategoryId = 'live',
+        textOf,
+    } = options;
+    const baseItems =
+        selectedCategoryId === 'movie'
+            ? buckets.movie ?? []
+            : selectedCategoryId === liveCategoryId
+              ? buckets.live ?? []
+              : selectedCategoryId === 'series'
+                ? buckets.series ?? []
+                : allItems ?? [];
+    const normalizedTerm = (searchTerm ?? '').trim().toLowerCase();
+
+    if (!normalizedTerm) {
+        return [...baseItems];
+    }
+
+    return baseItems.filter((item) =>
+        String(textOf(item)).toLowerCase().includes(normalizedTerm)
+    );
+}
diff --git a/libs/portal/shared/util/src/lib/portal-external-playback.ts b/libs/portal/shared/util/src/lib/portal-external-playback.ts
new file mode 100644
index 0000000..b1cdeb7
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-external-playback.ts
@@ -0,0 +1,14 @@
+import { InjectionToken, Signal } from '@angular/core';
+import { ExternalPlayerSession } from 'shared-interfaces';
+
+export interface PortalExternalPlayback {
+    readonly activeSession: Signal<ExternalPlayerSession | null>;
+    readonly visibleSession: Signal<ExternalPlayerSession | null>;
+    dismissActiveSession(): void;
+    closeSession(
+        session: ExternalPlayerSession | null | undefined
+    ): Promise<void>;
+}
+
+export const PORTAL_EXTERNAL_PLAYBACK =
+    new InjectionToken<PortalExternalPlayback>('PORTAL_EXTERNAL_PLAYBACK');
diff --git a/libs/portal/shared/util/src/lib/portal-navigation-actions.ts b/libs/portal/shared/util/src/lib/portal-navigation-actions.ts
new file mode 100644
index 0000000..9782890
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-navigation-actions.ts
@@ -0,0 +1,11 @@
+import { InjectionToken } from '@angular/core';
+import { Playlist } from 'shared-interfaces';
+
+export interface PortalNavigationActions {
+    openAccountInfo(): void;
+    openPlaylistInfo(playlist: Playlist | null | undefined): void;
+    openSettings(): void;
+}
+
+export const PORTAL_NAVIGATION_ACTIONS =
+    new InjectionToken<PortalNavigationActions>('PORTAL_NAVIGATION_ACTIONS');
diff --git a/libs/portal/shared/util/src/lib/portal-playback-positions.ts b/libs/portal/shared/util/src/lib/portal-playback-positions.ts
new file mode 100644
index 0000000..4f4b66b
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-playback-positions.ts
@@ -0,0 +1,60 @@
+import { InjectionToken } from '@angular/core';
+import { PlaybackPositionData } from 'shared-interfaces';
+
+export interface PortalPlaybackPositions {
+    savePlaybackPosition(
+        playlistId: string,
+        data: PlaybackPositionData
+    ): Promise<void>;
+    getPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<PlaybackPositionData | null>;
+    getSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<PlaybackPositionData[]>;
+    getAllPlaybackPositions(playlistId: string): Promise<PlaybackPositionData[]>;
+    clearPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<void>;
+}
+
+export const PORTAL_PLAYBACK_POSITIONS =
+    new InjectionToken<PortalPlaybackPositions>('PORTAL_PLAYBACK_POSITIONS');
+
+export function getPortalPlaybackProgressPercent(
+    position: PlaybackPositionData | null | undefined
+): number {
+    if (!position || !position.durationSeconds) {
+        return 0;
+    }
+
+    const percent = (position.positionSeconds / position.durationSeconds) * 100;
+
+    if (position.positionSeconds > 10 && percent < 1) {
+        return 1;
+    }
+
+    return Math.min(100, Math.round(percent));
+}
+
+export function isPortalPlaybackWatched(
+    position: PlaybackPositionData | null | undefined
+): boolean {
+    return getPortalPlaybackProgressPercent(position) >= 90;
+}
+
+export function isPortalPlaybackInProgress(
+    position: PlaybackPositionData | null | undefined
+): boolean {
+    if (!position) {
+        return false;
+    }
+
+    const percent = getPortalPlaybackProgressPercent(position);
+    return position.positionSeconds > 10 && percent < 90;
+}
diff --git a/libs/portal/shared/util/src/lib/portal-player.ts b/libs/portal/shared/util/src/lib/portal-player.ts
new file mode 100644
index 0000000..dab6e8d
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/portal-player.ts
@@ -0,0 +1,30 @@
+import { InjectionToken } from '@angular/core';
+import {
+    ExternalPlayerSession,
+    ResolvedPortalPlayback,
+} from 'shared-interfaces';
+
+export interface PortalPlayer {
+    isEmbeddedPlayer(): boolean;
+    openPlayer(
+        streamUrl: string,
+        title: string,
+        thumbnail?: string | null,
+        hideExternalInfoDialog?: boolean,
+        isLiveContent?: boolean,
+        userAgent?: string,
+        referer?: string,
+        origin?: string,
+        contentInfo?: unknown,
+        startTime?: number,
+        headers?: Record<string, string>
+    ): Promise<ExternalPlayerSession | void>;
+    openResolvedPlayback(
+        playback: ResolvedPortalPlayback,
+        hideExternalInfoDialog?: boolean
+    ): Promise<ExternalPlayerSession | void>;
+}
+
+export const PORTAL_PLAYER = new InjectionToken<PortalPlayer>(
+    'PORTAL_PLAYER'
+);
diff --git a/libs/portal/shared/util/src/lib/remote-channel-navigation.ts b/libs/portal/shared/util/src/lib/remote-channel-navigation.ts
new file mode 100644
index 0000000..04d7504
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/remote-channel-navigation.ts
@@ -0,0 +1,57 @@
+export type RemoteChannelDirection = 'up' | 'down';
+
+/**
+ * Returns the adjacent item in the list for remote channel navigation.
+ * Uses wraparound when reaching the start or end of the list.
+ */
+export function getAdjacentChannelItem<T>(
+    items: T[],
+    activeId: string | number | null | undefined,
+    direction: RemoteChannelDirection,
+    getId: (item: T) => string | number | null | undefined
+): T | null {
+    if (!Array.isArray(items) || items.length === 0 || activeId == null) {
+        return null;
+    }
+
+    const activeIdAsString = String(activeId);
+    const currentIndex = items.findIndex((item) => {
+        const itemId = getId(item);
+        return itemId != null && String(itemId) === activeIdAsString;
+    });
+
+    if (currentIndex === -1) {
+        return null;
+    }
+
+    const length = items.length;
+    const nextIndex =
+        direction === 'up'
+            ? (currentIndex - 1 + length) % length
+            : (currentIndex + 1) % length;
+
+    return items[nextIndex] ?? null;
+}
+
+/**
+ * Returns the Nth item in a list (1-based index), or null if out of range.
+ */
+export function getChannelItemByNumber<T>(
+    items: T[],
+    channelNumber: number
+): T | null {
+    if (
+        !Array.isArray(items) ||
+        items.length === 0 ||
+        !Number.isFinite(channelNumber)
+    ) {
+        return null;
+    }
+
+    const index = Math.floor(channelNumber) - 1;
+    if (index < 0 || index >= items.length) {
+        return null;
+    }
+
+    return items[index] ?? null;
+}
diff --git a/libs/portal/shared/util/src/lib/workspace-header-context.service.ts b/libs/portal/shared/util/src/lib/workspace-header-context.service.ts
new file mode 100644
index 0000000..79bba2c
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/workspace-header-context.service.ts
@@ -0,0 +1,28 @@
+import { Injectable, signal } from '@angular/core';
+import { WorkspaceHeaderCommandMetadata } from './workspace-view-command.types';
+
+export interface WorkspaceHeaderAction {
+    id: string;
+    icon: string;
+    tooltipKey: string;
+    ariaLabelKey: string;
+    run: () => void;
+    palette?: WorkspaceHeaderCommandMetadata;
+}
+
+@Injectable({ providedIn: 'root' })
+export class WorkspaceHeaderContextService {
+    readonly action = signal<WorkspaceHeaderAction | null>(null);
+
+    setAction(action: WorkspaceHeaderAction): void {
+        this.action.set(action);
+    }
+
+    clearAction(id?: string): void {
+        if (id && this.action()?.id !== id) {
+            return;
+        }
+
+        this.action.set(null);
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/workspace-view-command.service.ts b/libs/portal/shared/util/src/lib/workspace-view-command.service.ts
new file mode 100644
index 0000000..197b477
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/workspace-view-command.service.ts
@@ -0,0 +1,63 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+import {
+    WorkspaceHeaderAction,
+    WorkspaceHeaderContextService,
+} from './workspace-header-context.service';
+import { WorkspaceCommandContribution } from './workspace-view-command.types';
+
+interface RegisteredWorkspaceCommand {
+    token: symbol;
+    command: WorkspaceCommandContribution;
+}
+
+@Injectable({ providedIn: 'root' })
+export class WorkspaceViewCommandService {
+    private readonly headerContext = inject(WorkspaceHeaderContextService);
+    private readonly registeredCommands = signal<RegisteredWorkspaceCommand[]>(
+        []
+    );
+
+    readonly commands = computed<readonly WorkspaceCommandContribution[]>(() => {
+        const commands = this.registeredCommands().map(
+            (entry) => entry.command
+        );
+        const headerAction = this.headerContext.action();
+        const headerCommand = headerAction
+            ? this.toHeaderCommand(headerAction)
+            : null;
+
+        return headerCommand ? [headerCommand, ...commands] : commands;
+    });
+
+    registerCommand(command: WorkspaceCommandContribution): () => void {
+        const token = Symbol(command.id);
+        this.registeredCommands.update((entries) => [...entries, { token, command }]);
+
+        return () => {
+            this.registeredCommands.update((entries) =>
+                entries.filter((entry) => entry.token !== token)
+            );
+        };
+    }
+
+    private toHeaderCommand(
+        action: WorkspaceHeaderAction
+    ): WorkspaceCommandContribution {
+        const palette = action.palette;
+
+        return {
+            id: action.id,
+            group: palette?.group ?? 'view',
+            icon: action.icon,
+            labelKey: palette?.labelKey ?? action.tooltipKey,
+            labelParams: palette?.labelParams,
+            descriptionKey: palette?.descriptionKey,
+            descriptionParams: palette?.descriptionParams,
+            priority: palette?.priority ?? 0,
+            keywords: palette?.keywords,
+            visible: palette?.visible,
+            enabled: palette?.enabled,
+            run: () => action.run(),
+        };
+    }
+}
diff --git a/libs/portal/shared/util/src/lib/workspace-view-command.types.ts b/libs/portal/shared/util/src/lib/workspace-view-command.types.ts
new file mode 100644
index 0000000..5cd3056
--- /dev/null
+++ b/libs/portal/shared/util/src/lib/workspace-view-command.types.ts
@@ -0,0 +1,53 @@
+export type WorkspaceCommandGroup = 'view' | 'playlist' | 'global';
+
+export interface WorkspaceCommandActionContext {
+    query: string;
+}
+
+export type WorkspaceCommandParams = Record<string, string | number>;
+
+export type WorkspaceCommandValue<T> = T | (() => T);
+
+export interface WorkspaceCommandMetadata {
+    labelKey: string;
+    labelParams?:
+        | WorkspaceCommandParams
+        | (() => WorkspaceCommandParams | undefined);
+    descriptionKey?: string;
+    descriptionParams?:
+        | WorkspaceCommandParams
+        | (() => WorkspaceCommandParams | undefined);
+    priority?: number;
+    keywords?: readonly string[] | (() => readonly string[] | undefined);
+    visible?: boolean | (() => boolean | undefined);
+    enabled?: boolean | (() => boolean | undefined);
+}
+
+export interface WorkspaceCommandContribution extends WorkspaceCommandMetadata {
+    id: string;
+    group: WorkspaceCommandGroup;
+    icon: string;
+    run: (context: WorkspaceCommandActionContext) => void;
+}
+
+export interface WorkspaceHeaderCommandMetadata extends WorkspaceCommandMetadata {
+    group?: WorkspaceCommandGroup;
+}
+
+export interface WorkspaceResolvedCommandItem {
+    id: string;
+    group: WorkspaceCommandGroup;
+    icon: string;
+    label: string;
+    description: string;
+    keywords: readonly string[];
+    priority: number;
+    visible: boolean;
+    enabled: boolean;
+    run: (context: WorkspaceCommandActionContext) => void;
+}
+
+export interface WorkspaceCommandSelection {
+    commandId: string;
+    query: string;
+}
diff --git a/libs/portal/shared/util/src/test-setup.ts b/libs/portal/shared/util/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/shared/util/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/shared/util/tsconfig.json b/libs/portal/shared/util/tsconfig.json
new file mode 100644
index 0000000..dd63ae9
--- /dev/null
+++ b/libs/portal/shared/util/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/portal/shared/util/tsconfig.lib.json b/libs/portal/shared/util/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/portal/shared/util/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/shared/util/tsconfig.spec.json b/libs/portal/shared/util/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/shared/util/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/stalker/data-access/jest.config.ts b/libs/portal/stalker/data-access/jest.config.ts
new file mode 100644
index 0000000..9122c4e
--- /dev/null
+++ b/libs/portal/stalker/data-access/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-stalker-data-access',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/stalker/data-access',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/stalker/data-access/project.json b/libs/portal/stalker/data-access/project.json
new file mode 100644
index 0000000..9481498
--- /dev/null
+++ b/libs/portal/stalker/data-access/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-stalker-data-access",
+    "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/stalker/data-access/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:stalker", "type:data-access"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/stalker/data-access/jest.config.ts",
+                "tsConfig": "libs/portal/stalker/data-access/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/stalker/data-access/src/index.ts b/libs/portal/stalker/data-access/src/index.ts
new file mode 100644
index 0000000..b56ac90
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/index.ts
@@ -0,0 +1,8 @@
+export * from './lib/models';
+export * from './lib/stores';
+export * from './lib/stalker-content-types';
+export * from './lib/stalker-live-playback.utils';
+export * from './lib/stalker-series.adapters';
+export * from './lib/stalker-session.service';
+export * from './lib/stalker-vod.utils';
+export * from './lib/stalker.store';
diff --git a/libs/portal/stalker/data-access/src/lib/models/index.ts b/libs/portal/stalker/data-access/src/lib/models/index.ts
new file mode 100644
index 0000000..3ab94b3
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/index.ts
@@ -0,0 +1,8 @@
+export * from './stalker-favorite-item.interface';
+export * from './stalker-category-item.interface';
+export * from './stalker-content-item.interface';
+export * from './stalker-itv-channel.interface';
+export * from './stalker-season.interface';
+export * from './stalker-serial-details.interface';
+export * from './stalker-vod-details.interface';
+export * from './stalker-vod-series.interface';
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-category-item.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-category-item.interface.ts
new file mode 100644
index 0000000..5f76785
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-category-item.interface.ts
@@ -0,0 +1,5 @@
+export interface StalkerCategoryItem {
+    category_id: string;
+    category_name: string;
+    [key: string]: unknown;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-content-item.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-content-item.interface.ts
new file mode 100644
index 0000000..4af45d3
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-content-item.interface.ts
@@ -0,0 +1,9 @@
+import { StalkerVodSource } from './stalker-favorite-item.interface';
+
+/**
+ * Generic content item returned by Stalker category content endpoints.
+ * Used for VOD, series, and ITV category lists.
+ */
+export interface StalkerContentItem extends StalkerVodSource {
+    cover?: string;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-favorite-item.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-favorite-item.interface.ts
new file mode 100644
index 0000000..7f76731
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-favorite-item.interface.ts
@@ -0,0 +1,67 @@
+import {
+    StalkerVodDetails,
+    StalkerVodInfo,
+} from 'shared-interfaces';
+
+export type StalkerSeriesFlag = true | 1 | '1';
+
+/**
+ * Loose source shape coming from Stalker responses / favorites payloads.
+ * Keep optional to model heterogeneous portal responses.
+ */
+export interface StalkerVodSource {
+    id?: string | number;
+    stream_id?: string | number;
+    movie_id?: string | number;
+    series_id?: string | number;
+    cmd?: string;
+    series?: unknown[];
+    has_files?: number;
+    is_series?: boolean | number | string | null | undefined;
+    video_id?: string;
+    category_id?: string;
+    title?: string;
+    cover?: string;
+    logo?: string;
+    screenshot_uri?: string;
+    name?: string;
+    o_name?: string;
+    description?: string;
+    actors?: string;
+    director?: string;
+    releasedate?: string;
+    year?: string;
+    genre?: string;
+    genres_str?: string;
+    rating_imdb?: string | number;
+    rating_kinopoisk?: string | number;
+    info?: Partial<StalkerVodInfo> | null;
+}
+
+/**
+ * Normalized VOD item used by Stalker detail/favorites flows.
+ */
+export interface StalkerSelectedVodItem extends StalkerVodDetails {
+    series?: unknown[];
+    has_files?: number;
+    is_series?: true;
+    video_id?: string;
+    category_id?: string;
+}
+
+/**
+ * Favorite item persisted for Stalker portal.
+ */
+export interface StalkerFavoriteItem {
+    id?: string | number;
+    stream_id?: string | number;
+    movie_id?: string | number;
+    series_id?: string | number;
+    category_id?: string;
+    cmd?: string;
+    name?: string;
+    o_name?: string;
+    logo?: string;
+    details?: StalkerSelectedVodItem;
+    [key: string]: unknown;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-itv-channel.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-itv-channel.interface.ts
new file mode 100644
index 0000000..9fae5e6
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-itv-channel.interface.ts
@@ -0,0 +1,13 @@
+import { StalkerVodSource } from './stalker-favorite-item.interface';
+
+/**
+ * ITV/live channel shape used by Stalker live TV flow.
+ * Stalker channel payloads are heterogeneous, so this extends the shared source shape.
+ */
+export interface StalkerItvChannel extends StalkerVodSource {
+    id: string | number;
+    cmd: string;
+    name?: string;
+    o_name?: string;
+    logo?: string;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-season.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-season.interface.ts
new file mode 100644
index 0000000..9e4cbfa
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-season.interface.ts
@@ -0,0 +1,17 @@
+export interface StalkerSeason {
+    id: string;
+    series: string[];
+    name: string;
+    cmd: string;
+
+    description: string;
+    director: string;
+    actors: string;
+    year: string;
+    genres_str: string;
+    age: string;
+    rating_imdb: string;
+    rating_kinopoisk: string;
+    screenshot_uri: string;
+    added: string;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-serial-details.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-serial-details.interface.ts
new file mode 100644
index 0000000..5bbdaec
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-serial-details.interface.ts
@@ -0,0 +1,5 @@
+/**
+ * @deprecated Import from 'shared-interfaces' instead.
+ * This re-export exists for backward compatibility.
+ */
+export { StalkerSerialDetails } from 'shared-interfaces';
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-vod-details.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-vod-details.interface.ts
new file mode 100644
index 0000000..592a786
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-vod-details.interface.ts
@@ -0,0 +1,8 @@
+/**
+ * @deprecated Import from 'shared-interfaces' instead.
+ * This re-export exists for backward compatibility.
+ */
+export {
+    StalkerVodDetails,
+    StalkerVodInfo,
+} from 'shared-interfaces';
diff --git a/libs/portal/stalker/data-access/src/lib/models/stalker-vod-series.interface.ts b/libs/portal/stalker/data-access/src/lib/models/stalker-vod-series.interface.ts
new file mode 100644
index 0000000..24fe9ac
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/models/stalker-vod-series.interface.ts
@@ -0,0 +1,24 @@
+/**
+ * Season item returned by Stalker VOD-series (Ministra is_series=1) endpoints.
+ */
+export interface StalkerVodSeriesSeason {
+    id: string;
+    video_id: string;
+    season_number?: string;
+    name?: string;
+    is_season?: boolean;
+}
+
+/**
+ * Episode item returned by Stalker VOD-series season endpoints.
+ */
+export interface StalkerVodSeriesEpisode {
+    id: string;
+    series_number?: number;
+    episode_num?: number;
+    name?: string;
+    cover?: string;
+    description?: string;
+    duration?: number | string;
+    is_episode?: boolean;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-content-types.ts b/libs/portal/stalker/data-access/src/lib/stalker-content-types.ts
new file mode 100644
index 0000000..cf96945
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-content-types.ts
@@ -0,0 +1,32 @@
+import { StalkerPortalActions } from 'shared-interfaces';
+
+export const StalkerContentTypes = {
+    stb: {
+        doAuth: 'do_auth',
+        handshake: 'handshake',
+    },
+    itv: {
+        title: 'Live streams',
+        getContentAction: StalkerPortalActions.GetOrderedList,
+        getCategoryAction: StalkerPortalActions.GetGenres,
+        getLink: StalkerPortalActions.CreateLink,
+    },
+    vod: {
+        title: 'VOD streams',
+        getContentAction: StalkerPortalActions.GetOrderedList,
+        getCategoryAction: StalkerPortalActions.GetCategories,
+        getLink: StalkerPortalActions.CreateLink,
+    },
+    series: {
+        title: 'Series',
+        getContentAction: StalkerPortalActions.GetOrderedList,
+        getCategoryAction: StalkerPortalActions.GetCategories,
+        getLink: StalkerPortalActions.CreateLink,
+    },
+    /* radio: {
+        title: 'Radio',
+        getContentAction: StalkerPortalActions.GetOrderedList,
+        getCategoryAction: StalkerPortalActions.GetOrderedList,
+        getLink: StalkerPortalActions.CreateLink,
+    }, */
+};
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-live-playback.utils.ts b/libs/portal/stalker/data-access/src/lib/stalker-live-playback.utils.ts
new file mode 100644
index 0000000..734b7e0
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-live-playback.utils.ts
@@ -0,0 +1,94 @@
+import { PlaylistMeta } from 'shared-interfaces';
+
+export const STALKER_MAG_USER_AGENT =
+    'Mozilla/5.0 (QtEmbedded; U; Linux; C) AppleWebKit/533.3 (KHTML, like Gecko) MAG250';
+export const STALKER_STREAM_USER_AGENT = 'KSPlayer';
+
+export function getStalkerPortalOrigin(
+    playlist: PlaylistMeta | undefined | null
+): string | undefined {
+    const portalUrl = playlist?.portalUrl;
+    if (!portalUrl) {
+        return undefined;
+    }
+
+    try {
+        return new URL(portalUrl).origin;
+    } catch {
+        return undefined;
+    }
+}
+
+export function isCrossOriginStalkerStream(
+    playlist: PlaylistMeta | undefined | null,
+    streamUrl?: string
+): boolean {
+    const portalOrigin = getStalkerPortalOrigin(playlist);
+    if (!portalOrigin || !streamUrl) {
+        return false;
+    }
+
+    try {
+        return new URL(streamUrl).origin !== portalOrigin;
+    } catch {
+        return false;
+    }
+}
+
+export function buildStalkerExternalPlaybackHeaders(
+    playlist: PlaylistMeta | undefined | null,
+    token?: string | null,
+    streamUrl?: string
+): Record<string, string> {
+    if (!playlist?.macAddress) {
+        return {};
+    }
+
+    if (isCrossOriginStalkerStream(playlist, streamUrl)) {
+        return {
+            'User-Agent': STALKER_STREAM_USER_AGENT,
+            Accept: '*/*',
+            Range: 'bytes=0-',
+            Connection: 'keep-alive',
+            'Icy-MetaData': '1',
+        };
+    }
+
+    const cookieParts = [
+        `mac=${playlist.macAddress}`,
+        'stb_lang=en_US@rg=dezzzz',
+        'timezone=Europe/Berlin',
+    ];
+
+    if (playlist.stalkerSerialNumber) {
+        cookieParts.push(
+            `__cfduid=${playlist.stalkerSerialNumber.toLowerCase()}e030245495acd6ebfc1`
+        );
+    }
+
+    const headers: Record<string, string> = {
+        Cookie: cookieParts.join('; '),
+        'X-User-Agent': STALKER_MAG_USER_AGENT,
+        SN: playlist.stalkerSerialNumber || '',
+    };
+
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    const origin = getStalkerPortalOrigin(playlist);
+    if (origin) {
+        headers['Origin'] = origin;
+        headers['Referer'] = origin;
+    }
+
+    return Object.entries(headers).reduce<Record<string, string>>(
+        (acc, [name, value]) => {
+            if (value?.trim()) {
+                acc[name] = value;
+            }
+            return acc;
+        },
+        {}
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-series.adapters.spec.ts b/libs/portal/stalker/data-access/src/lib/stalker-series.adapters.spec.ts
new file mode 100644
index 0000000..80c6d85
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-series.adapters.spec.ts
@@ -0,0 +1,99 @@
+import {
+    isVodSeriesItem,
+    mapRegularSeriesEpisodes,
+    mapRegularSeriesSeasons,
+    mapVodSeriesEpisodes,
+    mapVodSeriesSeasonsToVm,
+} from './stalker-series.adapters';
+import { StalkerSelectedVodItem } from './models';
+
+type EpisodeWithMetadata = {
+    custom_sid?: string;
+    id?: string;
+    originalId?: string;
+    originalCmd?: string;
+};
+
+describe('stalker-series.adapters', () => {
+    it('detects vod-series flags from heterogeneous payloads', () => {
+        expect(isVodSeriesItem({ is_series: true })).toBe(true);
+        expect(isVodSeriesItem({ is_series: 1 })).toBe(true);
+        expect(isVodSeriesItem({ is_series: '1' })).toBe(true);
+        expect(isVodSeriesItem({ is_series: false })).toBe(false);
+    });
+
+    it('maps VOD-series seasons to VM shape with defaults', () => {
+        const seasons = mapVodSeriesSeasonsToVm([
+            {
+                id: '10',
+                video_id: '20',
+                season_number: '2',
+            },
+        ]);
+
+        expect(seasons).toEqual([
+            {
+                id: '10',
+                video_id: '20',
+                season_number: '2',
+                name: 'Season 2',
+                episodes: [],
+                isLoading: false,
+                isExpanded: false,
+            },
+        ]);
+    });
+
+    it('maps VOD-series episodes with stable tracking IDs and originalId metadata', () => {
+        const mapped = mapVodSeriesEpisodes(
+            [
+                {
+                    id: 's1',
+                    video_id: 'v1',
+                    name: 'Season 1',
+                    season_number: '1',
+                    episodes: [
+                        {
+                            id: 'api-shared-id',
+                            series_number: 1,
+                            name: 'Episode 1',
+                        },
+                        {
+                            id: 'api-shared-id',
+                            series_number: 2,
+                            name: 'Episode 2',
+                        },
+                    ],
+                    isLoading: false,
+                    isExpanded: false,
+                },
+            ],
+            'poster.jpg'
+        );
+
+        expect(mapped['1']).toHaveLength(2);
+        const firstEpisode = mapped['1'][0] as EpisodeWithMetadata;
+        expect(firstEpisode.custom_sid).toBe('vod-series');
+        expect(firstEpisode.originalId).toBe('api-shared-id');
+        expect(firstEpisode.id).not.toBe(mapped['1'][1].id);
+    });
+
+    it('maps embedded series payload into regular season episodes', () => {
+        const regularSeasons = mapRegularSeriesSeasons(
+            {
+                id: '100',
+                cmd: '/media/file_100.mpg',
+                series: ['1', 2, 'x'],
+                info: { name: 'Embedded Series' },
+            } as StalkerSelectedVodItem,
+            []
+        );
+
+        const mapped = mapRegularSeriesEpisodes(regularSeasons, 'poster.jpg');
+        expect(regularSeasons[0].series).toEqual([1, 2]);
+        expect(mapped['1']).toHaveLength(2);
+        const firstEpisode = mapped['1'][0] as EpisodeWithMetadata;
+        expect(firstEpisode.custom_sid).toBe('regular-series');
+        expect(firstEpisode.originalCmd).toBe('/media/file_100.mpg');
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-series.adapters.ts b/libs/portal/stalker/data-access/src/lib/stalker-series.adapters.ts
new file mode 100644
index 0000000..d18fcf1
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-series.adapters.ts
@@ -0,0 +1,232 @@
+import { XtreamSerieEpisode } from 'shared-interfaces';
+import {
+    StalkerSeason,
+    StalkerVodSeriesEpisode,
+    StalkerVodSeriesSeason,
+    StalkerVodSource,
+} from './models';
+import { isStalkerSeriesFlag } from './stalker-vod.utils';
+
+export interface VodSeriesSeasonVm {
+    id: string;
+    video_id: string;
+    name: string;
+    season_number: string;
+    episodes: StalkerVodSeriesEpisode[];
+    isLoading: boolean;
+    isExpanded: boolean;
+}
+
+export interface StalkerSeriesSeasonVm {
+    id: string;
+    name: string;
+    cmd?: string;
+    series: number[];
+}
+
+export interface StalkerMappedEpisode extends XtreamSerieEpisode {
+    originalId?: string;
+    originalCmd?: string;
+}
+
+function hashString(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+}
+
+function generateEpisodeId(
+    seed: string,
+    episodeNum: number,
+    seasonKey: string,
+    isVodSeries: boolean
+): number {
+    if (isVodSeries) {
+        return hashString(`vod_${seasonKey}_${episodeNum}`);
+    }
+    return hashString(`${seed}_ep_${episodeNum}`);
+}
+
+function toEpisodeNumber(value: unknown): number {
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : 0;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+    return 0;
+}
+
+function toNonEmptyString(value: unknown, fallback: string): string {
+    if (typeof value === 'string' && value.trim() !== '') {
+        return value;
+    }
+    return fallback;
+}
+
+function toSeriesNumbers(values: unknown[] | undefined): number[] {
+    if (!Array.isArray(values)) {
+        return [];
+    }
+    return values
+        .map((value) => toEpisodeNumber(value))
+        .filter((value) => value > 0);
+}
+
+export function isVodSeriesItem(
+    item: Pick<StalkerVodSource, 'is_series'> | null | undefined
+): boolean {
+    return isStalkerSeriesFlag(item?.is_series);
+}
+
+export function mapVodSeriesSeasonsToVm(
+    seasons: StalkerVodSeriesSeason[] | undefined
+): VodSeriesSeasonVm[] {
+    return (seasons ?? []).map((season) => ({
+        id: String(season.id),
+        video_id: String(season.video_id),
+        name: toNonEmptyString(
+            season.name,
+            `Season ${toNonEmptyString(season.season_number, '0')}`
+        ),
+        season_number: toNonEmptyString(season.season_number, ''),
+        episodes: [],
+        isLoading: false,
+        isExpanded: false,
+    }));
+}
+
+export function mapRegularSeriesSeasons(
+    vodWithSeries: StalkerVodSource | null,
+    serialSeasons: StalkerSeason[] | undefined
+): StalkerSeriesSeasonVm[] {
+    if (vodWithSeries?.series && vodWithSeries.series.length > 0) {
+        return [
+            {
+                id: String(vodWithSeries.id),
+                name: vodWithSeries.info?.name || 'Episodes',
+                cmd: vodWithSeries.cmd,
+                series: toSeriesNumbers(vodWithSeries.series),
+            },
+        ];
+    }
+
+    return (serialSeasons ?? []).map((season) => ({
+        id: String(season.id),
+        name: season.name,
+        cmd: season.cmd,
+        series: toSeriesNumbers(season.series),
+    }));
+}
+
+function createBaseEpisode(
+    id: number,
+    episodeNum: number,
+    title: string,
+    containerExtension: string,
+    customSid: string,
+    season: number,
+    info: XtreamSerieEpisode['info']
+): XtreamSerieEpisode {
+    return {
+        id: String(id),
+        episode_num: episodeNum,
+        title,
+        container_extension: containerExtension,
+        info,
+        custom_sid: customSid,
+        added: '',
+        season,
+        direct_source: '',
+    };
+}
+
+export function mapVodSeriesEpisodes(
+    seasons: ReadonlyArray<VodSeriesSeasonVm>,
+    fallbackPoster?: string
+): Record<string, XtreamSerieEpisode[]> {
+    const mapped: Record<string, XtreamSerieEpisode[]> = {};
+
+    seasons.forEach((season) => {
+        const seasonKey = season.season_number || season.name || season.id;
+        const seasonNum = toEpisodeNumber(seasonKey) || 1;
+
+        mapped[seasonKey] = (season.episodes ?? []).map((episode) => {
+            const episodeNum =
+                toEpisodeNumber(episode.series_number) ||
+                toEpisodeNumber(episode.episode_num);
+            const trackingId = generateEpisodeId(
+                String(episode.id ?? ''),
+                episodeNum,
+                seasonKey,
+                true
+            );
+
+            return {
+                ...createBaseEpisode(
+                    trackingId,
+                    episodeNum,
+                    episode.name || `Episode ${episodeNum}`,
+                    'mpg',
+                    'vod-series',
+                    seasonNum,
+                    {
+                        movie_image: episode.cover || fallbackPoster,
+                        plot: episode.description || '',
+                        duration: episode.duration
+                            ? `${episode.duration} min`
+                            : '',
+                    }
+                ),
+                originalId: String(episode.id ?? ''),
+            } as StalkerMappedEpisode;
+        });
+    });
+
+    return mapped;
+}
+
+export function mapRegularSeriesEpisodes(
+    seasons: ReadonlyArray<StalkerSeriesSeasonVm>,
+    fallbackPoster?: string
+): Record<string, XtreamSerieEpisode[]> {
+    const mapped: Record<string, XtreamSerieEpisode[]> = {};
+
+    seasons.forEach((season, index) => {
+        const seasonKey = String(index + 1);
+        mapped[seasonKey] = (season.series ?? []).map((episodeNum) => {
+            const trackingId = generateEpisodeId(
+                String(season.cmd ?? ''),
+                episodeNum,
+                seasonKey,
+                false
+            );
+
+            return {
+                ...createBaseEpisode(
+                    trackingId,
+                    episodeNum,
+                    `Episode ${episodeNum}`,
+                    '',
+                    'regular-series',
+                    Number(seasonKey),
+                    {
+                        movie_image: fallbackPoster,
+                    }
+                ),
+                originalCmd: season.cmd,
+            } as StalkerMappedEpisode;
+        });
+    });
+
+    return mapped;
+}
+
+export function getVodSeriesSeasonKey(season: VodSeriesSeasonVm): string {
+    return season.season_number || season.name || season.id;
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-session.service.ts b/libs/portal/stalker/data-access/src/lib/stalker-session.service.ts
new file mode 100644
index 0000000..7681b68
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-session.service.ts
@@ -0,0 +1,631 @@
+import { Injectable, inject } from '@angular/core';
+import { Playlist, STALKER_REQUEST } from 'shared-interfaces';
+import { DataService } from 'services';
+
+/**
+ * SHA1 hash using native Web Crypto API
+ * Produces correct 40-character hex hash matching real Stalker clients
+ */
+async function sha1(str: string): Promise<string> {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(str);
+    const hashBuffer = await crypto.subtle.digest('SHA-1', data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Generates SHA1 prehash from MAC address
+ * This must match what real Stalker clients send
+ */
+async function generatePrehash(macAddress: string): Promise<string> {
+    // Use MAC address with colons, uppercase - this is what most clients use
+    const str = macAddress.toUpperCase();
+    return (await sha1(str)).toUpperCase();
+}
+
+/**
+ * Generates a random string for metrics
+ */
+function generateRandom(): string {
+    const chars = 'abcdef0123456789';
+    let result = '';
+    for (let i = 0; i < 40; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+
+/**
+ * Deterministic serial number - 13 hex characters
+ * Constant value for consistency across all sessions
+ */
+export const STALKER_SERIAL_NUMBER = 'BEDACD4569BAF';
+const STALKER_WATCHDOG_INTERVAL_MS = 25_000;
+
+export interface StalkerHandshakeResponse {
+    js: {
+        token: string;
+        not_valid?: number;
+        random?: string;
+    };
+}
+
+export interface StalkerProfileResponse {
+    js: {
+        id?: string;
+        name?: string;
+        mac?: string;
+        status?: number;
+        msg?: string;
+        block_msg?: string;
+        account_info?: {
+            login?: string;
+            expire_date?: number;
+            tariff_plan_name?: string;
+            status?: number;
+        };
+    };
+}
+
+interface StalkerAuthConfirmationResponse {
+    js?: boolean;
+}
+
+/**
+ * Service to manage Stalker portal session tokens.
+ * Handles handshake authentication for full stalker portals (/stalker_portal/c URLs).
+ * Persists tokens during session and handles re-authentication on auth failures.
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class StalkerSessionService {
+    private dataService = inject(DataService);
+
+    // In-memory token cache for current session (keyed by playlist ID)
+    private tokenCache = new Map<string, string>();
+
+    // Pending authentication promises to prevent race conditions
+    // When multiple requests need a token simultaneously, they all wait for the same auth
+    private pendingAuth = new Map<
+        string,
+        Promise<{ token: string; serialNumber?: string }>
+    >();
+    private watchdogIntervals = new Map<string, ReturnType<typeof setInterval>>();
+    private watchdogPlaylists = new Map<string, Playlist>();
+    private watchdogInFlight = new Set<string>();
+    private activeWatchdogPlaylistId: string | null = null;
+
+    /**
+     * Generates a consistent 64-character device ID from MAC address
+     */
+    private generateDeviceId(macAddress: string): string {
+        // Generate consistent device ID from MAC
+        const str = macAddress.toUpperCase().replace(/:/g, '');
+        const chars = '0123456789ABCDEF';
+        let result = '';
+        let seed = 0;
+        for (let i = 0; i < str.length; i++) {
+            seed = (seed * 31 + str.charCodeAt(i)) >>> 0;
+        }
+        for (let i = 0; i < 64; i++) {
+            seed = (seed * 1103515245 + 12345) >>> 0;
+            result += chars[seed % 16];
+        }
+        return result;
+    }
+
+    /**
+     * Checks if a URL is a full stalker portal URL (requires handshake)
+     * Full stalker portal URLs contain /stalker_portal/ in the path
+     */
+    isFullStalkerPortal(url: string): boolean {
+        return (
+            url.includes('/stalker_portal/') || url.includes('/server/load.php')
+        );
+    }
+
+    /**
+     * Gets the cached token for a playlist, or null if not cached
+     */
+    getCachedToken(playlistId: string): string | null {
+        return this.tokenCache.get(playlistId) || null;
+    }
+
+    /**
+     * Sets a token in the cache
+     */
+    setCachedToken(playlistId: string, token: string): void {
+        this.tokenCache.set(playlistId, token);
+    }
+
+    /**
+     * Clears the cached token for a playlist (e.g., on auth failure)
+     */
+    clearCachedToken(playlistId: string): void {
+        this.tokenCache.delete(playlistId);
+    }
+
+    /**
+     * Sets which playlist should receive periodic watchdog pings.
+     * This keeps some Ministra/Stalker sessions alive for live playback.
+     */
+    setActiveWatchdogPlaylist(playlist?: Playlist | null): void {
+        const nextPlaylistId = playlist?._id ?? null;
+
+        if (
+            this.activeWatchdogPlaylistId &&
+            this.activeWatchdogPlaylistId !== nextPlaylistId
+        ) {
+            this.stopWatchdog(this.activeWatchdogPlaylistId);
+        }
+
+        this.activeWatchdogPlaylistId = nextPlaylistId;
+
+        if (
+            !playlist ||
+            !playlist.isFullStalkerPortal ||
+            !playlist.portalUrl ||
+            !playlist.macAddress
+        ) {
+            if (nextPlaylistId) {
+                this.stopWatchdog(nextPlaylistId);
+            }
+            return;
+        }
+
+        this.startWatchdog(playlist);
+    }
+
+    private startWatchdog(playlist: Playlist): void {
+        const playlistId = playlist._id;
+        this.watchdogPlaylists.set(playlistId, playlist);
+
+        if (this.watchdogIntervals.has(playlistId)) {
+            return;
+        }
+
+        void this.sendWatchdogPing(playlistId, '1');
+
+        const intervalId = setInterval(() => {
+            void this.sendWatchdogPing(playlistId, '0');
+        }, STALKER_WATCHDOG_INTERVAL_MS);
+
+        this.watchdogIntervals.set(playlistId, intervalId);
+    }
+
+    private stopWatchdog(playlistId: string): void {
+        const intervalId = this.watchdogIntervals.get(playlistId);
+        if (intervalId) {
+            clearInterval(intervalId);
+            this.watchdogIntervals.delete(playlistId);
+        }
+        this.watchdogPlaylists.delete(playlistId);
+        this.watchdogInFlight.delete(playlistId);
+    }
+
+    private async sendWatchdogPing(
+        playlistId: string,
+        init: '0' | '1'
+    ): Promise<void> {
+        if (this.watchdogInFlight.has(playlistId)) {
+            return;
+        }
+
+        const playlist = this.watchdogPlaylists.get(playlistId);
+        if (
+            !playlist ||
+            !playlist.portalUrl ||
+            !playlist.macAddress ||
+            !playlist.isFullStalkerPortal
+        ) {
+            this.stopWatchdog(playlistId);
+            return;
+        }
+
+        this.watchdogInFlight.add(playlistId);
+        try {
+            await this.makeAuthenticatedRequest(
+                playlist,
+                {
+                    type: 'watchdog',
+                    action: 'get_events',
+                    event_active_id: '0',
+                    cur_play_type: '0',
+                    init,
+                    JsHttpRequest: '1-xml',
+                },
+                false
+            );
+        } catch (error) {
+            // Keep failures non-fatal; next interval can recover after token refresh.
+            console.warn('[StalkerSession] Watchdog ping failed:', error);
+        } finally {
+            this.watchdogInFlight.delete(playlistId);
+        }
+    }
+
+    /**
+     * Performs handshake to get a session token for a full stalker portal
+     * Returns both the token and the random value for use in subsequent requests
+     */
+    async performHandshake(
+        portalUrl: string,
+        macAddress: string
+    ): Promise<{ token: string; random: string }> {
+        const prehash = await generatePrehash(macAddress);
+
+        const params: Record<string, string> = {
+            type: 'stb',
+            action: 'handshake',
+            token: '',
+            prehash,
+            JsHttpRequest: '1-xml',
+        };
+
+        try {
+            const response: StalkerHandshakeResponse =
+                await this.dataService.sendIpcEvent<StalkerHandshakeResponse>(
+                    STALKER_REQUEST,
+                    {
+                    url: portalUrl,
+                    macAddress,
+                    params,
+                    }
+                );
+
+            if (response?.js?.token) {
+                return {
+                    token: response.js.token,
+                    random: response.js.random || generateRandom(),
+                };
+            }
+
+            console.error('[StalkerSession] No token in response');
+            throw new Error('Handshake failed: No token received');
+        } catch (error) {
+            console.error('[StalkerSession] Handshake error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Gets account profile information to validate the portal and check subscription
+     * Based on working implementation from stalker-to-m3u repo
+     */
+    async getProfile(
+        portalUrl: string,
+        macAddress: string,
+        token: string,
+        serialNumber: string,
+        handshakeRandom: string,
+        providedDeviceId1?: string,
+        providedDeviceId2?: string,
+        providedSignature1?: string,
+        providedSignature2?: string
+    ): Promise<StalkerProfileResponse> {
+        // Use provided device IDs or generate from MAC (64 hex chars each)
+        const deviceId1 =
+            providedDeviceId1?.trim() || this.generateDeviceId(macAddress);
+        const deviceId2 = providedDeviceId2?.trim() || deviceId1;
+
+        // Use provided signatures or empty string (some portals don't require them)
+        const signature1 = providedSignature1?.trim() || '';
+        const signature2 = providedSignature2?.trim() || '';
+
+        // Build metrics JSON matching working app
+        const metrics = {
+            mac: macAddress,
+            model: 'MAG250',
+            type: 'STB',
+            random: handshakeRandom,
+            sn: serialNumber,
+        };
+
+        // Generate prehash for get_profile (same as handshake)
+        const prehash = await generatePrehash(macAddress);
+
+        // Profile request matching working StalkerTV app
+        // auth_second_step=1, includes metrics, prehash, and device_id params
+        const params: Record<string, string> = {
+            type: 'stb',
+            action: 'get_profile',
+            hd: '1',
+            not_valid_token: '0',
+            video_out: 'hdmi',
+            auth_second_step: '1',
+            num_banks: '2',
+            metrics: JSON.stringify(metrics),
+            sn: serialNumber,
+            device_id: deviceId1,
+            device_id2: deviceId2,
+            signature: signature1,
+            ...(signature2 ? { signature2: signature2 } : {}),
+            prehash: prehash,
+            stb_type: '',
+            JsHttpRequest: '1-xml',
+        };
+
+        try {
+            const response: StalkerProfileResponse =
+                await this.dataService.sendIpcEvent<StalkerProfileResponse>(
+                    STALKER_REQUEST,
+                    {
+                    url: portalUrl,
+                    macAddress,
+                    params,
+                    token,
+                    serialNumber,
+                    }
+                );
+
+            return response;
+        } catch (error) {
+            console.error('[StalkerSession] Get profile error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Performs do_auth to authenticate the session after handshake
+     */
+    async doAuth(
+        portalUrl: string,
+        macAddress: string,
+        token: string
+    ): Promise<boolean> {
+        const params: Record<string, string> = {
+            type: 'stb',
+            action: 'do_auth',
+            login: '',
+            password: '',
+            device_id: '',
+            device_id2: '',
+            JsHttpRequest: '1-xml',
+        };
+
+        try {
+            const response =
+                await this.dataService.sendIpcEvent<StalkerAuthConfirmationResponse>(
+                    STALKER_REQUEST,
+                    {
+                    url: portalUrl,
+                    macAddress,
+                    params,
+                    token,
+                    }
+                );
+
+            // do_auth returns { js: true } on success
+            if (response?.js === true) {
+                return true;
+            }
+
+            return false;
+        } catch (error) {
+            console.error('[StalkerSession] do_auth error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Performs full authentication flow: handshake -> get_profile (NO do_auth based on working traces)
+     * Returns the token and account info if successful
+     */
+    async authenticate(
+        portalUrl: string,
+        macAddress: string,
+        serialNumber: string,
+        deviceId1?: string,
+        deviceId2?: string,
+        signature1?: string,
+        signature2?: string
+    ): Promise<{
+        token: string;
+        accountInfo?: StalkerProfileResponse['js']['account_info'];
+    }> {
+        // Step 1: Handshake to get token and random
+        const { token, random } = await this.performHandshake(
+            portalUrl,
+            macAddress
+        );
+
+        // Step 2: Get profile to activate token and get account info
+        // The random from handshake must be used in auth_second_step
+        try {
+            const profileResponse = await this.getProfile(
+                portalUrl,
+                macAddress,
+                token,
+                serialNumber,
+                random,
+                deviceId1,
+                deviceId2,
+                signature1,
+                signature2
+            );
+
+            // Check for profile-level errors
+            if (profileResponse?.js?.msg || profileResponse?.js?.block_msg) {
+                const errorMsg =
+                    profileResponse.js.msg ||
+                    profileResponse.js.block_msg ||
+                    'Unknown profile error';
+                console.error('[StalkerSession] Profile error:', errorMsg);
+                throw new Error(`Profile error: ${errorMsg}`);
+            }
+
+            return {
+                token,
+                accountInfo: profileResponse?.js?.account_info,
+            };
+        } catch (error) {
+            // Profile fetch failed - this is a real error, propagate it
+            console.error('[StalkerSession] Profile fetch failed:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Ensures a valid token exists for a playlist, performing full auth if needed
+     * IMPORTANT: Based on working traces, each session needs handshake + get_profile
+     * Returns the token to use for requests, and the serial number to store
+     */
+    async ensureToken(
+        playlist: Playlist
+    ): Promise<{ token: string | null; serialNumber?: string }> {
+        // If not a full stalker portal, no token needed
+        if (!playlist.isFullStalkerPortal) {
+            return { token: null };
+        }
+
+        // Check in-memory cache first (valid for current session only)
+        const cachedToken = this.getCachedToken(playlist._id);
+        if (cachedToken) {
+            return { token: cachedToken };
+        }
+
+        // Check if there's already a pending authentication for this playlist
+        // This prevents race conditions when multiple resources request a token simultaneously
+        const pendingPromise = this.pendingAuth.get(playlist._id);
+        if (pendingPromise) {
+            console.log(
+                '[StalkerSession] Waiting for pending authentication...'
+            );
+            return pendingPromise;
+        }
+
+        // No cached token - need to do full authentication (handshake + get_profile)
+        // Don't trust stored tokens as they may be from a different session
+        if (!playlist.portalUrl || !playlist.macAddress) {
+            console.error('[StalkerSession] Missing portal URL or MAC address');
+            throw new Error('Portal URL and MAC address are required');
+        }
+
+        // Get or generate serial number - must be consistent for the MAC
+        let serialNumber = playlist.stalkerSerialNumber;
+        if (!serialNumber) {
+            serialNumber = STALKER_SERIAL_NUMBER;
+        }
+
+        // Create the authentication promise and store it to prevent concurrent auth attempts
+        // Use async/await wrapper to properly clean up on both success and failure
+        const authPromise = (async () => {
+            try {
+                const { token } = await this.authenticate(
+                    playlist.portalUrl,
+                    playlist.macAddress,
+                    serialNumber
+                );
+                this.setCachedToken(playlist._id, token);
+                return { token, serialNumber };
+            } finally {
+                // Clean up pending promise regardless of success/failure
+                this.pendingAuth.delete(playlist._id);
+            }
+        })();
+
+        // Store the pending promise so other concurrent requests can wait on it
+        this.pendingAuth.set(playlist._id, authPromise);
+
+        return authPromise;
+    }
+
+
+
+    /**
+     * Checks if a response or error indicates an authorization failure
+     */
+    private isAuthorizationError(responseOrError: unknown): boolean {
+        if (!responseOrError) return false;
+
+        const response = responseOrError as Record<string, unknown>;
+
+        // Convert response to string for pattern matching
+        const responseStr = JSON.stringify(responseOrError).toLowerCase();
+
+        // Check for "Authorization failed. XX" pattern (like "Authorization failed. 75")
+        if (/authorization\s*failed\.?\s*\d*/i.test(responseStr)) {
+            return true;
+        }
+
+        // Check for common auth failure indicators
+        const jsData = response?.['js'] as Record<string, unknown>;
+        const errorMessage =
+            (response?.['message'] as string)?.toLowerCase?.() ||
+            jsData?.['error']?.toString?.().toLowerCase?.() ||
+            jsData?.['msg']?.toString?.().toLowerCase?.() ||
+            '';
+
+        return (
+            errorMessage.includes('authorization') ||
+            errorMessage.includes('unauthorized') ||
+            errorMessage.includes('auth failed') ||
+            errorMessage.includes('invalid token') ||
+            response?.['status'] === 401 ||
+            jsData?.['error'] === 'Authorization failed'
+        );
+    }
+
+    /**
+     * Wrapper for making stalker requests with automatic token handling and retry on auth failure
+     * This should be used by all stalker API calls to ensure proper auth handling
+     */
+    async makeAuthenticatedRequest<T>(
+        playlist: Playlist,
+        params: Record<string, string | number>,
+        retryOnAuthFailure = true
+    ): Promise<T> {
+        // Get token (will wait if auth is in progress)
+        const { token } = await this.ensureToken(playlist);
+        const serialNumber = playlist.stalkerSerialNumber;
+
+        try {
+            const response = await this.dataService.sendIpcEvent<T>(
+                STALKER_REQUEST,
+                {
+                    url: playlist.portalUrl,
+                    macAddress: playlist.macAddress,
+                    params,
+                    token,
+                    serialNumber,
+                }
+            );
+
+            // Check for authorization failure in response
+            if (this.isAuthorizationError(response)) {
+                if (retryOnAuthFailure && playlist.isFullStalkerPortal) {
+                    // Clear cached token to force re-authentication
+                    this.clearCachedToken(playlist._id);
+                    // Retry once with fresh authentication
+                    return this.makeAuthenticatedRequest<T>(
+                        playlist,
+                        params,
+                        false
+                    );
+                }
+
+                throw new Error('Authorization failed after retry');
+            }
+
+            return response;
+        } catch (error) {
+            // Check if error indicates auth failure
+            if (
+                this.isAuthorizationError(error) &&
+                retryOnAuthFailure &&
+                playlist.isFullStalkerPortal
+            ) {
+                // Clear cached token and retry with new handshake
+                this.clearCachedToken(playlist._id);
+                return this.makeAuthenticatedRequest<T>(
+                    playlist,
+                    params,
+                    false
+                );
+            }
+            throw error;
+        }
+    }
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.spec.ts b/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.spec.ts
new file mode 100644
index 0000000..08c79da
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.spec.ts
@@ -0,0 +1,227 @@
+import { VodDetailsItem } from 'shared-interfaces';
+import { StalkerFavoriteItem } from './models';
+import {
+    buildStalkerFavoritePayload,
+    createStalkerInlineDetailState,
+    createStalkerDetailViewState,
+    normalizeStalkerFavoriteItem,
+    toggleStalkerVodFavorite,
+} from './stalker-vod.utils';
+
+describe('stalker-vod.utils regressions', () => {
+    it('routes embedded series[] items to series view state', () => {
+        const state = createStalkerDetailViewState(
+            {
+                id: '101',
+                cmd: '/media/file_101.mpg',
+                series: [1, 2, 3],
+                info: {
+                    name: 'Series in VOD',
+                    movie_image: '',
+                    description: '',
+                    actors: '',
+                    director: '',
+                    releasedate: '',
+                    genre: '',
+                    rating_imdb: '',
+                    rating_kinopoisk: '',
+                },
+            },
+            'playlist-1'
+        );
+
+        expect(state.itemDetails?.series?.length).toBe(3);
+        expect(state.vodDetailsItem).toBeNull();
+    });
+
+    it('routes is_series=1 items to series view state (lazy season flow)', () => {
+        const state = createStalkerDetailViewState(
+            {
+                id: '1507',
+                cmd: '/media/file_1507.mpg',
+                is_series: true,
+                info: {
+                    name: 'Flagged Series',
+                    movie_image: '',
+                    description: '',
+                    actors: '',
+                    director: '',
+                    releasedate: '',
+                    genre: '',
+                    rating_imdb: '',
+                    rating_kinopoisk: '',
+                },
+            },
+            'playlist-1'
+        );
+
+        expect(state.itemDetails?.is_series).toBe(true);
+        expect(state.vodDetailsItem).toBeNull();
+    });
+
+    it('builds a playable VOD details item for regular movies', () => {
+        const state = createStalkerDetailViewState(
+            {
+                id: '42',
+                cmd: '/media/file_42.mpg',
+                info: {
+                    name: 'Regular Movie',
+                    movie_image: 'poster.jpg',
+                    description: '',
+                    actors: '',
+                    director: '',
+                    releasedate: '',
+                    genre: '',
+                    rating_imdb: '',
+                    rating_kinopoisk: '',
+                },
+            },
+            'playlist-1'
+        );
+
+        expect(state.itemDetails?.id).toBe('42');
+        expect(state.vodDetailsItem).toEqual(
+            expect.objectContaining({
+                type: 'stalker',
+                playlistId: 'playlist-1',
+                cmd: '/media/file_42.mpg',
+            })
+        );
+        expect(state.vodDetailsItem?.data.id).toBe('42');
+    });
+
+    it('favorite toggle uses completion callback path without delayed state update', () => {
+        const addToFavorites = jest.fn(
+            (_item: Record<string, unknown>, onDone?: () => void) => {
+                onDone?.();
+            }
+        );
+        const removeFromFavorites = jest.fn(
+            (_id: string, onDone?: () => void) => {
+                onDone?.();
+            }
+        );
+        const onComplete = jest.fn();
+
+        const item = {
+            type: 'stalker',
+            data: {
+                id: '42',
+                cmd: '/media/file_42.mpg',
+                info: {
+                    name: 'Movie',
+                    movie_image: '',
+                    description: '',
+                    actors: '',
+                    director: '',
+                    releasedate: '',
+                    genre: '',
+                    rating_imdb: '',
+                    rating_kinopoisk: '',
+                },
+            },
+            playlistId: 'playlist-1',
+            vodId: 42,
+            cmd: '/media/file_42.mpg',
+        } as unknown as VodDetailsItem;
+
+        toggleStalkerVodFavorite(
+            { item, isFavorite: true },
+            { addToFavorites, removeFromFavorites, onComplete }
+        );
+        expect(addToFavorites).toHaveBeenCalledTimes(1);
+        expect(removeFromFavorites).not.toHaveBeenCalled();
+        expect(onComplete).toHaveBeenCalledTimes(1);
+
+        onComplete.mockClear();
+        toggleStalkerVodFavorite(
+            { item, isFavorite: false },
+            { addToFavorites, removeFromFavorites, onComplete }
+        );
+        expect(removeFromFavorites).toHaveBeenCalledTimes(1);
+        expect(onComplete).toHaveBeenCalledTimes(1);
+    });
+
+    it('preserves the concrete category id in favorite payloads', () => {
+        expect(
+            buildStalkerFavoritePayload({
+                id: '42',
+                cmd: '/media/file_42.mpg',
+                info: {
+                    name: 'Movie',
+                    movie_image: '',
+                    description: '',
+                    actors: '',
+                    director: '',
+                    releasedate: '',
+                    genre: '',
+                    rating_imdb: '',
+                    rating_kinopoisk: '',
+                },
+                category_id: '17',
+            } as unknown as Parameters<typeof buildStalkerFavoritePayload>[0])
+        ).toEqual(
+            expect.objectContaining({
+                id: '42',
+                category_id: '17',
+            })
+        );
+    });
+
+    it('normalizes nested favorite details for the shared inline detail shell', () => {
+        const detailState = createStalkerInlineDetailState(
+            normalizeStalkerFavoriteItem({
+                id: '7',
+                category_id: 'vod',
+                name: 'Nested Movie',
+                details: {
+                    id: '7',
+                    cmd: '/media/file_7.mpg',
+                    series: [11, 12],
+                    info: {
+                        name: 'Nested Movie',
+                        movie_image: '',
+                        description: '',
+                        actors: '',
+                        director: '',
+                        releasedate: '',
+                        genre: '',
+                        rating_imdb: '',
+                        rating_kinopoisk: '',
+                    },
+                },
+            } as StalkerFavoriteItem),
+            null
+        );
+
+        expect(detailState.categoryId).toBe('vod');
+        expect(detailState.seriesItem?.series).toEqual([11, 12]);
+        expect(detailState.isSeries).toBe(false);
+        expect(detailState.vodDetailsItem).toBeNull();
+    });
+
+    it('allows search to force series mode when results omit category metadata', () => {
+        const detailState = createStalkerInlineDetailState(
+            {
+                id: '9',
+                cmd: '/media/file_9.mpg',
+                info: {
+                    name: 'Series Result',
+                    movie_image: '',
+                    description: '',
+                    actors: '',
+                    director: '',
+                    releasedate: '',
+                    genre: '',
+                    rating_imdb: '',
+                    rating_kinopoisk: '',
+                },
+            },
+            null,
+            'series'
+        );
+
+        expect(detailState.categoryId).toBe('series');
+        expect(detailState.seriesItem?.id).toBe('9');
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.ts b/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.ts
new file mode 100644
index 0000000..83e879f
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker-vod.utils.ts
@@ -0,0 +1,378 @@
+import {
+    signal,
+    WritableSignal,
+} from '@angular/core';
+import { rxResource } from '@angular/core/rxjs-interop';
+import { Observable } from 'rxjs';
+import { PlaylistsService } from 'services';
+import {
+    createStalkerVodItem,
+    StalkerVodDetails,
+    StalkerVodInfo,
+    VodDetailsItem,
+} from 'shared-interfaces';
+import {
+    StalkerFavoriteItem,
+    StalkerSelectedVodItem,
+    StalkerSeriesFlag,
+    StalkerVodSource,
+} from './models/stalker-favorite-item.interface';
+
+export interface StalkerDetailViewState {
+    itemDetails: StalkerSelectedVodItem | null;
+    vodDetailsItem: VodDetailsItem | null;
+}
+
+export interface StalkerInlineDetailState {
+    categoryId: 'vod' | 'series' | null;
+    seriesItem: StalkerSelectedVodItem | null;
+    isSeries: boolean;
+    vodDetailsItem: VodDetailsItem | null;
+}
+
+export interface StalkerFavoriteToggleEvent {
+    item: VodDetailsItem;
+    isFavorite: boolean;
+}
+
+export interface StalkerFavoriteToggleOptions {
+    addToFavorites: (
+        item: Record<string, unknown>,
+        onComplete?: () => void
+    ) => void;
+    removeFromFavorites: (
+        favoriteId: string,
+        onComplete?: () => void
+    ) => void;
+    onComplete?: () => void;
+}
+
+export function isStalkerSeriesFlag(value: unknown): boolean {
+    return value === true || value === 1 || value === '1';
+}
+
+export function normalizeStalkerSeriesFlag(
+    value: unknown
+): StalkerSeriesFlag | undefined {
+    if (value === true || value === 1 || value === '1') {
+        return true;
+    }
+    return undefined;
+}
+
+export function isStalkerSeriesItem(item: {
+    is_series?: unknown;
+    series?: unknown;
+}): boolean {
+    return (
+        isStalkerSeriesFlag(item?.is_series) ||
+        (Array.isArray(item?.series) && item.series.length > 0)
+    );
+}
+
+export function buildStalkerFavoritePayload(
+    data: StalkerVodDetails
+): Record<string, unknown> {
+    const categoryId = String(
+        (data as StalkerVodDetails & { category_id?: string | number })
+            .category_id ?? 'vod'
+    ).trim();
+
+    return {
+        ...data,
+        category_id: categoryId || 'vod',
+        title: data.info?.name,
+        cover: data.info?.movie_image,
+        added_at: new Date().toISOString(),
+    };
+}
+
+export function matchesFavoriteById(
+    favorite: Partial<StalkerFavoriteItem>,
+    itemId: string | number
+): boolean {
+    const expectedId = normalizeStalkerEntityId(itemId);
+    return (
+        normalizeStalkerEntityId(favorite?.id) === expectedId ||
+        normalizeStalkerEntityId(favorite?.movie_id) === expectedId ||
+        normalizeStalkerEntityId(favorite?.stream_id) === expectedId ||
+        normalizeStalkerEntityId(favorite?.series_id) === expectedId
+    );
+}
+
+export function normalizeStalkerEntityId(value: unknown): string {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return String(value).trim();
+}
+
+export function normalizeStalkerEntityIdAsNumber(
+    value: unknown
+): number | null {
+    const normalized = normalizeStalkerEntityId(value);
+    if (!normalized) {
+        return null;
+    }
+    const parsed = Number(normalized);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+function toStringOrFallback(value: unknown, fallback = ''): string {
+    if (typeof value === 'string') return value;
+    if (value === null || value === undefined) return fallback;
+    return String(value);
+}
+
+function toOptionalString(value: unknown): string | undefined {
+    if (value === null || value === undefined || value === '') {
+        return undefined;
+    }
+    return String(value);
+}
+
+export function createStalkerInfo(item: StalkerVodSource): StalkerVodInfo {
+    const info = item.info ?? {};
+
+    return {
+        name: toStringOrFallback(
+            info.name ?? info.o_name ?? item.o_name ?? item.name ?? item.title,
+            'Unknown'
+        ),
+        o_name: toOptionalString(info.o_name ?? item.o_name),
+        movie_image: toStringOrFallback(
+            info.movie_image ?? item.cover ?? item.screenshot_uri ?? item.logo
+        ),
+        description: toStringOrFallback(info.description ?? item.description),
+        actors: toStringOrFallback(info.actors ?? item.actors),
+        director: toStringOrFallback(info.director ?? item.director),
+        releasedate: toStringOrFallback(
+            info.releasedate ?? item.releasedate ?? item.year
+        ),
+        genre: toStringOrFallback(info.genre ?? item.genre ?? item.genres_str),
+        rating_imdb: toStringOrFallback(info.rating_imdb ?? item.rating_imdb),
+        rating_kinopoisk: toStringOrFallback(
+            info.rating_kinopoisk ?? item.rating_kinopoisk
+        ),
+    };
+}
+
+export function buildStalkerSelectedVodItem(
+    item: StalkerVodSource,
+    forceSeries = false
+): StalkerSelectedVodItem {
+    return {
+        id: toStringOrFallback(item.id ?? item.stream_id),
+        cmd: toStringOrFallback(item.cmd),
+        series: item.series,
+        has_files: item.has_files,
+        is_series:
+            forceSeries || isStalkerSeriesFlag(item?.is_series)
+                ? true
+                : undefined,
+        video_id: item.video_id,
+        category_id:
+            typeof item.category_id === 'string'
+                ? item.category_id
+                : undefined,
+        info: createStalkerInfo(item),
+    };
+}
+
+export interface NormalizedStalkerFavoriteItem extends StalkerFavoriteItem {
+    details: StalkerSelectedVodItem;
+}
+
+export function normalizeStalkerFavoriteItem(
+    item: StalkerFavoriteItem
+): NormalizedStalkerFavoriteItem {
+    if (item.details && item.details.info) {
+        return item as NormalizedStalkerFavoriteItem;
+    }
+
+    const source = (item.details || item) as StalkerVodSource;
+    const info = createStalkerInfo({
+        ...item,
+        ...source,
+    });
+    const normalizedIsSeries = normalizeStalkerSeriesFlag(
+        (item as StalkerVodSource).is_series ?? source.is_series
+    );
+
+    return {
+        ...item,
+        details: {
+            ...source,
+            info,
+            cmd: toStringOrFallback(
+                (item as StalkerVodSource).cmd ?? source.cmd
+            ),
+            id: toStringOrFallback(item.stream_id ?? item.id ?? source.id),
+            series: (item as StalkerVodSource).series ?? source.series,
+            is_series: normalizedIsSeries ? true : undefined,
+            video_id:
+                (item as StalkerVodSource).video_id ?? source.video_id,
+            category_id:
+                typeof (item as StalkerVodSource).category_id === 'string'
+                    ? (item as StalkerVodSource).category_id
+                    : typeof source.category_id === 'string'
+                      ? source.category_id
+                      : undefined,
+        },
+    };
+}
+
+export function normalizeStalkerVodDetailsItem(
+    item: StalkerVodSource
+): StalkerSelectedVodItem {
+    return {
+        ...buildStalkerSelectedVodItem(item),
+        info: createStalkerInfo(item),
+        is_series: normalizeStalkerSeriesFlag(item?.is_series)
+            ? true
+            : undefined,
+    };
+}
+
+export function createStalkerInlineDetailState(
+    itemDetails: StalkerSelectedVodItem | NormalizedStalkerFavoriteItem | null,
+    vodDetailsItem: VodDetailsItem | null,
+    categoryOverride?: 'vod' | 'series' | null
+): StalkerInlineDetailState {
+    if (!itemDetails) {
+        return {
+            categoryId: null,
+            seriesItem: null,
+            isSeries: false,
+            vodDetailsItem: null,
+        };
+    }
+
+    const seriesItem =
+        'details' in itemDetails ? itemDetails.details : itemDetails;
+    const rawCategoryId =
+        categoryOverride ??
+        (typeof itemDetails.category_id === 'string'
+            ? itemDetails.category_id
+            : typeof seriesItem.category_id === 'string'
+              ? seriesItem.category_id
+              : undefined);
+    const categoryId =
+        rawCategoryId === 'vod' || rawCategoryId === 'movie'
+            ? 'vod'
+            : rawCategoryId === 'series'
+              ? 'series'
+              : null;
+
+    return {
+        categoryId,
+        seriesItem,
+        isSeries: isStalkerSeriesFlag(seriesItem?.is_series),
+        vodDetailsItem,
+    };
+}
+
+export function createStalkerDetailViewState(
+    normalizedItem: StalkerSelectedVodItem,
+    playlistId: string
+): StalkerDetailViewState {
+    if (isStalkerSeriesItem(normalizedItem)) {
+        return {
+            itemDetails: normalizedItem,
+            vodDetailsItem: null,
+        };
+    }
+
+    return {
+        itemDetails: normalizedItem,
+        vodDetailsItem: createStalkerVodItem(
+            normalizedItem as StalkerVodDetails,
+            playlistId
+        ),
+    };
+}
+
+export function clearStalkerDetailViewState(): StalkerDetailViewState {
+    return {
+        itemDetails: null,
+        vodDetailsItem: null,
+    };
+}
+
+export function createRefreshTrigger(): {
+    refreshVersion: WritableSignal<number>;
+    refresh: () => void;
+} {
+    const refreshVersion = signal<number>(Date.now());
+    return {
+        refreshVersion,
+        refresh: () => refreshVersion.set(Date.now()),
+    };
+}
+
+export function createPortalFavoritesResource(
+    playlistService: PlaylistsService,
+    getPortalId: () => string | undefined,
+    getRefreshVersion: () => number
+) {
+    return createPortalCollectionResource(
+        playlistService,
+        getPortalId,
+        getRefreshVersion,
+        (service, portalId) => service.getPortalFavorites(portalId)
+    );
+}
+
+export function createPortalCollectionResource<T>(
+    playlistService: PlaylistsService,
+    getPortalId: () => string | undefined,
+    getRefreshVersion: () => number,
+    streamFactory: (
+        playlistService: PlaylistsService,
+        portalId: string
+    ) => Observable<T[]>
+) {
+    return rxResource({
+        params: () => {
+            const portalId = getPortalId();
+            if (!portalId) return undefined;
+            return {
+                portalId,
+                refreshVersion: getRefreshVersion(),
+            };
+        },
+        stream: ({ params }) =>
+            streamFactory(playlistService, params.portalId),
+    });
+}
+
+export function isSelectedStalkerVodFavorite(
+    item: VodDetailsItem | null,
+    favorites: ReadonlyArray<StalkerFavoriteItem> | undefined
+): boolean {
+    if (!item || item.type !== 'stalker') {
+        return false;
+    }
+
+    return (favorites ?? []).some((favorite) =>
+        matchesFavoriteById(favorite, item.data.id)
+    );
+}
+
+export function toggleStalkerVodFavorite(
+    event: StalkerFavoriteToggleEvent,
+    options: StalkerFavoriteToggleOptions
+): void {
+    if (event.item.type !== 'stalker') {
+        return;
+    }
+
+    if (event.isFavorite) {
+        options.addToFavorites(
+            buildStalkerFavoritePayload(event.item.data),
+            options.onComplete
+        );
+    } else {
+        options.removeFromFavorites(event.item.data.id, options.onComplete);
+    }
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stalker.store.compat.spec.ts b/libs/portal/stalker/data-access/src/lib/stalker.store.compat.spec.ts
new file mode 100644
index 0000000..3d3db97
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker.store.compat.spec.ts
@@ -0,0 +1,167 @@
+import { TestBed } from '@angular/core/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { PORTAL_PLAYER } from '@iptvnator/portal/shared/util';
+import { DataService, PlaylistsService } from 'services';
+import { StalkerSessionService } from './stalker-session.service';
+import { StalkerStore } from './stalker.store';
+
+describe('StalkerStore API compatibility smoke', () => {
+    let store: StalkerStore;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                StalkerStore,
+                {
+                    provide: DataService,
+                    useValue: {
+                        isElectron: false,
+                        sendIpcEvent: jest.fn(),
+                    },
+                },
+                {
+                    provide: StalkerSessionService,
+                    useValue: {
+                        ensureToken: jest.fn(),
+                        makeAuthenticatedRequest: jest.fn(),
+                    },
+                },
+                {
+                    provide: PORTAL_PLAYER,
+                    useValue: {
+                        openPlayer: jest.fn(),
+                        openResolvedPlayback: jest.fn(),
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {
+                        addPortalFavorite: jest.fn(() => of(undefined)),
+                        removeFromPortalFavorites: jest.fn(() => of(undefined)),
+                        addPortalRecentlyViewed: jest.fn(() => of(undefined)),
+                        removeFromPortalRecentlyViewed: jest.fn(() =>
+                            of(undefined)
+                        ),
+                    },
+                },
+                {
+                    provide: Store,
+                    useValue: {
+                        dispatch: jest.fn(),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((key: string) => key),
+                    },
+                },
+            ],
+        });
+
+        store = TestBed.inject(StalkerStore);
+    });
+
+    it('exposes compatibility state signals', () => {
+        const expectedSignals = [
+            'selectedContentType',
+            'selectedCategoryId',
+            'selectedVodId',
+            'selectedSerialId',
+            'selectedItvId',
+            'limit',
+            'page',
+            'searchPhrase',
+            'currentPlaylist',
+            'totalCount',
+            'selectedItem',
+            'vodCategories',
+            'seriesCategories',
+            'itvCategories',
+            'hasMoreChannels',
+            'itvChannels',
+            'vodSeriesSeasons',
+            'vodSeriesEpisodes',
+            'selectedVodSeriesSeasonId',
+        ];
+
+        for (const signalName of expectedSignals) {
+            expect(typeof store[signalName]).toBe('function');
+        }
+    });
+
+    it('exposes compatibility computed selectors', () => {
+        const expectedComputed = [
+            'getTotalPages',
+            'getPaginatedContent',
+            'isPaginatedContentLoading',
+            'isPaginatedContentFailed',
+            'getSerialSeasonsResource',
+            'isSerialSeasonsLoading',
+            'getVodSeriesSeasonsResource',
+            'isVodSeriesSeasonsLoading',
+            'getCategoryResource',
+            'isCategoryResourceLoading',
+            'isCategoryResourceFailed',
+            'getSelectedCategoryName',
+        ];
+
+        for (const computedName of expectedComputed) {
+            expect(typeof store[computedName]).toBe('function');
+        }
+    });
+
+    it('exposes compatibility methods and internal resources', () => {
+        const expectedMethods = [
+            'setSelectedContentType',
+            'setSelectedCategory',
+            'setSelectedSerialId',
+            'setSelectedVodId',
+            'setSelectedItvId',
+            'setLimit',
+            'setPage',
+            'setCurrentPlaylist',
+            'setSelectedItem',
+            'clearSelectedItem',
+            'setCategories',
+            'resetCategories',
+            'setItvChannels',
+            'setSearchPhrase',
+            'fetchVodSeriesEpisodes',
+            'getSelectedCategory',
+            'fetchLinkToPlay',
+            'getExpireDate',
+            'addToFavorites',
+            'removeFromFavorites',
+            'fetchMovieFileId',
+            'resolveVodPlayback',
+            'createLinkToPlayVod',
+            'addToRecentlyViewed',
+            'removeFromRecentlyViewed',
+            'fetchChannelEpg',
+            'makeStalkerRequest',
+        ];
+
+        for (const methodName of expectedMethods) {
+            expect(typeof store[methodName]).toBe('function');
+        }
+
+        expect(store.getContentResource).toBeDefined();
+        expect(typeof store.getContentResource.value).toBe('function');
+
+        expect(store.serialSeasonsResource).toBeDefined();
+        expect(typeof store.serialSeasonsResource.value).toBe('function');
+
+        expect(store.vodSeriesSeasonsResource).toBeDefined();
+        expect(typeof store.vodSeriesSeasonsResource.value).toBe('function');
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stalker.store.ts b/libs/portal/stalker/data-access/src/lib/stalker.store.ts
new file mode 100644
index 0000000..19bb69a
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stalker.store.ts
@@ -0,0 +1,28 @@
+import { signalStore } from '@ngrx/signals';
+import {
+    withStalkerContent,
+    withStalkerEpg,
+    withStalkerFavorites,
+    withStalkerPlayer,
+    withStalkerPortal,
+    withStalkerRecent,
+    withStalkerSelection,
+    withStalkerSeries,
+} from './stores/features';
+
+/**
+ * StalkerStore facade composed from feature slices.
+ * Public API compatibility is preserved while implementation is split by concern.
+ */
+export const StalkerStore = signalStore(
+    { providedIn: 'root' },
+    withStalkerPortal(),
+    withStalkerSelection(),
+    withStalkerContent(),
+    withStalkerSeries(),
+    withStalkerPlayer(),
+    withStalkerFavorites(),
+    withStalkerRecent(),
+    withStalkerEpg()
+);
+
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/index.ts b/libs/portal/stalker/data-access/src/lib/stores/features/index.ts
new file mode 100644
index 0000000..264f029
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/index.ts
@@ -0,0 +1,9 @@
+export * from './with-stalker-content.feature';
+export * from './with-stalker-epg.feature';
+export * from './with-stalker-favorites.feature';
+export * from './with-stalker-player.feature';
+export * from './with-stalker-portal.feature';
+export * from './with-stalker-recent.feature';
+export * from './with-stalker-selection.feature';
+export * from './with-stalker-series.feature';
+
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-content.feature.spec.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-content.feature.spec.ts
new file mode 100644
index 0000000..1525032
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-content.feature.spec.ts
@@ -0,0 +1,283 @@
+import { TestBed } from '@angular/core/testing';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { TranslateService } from '@ngx-translate/core';
+import { DataService } from 'services';
+import { PlaylistMeta, StalkerPortalActions } from 'shared-interfaces';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { withStalkerContent } from './with-stalker-content.feature';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+const PLAYLIST = {
+    _id: 'playlist-1',
+    title: 'Demo Stalker',
+    count: 0,
+    autoRefresh: false,
+    importDate: '2026-04-14T00:00:00.000Z',
+    portalUrl: 'http://demo.example/stalker_portal/server/load.php',
+    macAddress: '00:1A:79:00:00:01',
+    isFullStalkerPortal: false,
+} as PlaylistMeta;
+
+const TestContentStore = signalStore(
+    withState({
+        currentPlaylist: undefined as PlaylistMeta | undefined,
+        selectedContentType: 'vod' as 'vod' | 'series' | 'itv',
+        selectedCategoryId: undefined as string | null | undefined,
+        searchPhrase: '',
+        page: 0,
+        limit: 14,
+    }),
+    withMethods((store) => ({
+        setCurrentPlaylist(playlist: PlaylistMeta | undefined) {
+            patchState(store, { currentPlaylist: playlist });
+        },
+        setSelectedContentType(type: 'vod' | 'series' | 'itv') {
+            patchState(store, { selectedContentType: type });
+        },
+        setSelectedCategory(id: string | null | undefined) {
+            patchState(store, { selectedCategoryId: id });
+        },
+        setPage(page: number) {
+            patchState(store, { page });
+        },
+    })),
+    withStalkerContent()
+);
+
+function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return { promise, resolve, reject };
+}
+
+function createContentResponse(title: string) {
+    return {
+        js: {
+            data: [
+                {
+                    id: title,
+                    name: title,
+                    category_id: '5',
+                },
+            ],
+            total_items: 28,
+        },
+    };
+}
+
+async function flushResources(): Promise<void> {
+    TestBed.flushEffects();
+    await Promise.resolve();
+    await Promise.resolve();
+    TestBed.flushEffects();
+    await Promise.resolve();
+}
+
+async function waitForCondition(
+    predicate: () => boolean,
+    attempts = 20
+): Promise<void> {
+    for (let index = 0; index < attempts; index += 1) {
+        if (predicate()) {
+            return;
+        }
+
+        await flushResources();
+    }
+
+    throw new Error('Timed out waiting for resource activity');
+}
+
+describe('withStalkerContent failure states', () => {
+    let store: InstanceType<typeof TestContentStore>;
+    let dataService: {
+        sendIpcEvent: jest.Mock<Promise<unknown>, unknown[]>;
+    };
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestContentStore,
+                { provide: DataService, useValue: dataService },
+                {
+                    provide: StalkerSessionService,
+                    useValue: {
+                        makeAuthenticatedRequest: jest.fn(),
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((key: string) => key),
+                    },
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestContentStore);
+    });
+
+    it('normalizes category failures into empty arrays and explicit error state', async () => {
+        dataService.sendIpcEvent.mockRejectedValue(
+            new Error('get_genres failed')
+        );
+
+        store.setSelectedContentType('itv');
+        store.setCurrentPlaylist(PLAYLIST);
+        void store.isCategoryResourceLoading();
+
+        await waitForCondition(
+            () => dataService.sendIpcEvent.mock.calls.length > 0
+        );
+        await flushResources();
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                url: PLAYLIST.portalUrl,
+                macAddress: PLAYLIST.macAddress,
+                params: expect.objectContaining({
+                    action: StalkerPortalActions.GetGenres,
+                    type: 'itv',
+                }),
+            })
+        );
+        expect(store.getCategoryResource()).toEqual([]);
+        expect(store.itvCategories()).toEqual([]);
+        expect(store.isCategoryResourceFailed()).toBeInstanceOf(Error);
+        expect((store.isCategoryResourceFailed() as Error).message).toBe(
+            'get_genres failed'
+        );
+    });
+
+    it('derives the selected category from the normalized category collections', () => {
+        store.setSelectedContentType('series');
+        store.setCategories('series', [
+            {
+                category_id: '7',
+                category_name: 'Drama',
+            },
+        ]);
+        store.setSelectedCategory('7');
+
+        expect(store.getSelectedCategory()).toEqual({
+            category_id: '7',
+            category_name: 'Drama',
+        });
+    });
+
+    it('normalizes content failures into empty collections instead of undefined state', async () => {
+        dataService.sendIpcEvent.mockRejectedValue(
+            new Error('get_ordered_list failed')
+        );
+
+        store.setSelectedContentType('itv');
+        store.setCategories('itv', [
+            {
+                category_id: '5',
+                category_name: 'News',
+            },
+        ]);
+        store.setSelectedCategory('5');
+        store.setCurrentPlaylist(PLAYLIST);
+        void store.isPaginatedContentLoading();
+
+        await waitForCondition(
+            () => dataService.sendIpcEvent.mock.calls.length > 0
+        );
+        await flushResources();
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    action: StalkerPortalActions.GetOrderedList,
+                    type: 'itv',
+                    category: '5',
+                    genre: '5',
+                }),
+            })
+        );
+        expect(store.getPaginatedContent()).toEqual([]);
+        expect(store.itvChannels()).toEqual([]);
+        expect(store.hasMoreChannels()).toBe(false);
+        expect(store.isPaginatedContentFailed()).toBeInstanceOf(Error);
+        expect((store.isPaginatedContentFailed() as Error).message).toBe(
+            'get_ordered_list failed'
+        );
+    });
+
+    it('ignores stale content responses after the selected page changes', async () => {
+        const pendingByPage = new Map<
+            number,
+            ReturnType<typeof createDeferred<unknown>>[]
+        >();
+
+        dataService.sendIpcEvent.mockImplementation(
+            (_event: unknown, payload: { params?: { p?: number } }) => {
+                const page = Number(payload.params?.p);
+                const deferred = createDeferred<unknown>();
+                const pending = pendingByPage.get(page) ?? [];
+                pending.push(deferred);
+                pendingByPage.set(page, pending);
+                return deferred.promise;
+            }
+        );
+
+        store.setSelectedContentType('vod');
+        store.setCategories('vod', [
+            {
+                category_id: '5',
+                category_name: 'Movies',
+            },
+        ]);
+        store.setSelectedCategory('5');
+        store.setCurrentPlaylist(PLAYLIST);
+        void store.isPaginatedContentLoading();
+
+        await waitForCondition(() => pendingByPage.get(1)?.length === 1);
+        pendingByPage
+            .get(1)?.[0]
+            .resolve(createContentResponse('Page 1 initial'));
+        await waitForCondition(
+            () => store.getPaginatedContent()[0]?.name === 'Page 1 initial'
+        );
+
+        store.setPage(1);
+        await waitForCondition(() => pendingByPage.get(2)?.length === 1);
+
+        store.setPage(0);
+        await waitForCondition(() => pendingByPage.get(1)?.length === 2);
+        pendingByPage
+            .get(1)?.[1]
+            .resolve(createContentResponse('Page 1 restored'));
+        await waitForCondition(
+            () => store.getPaginatedContent()[0]?.name === 'Page 1 restored'
+        );
+
+        pendingByPage
+            .get(2)?.[0]
+            .resolve(createContentResponse('Page 2 stale'));
+        await flushResources();
+
+        expect(store.page()).toBe(0);
+        expect(store.getPaginatedContent()[0]?.name).toBe('Page 1 restored');
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-content.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-content.feature.ts
new file mode 100644
index 0000000..a1ea2a0
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-content.feature.ts
@@ -0,0 +1,558 @@
+import { computed, inject, resource } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withComputed,
+    withMethods,
+    withProps,
+    withState,
+} from '@ngrx/signals';
+import { TranslateService } from '@ngx-translate/core';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import { DataService } from 'services';
+import {
+    StalkerCategoryItem,
+    StalkerContentItem,
+    StalkerItvChannel,
+    StalkerVodSource,
+} from '../../models';
+import { StalkerContentTypes } from '../../stalker-content-types';
+import { StalkerSessionService } from '../../stalker-session.service';
+import {
+    ResourceState,
+    StalkerCategorySliceContract,
+    StalkerContentFeatureStoreContract,
+    StalkerContentType,
+} from '../stalker-store.contracts';
+import {
+    executeStalkerRequest,
+    toStalkerContentItem,
+    toStalkerItvChannel,
+} from '../utils';
+
+/**
+ * Content/categories/channels feature state.
+ */
+export interface StalkerContentState {
+    totalCount: number;
+    vodCategories: StalkerCategoryItem[];
+    seriesCategories: StalkerCategoryItem[];
+    itvCategories: StalkerCategoryItem[];
+    hasMoreChannels: boolean;
+    itvChannels: StalkerItvChannel[];
+    paginatedContent: StalkerContentItem[];
+    categoryError: unknown;
+    contentError: unknown;
+}
+
+const initialContentState: StalkerContentState = {
+    totalCount: 0,
+    vodCategories: [],
+    seriesCategories: [],
+    itvCategories: [],
+    hasMoreChannels: false,
+    itvChannels: [],
+    paginatedContent: [],
+    categoryError: null,
+    contentError: null,
+};
+
+interface StalkerCategoryResponseItem {
+    id?: string | number;
+    title?: string;
+}
+
+interface StalkerCategoryResponse {
+    js?: StalkerCategoryResponseItem[];
+}
+
+interface StalkerOrderedListResponse {
+    js?: {
+        data?: StalkerVodSource[];
+        total_items?: number;
+    };
+}
+
+interface StalkerContentResourceStoreContract extends StalkerContentFeatureStoreContract {
+    categoryResource: ResourceState<StalkerCategoryItem[]>;
+    getContentResource: ResourceState<StalkerContentItem[]>;
+}
+
+function getCategoriesByType(
+    store: StalkerCategorySliceContract,
+    contentType: StalkerContentType
+): StalkerCategoryItem[] {
+    switch (contentType) {
+        case 'vod':
+            return store.vodCategories();
+        case 'series':
+            return store.seriesCategories();
+        case 'itv':
+            return store.itvCategories();
+    }
+}
+
+function buildCategoryPatch(
+    contentType: StalkerContentType,
+    categories: StalkerCategoryItem[]
+): Partial<StalkerContentState> {
+    switch (contentType) {
+        case 'vod':
+            return { vodCategories: categories };
+        case 'series':
+            return { seriesCategories: categories };
+        case 'itv':
+            return { itvCategories: categories };
+    }
+}
+
+function prependAllCategory(
+    categories: StalkerCategoryItem[],
+    translateService: TranslateService
+): StalkerCategoryItem[] {
+    const allIndex = categories.findIndex(
+        (category) => category.category_name.trim().toLowerCase() === 'all'
+    );
+
+    if (allIndex > 0) {
+        categories.unshift(categories.splice(allIndex, 1)[0]);
+        return categories;
+    }
+
+    if (
+        allIndex === -1 &&
+        categories.length > 0 &&
+        !categories.some((category) => String(category.category_id) === '*')
+    ) {
+        categories.unshift({
+            category_name: translateService.instant('PORTALS.ALL_CATEGORIES'),
+            category_id: '*',
+        });
+    }
+
+    return categories;
+}
+
+function buildEmptyContentPatch(
+    contentType: StalkerContentType,
+    error: unknown
+): Partial<StalkerContentState> {
+    const patch: Partial<StalkerContentState> = {
+        totalCount: 0,
+        paginatedContent: [],
+        contentError: error,
+    };
+
+    if (contentType === 'itv') {
+        patch.hasMoreChannels = false;
+        patch.itvChannels = [];
+    }
+
+    return patch;
+}
+
+export function withStalkerContent() {
+    const logger = createLogger('withStalkerContent');
+
+    return signalStoreFeature(
+        withState<StalkerContentState>(initialContentState),
+        withProps(
+            (
+                store,
+                dataService = inject(DataService),
+                stalkerSession = inject(StalkerSessionService),
+                translateService = inject(TranslateService)
+            ) => {
+                const storeContext = store as typeof store &
+                    StalkerContentResourceStoreContract;
+                const requestDeps = {
+                    dataService,
+                    stalkerSession,
+                };
+
+                return {
+                    categoryResource: resource({
+                        params: () => ({
+                            contentType: storeContext.selectedContentType(),
+                            currentPlaylist: storeContext.currentPlaylist(),
+                        }),
+                        loader: async ({
+                            params,
+                        }): Promise<StalkerCategoryItem[]> => {
+                            if (!params.currentPlaylist) {
+                                patchState(store, { categoryError: null });
+                                return [];
+                            }
+
+                            const cachedCategories = getCategoriesByType(
+                                store,
+                                params.contentType
+                            );
+                            if (cachedCategories.length > 0) {
+                                patchState(store, { categoryError: null });
+                                return cachedCategories;
+                            }
+
+                            try {
+                                const response =
+                                    await executeStalkerRequest<StalkerCategoryResponse>(
+                                        requestDeps,
+                                        params.currentPlaylist,
+                                        {
+                                            action: StalkerContentTypes[
+                                                params.contentType
+                                            ].getCategoryAction,
+                                            type: params.contentType,
+                                        }
+                                    );
+
+                                if (!Array.isArray(response?.js)) {
+                                    const invalidResponseError = new Error(
+                                        'Invalid categories response'
+                                    );
+                                    logger.warn(
+                                        'Invalid categories response',
+                                        response
+                                    );
+                                    patchState(store, {
+                                        ...buildCategoryPatch(
+                                            params.contentType,
+                                            []
+                                        ),
+                                        categoryError: invalidResponseError,
+                                    });
+                                    return [];
+                                }
+
+                                const categories = prependAllCategory(
+                                    response.js
+                                        .map(
+                                            (item): StalkerCategoryItem => ({
+                                                category_name: item.title ?? '',
+                                                category_id: String(item.id),
+                                            })
+                                        )
+                                        .sort((left, right) =>
+                                            left.category_name.localeCompare(
+                                                right.category_name
+                                            )
+                                        ),
+                                    translateService
+                                );
+
+                                patchState(store, {
+                                    ...buildCategoryPatch(
+                                        params.contentType,
+                                        categories
+                                    ),
+                                    categoryError: null,
+                                });
+
+                                return categories;
+                            } catch (error) {
+                                logger.warn('Error loading categories', {
+                                    contentType: params.contentType,
+                                    error,
+                                });
+                                patchState(store, {
+                                    ...buildCategoryPatch(
+                                        params.contentType,
+                                        []
+                                    ),
+                                    categoryError: error,
+                                });
+                                return [];
+                            }
+                        },
+                    }),
+                    getContentResource: resource({
+                        params: () => ({
+                            contentType: storeContext.selectedContentType(),
+                            category: storeContext.selectedCategoryId(),
+                            search: storeContext.searchPhrase(),
+                            pageIndex: storeContext.page() + 1,
+                            currentPlaylist: storeContext.currentPlaylist(),
+                            availableCategoryCount: getCategoriesByType(
+                                store,
+                                storeContext.selectedContentType()
+                            ).filter(
+                                (category) =>
+                                    String(category.category_id) !== '*'
+                            ).length,
+                        }),
+                        loader: async ({
+                            params,
+                        }): Promise<StalkerContentItem[]> => {
+                            if (!params.category || params.category === '') {
+                                patchState(
+                                    store,
+                                    buildEmptyContentPatch(
+                                        params.contentType,
+                                        null
+                                    )
+                                );
+                                return [];
+                            }
+
+                            if (
+                                params.category === '*' &&
+                                (params.contentType === 'vod' ||
+                                    params.contentType === 'series') &&
+                                params.availableCategoryCount === 0
+                            ) {
+                                patchState(
+                                    store,
+                                    buildEmptyContentPatch(
+                                        params.contentType,
+                                        null
+                                    )
+                                );
+                                return [];
+                            }
+
+                            const playlist = params.currentPlaylist;
+                            if (!playlist?.portalUrl) {
+                                patchState(
+                                    store,
+                                    buildEmptyContentPatch(
+                                        params.contentType,
+                                        null
+                                    )
+                                );
+                                return [];
+                            }
+
+                            const categoryParam = params.category || '*';
+                            const paramsPlaylistKey =
+                                params.currentPlaylist?._id ??
+                                params.currentPlaylist?.portalUrl ??
+                                null;
+                            const isCurrentRequest = (): boolean => {
+                                const currentPlaylist =
+                                    storeContext.currentPlaylist();
+                                const currentPlaylistKey =
+                                    currentPlaylist?._id ??
+                                    currentPlaylist?.portalUrl ??
+                                    null;
+
+                                return (
+                                    params.contentType ===
+                                        storeContext.selectedContentType() &&
+                                    params.category ===
+                                        storeContext.selectedCategoryId() &&
+                                    params.search ===
+                                        storeContext.searchPhrase() &&
+                                    params.pageIndex ===
+                                        storeContext.page() + 1 &&
+                                    paramsPlaylistKey === currentPlaylistKey
+                                );
+                            };
+                            const queryParams: Record<string, string | number> =
+                                {
+                                    action: StalkerContentTypes[
+                                        params.contentType
+                                    ].getContentAction,
+                                    type: params.contentType,
+                                    sortby: 'added',
+                                    ...(params.search !== ''
+                                        ? { search: params.search }
+                                        : {}),
+                                    p: params.pageIndex,
+                                };
+
+                            if (params.contentType === 'vod') {
+                                queryParams['genre'] = '0';
+                                queryParams['category'] = categoryParam;
+                            } else if (params.contentType === 'series') {
+                                queryParams['category'] = categoryParam;
+                            } else {
+                                queryParams['category'] = categoryParam;
+                                queryParams['genre'] = categoryParam;
+                            }
+
+                            try {
+                                patchState(store, {
+                                    paginatedContent: [],
+                                    contentError: null,
+                                });
+
+                                const response =
+                                    await executeStalkerRequest<StalkerOrderedListResponse>(
+                                        requestDeps,
+                                        playlist,
+                                        queryParams
+                                    );
+
+                                if (!isCurrentRequest()) {
+                                    return [];
+                                }
+
+                                if (!Array.isArray(response?.js?.data)) {
+                                    const invalidResponseError = new Error(
+                                        'Invalid response structure'
+                                    );
+                                    logger.warn(
+                                        'Invalid response structure',
+                                        response
+                                    );
+                                    patchState(store, {
+                                        ...buildEmptyContentPatch(
+                                            params.contentType,
+                                            invalidResponseError
+                                        ),
+                                    });
+                                    return [];
+                                }
+
+                                const newItems = response.js.data.map((item) =>
+                                    toStalkerContentItem(
+                                        item,
+                                        playlist.portalUrl ?? ''
+                                    )
+                                );
+
+                                if (params.contentType === 'itv') {
+                                    const channels =
+                                        newItems.map(toStalkerItvChannel);
+                                    const nextChannels =
+                                        params.pageIndex === 1
+                                            ? channels
+                                            : [
+                                                  ...store.itvChannels(),
+                                                  ...channels,
+                                              ];
+
+                                    patchState(store, {
+                                        totalCount:
+                                            response.js.total_items ?? 0,
+                                        paginatedContent: newItems,
+                                        contentError: null,
+                                        itvChannels: nextChannels,
+                                        hasMoreChannels:
+                                            nextChannels.length <
+                                            (response.js.total_items ?? 0),
+                                    });
+                                } else {
+                                    patchState(store, {
+                                        totalCount:
+                                            response.js.total_items ?? 0,
+                                        paginatedContent: newItems,
+                                        contentError: null,
+                                        hasMoreChannels: false,
+                                    });
+                                }
+
+                                return newItems;
+                            } catch (error) {
+                                if (!isCurrentRequest()) {
+                                    return [];
+                                }
+
+                                logger.warn('Error loading content', {
+                                    contentType: params.contentType,
+                                    category: params.category,
+                                    error,
+                                });
+                                patchState(
+                                    store,
+                                    buildEmptyContentPatch(
+                                        params.contentType,
+                                        error
+                                    )
+                                );
+                                return [];
+                            }
+                        },
+                    }),
+                };
+            }
+        ),
+        withComputed((store) => {
+            const storeContext = store as typeof store &
+                StalkerContentResourceStoreContract;
+
+            return {
+                getTotalPages: computed(() =>
+                    Math.ceil(store.totalCount() / storeContext.limit())
+                ),
+                getSelectedCategory: computed(() => {
+                    const categoryId = storeContext.selectedCategoryId();
+                    if (!categoryId) {
+                        return {
+                            id: 0,
+                            category_name: 'All Items',
+                            type: storeContext.selectedContentType(),
+                        };
+                    }
+
+                    const contentType = storeContext.selectedContentType();
+                    const categories = getCategoriesByType(store, contentType);
+
+                    return (
+                        categories.find(
+                            (category) =>
+                                String(category.category_id) ===
+                                String(categoryId)
+                        ) || {
+                            category_id: categoryId,
+                            category_name: '',
+                            type: contentType,
+                        }
+                    );
+                }),
+                getSelectedCategoryName: computed(() => {
+                    const selectedCategoryId =
+                        storeContext.selectedCategoryId();
+                    if (!selectedCategoryId) {
+                        return '';
+                    }
+
+                    const category = getCategoriesByType(
+                        store,
+                        storeContext.selectedContentType()
+                    ).find(
+                        (item) =>
+                            String(item.category_id) ===
+                            String(selectedCategoryId)
+                    );
+
+                    return category?.category_name ?? '';
+                }),
+                getPaginatedContent: computed(() => store.paginatedContent()),
+                isPaginatedContentLoading: computed(() =>
+                    storeContext.getContentResource.isLoading()
+                ),
+                isPaginatedContentFailed: computed(() => store.contentError()),
+                getCategoryResource: computed(() =>
+                    getCategoriesByType(
+                        store,
+                        storeContext.selectedContentType()
+                    )
+                ),
+                isCategoryResourceLoading: computed(() =>
+                    storeContext.categoryResource.isLoading()
+                ),
+                isCategoryResourceFailed: computed(() => store.categoryError()),
+            };
+        }),
+        withMethods((store) => ({
+            setCategories(
+                type: StalkerContentType,
+                categories: StalkerCategoryItem[]
+            ) {
+                patchState(store, buildCategoryPatch(type, categories));
+            },
+            resetCategories() {
+                patchState(store, {
+                    vodCategories: [],
+                    seriesCategories: [],
+                    itvCategories: [],
+                    categoryError: null,
+                });
+            },
+            setItvChannels(channels: StalkerItvChannel[]) {
+                patchState(store, { itvChannels: channels });
+            },
+        }))
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.spec.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.spec.ts
new file mode 100644
index 0000000..0602fa4
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.spec.ts
@@ -0,0 +1,199 @@
+import { TestBed } from '@angular/core/testing';
+import { signalStore, withState } from '@ngrx/signals';
+import { DataService } from 'services';
+import { EpgItem, Playlist } from 'shared-interfaces';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { withStalkerEpg } from './with-stalker-epg.feature';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+const PLAYLIST = {
+    _id: 'playlist-1',
+    title: 'Demo Stalker',
+    count: 0,
+    autoRefresh: false,
+    importDate: '2026-04-11T00:00:00.000Z',
+    lastUsage: '2026-04-11T00:00:00.000Z',
+    portalUrl: 'http://demo.example/portal.php',
+    macAddress: '00:1A:79:00:00:01',
+} as Playlist;
+
+const TestStalkerEpgStore = signalStore(
+    withState({
+        currentPlaylist: PLAYLIST,
+        selectedItvId: '10001',
+    }),
+    withStalkerEpg()
+);
+
+describe('withStalkerEpg', () => {
+    let store: InstanceType<typeof TestStalkerEpgStore>;
+    let dataService: {
+        sendIpcEvent: jest.Mock<Promise<unknown>, unknown[]>;
+    };
+    let stalkerSessionService: {
+        makeAuthenticatedRequest: jest.Mock<Promise<unknown>, unknown[]>;
+    };
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        stalkerSessionService = {
+            makeAuthenticatedRequest: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestStalkerEpgStore,
+                { provide: DataService, useValue: dataService },
+                {
+                    provide: StalkerSessionService,
+                    useValue: stalkerSessionService,
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestStalkerEpgStore);
+    });
+
+    it('fetches fallback short EPG via get_short_epg', async () => {
+        dataService.sendIpcEvent.mockResolvedValue({
+            js: {
+                data: [
+                    buildEntry('10001', 'Current Show', 1744365600, 1744367400),
+                ],
+            },
+        });
+
+        const result = await store.fetchChannelEpg('10001');
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                url: PLAYLIST.portalUrl,
+                macAddress: PLAYLIST.macAddress,
+                params: expect.objectContaining({
+                    action: 'get_short_epg',
+                    type: 'itv',
+                    ch_id: '10001',
+                    size: '10',
+                }),
+            })
+        );
+        expect(result).toEqual([
+            buildEpgItem('10001', 'Current Show', 1744365600, 1744367400),
+        ]);
+    });
+
+    it('loads bulk EPG once and projects selected-channel programs from the cache', async () => {
+        dataService.sendIpcEvent.mockResolvedValue({
+            js: {
+                data: {
+                    '10001': [
+                        buildEntry('10001', 'Morning Show', 1744358400, 1744362000),
+                        buildEntry('10001', 'Current Show', 1744362000, 1744365600),
+                    ],
+                    '10002': [
+                        buildEntry('10002', 'Other Channel', 1744362000, 1744365600),
+                    ],
+                },
+            },
+        });
+
+        await store.ensureBulkItvEpg(168);
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    action: 'get_epg_info',
+                    type: 'itv',
+                    period: '168',
+                }),
+            })
+        );
+        expect(store.bulkItvEpgLoaded()).toBe(true);
+        expect(store.bulkItvEpgPlaylistId()).toBe('playlist-1');
+        expect(store.bulkItvEpgPeriodHours()).toBe(168);
+        expect(store.selectedItvEpgPrograms()).toEqual([
+            buildProgram('10001', 'Morning Show', 1744358400, 1744362000),
+            buildProgram('10001', 'Current Show', 1744362000, 1744365600),
+        ]);
+    });
+
+    it('treats bulk EPG failures as loaded-empty cache so callers can fallback to short EPG', async () => {
+        dataService.sendIpcEvent.mockRejectedValue(new Error('unsupported'));
+
+        await store.ensureBulkItvEpg(168);
+
+        expect(store.bulkItvEpgLoaded()).toBe(true);
+        expect(store.bulkItvEpgByChannel()).toEqual({});
+        expect(store.selectedItvEpgPrograms()).toEqual([]);
+        expect(store.isLoadingBulkItvEpg()).toBe(false);
+    });
+});
+
+function buildEntry(
+    channelId: string,
+    title: string,
+    startTimestamp: number,
+    stopTimestamp: number
+) {
+    return {
+        id: `${channelId}-${startTimestamp}`,
+        ch_id: channelId,
+        name: title,
+        descr: `${title} description`,
+        start: new Date(startTimestamp * 1000).toISOString(),
+        stop: new Date(stopTimestamp * 1000).toISOString(),
+        start_timestamp: startTimestamp,
+        stop_timestamp: stopTimestamp,
+    };
+}
+
+function buildEpgItem(
+    channelId: string,
+    title: string,
+    startTimestamp: number,
+    stopTimestamp: number
+): EpgItem {
+    return {
+        id: `${channelId}-${startTimestamp}`,
+        epg_id: '',
+        title,
+        description: `${title} description`,
+        lang: '',
+        start: new Date(startTimestamp * 1000).toISOString(),
+        end: new Date(stopTimestamp * 1000).toISOString(),
+        stop: new Date(stopTimestamp * 1000).toISOString(),
+        channel_id: channelId,
+        start_timestamp: String(startTimestamp),
+        stop_timestamp: String(stopTimestamp),
+    };
+}
+
+function buildProgram(
+    channelId: string,
+    title: string,
+    startTimestamp: number,
+    stopTimestamp: number
+) {
+    return {
+        start: new Date(startTimestamp * 1000).toISOString(),
+        stop: new Date(stopTimestamp * 1000).toISOString(),
+        channel: channelId,
+        title,
+        desc: `${title} description`,
+        category: null,
+        startTimestamp,
+        stopTimestamp,
+    };
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.ts
new file mode 100644
index 0000000..b005e7f
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-epg.feature.ts
@@ -0,0 +1,472 @@
+import { computed, inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withComputed,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import { DataService } from 'services';
+import { EpgItem, EpgProgram, StalkerPortalActions } from 'shared-interfaces';
+import { normalizeStalkerEntityId } from '../../stalker-vod.utils';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { StalkerEpgFeatureStoreContract } from '../stalker-store.contracts';
+import { executeStalkerRequest } from '../utils';
+
+interface StalkerEpgEntry {
+    id?: string | number;
+    name?: string;
+    descr?: string;
+    category?: string;
+    time?: string;
+    time_to?: string;
+    start?: string;
+    stop?: string;
+    ch_id?: string | number;
+    start_timestamp?: string | number;
+    stop_timestamp?: string | number;
+}
+
+type StalkerBulkEpgValue =
+    | StalkerEpgEntry[]
+    | {
+          data?: StalkerEpgEntry[];
+          epg?: StalkerEpgEntry[];
+          items?: StalkerEpgEntry[];
+      };
+
+interface StalkerEpgResponse {
+    js?:
+        | StalkerEpgEntry[]
+        | {
+              data?: StalkerEpgEntry[] | Record<string, StalkerBulkEpgValue>;
+          }
+        | Record<string, StalkerBulkEpgValue>;
+}
+
+export interface StalkerEpgState {
+    bulkItvEpgByChannel: Record<string, EpgProgram[]>;
+    bulkItvEpgPlaylistId: string | null;
+    bulkItvEpgPeriodHours: number | null;
+    bulkItvEpgLoaded: boolean;
+    isLoadingBulkItvEpg: boolean;
+}
+
+const initialEpgState: StalkerEpgState = {
+    bulkItvEpgByChannel: {},
+    bulkItvEpgPlaylistId: null,
+    bulkItvEpgPeriodHours: null,
+    bulkItvEpgLoaded: false,
+    isLoadingBulkItvEpg: false,
+};
+
+const ACTIVE_EPG_FALLBACK_SIZE = 10;
+
+/**
+ * EPG concern methods.
+ */
+export function withStalkerEpg() {
+    const logger = createLogger('withStalkerEpg');
+
+    return signalStoreFeature(
+        withState<StalkerEpgState>(initialEpgState),
+        withComputed((store) => {
+            const storeContext = store as typeof store &
+                StalkerEpgFeatureStoreContract;
+
+            return {
+                selectedItvEpgPrograms: computed(() => {
+                    const selectedId = storeContext.selectedItvId();
+                    if (!selectedId) {
+                        return [];
+                    }
+
+                    return (
+                        store.bulkItvEpgByChannel()[
+                            normalizeStalkerEntityId(selectedId)
+                        ] ?? []
+                    );
+                }),
+            };
+        }),
+        withMethods(
+            (
+                store,
+                dataService = inject(DataService),
+                stalkerSession = inject(StalkerSessionService)
+            ) => {
+                const storeContext = store as typeof store &
+                    StalkerEpgFeatureStoreContract;
+                const requestDeps = {
+                    dataService,
+                    stalkerSession,
+                };
+
+                const requestEpg = async (
+                    playlist: NonNullable<
+                        ReturnType<
+                            StalkerEpgFeatureStoreContract['currentPlaylist']
+                        >
+                    >,
+                    queryParams: Record<string, string>
+                ): Promise<StalkerEpgResponse> => {
+                    return executeStalkerRequest<StalkerEpgResponse>(
+                        requestDeps,
+                        playlist,
+                        queryParams
+                    );
+                };
+
+                const fetchShortEpg = async (
+                    channelId: number | string,
+                    size: number
+                ): Promise<EpgItem[]> => {
+                    const playlist = storeContext.currentPlaylist();
+                    if (!playlist) {
+                        return [];
+                    }
+
+                    const response = await requestEpg(playlist, {
+                        action: StalkerPortalActions.GetShortEpg,
+                        type: 'itv',
+                        ch_id: String(channelId),
+                        size: String(size),
+                    });
+
+                    return extractShortEpgEntries(response)
+                        .map((item) => toEpgItem(item, channelId))
+                        .filter((item) => item.start && item.stop)
+                        .sort(
+                            (left, right) =>
+                                getProgramTimestampMs(
+                                    left.start,
+                                    left.start_timestamp
+                                ) -
+                                getProgramTimestampMs(
+                                    right.start,
+                                    right.start_timestamp
+                                )
+                        );
+                };
+
+                return {
+                    async fetchChannelEpg(
+                        channelId: number | string,
+                        size = ACTIVE_EPG_FALLBACK_SIZE
+                    ): Promise<EpgItem[]> {
+                        try {
+                            return await fetchShortEpg(channelId, size);
+                        } catch (error) {
+                            logger.error('Error loading short Stalker EPG', {
+                                channelId,
+                                size,
+                                error,
+                            });
+                            return [];
+                        }
+                    },
+
+                    async ensureBulkItvEpg(periodHours = 168): Promise<void> {
+                        const playlist = storeContext.currentPlaylist();
+                        if (!playlist?._id) {
+                            patchState(store, initialEpgState);
+                            return;
+                        }
+
+                        const playlistId = String(playlist._id);
+                        const shouldReuseCache =
+                            store.bulkItvEpgLoaded() &&
+                            store.bulkItvEpgPlaylistId() === playlistId &&
+                            store.bulkItvEpgPeriodHours() === periodHours;
+
+                        if (shouldReuseCache || store.isLoadingBulkItvEpg()) {
+                            return;
+                        }
+
+                        if (store.bulkItvEpgPlaylistId() !== playlistId) {
+                            patchState(store, initialEpgState);
+                        }
+
+                        patchState(store, {
+                            isLoadingBulkItvEpg: true,
+                            bulkItvEpgPlaylistId: playlistId,
+                            bulkItvEpgPeriodHours: periodHours,
+                        });
+
+                        try {
+                            const response = await requestEpg(playlist, {
+                                action: StalkerPortalActions.GetEpgInfo,
+                                type: 'itv',
+                                period: String(periodHours),
+                            });
+                            const selectedChannelId =
+                                storeContext.selectedItvId() ?? null;
+                            const bulkPrograms = extractBulkEpgByChannel(
+                                response,
+                                selectedChannelId
+                            );
+
+                            patchState(store, {
+                                bulkItvEpgByChannel: bulkPrograms,
+                                bulkItvEpgLoaded: true,
+                                isLoadingBulkItvEpg: false,
+                            });
+                        } catch (error) {
+                            logger.warn('Bulk Stalker EPG unavailable', error);
+                            patchState(store, {
+                                bulkItvEpgByChannel: {},
+                                bulkItvEpgLoaded: true,
+                                isLoadingBulkItvEpg: false,
+                            });
+                        }
+                    },
+
+                    clearBulkItvEpgCache(): void {
+                        patchState(store, initialEpgState);
+                    },
+                };
+            }
+        )
+    );
+}
+
+function extractShortEpgEntries(
+    response: StalkerEpgResponse
+): StalkerEpgEntry[] {
+    if (Array.isArray(response?.js)) {
+        return response.js;
+    }
+
+    const data = response?.js?.data;
+    return Array.isArray(data) ? data : [];
+}
+
+function extractBulkEpgByChannel(
+    response: StalkerEpgResponse,
+    selectedChannelId?: string | null
+): Record<string, EpgProgram[]> {
+    const raw = response?.js;
+    const groupedEntries: Record<string, StalkerEpgEntry[]> = {};
+
+    const appendEntries = (
+        channelId: string | number | null | undefined,
+        entries: StalkerEpgEntry[]
+    ) => {
+        const normalizedChannelId = normalizeOptionalEntityId(channelId);
+        if (!normalizedChannelId || entries.length === 0) {
+            return;
+        }
+
+        groupedEntries[normalizedChannelId] = entries;
+    };
+
+    const groupArrayEntries = (entries: StalkerEpgEntry[]) => {
+        for (const entry of entries) {
+            const entryChannelId = entry.ch_id ?? selectedChannelId ?? null;
+            const normalizedChannelId =
+                normalizeOptionalEntityId(entryChannelId);
+            if (!normalizedChannelId) {
+                continue;
+            }
+
+            groupedEntries[normalizedChannelId] ??= [];
+            groupedEntries[normalizedChannelId].push(entry);
+        }
+    };
+
+    if (Array.isArray(raw)) {
+        groupArrayEntries(raw);
+    } else {
+        const rawData =
+            raw && typeof raw === 'object' && 'data' in raw ? raw.data : raw;
+
+        if (Array.isArray(rawData)) {
+            groupArrayEntries(rawData);
+        } else if (rawData && typeof rawData === 'object') {
+            for (const [channelId, value] of Object.entries(rawData)) {
+                appendEntries(channelId, extractEntriesFromBulkValue(value));
+            }
+        }
+    }
+
+    const normalizedPrograms: Record<string, EpgProgram[]> = {};
+
+    for (const [channelId, entries] of Object.entries(groupedEntries)) {
+        const programs = entriesToPrograms(entries, channelId);
+        if (programs.length > 0) {
+            normalizedPrograms[channelId] = programs;
+        }
+    }
+
+    return normalizedPrograms;
+}
+
+function extractEntriesFromBulkValue(value: unknown): StalkerEpgEntry[] {
+    if (Array.isArray(value)) {
+        return value;
+    }
+
+    if (!value || typeof value !== 'object') {
+        return [];
+    }
+
+    const recordValue = value as {
+        data?: StalkerEpgEntry[];
+        epg?: StalkerEpgEntry[];
+        items?: StalkerEpgEntry[];
+    };
+
+    if (Array.isArray(recordValue.data)) {
+        return recordValue.data;
+    }
+
+    if (Array.isArray(recordValue.epg)) {
+        return recordValue.epg;
+    }
+
+    if (Array.isArray(recordValue.items)) {
+        return recordValue.items;
+    }
+
+    return [];
+}
+
+function entriesToPrograms(
+    entries: StalkerEpgEntry[],
+    fallbackChannelId: string | number
+): EpgProgram[] {
+    return entries
+        .map((entry) => toEpgProgram(entry, fallbackChannelId))
+        .filter((program): program is EpgProgram => program !== null)
+        .sort(
+            (left, right) =>
+                getProgramTimestampMs(left.start, left.startTimestamp) -
+                getProgramTimestampMs(right.start, right.startTimestamp)
+        );
+}
+
+function toEpgItem(
+    item: StalkerEpgEntry,
+    fallbackChannelId: string | number
+): EpgItem {
+    const startRaw = item.time ?? item.start ?? '';
+    const stopRaw = item.time_to ?? item.stop ?? '';
+    const startTimestamp = getProgramTimestampSeconds(
+        startRaw,
+        item.start_timestamp
+    );
+    const stopTimestamp = getProgramTimestampSeconds(
+        stopRaw,
+        item.stop_timestamp
+    );
+    const start = toIsoString(startRaw, startTimestamp);
+    const stop = toIsoString(stopRaw, stopTimestamp);
+
+    return {
+        id: String(item.id ?? ''),
+        epg_id: '',
+        title: item.name ?? '',
+        description: item.descr ?? '',
+        lang: '',
+        start,
+        end: stop,
+        stop,
+        channel_id: String(item.ch_id ?? fallbackChannelId),
+        start_timestamp: startTimestamp !== null ? String(startTimestamp) : '',
+        stop_timestamp: stopTimestamp !== null ? String(stopTimestamp) : '',
+    };
+}
+
+function toEpgProgram(
+    item: StalkerEpgEntry,
+    fallbackChannelId: string | number
+): EpgProgram | null {
+    const epgItem = toEpgItem(item, fallbackChannelId);
+    if (!epgItem.start || !epgItem.stop) {
+        return null;
+    }
+
+    return {
+        start: epgItem.start,
+        stop: epgItem.stop,
+        channel: normalizeStalkerEntityId(epgItem.channel_id),
+        title: epgItem.title,
+        desc: epgItem.description || null,
+        category: item.category ?? null,
+        startTimestamp: parseInteger(epgItem.start_timestamp),
+        stopTimestamp: parseInteger(epgItem.stop_timestamp),
+    };
+}
+
+function toIsoString(
+    rawValue: string,
+    timestampSeconds: number | null
+): string {
+    if (timestampSeconds !== null) {
+        return new Date(timestampSeconds * 1000).toISOString();
+    }
+
+    const normalized = String(rawValue ?? '').trim();
+    if (!normalized) {
+        return '';
+    }
+
+    const candidate = normalized.includes('T')
+        ? normalized
+        : normalized.replace(' ', 'T');
+    const parsed = Date.parse(candidate);
+    return Number.isFinite(parsed) ? new Date(parsed).toISOString() : '';
+}
+
+function getProgramTimestampSeconds(
+    rawValue: string,
+    timestampValue?: string | number | null
+): number | null {
+    const parsedTimestamp = parseInteger(timestampValue);
+    if (parsedTimestamp !== null && parsedTimestamp > 0) {
+        return parsedTimestamp;
+    }
+
+    const normalized = String(rawValue ?? '').trim();
+    if (!normalized) {
+        return null;
+    }
+
+    const candidate = normalized.includes('T')
+        ? normalized
+        : normalized.replace(' ', 'T');
+    const parsedDate = Date.parse(candidate);
+
+    return Number.isFinite(parsedDate) ? Math.floor(parsedDate / 1000) : null;
+}
+
+function getProgramTimestampMs(
+    rawValue: string,
+    timestampValue?: string | number | null
+): number {
+    const timestampSeconds = getProgramTimestampSeconds(
+        rawValue,
+        timestampValue
+    );
+    if (timestampSeconds !== null) {
+        return timestampSeconds * 1000;
+    }
+
+    return Number.POSITIVE_INFINITY;
+}
+
+function parseInteger(value: unknown): number | null {
+    const parsed = Number.parseInt(String(value ?? ''), 10);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+function normalizeOptionalEntityId(
+    value: string | number | null | undefined
+): string | null {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+
+    return normalizeStalkerEntityId(value);
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-favorites.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-favorites.feature.ts
new file mode 100644
index 0000000..ccc8c30
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-favorites.feature.ts
@@ -0,0 +1,113 @@
+import { inject } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { signalStoreFeature, withMethods } from '@ngrx/signals';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistsService } from 'services';
+import { PlaylistMeta, StalkerPortalItem } from 'shared-interfaces';
+import { StalkerSelectionStoreContract } from '../stalker-store.contracts';
+import {
+    dispatchStalkerPlaylistMetaUpdate,
+    resolveStalkerCategoryId,
+} from '../utils';
+
+interface FavoritesStoreContext {
+    currentPlaylist(): PlaylistMeta | undefined;
+    selectedContentType(): StalkerSelectionStoreContract['selectedContentType'] extends () => infer T
+        ? T
+        : string;
+}
+
+type FavoritePayload = StalkerPortalItem & {
+    stream_id?: string | number;
+    id?: string | number;
+};
+
+/**
+ * Favorites concern methods.
+ */
+export function withStalkerFavorites() {
+    return signalStoreFeature(
+        withMethods(
+            (
+                store,
+                playlistService = inject(PlaylistsService),
+                snackBar = inject(MatSnackBar),
+                translate = inject(TranslateService),
+                ngrxStore = inject(Store)
+            ) => {
+                const storeContext = store as typeof store &
+                    FavoritesStoreContext;
+                return {
+                    addToFavorites(item: FavoritePayload, onDone?: () => void) {
+                        const portalId = storeContext.currentPlaylist()?._id;
+                        if (!portalId) {
+                            return;
+                        }
+
+                        playlistService
+                            .addPortalFavorite(portalId, {
+                                ...item,
+                                category_id: resolveStalkerCategoryId(
+                                    item.category_id,
+                                    storeContext.selectedContentType()
+                                ),
+                                added_at: Date.now(),
+                                id: item.stream_id ?? item.id,
+                            })
+                            .subscribe((updatedPlaylist) => {
+                                dispatchStalkerPlaylistMetaUpdate(
+                                    ngrxStore,
+                                    portalId,
+                                    {
+                                        favorites: updatedPlaylist?.favorites,
+                                    }
+                                );
+                                snackBar.open(
+                                    translate.instant(
+                                        'PORTALS.ADDED_TO_FAVORITES'
+                                    ),
+                                    undefined,
+                                    {
+                                        duration: 1000,
+                                    }
+                                );
+                                onDone?.();
+                            });
+                    },
+                    removeFromFavorites(
+                        favoriteId: string,
+                        onDone?: () => void
+                    ) {
+                        const portalId = storeContext.currentPlaylist()?._id;
+                        if (!portalId) {
+                            return;
+                        }
+
+                        playlistService
+                            .removeFromPortalFavorites(portalId, favoriteId)
+                            .subscribe((updatedPlaylist) => {
+                                dispatchStalkerPlaylistMetaUpdate(
+                                    ngrxStore,
+                                    portalId,
+                                    {
+                                        favorites: updatedPlaylist?.favorites,
+                                    }
+                                );
+                                snackBar.open(
+                                    translate.instant(
+                                        'PORTALS.REMOVED_FROM_FAVORITES'
+                                    ),
+                                    undefined,
+                                    {
+                                        duration: 1000,
+                                    }
+                                );
+                                onDone?.();
+                            });
+                    },
+                };
+            }
+        )
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-player.feature.spec.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-player.feature.spec.ts
new file mode 100644
index 0000000..9ff6f17
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-player.feature.spec.ts
@@ -0,0 +1,178 @@
+import { TestBed } from '@angular/core/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { signalStore, withState } from '@ngrx/signals';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PORTAL_PLAYER } from '@iptvnator/portal/shared/util';
+import { DataService, PlaylistsService } from 'services';
+import { of } from 'rxjs';
+import { PlaylistMeta, StalkerPortalActions } from 'shared-interfaces';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { withStalkerPlayer } from './with-stalker-player.feature';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    ...jest.requireActual('@iptvnator/portal/shared/util'),
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+const PLAYLIST = {
+    _id: 'playlist-1',
+    title: 'Demo Stalker',
+    count: 0,
+    autoRefresh: false,
+    importDate: '2026-04-14T00:00:00.000Z',
+    portalUrl: 'http://demo.example/stalker_portal/server/load.php',
+    macAddress: '00:1A:79:00:00:01',
+    isFullStalkerPortal: false,
+} as PlaylistMeta;
+
+const TestPlayerStore = signalStore(
+    withState({
+        currentPlaylist: PLAYLIST,
+        selectedContentType: 'vod' as 'vod' | 'series' | 'itv',
+        selectedItem: {
+            id: '22',
+            cmd: '/media/source_22.mpg',
+            has_files: true,
+            title: 'Original Title',
+            category_id: 'vod',
+        },
+    }),
+    withStalkerPlayer()
+);
+
+describe('withStalkerPlayer', () => {
+    let store: InstanceType<typeof TestPlayerStore>;
+    let dataService: {
+        sendIpcEvent: jest.Mock<Promise<unknown>, unknown[]>;
+    };
+    let playlistService: {
+        addPortalRecentlyViewed: jest.Mock;
+    };
+    let ngrxStore: {
+        dispatch: jest.Mock;
+    };
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        playlistService = {
+            addPortalRecentlyViewed: jest.fn(() =>
+                of({ recentlyViewed: [{ id: '22', title: 'Movie Title' }] })
+            ),
+        };
+        ngrxStore = {
+            dispatch: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestPlayerStore,
+                { provide: DataService, useValue: dataService },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistService,
+                },
+                {
+                    provide: PORTAL_PLAYER,
+                    useValue: {
+                        openResolvedPlayback: jest.fn(),
+                    },
+                },
+                {
+                    provide: StalkerSessionService,
+                    useValue: {
+                        getCachedToken: jest.fn(),
+                        makeAuthenticatedRequest: jest.fn(),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((key: string) => key),
+                    },
+                },
+                {
+                    provide: Store,
+                    useValue: ngrxStore,
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestPlayerStore);
+    });
+
+    it('falls back to file ids for VOD playback and persists recently viewed metadata', async () => {
+        dataService.sendIpcEvent
+            .mockResolvedValueOnce({
+                js: {
+                    data: [{ id: 77 }],
+                },
+            })
+            .mockResolvedValueOnce({
+                js: {
+                    cmd: 'ffmpeg http://cdn.example/video_77.mpg',
+                },
+            });
+
+        const playback = await store.resolveVodPlayback(
+            undefined,
+            'Movie Title',
+            'thumb.jpg'
+        );
+
+        expect(dataService.sendIpcEvent).toHaveBeenNthCalledWith(
+            1,
+            expect.anything(),
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    action: StalkerPortalActions.GetOrderedList,
+                    type: 'vod',
+                    movie_id: '22',
+                    p: '1',
+                }),
+            })
+        );
+        expect(dataService.sendIpcEvent).toHaveBeenNthCalledWith(
+            2,
+            expect.anything(),
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    action: StalkerPortalActions.CreateLink,
+                    cmd: '/media/file_77.mpg',
+                    type: 'vod',
+                }),
+            })
+        );
+        expect(playlistService.addPortalRecentlyViewed).toHaveBeenCalledWith(
+            PLAYLIST._id,
+            expect.objectContaining({
+                id: '22',
+                title: 'Movie Title',
+                category_id: 'vod',
+                cover: 'thumb.jpg',
+                added_at: expect.any(Number),
+            })
+        );
+        expect(ngrxStore.dispatch).toHaveBeenCalled();
+        expect(playback.streamUrl).toBe('http://cdn.example/video_77.mpg');
+        expect(playback.contentInfo).toEqual({
+            playlistId: PLAYLIST._id,
+            contentXtreamId: 22,
+            contentType: 'vod',
+            seriesXtreamId: undefined,
+        });
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-player.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-player.feature.ts
new file mode 100644
index 0000000..b844018
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-player.feature.ts
@@ -0,0 +1,393 @@
+import { inject } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { signalStoreFeature, withMethods } from '@ngrx/signals';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { PORTAL_PLAYER, createLogger } from '@iptvnator/portal/shared/util';
+import { DataService, PlaylistsService } from 'services';
+import {
+    PlaylistMeta,
+    ResolvedPortalPlayback,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import {
+    buildStalkerExternalPlaybackHeaders,
+    getStalkerPortalOrigin,
+    isCrossOriginStalkerStream,
+    STALKER_MAG_USER_AGENT,
+} from '../../stalker-live-playback.utils';
+import { StalkerSessionService } from '../../stalker-session.service';
+import {
+    normalizeStalkerEntityId,
+    normalizeStalkerEntityIdAsNumber,
+} from '../../stalker-vod.utils';
+import {
+    StalkerPlayerFeatureStoreContract,
+    StalkerRecentlyViewedItem,
+} from '../stalker-store.contracts';
+import {
+    buildStalkerRecentlyViewedPayload,
+    dispatchStalkerPlaylistMetaUpdate,
+    fetchStalkerExpireDate,
+    fetchStalkerMovieFileId,
+    fetchStalkerPlaybackLink,
+    shouldResolveMovieFileId,
+} from '../utils';
+
+type StalkerPlayableItem = StalkerPortalItem & {
+    cmd?: string;
+    has_files?: unknown;
+};
+
+/**
+ * Playback/link/player concern methods.
+ */
+export function withStalkerPlayer() {
+    const logger = createLogger('withStalkerPlayer');
+
+    return signalStoreFeature(
+        withMethods(
+            (
+                store,
+                dataService = inject(DataService),
+                playlistService = inject(PlaylistsService),
+                playerService = inject(PORTAL_PLAYER),
+                stalkerSession = inject(StalkerSessionService),
+                snackBar = inject(MatSnackBar),
+                translate = inject(TranslateService),
+                ngrxStore = inject(Store)
+            ) => {
+                const storeState = store as typeof store &
+                    StalkerPlayerFeatureStoreContract;
+                const requestDeps = {
+                    dataService,
+                    stalkerSession,
+                };
+
+                const createRequestPlaylist = (
+                    portalUrl: string,
+                    macAddress: string
+                ): PlaylistMeta => {
+                    const playlist = storeState.currentPlaylist();
+
+                    return {
+                        ...playlist,
+                        _id: playlist?._id ?? 'stalker-player',
+                        title: playlist?.title ?? 'Stalker Portal',
+                        count: playlist?.count ?? 0,
+                        autoRefresh: playlist?.autoRefresh ?? false,
+                        importDate: playlist?.importDate ?? '',
+                        portalUrl,
+                        macAddress,
+                    };
+                };
+
+                const persistRecentlyViewed = (
+                    playlistId: string,
+                    recentItem: StalkerRecentlyViewedItem
+                ): void => {
+                    playlistService
+                        .addPortalRecentlyViewed(playlistId, recentItem)
+                        .subscribe((updatedPlaylist) => {
+                            dispatchStalkerPlaylistMetaUpdate(
+                                ngrxStore,
+                                playlistId,
+                                {
+                                    recentlyViewed:
+                                        updatedPlaylist?.recentlyViewed,
+                                }
+                            );
+                        });
+                };
+
+                const buildRecentlyViewedItem = (
+                    item: StalkerPlayableItem,
+                    cmd?: string,
+                    cover?: string,
+                    title?: string
+                ): StalkerRecentlyViewedItem =>
+                    buildStalkerRecentlyViewedPayload(
+                        {
+                            ...item,
+                            cmd,
+                            cover,
+                            title,
+                        },
+                        storeState.selectedContentType()
+                    );
+
+                const recordRecentlyViewed = (
+                    item: StalkerPlayableItem | null | undefined,
+                    cmd?: string,
+                    cover?: string,
+                    title?: string
+                ): void => {
+                    const playlistId = storeState.currentPlaylist()?._id;
+                    if (!item || !playlistId) {
+                        return;
+                    }
+
+                    const recentItem = buildRecentlyViewedItem(
+                        item,
+                        cmd,
+                        cover,
+                        title
+                    );
+
+                    if (typeof storeState.addToRecentlyViewed === 'function') {
+                        storeState.addToRecentlyViewed(recentItem);
+                        return;
+                    }
+
+                    persistRecentlyViewed(playlistId, recentItem);
+                };
+
+                const resolveVodPlaybackInternal = async (
+                    cmd?: string,
+                    title?: string,
+                    thumbnail?: string,
+                    episodeNum?: number,
+                    episodeId?: number,
+                    startTime?: number
+                ): Promise<ResolvedPortalPlayback> => {
+                    const item = storeState.selectedItem() as
+                        | StalkerPlayableItem
+                        | null
+                        | undefined;
+                    let cmdToUse = cmd ?? item?.cmd;
+
+                    if (!cmdToUse) {
+                        throw new Error('nothing_to_play');
+                    }
+
+                    const playlist = storeState.currentPlaylist();
+                    if (!playlist?.portalUrl || !playlist.macAddress) {
+                        throw new Error('nothing_to_play');
+                    }
+
+                    if (shouldResolveMovieFileId(item, cmdToUse)) {
+                        const itemId = normalizeStalkerEntityId(item?.id);
+                        const fileId = await fetchStalkerMovieFileId(
+                            requestDeps,
+                            playlist,
+                            itemId
+                        );
+                        if (fileId) {
+                            cmdToUse = `/media/file_${fileId}.mpg`;
+                        }
+                    }
+
+                    const streamUrl = await fetchStalkerPlaybackLink(
+                        requestDeps,
+                        {
+                            playlist,
+                            selectedContentType:
+                                storeState.selectedContentType(),
+                            cmd: cmdToUse,
+                            series: episodeNum,
+                        }
+                    );
+
+                    recordRecentlyViewed(item, cmd, thumbnail, title);
+
+                    const isEpisode =
+                        episodeNum !== undefined || episodeId !== undefined;
+                    const selectedItemId =
+                        normalizeStalkerEntityIdAsNumber(item?.id) ?? 0;
+
+                    return {
+                        streamUrl,
+                        title: title ?? '',
+                        thumbnail,
+                        startTime,
+                        userAgent: playlist.userAgent,
+                        referer: playlist.referrer,
+                        origin: playlist.origin,
+                        contentInfo: {
+                            playlistId: playlist._id,
+                            contentXtreamId:
+                                isEpisode && episodeId
+                                    ? episodeId
+                                    : selectedItemId,
+                            contentType: isEpisode ? 'episode' : 'vod',
+                            seriesXtreamId: isEpisode
+                                ? selectedItemId
+                                : undefined,
+                        },
+                    };
+                };
+
+                const resolveItvPlaybackInternal = async (
+                    item: StalkerPlayableItem
+                ): Promise<ResolvedPortalPlayback> => {
+                    const playlist = storeState.currentPlaylist();
+                    if (
+                        !playlist?.portalUrl ||
+                        !playlist.macAddress ||
+                        !item.cmd
+                    ) {
+                        throw new Error('nothing_to_play');
+                    }
+
+                    const streamUrl = await fetchStalkerPlaybackLink(
+                        requestDeps,
+                        {
+                            playlist,
+                            selectedContentType:
+                                storeState.selectedContentType(),
+                            cmd: item.cmd,
+                            forcedContentType: 'itv',
+                        }
+                    );
+
+                    const token = stalkerSession.getCachedToken(playlist._id);
+                    const headers = buildStalkerExternalPlaybackHeaders(
+                        playlist,
+                        token,
+                        streamUrl
+                    );
+                    const crossOriginStream = isCrossOriginStalkerStream(
+                        playlist,
+                        streamUrl
+                    );
+                    const portalOrigin = getStalkerPortalOrigin(playlist);
+
+                    recordRecentlyViewed(
+                        item,
+                        item.cmd,
+                        item.logo ?? item.cover,
+                        item.o_name || item.name || item.title
+                    );
+
+                    return {
+                        streamUrl,
+                        title: item.o_name || item.name || item.title || '',
+                        thumbnail: item.logo ?? item.cover ?? null,
+                        headers,
+                        userAgent:
+                            headers['User-Agent'] ||
+                            playlist.userAgent ||
+                            STALKER_MAG_USER_AGENT,
+                        referer: crossOriginStream
+                            ? undefined
+                            : playlist.referrer || portalOrigin,
+                        origin: crossOriginStream
+                            ? undefined
+                            : playlist.origin || portalOrigin,
+                    };
+                };
+
+                return {
+                    async fetchLinkToPlay(
+                        portalUrl: string,
+                        macAddress: string,
+                        cmd: string,
+                        series?: number
+                    ) {
+                        return fetchStalkerPlaybackLink(requestDeps, {
+                            playlist: createRequestPlaylist(
+                                portalUrl,
+                                macAddress
+                            ),
+                            selectedContentType:
+                                storeState.selectedContentType(),
+                            cmd,
+                            series,
+                        });
+                    },
+                    async getExpireDate() {
+                        const playlist = storeState.currentPlaylist();
+                        if (!playlist) {
+                            return 'Unknown';
+                        }
+
+                        try {
+                            return await fetchStalkerExpireDate(
+                                requestDeps,
+                                playlist
+                            );
+                        } catch (error) {
+                            logger.error('Failed to fetch expire date', error);
+                            return 'Error fetching data';
+                        }
+                    },
+                    async fetchMovieFileId(
+                        movieId: string
+                    ): Promise<string | null> {
+                        const playlist = storeState.currentPlaylist();
+                        if (!playlist) {
+                            return null;
+                        }
+
+                        return fetchStalkerMovieFileId(
+                            requestDeps,
+                            playlist,
+                            movieId
+                        );
+                    },
+                    async resolveVodPlayback(
+                        cmd?: string,
+                        title?: string,
+                        thumbnail?: string,
+                        episodeNum?: number,
+                        episodeId?: number,
+                        startTime?: number
+                    ): Promise<ResolvedPortalPlayback> {
+                        return resolveVodPlaybackInternal(
+                            cmd,
+                            title,
+                            thumbnail,
+                            episodeNum,
+                            episodeId,
+                            startTime
+                        );
+                    },
+                    async resolveItvPlayback(
+                        item: StalkerPlayableItem
+                    ): Promise<ResolvedPortalPlayback> {
+                        return resolveItvPlaybackInternal(item);
+                    },
+                    async createLinkToPlayVod(
+                        cmd?: string,
+                        title?: string,
+                        thumbnail?: string,
+                        episodeNum?: number,
+                        episodeId?: number,
+                        startTime?: number
+                    ) {
+                        try {
+                            const playback = await resolveVodPlaybackInternal(
+                                cmd,
+                                title,
+                                thumbnail,
+                                episodeNum,
+                                episodeId,
+                                startTime
+                            );
+
+                            void playerService.openResolvedPlayback(
+                                playback,
+                                true
+                            );
+                        } catch (error) {
+                            logger.error('Failed to get playback URL', error);
+                            const errorMessage =
+                                error instanceof Error &&
+                                error.message === 'nothing_to_play'
+                                    ? translate.instant(
+                                          'PORTALS.CONTENT_NOT_AVAILABLE'
+                                      )
+                                    : translate.instant(
+                                          'PORTALS.PLAYBACK_ERROR'
+                                      );
+
+                            snackBar.open(errorMessage, undefined, {
+                                duration: 3000,
+                            });
+                        }
+                    },
+                };
+            }
+        )
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-portal.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-portal.feature.ts
new file mode 100644
index 0000000..37dbeda
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-portal.feature.ts
@@ -0,0 +1,136 @@
+import { inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withProps,
+    withState,
+} from '@ngrx/signals';
+import { PlaylistMeta, STALKER_REQUEST } from 'shared-interfaces';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import { DataService } from 'services';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { toStalkerSessionPlaylist } from '../utils';
+
+type StalkerPortalWindow = Window & {
+    electron?: {
+        dbCreatePlaylist: (playlist: {
+            id: string;
+            name: string;
+            macAddress: string;
+            url: string;
+            type: 'stalker';
+        }) => Promise<unknown>;
+        dbGetPlaylist: (playlistId: string) => Promise<unknown>;
+    };
+};
+
+/**
+ * Portal/session state and methods.
+ */
+export interface StalkerPortalState {
+    currentPlaylist: PlaylistMeta | undefined;
+}
+
+const initialPortalState: StalkerPortalState = {
+    currentPlaylist: undefined,
+};
+
+export function withStalkerPortal() {
+    const logger = createLogger('withStalkerPortal');
+    return signalStoreFeature(
+        withState<StalkerPortalState>(initialPortalState),
+        withProps(
+            (
+                _store,
+                dataService = inject(DataService),
+                stalkerSession = inject(StalkerSessionService)
+            ) => ({
+                /**
+                 * Helper to make stalker requests with automatic token handling
+                 */
+                async makeStalkerRequest(
+                    playlist: PlaylistMeta,
+                    params: Record<string, string | number>
+                ) {
+                    // Get token if it's a full stalker portal
+                    let token: string | undefined;
+                    let serialNumber: string | undefined;
+                    if (playlist.isFullStalkerPortal) {
+                        try {
+                            const result = await stalkerSession.ensureToken(
+                                toStalkerSessionPlaylist(playlist)
+                            );
+                            token = result.token ?? undefined;
+                            serialNumber = playlist.stalkerSerialNumber;
+                        } catch (error) {
+                            logger.error('Failed to get stalker token', error);
+                        }
+                    }
+
+                    return dataService.sendIpcEvent(STALKER_REQUEST, {
+                        url: playlist.portalUrl,
+                        macAddress: playlist.macAddress,
+                        params,
+                        token,
+                        serialNumber,
+                    });
+                },
+            })
+        ),
+        withMethods(
+            (
+                store,
+                dataService = inject(DataService),
+                stalkerSession = inject(StalkerSessionService)
+            ) => ({
+                async setCurrentPlaylist(playlist: PlaylistMeta | undefined) {
+                    stalkerSession.setActiveWatchdogPlaylist(
+                        playlist
+                            ? toStalkerSessionPlaylist(playlist)
+                            : undefined
+                    );
+                    patchState(store, { currentPlaylist: playlist });
+
+                    // Ensure Stalker playlist exists in SQLite for playback positions
+                    // Only sync if this is actually a Stalker playlist (has macAddress and portalUrl)
+                    if (
+                        playlist &&
+                        dataService.isElectron &&
+                        playlist._id &&
+                        playlist.macAddress &&
+                        playlist.portalUrl
+                    ) {
+                        try {
+                            const electronApi = (window as StalkerPortalWindow)
+                                .electron;
+                            if (!electronApi) {
+                                return;
+                            }
+
+                            const playlistId = String(playlist._id);
+                            // Check if playlist exists in SQLite
+                            const existing =
+                                await electronApi.dbGetPlaylist(playlistId);
+                            if (!existing) {
+                                // Create playlist in SQLite
+                                await electronApi.dbCreatePlaylist({
+                                    id: playlistId,
+                                    name: playlist.title || '',
+                                    macAddress: playlist.macAddress || '',
+                                    url: playlist.portalUrl || '',
+                                    type: 'stalker',
+                                });
+                            }
+                        } catch (error) {
+                            logger.error(
+                                'Error syncing Stalker playlist to SQLite',
+                                error
+                            );
+                        }
+                    }
+                },
+            })
+        )
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-recent.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-recent.feature.ts
new file mode 100644
index 0000000..777c7ee
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-recent.feature.ts
@@ -0,0 +1,97 @@
+import { inject } from '@angular/core';
+import { signalStoreFeature, withMethods } from '@ngrx/signals';
+import { Store } from '@ngrx/store';
+import { PlaylistsService } from 'services';
+import { PlaylistMeta, StalkerPortalItem } from 'shared-interfaces';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import { StalkerContentType } from '../stalker-store.contracts';
+import {
+    buildStalkerRecentlyViewedPayload,
+    dispatchStalkerPlaylistMetaUpdate,
+} from '../utils';
+
+interface RecentStoreContext {
+    currentPlaylist(): PlaylistMeta | undefined;
+    selectedContentType(): StalkerContentType;
+}
+
+type RecentlyViewedPayload = StalkerPortalItem & {
+    id?: string | number;
+    title?: string;
+};
+
+/**
+ * Recently-viewed concern methods.
+ */
+export function withStalkerRecent() {
+    const logger = createLogger('withStalkerRecent');
+    return signalStoreFeature(
+        withMethods(
+            (
+                store,
+                playlistService = inject(PlaylistsService),
+                ngrxStore = inject(Store)
+            ) => {
+                const storeContext = store as typeof store & RecentStoreContext;
+
+                return {
+                    addToRecentlyViewed(item: RecentlyViewedPayload) {
+                        const portalId = storeContext.currentPlaylist()?._id;
+                        if (!portalId) {
+                            return;
+                        }
+
+                        const selectedContentType =
+                            storeContext.selectedContentType();
+                        const recentItem = buildStalkerRecentlyViewedPayload(
+                            item,
+                            selectedContentType
+                        );
+                        playlistService
+                            .addPortalRecentlyViewed(portalId, recentItem)
+                            .subscribe((updatedPlaylist) => {
+                                dispatchStalkerPlaylistMetaUpdate(
+                                    ngrxStore,
+                                    portalId,
+                                    {
+                                        recentlyViewed:
+                                            updatedPlaylist?.recentlyViewed,
+                                    }
+                                );
+                            });
+                    },
+                    removeFromRecentlyViewed(
+                        itemId: string | number,
+                        onComplete?: () => void
+                    ) {
+                        const portalId = storeContext.currentPlaylist()?._id;
+                        if (!portalId) {
+                            return;
+                        }
+
+                        playlistService
+                            .removeFromPortalRecentlyViewed(portalId, itemId)
+                            .subscribe({
+                                next: (updatedPlaylist) => {
+                                    dispatchStalkerPlaylistMetaUpdate(
+                                        ngrxStore,
+                                        portalId,
+                                        {
+                                            recentlyViewed:
+                                                updatedPlaylist?.recentlyViewed,
+                                        }
+                                    );
+                                    onComplete?.();
+                                },
+                                error: (error) =>
+                                    logger.error(
+                                        'Failed to remove item from recently viewed',
+                                        error
+                                    ),
+                            });
+                    },
+                };
+            }
+        )
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-selection.feature.spec.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-selection.feature.spec.ts
new file mode 100644
index 0000000..54c3f18
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-selection.feature.spec.ts
@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { signalStore } from '@ngrx/signals';
+import { withStalkerSelection } from './with-stalker-selection.feature';
+
+const TestSelectionStore = signalStore(withStalkerSelection());
+
+describe('withStalkerSelection', () => {
+    let store: InstanceType<typeof TestSelectionStore>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [TestSelectionStore],
+        });
+
+        store = TestBed.inject(TestSelectionStore);
+    });
+
+    it('resets paging when the selected category changes', () => {
+        store.setPage(3);
+        store.setSelectedCategory('series-7');
+
+        expect(store.selectedCategoryId()).toBe('series-7');
+        expect(store.page()).toBe(0);
+    });
+
+    it('keeps paging when the search phrase is unchanged', () => {
+        store.setSearchPhrase('matrix');
+        store.setPage(2);
+
+        store.setSearchPhrase('matrix');
+
+        expect(store.searchPhrase()).toBe('matrix');
+        expect(store.page()).toBe(2);
+    });
+
+    it('resets paging when the search phrase changes', () => {
+        store.setPage(2);
+
+        store.setSearchPhrase('matrix');
+
+        expect(store.searchPhrase()).toBe('matrix');
+        expect(store.page()).toBe(0);
+    });
+
+    it('synchronizes entity ids when the selected item changes', () => {
+        store.setSelectedItem({
+            id: '55',
+            name: 'Example',
+        });
+
+        expect(store.selectedVodId()).toBe('55');
+        expect(store.selectedSerialId()).toBe('55');
+        expect(store.selectedItvId()).toBe('55');
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-selection.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-selection.feature.ts
new file mode 100644
index 0000000..f2bb078
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-selection.feature.ts
@@ -0,0 +1,111 @@
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { StalkerVodSource } from '../../models';
+import { normalizeStalkerEntityId } from '../../stalker-vod.utils';
+
+/**
+ * Selection/pagination/search feature state.
+ */
+export interface StalkerSelectionState {
+    selectedContentType: 'vod' | 'itv' | 'series';
+    selectedCategoryId: string | null | undefined;
+    selectedVodId: string | undefined;
+    selectedSerialId: string | undefined;
+    selectedItvId: string | undefined;
+    limit: number;
+    page: number;
+    searchPhrase: string;
+    selectedItem: StalkerVodSource | null | undefined;
+}
+
+const initialSelectionState: StalkerSelectionState = {
+    selectedContentType: 'vod',
+    selectedCategoryId: undefined,
+    selectedVodId: undefined,
+    selectedSerialId: undefined,
+    selectedItvId: undefined,
+    limit: 14,
+    page: 0,
+    searchPhrase: '',
+    selectedItem: undefined,
+};
+
+export function withStalkerSelection() {
+    return signalStoreFeature(
+        withState<StalkerSelectionState>(initialSelectionState),
+        withMethods((store) => ({
+            setSelectedContentType(type: 'vod' | 'itv' | 'series') {
+                patchState(store, { selectedContentType: type });
+            },
+            setSelectedCategory(id: string | number | null) {
+                const newId =
+                    id !== null && id !== undefined ? String(id) : null;
+                if (store.selectedCategoryId() === newId) {
+                    return;
+                }
+                patchState(store, {
+                    selectedCategoryId: newId,
+                    page: 0,
+                });
+            },
+            setSelectedSerialId(id: string) {
+                patchState(store, { selectedSerialId: id });
+            },
+            setSelectedVodId(id: string) {
+                patchState(store, { selectedVodId: id });
+            },
+            setSelectedItvId(id: string) {
+                patchState(store, { selectedItvId: id });
+            },
+            setLimit(limit: number) {
+                if (store.limit() === limit) {
+                    return;
+                }
+
+                patchState(store, { limit });
+            },
+            setPage(page: number) {
+                if (store.page() === page) {
+                    return;
+                }
+
+                patchState(store, { page });
+            },
+            setSearchPhrase(phrase: string) {
+                if (store.searchPhrase() === phrase) {
+                    return;
+                }
+
+                patchState(store, { searchPhrase: phrase, page: 0 });
+            },
+            setSelectedItem(selectedItem: StalkerVodSource | null | undefined) {
+                const selectedIdRaw =
+                    selectedItem?.id !== undefined && selectedItem?.id !== null
+                        ? selectedItem.id
+                        : undefined;
+                const selectedId =
+                    selectedIdRaw !== undefined
+                        ? normalizeStalkerEntityId(selectedIdRaw)
+                        : undefined;
+                patchState(store, {
+                    selectedVodId: selectedId,
+                    selectedSerialId: selectedId,
+                    selectedItvId: selectedId,
+                    selectedItem,
+                });
+            },
+            clearSelectedItem() {
+                patchState(store, {
+                    selectedVodId: undefined,
+                    selectedSerialId: undefined,
+                    selectedItvId: undefined,
+                    selectedItem: undefined,
+                });
+            },
+        }))
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-series.feature.ts b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-series.feature.ts
new file mode 100644
index 0000000..1d9989a
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/features/with-stalker-series.feature.ts
@@ -0,0 +1,276 @@
+import { computed, inject, resource } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withComputed,
+    withMethods,
+    withProps,
+    withState,
+} from '@ngrx/signals';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import { DataService } from 'services';
+import { StalkerPortalActions } from 'shared-interfaces';
+import {
+    StalkerSeason,
+    StalkerVodSeriesEpisode,
+    StalkerVodSeriesSeason,
+} from '../../models';
+import { StalkerContentTypes } from '../../stalker-content-types';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { StalkerSeriesFeatureStoreContract } from '../stalker-store.contracts';
+import {
+    executeStalkerRequest,
+    sortByNumericValue,
+    sortEpisodesByNumber,
+    sortVodSeriesSeasonsByNumber,
+} from '../utils';
+
+/**
+ * Regular-series and VOD-series feature state.
+ */
+export interface StalkerSeriesState {
+    /** For VOD items that are actually series (Ministra plugin is_series=1) */
+    vodSeriesSeasons: StalkerVodSeriesSeason[];
+    vodSeriesEpisodes: StalkerVodSeriesEpisode[];
+    selectedVodSeriesSeasonId: string | undefined;
+}
+
+const initialSeriesState: StalkerSeriesState = {
+    vodSeriesSeasons: [],
+    vodSeriesEpisodes: [],
+    selectedVodSeriesSeasonId: undefined,
+};
+
+interface StalkerSeriesResponse<T> {
+    js?:
+        | {
+              data?: T[];
+          }
+        | T[];
+}
+
+type StalkerSeriesStoreContext = StalkerSeriesFeatureStoreContract;
+
+function extractSeriesItems<T>(response: StalkerSeriesResponse<T>): T[] {
+    if (Array.isArray(response?.js)) {
+        return response.js;
+    }
+
+    if (Array.isArray(response?.js?.data)) {
+        return response.js.data;
+    }
+
+    return [];
+}
+
+function toMovieId(value: unknown): string {
+    const raw = String(value ?? '').trim();
+    if (!raw) {
+        return '';
+    }
+
+    return raw.includes(':') ? raw.split(':')[0] : raw;
+}
+
+export function withStalkerSeries() {
+    const logger = createLogger('withStalkerSeries');
+
+    return signalStoreFeature(
+        withState<StalkerSeriesState>(initialSeriesState),
+        withProps(
+            (
+                store,
+                dataService = inject(DataService),
+                stalkerSession = inject(StalkerSessionService)
+            ) => {
+                const storeContext = store as typeof store &
+                    StalkerSeriesStoreContext;
+                const requestDeps = {
+                    dataService,
+                    stalkerSession,
+                };
+
+                return {
+                    serialSeasonsResource: resource({
+                        params: () => ({
+                            itemId: storeContext.selectedSerialId(),
+                            currentPlaylist: storeContext.currentPlaylist(),
+                        }),
+                        loader: async ({
+                            params,
+                        }): Promise<StalkerSeason[]> => {
+                            const playlist = params.currentPlaylist;
+                            const movieId = toMovieId(params.itemId);
+
+                            if (!playlist || !movieId) {
+                                return [];
+                            }
+
+                            const response = await executeStalkerRequest<
+                                StalkerSeriesResponse<StalkerSeason>
+                            >(requestDeps, playlist, {
+                                action: StalkerContentTypes.series
+                                    .getContentAction,
+                                type: 'series',
+                                movie_id: movieId,
+                            });
+
+                            const seasons = extractSeriesItems(response);
+
+                            if (seasons.length === 0) {
+                                logger.warn(
+                                    'Invalid seasons response',
+                                    response
+                                );
+                                return [];
+                            }
+
+                            return sortByNumericValue(seasons);
+                        },
+                    }),
+                    vodSeriesSeasonsResource: resource({
+                        params: () => ({
+                            currentPlaylist: storeContext.currentPlaylist(),
+                            selectedItem: storeContext.selectedItem(),
+                            selectedContentType:
+                                storeContext.selectedContentType(),
+                        }),
+                        loader: async ({
+                            params,
+                        }): Promise<StalkerVodSeriesSeason[]> => {
+                            const { currentPlaylist, selectedItem } = params;
+
+                            logger.debug(
+                                'vodSeriesSeasonsResource loader called',
+                                {
+                                    item: selectedItem,
+                                    isSeries: selectedItem?.is_series,
+                                    currentPlaylist,
+                                }
+                            );
+
+                            if (
+                                !currentPlaylist ||
+                                params.selectedContentType !== 'vod' ||
+                                !selectedItem ||
+                                selectedItem.id === undefined ||
+                                selectedItem.id === null ||
+                                !selectedItem.is_series
+                            ) {
+                                logger.debug(
+                                    'vodSeriesSeasonsResource skipped - conditions not met'
+                                );
+                                return [];
+                            }
+
+                            const response = await executeStalkerRequest<
+                                StalkerSeriesResponse<StalkerVodSeriesSeason>
+                            >(requestDeps, currentPlaylist, {
+                                action: StalkerPortalActions.GetOrderedList,
+                                type: 'vod',
+                                movie_id: selectedItem.id,
+                                p: '1',
+                            });
+
+                            const seasonItems = extractSeriesItems(response);
+                            if (seasonItems.length === 0) {
+                                logger.debug(
+                                    'vodSeriesSeasonsResource - no response data'
+                                );
+                                return [];
+                            }
+
+                            logger.debug(
+                                'vodSeriesSeasonsResource response data',
+                                seasonItems
+                            );
+
+                            const seasons = seasonItems.filter(
+                                (item) => item.is_season === true
+                            );
+                            logger.debug(
+                                'vodSeriesSeasonsResource filtered seasons',
+                                seasons
+                            );
+
+                            return sortVodSeriesSeasonsByNumber(seasons);
+                        },
+                    }),
+                };
+            }
+        ),
+        withComputed((store) => {
+            const storeContext = store as typeof store &
+                StalkerSeriesStoreContext;
+
+            return {
+                getSerialSeasonsResource: computed(() =>
+                    storeContext.serialSeasonsResource.value()
+                ),
+                isSerialSeasonsLoading: computed(() =>
+                    storeContext.serialSeasonsResource.isLoading()
+                ),
+                getVodSeriesSeasonsResource: computed(() =>
+                    storeContext.vodSeriesSeasonsResource.value()
+                ),
+                isVodSeriesSeasonsLoading: computed(() =>
+                    storeContext.vodSeriesSeasonsResource.isLoading()
+                ),
+            };
+        }),
+        withMethods(
+            (
+                store,
+                dataService = inject(DataService),
+                stalkerSession = inject(StalkerSessionService)
+            ) => {
+                const storeContext = store as typeof store &
+                    Pick<StalkerSeriesStoreContext, 'currentPlaylist'>;
+                const requestDeps = {
+                    dataService,
+                    stalkerSession,
+                };
+
+                return {
+                    async fetchVodSeriesEpisodes(
+                        videoId: string,
+                        seasonId: string
+                    ): Promise<StalkerVodSeriesEpisode[]> {
+                        const playlist = storeContext.currentPlaylist();
+                        if (!playlist) {
+                            return [];
+                        }
+
+                        const response = await executeStalkerRequest<
+                            StalkerSeriesResponse<StalkerVodSeriesEpisode>
+                        >(requestDeps, playlist, {
+                            action: StalkerPortalActions.GetOrderedList,
+                            type: 'vod',
+                            movie_id: videoId,
+                            season_id: seasonId,
+                            p: '1',
+                        });
+
+                        const episodeItems = extractSeriesItems(response);
+                        if (episodeItems.length === 0) {
+                            return [];
+                        }
+
+                        const episodes = sortEpisodesByNumber(
+                            episodeItems.filter(
+                                (item) => item.is_episode === true
+                            )
+                        );
+
+                        patchState(store, {
+                            vodSeriesEpisodes: episodes,
+                            selectedVodSeriesSeasonId: seasonId,
+                        });
+
+                        return episodes;
+                    },
+                };
+            }
+        )
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/index.ts b/libs/portal/stalker/data-access/src/lib/stores/index.ts
new file mode 100644
index 0000000..87e9faf
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/index.ts
@@ -0,0 +1,3 @@
+export * from './features';
+export * from './utils';
+
diff --git a/libs/portal/stalker/data-access/src/lib/stores/stalker-store.contracts.ts b/libs/portal/stalker/data-access/src/lib/stores/stalker-store.contracts.ts
new file mode 100644
index 0000000..5db70d4
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/stalker-store.contracts.ts
@@ -0,0 +1,81 @@
+import { PlaylistMeta, StalkerPortalItem } from 'shared-interfaces';
+import {
+    StalkerCategoryItem,
+    StalkerContentItem,
+    StalkerSeason,
+    StalkerVodSeriesSeason,
+    StalkerVodSource,
+} from '../models';
+
+export type StalkerContentType = 'vod' | 'series' | 'itv';
+
+export interface ResourceState<T> {
+    value(): T;
+    isLoading(): boolean;
+    error(): unknown;
+}
+
+export interface StalkerPortalStoreContract {
+    currentPlaylist(): PlaylistMeta | undefined;
+}
+
+export interface StalkerSelectionStoreContract {
+    selectedContentType(): StalkerContentType;
+    selectedCategoryId(): string | null | undefined;
+    selectedVodId(): string | undefined;
+    selectedSerialId(): string | undefined;
+    selectedItvId(): string | undefined;
+    limit(): number;
+    page(): number;
+    searchPhrase(): string;
+    selectedItem(): StalkerVodSource | null | undefined;
+}
+
+export interface StalkerCategorySliceContract {
+    vodCategories(): StalkerCategoryItem[];
+    seriesCategories(): StalkerCategoryItem[];
+    itvCategories(): StalkerCategoryItem[];
+}
+
+export interface StalkerContentFeatureStoreContract
+    extends
+        StalkerPortalStoreContract,
+        StalkerSelectionStoreContract,
+        StalkerCategorySliceContract {
+    getContentResource: ResourceState<StalkerContentItem[]>;
+    categoryResource: ResourceState<StalkerCategoryItem[]>;
+}
+
+export interface StalkerSeriesFeatureStoreContract
+    extends
+        StalkerPortalStoreContract,
+        Pick<
+            StalkerSelectionStoreContract,
+            'selectedContentType' | 'selectedItem' | 'selectedSerialId'
+        > {
+    serialSeasonsResource: ResourceState<StalkerSeason[]>;
+    vodSeriesSeasonsResource: ResourceState<StalkerVodSeriesSeason[]>;
+}
+
+export interface StalkerRecentCallbackStoreContract {
+    addToRecentlyViewed?: (item: StalkerRecentlyViewedItem) => void;
+}
+
+export type StalkerRecentlyViewedItem = StalkerPortalItem & {
+    id: string | number;
+    title: string;
+};
+
+export interface StalkerPlayerFeatureStoreContract
+    extends
+        StalkerPortalStoreContract,
+        Pick<
+            StalkerSelectionStoreContract,
+            'selectedContentType' | 'selectedItem'
+        >,
+        StalkerRecentCallbackStoreContract {}
+
+export interface StalkerEpgFeatureStoreContract
+    extends
+        StalkerPortalStoreContract,
+        Pick<StalkerSelectionStoreContract, 'selectedItvId'> {}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/index.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/index.ts
new file mode 100644
index 0000000..e6dd2d0
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/index.ts
@@ -0,0 +1,5 @@
+export * from './stalker-collection-persistence.utils';
+export * from './stalker-player-request.utils';
+export * from './stalker-request.utils';
+export * from './stalker-content-mappers';
+export * from './stalker-sorting';
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-collection-persistence.utils.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-collection-persistence.utils.ts
new file mode 100644
index 0000000..959a77d
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-collection-persistence.utils.ts
@@ -0,0 +1,76 @@
+import { Store } from '@ngrx/store';
+import { PlaylistActions } from 'm3u-state';
+import { PlaylistMeta, StalkerPortalItem } from 'shared-interfaces';
+import { normalizeStalkerEntityId } from '../../stalker-vod.utils';
+import {
+    StalkerContentType,
+    StalkerRecentlyViewedItem,
+} from '../stalker-store.contracts';
+
+export type StalkerCollectionPayload = StalkerPortalItem & {
+    cmd?: string;
+    cover?: string;
+    id?: string | number;
+    stream_id?: string | number;
+    title?: string;
+};
+
+export function resolveStalkerCategoryId(
+    value: unknown,
+    fallback: string
+): string {
+    const normalized = String(value ?? '').trim();
+    return normalized || fallback;
+}
+
+export function getStalkerSeriesRecentMetadata(
+    selectedContentType: StalkerContentType
+): {
+    category_id?: 'series';
+    is_series?: true;
+} {
+    if (selectedContentType !== 'series') {
+        return {};
+    }
+
+    return {
+        category_id: 'series',
+        is_series: true,
+    };
+}
+
+export function buildStalkerRecentlyViewedPayload(
+    item: StalkerCollectionPayload,
+    selectedContentType: StalkerContentType
+): StalkerRecentlyViewedItem {
+    return {
+        ...item,
+        category_id: resolveStalkerCategoryId(
+            item.category_id,
+            selectedContentType
+        ),
+        ...getStalkerSeriesRecentMetadata(selectedContentType),
+        added_at: Date.now(),
+        id: normalizeStalkerEntityId(item.id ?? item.stream_id ?? ''),
+        title: item.title ?? item.name ?? item.o_name ?? '',
+    };
+}
+
+export function dispatchStalkerPlaylistMetaUpdate(
+    ngrxStore: Store,
+    playlistId: string | undefined,
+    changes: Pick<PlaylistMeta, 'favorites' | 'recentlyViewed'>
+): void {
+    if (!playlistId) {
+        return;
+    }
+
+    ngrxStore.dispatch(
+        PlaylistActions.updatePlaylistMeta({
+            playlist: {
+                _id: playlistId,
+                ...changes,
+            } as PlaylistMeta,
+        })
+    );
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-content-mappers.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-content-mappers.ts
new file mode 100644
index 0000000..937ce59
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-content-mappers.ts
@@ -0,0 +1,77 @@
+import {
+    StalkerContentItem,
+    StalkerItvChannel,
+    StalkerVodSource,
+} from '../../models';
+
+/**
+ * Convert relative URLs to absolute URLs using the portal base URL
+ * Handles screenshot_uri and cmd paths that come as relative from the server
+ */
+export function makeAbsoluteUrl(baseUrl: string, relativePath: string): string {
+    if (!relativePath) return '';
+    // Already absolute URL
+    if (
+        relativePath.startsWith('http://') ||
+        relativePath.startsWith('https://')
+    ) {
+        return relativePath;
+    }
+    // Parse the base URL to get origin
+    try {
+        const url = new URL(baseUrl);
+        // Ensure the relative path starts with /
+        const path = relativePath.startsWith('/')
+            ? relativePath
+            : `/${relativePath}`;
+        return `${url.origin}${path}`;
+    } catch {
+        return relativePath;
+    }
+}
+
+/**
+ * Post-process stalker items to convert relative URLs to absolute
+ */
+export function processItemUrls<T extends StalkerVodSource>(
+    item: T,
+    portalUrl: string
+): T {
+    const processed = { ...item };
+
+    // Convert screenshot_uri to absolute URL
+    if (processed.screenshot_uri) {
+        processed.screenshot_uri = makeAbsoluteUrl(
+            portalUrl,
+            processed.screenshot_uri
+        );
+    }
+
+    return processed;
+}
+
+export function toStalkerContentItem(
+    item: StalkerVodSource,
+    portalUrl: string
+): StalkerContentItem {
+    const processed = processItemUrls(item, portalUrl);
+    return {
+        ...processed,
+        cover: processed.screenshot_uri,
+    };
+}
+
+export function toStalkerItvChannel(item: StalkerContentItem): StalkerItvChannel {
+    return {
+        ...item,
+        id: item.id ?? item.stream_id ?? '',
+        cmd: String(item.cmd ?? ''),
+        name:
+            typeof item.name === 'string' ? item.name : undefined,
+        o_name:
+            typeof item.o_name === 'string' ? item.o_name : undefined,
+        logo:
+            typeof item.logo === 'string' ? item.logo : undefined,
+    };
+}
+
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-player-request.utils.spec.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-player-request.utils.spec.ts
new file mode 100644
index 0000000..138ac6c
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-player-request.utils.spec.ts
@@ -0,0 +1,136 @@
+import { PlaylistMeta, StalkerPortalActions } from 'shared-interfaces';
+import { StalkerSessionService } from '../../stalker-session.service';
+import {
+    fetchStalkerExpireDate,
+    fetchStalkerMovieFileId,
+    fetchStalkerPlaybackLink,
+    shouldResolveMovieFileId,
+} from './stalker-player-request.utils';
+
+const PLAYLIST = {
+    _id: 'playlist-1',
+    title: 'Demo Stalker',
+    count: 0,
+    autoRefresh: false,
+    importDate: '2026-04-14T00:00:00.000Z',
+    portalUrl: 'http://demo.example/stalker_portal/server/load.php',
+    macAddress: '00:1A:79:00:00:01',
+    isFullStalkerPortal: false,
+} as PlaylistMeta;
+
+describe('stalker-player-request.utils', () => {
+    let dataService: {
+        sendIpcEvent: jest.Mock<Promise<unknown>, unknown[]>;
+    };
+    let stalkerSession: Pick<StalkerSessionService, 'makeAuthenticatedRequest'>;
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        stalkerSession = {
+            makeAuthenticatedRequest: jest.fn(),
+        };
+    });
+
+    it('builds create_link requests and normalizes relative portal URLs', async () => {
+        dataService.sendIpcEvent.mockResolvedValue({
+            js: { cmd: '/media/video_77.mpg' },
+        });
+
+        const streamUrl = await fetchStalkerPlaybackLink(
+            {
+                dataService: dataService as never,
+                stalkerSession: stalkerSession as StalkerSessionService,
+            },
+            {
+                playlist: PLAYLIST,
+                selectedContentType: 'series',
+                cmd: '/media/source.mpg',
+                series: 3,
+            }
+        );
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                url: PLAYLIST.portalUrl,
+                macAddress: PLAYLIST.macAddress,
+                params: expect.objectContaining({
+                    action: StalkerPortalActions.CreateLink,
+                    cmd: '/media/source.mpg',
+                    type: 'vod',
+                    series: '3',
+                    download: '0',
+                    disable_ad: '0',
+                    JsHttpRequest: '1-xml',
+                }),
+            })
+        );
+        expect(streamUrl).toBe(
+            'http://demo.example/stalker_portal/media/video_77.mpg'
+        );
+    });
+
+    it('detects file-id fallback candidates and reads the movie file id', async () => {
+        expect(
+            shouldResolveMovieFileId(
+                { has_files: true },
+                '/media/source_42.mpg'
+            )
+        ).toBe(true);
+        expect(
+            shouldResolveMovieFileId({ has_files: true }, '/media/file_42.mpg')
+        ).toBe(false);
+
+        dataService.sendIpcEvent.mockResolvedValue({
+            js: {
+                data: [{ id: 77 }],
+            },
+        });
+
+        await expect(
+            fetchStalkerMovieFileId(
+                {
+                    dataService: dataService as never,
+                    stalkerSession: stalkerSession as StalkerSessionService,
+                },
+                PLAYLIST,
+                '22'
+            )
+        ).resolves.toBe('77');
+
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    action: StalkerPortalActions.GetOrderedList,
+                    type: 'vod',
+                    movie_id: '22',
+                    p: '1',
+                }),
+            })
+        );
+    });
+
+    it('returns a localized expire date string from account info', async () => {
+        const expireDate = 1_713_139_200;
+        dataService.sendIpcEvent.mockResolvedValue({
+            js: {
+                account_info: {
+                    expire_date: expireDate,
+                },
+            },
+        });
+
+        await expect(
+            fetchStalkerExpireDate(
+                {
+                    dataService: dataService as never,
+                    stalkerSession: stalkerSession as StalkerSessionService,
+                },
+                PLAYLIST
+            )
+        ).resolves.toBe(new Date(expireDate * 1000).toLocaleDateString());
+    });
+});
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-player-request.utils.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-player-request.utils.ts
new file mode 100644
index 0000000..cc2c0f1
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-player-request.utils.ts
@@ -0,0 +1,204 @@
+import { DataService } from 'services';
+import {
+    PlaylistMeta,
+    StalkerPortalActions,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import { StalkerSessionService } from '../../stalker-session.service';
+import { StalkerContentTypes } from '../../stalker-content-types';
+import { StalkerContentType } from '../stalker-store.contracts';
+import { executeStalkerRequest } from './stalker-request.utils';
+
+export interface StalkerPlayerResponse {
+    js?: {
+        error?: string;
+        cmd?: string;
+        data?: Array<{ id?: string | number }>;
+        account_info?: {
+            expire_date?: string | number;
+        };
+    };
+}
+
+export interface StalkerPlayerRequestDeps {
+    dataService: DataService;
+    stalkerSession: StalkerSessionService;
+}
+
+export interface StalkerPlayableItemLike extends StalkerPortalItem {
+    cmd?: string;
+    has_files?: unknown;
+}
+
+export function normalizeStalkerPlaybackCommand(value: string): string {
+    const trimmed = String(value ?? '').trim();
+    if (!trimmed) {
+        return '';
+    }
+
+    const splitAt = trimmed.indexOf(' ');
+    if (splitAt > 0) {
+        const candidate = trimmed.slice(splitAt + 1).trim();
+        if (
+            candidate.startsWith('http://') ||
+            candidate.startsWith('https://') ||
+            candidate.startsWith('/') ||
+            candidate.startsWith('?')
+        ) {
+            return candidate;
+        }
+    }
+
+    return trimmed;
+}
+
+export function resolveStalkerPlaybackUrl(
+    portalUrl: string,
+    originalCmd: string,
+    responseCmd: string
+): string {
+    let url = normalizeStalkerPlaybackCommand(responseCmd);
+    if (!url) {
+        return '';
+    }
+
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+        return url;
+    }
+
+    try {
+        const portalUrlObj = new URL(portalUrl);
+        const pathParts = portalUrlObj.pathname.split('/');
+        let basePath = '';
+
+        for (let index = 0; index < pathParts.length; index += 1) {
+            if (
+                pathParts[index] === 'stalker_portal' ||
+                pathParts[index] === 'c' ||
+                pathParts[index] === 'portal'
+            ) {
+                basePath = '/' + pathParts.slice(1, index + 1).join('/');
+                break;
+            }
+        }
+
+        if (url.startsWith('?')) {
+            const normalizedCmd = normalizeStalkerPlaybackCommand(originalCmd);
+            if (
+                normalizedCmd.startsWith('http://') ||
+                normalizedCmd.startsWith('https://')
+            ) {
+                return `${normalizedCmd}${url}`;
+            }
+
+            return `${portalUrlObj.origin}${basePath}${normalizedCmd}${url}`;
+        }
+
+        if (url.startsWith('/')) {
+            return `${portalUrlObj.origin}${basePath}${url}`;
+        }
+    } catch {
+        return url;
+    }
+
+    return url;
+}
+
+export function shouldResolveMovieFileId(
+    item: Pick<StalkerPlayableItemLike, 'has_files'> | null | undefined,
+    cmd: string
+): boolean {
+    return (
+        item?.has_files !== undefined &&
+        !cmd.includes('://') &&
+        cmd.includes('/media/') &&
+        !cmd.includes('/media/file_')
+    );
+}
+
+export async function fetchStalkerPlaybackLink(
+    deps: StalkerPlayerRequestDeps,
+    options: {
+        playlist: PlaylistMeta;
+        selectedContentType: StalkerContentType;
+        cmd: string;
+        series?: number;
+        forcedContentType?: StalkerContentType;
+    }
+): Promise<string> {
+    const contentType =
+        options.forcedContentType ?? options.selectedContentType;
+    const response = await executeStalkerRequest<StalkerPlayerResponse>(
+        deps,
+        options.playlist,
+        {
+            action: StalkerContentTypes[contentType].getLink,
+            cmd: options.cmd,
+            type: options.series ? 'vod' : contentType,
+            disable_ad: '0',
+            download: '0',
+            JsHttpRequest: '1-xml',
+            ...(options.series ? { series: String(options.series) } : {}),
+        }
+    );
+
+    if (response.js?.error) {
+        throw new Error(response.js.error);
+    }
+
+    const streamUrl = resolveStalkerPlaybackUrl(
+        options.playlist.portalUrl ?? '',
+        options.cmd,
+        response.js?.cmd ?? ''
+    );
+
+    if (!streamUrl) {
+        throw new Error('nothing_to_play');
+    }
+
+    return streamUrl;
+}
+
+export async function fetchStalkerMovieFileId(
+    deps: StalkerPlayerRequestDeps,
+    playlist: PlaylistMeta,
+    movieId: string
+): Promise<string | null> {
+    const response = await executeStalkerRequest<StalkerPlayerResponse>(
+        deps,
+        playlist,
+        {
+            action: StalkerPortalActions.GetOrderedList,
+            type: 'vod',
+            movie_id: movieId,
+            p: '1',
+        }
+    );
+
+    const fileId = response?.js?.data?.[0]?.id;
+    return fileId == null ? null : String(fileId);
+}
+
+export async function fetchStalkerExpireDate(
+    deps: StalkerPlayerRequestDeps,
+    playlist: PlaylistMeta
+): Promise<string> {
+    const response = await executeStalkerRequest<StalkerPlayerResponse>(
+        deps,
+        playlist,
+        {
+            type: 'account_info',
+            action: 'get_main_info',
+            JsHttpRequest: '1-xml',
+        }
+    );
+
+    const expireDate = response?.js?.account_info?.expire_date;
+    const numericExpireDate = Number(expireDate);
+
+    if (expireDate && !Number.isNaN(numericExpireDate)) {
+        return new Date(numericExpireDate * 1000).toLocaleDateString();
+    }
+
+    return expireDate ? String(expireDate) : 'Unknown';
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-request.utils.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-request.utils.ts
new file mode 100644
index 0000000..a9edff9
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-request.utils.ts
@@ -0,0 +1,34 @@
+import { DataService } from 'services';
+import { Playlist, PlaylistMeta, STALKER_REQUEST } from 'shared-interfaces';
+import { StalkerSessionService } from '../../stalker-session.service';
+
+export interface StalkerRequestDeps {
+    dataService: DataService;
+    stalkerSession: StalkerSessionService;
+}
+
+export function toStalkerSessionPlaylist(playlist: PlaylistMeta): Playlist {
+    return {
+        lastUsage: '',
+        ...playlist,
+    } as Playlist;
+}
+
+export async function executeStalkerRequest<T>(
+    deps: StalkerRequestDeps,
+    playlist: PlaylistMeta,
+    params: Record<string, string | number>
+): Promise<T> {
+    if (playlist.isFullStalkerPortal) {
+        return deps.stalkerSession.makeAuthenticatedRequest<T>(
+            toStalkerSessionPlaylist(playlist),
+            params
+        );
+    }
+
+    return deps.dataService.sendIpcEvent<T>(STALKER_REQUEST, {
+        url: playlist.portalUrl,
+        macAddress: playlist.macAddress,
+        params,
+    });
+}
diff --git a/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-sorting.ts b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-sorting.ts
new file mode 100644
index 0000000..75e693f
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/lib/stores/utils/stalker-sorting.ts
@@ -0,0 +1,48 @@
+import {
+    StalkerSeason,
+    StalkerVodSeriesEpisode,
+    StalkerVodSeriesSeason,
+} from '../../models';
+
+export function extractNumericValue(str: string): number {
+    const matches = str.match(/\d+/);
+    if (matches) {
+        return parseInt(matches[0], 10);
+    }
+    return 0;
+}
+
+export function sortByNumericValue(array: StalkerSeason[]): StalkerSeason[] {
+    if (!array) return [];
+    const key = 'name';
+    return [...array].sort((a, b) => {
+        const numericA = extractNumericValue(a[key]);
+        const numericB = extractNumericValue(b[key]);
+        return numericA - numericB;
+    });
+}
+
+export function sortVodSeriesSeasonsByNumber(
+    array: StalkerVodSeriesSeason[]
+): StalkerVodSeriesSeason[] {
+    if (!array) return [];
+    return [...array].sort((a, b) => {
+        const numA = Number(a.season_number ?? 0) || 0;
+        const numB = Number(b.season_number ?? 0) || 0;
+        return numA - numB;
+    });
+}
+
+/**
+ * Sort episodes by series_number in ascending numeric order (1, 2, 3... not "1", "10", "2")
+ */
+export function sortEpisodesByNumber(
+    episodes: StalkerVodSeriesEpisode[]
+): StalkerVodSeriesEpisode[] {
+    if (!episodes) return [];
+    return [...episodes].sort((a, b) => {
+        const numA = Number(a.series_number ?? 0) || 0;
+        const numB = Number(b.series_number ?? 0) || 0;
+        return numA - numB;
+    });
+}
diff --git a/libs/portal/stalker/data-access/src/test-setup.ts b/libs/portal/stalker/data-access/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/stalker/data-access/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/stalker/data-access/tsconfig.json b/libs/portal/stalker/data-access/tsconfig.json
new file mode 100644
index 0000000..dd63ae9
--- /dev/null
+++ b/libs/portal/stalker/data-access/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/portal/stalker/data-access/tsconfig.lib.json b/libs/portal/stalker/data-access/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/portal/stalker/data-access/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/stalker/data-access/tsconfig.spec.json b/libs/portal/stalker/data-access/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/stalker/data-access/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/stalker/feature/jest.config.ts b/libs/portal/stalker/feature/jest.config.ts
new file mode 100644
index 0000000..1245565
--- /dev/null
+++ b/libs/portal/stalker/feature/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-stalker-feature',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/stalker/feature',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/stalker/feature/project.json b/libs/portal/stalker/feature/project.json
new file mode 100644
index 0000000..820cd6c
--- /dev/null
+++ b/libs/portal/stalker/feature/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-stalker-feature",
+    "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/stalker/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:stalker", "type:feature"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/stalker/feature/jest.config.ts",
+                "tsConfig": "libs/portal/stalker/feature/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/stalker/feature/src/index.ts b/libs/portal/stalker/feature/src/index.ts
new file mode 100644
index 0000000..5aae4db
--- /dev/null
+++ b/libs/portal/stalker/feature/src/index.ts
@@ -0,0 +1,11 @@
+export * from './lib/stalker-inline-detail/stalker-inline-detail.component';
+export * from './lib/stalker-collection-detail.component';
+export * from './lib/stalker-collection-channels-list/stalker-collection-channels-list.component';
+export * from './lib/stalker-catalog-detail/stalker-catalog-detail.component';
+export * from './lib/stalker-favorites-button/stalker-favorites-button.component';
+export * from './lib/stalker-catalog-facade.service';
+export * from './lib/stalker-feature.routes';
+export * from './lib/stalker-live-stream-layout/stalker-live-stream-layout.component';
+export * from './lib/stalker-search/stalker-search.component';
+export * from './lib/stalker-series-view/stalker-series-view.component';
+export * from './lib/stalker-workspace-route-session.service';
diff --git a/libs/portal/stalker/feature/src/lib/stalker-catalog-detail/stalker-catalog-detail.component.html b/libs/portal/stalker/feature/src/lib/stalker-catalog-detail/stalker-catalog-detail.component.html
new file mode 100644
index 0000000..d359dac
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-catalog-detail/stalker-catalog-detail.component.html
@@ -0,0 +1,25 @@
+@if (contentType() === 'vod') {
+    @if ((selectedItem()?.series?.length ?? 0) > 0) {
+        <app-stalker-series-view [vodWithSeries]="selectedItem()" />
+    } @else if (isSeriesDetail()) {
+        <app-stalker-series-view />
+    } @else if (vodDetailsItem()) {
+        <app-vod-details
+            [item]="vodDetailsItem()!"
+            [isFavorite]="isSelectedVodFavorite()"
+            [playbackPosition]="selectedVodPlaybackPosition()"
+            [inlinePlayback]="inlinePlayback()"
+            [externalPlayback]="externalPlayback.activeSession()"
+            (playClicked)="onVodPlay($event)"
+            (resumeClicked)="onVodResume($event)"
+            (favoriteToggled)="onVodFavoriteToggled($event)"
+            (downloadRequested)="onVodDownload($event)"
+            (backClicked)="onVodBack()"
+            (inlineTimeUpdated)="handleInlineTimeUpdate($event)"
+            (inlinePlaybackClosed)="closeInlinePlayer()"
+            (streamUrlCopied)="showCopyNotification()"
+        />
+    }
+} @else if (contentType() === 'series') {
+    <app-stalker-series-view />
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-catalog-detail/stalker-catalog-detail.component.ts b/libs/portal/stalker/feature/src/lib/stalker-catalog-detail/stalker-catalog-detail.component.ts
new file mode 100644
index 0000000..4037695
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-catalog-detail/stalker-catalog-detail.component.ts
@@ -0,0 +1,379 @@
+import {
+    Component,
+    OnDestroy,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import {
+    getStalkerReturnToState,
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYBACK_POSITIONS,
+    PORTAL_PLAYER,
+    createLogger,
+} from '@iptvnator/portal/shared/util';
+import {
+    createPortalFavoritesResource,
+    createRefreshTrigger,
+    isSelectedStalkerVodFavorite,
+    normalizeStalkerEntityId,
+    normalizeStalkerEntityIdAsNumber,
+    StalkerSelectedVodItem,
+    toggleStalkerVodFavorite,
+} from '@iptvnator/portal/stalker/data-access';
+import { VodDetailsComponent } from '@iptvnator/ui/playback';
+import { DownloadsService, PlaylistsService } from 'services';
+import {
+    createStalkerVodItem,
+    PlaybackPositionData,
+    ResolvedPortalPlayback,
+    StalkerVodDetails,
+    VodDetailsItem,
+} from 'shared-interfaces';
+import { StalkerCatalogFacadeService } from '../stalker-catalog-facade.service';
+import { StalkerSeriesViewComponent } from '../stalker-series-view/stalker-series-view.component';
+
+interface DownloadVodData {
+    id?: string | number;
+    has_files?: unknown;
+    info?: {
+        name?: string;
+        movie_image?: string;
+    };
+    title?: string;
+}
+
+@Component({
+    selector: 'app-stalker-catalog-detail',
+    imports: [StalkerSeriesViewComponent, VodDetailsComponent],
+    templateUrl: './stalker-catalog-detail.component.html',
+    styles: [
+        `
+            :host {
+                display: block;
+                height: 100%;
+                width: 100%;
+            }
+        `,
+    ],
+})
+export class StalkerCatalogDetailComponent implements OnDestroy {
+    private readonly catalog = inject(StalkerCatalogFacadeService);
+    private readonly playbackPositions = inject(PORTAL_PLAYBACK_POSITIONS);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+    private readonly router = inject(Router);
+    readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translateService = inject(TranslateService);
+    private readonly playlistService = inject(PlaylistsService);
+    private readonly downloadsService = inject(DownloadsService);
+    private readonly logger = createLogger('StalkerCatalogDetail');
+    private readonly favoritesRefresh = createRefreshTrigger();
+
+    readonly contentType = this.catalog.contentType;
+    readonly selectedItem = computed<StalkerSelectedVodItem | null>(
+        () =>
+            (this.catalog.selectedItem() as StalkerSelectedVodItem | null) ??
+            null
+    );
+    readonly inlinePlayback = signal<ResolvedPortalPlayback | null>(null);
+    private readonly selectedVodPosition = signal<PlaybackPositionData | null>(
+        null
+    );
+    private lastInlineSaveTime = 0;
+    private unsubscribePositionUpdates: (() => void) | null = null;
+
+    readonly isSeriesDetail = computed(() => {
+        const item = this.selectedItem();
+        return Boolean(
+            item &&
+                (this.contentType() === 'series' ||
+                    item.is_series === true ||
+                    String(item.is_series) === '1')
+        );
+    });
+
+    readonly vodDetailsItem = computed<VodDetailsItem | null>(() => {
+        const item = this.selectedItem();
+        if (!item || this.contentType() !== 'vod' || this.isSeriesDetail()) {
+            return null;
+        }
+
+        return createStalkerVodItem(
+            item as unknown as StalkerVodDetails,
+            this.catalog.playlist()?.id ?? ''
+        );
+    });
+
+    readonly selectedVodPlaybackPosition = computed<number | null>(
+        () => this.selectedVodPosition()?.positionSeconds ?? null
+    );
+
+    readonly portalFavorites = createPortalFavoritesResource(
+        this.playlistService,
+        () => this.catalog.playlist()?.id,
+        () => this.favoritesRefresh.refreshVersion()
+    );
+
+    readonly isSelectedVodFavorite = computed<boolean>(() =>
+        isSelectedStalkerVodFavorite(
+            this.vodDetailsItem(),
+            this.portalFavorites.value() ?? []
+        )
+    );
+
+    constructor() {
+        effect(() => {
+            const item = this.selectedItem();
+            const playlistId = this.catalog.playlist()?.id;
+
+            if (
+                !item ||
+                !playlistId ||
+                this.contentType() !== 'vod' ||
+                this.isSeriesDetail()
+            ) {
+                this.selectedVodPosition.set(null);
+                return;
+            }
+
+            void this.loadSelectedVodPosition(playlistId, Number(item.id));
+        });
+
+        effect(() => {
+            const selectedItemId = this.selectedItem()?.id;
+            void selectedItemId;
+            this.closeInlinePlayer();
+        });
+
+        if (window.electron?.onPlaybackPositionUpdate) {
+            this.unsubscribePositionUpdates =
+                window.electron.onPlaybackPositionUpdate(
+                    (data: PlaybackPositionData) => {
+                        const currentItem = this.selectedItem();
+                        if (
+                            data.contentType !== 'vod' ||
+                            data.playlistId !== this.catalog.playlist()?.id ||
+                            data.contentXtreamId !== Number(currentItem?.id)
+                        ) {
+                            return;
+                        }
+
+                        this.selectedVodPosition.set(data);
+                    }
+                );
+        }
+    }
+
+    onVodPlay(item: VodDetailsItem): void {
+        if (item.type === 'stalker') {
+            void this.startStalkerVodPlayback(
+                item.cmd,
+                item.data.info?.name,
+                item.data.info?.movie_image
+            );
+        }
+    }
+
+    onVodResume(event: {
+        item: VodDetailsItem;
+        positionSeconds: number;
+    }): void {
+        if (event.item.type === 'stalker') {
+            void this.startStalkerVodPlayback(
+                event.item.cmd,
+                event.item.data.info?.name,
+                event.item.data.info?.movie_image,
+                event.positionSeconds
+            );
+        }
+    }
+
+    onVodFavoriteToggled(event: {
+        item: VodDetailsItem;
+        isFavorite: boolean;
+    }): void {
+        toggleStalkerVodFavorite(event, {
+            addToFavorites: (item, onDone) =>
+                this.catalog.addToFavorites(item, onDone),
+            removeFromFavorites: (favoriteId, onDone) =>
+                this.catalog.removeFromFavorites(favoriteId, onDone),
+            onComplete: () => {
+                this.favoritesRefresh.refresh();
+            },
+        });
+    }
+
+    onVodBack(): void {
+        const returnTo = getStalkerReturnToState(window.history.state);
+        this.closeInlinePlayer();
+        this.catalog.clearSelectedItem();
+
+        if (returnTo) {
+            void this.router.navigateByUrl(returnTo);
+        }
+    }
+
+    handleInlineTimeUpdate(event: {
+        currentTime: number;
+        duration: number;
+    }): void {
+        const playback = this.inlinePlayback();
+        if (!playback?.contentInfo) {
+            return;
+        }
+
+        const now = Date.now();
+        if (now - this.lastInlineSaveTime <= 15000) {
+            return;
+        }
+
+        this.lastInlineSaveTime = now;
+        const position: PlaybackPositionData = {
+            ...playback.contentInfo,
+            positionSeconds: Math.floor(event.currentTime),
+            durationSeconds: Math.floor(event.duration),
+        };
+
+        void this.playbackPositions.savePlaybackPosition(
+            playback.contentInfo.playlistId,
+            position
+        );
+        this.selectedVodPosition.set(position);
+    }
+
+    closeInlinePlayer(): void {
+        this.inlinePlayback.set(null);
+        this.lastInlineSaveTime = 0;
+    }
+
+    showCopyNotification(): void {
+        this.snackBar.open(
+            this.translateService.instant('PORTALS.STREAM_URL_COPIED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
+
+    async onVodDownload(item: VodDetailsItem): Promise<void> {
+        if (item.type !== 'stalker') {
+            return;
+        }
+
+        const playlist = this.catalog.playlist();
+        if (!playlist || !playlist.portalUrl || !playlist.macAddress) {
+            return;
+        }
+
+        let cmdToUse = item.cmd;
+        const itemData = item.data as DownloadVodData;
+        const normalizedItemId = normalizeStalkerEntityId(itemData?.id);
+
+        if (
+            itemData?.has_files !== undefined &&
+            cmdToUse &&
+            !cmdToUse.includes('://') &&
+            cmdToUse.includes('/media/') &&
+            !cmdToUse.includes('/media/file_')
+        ) {
+            const fileId =
+                await this.catalog.fetchMovieFileId(normalizedItemId);
+            if (fileId) {
+                cmdToUse = `/media/file_${fileId}.mpg`;
+            }
+        }
+
+        const url = await this.catalog.fetchLinkToPlay(
+            playlist.portalUrl,
+            playlist.macAddress,
+            cmdToUse
+        );
+        if (!url) {
+            return;
+        }
+
+        const numericId = normalizeStalkerEntityIdAsNumber(itemData?.id) ?? 0;
+
+        await this.downloadsService.startDownload({
+            playlistId: playlist.id,
+            xtreamId: numericId,
+            contentType: 'vod',
+            title: itemData?.info?.name || itemData?.title || 'Unknown',
+            url,
+            posterUrl: itemData?.info?.movie_image,
+            headers: {
+                userAgent: playlist.userAgent,
+                referer: playlist.referer,
+                origin: playlist.origin,
+            },
+            playlistName: playlist.title || 'Stalker Portal',
+            playlistType: 'stalker',
+            portalUrl: playlist.portalUrl,
+            macAddress: playlist.macAddress,
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.closeInlinePlayer();
+        this.unsubscribePositionUpdates?.();
+    }
+
+    private async loadSelectedVodPosition(
+        playlistId: string,
+        vodId: number
+    ): Promise<void> {
+        if (Number.isNaN(vodId)) {
+            this.selectedVodPosition.set(null);
+            return;
+        }
+
+        const position = await this.playbackPositions.getPlaybackPosition(
+            playlistId,
+            vodId,
+            'vod'
+        );
+        this.selectedVodPosition.set(position ?? null);
+    }
+
+    private async startStalkerVodPlayback(
+        cmd?: string,
+        title?: string,
+        thumbnail?: string,
+        startTime?: number
+    ): Promise<void> {
+        try {
+            const playback = await this.catalog.resolveVodPlayback(
+                cmd,
+                title,
+                thumbnail,
+                startTime
+            );
+
+            this.lastInlineSaveTime = 0;
+            if (this.portalPlayer.isEmbeddedPlayer()) {
+                this.inlinePlayback.set(playback);
+                return;
+            }
+
+            this.closeInlinePlayer();
+            void this.portalPlayer.openResolvedPlayback(playback, true);
+        } catch (error) {
+            this.logger.error('Failed to start inline VOD playback', error);
+            const errorMessage =
+                error instanceof Error && error.message === 'nothing_to_play'
+                    ? this.translateService.instant(
+                          'PORTALS.CONTENT_NOT_AVAILABLE'
+                      )
+                    : this.translateService.instant('PORTALS.PLAYBACK_ERROR');
+            this.snackBar.open(errorMessage, null, {
+                duration: 3000,
+            });
+        }
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-catalog-facade.service.spec.ts b/libs/portal/stalker/feature/src/lib/stalker-catalog-facade.service.spec.ts
new file mode 100644
index 0000000..3b7c76c
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-catalog-facade.service.spec.ts
@@ -0,0 +1,131 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { PORTAL_PLAYBACK_POSITIONS } from '@iptvnator/portal/shared/util';
+import { PlaybackPositionData } from 'shared-interfaces';
+import { StalkerCatalogFacadeService } from './stalker-catalog-facade.service';
+
+describe('StalkerCatalogFacadeService', () => {
+    const playlist = {
+        _id: 'playlist-1',
+        title: 'Demo Stalker',
+        portalUrl: 'http://demo.example/stalker_portal/server/load.php',
+        macAddress: '00:1A:79:00:00:01',
+        userAgent: 'DemoAgent',
+        referrer: 'http://demo.example',
+        origin: 'http://demo.example',
+    };
+    const unsubscribe = jest.fn();
+    let playbackUpdateHandler:
+        | ((data: PlaybackPositionData) => void)
+        | undefined;
+    let playbackPositions: {
+        savePlaybackPosition: jest.Mock<Promise<void>, [string, PlaybackPositionData]>;
+        getPlaybackPosition: jest.Mock<Promise<PlaybackPositionData | null>, [string, number, 'vod' | 'episode']>;
+        getSeriesPlaybackPositions: jest.Mock<Promise<PlaybackPositionData[]>, [string, number]>;
+        getRecentPlaybackPositions?: jest.Mock;
+        getAllPlaybackPositions: jest.Mock<Promise<PlaybackPositionData[]>, [string]>;
+        clearPlaybackPosition: jest.Mock<Promise<void>, [string, number, 'vod' | 'episode']>;
+    };
+
+    beforeEach(() => {
+        playbackUpdateHandler = undefined;
+        unsubscribe.mockReset();
+        playbackPositions = {
+            savePlaybackPosition: jest.fn().mockResolvedValue(undefined),
+            getPlaybackPosition: jest.fn().mockResolvedValue(null),
+            getSeriesPlaybackPositions: jest.fn().mockResolvedValue([]),
+            getAllPlaybackPositions: jest.fn().mockResolvedValue([]),
+            clearPlaybackPosition: jest.fn().mockResolvedValue(undefined),
+        };
+
+        (window as Window & { electron?: typeof window.electron }).electron = {
+            ...(window.electron ?? {}),
+            onPlaybackPositionUpdate: jest.fn(
+                (handler: (data: PlaybackPositionData) => void) => {
+                    playbackUpdateHandler = handler;
+                    return unsubscribe;
+                }
+            ),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                StalkerCatalogFacadeService,
+                {
+                    provide: StalkerStore,
+                    useValue: {
+                        selectedContentType: signal<'vod' | 'series' | 'itv'>('vod'),
+                        limit: signal(14),
+                        page: signal(0),
+                        getSelectedCategory: signal(null),
+                        getPaginatedContent: signal([]),
+                        selectedItem: signal(null),
+                        getTotalPages: signal(0),
+                        isPaginatedContentLoading: signal(false),
+                        currentPlaylist: signal(playlist),
+                        getSelectedCategoryName: jest.fn(() => null),
+                        setSelectedCategory: jest.fn(),
+                        clearSelectedItem: jest.fn(),
+                        setPage: jest.fn(),
+                        setLimit: jest.fn(),
+                        setSelectedItem: jest.fn(),
+                        createLinkToPlayVod: jest.fn(),
+                        addToFavorites: jest.fn(),
+                        removeFromFavorites: jest.fn(),
+                        fetchMovieFileId: jest.fn(),
+                        fetchLinkToPlay: jest.fn(),
+                        resolveVodPlayback: jest.fn(),
+                    },
+                },
+                {
+                    provide: PORTAL_PLAYBACK_POSITIONS,
+                    useValue: playbackPositions,
+                },
+            ],
+        });
+    });
+
+    it('persists matching external playback updates for the current playlist', async () => {
+        TestBed.inject(StalkerCatalogFacadeService);
+        await Promise.resolve();
+
+        expect(playbackUpdateHandler).toBeDefined();
+
+        playbackUpdateHandler?.({
+            playlistId: playlist._id,
+            contentXtreamId: 17359,
+            contentType: 'vod',
+            positionSeconds: 42,
+            durationSeconds: 5400,
+        });
+        await Promise.resolve();
+
+        expect(playbackPositions.savePlaybackPosition).toHaveBeenCalledWith(
+            playlist._id,
+            expect.objectContaining({
+                playlistId: playlist._id,
+                contentXtreamId: 17359,
+                contentType: 'vod',
+                positionSeconds: 42,
+                durationSeconds: 5400,
+            })
+        );
+    });
+
+    it('ignores external playback updates for other playlists', async () => {
+        TestBed.inject(StalkerCatalogFacadeService);
+        await Promise.resolve();
+
+        playbackUpdateHandler?.({
+            playlistId: 'playlist-2',
+            contentXtreamId: 17359,
+            contentType: 'vod',
+            positionSeconds: 42,
+            durationSeconds: 5400,
+        });
+        await Promise.resolve();
+
+        expect(playbackPositions.savePlaybackPosition).not.toHaveBeenCalled();
+    });
+});
diff --git a/libs/portal/stalker/feature/src/lib/stalker-catalog-facade.service.ts b/libs/portal/stalker/feature/src/lib/stalker-catalog-facade.service.ts
new file mode 100644
index 0000000..2d509a3
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-catalog-facade.service.ts
@@ -0,0 +1,324 @@
+import {
+    DestroyRef,
+    Injectable,
+    Provider,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import {
+    buildStalkerSelectedVodItem,
+    StalkerStore,
+    StalkerVodSource,
+} from '@iptvnator/portal/stalker/data-access';
+import {
+    PortalCatalogItemProgress,
+    PortalCatalogPlaylistMeta,
+    PortalCatalogSortMode,
+    PORTAL_CATALOG_FACADE,
+    PORTAL_PLAYBACK_POSITIONS,
+    StalkerPortalCatalogFacade,
+} from '@iptvnator/portal/shared/util';
+import { PlaybackPositionData } from 'shared-interfaces';
+
+function calculateProgress(position: PlaybackPositionData | undefined): number {
+    if (!position || !position.durationSeconds) {
+        return 0;
+    }
+
+    const percent =
+        (position.positionSeconds / position.durationSeconds) * 100;
+
+    if (position.positionSeconds > 10 && percent < 1) {
+        return 1;
+    }
+
+    return Math.min(100, Math.round(percent));
+}
+
+@Injectable()
+export class StalkerCatalogFacadeService
+    implements
+        StalkerPortalCatalogFacade<
+            Record<string, unknown>,
+            StalkerVodSource,
+            StalkerVodSource
+        >
+{
+    private readonly stalkerStore = inject(StalkerStore);
+    private readonly playbackPositions = inject(PORTAL_PLAYBACK_POSITIONS);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly stalkerPositions = signal<Map<string, PlaybackPositionData>>(
+        new Map()
+    );
+    private readonly stalkerSeriesPositions = signal<
+        Map<number, PlaybackPositionData[]>
+    >(new Map());
+    private loadedPositionsForPlaylistId: string | null = null;
+
+    readonly provider = 'stalker' as const;
+    readonly pageSizeOptions = [14] as const;
+    readonly contentType = this.stalkerStore.selectedContentType;
+    readonly limit = this.stalkerStore.limit;
+    readonly pageIndex = this.stalkerStore.page;
+    readonly selectedCategory = this.stalkerStore.getSelectedCategory;
+    readonly paginatedContent = computed(
+        () => this.stalkerStore.getPaginatedContent() ?? []
+    );
+    readonly selectedItem = this.stalkerStore.selectedItem;
+    readonly totalPages = this.stalkerStore.getTotalPages;
+    readonly isPaginatedContentLoading =
+        this.stalkerStore.isPaginatedContentLoading;
+    readonly selectedCategoryTitle = computed(() => {
+        const category = this.selectedCategory();
+        const fromCategory = String(
+            category?.['category_name'] ?? category?.['name'] ?? ''
+        );
+
+        if (fromCategory) {
+            return fromCategory;
+        }
+
+        return this.stalkerStore.getSelectedCategoryName() ?? '';
+    });
+    readonly categoryItemCount = computed(() => this.stalkerStore.totalCount());
+    readonly contentSortMode = computed<PortalCatalogSortMode | null>(
+        () => null
+    );
+    readonly playlist = computed<PortalCatalogPlaylistMeta | null>(() => {
+        const playlist = this.stalkerStore.currentPlaylist();
+        if (!playlist?._id) {
+            return null;
+        }
+
+        return {
+            id: playlist._id,
+            title: playlist.title ?? 'Stalker Portal',
+            portalUrl: playlist.portalUrl,
+            macAddress: playlist.macAddress,
+            userAgent: playlist.userAgent,
+            referer: playlist.referrer,
+            origin: playlist.origin,
+        };
+    });
+
+    constructor() {
+        effect(() => {
+            const playlistId = this.playlist()?.id;
+
+            if (!playlistId) {
+                this.loadedPositionsForPlaylistId = null;
+                this.stalkerPositions.set(new Map());
+                this.stalkerSeriesPositions.set(new Map());
+                return;
+            }
+
+            if (playlistId === this.loadedPositionsForPlaylistId) {
+                return;
+            }
+
+            this.loadedPositionsForPlaylistId = playlistId;
+            void this.loadStalkerPositions(playlistId);
+        });
+
+        if (window.electron?.onPlaybackPositionUpdate) {
+            const unsubscribe = window.electron.onPlaybackPositionUpdate(
+                (data: PlaybackPositionData) => {
+                    if (data.playlistId !== this.playlist()?.id) {
+                        return;
+                    }
+
+                    void this.playbackPositions.savePlaybackPosition(
+                        data.playlistId,
+                        data
+                    );
+
+                    if (data.contentType === 'vod') {
+                        this.updateVodPlaybackPosition(data);
+                    }
+
+                    if (
+                        data.contentType === 'episode' &&
+                        data.seriesXtreamId
+                    ) {
+                        this.updateSeriesPlaybackPosition(data);
+                    }
+                }
+            );
+
+            if (typeof unsubscribe === 'function') {
+                this.destroyRef.onDestroy(unsubscribe);
+            }
+        }
+    }
+
+    initialize(categoryId?: string | null): void {
+        this.clearSelectedItem();
+        if (categoryId) {
+            this.stalkerStore.setSelectedCategory(categoryId);
+            return;
+        }
+
+        this.stalkerStore.setSelectedCategory('*');
+    }
+
+    clearSelectedItem(): void {
+        this.stalkerStore.clearSelectedItem();
+    }
+
+    setPage(page: number): void {
+        this.stalkerStore.setPage(page);
+    }
+
+    setLimit(limit: number): void {
+        this.stalkerStore.setLimit(limit);
+    }
+
+    setContentSortMode(mode: PortalCatalogSortMode): void {
+        void mode;
+        // Stalker catalog content is server-paginated and does not support local sort modes.
+    }
+
+    selectItem(item: StalkerVodSource): string[] | null {
+        const needsSeriesFetch =
+            this.contentType() === 'vod' &&
+            (item.is_series === '1' || item.is_series === 1);
+
+        this.stalkerStore.setSelectedItem(
+            buildStalkerSelectedVodItem(item, needsSeriesFetch)
+        );
+        return null;
+    }
+
+    getItemProgress(item: StalkerVodSource): PortalCatalogItemProgress {
+        const numericId = Number(item.id);
+        if (Number.isNaN(numericId)) {
+            return {};
+        }
+
+        const hasSeriesProgress = Boolean(
+            this.stalkerSeriesPositions().get(numericId)?.length
+        );
+        const isSeries =
+            this.contentType() === 'series' ||
+            item.is_series === '1' ||
+            item.is_series === 1;
+
+        if (hasSeriesProgress) {
+            return { hasSeriesProgress: true };
+        }
+
+        if (isSeries) {
+            return { hasSeriesProgress: false };
+        }
+
+        const progress = calculateProgress(
+            this.stalkerPositions().get(`vod_${numericId}`)
+        );
+        return {
+            progress,
+            isWatched: progress >= 90,
+        };
+    }
+
+    async createLinkToPlayVod(
+        cmd?: string,
+        title?: string,
+        thumbnail?: string
+    ): Promise<void> {
+        await this.stalkerStore.createLinkToPlayVod(cmd, title, thumbnail);
+    }
+
+    addToFavorites(item: Record<string, unknown>, onDone?: () => void): void {
+        this.stalkerStore.addToFavorites(item, onDone);
+    }
+
+    removeFromFavorites(favoriteId: string, onDone?: () => void): void {
+        this.stalkerStore.removeFromFavorites(favoriteId, onDone);
+    }
+
+    fetchMovieFileId(itemId: string): Promise<string | null> {
+        return this.stalkerStore.fetchMovieFileId(itemId);
+    }
+
+    async fetchLinkToPlay(
+        portalUrl: string,
+        macAddress: string,
+        cmd: string
+    ): Promise<string> {
+        return this.stalkerStore.fetchLinkToPlay(portalUrl, macAddress, cmd);
+    }
+
+    resolveVodPlayback(
+        cmd?: string,
+        title?: string,
+        thumbnail?: string,
+        startTime?: number
+    ) {
+        return this.stalkerStore.resolveVodPlayback(
+            cmd,
+            title,
+            thumbnail,
+            undefined,
+            undefined,
+            startTime
+        );
+    }
+
+    private async loadStalkerPositions(playlistId: string): Promise<void> {
+        const positions =
+            await this.playbackPositions.getAllPlaybackPositions(playlistId);
+
+        const positionsMap = new Map<string, PlaybackPositionData>();
+        const seriesMap = new Map<number, PlaybackPositionData[]>();
+
+        positions.forEach((position) => {
+            positionsMap.set(
+                `${position.contentType}_${position.contentXtreamId}`,
+                position
+            );
+
+            if (position.contentType === 'episode' && position.seriesXtreamId) {
+                const existing = seriesMap.get(position.seriesXtreamId) ?? [];
+                existing.push(position);
+                seriesMap.set(position.seriesXtreamId, existing);
+            }
+        });
+
+        this.stalkerPositions.set(positionsMap);
+        this.stalkerSeriesPositions.set(seriesMap);
+    }
+
+    private updateVodPlaybackPosition(position: PlaybackPositionData): void {
+        const updated = new Map(this.stalkerPositions());
+        updated.set(`vod_${position.contentXtreamId}`, position);
+        this.stalkerPositions.set(updated);
+    }
+
+    private updateSeriesPlaybackPosition(position: PlaybackPositionData): void {
+        if (!position.seriesXtreamId) {
+            return;
+        }
+
+        const updated = new Map(this.stalkerSeriesPositions());
+        const positionsForSeries = [
+            ...(updated.get(position.seriesXtreamId) ?? []).filter(
+                (item) => item.contentXtreamId !== position.contentXtreamId
+            ),
+            position,
+        ];
+        updated.set(position.seriesXtreamId, positionsForSeries);
+        this.stalkerSeriesPositions.set(updated);
+    }
+}
+
+export function provideStalkerCatalogFacade(): Provider[] {
+    return [
+        StalkerCatalogFacadeService,
+        {
+            provide: PORTAL_CATALOG_FACADE,
+            useExisting: StalkerCatalogFacadeService,
+        },
+    ];
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html
new file mode 100644
index 0000000..ef7b4e0
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.html
@@ -0,0 +1,42 @@
+<div class="search-panel">
+    <label class="search-field">
+        <mat-icon>search</mat-icon>
+        <input
+            type="search"
+            spellcheck="false"
+            [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
+            [(ngModel)]="searchString"
+        />
+    </label>
+</div>
+
+<div class="channels-list">
+    @if (filteredItems().length > 0) {
+        @for (item of filteredItems(); track item.id) {
+            <app-channel-list-item
+                [name]="item.o_name || item.name || ''"
+                [logo]="item.logo"
+                [selected]="isSelected(item)"
+                [epgProgram]="
+                    epgPrograms.get(normalizeStalkerEntityId(item.id)) ?? null
+                "
+                [progressPercentage]="
+                    currentProgramsProgress.get(normalizeStalkerEntityId(item.id)) ?? 0
+                "
+                [showFavoriteButton]="true"
+                [showProgramInfoButton]="false"
+                [isFavorite]="isFavorite(item)"
+                (clicked)="onPlay(item)"
+                (favoriteToggled)="onFavoriteToggle(item)"
+            />
+        }
+    } @else {
+        <div class="empty-search-state">
+            <div class="empty-icon-wrapper">
+                <mat-icon>search_off</mat-icon>
+            </div>
+            <h3>{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}</h3>
+            <p>We couldn't find anything matching "{{ searchString() }}"</p>
+        </div>
+    }
+</div>
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
new file mode 100644
index 0000000..438a3a1
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
@@ -0,0 +1,126 @@
+:host {
+    display: block;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    container-type: inline-size;
+}
+
+.channels-list {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 56px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    padding: 4px 8px 12px;
+    box-sizing: border-box;
+    gap: 2px;
+}
+
+.search-panel {
+    padding: 10px 12px;
+    flex-shrink: 0;
+    height: 56px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+}
+
+.search-field {
+    flex: 1;
+    width: 100%;
+    height: 36px;
+    border-radius: 10px;
+    border: 1px solid rgba(127, 127, 127, 0.22);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.08);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    box-sizing: border-box;
+    cursor: text;
+    transition:
+        border-color 0.15s ease,
+        background-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--app-selection-border);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-selection-color) 16%, transparent);
+    }
+
+    mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+        opacity: 0.68;
+        flex-shrink: 0;
+    }
+
+    input {
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: 0.875rem;
+    }
+}
+
+.empty-search-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 32px 24px;
+    text-align: center;
+
+    .empty-icon-wrapper {
+        width: 64px;
+        height: 64px;
+        border-radius: 20px;
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
+            rgba(127, 127, 127, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20px;
+        box-shadow:
+            0 8px 24px -8px rgba(0, 0, 0, 0.1),
+            inset 0 1px 1px rgba(255, 255, 255, 0.05);
+
+        mat-icon {
+            width: 32px;
+            height: 32px;
+            font-size: 32px;
+            opacity: 0.8;
+        }
+    }
+
+    h3 {
+        font-size: 1.05rem;
+        font-weight: 520;
+        margin: 0 0 8px;
+        letter-spacing: -0.01em;
+    }
+
+    p {
+        font-size: 0.85rem;
+        margin: 0;
+        opacity: 0.65;
+        line-height: 1.4;
+        max-width: 260px;
+    }
+}
+
+@container (max-width: 350px) {
+    .channels-list {
+        padding-inline: 6px;
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.spec.ts b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.spec.ts
new file mode 100644
index 0000000..96d56d5
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.spec.ts
@@ -0,0 +1,116 @@
+import { Component, input, output, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockPipe } from 'ng-mocks';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ChannelListItemComponent } from 'components';
+import { EpgProgram } from 'shared-interfaces';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { StalkerCollectionChannelsListComponent } from './stalker-collection-channels-list.component';
+
+@Component({
+    selector: 'app-channel-list-item',
+    standalone: true,
+    template: '',
+})
+class StubChannelListItemComponent {
+    readonly name = input('');
+    readonly logo = input<string | null | undefined>(null);
+    readonly selected = input(false);
+    readonly epgProgram = input<unknown>(null);
+    readonly progressPercentage = input(0);
+    readonly showFavoriteButton = input(false);
+    readonly showProgramInfoButton = input(false);
+    readonly isFavorite = input(false);
+    readonly clicked = output<void>();
+    readonly favoriteToggled = output<void>();
+}
+
+describe('StalkerCollectionChannelsListComponent', () => {
+    let fixture: ComponentFixture<StalkerCollectionChannelsListComponent>;
+    let component: StalkerCollectionChannelsListComponent;
+
+    const bulkItvEpgByChannel = signal<Record<string, EpgProgram[]>>({});
+    const stalkerStore = {
+        bulkItvEpgByChannel,
+    };
+
+    beforeEach(async () => {
+        bulkItvEpgByChannel.set({});
+
+        await TestBed.configureTestingModule({
+            imports: [StalkerCollectionChannelsListComponent],
+            providers: [{ provide: StalkerStore, useValue: stalkerStore }],
+        })
+            .overrideComponent(StalkerCollectionChannelsListComponent, {
+                remove: {
+                    imports: [ChannelListItemComponent, TranslatePipe],
+                },
+                add: {
+                    imports: [
+                        StubChannelListItemComponent,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(StalkerCollectionChannelsListComponent);
+        component = fixture.componentInstance;
+        fixture.componentRef.setInput('items', [
+            {
+                id: '10001',
+                name: 'Alpha TV',
+                o_name: 'Alpha TV',
+                logo: 'alpha.png',
+            },
+            {
+                id: '10002',
+                name: 'Beta TV',
+                o_name: 'Beta TV',
+                logo: 'beta.png',
+            },
+        ]);
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+    });
+
+    it('keeps row previews empty until bulk epg has been loaded', () => {
+        fixture.detectChanges();
+
+        expect(component.epgPrograms.size).toBe(0);
+        expect(component.currentProgramsProgress.size).toBe(0);
+    });
+
+    it('derives row previews from cached bulk epg', () => {
+        bulkItvEpgByChannel.set({
+            '10001': [buildProgram('10001', 'Current Show')],
+            '10002': [buildProgram('10002', 'Other Show')],
+        });
+
+        fixture.detectChanges();
+
+        expect(component.epgPrograms.get('10001')?.title).toBe('Current Show');
+        expect(component.epgPrograms.get('10002')?.title).toBe('Other Show');
+    });
+});
+
+function buildProgram(channelId: string, title: string): EpgProgram {
+    const startTimestamp = Math.floor((Date.now() - 10 * 60 * 1000) / 1000);
+    const stopTimestamp = startTimestamp + 30 * 60;
+
+    return {
+        start: new Date(startTimestamp * 1000).toISOString(),
+        stop: new Date(stopTimestamp * 1000).toISOString(),
+        channel: channelId,
+        title,
+        desc: `${title} description`,
+        category: null,
+        startTimestamp,
+        stopTimestamp,
+    };
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.ts b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.ts
new file mode 100644
index 0000000..c67a4f2
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.ts
@@ -0,0 +1,171 @@
+import {
+    ChangeDetectorRef,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ChannelListItemComponent } from 'components';
+import { EpgProgram } from 'shared-interfaces';
+import { StalkerVodSource } from '@iptvnator/portal/stalker/data-access';
+import { normalizeStalkerEntityId } from '@iptvnator/portal/stalker/data-access';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+
+@Component({
+    selector: 'app-stalker-collection-channels-list',
+    imports: [ChannelListItemComponent, FormsModule, MatIconModule, TranslatePipe],
+    templateUrl: './stalker-collection-channels-list.component.html',
+    styleUrl: './stalker-collection-channels-list.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StalkerCollectionChannelsListComponent {
+    readonly items = input<StalkerVodSource[]>([]);
+    readonly selectedItemId = input<string | number | null>(null);
+    readonly favoriteIds = input<Map<string | number, boolean>>(new Map());
+
+    readonly playClicked = output<StalkerVodSource>();
+    readonly favoriteToggled = output<StalkerVodSource>();
+
+    private readonly stalkerStore = inject(StalkerStore);
+    private readonly cdr = inject(ChangeDetectorRef);
+    protected readonly normalizeStalkerEntityId = normalizeStalkerEntityId;
+    readonly searchString = signal('');
+    readonly filteredItems = computed(() => {
+        const search = this.searchString().trim().toLowerCase();
+        if (!search) {
+            return this.items();
+        }
+
+        return this.items().filter((item) =>
+            `${item.o_name ?? ''} ${item.name ?? ''}`
+                .toLowerCase()
+                .includes(search)
+        );
+    });
+
+    readonly epgPrograms = new Map<string | number, EpgProgram>();
+    readonly currentProgramsProgress = new Map<string | number, number>();
+
+    constructor() {
+        effect(() => {
+            const items = this.items();
+            const bulkProgramsByChannel = this.stalkerStore.bulkItvEpgByChannel();
+            this.syncBulkEpgPreviews(items, bulkProgramsByChannel);
+        });
+    }
+
+    onPlay(item: StalkerVodSource): void {
+        this.playClicked.emit(item);
+    }
+
+    onFavoriteToggle(item: StalkerVodSource): void {
+        this.favoriteToggled.emit(item);
+    }
+
+    isSelected(item: StalkerVodSource): boolean {
+        return String(this.selectedItemId() ?? '') === normalizeStalkerEntityId(item.id);
+    }
+
+    isFavorite(item: StalkerVodSource): boolean {
+        return this.favoriteIds().get(normalizeStalkerEntityId(item.id)) ?? false;
+    }
+
+    private syncBulkEpgPreviews(
+        items: StalkerVodSource[],
+        bulkProgramsByChannel: Record<string, EpgProgram[]>
+    ): void {
+        this.epgPrograms.clear();
+        this.currentProgramsProgress.clear();
+
+        if (items.length === 0 || Object.keys(bulkProgramsByChannel).length === 0) {
+            this.cdr.markForCheck();
+            return;
+        }
+
+        for (const item of items) {
+            const channelId = normalizeStalkerEntityId(item.id);
+            const currentProgram = this.findCurrentProgram(
+                bulkProgramsByChannel[channelId] ?? []
+            );
+
+            if (!currentProgram) {
+                continue;
+            }
+
+            this.epgPrograms.set(channelId, currentProgram);
+            this.updateProgramProgress(channelId, currentProgram);
+        }
+
+        this.cdr.markForCheck();
+    }
+
+    private updateProgramProgress(
+        channelId: string | number,
+        program: EpgProgram
+    ): void {
+        const startMs = this.getProgramTimestampMs(
+            program.start,
+            program.startTimestamp
+        );
+        const stopMs = this.getProgramTimestampMs(
+            program.stop,
+            program.stopTimestamp
+        );
+        const nowMs = Date.now();
+
+        if (
+            Number.isFinite(startMs) &&
+            Number.isFinite(stopMs) &&
+            nowMs >= startMs &&
+            nowMs <= stopMs &&
+            stopMs > startMs
+        ) {
+            this.currentProgramsProgress.set(
+                channelId,
+                ((nowMs - startMs) / (stopMs - startMs)) * 100
+            );
+            return;
+        }
+
+        this.currentProgramsProgress.delete(channelId);
+    }
+
+    private findCurrentProgram(programs: EpgProgram[]): EpgProgram | null {
+        const nowMs = Date.now();
+
+        return (
+            programs.find((program) => {
+                const startMs = this.getProgramTimestampMs(
+                    program.start,
+                    program.startTimestamp
+                );
+                const stopMs = this.getProgramTimestampMs(
+                    program.stop,
+                    program.stopTimestamp
+                );
+
+                return nowMs >= startMs && nowMs <= stopMs;
+            }) ?? null
+        );
+    }
+
+    private getProgramTimestampMs(
+        rawDate: string,
+        timestamp?: number | null
+    ): number {
+        const parsedTimestamp = Number(timestamp);
+        if (Number.isFinite(parsedTimestamp) && parsedTimestamp > 0) {
+            return parsedTimestamp * 1000;
+        }
+
+        const parsedDate = Date.parse(rawDate);
+        return Number.isFinite(parsedDate) ? parsedDate : Number.POSITIVE_INFINITY;
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-detail.component.spec.ts b/libs/portal/stalker/feature/src/lib/stalker-collection-detail.component.spec.ts
new file mode 100644
index 0000000..c1f9f98
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-detail.component.spec.ts
@@ -0,0 +1,254 @@
+import { Component, input, output, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContentHeroComponent } from 'components';
+import { UnifiedCollectionItem } from '@iptvnator/portal/shared/util';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { PlaylistsService } from 'services';
+import { Playlist } from 'shared-interfaces';
+import { of } from 'rxjs';
+import { StalkerCollectionDetailComponent } from './stalker-collection-detail.component';
+import { StalkerInlineDetailComponent } from './stalker-inline-detail/stalker-inline-detail.component';
+
+@Component({
+    selector: 'app-content-hero',
+    standalone: true,
+    template: '',
+})
+class StubContentHeroComponent {
+    readonly isLoading = input(false);
+}
+
+@Component({
+    selector: 'app-stalker-inline-detail',
+    standalone: true,
+    template: '',
+})
+class StubStalkerInlineDetailComponent {
+    readonly categoryId = input<'vod' | 'series' | null>(null);
+    readonly seriesItem = input<unknown>(null);
+    readonly isSeries = input(false);
+    readonly vodDetailsItem = input<unknown>(null);
+    readonly isFavorite = input(false);
+    readonly backClicked = output<void>();
+    readonly playClicked = output<unknown>();
+    readonly favoriteToggled = output<unknown>();
+}
+
+describe('StalkerCollectionDetailComponent', () => {
+    let fixture: ComponentFixture<StalkerCollectionDetailComponent>;
+    let currentPlaylist: ReturnType<typeof signal<Playlist | undefined>>;
+    let selectedContentType: ReturnType<
+        typeof signal<'vod' | 'itv' | 'series'>
+    >;
+    let selectedCategoryId: ReturnType<typeof signal<string | null>>;
+    let selectedItem: ReturnType<typeof signal<unknown>>;
+    let stalkerStore: {
+        currentPlaylist: typeof currentPlaylist;
+        selectedContentType: typeof selectedContentType;
+        selectedCategoryId: typeof selectedCategoryId;
+        selectedItem: typeof selectedItem;
+        setCurrentPlaylist: jest.Mock;
+        setSelectedContentType: jest.Mock;
+        setSelectedCategory: jest.Mock;
+        setSelectedItem: jest.Mock;
+        addToFavorites: jest.Mock;
+        removeFromFavorites: jest.Mock;
+        createLinkToPlayVod: jest.Mock;
+    };
+
+    const playlist = {
+        _id: 'stalker-1',
+        title: 'Stalker Portal',
+        portalUrl: 'http://portal.example/portal.php',
+        macAddress: '00:1A:79:00:00:01',
+        favorites: [],
+    } as unknown as Playlist;
+
+    beforeEach(async () => {
+        currentPlaylist = signal<Playlist | undefined>(undefined);
+        selectedContentType = signal<'vod' | 'itv' | 'series'>('vod');
+        selectedCategoryId = signal<string | null>(null);
+        selectedItem = signal<unknown>(null);
+        stalkerStore = {
+            currentPlaylist,
+            selectedContentType,
+            selectedCategoryId,
+            selectedItem,
+            setCurrentPlaylist: jest.fn(async (value: Playlist | undefined) => {
+                currentPlaylist.set(value);
+            }),
+            setSelectedContentType: jest.fn(
+                (value: 'vod' | 'itv' | 'series') => {
+                    selectedContentType.set(value);
+                }
+            ),
+            setSelectedCategory: jest.fn((value: string | null) => {
+                selectedCategoryId.set(value);
+            }),
+            setSelectedItem: jest.fn((value: unknown) => {
+                selectedItem.set(value);
+            }),
+            addToFavorites: jest.fn(),
+            removeFromFavorites: jest.fn(),
+            createLinkToPlayVod: jest.fn(),
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [StalkerCollectionDetailComponent],
+            providers: [
+                {
+                    provide: StalkerStore,
+                    useValue: stalkerStore,
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {
+                        getPlaylistById: jest.fn(() => of(playlist)),
+                        getPortalFavorites: jest.fn(() => of([])),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(StalkerCollectionDetailComponent, {
+                remove: {
+                    imports: [ContentHeroComponent, StalkerInlineDetailComponent],
+                },
+                add: {
+                    imports: [
+                        StubContentHeroComponent,
+                        StubStalkerInlineDetailComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(StalkerCollectionDetailComponent);
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+    });
+
+    it('opens legacy VOD is_series favorites through the lazy VOD-series flow', async () => {
+        fixture.componentRef.setInput(
+            'item',
+            buildCollectionItem({
+                contentType: 'series',
+                categoryId: 'series',
+                stalkerItem: {
+                    id: '1507',
+                    title: 'Flagged Series',
+                    category_id: 'series',
+                    cmd: '/media/file_1507.mpg',
+                    is_series: '1',
+                },
+            })
+        );
+
+        await settleDetail(fixture);
+
+        expect(stalkerStore.setSelectedContentType).toHaveBeenLastCalledWith(
+            'vod'
+        );
+        expect(stalkerStore.setSelectedCategory).toHaveBeenLastCalledWith('vod');
+        expect(stalkerStore.setSelectedItem).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                id: '1507',
+                is_series: true,
+            })
+        );
+        expect(fixture.componentInstance.inlineDetail()).toEqual(
+            expect.objectContaining({
+                categoryId: 'vod',
+                isSeries: true,
+                vodDetailsItem: null,
+            })
+        );
+    });
+
+    it('keeps regular Stalker series favorites in regular series mode', async () => {
+        fixture.componentRef.setInput(
+            'item',
+            buildCollectionItem({
+                contentType: 'series',
+                categoryId: 'series',
+                stalkerItem: {
+                    id: '30001',
+                    series_id: '30001',
+                    title: 'Regular Series',
+                    category_id: 'series',
+                },
+            })
+        );
+
+        await settleDetail(fixture);
+
+        expect(stalkerStore.setSelectedContentType).toHaveBeenLastCalledWith(
+            'series'
+        );
+        expect(fixture.componentInstance.inlineDetail()).toEqual(
+            expect.objectContaining({
+                categoryId: 'series',
+                isSeries: false,
+                vodDetailsItem: null,
+            })
+        );
+    });
+
+    it('keeps embedded VOD series favorites in the embedded VOD-series path', async () => {
+        fixture.componentRef.setInput(
+            'item',
+            buildCollectionItem({
+                contentType: 'series',
+                categoryId: 'series',
+                stalkerItem: {
+                    id: '20001',
+                    title: 'Embedded Series',
+                    category_id: 'series',
+                    cmd: '/media/file_20001.mpg',
+                    series: [1, 2],
+                },
+            })
+        );
+
+        await settleDetail(fixture);
+
+        expect(stalkerStore.setSelectedContentType).toHaveBeenLastCalledWith(
+            'vod'
+        );
+        expect(fixture.componentInstance.inlineDetail()).toEqual(
+            expect.objectContaining({
+                categoryId: 'vod',
+                isSeries: false,
+                vodDetailsItem: null,
+            })
+        );
+        expect(
+            fixture.componentInstance.inlineDetail().seriesItem?.series
+        ).toEqual([1, 2]);
+    });
+});
+
+function buildCollectionItem(
+    overrides: Partial<UnifiedCollectionItem>
+): UnifiedCollectionItem {
+    return {
+        uid: 'stalker::stalker-1::item-1',
+        name: 'Item',
+        contentType: 'movie',
+        sourceType: 'stalker',
+        playlistId: 'stalker-1',
+        playlistName: 'Stalker Portal',
+        stalkerId: 'item-1',
+        ...overrides,
+    };
+}
+
+async function settleDetail(
+    fixture: ComponentFixture<StalkerCollectionDetailComponent>
+): Promise<void> {
+    fixture.detectChanges();
+    await fixture.whenStable();
+    await Promise.resolve();
+    fixture.detectChanges();
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-detail.component.ts b/libs/portal/stalker/feature/src/lib/stalker-collection-detail.component.ts
new file mode 100644
index 0000000..ed152ac
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-detail.component.ts
@@ -0,0 +1,335 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+    untracked,
+} from '@angular/core';
+import { ContentHeroComponent } from 'components';
+import {
+    buildStalkerStateItem,
+    toStalkerCategoryId,
+    UnifiedCollectionItem,
+} from '@iptvnator/portal/shared/util';
+import {
+    buildStalkerSelectedVodItem,
+    clearStalkerDetailViewState,
+    createPortalFavoritesResource,
+    createRefreshTrigger,
+    createStalkerDetailViewState,
+    createStalkerInlineDetailState,
+    isSelectedStalkerVodFavorite,
+    isStalkerSeriesFlag,
+    StalkerSelectedVodItem,
+    StalkerStore,
+    toggleStalkerVodFavorite,
+} from '@iptvnator/portal/stalker/data-access';
+import { PlaylistsService } from 'services';
+import { Playlist, StalkerPortalItem, VodDetailsItem } from 'shared-interfaces';
+import { firstValueFrom } from 'rxjs';
+import { StalkerInlineDetailComponent } from './stalker-inline-detail/stalker-inline-detail.component';
+
+interface StalkerCollectionStateSnapshot {
+    currentPlaylist: Playlist | undefined;
+    selectedContentType: 'vod' | 'itv' | 'series';
+    selectedCategoryId: string | null | undefined;
+    selectedItem: unknown;
+}
+
+type StalkerDetailCategory = 'vod' | 'series';
+
+interface StalkerCollectionDetailMode {
+    category: StalkerDetailCategory;
+    selectedContentType: StalkerDetailCategory;
+    hasEmbeddedSeries: boolean;
+    needsSeriesFetch: boolean;
+}
+
+@Component({
+    selector: 'app-stalker-collection-detail',
+    imports: [ContentHeroComponent, StalkerInlineDetailComponent],
+    template: `
+        @if (inlineDetail().categoryId) {
+            <app-stalker-inline-detail
+                [categoryId]="inlineDetail().categoryId"
+                [seriesItem]="inlineDetail().seriesItem"
+                [isSeries]="inlineDetail().isSeries"
+                [vodDetailsItem]="inlineDetail().vodDetailsItem"
+                [isFavorite]="isSelectedVodFavorite()"
+                (backClicked)="closeRequested.emit()"
+                (playClicked)="onVodPlay($event)"
+                (favoriteToggled)="onVodFavoriteToggled($event)"
+            />
+        } @else {
+            <app-content-hero [isLoading]="true" />
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+                min-height: 0;
+            }
+        `,
+    ],
+})
+export class StalkerCollectionDetailComponent {
+    readonly item = input<UnifiedCollectionItem | null>(null);
+    readonly closeRequested = output<void>();
+
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly stalkerStore = inject(StalkerStore);
+    private readonly originalState = this.captureStoreState();
+    private readonly favoritesRefresh = createRefreshTrigger();
+
+    readonly itemDetails = signal<StalkerSelectedVodItem | null>(null);
+    readonly vodDetailsItem = signal<VodDetailsItem | null>(null);
+    readonly isSelectedVodFavorite = signal(false);
+    readonly detailCategoryOverride = signal<StalkerDetailCategory | null>(
+        null
+    );
+    readonly inlineDetail = computed(() =>
+        createStalkerInlineDetailState(
+            this.itemDetails(),
+            this.vodDetailsItem(),
+            this.detailCategoryOverride()
+        )
+    );
+
+    readonly portalFavorites = createPortalFavoritesResource(
+        this.playlistsService,
+        () => this.stalkerStore.currentPlaylist()?._id,
+        () => this.favoritesRefresh.refreshVersion()
+    );
+
+    private initRequestId = 0;
+
+    constructor() {
+        effect(() => {
+            this.portalFavorites.value();
+            this.syncSelectedVodFavorite();
+        });
+
+        effect(() => {
+            const item = this.item();
+            untracked(() => {
+                void this.prepareDetail(item);
+            });
+        });
+    }
+
+    ngOnDestroy(): void {
+        void this.stalkerStore.setCurrentPlaylist(
+            this.originalState.currentPlaylist
+        );
+        this.stalkerStore.setSelectedContentType(
+            this.originalState.selectedContentType
+        );
+        this.stalkerStore.setSelectedCategory(
+            this.originalState.selectedCategoryId
+        );
+        this.stalkerStore.setSelectedItem(
+            this.originalState.selectedItem as never
+        );
+    }
+
+    onVodPlay(item: VodDetailsItem): void {
+        if (item.type === 'stalker') {
+            this.stalkerStore.createLinkToPlayVod(
+                item.cmd,
+                item.data.info?.name,
+                item.data.info?.movie_image
+            );
+        }
+    }
+
+    onVodFavoriteToggled(event: {
+        item: VodDetailsItem;
+        isFavorite: boolean;
+    }): void {
+        toggleStalkerVodFavorite(event, {
+            addToFavorites: (item, onDone) =>
+                this.stalkerStore.addToFavorites(
+                    item as StalkerPortalItem,
+                    onDone
+                ),
+            removeFromFavorites: (favoriteId, onDone) =>
+                this.stalkerStore.removeFromFavorites(favoriteId, onDone),
+            onComplete: () => {
+                this.favoritesRefresh.refresh();
+                this.syncSelectedVodFavorite();
+            },
+        });
+    }
+
+    private async prepareDetail(
+        item: UnifiedCollectionItem | null
+    ): Promise<void> {
+        const requestId = ++this.initRequestId;
+
+        if (!item) {
+            this.clearLocalDetailState();
+            return;
+        }
+
+        const playlist = await this.loadPlaylist(item.playlistId);
+        if (requestId !== this.initRequestId) {
+            return;
+        }
+
+        if (!playlist?.macAddress || !playlist.portalUrl) {
+            this.clearLocalDetailState();
+            return;
+        }
+
+        await this.stalkerStore.setCurrentPlaylist(playlist);
+        if (requestId !== this.initRequestId) {
+            return;
+        }
+
+        const stalkerItem = this.resolveStalkerItem(item);
+        const detailMode = this.resolveDetailMode(item, stalkerItem);
+        const itemDetails = buildStalkerSelectedVodItem(
+            stalkerItem as never,
+            detailMode.needsSeriesFetch
+        );
+
+        this.detailCategoryOverride.set(detailMode.category);
+        this.stalkerStore.setSelectedContentType(detailMode.selectedContentType);
+        this.stalkerStore.setSelectedCategory(
+            this.resolveSelectedCategory(item, stalkerItem, detailMode)
+        );
+        this.stalkerStore.setSelectedItem(itemDetails);
+        this.itemDetails.set(itemDetails);
+
+        if (
+            detailMode.selectedContentType === 'vod' &&
+            !detailMode.hasEmbeddedSeries &&
+            !detailMode.needsSeriesFetch
+        ) {
+            const detailViewState = createStalkerDetailViewState(
+                itemDetails,
+                playlist._id
+            );
+            this.itemDetails.set(detailViewState.itemDetails);
+            this.vodDetailsItem.set(detailViewState.vodDetailsItem);
+            this.syncSelectedVodFavorite();
+            return;
+        }
+
+        const cleared = clearStalkerDetailViewState();
+        this.vodDetailsItem.set(cleared.vodDetailsItem);
+        this.isSelectedVodFavorite.set(false);
+    }
+
+    private captureStoreState(): StalkerCollectionStateSnapshot {
+        return {
+            currentPlaylist:
+                (this.stalkerStore.currentPlaylist() as Playlist | undefined) ??
+                undefined,
+            selectedContentType: this.stalkerStore.selectedContentType(),
+            selectedCategoryId: this.stalkerStore.selectedCategoryId(),
+            selectedItem: this.stalkerStore.selectedItem(),
+        };
+    }
+
+    private async loadPlaylist(playlistId: string): Promise<Playlist | null> {
+        try {
+            return (
+                (await firstValueFrom(
+                    this.playlistsService.getPlaylistById(playlistId)
+                )) ?? null
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    private resolveStalkerItem(item: UnifiedCollectionItem): StalkerPortalItem {
+        return buildStalkerStateItem(
+            item.stalkerItem as StalkerPortalItem | undefined,
+            {
+                id:
+                    item.stalkerId ??
+                    item.uid.split('::')[item.uid.split('::').length - 1] ??
+                    item.uid,
+                title: item.name,
+                type: item.contentType,
+                category_id: item.categoryId,
+                poster_url: item.posterUrl ?? item.logo ?? undefined,
+            }
+        ) as StalkerPortalItem;
+    }
+
+    private resolveDetailMode(
+        item: UnifiedCollectionItem,
+        stalkerItem: StalkerPortalItem
+    ): StalkerCollectionDetailMode {
+        const hasEmbeddedSeries = Array.isArray(
+            (stalkerItem as { series?: unknown[] }).series
+        )
+            ? (stalkerItem as { series?: unknown[] }).series!.length > 0
+            : false;
+        const isVodSeries = isStalkerSeriesFlag(
+            (stalkerItem as { is_series?: unknown }).is_series
+        );
+        const isRegularSeries =
+            item.contentType === 'series' && !hasEmbeddedSeries && !isVodSeries;
+        const selectedContentType: StalkerDetailCategory = isRegularSeries
+            ? 'series'
+            : 'vod';
+
+        return {
+            category: selectedContentType,
+            selectedContentType,
+            hasEmbeddedSeries,
+            needsSeriesFetch:
+                selectedContentType === 'vod' &&
+                !hasEmbeddedSeries &&
+                isVodSeries,
+        };
+    }
+
+    private resolveSelectedCategory(
+        item: UnifiedCollectionItem,
+        stalkerItem: StalkerPortalItem,
+        detailMode: StalkerCollectionDetailMode
+    ): string | number {
+        const categoryId =
+            item.categoryId ??
+            (stalkerItem as { category_id?: string | number }).category_id;
+
+        if (
+            detailMode.selectedContentType === 'vod' &&
+            String(categoryId ?? '').toLowerCase() === 'series'
+        ) {
+            return 'vod';
+        }
+
+        return categoryId ?? toStalkerCategoryId(detailMode.selectedContentType);
+    }
+
+    private syncSelectedVodFavorite(): void {
+        this.isSelectedVodFavorite.set(
+            isSelectedStalkerVodFavorite(
+                this.vodDetailsItem(),
+                this.portalFavorites.value() ?? []
+            )
+        );
+    }
+
+    private clearLocalDetailState(): void {
+        const cleared = clearStalkerDetailViewState();
+        this.itemDetails.set(cleared.itemDetails);
+        this.vodDetailsItem.set(cleared.vodDetailsItem);
+        this.detailCategoryOverride.set(null);
+        this.isSelectedVodFavorite.set(false);
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-route.component.ts b/libs/portal/stalker/feature/src/lib/stalker-collection-route.component.ts
new file mode 100644
index 0000000..c31ad76
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-route.component.ts
@@ -0,0 +1,48 @@
+import {
+    inject,
+    ChangeDetectionStrategy,
+    Component,
+    input,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+    UnifiedCollectionDetailDirective,
+    UnifiedCollectionPageComponent,
+} from '@iptvnator/portal/shared/ui';
+import { routeParamSignal } from '@iptvnator/portal/shared/util';
+import { StalkerCollectionDetailComponent } from './stalker-collection-detail.component';
+
+@Component({
+    selector: 'app-stalker-collection-route',
+    imports: [
+        StalkerCollectionDetailComponent,
+        UnifiedCollectionDetailDirective,
+        UnifiedCollectionPageComponent,
+    ],
+    template: `
+        <app-unified-collection-page
+            [mode]="mode()"
+            [portalType]="portalType()"
+            [playlistId]="playlistId()"
+        >
+            <ng-template unifiedCollectionDetail let-item let-close="close">
+                <app-stalker-collection-detail
+                    [item]="item"
+                    (closeRequested)="close()"
+                />
+            </ng-template>
+        </app-unified-collection-page>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StalkerCollectionRouteComponent {
+    private readonly route = inject(ActivatedRoute);
+
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly portalType = input('stalker');
+    readonly playlistId = routeParamSignal<string | undefined>(
+        this.route,
+        'id',
+        (value) => value ?? undefined
+    );
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.html b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.html
new file mode 100644
index 0000000..ef7ead0
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.html
@@ -0,0 +1,12 @@
+@let isFavorite = isFavorite$ | async;
+@if (isFavorite === false) {
+    <button class="favorite-btn" (click)="addToFavorites()">
+        <mat-icon>add</mat-icon>
+        {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
+    </button>
+} @else {
+    <button class="favorite-btn favorite-btn--active" (click)="removeFromFavorites()">
+        <mat-icon>check</mat-icon>
+        {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
+    </button>
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
new file mode 100644
index 0000000..679630b
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
@@ -0,0 +1,32 @@
+.favorite-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    background: rgba(109, 109, 110, 0.7);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(109, 109, 110, 0.5);
+    }
+
+    &--active {
+        background: rgba(229, 9, 20, 0.8);
+
+        &:hover {
+            background: rgba(229, 9, 20, 0.6);
+        }
+    }
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.spec.ts b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.spec.ts
new file mode 100644
index 0000000..237ad09
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.spec.ts
@@ -0,0 +1,138 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { PlaylistsService } from 'services';
+import { of } from 'rxjs';
+import { FavoritesButtonComponent } from './stalker-favorites-button.component';
+
+describe('FavoritesButtonComponent', () => {
+    let fixture: ComponentFixture<FavoritesButtonComponent>;
+    let selectedContentType: ReturnType<typeof signal<'vod' | 'series'>>;
+    let addToFavorites: jest.Mock;
+
+    beforeEach(async () => {
+        selectedContentType = signal<'vod' | 'series'>('series');
+        addToFavorites = jest.fn((_item: unknown, onDone?: () => void) => {
+            onDone?.();
+        });
+
+        await TestBed.configureTestingModule({
+            imports: [
+                FavoritesButtonComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: StalkerStore,
+                    useValue: {
+                        currentPlaylist: signal({ _id: 'stalker-1' }),
+                        selectedContentType,
+                        addToFavorites,
+                        removeFromFavorites: jest.fn(),
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {
+                        getPortalFavorites: jest.fn(() => of([])),
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(FavoritesButtonComponent);
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+    });
+
+    it('preserves VOD-series favorite payload shape from the VOD series view', () => {
+        selectedContentType.set('vod');
+        fixture.componentRef.setInput('itemId', '1507');
+        fixture.componentRef.setInput('item', {
+            id: '1507',
+            cmd: '/media/file_1507.mpg',
+            category_id: '2001',
+            is_series: '1',
+            info: {
+                name: 'VOD Flagged Series',
+                movie_image: 'poster.jpg',
+            },
+        });
+        fixture.detectChanges();
+
+        fixture.componentInstance.addToFavorites();
+
+        expect(addToFavorites).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: '1507',
+                category_id: '2001',
+                is_series: true,
+                title: 'VOD Flagged Series',
+                cover: 'poster.jpg',
+            }),
+            expect.any(Function)
+        );
+        expect(addToFavorites.mock.calls[0][0]).not.toHaveProperty('series_id');
+    });
+
+    it('preserves embedded VOD series arrays in favorite payloads', () => {
+        selectedContentType.set('vod');
+        fixture.componentRef.setInput('itemId', '20001');
+        fixture.componentRef.setInput('item', {
+            id: '20001',
+            cmd: '/media/file_20001.mpg',
+            category_id: '2001',
+            series: [1, 2],
+            info: {
+                name: 'Embedded Series',
+                movie_image: 'embedded.jpg',
+            },
+        });
+        fixture.detectChanges();
+
+        fixture.componentInstance.addToFavorites();
+
+        expect(addToFavorites).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: '20001',
+                category_id: '2001',
+                series: [1, 2],
+                title: 'Embedded Series',
+                cover: 'embedded.jpg',
+            }),
+            expect.any(Function)
+        );
+        expect(addToFavorites.mock.calls[0][0]).not.toHaveProperty('series_id');
+    });
+
+    it('writes regular Stalker series favorites with series_id', () => {
+        selectedContentType.set('series');
+        fixture.componentRef.setInput('itemId', '30001');
+        fixture.componentRef.setInput('item', {
+            id: '30001',
+            cmd: '/media/file_30001.mpg',
+            info: {
+                name: 'Regular Series',
+                movie_image: 'series.jpg',
+            },
+        });
+        fixture.detectChanges();
+
+        fixture.componentInstance.addToFavorites();
+
+        expect(addToFavorites).toHaveBeenCalledWith(
+            expect.objectContaining({
+                series_id: '30001',
+                category_id: 'series',
+                title: 'Regular Series',
+                cover: 'series.jpg',
+            }),
+            expect.any(Function)
+        );
+    });
+});
diff --git a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.ts b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.ts
new file mode 100644
index 0000000..2acc460
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.ts
@@ -0,0 +1,97 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject, map, switchMap } from 'rxjs';
+import { PlaylistsService } from 'services';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import {
+    matchesFavoriteById,
+    normalizeStalkerSeriesFlag,
+    StalkerSelectedVodItem,
+} from '@iptvnator/portal/stalker/data-access';
+
+type FavoriteButtonItem = StalkerSelectedVodItem & {
+    name?: string;
+    o_name?: string;
+    cover?: string;
+};
+
+@Component({
+    selector: 'app-favorites-button',
+    templateUrl: './stalker-favorites-button.component.html',
+    styleUrls: ['./stalker-favorites-button.component.scss'],
+    imports: [AsyncPipe, MatIconModule, TranslateModule],
+})
+export class FavoritesButtonComponent {
+    private playlistService = inject(PlaylistsService);
+    private stalkerStore = inject(StalkerStore);
+
+    readonly itemId = input.required<string>();
+    readonly item = input.required<FavoriteButtonItem>();
+
+    private readonly favoritesChanged$ = new BehaviorSubject<void>(undefined);
+
+    readonly isFavorite$ = this.favoritesChanged$.pipe(
+        switchMap(() =>
+            this.playlistService.getPortalFavorites(
+                this.stalkerStore.currentPlaylist()?._id
+            )
+        ),
+        map((favorites) =>
+            favorites.some((favorite) =>
+                matchesFavoriteById(favorite, this.itemId())
+            )
+        )
+    );
+
+    removeFromFavorites() {
+        this.stalkerStore.removeFromFavorites(this.itemId(), () => {
+            this.favoritesChanged$.next();
+        });
+    }
+
+    addToFavorites() {
+        const item = this.item();
+        const favoriteBase = {
+            ...item,
+            title: item.info?.name ?? item.name ?? item.o_name,
+            cover: item.info?.movie_image ?? item.cover,
+            added_at: new Date().toISOString(),
+        };
+
+        if (this.stalkerStore.selectedContentType() === 'vod') {
+            this.stalkerStore.addToFavorites(
+                {
+                    ...favoriteBase,
+                    id: item.id,
+                    category_id: item.category_id ?? 'vod',
+                    series: item.series,
+                    is_series: normalizeStalkerSeriesFlag(item.is_series),
+                },
+                () => {
+                    this.favoritesChanged$.next();
+                }
+            );
+            return;
+        }
+
+        this.stalkerStore.addToFavorites(
+            {
+                ...favoriteBase,
+                series_id: item.id,
+                category_id: 'series',
+            },
+            () => {
+                this.favoritesChanged$.next();
+            }
+        );
+    }
+
+    forceRefresh() {
+        // Exposed for callers that need manual refresh after external updates.
+        if (this.stalkerStore.currentPlaylist()?._id) {
+            this.favoritesChanged$.next();
+        }
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-feature.routes.ts b/libs/portal/stalker/feature/src/lib/stalker-feature.routes.ts
new file mode 100644
index 0000000..682f782
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-feature.routes.ts
@@ -0,0 +1,126 @@
+import { Route } from '@angular/router';
+import { PORTAL_CATALOG_DETAIL_COMPONENT } from '@iptvnator/portal/shared/util';
+import { StalkerCatalogDetailComponent } from './stalker-catalog-detail/stalker-catalog-detail.component';
+import { provideStalkerCatalogFacade } from './stalker-catalog-facade.service';
+import { provideStalkerWorkspaceRouteSession } from './stalker-workspace-route-session.service';
+
+type ComponentLoader = NonNullable<Route['loadComponent']>;
+
+const loadDownloadsComponent: ComponentLoader = () =>
+    import('@iptvnator/portal/downloads/feature').then(
+        (c) => c.DownloadsComponent
+    );
+
+const loadStalkerLiveStreamLayoutComponent: ComponentLoader = () =>
+    import('./stalker-live-stream-layout/stalker-live-stream-layout.component').then(
+        (c) => c.StalkerLiveStreamLayoutComponent
+    );
+
+const loadCategoryContentViewComponent: ComponentLoader = () =>
+    import('@iptvnator/portal/catalog/feature').then(
+        (c) => c.CategoryContentViewComponent
+    );
+
+const loadStalkerCollectionRouteComponent: ComponentLoader = () =>
+    import('./stalker-collection-route.component').then(
+        (c) => c.StalkerCollectionRouteComponent
+    );
+
+const loadStalkerSearchComponent: ComponentLoader = () =>
+    import('./stalker-search/stalker-search.component').then(
+        (c) => c.StalkerSearchComponent
+    );
+
+export function createStalkerRoutes(): Route[] {
+    return [
+        {
+            path: 'stalker/:id',
+            providers: provideStalkerWorkspaceRouteSession(),
+            children: [
+                {
+                    path: '',
+                    redirectTo: 'vod',
+                    pathMatch: 'full',
+                },
+                {
+                    path: 'vod',
+                    providers: [
+                        ...provideStalkerCatalogFacade(),
+                        {
+                            provide: PORTAL_CATALOG_DETAIL_COMPONENT,
+                            useValue: StalkerCatalogDetailComponent,
+                        },
+                    ],
+                    children: [
+                        {
+                            path: '',
+                            data: {
+                                api: 'stalker',
+                                contentType: 'vod',
+                            },
+                            loadComponent: loadCategoryContentViewComponent,
+                        },
+                        {
+                            path: ':categoryId',
+                            data: {
+                                api: 'stalker',
+                                contentType: 'vod',
+                            },
+                            loadComponent: loadCategoryContentViewComponent,
+                        },
+                    ],
+                },
+                {
+                    path: 'itv',
+                    loadComponent: loadStalkerLiveStreamLayoutComponent,
+                },
+                {
+                    path: 'series',
+                    providers: [
+                        ...provideStalkerCatalogFacade(),
+                        {
+                            provide: PORTAL_CATALOG_DETAIL_COMPONENT,
+                            useValue: StalkerCatalogDetailComponent,
+                        },
+                    ],
+                    children: [
+                        {
+                            path: '',
+                            data: {
+                                api: 'stalker',
+                                contentType: 'series',
+                            },
+                            loadComponent: loadCategoryContentViewComponent,
+                        },
+                        {
+                            path: ':categoryId',
+                            data: {
+                                api: 'stalker',
+                                contentType: 'series',
+                            },
+                            loadComponent: loadCategoryContentViewComponent,
+                        },
+                    ],
+                },
+                {
+                    path: 'favorites',
+                    loadComponent: loadStalkerCollectionRouteComponent,
+                    data: { mode: 'favorites', portalType: 'stalker' },
+                },
+                {
+                    path: 'recent',
+                    loadComponent: loadStalkerCollectionRouteComponent,
+                    data: { mode: 'recent', portalType: 'stalker' },
+                },
+                {
+                    path: 'search',
+                    loadComponent: loadStalkerSearchComponent,
+                },
+                {
+                    path: 'downloads',
+                    loadComponent: loadDownloadsComponent,
+                },
+            ],
+        },
+    ];
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-inline-detail/stalker-inline-detail.component.html b/libs/portal/stalker/feature/src/lib/stalker-inline-detail/stalker-inline-detail.component.html
new file mode 100644
index 0000000..c69bb55
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-inline-detail/stalker-inline-detail.component.html
@@ -0,0 +1,24 @@
+@if (categoryId() === 'vod') {
+    @if ((seriesItem()?.series?.length ?? 0) > 0) {
+        <!-- VOD item with embedded series (vclub) -->
+        <app-stalker-series-view
+            [vodWithSeries]="seriesItem()"
+            (backClicked)="onBackClicked()"
+        />
+    } @else if (isSeries()) {
+        <!-- VOD item that is actually a series (Ministra plugin is_series=1) -->
+        <app-stalker-series-view (backClicked)="onBackClicked()" />
+    } @else if (vodDetailsItem()) {
+        <!-- Regular VOD item -->
+        <app-vod-details
+            [item]="vodDetailsItem()"
+            [isFavorite]="isFavorite()"
+            [externalPlayback]="externalPlayback.activeSession()"
+            (playClicked)="onPlayClicked($event)"
+            (favoriteToggled)="onFavoriteToggled($event)"
+            (backClicked)="onBackClicked()"
+        />
+    }
+} @else if (categoryId() === 'series') {
+    <app-stalker-series-view (backClicked)="onBackClicked()" />
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-inline-detail/stalker-inline-detail.component.ts b/libs/portal/stalker/feature/src/lib/stalker-inline-detail/stalker-inline-detail.component.ts
new file mode 100644
index 0000000..c7a1817
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-inline-detail/stalker-inline-detail.component.ts
@@ -0,0 +1,55 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    input,
+    output,
+} from '@angular/core';
+import { PORTAL_EXTERNAL_PLAYBACK } from '@iptvnator/portal/shared/util';
+import { StalkerSelectedVodItem } from '@iptvnator/portal/stalker/data-access';
+import { VodDetailsComponent } from '@iptvnator/ui/playback';
+import { VodDetailsItem } from 'shared-interfaces';
+import { StalkerSeriesViewComponent } from '../stalker-series-view/stalker-series-view.component';
+
+@Component({
+    selector: 'app-stalker-inline-detail',
+    imports: [StalkerSeriesViewComponent, VodDetailsComponent],
+    templateUrl: './stalker-inline-detail.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+            :host {
+                display: block;
+                height: 100%;
+                width: 100%;
+            }
+        `,
+    ],
+})
+export class StalkerInlineDetailComponent {
+    readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    readonly categoryId = input<'vod' | 'series' | null>(null);
+    readonly seriesItem = input<StalkerSelectedVodItem | null>(null);
+    readonly isSeries = input<boolean>(false);
+    readonly vodDetailsItem = input<VodDetailsItem | null>(null);
+    readonly isFavorite = input<boolean>(false);
+
+    readonly backClicked = output<void>();
+    readonly playClicked = output<VodDetailsItem>();
+    readonly favoriteToggled = output<{
+        item: VodDetailsItem;
+        isFavorite: boolean;
+    }>();
+
+    onBackClicked() {
+        this.backClicked.emit();
+    }
+
+    onPlayClicked(item: VodDetailsItem) {
+        this.playClicked.emit(item);
+    }
+
+    onFavoriteToggled(event: { item: VodDetailsItem; isFavorite: boolean }) {
+        this.favoriteToggled.emit(event);
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html
new file mode 100644
index 0000000..6073d21
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html
@@ -0,0 +1,106 @@
+@let isEmbeddedPlayer = usesEmbeddedPlayer();
+
+@if (stalkerStore.selectedCategoryId()) {
+    <div
+        class="sidebar"
+        appResizable
+        [minWidth]="250"
+        [maxWidth]="600"
+        [defaultWidth]="400"
+        storageKey="sidebar-width"
+    >
+        <div class="sidebar-header category-content-header">
+            <div class="category-meta">
+                <h2 class="category-title">
+                    {{ selectedCategoryTitle() }}
+                </h2>
+                @if (visibleChannels().length > 0) {
+                    <span class="category-subtitle"
+                        >{{ visibleChannels().length }}
+                        {{
+                            visibleChannels().length === 1 ? 'item' : 'items'
+                        }}</span
+                    >
+                }
+            </div>
+        </div>
+
+        <div #scrollContainer class="channels-list">
+            @if (searchTerm() && visibleChannels().length === 0) {
+                <div class="empty-search-state">
+                    <app-portal-empty-state
+                        icon="search_off"
+                        [message]="'CHANNELS.NO_SEARCH_RESULTS' | translate"
+                    />
+                </div>
+            } @else {
+                @for (item of visibleChannels(); track item.id ?? $index) {
+                    <app-channel-list-item
+                        [name]="item.o_name || item.name || ''"
+                        [logo]="item.logo"
+                        [selected]="isSelectedChannel(item)"
+                        [epgProgram]="
+                            epgPreviewPrograms.get(
+                                normalizeStalkerEntityId(item.id)
+                            ) ?? null
+                        "
+                        [progressPercentage]="
+                            currentProgramsProgress.get(
+                                normalizeStalkerEntityId(item.id)
+                            ) ?? 0
+                        "
+                        [showFavoriteButton]="true"
+                        [showProgramInfoButton]="false"
+                        [isFavorite]="
+                            favorites.get(normalizeStalkerEntityId(item.id)) ??
+                            false
+                        "
+                        (clicked)="playChannel(item)"
+                        (favoriteToggled)="toggleFavorite(item)"
+                    />
+                }
+            }
+
+            @if (isLoadingMore()) {
+                <div class="loading-indicator">
+                    <mat-spinner diameter="24" />
+                </div>
+            }
+        </div>
+    </div>
+}
+
+<div class="content-container">
+    @if (!stalkerStore.selectedCategoryId()) {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'PORTALS.SELECT_CATEGORY' | translate"
+        />
+    } @else if (stalkerStore.selectedItem()) {
+        @if (streamUrl() && isEmbeddedPlayer) {
+            <div class="video-player">
+                <app-web-player-view [streamUrl]="streamUrl()" />
+            </div>
+        }
+        <div class="epg">
+            <div class="epg-content">
+                @if (isLoadingEpg()) {
+                    <div class="loading-indicator">
+                        <mat-spinner diameter="24" />
+                    </div>
+                } @else {
+                    <app-epg-list
+                        [controlledChannel]="controlledChannel()"
+                        [controlledPrograms]="activeEpgPrograms()"
+                        [controlledArchiveDays]="0"
+                    />
+                }
+            </div>
+        </div>
+    } @else {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
+        />
+    }
+</div>
diff --git a/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.scss b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.scss
new file mode 100644
index 0000000..40c6c35
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.scss
@@ -0,0 +1,65 @@
+@use '../../../../../../ui/styles/portal-layout' as portal;
+@use '../../../../../../ui/styles/panel-header' as panel;
+@use '../../../../../../ui/styles/portal-sidebar';
+
+@include portal.live-layout;
+
+.category-content-header {
+    @include panel.standard-panel-header(
+        $padding: 8px 12px,
+        $gap: 8px,
+        $min-height: 48px,
+        $border-color: var(--app-separator)
+    );
+    app-region: drag;
+
+    button {
+        app-region: no-drag;
+    }
+}
+
+.category-meta {
+    @include panel.standard-panel-meta(8px);
+}
+
+.category-title {
+    @include panel.standard-panel-title(0.94rem);
+    color: var(--mat-sys-on-surface);
+}
+
+.category-subtitle {
+    @include panel.standard-panel-subtitle(
+        $font-size: 0.72rem,
+        $padding: 2px 8px,
+        $color: var(--mat-sys-on-surface-variant),
+        $background: var(--mat-sys-surface-container)
+    );
+}
+
+.channels-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 4px 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.loading-indicator {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+}
+
+.load-more-epg {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0;
+}
+
+@container (max-width: 350px) {
+    .channels-list {
+        padding-inline: 6px;
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.spec.ts b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.spec.ts
new file mode 100644
index 0000000..5c112bf
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.spec.ts
@@ -0,0 +1,327 @@
+import { Component, Directive, input, output, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { PortalEmptyStateComponent } from '@iptvnator/portal/shared/ui';
+import {
+    PORTAL_PLAYER,
+    ResizableDirective,
+} from '@iptvnator/portal/shared/util';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { EpgListComponent } from '@iptvnator/ui/epg';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ChannelListItemComponent } from 'components';
+import { MockPipe } from 'ng-mocks';
+import { of } from 'rxjs';
+import { PlaylistsService } from 'services';
+import { EpgProgram } from 'shared-interfaces';
+import { WebPlayerViewComponent } from 'shared-portals';
+import { StalkerLiveStreamLayoutComponent } from './stalker-live-stream-layout.component';
+
+@Component({
+    selector: 'app-channel-list-item',
+    standalone: true,
+    template: '',
+})
+class StubChannelListItemComponent {
+    readonly name = input('');
+    readonly logo = input<string | null | undefined>(null);
+    readonly selected = input(false);
+    readonly epgProgram = input<unknown>(null);
+    readonly progressPercentage = input(0);
+    readonly showFavoriteButton = input(false);
+    readonly showProgramInfoButton = input(false);
+    readonly isFavorite = input(false);
+    readonly clicked = output<void>();
+    readonly favoriteToggled = output<void>();
+}
+
+@Component({
+    selector: 'app-web-player-view',
+    standalone: true,
+    template: '',
+})
+class StubWebPlayerViewComponent {
+    readonly streamUrl = input('');
+}
+
+@Component({
+    selector: 'app-epg-list',
+    standalone: true,
+    template: '',
+})
+class StubEpgListComponent {
+    readonly controlledChannel = input<unknown>(null);
+    readonly controlledPrograms = input<EpgProgram[] | null>(null);
+    readonly controlledArchiveDays = input<number | null>(null);
+    readonly archivePlaybackAvailable = input<boolean | null>(null);
+}
+
+@Component({
+    selector: 'app-portal-empty-state',
+    standalone: true,
+    template: '',
+})
+class StubPortalEmptyStateComponent {
+    readonly icon = input('');
+    readonly message = input('');
+}
+
+@Directive({
+    selector: '[appResizable]',
+    standalone: true,
+})
+class StubResizableDirective {}
+
+describe('StalkerLiveStreamLayoutComponent', () => {
+    let fixture: ComponentFixture<StalkerLiveStreamLayoutComponent>;
+    let component: StalkerLiveStreamLayoutComponent;
+    let fetchChannelEpg: jest.Mock;
+    let ensureBulkItvEpg: jest.Mock;
+    let resolveItvPlayback: jest.Mock;
+
+    const playlist = signal({
+        _id: 'playlist-1',
+        title: 'Demo Stalker',
+    });
+    const selectedCategoryId = signal<string | null>('1001');
+    const searchPhrase = signal('');
+    const itvChannels = signal([
+        {
+            id: '10001',
+            cmd: 'ffrt4://itv/10001',
+            name: 'Alpha TV',
+            o_name: 'Alpha TV',
+            logo: 'alpha.png',
+        },
+        {
+            id: '10002',
+            cmd: 'ffrt4://itv/10002',
+            name: 'Beta TV',
+            o_name: 'Beta TV',
+            logo: 'beta.png',
+        },
+    ]);
+    const selectedItvId = signal<string | undefined>('10001');
+    const selectedItem = signal<{
+        id: string;
+        cmd: string;
+        name: string;
+        o_name: string;
+        logo: string;
+    } | null>(itvChannels()[0]);
+    const selectedItvEpgPrograms = signal<EpgProgram[]>([]);
+    const bulkItvEpgByChannel = signal<Record<string, EpgProgram[]>>({});
+    const bulkItvEpgLoaded = signal(false);
+    const bulkItvEpgPlaylistId = signal<string | null>(null);
+    const bulkItvEpgPeriodHours = signal<number | null>(null);
+    const isLoadingBulkItvEpg = signal(false);
+
+    const stalkerStore = {
+        getSelectedCategoryName: signal('News'),
+        itvChannels,
+        searchPhrase,
+        hasMoreChannels: signal(false),
+        selectedItvId,
+        currentPlaylist: playlist,
+        selectedItvEpgPrograms,
+        bulkItvEpgByChannel,
+        bulkItvEpgLoaded,
+        bulkItvEpgPlaylistId,
+        bulkItvEpgPeriodHours,
+        isLoadingBulkItvEpg,
+        selectedCategoryId,
+        selectedItem,
+        selectedContentType: signal<'itv' | 'vod' | 'series'>('itv'),
+        page: signal(0),
+        setItvChannels: jest.fn(),
+        setPage: jest.fn(),
+        setSelectedItem: jest.fn((item) => {
+            selectedItem.set(item);
+            selectedItvId.set(String(item.id));
+            selectedItvEpgPrograms.set(
+                bulkItvEpgByChannel()[String(item.id)] ?? []
+            );
+        }),
+        resolveItvPlayback: jest.fn(),
+        fetchChannelEpg: jest.fn(),
+        ensureBulkItvEpg: jest.fn(),
+        clearBulkItvEpgCache: jest.fn(() => {
+            bulkItvEpgByChannel.set({});
+            bulkItvEpgLoaded.set(false);
+            bulkItvEpgPlaylistId.set(null);
+            bulkItvEpgPeriodHours.set(null);
+            selectedItvEpgPrograms.set([]);
+        }),
+        addToFavorites: jest.fn(),
+        removeFromFavorites: jest.fn(),
+    };
+
+    const playlistService = {
+        getPortalFavorites: jest.fn(() => of([])),
+    };
+    const portalPlayer = {
+        isEmbeddedPlayer: jest.fn(() => true),
+        openResolvedPlayback: jest.fn(),
+    };
+
+    beforeEach(async () => {
+        fetchChannelEpg = stalkerStore.fetchChannelEpg;
+        ensureBulkItvEpg = stalkerStore.ensureBulkItvEpg;
+        resolveItvPlayback = stalkerStore.resolveItvPlayback;
+
+        selectedCategoryId.set('1001');
+        searchPhrase.set('');
+        selectedItvId.set('10001');
+        selectedItem.set(itvChannels()[0]);
+        selectedItvEpgPrograms.set([]);
+        bulkItvEpgByChannel.set({});
+        bulkItvEpgLoaded.set(false);
+        bulkItvEpgPlaylistId.set(null);
+        bulkItvEpgPeriodHours.set(null);
+        isLoadingBulkItvEpg.set(false);
+
+        resolveItvPlayback.mockReset();
+        resolveItvPlayback.mockResolvedValue({
+            streamUrl: 'https://example.com/alpha.m3u8',
+        });
+        fetchChannelEpg.mockReset();
+        fetchChannelEpg.mockResolvedValue([]);
+        ensureBulkItvEpg.mockReset();
+        ensureBulkItvEpg.mockImplementation(async () => {
+            const bulkPrograms = {
+                '10001': [buildProgram('10001', 'Current Show')],
+                '10002': [buildProgram('10002', 'Next Channel Show')],
+            };
+            bulkItvEpgByChannel.set(bulkPrograms);
+            bulkItvEpgLoaded.set(true);
+            bulkItvEpgPlaylistId.set('playlist-1');
+            bulkItvEpgPeriodHours.set(168);
+            selectedItvEpgPrograms.set(
+                bulkPrograms[selectedItvId() ?? ''] ?? []
+            );
+        });
+        stalkerStore.setItvChannels.mockClear();
+        stalkerStore.setPage.mockClear();
+        stalkerStore.setSelectedItem.mockClear();
+        stalkerStore.clearBulkItvEpgCache.mockClear();
+
+        await TestBed.configureTestingModule({
+            imports: [StalkerLiveStreamLayoutComponent, NoopAnimationsModule],
+            providers: [
+                { provide: StalkerStore, useValue: stalkerStore },
+                { provide: PlaylistsService, useValue: playlistService },
+                { provide: PORTAL_PLAYER, useValue: portalPlayer },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: jest.fn((value: string) => value),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(StalkerLiveStreamLayoutComponent, {
+                remove: {
+                    imports: [
+                        ChannelListItemComponent,
+                        EpgListComponent,
+                        PortalEmptyStateComponent,
+                        ResizableDirective,
+                        TranslatePipe,
+                        WebPlayerViewComponent,
+                    ],
+                },
+                add: {
+                    imports: [
+                        StubChannelListItemComponent,
+                        StubEpgListComponent,
+                        StubPortalEmptyStateComponent,
+                        StubResizableDirective,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                        StubWebPlayerViewComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(StalkerLiveStreamLayoutComponent);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+    });
+
+    it('renders the controlled epg list and removes the load-more button', () => {
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('app-epg-list')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('.load-more-epg')
+        ).toBeNull();
+    });
+
+    it('keeps row previews empty before bulk epg is loaded', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(component.epgPreviewPrograms.size).toBe(0);
+        expect(fetchChannelEpg).not.toHaveBeenCalled();
+        expect(ensureBulkItvEpg).not.toHaveBeenCalled();
+    });
+
+    it('derives row previews from cached bulk epg after first playback', async () => {
+        fixture.detectChanges();
+
+        await component.playChannel(itvChannels()[0]);
+        await fixture.whenStable();
+        fixture.detectChanges();
+
+        expect(component.epgPreviewPrograms.get('10001')?.title).toBe(
+            'Current Show'
+        );
+        expect(component.epgPreviewPrograms.get('10002')?.title).toBe(
+            'Next Channel Show'
+        );
+        expect(fetchChannelEpg).not.toHaveBeenCalled();
+    });
+
+    it('ensures bulk EPG only once across channel switches for the same playlist', async () => {
+        fixture.detectChanges();
+
+        await component.playChannel(itvChannels()[0]);
+        await fixture.whenStable();
+        await component.playChannel(itvChannels()[1]);
+        await fixture.whenStable();
+
+        expect(ensureBulkItvEpg).toHaveBeenCalledTimes(1);
+        expect(ensureBulkItvEpg).toHaveBeenCalledWith(168);
+    });
+});
+
+function buildProgram(channelId: string, title: string): EpgProgram {
+    const startTimestamp = Math.floor((Date.now() - 10 * 60 * 1000) / 1000);
+    const stopTimestamp = startTimestamp + 30 * 60;
+
+    return {
+        start: new Date(startTimestamp * 1000).toISOString(),
+        stop: new Date(stopTimestamp * 1000).toISOString(),
+        channel: channelId,
+        title,
+        desc: `${title} description`,
+        category: null,
+        startTimestamp,
+        stopTimestamp,
+    };
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts
new file mode 100644
index 0000000..832fe34
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.ts
@@ -0,0 +1,624 @@
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    computed,
+    effect,
+    ElementRef,
+    inject,
+    OnDestroy,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import {
+    ChannelListItemComponent,
+    ResizableDirective,
+} from 'components';
+import { PlaylistsService } from 'services';
+import {
+    Channel,
+    EpgItem,
+    EpgProgram,
+    ResolvedPortalPlayback,
+} from 'shared-interfaces';
+import { EpgListComponent } from '@iptvnator/ui/epg';
+import { WebPlayerViewComponent } from 'shared-portals';
+import {
+    PORTAL_PLAYER,
+    createLogger,
+    getAdjacentChannelItem,
+    getChannelItemByNumber,
+} from '@iptvnator/portal/shared/util';
+import { PortalEmptyStateComponent } from '@iptvnator/portal/shared/ui';
+import {
+    StalkerFavoriteItem,
+    StalkerItvChannel,
+    StalkerStore,
+    normalizeStalkerEntityId,
+} from '@iptvnator/portal/stalker/data-access';
+
+@Component({
+    selector: 'app-stalker-live-stream-layout',
+    templateUrl: './stalker-live-stream-layout.component.html',
+    styleUrls: ['./stalker-live-stream-layout.component.scss'],
+    imports: [
+        ChannelListItemComponent,
+        EpgListComponent,
+        MatProgressSpinnerModule,
+        PortalEmptyStateComponent,
+        ResizableDirective,
+        TranslatePipe,
+        WebPlayerViewComponent,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StalkerLiveStreamLayoutComponent implements OnDestroy {
+    readonly stalkerStore = inject(StalkerStore);
+    private readonly playlistService = inject(PlaylistsService);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translate = inject(TranslateService);
+    private readonly logger = createLogger('StalkerLiveStream');
+    readonly selectedCategoryTitle = this.stalkerStore.getSelectedCategoryName;
+
+    /** Channels */
+    readonly itvChannels = this.stalkerStore.itvChannels;
+    readonly searchTerm = computed(() =>
+        this.stalkerStore.searchPhrase().trim().toLowerCase()
+    );
+    readonly visibleChannels = computed(() => {
+        const channels = this.itvChannels();
+        const term = this.searchTerm();
+
+        if (!term) {
+            return channels;
+        }
+
+        return channels.filter((item) =>
+            `${item.o_name ?? ''} ${item.name ?? ''}`
+                .toLowerCase()
+                .includes(term)
+        );
+    });
+    readonly hasMoreItems = this.stalkerStore.hasMoreChannels;
+    readonly isLoadingMore = signal(false);
+
+    readonly selectedChannelId = this.stalkerStore.selectedItvId;
+    protected readonly normalizeStalkerEntityId = normalizeStalkerEntityId;
+
+    /** Player */
+    readonly usesEmbeddedPlayer = computed(() =>
+        this.portalPlayer.isEmbeddedPlayer()
+    );
+    readonly activePlayback = signal<ResolvedPortalPlayback | null>(null);
+    readonly streamUrl = computed(
+        () => this.activePlayback()?.streamUrl ?? ''
+    );
+
+    /** EPG */
+    readonly fallbackEpgPrograms = signal<EpgProgram[]>([]);
+    readonly isLoadingFallbackEpg = signal(false);
+    readonly activeEpgPrograms = computed(() => {
+        const bulkPrograms = this.stalkerStore.selectedItvEpgPrograms();
+        return bulkPrograms.length > 0
+            ? bulkPrograms
+            : this.fallbackEpgPrograms();
+    });
+    readonly currentProgram = computed(() =>
+        this.findCurrentProgram(this.activeEpgPrograms())
+    );
+    readonly controlledChannel = computed<Channel | null>(() => {
+        const selectedType = this.stalkerStore.selectedContentType();
+        const selectedItem = this.stalkerStore.selectedItem();
+        if (selectedType !== 'itv' || !selectedItem?.id) {
+            return null;
+        }
+
+        const channelId = normalizeStalkerEntityId(selectedItem.id);
+        const channelName = selectedItem.o_name || selectedItem.name || '';
+
+        return {
+            id: channelId,
+            name: channelName,
+            url: this.streamUrl() || String(selectedItem.cmd ?? ''),
+            group: { title: '' },
+            tvg: {
+                id: channelId,
+                name: channelName,
+                url: '',
+                logo: selectedItem.logo ?? '',
+                rec: '',
+            },
+            http: {
+                referrer: '',
+                'user-agent': '',
+                origin: '',
+            },
+            radio: 'false',
+            epgParams: '',
+        };
+    });
+    readonly isLoadingEpg = computed(
+        () =>
+            this.stalkerStore.isLoadingBulkItvEpg() ||
+            this.isLoadingFallbackEpg()
+    );
+
+    /** Channel list EPG preview */
+    readonly epgPreviewPrograms = new Map<string | number, EpgProgram>();
+    readonly currentProgramsProgress = new Map<string | number, number>();
+    private readonly cdr = inject(ChangeDetectorRef);
+
+    /** Favorites */
+    readonly favorites = new Map<string | number, boolean>();
+
+    /** Scroll */
+    readonly scrollContainer = viewChild<ElementRef>('scrollContainer');
+    private scrollListener: (() => void) | null = null;
+    private unsubscribeRemoteChannelChange?: () => void;
+    private unsubscribeRemoteCommand?: () => void;
+    private epgLoadRequestId = 0;
+    private lastPlaylistId: string | null | undefined = undefined;
+
+    constructor() {
+        // Load favorites for current playlist
+        this.playlistService
+            .getPortalFavorites(this.stalkerStore.currentPlaylist()?._id)
+            .pipe(takeUntilDestroyed())
+            .subscribe((favs) => {
+                favs.forEach((fav: StalkerFavoriteItem) => {
+                    if (fav.id !== undefined) {
+                        this.favorites.set(
+                            normalizeStalkerEntityId(fav.id),
+                            true
+                        );
+                    }
+                });
+            });
+
+        // Reset channels/page on category change
+        effect(() => {
+            this.stalkerStore.selectedCategoryId();
+            this.stalkerStore.setItvChannels([]);
+            this.stalkerStore.setPage(0);
+            this.clearEpgPreviewMaps();
+            this.epgLoadRequestId += 1;
+            this.fallbackEpgPrograms.set([]);
+            this.isLoadingFallbackEpg.set(false);
+        });
+
+        // Reset loading state when channels load and keep preview data in sync with bulk EPG.
+        effect(() => {
+            const channels = this.visibleChannels();
+            if (channels.length > 0) {
+                this.isLoadingMore.set(false);
+                if (!this.searchTerm()) {
+                    setTimeout(() => this.checkIfNeedsMoreContent(), 100);
+                }
+            }
+
+            this.syncBulkEpgPreviews(channels);
+        });
+
+        effect(() => {
+            const playlistId = this.stalkerStore.currentPlaylist()?._id ?? null;
+            if (playlistId === this.lastPlaylistId) {
+                return;
+            }
+
+            this.lastPlaylistId = playlistId;
+            this.epgLoadRequestId += 1;
+            this.fallbackEpgPrograms.set([]);
+            this.isLoadingFallbackEpg.set(false);
+            this.stalkerStore.clearBulkItvEpgCache();
+        });
+
+        // Setup scroll listener when container becomes available
+        effect(() => {
+            const container = this.scrollContainer();
+            if (container) {
+                this.setupScrollListener();
+            }
+        });
+
+        effect(() => {
+            if (!window.electron?.updateRemoteControlStatus) {
+                return;
+            }
+
+            const selectedItem = this.stalkerStore.selectedItem();
+            const selectedType = this.stalkerStore.selectedContentType();
+            const channels = this.visibleChannels();
+
+            if (selectedType !== 'itv' || !selectedItem?.id) {
+                window.electron.updateRemoteControlStatus({
+                    portal: 'stalker',
+                    isLiveView: false,
+                    supportsVolume: false,
+                });
+                return;
+            }
+
+            const currentIndex = channels.findIndex(
+                (item) => Number(item.id) === Number(selectedItem.id)
+            );
+            const currentProgram = this.currentProgram();
+
+            window.electron.updateRemoteControlStatus({
+                portal: 'stalker',
+                isLiveView: true,
+                channelName: selectedItem.o_name || selectedItem.name,
+                channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
+                epgTitle: currentProgram?.title,
+                epgStart: currentProgram?.start,
+                epgEnd: currentProgram?.stop,
+                supportsVolume: false,
+            });
+        });
+
+        if (window.electron?.onChannelChange) {
+            const unsubscribe = window.electron.onChannelChange(
+                (data: { direction: 'up' | 'down' }) => {
+                    this.handleRemoteChannelChange(data.direction);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteChannelChange = unsubscribe;
+            }
+        }
+        if (window.electron?.onRemoteControlCommand) {
+            const unsubscribe = window.electron.onRemoteControlCommand(
+                (command) => {
+                    this.handleRemoteControlCommand(command);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteCommand = unsubscribe;
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        this.unsubscribeRemoteChannelChange?.();
+        this.unsubscribeRemoteCommand?.();
+        this.removeScrollListener();
+    }
+
+    isSelectedChannel(item: StalkerItvChannel): boolean {
+        return (
+            this.selectedChannelId() === this.normalizeStalkerEntityId(item.id)
+        );
+    }
+
+    async playChannel(item: StalkerItvChannel) {
+        this.stalkerStore.setSelectedItem(item);
+
+        try {
+            const playback = await this.stalkerStore.resolveItvPlayback(item);
+            void this.loadEpgForChannel(item);
+
+            if (this.usesEmbeddedPlayer()) {
+                this.activePlayback.set(playback);
+            } else {
+                void this.portalPlayer.openResolvedPlayback(playback, true);
+            }
+        } catch (error) {
+            this.logger.error('Playback failed', error);
+            const errorMessage =
+                error?.message === 'nothing_to_play'
+                    ? this.translate.instant('PORTALS.CONTENT_NOT_AVAILABLE')
+                    : this.translate.instant('PORTALS.PLAYBACK_ERROR');
+            this.snackBar.open(errorMessage, null, { duration: 3000 });
+        }
+    }
+
+    toggleFavorite(item: StalkerItvChannel) {
+        const itemId = normalizeStalkerEntityId(item.id);
+        if (this.favorites.has(itemId)) {
+            this.stalkerStore.removeFromFavorites(itemId);
+            this.favorites.delete(itemId);
+        } else {
+            this.stalkerStore.addToFavorites({
+                ...item,
+                category_id: 'itv',
+                title: item.o_name || item.name,
+                cover: item.logo,
+                added_at: new Date().toISOString(),
+            });
+            this.favorites.set(itemId, true);
+        }
+    }
+
+    loadMore() {
+        if (this.isLoadingMore() || !this.hasMoreItems()) return;
+        this.isLoadingMore.set(true);
+        const nextPage = this.stalkerStore.page() + 1;
+        this.stalkerStore.setPage(nextPage);
+    }
+
+    private async loadEpgForChannel(item: StalkerItvChannel) {
+        const requestId = ++this.epgLoadRequestId;
+        const normalizedChannelId = normalizeStalkerEntityId(item.id);
+        const playlistId = this.stalkerStore.currentPlaylist()?._id ?? null;
+        const shouldEnsureBulk =
+            !this.stalkerStore.bulkItvEpgLoaded() ||
+            this.stalkerStore.bulkItvEpgPlaylistId() !== playlistId ||
+            this.stalkerStore.bulkItvEpgPeriodHours() !== 168;
+
+        this.fallbackEpgPrograms.set([]);
+        this.isLoadingFallbackEpg.set(false);
+
+        try {
+            if (shouldEnsureBulk) {
+                await this.stalkerStore.ensureBulkItvEpg(168);
+                if (
+                    !this.isCurrentEpgRequest(
+                        requestId,
+                        normalizedChannelId
+                    )
+                ) {
+                    return;
+                }
+            }
+
+            if (this.stalkerStore.selectedItvEpgPrograms().length > 0) {
+                return;
+            }
+
+            this.isLoadingFallbackEpg.set(true);
+            const fallbackItems = await this.stalkerStore.fetchChannelEpg(
+                item.id
+            );
+            if (
+                !this.isCurrentEpgRequest(requestId, normalizedChannelId)
+            ) {
+                return;
+            }
+
+            this.fallbackEpgPrograms.set(
+                fallbackItems.map((epgItem) =>
+                    this.toProgram(epgItem, normalizedChannelId)
+                )
+            );
+        } catch (error) {
+            this.logger.warn('Failed to load Stalker live EPG', error);
+            if (
+                this.isCurrentEpgRequest(requestId, normalizedChannelId)
+            ) {
+                this.fallbackEpgPrograms.set([]);
+            }
+        } finally {
+            if (
+                this.isCurrentEpgRequest(requestId, normalizedChannelId)
+            ) {
+                this.isLoadingFallbackEpg.set(false);
+            }
+        }
+    }
+
+    private clearEpgPreviewMaps() {
+        this.epgPreviewPrograms.clear();
+        this.currentProgramsProgress.clear();
+    }
+
+    private syncBulkEpgPreviews(channels: StalkerItvChannel[]): void {
+        this.clearEpgPreviewMaps();
+
+        const bulkProgramsByChannel = this.stalkerStore.bulkItvEpgByChannel();
+        if (
+            channels.length === 0 ||
+            Object.keys(bulkProgramsByChannel).length === 0
+        ) {
+            this.cdr.markForCheck();
+            return;
+        }
+
+        for (const channel of channels) {
+            const channelId = normalizeStalkerEntityId(channel.id);
+            const currentProgram = this.findCurrentProgram(
+                bulkProgramsByChannel[channelId] ?? []
+            );
+
+            if (!currentProgram) {
+                continue;
+            }
+
+            this.epgPreviewPrograms.set(channelId, currentProgram);
+            this.updateProgramProgress(channelId, currentProgram);
+        }
+
+        this.cdr.markForCheck();
+    }
+
+    private updateProgramProgress(
+        channelId: string | number,
+        program: EpgProgram
+    ): void {
+        const startMs = this.getProgramTimestampMs(
+            program.start,
+            program.startTimestamp
+        );
+        const stopMs = this.getProgramTimestampMs(
+            program.stop,
+            program.stopTimestamp
+        );
+        const nowMs = Date.now();
+
+        if (
+            Number.isFinite(startMs) &&
+            Number.isFinite(stopMs) &&
+            nowMs >= startMs &&
+            nowMs <= stopMs &&
+            stopMs > startMs
+        ) {
+            this.currentProgramsProgress.set(
+                channelId,
+                ((nowMs - startMs) / (stopMs - startMs)) * 100
+            );
+            return;
+        }
+
+        this.currentProgramsProgress.delete(channelId);
+    }
+
+    private setupScrollListener() {
+        this.removeScrollListener();
+
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container) return;
+
+        const onScroll = () => {
+            if (this.isLoadingMore() || !this.hasMoreItems()) return;
+
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const scrollThreshold = 150;
+
+            if (scrollHeight - scrollTop - clientHeight <= scrollThreshold) {
+                this.loadMore();
+            }
+        };
+
+        container.addEventListener('scroll', onScroll, { passive: true });
+        this.scrollListener = () =>
+            container.removeEventListener('scroll', onScroll);
+    }
+
+    private checkIfNeedsMoreContent() {
+        const container = this.scrollContainer()?.nativeElement;
+        if (!container) return;
+        if (this.isLoadingMore() || !this.hasMoreItems()) return;
+
+        const { scrollHeight, clientHeight } = container;
+        if (scrollHeight <= clientHeight) {
+            this.loadMore();
+        }
+    }
+
+    private removeScrollListener() {
+        if (this.scrollListener) {
+            this.scrollListener();
+            this.scrollListener = null;
+        }
+    }
+
+    private toProgram(
+        item: EpgItem,
+        channelId: string | number
+    ): EpgProgram {
+        return {
+            start: item.start,
+            stop: item.stop || item.end,
+            channel: String(channelId),
+            title: item.title,
+            desc: item.description || null,
+            category: null,
+            startTimestamp: this.toTimestamp(item.start_timestamp, item.start),
+            stopTimestamp: this.toTimestamp(
+                item.stop_timestamp,
+                item.stop || item.end
+            ),
+        };
+    }
+
+    private toTimestamp(
+        rawTimestamp: string | number | null | undefined,
+        rawDate: string
+    ): number | null {
+        const timestamp = Number.parseInt(String(rawTimestamp ?? ''), 10);
+        if (Number.isFinite(timestamp) && timestamp > 0) {
+            return timestamp;
+        }
+
+        const parsedDate = Date.parse(rawDate);
+        return Number.isFinite(parsedDate)
+            ? Math.floor(parsedDate / 1000)
+            : null;
+    }
+
+    private findCurrentProgram(programs: EpgProgram[]): EpgProgram | null {
+        const now = Date.now();
+        return (
+            programs.find((program) => {
+                const start = this.getProgramTimestampMs(
+                    program.start,
+                    program.startTimestamp
+                );
+                const stop = this.getProgramTimestampMs(
+                    program.stop,
+                    program.stopTimestamp
+                );
+                return start !== null && stop !== null && now >= start && now < stop;
+            }) ?? null
+        );
+    }
+
+    private getProgramTimestampMs(
+        rawDate: string,
+        rawTimestamp?: number | null
+    ): number | null {
+        if (Number.isFinite(rawTimestamp) && Number(rawTimestamp) > 0) {
+            return Number(rawTimestamp) * 1000;
+        }
+
+        const parsedDate = Date.parse(rawDate);
+        return Number.isFinite(parsedDate) ? parsedDate : null;
+    }
+
+    private isCurrentEpgRequest(
+        requestId: number,
+        normalizedChannelId: string
+    ): boolean {
+        return (
+            requestId === this.epgLoadRequestId &&
+            this.selectedChannelId() === normalizedChannelId
+        );
+    }
+
+    private handleRemoteChannelChange(direction: 'up' | 'down'): void {
+        const activeItem = this.stalkerStore.selectedItem();
+        if (!activeItem?.id) {
+            return;
+        }
+
+        const channels = this.visibleChannels();
+        const nextItem = getAdjacentChannelItem(
+            channels,
+            activeItem.id,
+            direction,
+            (item) => item.id
+        );
+
+        if (!nextItem) {
+            return;
+        }
+
+        void this.playChannel(nextItem);
+    }
+
+    private handleRemoteControlCommand(command: {
+        type:
+            | 'channel-select-number'
+            | 'volume-up'
+            | 'volume-down'
+            | 'volume-toggle-mute';
+        number?: number;
+    }): void {
+        if (command.type !== 'channel-select-number' || !command.number) {
+            return;
+        }
+
+        const channel = getChannelItemByNumber(
+            this.visibleChannels(),
+            command.number
+        );
+        if (!channel) {
+            return;
+        }
+
+        void this.playChannel(channel);
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.html b/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.html
new file mode 100644
index 0000000..778dde0
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.html
@@ -0,0 +1,50 @@
+<app-search-layout
+    [searchTerm]="searchTerm()"
+    [resultsCount]="resultsCount"
+    [isLoading]="searchResultsResource.isLoading()"
+    [showResultsCount]="true"
+    [showSearchInput]="!isWorkspaceLayout"
+    [showDetails]="showingDetails"
+    (searchTermChange)="updateSearchTerm($event)"
+>
+    @if (showingDetails) {
+        <app-stalker-inline-detail
+            details
+            [categoryId]="inlineDetail().categoryId"
+            [seriesItem]="inlineDetail().seriesItem"
+            [isSeries]="inlineDetail().isSeries"
+            [vodDetailsItem]="inlineDetail().vodDetailsItem"
+            [isFavorite]="isSelectedVodFavorite()"
+            (playClicked)="onVodPlay($event)"
+            (favoriteToggled)="onVodFavoriteToggled($event)"
+            (backClicked)="onVodBack()"
+        />
+    }
+
+    <!-- Filters (single selection mode for stalker) -->
+    <ng-container filters>
+        @for (filter of filterConfig; track filter.key) {
+            <mat-checkbox
+                [ngModel]="filters()[filter.key]"
+                (ngModelChange)="updateFilter(filter.key, $event)"
+            >
+                {{ filter.translationKey | translate }}
+            </mat-checkbox>
+        }
+    </ng-container>
+
+    <!-- Results -->
+    <ng-container results>
+        <div class="results-grid">
+            @for (item of searchResultsResource.value(); track item.id) {
+                <app-content-card
+                    [title]="item.o_name || item.name"
+                    [posterUrl]="item.screenshot_uri"
+                    [type]="selectedFilterType() === 'vod' ? 'movie' : 'series'"
+                    [showPlaceholder]="true"
+                    (cardClick)="selectItem(item)"
+                />
+            }
+        </div>
+    </ng-container>
+</app-search-layout>
diff --git a/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.scss b/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.scss
new file mode 100644
index 0000000..193cfc9
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.scss
@@ -0,0 +1,20 @@
+@use '../../../../../shared/ui/src/lib/styles/content-grid' as grid;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
+.details-view {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.results-grid {
+    @include grid.content-grid(140px, 20px);
+    padding-bottom: 1rem;
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.ts b/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.ts
new file mode 100644
index 0000000..15513d6
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-search/stalker-search.component.ts
@@ -0,0 +1,362 @@
+import {
+    Component,
+    computed,
+    effect,
+    inject,
+    resource,
+    signal,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { ActivatedRoute } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { StalkerSessionService } from '@iptvnator/portal/stalker/data-access';
+import { DataService, PlaylistsService } from 'services';
+import {
+    Playlist,
+    STALKER_REQUEST,
+    StalkerPortalActions,
+    VodDetailsItem,
+} from 'shared-interfaces';
+import { ContentCardComponent } from '@iptvnator/portal/shared/ui';
+import { SearchLayoutComponent } from '@iptvnator/portal/shared/ui';
+import { StalkerInlineDetailComponent } from '../stalker-inline-detail/stalker-inline-detail.component';
+import { StalkerContentTypes } from '@iptvnator/portal/stalker/data-access';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    isWorkspaceLayoutRoute,
+    queryParamSignal,
+} from '@iptvnator/portal/shared/util';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import {
+    StalkerSelectedVodItem,
+    StalkerVodSource,
+} from '@iptvnator/portal/stalker/data-access';
+import {
+    buildStalkerSelectedVodItem,
+    clearStalkerDetailViewState,
+    createStalkerInlineDetailState,
+    createPortalFavoritesResource,
+    createRefreshTrigger,
+    createStalkerDetailViewState,
+    isSelectedStalkerVodFavorite,
+    isStalkerSeriesFlag,
+    toggleStalkerVodFavorite,
+} from '@iptvnator/portal/stalker/data-access';
+
+interface StalkerFilter {
+    key: string;
+    label: string;
+    translationKey: string;
+}
+
+interface StalkerSearchResponse {
+    js?: {
+        data?: StalkerVodSource[];
+    };
+    message?: string;
+    status?: number;
+}
+
+@Component({
+    selector: 'app-stalker-search',
+    imports: [
+        ContentCardComponent,
+        FormsModule,
+        MatCheckboxModule,
+        SearchLayoutComponent,
+        StalkerInlineDetailComponent,
+        TranslatePipe,
+    ],
+    templateUrl: './stalker-search.component.html',
+    styleUrl: './stalker-search.component.scss',
+})
+export class StalkerSearchComponent {
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly dataService = inject(DataService);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly playlistService = inject(PlaylistsService);
+    private readonly stalkerStore = inject(StalkerStore);
+    private readonly stalkerSession = inject(StalkerSessionService);
+    private readonly logger = createLogger('StalkerSearch');
+
+    readonly filters = signal({
+        series: false,
+        vod: true,
+    });
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.activatedRoute);
+
+    readonly filterConfig: StalkerFilter[] = [
+        {
+            key: 'vod',
+            label: 'Movies',
+            translationKey: 'PORTALS.SIDEBAR.MOVIES',
+        },
+        {
+            key: 'series',
+            label: 'Series',
+            translationKey: 'PORTALS.SIDEBAR.SERIES',
+        },
+    ];
+
+    readonly searchTerm = signal('');
+    readonly routeSearchTerm = queryParamSignal(
+        this.activatedRoute,
+        'q',
+        (value) => (value ?? '').trim()
+    );
+
+    private readonly currentPlaylist = computed(() => {
+        const playlist = this.playlistContext.activePlaylist();
+        return playlist?.macAddress ? playlist : null;
+    });
+
+    readonly selectedFilterType = signal('vod');
+    private readonly favoritesRefresh = createRefreshTrigger();
+
+    itemDetails: StalkerSelectedVodItem | null = null;
+    vodDetailsItem: VodDetailsItem | null = null;
+
+    readonly portalFavorites = createPortalFavoritesResource(
+        this.playlistService,
+        () => this.currentPlaylist()?._id,
+        () => this.favoritesRefresh.refreshVersion()
+    );
+
+    readonly searchResultsResource = resource({
+        params: () => ({
+            contentType: this.selectedFilterType(),
+            search: this.searchTerm(),
+            action: StalkerPortalActions.GetOrderedList,
+        }),
+        loader: async ({ params }) => {
+            if (params.search.length < 3) {
+                return [];
+            }
+            const playlist = this.currentPlaylist();
+            if (!playlist) return [];
+            const { portalUrl, macAddress } = playlist;
+
+            let token: string | undefined;
+            let serialNumber: string | undefined;
+            if ((playlist as Playlist).isFullStalkerPortal) {
+                try {
+                    const result = await this.stalkerSession.ensureToken(
+                        playlist as Playlist
+                    );
+                    token = result.token ?? undefined;
+                    serialNumber = (playlist as Playlist).stalkerSerialNumber;
+                } catch (error) {
+                    this.logger.error('Failed to get stalker token', error);
+                }
+            }
+
+            const response =
+                await this.dataService.sendIpcEvent<StalkerSearchResponse>(
+                    STALKER_REQUEST,
+                    {
+                        url: portalUrl,
+                        macAddress,
+                        params: {
+                            action: StalkerContentTypes[params.contentType]
+                                .getContentAction,
+                            type: params.contentType,
+                            search: params.search,
+                            max_page_items: 100,
+                        },
+                        token,
+                        serialNumber,
+                    }
+                );
+            if (response) {
+                const items = response.js?.data || [];
+                return items.map((item: StalkerVodSource) =>
+                    this.processItemUrls(item, portalUrl)
+                );
+            } else {
+                throw new Error(
+                    `Error: ${response.message} (Status: ${response.status})`
+                );
+            }
+        },
+    });
+
+    readonly isSelectedVodFavorite = signal<boolean>(false);
+
+    constructor() {
+        effect(() => {
+            const routeTerm = this.routeSearchTerm();
+            if (routeTerm !== this.searchTerm()) {
+                this.searchTerm.set(routeTerm);
+            }
+        });
+
+        effect(() => {
+            // Re-evaluate favorite state whenever favorites resource changes.
+            this.portalFavorites.value();
+            this.syncSelectedVodFavorite();
+        });
+    }
+
+    /** Check if showing item details */
+    get showingDetails(): boolean {
+        return this.inlineDetail().categoryId !== null;
+    }
+
+    /** Get results count for layout */
+    get resultsCount(): number {
+        return this.searchResultsResource.value()?.length ?? 0;
+    }
+
+    createLinkToPlayVodItv(cmd?: string, title?: string, thumbnail?: string) {
+        this.stalkerStore.createLinkToPlayVod(cmd, title, thumbnail);
+    }
+
+    updateSearchTerm(term: string) {
+        this.searchTerm.set(term);
+    }
+
+    updateFilter(key: string, value: boolean) {
+        if (value) {
+            // Single selection mode - set clicked filter, disable others
+            this.selectedFilterType.set(key);
+            this.filters.update((f) => {
+                const newFilters: Record<string, boolean> = {};
+                Object.keys(f).forEach((k) => {
+                    newFilters[k] = k === key;
+                });
+                return newFilters as typeof f;
+            });
+        }
+    }
+
+    selectItem(item: StalkerVodSource) {
+        const hasEmbeddedSeries = item.series?.length > 0;
+        const needsSeriesFetch =
+            this.selectedFilterType() === 'vod' &&
+            !hasEmbeddedSeries &&
+            isStalkerSeriesFlag(item.is_series);
+
+        this.itemDetails = buildStalkerSelectedVodItem(item, needsSeriesFetch);
+
+        this.stalkerStore.setSelectedItem(this.itemDetails);
+
+        switch (this.selectedFilterType()) {
+            case 'vod':
+                this.stalkerStore.setSelectedContentType('vod');
+                if (!hasEmbeddedSeries && !needsSeriesFetch) {
+                    const detailViewState = createStalkerDetailViewState(
+                        this.itemDetails,
+                        this.currentPlaylist()?._id ?? ''
+                    );
+                    this.itemDetails = detailViewState.itemDetails;
+                    this.vodDetailsItem = detailViewState.vodDetailsItem;
+                    this.syncSelectedVodFavorite();
+                } else {
+                    const cleared = clearStalkerDetailViewState();
+                    this.vodDetailsItem = cleared.vodDetailsItem;
+                    this.isSelectedVodFavorite.set(false);
+                }
+                break;
+            case 'series':
+                this.stalkerStore.setSelectedContentType('series');
+                break;
+            default:
+                break;
+        }
+    }
+
+    onVodPlay(item: VodDetailsItem): void {
+        if (item.type === 'stalker') {
+            this.createLinkToPlayVodItv(
+                item.cmd,
+                item.data.info?.name,
+                item.data.info?.movie_image
+            );
+        }
+    }
+
+    onVodFavoriteToggled(event: {
+        item: VodDetailsItem;
+        isFavorite: boolean;
+    }): void {
+        toggleStalkerVodFavorite(event, {
+            addToFavorites: (item, onDone) => this.addToFavorites(item, onDone),
+            removeFromFavorites: (favoriteId, onDone) =>
+                this.removeFromFavorites(favoriteId, onDone),
+            onComplete: () => {
+                this.favoritesRefresh.refresh();
+                this.syncSelectedVodFavorite();
+            },
+        });
+    }
+
+    onVodBack(): void {
+        const cleared = clearStalkerDetailViewState();
+        this.itemDetails = cleared.itemDetails;
+        this.vodDetailsItem = cleared.vodDetailsItem;
+        this.isSelectedVodFavorite.set(false);
+    }
+
+    removeFromFavorites(favoriteId: string, onDone?: () => void) {
+        this.stalkerStore.removeFromFavorites(favoriteId, onDone);
+    }
+
+    addToFavorites(item: Record<string, unknown>, onDone?: () => void) {
+        this.stalkerStore.addToFavorites(item, onDone);
+    }
+
+    private syncSelectedVodFavorite(): void {
+        const item = this.vodDetailsItem;
+        this.isSelectedVodFavorite.set(
+            isSelectedStalkerVodFavorite(
+                item,
+                this.portalFavorites.value() ?? []
+            )
+        );
+    }
+
+    inlineDetail() {
+        return createStalkerInlineDetailState(
+            this.itemDetails,
+            this.vodDetailsItem,
+            this.selectedFilterType() === 'series' ? 'series' : 'vod'
+        );
+    }
+
+    private processItemUrls(
+        item: StalkerVodSource,
+        portalUrl: string
+    ): StalkerVodSource {
+        const processed = { ...item };
+
+        if (processed.screenshot_uri) {
+            processed.screenshot_uri = this.makeAbsoluteUrl(
+                portalUrl,
+                processed.screenshot_uri
+            );
+        }
+
+        return processed;
+    }
+
+    private makeAbsoluteUrl(baseUrl: string, relativePath: string): string {
+        if (!relativePath) return '';
+        if (
+            relativePath.startsWith('http://') ||
+            relativePath.startsWith('https://')
+        ) {
+            return relativePath;
+        }
+        try {
+            const url = new URL(baseUrl);
+            const path = relativePath.startsWith('/')
+                ? relativePath
+                : `/${relativePath}`;
+            return `${url.origin}${path}`;
+        } catch {
+            return relativePath;
+        }
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-series-view/stalker-series-view.component.html b/libs/portal/stalker/feature/src/lib/stalker-series-view/stalker-series-view.component.html
new file mode 100644
index 0000000..e10351c
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-series-view/stalker-series-view.component.html
@@ -0,0 +1,92 @@
+@if (displayItem(); as serial) {
+    <app-content-hero
+        [title]="serial.info.name"
+        [description]="serial.info.description"
+        [posterUrl]="serial.info.movie_image"
+        (backClicked)="goBack()"
+    >
+        <!-- Tags: Year, Genre, Rating -->
+        <ng-container hero-tags>
+            @if (serial.info.releasedate) {
+                <span class="details__tag">{{
+                    serial.info.releasedate
+                }}</span>
+            }
+            @if (serial.info.genre) {
+                <span class="details__tag">{{
+                    serial.info.genre
+                }}</span>
+            }
+            @if (serial.info.rating_imdb) {
+                <span class="details__tag details__tag--rating">
+                    ⭐ {{ serial.info.rating_imdb }}
+                </span>
+            }
+            @if (serial.info.rating_kinopoisk) {
+                <span class="details__tag">
+                    KP {{ serial.info.rating_kinopoisk }}
+                </span>
+            }
+        </ng-container>
+
+        <!-- Metadata Grid -->
+        <ng-container hero-meta>
+            @if (serial.info.actors) {
+                <div class="details__meta-item">
+                    <span class="label">{{
+                        'XTREAM.ACTORS' | translate
+                    }}</span>
+                    <span class="value">{{ serial.info.actors }}</span>
+                </div>
+            }
+            @if (serial.info.director) {
+                <div class="details__meta-item">
+                    <span class="label">{{
+                        'XTREAM.DIRECTOR' | translate
+                    }}</span>
+                    <span class="value">{{ serial.info.director }}</span>
+                </div>
+            }
+        </ng-container>
+
+        <!-- Action Buttons -->
+        <ng-container hero-actions>
+            <app-favorites-button
+                [itemId]="serial.id"
+                [item]="serial"
+            />
+        </ng-container>
+
+        @if (inlinePlayback(); as playback) {
+            <app-portal-inline-player
+                [playback]="playback"
+                (timeUpdate)="handleInlineTimeUpdate($event)"
+                (closed)="closeInlinePlayer()"
+                (streamUrlCopied)="showCopyNotification()"
+            />
+        }
+
+        <!-- Seasons & Episodes -->
+        @if (mappedSeasons()) {
+            <app-season-container
+                [seasons]="mappedSeasons()"
+                [seriesId]="toSeriesId(serial.id)"
+                [playlistId]="stalkerStore.currentPlaylist()?._id ?? ''"
+                [seriesTitle]="serial.info?.name"
+                [playbackPositions]="episodePlaybackPositions()"
+                [openingEpisodeId]="openingEpisodeId()"
+                [activeEpisodeId]="activeEpisodeId()"
+                [isLoading]="
+                    isVodSeriesSeasonsLoading() ||
+                    (seasonContainer?.selectedSeason &&
+                        isCurrentSeasonLoading(seasonContainer.selectedSeason))
+                "
+                (seasonSelected)="onSeasonSelected($event)"
+                (episodeClicked)="onEpisodeClicked($event)"
+                (episodeDownloadRequested)="downloadEpisode($event)"
+                (playbackToggleRequested)="handlePlaybackToggleRequested($event)"
+                #seasonContainer
+            />
+        }
+    </app-content-hero>
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-series-view/stalker-series-view.component.ts b/libs/portal/stalker/feature/src/lib/stalker-series-view/stalker-series-view.component.ts
new file mode 100644
index 0000000..4fd484c
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-series-view/stalker-series-view.component.ts
@@ -0,0 +1,685 @@
+import {
+    Component,
+    OnDestroy,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { FavoritesButtonComponent } from '../stalker-favorites-button/stalker-favorites-button.component';
+import {
+    ContentHeroComponent,
+    SeasonContainerComponent,
+    SeasonContainerPlaybackToggleRequest,
+} from 'components';
+import {
+    PlaybackPositionData,
+    ResolvedPortalPlayback,
+    XtreamSerieEpisode,
+} from 'shared-interfaces';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYBACK_POSITIONS,
+    PORTAL_PLAYER,
+    createLogger,
+    getStalkerReturnToState,
+} from '@iptvnator/portal/shared/util';
+import {
+    getVodSeriesSeasonKey,
+    isVodSeriesItem,
+    mapRegularSeriesEpisodes,
+    mapRegularSeriesSeasons,
+    mapVodSeriesEpisodes,
+    mapVodSeriesSeasonsToVm,
+    StalkerMappedEpisode,
+    StalkerSeriesSeasonVm,
+    VodSeriesSeasonVm,
+    normalizeStalkerVodDetailsItem,
+    StalkerSelectedVodItem,
+    StalkerStore,
+    StalkerVodSource,
+} from '@iptvnator/portal/stalker/data-access';
+import { PortalInlinePlayerComponent } from '@iptvnator/ui/playback';
+import { DownloadsService } from 'services';
+
+/**
+ * Component for displaying series/episodes for Stalker portal content.
+ * Supports three modes:
+ * 1. Regular series (type=series): Fetches seasons from API via serialSeasonsResource
+ * 2. VOD with embedded series (vclub): Uses the series array from the vodWithSeries input
+ * 3. VOD series (Ministra is_series=1): Fetches seasons/episodes using movie_id and season_id
+ */
+@Component({
+    selector: 'app-stalker-series-view',
+    templateUrl: './stalker-series-view.component.html',
+    styleUrls: ['../styles/detail-view.scss'],
+    imports: [
+        FavoritesButtonComponent,
+        ContentHeroComponent,
+        PortalInlinePlayerComponent,
+        TranslatePipe,
+        SeasonContainerComponent,
+    ],
+})
+export class StalkerSeriesViewComponent implements OnDestroy {
+    readonly stalkerStore = inject(StalkerStore);
+    private readonly playbackPositions = inject(PORTAL_PLAYBACK_POSITIONS);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+    private readonly router = inject(Router);
+    private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    private readonly downloadsService = inject(DownloadsService);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translateService = inject(TranslateService);
+    readonly backClicked = output<void>();
+    private readonly logger = createLogger('StalkerSeriesView');
+    readonly inlinePlayback = signal<ResolvedPortalPlayback | null>(null);
+    readonly episodePlaybackPositions = signal<
+        Map<number, PlaybackPositionData>
+    >(new Map());
+    private lastSaveTime = 0;
+    private unsubscribePositionUpdates: (() => void) | null = null;
+    readonly openingEpisodeId = signal<number | null>(null);
+    readonly activeEpisodeId = signal<number | null>(null);
+
+    /**
+     * Optional input for VOD items with embedded series array (vclub mode)
+     * When provided, uses this instead of fetching seasons from API
+     */
+    readonly vodWithSeries = input<StalkerVodSource | null>(null);
+
+    readonly selectedItem = this.stalkerStore.selectedItem;
+
+    /**
+     * Track VOD series seasons with their loaded episodes
+     */
+    readonly vodSeriesSeasons = signal<VodSeriesSeasonVm[]>([]);
+
+    /**
+     * Indicates if this is a VOD series item (Ministra is_series=1)
+     * Note: is_series can be true, 1, or "1" depending on the source
+     */
+    readonly isVodSeries = computed(() => {
+        return (
+            this.stalkerStore.selectedContentType() === 'vod' &&
+            isVodSeriesItem(this.displayItem())
+        );
+    });
+
+    /**
+     * Loading state for VOD series seasons
+     */
+    readonly isVodSeriesSeasonsLoading =
+        this.stalkerStore.isVodSeriesSeasonsLoading;
+
+    /**
+     * Loading state for regular series seasons
+     */
+    readonly isSerialSeasonsLoading = this.stalkerStore.isSerialSeasonsLoading;
+
+    constructor() {
+        // Effect to load VOD series seasons when a VOD series item is selected
+        effect(() => {
+            if (this.isVodSeries()) {
+                // Get seasons from the resource
+                const seasons = this.stalkerStore.getVodSeriesSeasonsResource();
+                this.vodSeriesSeasons.set(mapVodSeriesSeasonsToVm(seasons));
+            } else {
+                this.vodSeriesSeasons.set([]);
+            }
+        });
+
+        // Effect to load playback positions for Stalker series
+        effect(() => {
+            const item = this.displayItem();
+            const playlist = this.stalkerStore.currentPlaylist();
+            if (item && playlist?._id) {
+                const normalizedSeriesId = this.toSeriesId(item.id);
+                this.logger.debug(
+                    'Loading positions for series',
+                    {
+                        id: item.id,
+                        seriesId: normalizedSeriesId,
+                        isSeries: item.is_series,
+                    }
+                );
+                if (!isNaN(normalizedSeriesId)) {
+                    void this.loadSeriesPositions(
+                        playlist._id,
+                        normalizedSeriesId
+                    );
+                }
+            } else {
+                this.episodePlaybackPositions.set(new Map());
+            }
+        });
+
+        effect(() => {
+            const session = this.externalPlayback.activeSession();
+            const item = this.displayItem();
+            const playlistId = this.stalkerStore.currentPlaylist()?._id;
+            const seriesId = item ? this.toSeriesId(item.id) : 0;
+
+            if (
+                !session?.contentInfo ||
+                !playlistId ||
+                !seriesId ||
+                session.contentInfo.contentType !== 'episode' ||
+                session.contentInfo.playlistId !== playlistId ||
+                session.contentInfo.seriesXtreamId !== seriesId
+            ) {
+                this.openingEpisodeId.set(null);
+                this.activeEpisodeId.set(null);
+                return;
+            }
+
+            if (session.status === 'launching') {
+                this.openingEpisodeId.set(session.contentInfo.contentXtreamId);
+                this.activeEpisodeId.set(null);
+                return;
+            }
+
+            if (session.status === 'opened' || session.status === 'playing') {
+                this.openingEpisodeId.set(null);
+                this.activeEpisodeId.set(session.contentInfo.contentXtreamId);
+                return;
+            }
+
+            this.openingEpisodeId.set(null);
+            this.activeEpisodeId.set(null);
+        });
+
+        if (window.electron?.onPlaybackPositionUpdate) {
+            this.unsubscribePositionUpdates =
+                window.electron.onPlaybackPositionUpdate(
+                    (data: PlaybackPositionData) => {
+                        const playlistId =
+                            this.stalkerStore.currentPlaylist()?._id;
+                        const item = this.displayItem();
+                        const seriesId = item ? this.toSeriesId(item.id) : 0;
+
+                        if (
+                            data.contentType !== 'episode' ||
+                            data.playlistId !== playlistId ||
+                            data.seriesXtreamId !== seriesId
+                        ) {
+                            return;
+                        }
+
+                        this.updateEpisodePlaybackPosition(data);
+                    }
+                );
+        }
+    }
+
+    /**
+     * For VOD with embedded series, we create a single "season" with the episodes
+     * For regular series, we use the API-fetched seasons
+     */
+    readonly regularSeasons = computed<StalkerSeriesSeasonVm[]>(() =>
+        mapRegularSeriesSeasons(
+            this.vodWithSeries(),
+            this.stalkerStore.getSerialSeasonsResource()
+        )
+    );
+
+    /**
+     * Get the item to display details for (either vodWithSeries or selectedItem from store)
+     */
+    readonly displayItem = computed<StalkerSelectedVodItem | null>(() => {
+        const item = this.vodWithSeries() || this.selectedItem();
+        return item ? normalizeStalkerVodDetailsItem(item) : null;
+    });
+
+    /**
+     * Adapts both Regular and VOD series data into the format expected by SeasonContainerComponent.
+     * Record<string, XtreamSerieEpisode[]> where string is season number/name.
+     */
+    readonly mappedSeasons = computed<Record<string, XtreamSerieEpisode[]>>(
+        () => {
+            if (this.isVodSeries()) {
+                return mapVodSeriesEpisodes(
+                    this.vodSeriesSeasons(),
+                    this.displayItem()?.info?.movie_image
+                );
+            }
+
+            return mapRegularSeriesEpisodes(
+                this.regularSeasons(),
+                this.displayItem()?.info?.movie_image
+            );
+        }
+    );
+
+    /**
+     * Handles season selection from the container.
+     * For VOD Series, triggers lazy loading of episodes.
+     */
+    onSeasonSelected(seasonKey: string) {
+        if (!this.isVodSeries()) return;
+
+        const seasons = this.vodSeriesSeasons();
+        const season = seasons.find(
+            (s) => getVodSeriesSeasonKey(s) === seasonKey
+        );
+
+        if (season && season.episodes.length === 0) {
+            this.loadEpisodesForSeason(season);
+        }
+    }
+
+    /**
+     * Loads episodes for a specific VOD season
+     */
+    async loadEpisodesForSeason(season: VodSeriesSeasonVm) {
+        // Set loading state in local signal
+        const seasons = this.vodSeriesSeasons();
+        const index = seasons.findIndex((s) => s.id === season.id);
+        if (index === -1) return;
+
+        const updatedSeasons = [...seasons];
+        updatedSeasons[index] = { ...updatedSeasons[index], isLoading: true };
+        this.vodSeriesSeasons.set(updatedSeasons);
+
+        try {
+            const episodes = await this.stalkerStore.fetchVodSeriesEpisodes(
+                season.video_id,
+                season.id
+            );
+
+            // Update with loaded episodes
+            const newSeasons = [...this.vodSeriesSeasons()];
+            const newIndex = newSeasons.findIndex((s) => s.id === season.id);
+            if (newIndex !== -1) {
+                newSeasons[newIndex] = {
+                    ...newSeasons[newIndex],
+                    episodes: episodes,
+                    isLoading: false,
+                };
+                this.vodSeriesSeasons.set(newSeasons);
+            }
+        } catch (error) {
+            this.logger.error('Failed to load episodes', error);
+            const newSeasons = [...this.vodSeriesSeasons()];
+            const newIndex = newSeasons.findIndex((s) => s.id === season.id);
+            if (newIndex !== -1) {
+                newSeasons[newIndex] = {
+                    ...newSeasons[newIndex],
+                    isLoading: false,
+                };
+                this.vodSeriesSeasons.set(newSeasons);
+            }
+        }
+    }
+
+    /**
+     * Determines if the current selected season is loading
+     */
+    isCurrentSeasonLoading(seasonKey: string): boolean {
+        if (!this.isVodSeries()) return false;
+        const season = this.vodSeriesSeasons().find(
+            (s) => getVodSeriesSeasonKey(s) === seasonKey
+        );
+        return season?.isLoading ?? false;
+    }
+
+    /**
+     * Handles episode click from the container
+     */
+    onEpisodeClicked(episode: XtreamSerieEpisode) {
+        const mappedEpisode = episode as StalkerMappedEpisode;
+
+        if (mappedEpisode.custom_sid === 'vod-series') {
+            // It's a VOD series episode (is_series=1 mode)
+            // Use originalId for playback URL, but use generated id for tracking
+            this.playVodSeriesEpisode({
+                originalId: mappedEpisode.originalId, // For constructing playback URL
+                trackingId: episode.id, // The generated unique ID for position tracking
+                name: episode.title,
+                series_number: episode.episode_num,
+            });
+        } else {
+            // Regular series or vclub mode (VOD with embedded series array)
+            // Use originalCmd for playback, episode.id for tracking
+            const trackingId = Number(episode.id);
+            this.playEpisodeClicked(
+                episode.episode_num,
+                mappedEpisode.originalCmd,
+                trackingId
+            );
+        }
+    }
+
+    /**
+     * Play episode - handles regular series and vclub mode
+     */
+    playEpisodeClicked(episodeNum: number, cmd?: string, trackingId?: number) {
+        const item = this.displayItem();
+        if (!item) return;
+        this.logger.debug('playEpisodeClicked', {
+            episodeNum,
+            cmd,
+            trackingId,
+            seriesId: item.id,
+        });
+
+        const position = trackingId
+            ? this.episodePlaybackPositions().get(trackingId)
+            : undefined;
+        const startTime = position?.positionSeconds;
+        void this.startPlayback(
+            cmd,
+            item.info.name,
+            item.info.movie_image,
+            episodeNum,
+            trackingId,
+            startTime
+        );
+    }
+
+    /**
+     * Play VOD series episode
+     */
+    playVodSeriesEpisode(episode: {
+        originalId?: string;
+        trackingId: string;
+        name: string;
+        series_number: number;
+    }) {
+        const item = this.displayItem();
+        if (!item) return;
+        // Use originalId for playback URL (this is what the Stalker API expects)
+        const cmd = `/media/file_${episode.originalId ?? ''}.mpg`;
+        const episodeName = episode.name || `Episode ${episode.series_number}`;
+        // Use trackingId (generated unique ID) for playback position tracking
+        const trackingId = Number(episode.trackingId);
+
+        this.logger.debug('playVodSeriesEpisode', {
+            originalId: episode.originalId,
+            trackingId,
+            seriesId: item.id,
+            episodeName,
+        });
+
+        const position = this.episodePlaybackPositions().get(trackingId);
+        const startTime = position?.positionSeconds;
+        void this.startPlayback(
+            cmd,
+            `${item.info.name} - ${episodeName}`,
+            item.info.movie_image,
+            episode.series_number,
+            trackingId,
+            startTime
+        );
+    }
+
+    goBack() {
+        const returnTo = getStalkerReturnToState(window.history.state);
+        this.closeInlinePlayer();
+        this.backClicked.emit();
+        this.stalkerStore.clearSelectedItem();
+
+        if (returnTo) {
+            void this.router.navigateByUrl(returnTo);
+        }
+    }
+
+    toSeriesId(id: string | number): number {
+        const raw = String(id ?? '').trim();
+        if (!raw) return 0;
+        const primary = raw.includes(':') ? raw.split(':')[0] : raw;
+        const parsed = Number(primary);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+
+    closeInlinePlayer(): void {
+        this.inlinePlayback.set(null);
+        this.lastSaveTime = 0;
+    }
+
+    handleInlineTimeUpdate(event: {
+        currentTime: number;
+        duration: number;
+    }): void {
+        const playback = this.inlinePlayback();
+        if (!playback?.contentInfo) return;
+
+        const now = Date.now();
+        if (now - this.lastSaveTime <= 15000) return;
+
+        this.lastSaveTime = now;
+        const position: PlaybackPositionData = {
+            ...playback.contentInfo,
+            positionSeconds: Math.floor(event.currentTime),
+            durationSeconds: Math.floor(event.duration),
+        };
+        void this.playbackPositions.savePlaybackPosition(
+            playback.contentInfo.playlistId,
+            position
+        );
+        this.updateEpisodePlaybackPosition(position);
+    }
+
+    showCopyNotification(): void {
+        this.snackBar.open(
+            this.translateService.instant('PORTALS.STREAM_URL_COPIED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
+
+    private async startPlayback(
+        cmd?: string,
+        title?: string,
+        thumbnail?: string,
+        episodeNum?: number,
+        episodeId?: number,
+        startTime?: number
+    ): Promise<void> {
+        try {
+            const playback = await this.stalkerStore.resolveVodPlayback(
+                cmd,
+                title,
+                thumbnail,
+                episodeNum,
+                episodeId,
+                startTime
+            );
+
+            this.lastSaveTime = 0;
+            if (this.portalPlayer.isEmbeddedPlayer()) {
+                this.inlinePlayback.set(playback);
+                return;
+            }
+
+            this.closeInlinePlayer();
+            void this.portalPlayer.openResolvedPlayback(playback, true);
+        } catch (error) {
+            this.logger.error('Failed to start inline series playback', error);
+            const errorMessage =
+                error instanceof Error &&
+                error.message === 'nothing_to_play'
+                    ? this.translateService.instant(
+                          'PORTALS.CONTENT_NOT_AVAILABLE'
+                      )
+                    : this.translateService.instant('PORTALS.PLAYBACK_ERROR');
+            this.snackBar.open(errorMessage, null, {
+                duration: 3000,
+            });
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.unsubscribePositionUpdates?.();
+    }
+
+    async handlePlaybackToggleRequested(
+        request: SeasonContainerPlaybackToggleRequest
+    ): Promise<void> {
+        const playlistId = this.stalkerStore.currentPlaylist()?._id;
+        if (!playlistId) {
+            return;
+        }
+
+        if (request.nextPosition) {
+            await this.playbackPositions.savePlaybackPosition(
+                playlistId,
+                request.nextPosition
+            );
+            this.updateEpisodePlaybackPosition(request.nextPosition);
+            return;
+        }
+
+        await this.playbackPositions.clearPlaybackPosition(
+            playlistId,
+            request.contentXtreamId,
+            'episode'
+        );
+        this.removeEpisodePlaybackPosition(request.contentXtreamId);
+    }
+
+    async downloadEpisode(episode: XtreamSerieEpisode): Promise<void> {
+        const playlist = this.stalkerStore.currentPlaylist();
+        const item = this.displayItem();
+
+        if (!playlist || !playlist.portalUrl || !playlist.macAddress || !item) {
+            return;
+        }
+
+        const customSid = (episode as { custom_sid?: string }).custom_sid;
+        const cmd =
+            customSid === 'vod-series'
+                ? `/media/file_${(episode as { originalId?: string }).originalId}.mpg`
+                : ((episode as { originalCmd?: string }).originalCmd ?? '');
+
+        let url: string;
+        try {
+            url = await this.stalkerStore.fetchLinkToPlay(
+                playlist.portalUrl,
+                playlist.macAddress,
+                cmd,
+                episode.episode_num
+            );
+            if (!url) {
+                this.logger.error('Failed to resolve Stalker stream URL');
+                return;
+            }
+        } catch (error) {
+            this.logger.error('Error resolving Stalker stream URL', error);
+            return;
+        }
+
+        const episodeInfo = this.getEpisodeInfo(episode);
+        const posterUrl = episodeInfo?.movie_image;
+        const seasonNum = Number(episode.season || 1);
+        const episodeNum = episode.episode_num || 1;
+        const seriesTitle = item.info?.name || this.displayItem()?.info?.name || 'Series';
+        const episodeTitle = `${seriesTitle} - S${String(seasonNum).padStart(
+            2,
+            '0'
+        )}E${String(episodeNum).padStart(2, '0')} - ${episode.title}`;
+
+        await this.downloadsService.startDownload({
+            playlistId: playlist._id,
+            xtreamId: this.getEpisodeDownloadId(episode),
+            contentType: 'episode',
+            title: episodeTitle,
+            url,
+            posterUrl,
+            seriesXtreamId: this.toSeriesId(item.id),
+            seasonNumber: seasonNum,
+            episodeNumber: episodeNum,
+            headers: {
+                userAgent: playlist.userAgent,
+                referer: playlist.referrer,
+                origin: playlist.origin,
+            },
+            playlistName: playlist.title || 'Stalker Portal',
+            playlistType: 'stalker',
+            portalUrl: playlist.portalUrl,
+            macAddress: playlist.macAddress,
+        });
+    }
+
+    private async loadSeriesPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<void> {
+        const positions = await this.playbackPositions.getSeriesPlaybackPositions(
+            playlistId,
+            seriesXtreamId
+        );
+        const positionsMap = new Map<number, PlaybackPositionData>();
+        positions.forEach((position) => {
+            positionsMap.set(position.contentXtreamId, position);
+        });
+        this.episodePlaybackPositions.set(positionsMap);
+    }
+
+    private updateEpisodePlaybackPosition(position: PlaybackPositionData): void {
+        const updated = new Map(this.episodePlaybackPositions());
+        updated.set(position.contentXtreamId, position);
+        this.episodePlaybackPositions.set(updated);
+    }
+
+    private removeEpisodePlaybackPosition(contentXtreamId: number): void {
+        const updated = new Map(this.episodePlaybackPositions());
+        updated.delete(contentXtreamId);
+        this.episodePlaybackPositions.set(updated);
+    }
+
+    private getEpisodeInfo(
+        episode: XtreamSerieEpisode
+    ): { movie_image?: string } | undefined {
+        if (!episode.info || Array.isArray(episode.info)) {
+            return undefined;
+        }
+        return episode.info as { movie_image?: string };
+    }
+
+    private getEpisodeDownloadId(episode: XtreamSerieEpisode): number {
+        const customSid = (episode as { custom_sid?: string }).custom_sid;
+
+        if (customSid === 'regular-series') {
+            const cmd = (episode as { originalCmd?: string }).originalCmd;
+            if (cmd) {
+                const match = cmd.match(/file_(\d+)/);
+                if (match) {
+                    return Number(match[1]);
+                }
+                return this.hashString(cmd);
+            }
+            return Number(episode.id);
+        }
+
+        if (customSid === 'vod-series') {
+            const originalId = (episode as { originalId?: string | number })
+                .originalId;
+            const numericId = Number(originalId);
+            return Number.isNaN(numericId)
+                ? this.hashString(String(originalId))
+                : numericId;
+        }
+
+        const numericId = Number(episode.id);
+        return Number.isNaN(numericId)
+            ? this.hashString(String(episode.id))
+            : numericId;
+    }
+
+    private hashString(str: string): number {
+        let hash = 0;
+        for (let index = 0; index < str.length; index++) {
+            const char = str.charCodeAt(index);
+            hash = (hash << 5) - hash + char;
+            hash &= hash;
+        }
+        return Math.abs(hash);
+    }
+}
diff --git a/libs/portal/stalker/feature/src/lib/stalker-workspace-route-session.service.spec.ts b/libs/portal/stalker/feature/src/lib/stalker-workspace-route-session.service.spec.ts
new file mode 100644
index 0000000..7cbd8a7
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-workspace-route-session.service.spec.ts
@@ -0,0 +1,131 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject, of } from 'rxjs';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { PlaylistsService } from 'services';
+import { PlaylistMeta } from 'shared-interfaces';
+import { StalkerWorkspaceRouteSession } from './stalker-workspace-route-session.service';
+
+const PLAYLIST_ID = 'stalker-1';
+const ACTIVE_PLAYLIST: PlaylistMeta = {
+    _id: PLAYLIST_ID,
+    filename: 'stalker.m3u',
+    macAddress: '00:1A:79:12:34:56',
+    portalUrl: 'http://localhost/stalker_portal/server/load.php',
+    title: 'Test Stalker',
+} as PlaylistMeta;
+
+async function flushEffects(): Promise<void> {
+    await Promise.resolve();
+    await Promise.resolve();
+}
+
+function getStalkerSectionFromUrl(url: string): string | null {
+    const match = url.match(
+        /^\/workspace\/stalker\/[^/]+\/([^/?]+)(?:\/|$)/
+    );
+
+    return match?.[1] ?? null;
+}
+
+describe('StalkerWorkspaceRouteSession', () => {
+    const routerEvents = new Subject<NavigationEnd>();
+    const activePlaylist = signal<PlaylistMeta | null>(ACTIVE_PLAYLIST);
+    const selectedContentType = signal<'vod' | 'itv' | 'series'>('vod');
+
+    const playlistContext = {
+        activePlaylist,
+        syncFromUrl: jest.fn(),
+    };
+
+    const stalkerStore = {
+        resetCategories: jest.fn(),
+        setSelectedCategory: jest.fn(),
+        clearSelectedItem: jest.fn(),
+        setCurrentPlaylist: jest.fn().mockResolvedValue(undefined),
+        setSelectedContentType: jest.fn((type: 'vod' | 'itv' | 'series') => {
+            selectedContentType.set(type);
+        }),
+        setSearchPhrase: jest.fn(),
+    };
+
+    const playlistsService = {
+        getPlaylistById: jest.fn(() => of(ACTIVE_PLAYLIST)),
+    };
+
+    const router = {
+        url: `/workspace/stalker/${PLAYLIST_ID}/vod`,
+        events: routerEvents.asObservable(),
+    };
+
+    beforeEach(async () => {
+        router.url = `/workspace/stalker/${PLAYLIST_ID}/vod`;
+        activePlaylist.set(ACTIVE_PLAYLIST);
+        selectedContentType.set('vod');
+
+        playlistContext.syncFromUrl.mockImplementation((url: string) => ({
+            inWorkspace: true,
+            provider: 'stalker',
+            playlistId: PLAYLIST_ID,
+            section: getStalkerSectionFromUrl(url) as
+                | 'favorites'
+                | 'itv'
+                | 'recent'
+                | 'search'
+                | 'series'
+                | 'vod'
+                | null,
+        }));
+
+        stalkerStore.resetCategories.mockClear();
+        stalkerStore.setSelectedCategory.mockClear();
+        stalkerStore.clearSelectedItem.mockClear();
+        stalkerStore.setCurrentPlaylist.mockClear();
+        stalkerStore.setSelectedContentType.mockClear();
+        stalkerStore.setSearchPhrase.mockClear();
+        playlistsService.getPlaylistById.mockClear();
+
+        await TestBed.configureTestingModule({
+            providers: [
+                StalkerWorkspaceRouteSession,
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: playlistContext,
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsService,
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: StalkerStore,
+                    useValue: stalkerStore,
+                },
+            ],
+        });
+    });
+
+    it('keeps the itv route selection after playlist bootstrap', async () => {
+        router.url = `/workspace/stalker/${PLAYLIST_ID}/itv`;
+
+        TestBed.inject(StalkerWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(stalkerStore.resetCategories).toHaveBeenCalled();
+        expect(stalkerStore.setCurrentPlaylist).toHaveBeenCalledWith(
+            ACTIVE_PLAYLIST
+        );
+        expect(stalkerStore.setSelectedContentType).toHaveBeenCalledWith('itv');
+        expect(selectedContentType()).toBe('itv');
+        expect(
+            stalkerStore.setSelectedContentType.mock.invocationCallOrder[0]
+        ).toBeGreaterThan(
+            stalkerStore.setCurrentPlaylist.mock.invocationCallOrder[0]
+        );
+    });
+});
diff --git a/libs/portal/stalker/feature/src/lib/stalker-workspace-route-session.service.ts b/libs/portal/stalker/feature/src/lib/stalker-workspace-route-session.service.ts
new file mode 100644
index 0000000..4a0a5b7
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/stalker-workspace-route-session.service.ts
@@ -0,0 +1,113 @@
+import {
+    DestroyRef,
+    ENVIRONMENT_INITIALIZER,
+    inject,
+    Injectable,
+    Provider,
+    signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, firstValueFrom } from 'rxjs';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { PortalRailSection } from '@iptvnator/portal/shared/util';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { PlaylistsService } from 'services';
+
+type StalkerContentType = 'vod' | 'series' | 'itv';
+
+@Injectable()
+export class StalkerWorkspaceRouteSession {
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly router = inject(Router);
+    private readonly stalkerStore = inject(StalkerStore);
+
+    private currentPlaylistId: string | null = null;
+    private readonly currentSection = signal<PortalRailSection | null>(null);
+
+    constructor() {
+        this.router.events
+            .pipe(
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe(() => {
+                void this.syncRouteContext();
+            });
+
+        void this.syncRouteContext();
+
+        this.destroyRef.onDestroy(() => {
+            this.stalkerStore.resetCategories();
+            this.stalkerStore.setSelectedCategory(null);
+            this.stalkerStore.clearSelectedItem();
+        });
+    }
+
+    private async syncRouteContext(): Promise<void> {
+        const routeContext = this.playlistContext.syncFromUrl(this.router.url);
+        const playlistId =
+            routeContext.provider === 'stalker'
+                ? routeContext.playlistId
+                : null;
+
+        if (playlistId && this.currentPlaylistId !== playlistId) {
+            this.currentPlaylistId = playlistId;
+
+            this.stalkerStore.resetCategories();
+            this.stalkerStore.setSelectedCategory(null);
+            this.stalkerStore.clearSelectedItem();
+
+            const playlist =
+                this.playlistContext.activePlaylist() ??
+                (await firstValueFrom(
+                    this.playlistsService.getPlaylistById(playlistId)
+                ));
+            await this.stalkerStore.setCurrentPlaylist(playlist);
+        }
+
+        this.syncRouteState(routeContext.section);
+    }
+
+    private syncRouteState(section: PortalRailSection | null): void {
+        if (!section) {
+            return;
+        }
+
+        const previousSection = this.currentSection();
+
+        if (section !== previousSection) {
+            this.currentSection.set(section);
+        }
+
+        if (section === 'vod' || section === 'series' || section === 'itv') {
+            this.stalkerStore.setSelectedContentType(
+                section as StalkerContentType
+            );
+        }
+
+        if (section === 'itv' && previousSection !== 'itv') {
+            this.stalkerStore.setSelectedCategory(null);
+            this.stalkerStore.clearSelectedItem();
+            this.stalkerStore.setSearchPhrase('');
+        }
+    }
+}
+
+export function provideStalkerWorkspaceRouteSession(): Provider[] {
+    return [
+        StalkerWorkspaceRouteSession,
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                inject(StalkerWorkspaceRouteSession);
+            },
+        },
+    ];
+}
diff --git a/libs/portal/stalker/feature/src/lib/styles/detail-view.scss b/libs/portal/stalker/feature/src/lib/styles/detail-view.scss
new file mode 100644
index 0000000..23d60ef
--- /dev/null
+++ b/libs/portal/stalker/feature/src/lib/styles/detail-view.scss
@@ -0,0 +1,590 @@
+// ============================================================================
+// Netflix-style Detail View - Cinematic Streaming Design
+// ============================================================================
+
+:host {
+    --poster-width: 220px;
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
+    --content-max-width: 1400px;
+
+    // Light theme colors (default - no .dark-theme class on body)
+    --hero-gradient-start: rgba(255, 250, 245, 0);
+    --hero-gradient-mid: rgba(255, 250, 245, 0.75);
+    --hero-gradient-end: rgba(255, 250, 245, 1);
+    --surface-bg: #fffaf5;
+    --text-primary: #1a1a1a;
+    --text-secondary: rgba(26, 26, 26, 0.75);
+    --text-muted: rgba(26, 26, 26, 0.5);
+    --accent-color: #b81d24;
+    --tag-bg: rgba(0, 0, 0, 0.06);
+    --tag-border: rgba(0, 0, 0, 0.12);
+    --play-idle-bg: linear-gradient(135deg, #fffaf2 0%, #ffffff 52%, #f7ecdf 100%);
+    --play-idle-fg: #161310;
+    --play-idle-border: rgba(88, 48, 18, 0.12);
+    --play-idle-shadow: 0 18px 38px rgba(91, 56, 24, 0.14);
+    --play-launching-bg: linear-gradient(135deg, #ffd36f 0%, #ffb14c 46%, #f57d35 100%);
+    --play-launching-fg: #241103;
+    --play-launching-border: rgba(142, 66, 0, 0.2);
+    --play-launching-shadow: 0 22px 44px rgba(244, 136, 55, 0.32);
+    --play-stop-bg: linear-gradient(135deg, #ffd1c8 0%, #ff9f8d 42%, #ef5e64 100%);
+    --play-stop-fg: #321012;
+    --play-stop-border: rgba(162, 38, 45, 0.18);
+    --play-stop-shadow: 0 22px 46px rgba(214, 74, 86, 0.26);
+    --play-icon-shell-bg: rgba(255, 255, 255, 0.32);
+    --play-icon-shell-border: rgba(255, 255, 255, 0.3);
+
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+    background: var(--surface-bg);
+    color: var(--text-primary);
+}
+
+// Dark theme overrides - cinematic dark mode
+:host-context(.dark-theme) {
+    --hero-gradient-start: rgba(20, 20, 20, 0);
+    --hero-gradient-mid: rgba(20, 20, 20, 0.7);
+    --hero-gradient-end: rgba(20, 20, 20, 1);
+    --surface-bg: #141414;
+    --text-primary: #fff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --accent-color: #e50914;
+    --tag-bg: rgba(255, 255, 255, 0.1);
+    --tag-border: rgba(255, 255, 255, 0.2);
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+    --play-idle-bg: linear-gradient(135deg, #fff5e6 0%, #f6efe5 58%, #e7dac9 100%);
+    --play-idle-fg: #15110d;
+    --play-idle-border: rgba(255, 255, 255, 0.18);
+    --play-idle-shadow: 0 20px 42px rgba(0, 0, 0, 0.36);
+    --play-launching-bg: linear-gradient(135deg, #ffdd79 0%, #ffb347 42%, #ef6a3a 100%);
+    --play-launching-fg: #1f1105;
+    --play-launching-border: rgba(255, 223, 136, 0.26);
+    --play-launching-shadow: 0 24px 50px rgba(255, 153, 71, 0.3);
+    --play-stop-bg: linear-gradient(135deg, #ffd7cf 0%, #ff9b8b 40%, #eb5961 100%);
+    --play-stop-fg: #2d1012;
+    --play-stop-border: rgba(255, 205, 205, 0.24);
+    --play-stop-shadow: 0 24px 50px rgba(235, 89, 97, 0.24);
+    --play-icon-shell-bg: rgba(255, 255, 255, 0.28);
+    --play-icon-shell-border: rgba(255, 255, 255, 0.24);
+}
+
+// ============================================================================
+// Details Section - Content Elements
+// ============================================================================
+
+.details {
+    // Styles for projected content elements
+
+    &__tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 12px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        background: var(--tag-bg);
+        border: 1px solid var(--tag-border);
+        border-radius: 4px;
+        backdrop-filter: blur(8px);
+
+        &--rating {
+            color: #ffd700;
+            border-color: rgba(255, 215, 0, 0.3);
+        }
+    }
+
+    &__meta-item {
+        font-size: 0.875rem;
+
+        .label {
+            color: var(--text-muted);
+            font-weight: 400;
+            margin-bottom: 2px;
+            text-decoration: none;
+            display: block;
+        }
+
+        .value {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+    }
+}
+
+// ============================================================================
+// Action Buttons - Play, Favorite
+// ============================================================================
+
+.play-btn {
+    --play-btn-bg: var(--play-idle-bg);
+    --play-btn-fg: var(--play-idle-fg);
+    --play-btn-border: var(--play-idle-border);
+    --play-btn-shadow: var(--play-idle-shadow);
+
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 26px;
+    min-height: 54px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: var(--play-btn-bg);
+    background-size: 140% 140%;
+    background-position: 0% 50%;
+    color: var(--play-btn-fg);
+    border: 1px solid var(--play-btn-border);
+    border-radius: 16px;
+    box-shadow: var(--play-btn-shadow);
+    cursor: pointer;
+    transition:
+        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+        background-position 280ms ease,
+        box-shadow 260ms ease,
+        border-color 220ms ease,
+        color 220ms ease,
+        filter 220ms ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        background:
+            linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 36%),
+            linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 62%);
+        opacity: 0.7;
+        transition: opacity 220ms ease;
+        z-index: -1;
+    }
+
+    &:hover:not(:disabled) {
+        transform: translateY(-2px);
+        background-position: 100% 50%;
+        box-shadow:
+            var(--play-btn-shadow),
+            0 10px 20px rgba(255, 255, 255, 0.16) inset;
+    }
+
+    &:hover:not(:disabled)::before {
+        opacity: 0.95;
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: var(--play-btn-shadow);
+    }
+
+    &:disabled {
+        cursor: progress;
+        opacity: 1;
+        filter: saturate(1.05);
+    }
+
+    mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+        transition:
+            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+            color 220ms ease,
+            filter 220ms ease;
+    }
+
+    &:hover:not(:disabled) .play-btn__icon {
+        transform: scale(1.08);
+    }
+
+    &__icon-shell {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 999px;
+        background: var(--play-icon-shell-bg);
+        border: 1px solid var(--play-icon-shell-border);
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.38),
+            0 6px 14px rgba(0, 0, 0, 0.08);
+        backdrop-filter: blur(10px);
+        transition:
+            transform 220ms ease,
+            background-color 220ms ease,
+            border-color 220ms ease,
+            box-shadow 220ms ease;
+    }
+
+    &__label {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    &--state-launching,
+    &--state-stop {
+        color: var(--play-btn-fg);
+    }
+
+    &--state-launching {
+        --play-btn-bg: var(--play-launching-bg);
+        --play-btn-fg: var(--play-launching-fg);
+        --play-btn-border: var(--play-launching-border);
+        --play-btn-shadow: var(--play-launching-shadow);
+        animation: playButtonPulse 1.8s ease-in-out infinite;
+
+        .play-btn__icon-shell {
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.42),
+                0 10px 22px rgba(184, 89, 26, 0.2);
+        }
+
+        .play-btn__icon {
+            animation: playIconLaunch 1.15s cubic-bezier(0.55, 0, 0.45, 1) infinite;
+        }
+    }
+
+    &--state-stop {
+        --play-btn-bg: var(--play-stop-bg);
+        --play-btn-fg: var(--play-stop-fg);
+        --play-btn-border: var(--play-stop-border);
+        --play-btn-shadow: var(--play-stop-shadow);
+
+        .play-btn__icon-shell {
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                0 12px 24px rgba(145, 38, 53, 0.18);
+        }
+
+        .play-btn__icon {
+            animation: playIconStop 1.2s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes playButtonPulse {
+    0%,
+    100% {
+        box-shadow: var(--play-btn-shadow);
+    }
+
+    50% {
+        box-shadow:
+            var(--play-btn-shadow),
+            0 0 0 6px rgba(255, 190, 92, 0.14);
+    }
+}
+
+@keyframes playIconLaunch {
+    0%,
+    100% {
+        transform: rotate(0deg) scale(1);
+    }
+
+    50% {
+        transform: rotate(18deg) scale(1.1);
+    }
+}
+
+@keyframes playIconStop {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.08);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .play-btn,
+    .play-btn::before,
+    .play-btn mat-icon,
+    .play-btn__icon-shell {
+        animation: none !important;
+        transition-duration: 1ms !important;
+    }
+}
+
+.favorite-btn,
+.download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    background: rgba(109, 109, 110, 0.7);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(109, 109, 110, 0.5);
+    }
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.favorite-btn {
+    &--active {
+        background: rgba(229, 9, 20, 0.8);
+
+        &:hover {
+            background: rgba(229, 9, 20, 0.6);
+        }
+    }
+}
+
+.download-btn {
+    background: rgba(33, 150, 243, 0.8);
+
+    &:hover {
+        background: rgba(33, 150, 243, 0.6);
+    }
+
+    &--completed {
+        background: rgba(76, 175, 80, 0.8);
+
+        &:hover {
+            background: rgba(76, 175, 80, 0.6);
+        }
+    }
+
+    &--downloading {
+        background: rgba(109, 109, 110, 0.5);
+        cursor: not-allowed;
+        opacity: 0.7;
+
+        &:hover {
+            background: rgba(109, 109, 110, 0.5);
+        }
+    }
+}
+
+// ============================================================================
+// Content Sections - Below the hero fold
+// ============================================================================
+
+.content-section {
+    padding: 20px 0;
+    width: 100%;
+    box-sizing: border-box;
+
+    &__title {
+        font-size: 1.2rem;
+        font-weight: 650;
+        letter-spacing: -0.02em;
+        margin: 0 0 20px 0;
+        color: var(--text-primary);
+    }
+}
+
+// ============================================================================
+// Seasons & Episodes - Inside details section
+// ============================================================================
+
+.seasons {
+    margin-top: 24px;
+    width: 100%;
+
+    .season-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 0;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        h4 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+        }
+
+        .expand-icon {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+    }
+
+    .episodes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 8px 0 16px;
+
+        button {
+            margin: 0;
+            font-weight: 500;
+        }
+    }
+
+    .episodes-loading,
+    .seasons-loading {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 20px 0;
+        color: var(--text-secondary);
+    }
+
+    .no-episodes {
+        color: var(--text-muted);
+        font-style: italic;
+        padding: 8px 0;
+    }
+}
+
+// Seasons loading when inside details
+.details .seasons-loading {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 0;
+    color: var(--text-secondary);
+    margin-top: 24px;
+}
+
+// Season container when inside details section
+.details app-season-container {
+    display: block;
+    width: 100%;
+    margin-top: 24px;
+    box-sizing: border-box;
+}
+
+// ============================================================================
+// YouTube Trailer Section - Inside details
+// ============================================================================
+
+.youtube-trailer {
+    margin-top: 24px;
+    width: 100%;
+
+    h3 {
+        font-size: 1rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        margin: 0 0 12px 0;
+        color: var(--text-primary);
+    }
+
+    .trailer-wrapper {
+        position: relative;
+        width: 100%;
+        max-width: 560px;
+        aspect-ratio: 16 / 9;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    }
+}
+
+// ============================================================================
+// Legacy container support (for gradual migration)
+// ============================================================================
+
+.container {
+    display: contents;
+}
+
+.image {
+    display: none; // Hidden - now using .poster in hero
+}
+
+// ============================================================================
+// Mobile Responsive - Option A: Keep poster grid layout
+// ============================================================================
+
+@media (max-width: 800px) {
+    :host {
+        --poster-width: 120px;
+    }
+
+    .action-buttons {
+        width: 100%;
+        // This class is in ContentHeroComponent now, but these rules apply to children?
+        // No, .play-btn is a child of the PROJECTED content.
+        // So we should target the buttons directly for mobile
+    }
+
+    .play-btn,
+    .favorite-btn,
+    .download-btn {
+        flex: 1;
+        justify-content: center;
+        padding: 10px 16px;
+    }
+
+    .youtube-trailer {
+        margin-top: 16px;
+
+        .trailer-wrapper {
+            max-width: 100%;
+            border-radius: 4px;
+        }
+    }
+
+    .seasons {
+        padding: 16px 0 0;
+    }
+}
+
+// ============================================================================
+// Animations
+// ============================================================================
+
+.youtube-trailer {
+    animation: fadeInUp 0.5s ease-out 0.4s both;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// ============================================================================
+// Utility - keep .label for backwards compatibility
+// ============================================================================
+
+.label {
+    font-weight: 400;
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 0;
+    opacity: 1;
+}
diff --git a/libs/portal/stalker/feature/src/test-setup.ts b/libs/portal/stalker/feature/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/stalker/feature/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/stalker/feature/tsconfig.json b/libs/portal/stalker/feature/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/portal/stalker/feature/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/portal/stalker/feature/tsconfig.lib.json b/libs/portal/stalker/feature/tsconfig.lib.json
new file mode 100644
index 0000000..eb0b673
--- /dev/null
+++ b/libs/portal/stalker/feature/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/stalker/feature/tsconfig.spec.json b/libs/portal/stalker/feature/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/stalker/feature/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/xtream/data-access/jest.config.ts b/libs/portal/xtream/data-access/jest.config.ts
new file mode 100644
index 0000000..86b22f0
--- /dev/null
+++ b/libs/portal/xtream/data-access/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-xtream-data-access',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/xtream/data-access',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/xtream/data-access/project.json b/libs/portal/xtream/data-access/project.json
new file mode 100644
index 0000000..5fc7ca9
--- /dev/null
+++ b/libs/portal/xtream/data-access/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-xtream-data-access",
+    "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/xtream/data-access/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:xtream", "type:data-access"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/xtream/data-access/jest.config.ts",
+                "tsConfig": "libs/portal/xtream/data-access/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/index.ts b/libs/portal/xtream/data-access/src/index.ts
new file mode 100644
index 0000000..78a8a65
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/index.ts
@@ -0,0 +1,7 @@
+export * from './lib/account-info/account-info.interface';
+export * from './lib/data-sources';
+export * from './lib/services';
+export * from './lib/stores';
+export * from './lib/with-favorites.feature';
+export { withRecentItems } from './lib/with-recent-items';
+export * from './lib/xtream-state';
diff --git a/libs/portal/xtream/data-access/src/lib/account-info/account-info.interface.ts b/libs/portal/xtream/data-access/src/lib/account-info/account-info.interface.ts
new file mode 100644
index 0000000..ff4fada
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/account-info/account-info.interface.ts
@@ -0,0 +1,29 @@
+interface ServerInfo {
+    https_port: string;
+    port: string;
+    rtmp_port: string;
+    server_protocol: string;
+    time_now: string;
+    timestamp_now: number;
+    timezone: string;
+    url: string;
+}
+
+interface UserInfo {
+    active_cons: string;
+    allowed_output_formats: string[];
+    auth: number;
+    created_at: string;
+    exp_date: string;
+    is_trial: string;
+    max_connections: string;
+    message: string;
+    password: string;
+    status: string;
+    username: string;
+}
+
+export interface XtreamAccountInfo {
+    server_info: ServerInfo;
+    user_info: UserInfo;
+}
diff --git a/libs/portal/xtream/data-access/src/lib/data-sources/electron-xtream-data-source.ts b/libs/portal/xtream/data-access/src/lib/data-sources/electron-xtream-data-source.ts
new file mode 100644
index 0000000..a236c5e
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/data-sources/electron-xtream-data-source.ts
@@ -0,0 +1,548 @@
+import { inject, Injectable } from '@angular/core';
+import {
+    DatabaseService,
+    PlaybackPositionService,
+    XtreamPendingRestoreService,
+    XtreamImportStatus,
+} from 'services';
+import {
+    PlaybackPositionData,
+    PlaylistMeta,
+    XtreamPendingRestoreState,
+    XtreamCategory,
+    XtreamLiveStream,
+    XtreamSerieItem,
+    XtreamVodStream,
+} from 'shared-interfaces';
+import {
+    CategoryType,
+    StreamType,
+    XtreamApiService,
+    XtreamCredentials,
+} from '../services/xtream-api.service';
+import {
+    DbCategoryType,
+    IXtreamDataSource,
+    mapCategoryTypeToDbType,
+    ProgressCallback,
+    XtreamOperationOptions,
+    XtreamCategoryFromDb,
+    XtreamContentItem,
+    XtreamPlaylistData,
+} from './xtream-data-source.interface';
+
+/**
+ * Electron implementation of the Xtream data source.
+ * Uses DB-first strategy: check DB, fetch API if needed, cache to DB.
+ */
+@Injectable({ providedIn: 'root' })
+export class ElectronXtreamDataSource implements IXtreamDataSource {
+    private readonly dbService = inject(DatabaseService);
+    private readonly playbackService = inject(PlaybackPositionService);
+    private readonly pendingRestoreService = inject(
+        XtreamPendingRestoreService
+    );
+    private readonly apiService = inject(XtreamApiService);
+    private readonly categoryRequests = new Map<
+        string,
+        Promise<XtreamCategoryFromDb[]>
+    >();
+    private readonly contentRequests = new Map<
+        string,
+        Promise<XtreamContentItem[]>
+    >();
+
+    private mapCategoryTypeToImportType(
+        type: CategoryType
+    ): 'live' | 'movie' | 'series' {
+        switch (type) {
+            case 'live':
+                return 'live';
+            case 'vod':
+                return 'movie';
+            case 'series':
+                return 'series';
+        }
+    }
+
+    private async getImportStatus(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<XtreamImportStatus> {
+        return this.dbService.getXtreamImportStatus(playlistId, type);
+    }
+
+    // =========================================================================
+    // Playlist Operations
+    // =========================================================================
+
+    async getPlaylist(playlistId: string): Promise<XtreamPlaylistData | null> {
+        const playlist = await this.dbService.getPlaylistById(playlistId);
+        return playlist as XtreamPlaylistData | null;
+    }
+
+    async createPlaylist(playlist: XtreamPlaylistData): Promise<void> {
+        await this.dbService.createPlaylist({
+            _id: playlist.id,
+            title: playlist.name,
+            serverUrl: playlist.serverUrl,
+            username: playlist.username,
+            password: playlist.password,
+        } as unknown as PlaylistMeta);
+    }
+
+    async updatePlaylist(
+        playlistId: string,
+        updates: Partial<XtreamPlaylistData>
+    ): Promise<void> {
+        await this.dbService.updateXtreamPlaylistDetails({
+            id: playlistId,
+            title: updates.name,
+            username: updates.username,
+            password: updates.password,
+            serverUrl: updates.serverUrl,
+        });
+    }
+
+    async deletePlaylist(playlistId: string): Promise<void> {
+        await this.dbService.deletePlaylist(playlistId);
+    }
+
+    // =========================================================================
+    // Category Operations
+    // =========================================================================
+
+    async hasCategories(
+        playlistId: string,
+        type: DbCategoryType
+    ): Promise<boolean> {
+        return this.dbService.hasXtreamCategories(playlistId, type);
+    }
+
+    async getCategories(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: CategoryType,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamCategoryFromDb[]> {
+        const dbType = mapCategoryTypeToDbType(type);
+        const requestKey = `${playlistId}:${dbType}`;
+        const inFlightRequest = this.categoryRequests.get(requestKey);
+
+        if (inFlightRequest) {
+            return inFlightRequest;
+        }
+
+        const request = this.loadCategories(
+            playlistId,
+            credentials,
+            type,
+            dbType,
+            options
+        ).finally(() => {
+            this.categoryRequests.delete(requestKey);
+        });
+
+        this.categoryRequests.set(requestKey, request);
+        return request;
+    }
+
+    private async loadCategories(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: CategoryType,
+        dbType: DbCategoryType,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamCategoryFromDb[]> {
+        const importType = this.mapCategoryTypeToImportType(type);
+        const importStatus = await this.getImportStatus(playlistId, importType);
+        // Fetch from DB directly — avoids a separate 'has' round-trip.
+        // An empty result means the cache is cold; proceed to fetch from API.
+        const cached = await this.dbService.getXtreamCategories(
+            playlistId,
+            dbType
+        );
+        if (importStatus === 'completed' && cached.length > 0) {
+            return cached;
+        }
+
+        // Fetch from API and cache
+        options?.onPhaseChange?.('loading-categories');
+        const remoteData = await this.apiService.getCategories(
+            credentials,
+            type,
+            {
+                sessionId: options?.sessionId,
+            }
+        );
+
+        if (remoteData && Array.isArray(remoteData) && remoteData.length > 0) {
+            // Check if there are saved hidden categories to restore
+            const hiddenCategoryXtreamIds = this.getHiddenCategoryXtreamIds(
+                playlistId,
+                dbType
+            );
+
+            options?.onPhaseChange?.('saving-categories');
+            await this.dbService.saveXtreamCategories(
+                playlistId,
+                remoteData,
+                dbType,
+                hiddenCategoryXtreamIds
+            );
+        }
+
+        // Return from cache (now populated)
+        return this.dbService.getXtreamCategories(playlistId, dbType);
+    }
+
+    /**
+     * Get hidden category xtreamIds from localStorage for a specific playlist and type
+     * Used to restore visibility preferences after playlist refresh
+     */
+    private getHiddenCategoryXtreamIds(
+        playlistId: string,
+        type: 'live' | 'movies' | 'series'
+    ): number[] | undefined {
+        const restoreData = this.pendingRestoreService.get(playlistId);
+        const hiddenCategories = restoreData?.hiddenCategories;
+
+        if (!hiddenCategories || hiddenCategories.length === 0) {
+            return undefined;
+        }
+
+        return hiddenCategories
+            .filter((category) => category.categoryType === type)
+            .map((category) => category.xtreamId);
+    }
+
+    async getAllCategories(
+        playlistId: string,
+        type: DbCategoryType
+    ): Promise<XtreamCategoryFromDb[]> {
+        return this.dbService.getAllXtreamCategories(playlistId, type);
+    }
+
+    async saveCategories(
+        playlistId: string,
+        categories: XtreamCategory[],
+        type: DbCategoryType
+    ): Promise<void> {
+        await this.dbService.saveXtreamCategories(playlistId, categories, type);
+    }
+
+    async updateCategoryVisibility(
+        categoryIds: number[],
+        hidden: boolean
+    ): Promise<void> {
+        await this.dbService.updateCategoryVisibility(categoryIds, hidden);
+    }
+
+    // =========================================================================
+    // Content/Stream Operations
+    // =========================================================================
+
+    async hasContent(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<boolean> {
+        return this.dbService.hasXtreamContent(playlistId, type);
+    }
+
+    async getContent(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: StreamType,
+        onProgress?: (count: number) => void,
+        onTotal?: (total: number) => void,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamContentItem[]> {
+        const requestKey = `${playlistId}:${type}`;
+        const inFlightRequest = this.contentRequests.get(requestKey);
+
+        if (inFlightRequest) {
+            return inFlightRequest;
+        }
+
+        const request = this.loadContent(
+            playlistId,
+            credentials,
+            type,
+            onProgress,
+            onTotal,
+            options
+        ).finally(() => {
+            this.contentRequests.delete(requestKey);
+        });
+
+        this.contentRequests.set(requestKey, request);
+        return request;
+    }
+
+    private async loadContent(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: StreamType,
+        onProgress?: (count: number) => void,
+        onTotal?: (total: number) => void,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamContentItem[]> {
+        const importStatus = await this.getImportStatus(playlistId, type);
+        // Fetch from DB directly — avoids a separate 'has' round-trip.
+        // An empty result means the cache is cold; proceed to fetch from API.
+        const cached = await this.dbService.getXtreamContent(playlistId, type);
+        if (importStatus === 'completed' && cached.length > 0) {
+            return cached;
+        }
+
+        // Fetch from API
+        options?.onPhaseChange?.(
+            type === 'live'
+                ? 'loading-live'
+                : type === 'movie'
+                  ? 'loading-movies'
+                  : 'loading-series'
+        );
+        const remoteData = await this.apiService.getStreams(credentials, type, {
+            sessionId: options?.sessionId,
+        });
+
+        if (remoteData && Array.isArray(remoteData) && remoteData.length > 0) {
+            // Report total items to import
+            if (onTotal) {
+                onTotal(remoteData.length);
+            }
+
+            // Save to cache with progress tracking
+            await this.dbService.saveXtreamContent(
+                playlistId,
+                remoteData as
+                    | XtreamLiveStream[]
+                    | XtreamVodStream[]
+                    | XtreamSerieItem[],
+                type,
+                onProgress,
+                options
+            );
+        }
+
+        // Return from cache (now populated)
+        return this.dbService.getXtreamContent(playlistId, type);
+    }
+
+    async saveContent(
+        playlistId: string,
+        streams:
+            | XtreamLiveStream[]
+            | XtreamVodStream[]
+            | XtreamSerieItem[]
+            | XtreamContentItem[],
+        type: 'live' | 'movie' | 'series',
+        onProgress?: ProgressCallback,
+        options?: XtreamOperationOptions
+    ): Promise<number> {
+        return this.dbService.saveXtreamContent(
+            playlistId,
+            streams,
+            type,
+            onProgress,
+            options
+        );
+    }
+
+    // =========================================================================
+    // Search Operations
+    // =========================================================================
+
+    async searchContent(
+        playlistId: string,
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ): Promise<XtreamContentItem[]> {
+        return this.dbService.searchXtreamContent(
+            playlistId,
+            searchTerm,
+            types,
+            excludeHidden
+        );
+    }
+
+    // =========================================================================
+    // Favorites Operations
+    // =========================================================================
+
+    async getFavorites(playlistId: string): Promise<XtreamContentItem[]> {
+        return this.dbService.getFavorites(playlistId);
+    }
+
+    async addFavorite(
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ): Promise<void> {
+        await this.dbService.addToFavorites(contentId, playlistId, backdropUrl);
+    }
+
+    async removeFavorite(contentId: number, playlistId: string): Promise<void> {
+        await this.dbService.removeFromFavorites(contentId, playlistId);
+    }
+
+    async isFavorite(contentId: number, playlistId: string): Promise<boolean> {
+        return this.dbService.isFavorite(contentId, playlistId);
+    }
+
+    // =========================================================================
+    // Recently Viewed Operations
+    // =========================================================================
+
+    async getRecentItems(playlistId: string): Promise<XtreamContentItem[]> {
+        return this.dbService.getRecentItems(playlistId);
+    }
+
+    async addRecentItem(
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ): Promise<void> {
+        await this.dbService.addRecentItem(contentId, playlistId, backdropUrl);
+    }
+
+    async removeRecentItem(
+        contentId: number,
+        playlistId: string
+    ): Promise<void> {
+        await this.dbService.removeRecentItem(contentId, playlistId);
+    }
+
+    async clearRecentItems(playlistId: string): Promise<void> {
+        await this.dbService.clearPlaylistRecentItems(playlistId);
+    }
+
+    // =========================================================================
+    // Content Lookup
+    // =========================================================================
+
+    async getContentByXtreamId(
+        xtreamId: number,
+        playlistId: string,
+        contentType?: 'live' | 'movie' | 'series'
+    ): Promise<XtreamContentItem | null> {
+        return this.dbService.getContentByXtreamId(
+            xtreamId,
+            playlistId,
+            contentType
+        );
+    }
+
+    // =========================================================================
+    // Playback Position Operations
+    // =========================================================================
+
+    async savePlaybackPosition(
+        playlistId: string,
+        data: PlaybackPositionData
+    ): Promise<void> {
+        await this.playbackService.savePlaybackPosition(playlistId, data);
+    }
+
+    async getPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<PlaybackPositionData | null> {
+        return this.playbackService.getPlaybackPosition(
+            playlistId,
+            contentXtreamId,
+            contentType
+        );
+    }
+
+    async getSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<PlaybackPositionData[]> {
+        return this.playbackService.getSeriesPlaybackPositions(
+            playlistId,
+            seriesXtreamId
+        );
+    }
+
+    async getRecentPlaybackPositions(
+        playlistId: string,
+        limit?: number
+    ): Promise<PlaybackPositionData[]> {
+        return this.playbackService.getRecentPlaybackPositions(
+            playlistId,
+            limit
+        );
+    }
+
+    async getAllPlaybackPositions(
+        playlistId: string
+    ): Promise<PlaybackPositionData[]> {
+        return this.playbackService.getAllPlaybackPositions(playlistId);
+    }
+
+    async clearPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<void> {
+        await this.playbackService.clearPlaybackPosition(
+            playlistId,
+            contentXtreamId,
+            contentType
+        );
+    }
+
+    // =========================================================================
+    // Cleanup Operations
+    // =========================================================================
+
+    /**
+     * No-op for Electron: DB-backed storage has no in-memory session cache to clear.
+     */
+    clearSessionCache(playlistId: string): void {
+        void playlistId;
+        // Electron uses the DB as its cache layer; no in-memory state to evict.
+    }
+
+    async clearPlaylistContent(
+        playlistId: string
+    ): Promise<XtreamPendingRestoreState> {
+        const [result, playbackPositions] = await Promise.all([
+            this.dbService.deleteXtreamPlaylistContent(playlistId),
+            this.playbackService.getAllPlaybackPositions(playlistId),
+        ]);
+
+        return {
+            hiddenCategories: result.hiddenCategories,
+            favorites: result.favorites,
+            recentlyViewed: result.recentlyViewed,
+            playbackPositions,
+        };
+    }
+
+    async restoreUserData(
+        playlistId: string,
+        restoreState: XtreamPendingRestoreState,
+        options?: XtreamOperationOptions
+    ): Promise<void> {
+        await this.dbService.restoreXtreamUserData(
+            playlistId,
+            restoreState.favorites,
+            restoreState.recentlyViewed,
+            options
+        );
+
+        await this.playbackService.clearAllPlaybackPositions(playlistId);
+
+        for (const playbackPosition of restoreState.playbackPositions) {
+            await this.playbackService.savePlaybackPosition(
+                playlistId,
+                playbackPosition
+            );
+        }
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/lib/data-sources/index.ts b/libs/portal/xtream/data-access/src/lib/data-sources/index.ts
new file mode 100644
index 0000000..7f20fe0
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/data-sources/index.ts
@@ -0,0 +1,39 @@
+import { inject, Provider } from '@angular/core';
+import { ElectronXtreamDataSource } from './electron-xtream-data-source';
+import { PwaXtreamDataSource } from './pwa-xtream-data-source';
+import { IXtreamDataSource, XTREAM_DATA_SOURCE } from './xtream-data-source.interface';
+
+// Re-export all types and interfaces
+export * from './xtream-data-source.interface';
+export { ElectronXtreamDataSource } from './electron-xtream-data-source';
+export { PwaXtreamDataSource } from './pwa-xtream-data-source';
+
+/**
+ * Factory function that returns the appropriate data source based on environment.
+ * - Electron: Uses DatabaseService for DB-first caching
+ * - PWA: Uses API-only with in-memory caching and localStorage for user data
+ */
+export function xtreamDataSourceFactory(): IXtreamDataSource {
+    // Check if we're in Electron environment
+    if (typeof window !== 'undefined' && window.electron) {
+        return inject(ElectronXtreamDataSource);
+    }
+
+    // Default to PWA implementation
+    return inject(PwaXtreamDataSource);
+}
+
+/**
+ * Provider for the Xtream data source.
+ * Add this to your app providers to enable the data source abstraction.
+ */
+export function provideXtreamDataSource(): Provider[] {
+    return [
+        ElectronXtreamDataSource,
+        PwaXtreamDataSource,
+        {
+            provide: XTREAM_DATA_SOURCE,
+            useFactory: xtreamDataSourceFactory,
+        },
+    ];
+}
diff --git a/libs/portal/xtream/data-access/src/lib/data-sources/pwa-xtream-data-source.ts b/libs/portal/xtream/data-access/src/lib/data-sources/pwa-xtream-data-source.ts
new file mode 100644
index 0000000..e1628ca
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/data-sources/pwa-xtream-data-source.ts
@@ -0,0 +1,797 @@
+import { inject, Injectable } from '@angular/core';
+import {
+    PlaybackPositionData,
+    XtreamPendingRestoreState,
+    XtreamCategory,
+    XtreamLiveStream,
+    XtreamSerieItem,
+    XtreamVodStream,
+} from 'shared-interfaces';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import {
+    CategoryType,
+    StreamType,
+    XtreamApiService,
+    XtreamCredentials,
+} from '../services/xtream-api.service';
+import {
+    DbCategoryType,
+    IXtreamDataSource,
+    ProgressCallback,
+    XtreamOperationOptions,
+    XtreamCategoryFromDb,
+    XtreamContentItem,
+    XtreamPlaylistData,
+} from './xtream-data-source.interface';
+
+/**
+ * LocalStorage keys for PWA persistence
+ */
+const STORAGE_KEYS = {
+    FAVORITES: 'xtream-favorites',
+    RECENT_ITEMS: 'xtream-recent-items',
+    PLAYLISTS: 'xtream-playlists',
+    PLAYBACK_POSITIONS: 'xtream-playback-positions',
+};
+
+interface XtreamCachedContentItem {
+    readonly added?: string;
+    readonly category_id?: string | number;
+    readonly id?: number;
+    readonly name?: string;
+    readonly poster_url?: string;
+    readonly series_id?: number;
+    readonly stream_display_name?: string;
+    readonly stream_id?: number;
+    readonly stream_icon?: string;
+    readonly title?: string;
+    readonly type?: string;
+    readonly viewed_at?: string;
+}
+
+interface StoredRecentItem {
+    readonly id: number;
+    readonly viewedAt: string;
+}
+
+/**
+ * PWA implementation of the Xtream data source.
+ * Uses API-only strategy: always fetch from API, no database caching.
+ * Favorites and recently viewed are stored in localStorage.
+ */
+@Injectable({ providedIn: 'root' })
+export class PwaXtreamDataSource implements IXtreamDataSource {
+    private readonly apiService = inject(XtreamApiService);
+    private readonly logger = createLogger('PwaXtreamDataSource');
+
+    // In-memory cache for the current session
+    private categoryCache = new Map<string, XtreamCategory[]>();
+    private contentCache = new Map<string, XtreamCachedContentItem[]>();
+
+    // =========================================================================
+    // Playlist Operations (localStorage)
+    // =========================================================================
+
+    async getPlaylist(playlistId: string): Promise<XtreamPlaylistData | null> {
+        const playlists = this.getPlaylistsFromStorage();
+        return playlists.find((p) => p.id === playlistId) || null;
+    }
+
+    async createPlaylist(playlist: XtreamPlaylistData): Promise<void> {
+        const playlists = this.getPlaylistsFromStorage();
+        playlists.push(playlist);
+        this.savePlaylistsToStorage(playlists);
+    }
+
+    async updatePlaylist(
+        playlistId: string,
+        updates: Partial<XtreamPlaylistData>
+    ): Promise<void> {
+        const playlists = this.getPlaylistsFromStorage();
+        const index = playlists.findIndex((p) => p.id === playlistId);
+        if (index !== -1) {
+            playlists[index] = { ...playlists[index], ...updates };
+            this.savePlaylistsToStorage(playlists);
+        }
+    }
+
+    async deletePlaylist(playlistId: string): Promise<void> {
+        const playlists = this.getPlaylistsFromStorage();
+        const filtered = playlists.filter((p) => p.id !== playlistId);
+        this.savePlaylistsToStorage(filtered);
+
+        // Also clear favorites and recent items for this playlist
+        this.clearFavoritesForPlaylist(playlistId);
+        this.clearRecentItemsForPlaylist(playlistId);
+        this.clearPlaybackPositionsForPlaylist(playlistId);
+
+        // Clear cache
+        this.clearCacheForPlaylist(playlistId);
+    }
+
+    private getPlaylistsFromStorage(): XtreamPlaylistData[] {
+        try {
+            const data = localStorage.getItem(STORAGE_KEYS.PLAYLISTS);
+            return data ? JSON.parse(data) : [];
+        } catch {
+            return [];
+        }
+    }
+
+    private savePlaylistsToStorage(playlists: XtreamPlaylistData[]): void {
+        localStorage.setItem(STORAGE_KEYS.PLAYLISTS, JSON.stringify(playlists));
+    }
+
+    // =========================================================================
+    // Category Operations (API + in-memory cache)
+    // =========================================================================
+
+    async hasCategories(
+        playlistId: string,
+        type: DbCategoryType
+    ): Promise<boolean> {
+        const cacheKey = `${playlistId}-${type}-categories`;
+        return this.categoryCache.has(cacheKey);
+    }
+
+    async getCategories(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: CategoryType,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamCategory[]> {
+        void options;
+        const cacheKey = `${playlistId}-${type}-categories`;
+
+        // Check in-memory cache first
+        const cachedCategories = this.categoryCache.get(cacheKey);
+        if (cachedCategories) {
+            return cachedCategories;
+        }
+
+        // Fetch from API
+        const categories = await this.apiService.getCategories(
+            credentials,
+            type
+        );
+
+        // Cache in memory
+        this.categoryCache.set(cacheKey, categories);
+
+        return categories;
+    }
+
+    async getAllCategories(
+        playlistId: string,
+        type: DbCategoryType
+    ): Promise<XtreamCategoryFromDb[]> {
+        void playlistId;
+        void type;
+        // PWA doesn't track hidden categories - return empty
+        return [];
+    }
+
+    async saveCategories(
+        playlistId: string,
+        categories: XtreamCategory[],
+        type: DbCategoryType
+    ): Promise<void> {
+        // In PWA mode, we just cache in memory
+        const cacheKey = `${playlistId}-${type}-categories`;
+        this.categoryCache.set(cacheKey, categories);
+    }
+
+    async updateCategoryVisibility(
+        categoryIds: number[],
+        hidden: boolean
+    ): Promise<void> {
+        void categoryIds;
+        void hidden;
+        // Category visibility is not supported in PWA mode
+        this.logger.warn('Category visibility not supported in PWA mode');
+    }
+
+    // =========================================================================
+    // Content/Stream Operations (API + in-memory cache)
+    // =========================================================================
+
+    async hasContent(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<boolean> {
+        const cacheKey = `${playlistId}-${type}-content`;
+        return this.contentCache.has(cacheKey);
+    }
+
+    async getContent(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: StreamType,
+        onProgress?: (count: number) => void,
+        onTotal?: (total: number) => void,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamLiveStream[] | XtreamVodStream[] | XtreamSerieItem[]> {
+        void options;
+        const cacheKey = `${playlistId}-${type}-content`;
+
+        // Check in-memory cache first
+        const cachedContent = this.contentCache.get(cacheKey);
+        if (cachedContent) {
+            return cachedContent as
+                | XtreamLiveStream[]
+                | XtreamVodStream[]
+                | XtreamSerieItem[];
+        }
+
+        // Fetch from API
+        const content = await this.apiService.getStreams(credentials, type);
+
+        // Report total and progress (PWA doesn't have incremental save, so report all at once)
+        if (onTotal) {
+            onTotal(content.length);
+        }
+        if (onProgress) {
+            onProgress(content.length);
+        }
+
+        // Cache in memory
+        this.contentCache.set(cacheKey, content);
+
+        return content;
+    }
+
+    async saveContent(
+        playlistId: string,
+        streams:
+            | XtreamLiveStream[]
+            | XtreamVodStream[]
+            | XtreamSerieItem[]
+            | XtreamContentItem[],
+        type: 'live' | 'movie' | 'series',
+        onProgress?: ProgressCallback,
+        options?: XtreamOperationOptions
+    ): Promise<number> {
+        void options;
+        // In PWA mode, we just cache in memory
+        const cacheKey = `${playlistId}-${type}-content`;
+        this.contentCache.set(cacheKey, streams);
+
+        if (onProgress) {
+            onProgress(streams.length);
+        }
+
+        return streams.length;
+    }
+
+    // =========================================================================
+    // Search Operations (in-memory filter)
+    // =========================================================================
+
+    async searchContent(
+        playlistId: string,
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ): Promise<XtreamContentItem[]> {
+        void excludeHidden;
+        const results: XtreamCachedContentItem[] = [];
+        const searchLower = searchTerm.toLowerCase();
+
+        for (const type of types) {
+            const cacheKey = `${playlistId}-${type}-content`;
+            const content = this.contentCache.get(cacheKey) || [];
+
+            const filtered = content.filter((item) => {
+                const title =
+                    item.name || item.title || item.stream_display_name || '';
+                return title.toLowerCase().includes(searchLower);
+            });
+
+            results.push(...filtered);
+        }
+
+        return results as XtreamContentItem[];
+    }
+
+    // =========================================================================
+    // Favorites Operations (localStorage)
+    // =========================================================================
+
+    async getFavorites(playlistId: string): Promise<XtreamContentItem[]> {
+        const allFavorites = this.getFavoritesFromStorage();
+        const playlistFavorites = allFavorites[playlistId] || [];
+
+        // Match favorites with cached content
+        const results: XtreamCachedContentItem[] = [];
+        for (const type of ['live', 'movie', 'series']) {
+            const cacheKey = `${playlistId}-${type}-content`;
+            const content = this.contentCache.get(cacheKey) || [];
+
+            for (const item of content) {
+                const itemId = item.stream_id || item.series_id || item.id;
+                if (playlistFavorites.includes(itemId)) {
+                    results.push(item);
+                }
+            }
+        }
+
+        return results as XtreamContentItem[];
+    }
+
+    async addFavorite(
+        contentId: number,
+        playlistId: string,
+        // PWA uses localStorage with no content table, so backdrop persistence
+        // is electron-only. Accept the param for interface parity.
+        _backdropUrl?: string
+    ): Promise<void> {
+        const allFavorites = this.getFavoritesFromStorage();
+        if (!allFavorites[playlistId]) {
+            allFavorites[playlistId] = [];
+        }
+        if (!allFavorites[playlistId].includes(contentId)) {
+            allFavorites[playlistId].push(contentId);
+        }
+        this.saveFavoritesToStorage(allFavorites);
+    }
+
+    async removeFavorite(contentId: number, playlistId: string): Promise<void> {
+        const allFavorites = this.getFavoritesFromStorage();
+        if (allFavorites[playlistId]) {
+            allFavorites[playlistId] = allFavorites[playlistId].filter(
+                (id: number) => id !== contentId
+            );
+        }
+        this.saveFavoritesToStorage(allFavorites);
+    }
+
+    async isFavorite(contentId: number, playlistId: string): Promise<boolean> {
+        const allFavorites = this.getFavoritesFromStorage();
+        return (allFavorites[playlistId] || []).includes(contentId);
+    }
+
+    private getFavoritesFromStorage(): Record<string, number[]> {
+        try {
+            const data = localStorage.getItem(STORAGE_KEYS.FAVORITES);
+            return data ? JSON.parse(data) : {};
+        } catch {
+            return {};
+        }
+    }
+
+    private saveFavoritesToStorage(favorites: Record<string, number[]>): void {
+        localStorage.setItem(STORAGE_KEYS.FAVORITES, JSON.stringify(favorites));
+    }
+
+    private clearFavoritesForPlaylist(playlistId: string): void {
+        const allFavorites = this.getFavoritesFromStorage();
+        delete allFavorites[playlistId];
+        this.saveFavoritesToStorage(allFavorites);
+    }
+
+    // =========================================================================
+    // Playback Position Operations (localStorage)
+    // =========================================================================
+
+    async savePlaybackPosition(
+        playlistId: string,
+        data: PlaybackPositionData
+    ): Promise<void> {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        if (!allPositions[playlistId]) {
+            allPositions[playlistId] = [];
+        }
+
+        // Remove existing entry if present
+        allPositions[playlistId] = allPositions[playlistId].filter(
+            (p) =>
+                !(
+                    p.contentXtreamId === data.contentXtreamId &&
+                    p.contentType === data.contentType
+                )
+        );
+
+        // Add new entry
+        allPositions[playlistId].push({
+            ...data,
+            updatedAt: new Date().toISOString(),
+        });
+
+        this.savePlaybackPositionsToStorage(allPositions);
+    }
+
+    async getPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<PlaybackPositionData | null> {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        const playlistPositions = allPositions[playlistId] || [];
+
+        return (
+            playlistPositions.find(
+                (p) =>
+                    p.contentXtreamId === contentXtreamId &&
+                    p.contentType === contentType
+            ) || null
+        );
+    }
+
+    async getSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<PlaybackPositionData[]> {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        const playlistPositions = allPositions[playlistId] || [];
+
+        return playlistPositions.filter(
+            (p) =>
+                p.contentType === 'episode' &&
+                p.seriesXtreamId === seriesXtreamId
+        );
+    }
+
+    async getRecentPlaybackPositions(
+        playlistId: string,
+        limit?: number
+    ): Promise<PlaybackPositionData[]> {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        const playlistPositions = allPositions[playlistId] || [];
+
+        // Sort by updatedAt descending
+        playlistPositions.sort(
+            (a, b) =>
+                new Date(b.updatedAt).getTime() -
+                new Date(a.updatedAt).getTime()
+        );
+
+        return limit ? playlistPositions.slice(0, limit) : playlistPositions;
+    }
+
+    async getAllPlaybackPositions(
+        playlistId: string
+    ): Promise<PlaybackPositionData[]> {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        return allPositions[playlistId] || [];
+    }
+
+    async clearPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<void> {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        if (allPositions[playlistId]) {
+            allPositions[playlistId] = allPositions[playlistId].filter(
+                (p) =>
+                    !(
+                        p.contentXtreamId === contentXtreamId &&
+                        p.contentType === contentType
+                    )
+            );
+            this.savePlaybackPositionsToStorage(allPositions);
+        }
+    }
+
+    private getPlaybackPositionsFromStorage(): Record<
+        string,
+        PlaybackPositionData[]
+    > {
+        try {
+            const data = localStorage.getItem(STORAGE_KEYS.PLAYBACK_POSITIONS);
+            return data ? JSON.parse(data) : {};
+        } catch {
+            return {};
+        }
+    }
+
+    private savePlaybackPositionsToStorage(
+        positions: Record<string, PlaybackPositionData[]>
+    ): void {
+        localStorage.setItem(
+            STORAGE_KEYS.PLAYBACK_POSITIONS,
+            JSON.stringify(positions)
+        );
+    }
+
+    private clearPlaybackPositionsForPlaylist(playlistId: string): void {
+        const allPositions = this.getPlaybackPositionsFromStorage();
+        delete allPositions[playlistId];
+        this.savePlaybackPositionsToStorage(allPositions);
+    }
+
+    // =========================================================================
+    // Recently Viewed Operations (localStorage)
+    // =========================================================================
+
+    async getRecentItems(playlistId: string): Promise<XtreamContentItem[]> {
+        const allRecent = this.getRecentItemsFromStorage();
+        const playlistRecent = allRecent[playlistId] || [];
+
+        // Match recent items with cached content
+        const results: (XtreamCachedContentItem & { viewed_at: string })[] = [];
+        for (const type of ['live', 'movie', 'series']) {
+            const cacheKey = `${playlistId}-${type}-content`;
+            const content = this.contentCache.get(cacheKey) || [];
+
+            for (const item of content) {
+                const itemId = item.stream_id || item.series_id || item.id;
+                const recentEntry = playlistRecent.find((r) => r.id === itemId);
+                if (recentEntry) {
+                    results.push({
+                        ...item,
+                        viewed_at: recentEntry.viewedAt,
+                    });
+                }
+            }
+        }
+
+        // Sort by viewed_at descending
+        results.sort(
+            (a, b) =>
+                new Date(b.viewed_at).getTime() -
+                new Date(a.viewed_at).getTime()
+        );
+
+        return results as XtreamContentItem[];
+    }
+
+    async addRecentItem(
+        contentId: number,
+        playlistId: string,
+        _backdropUrl?: string
+    ): Promise<void> {
+        const allRecent = this.getRecentItemsFromStorage();
+        if (!allRecent[playlistId]) {
+            allRecent[playlistId] = [];
+        }
+
+        // Remove existing entry if present
+        allRecent[playlistId] = allRecent[playlistId].filter(
+            (r) => r.id !== contentId
+        );
+
+        // Add new entry at the beginning
+        allRecent[playlistId].unshift({
+            id: contentId,
+            viewedAt: new Date().toISOString(),
+        });
+
+        // Keep only last 50 items
+        allRecent[playlistId] = allRecent[playlistId].slice(0, 50);
+
+        this.saveRecentItemsToStorage(allRecent);
+    }
+
+    async removeRecentItem(
+        contentId: number,
+        playlistId: string
+    ): Promise<void> {
+        const allRecent = this.getRecentItemsFromStorage();
+        if (allRecent[playlistId]) {
+            allRecent[playlistId] = allRecent[playlistId].filter(
+                (r) => r.id !== contentId
+            );
+        }
+        this.saveRecentItemsToStorage(allRecent);
+    }
+
+    async clearRecentItems(playlistId: string): Promise<void> {
+        this.clearRecentItemsForPlaylist(playlistId);
+    }
+
+    private getRecentItemsFromStorage(): Record<string, StoredRecentItem[]> {
+        try {
+            const data = localStorage.getItem(STORAGE_KEYS.RECENT_ITEMS);
+            return data ? JSON.parse(data) : {};
+        } catch {
+            return {};
+        }
+    }
+
+    private saveRecentItemsToStorage(
+        recentItems: Record<string, StoredRecentItem[]>
+    ): void {
+        localStorage.setItem(
+            STORAGE_KEYS.RECENT_ITEMS,
+            JSON.stringify(recentItems)
+        );
+    }
+
+    private clearRecentItemsForPlaylist(playlistId: string): void {
+        const allRecent = this.getRecentItemsFromStorage();
+        delete allRecent[playlistId];
+        this.saveRecentItemsToStorage(allRecent);
+    }
+
+    // =========================================================================
+    // Content Lookup
+    // =========================================================================
+
+    async getContentByXtreamId(
+        xtreamId: number,
+        playlistId: string,
+        contentType?: 'live' | 'movie' | 'series'
+    ): Promise<XtreamContentItem | null> {
+        const types = contentType
+            ? [contentType]
+            : (['live', 'movie', 'series'] as const);
+
+        for (const type of types) {
+            const cacheKey = `${playlistId}-${type}-content`;
+            const content = this.contentCache.get(cacheKey) || [];
+
+            const found = content.find((item) => {
+                const itemXtreamId =
+                    item.stream_id || item.series_id || item.id;
+                return itemXtreamId === xtreamId;
+            });
+
+            if (found) {
+                return found as XtreamContentItem;
+            }
+        }
+
+        return null;
+    }
+
+    private findContentIdentity(
+        playlistId: string,
+        xtreamId: number,
+        contentType?: 'live' | 'movie' | 'series'
+    ): { contentType: 'live' | 'movie' | 'series'; xtreamId: number } | null {
+        const types = contentType
+            ? [contentType]
+            : (['live', 'movie', 'series'] as const);
+
+        for (const type of types) {
+            const cacheKey = `${playlistId}-${type}-content`;
+            const content = this.contentCache.get(cacheKey) || [];
+
+            const found = content.find((item) => {
+                const itemXtreamId =
+                    item.stream_id || item.series_id || item.id;
+                return itemXtreamId === xtreamId;
+            });
+
+            if (found) {
+                return {
+                    contentType: type,
+                    xtreamId,
+                };
+            }
+        }
+
+        return null;
+    }
+
+    // =========================================================================
+    // Cleanup Operations
+    // =========================================================================
+
+    async clearPlaylistContent(
+        playlistId: string
+    ): Promise<XtreamPendingRestoreState> {
+        // Get current favorites and recent items
+        const favorites = this.getFavoritesFromStorage();
+        const recentItems = this.getRecentItemsFromStorage();
+        const playbackPositions =
+            await this.getAllPlaybackPositions(playlistId);
+
+        const typedFavorites = (favorites[playlistId] || [])
+            .map((xtreamId) => this.findContentIdentity(playlistId, xtreamId))
+            .filter(
+                (
+                    value
+                ): value is {
+                    contentType: 'live' | 'movie' | 'series';
+                    xtreamId: number;
+                } => value !== null
+            );
+
+        const typedRecentlyViewed = (recentItems[playlistId] || [])
+            .map((item) => {
+                const identity = this.findContentIdentity(playlistId, item.id);
+
+                if (!identity) {
+                    return null;
+                }
+
+                return {
+                    ...identity,
+                    viewedAt: item.viewedAt,
+                };
+            })
+            .filter(
+                (
+                    value
+                ): value is {
+                    contentType: 'live' | 'movie' | 'series';
+                    xtreamId: number;
+                    viewedAt: string;
+                } => value !== null
+            );
+
+        // Clear in-memory cache
+        this.clearCacheForPlaylist(playlistId);
+
+        return {
+            hiddenCategories: [],
+            favorites: typedFavorites,
+            recentlyViewed: typedRecentlyViewed,
+            playbackPositions,
+        };
+    }
+
+    async restoreUserData(
+        playlistId: string,
+        restoreState: XtreamPendingRestoreState,
+        options?: XtreamOperationOptions
+    ): Promise<void> {
+        void options;
+        // Restore favorites
+        const favorites = this.getFavoritesFromStorage();
+        favorites[playlistId] = restoreState.favorites.map(
+            (item) => item.xtreamId
+        );
+        this.saveFavoritesToStorage(favorites);
+
+        // Restore recent items
+        const recentItems = this.getRecentItemsFromStorage();
+        recentItems[playlistId] = restoreState.recentlyViewed.map((item) => ({
+            id: item.xtreamId,
+            viewedAt: item.viewedAt,
+        }));
+        this.saveRecentItemsToStorage(recentItems);
+
+        // Restore playback positions
+        this.clearPlaybackPositionsForPlaylist(playlistId);
+        const playbackPositions = this.getPlaybackPositionsFromStorage();
+        playbackPositions[playlistId] = restoreState.playbackPositions.map(
+            (position) => ({
+                ...position,
+                updatedAt: position.updatedAt ?? new Date().toISOString(),
+            })
+        );
+        this.savePlaybackPositionsToStorage(playbackPositions);
+    }
+
+    // =========================================================================
+    // Cache Management
+    // =========================================================================
+
+    /**
+     * Clear in-memory cache entries for a specific playlist.
+     * Called by the store when switching playlists to prevent stale data bleed.
+     */
+    clearSessionCache(playlistId: string): void {
+        this.clearCacheForPlaylist(playlistId);
+    }
+
+    private clearCacheForPlaylist(playlistId: string): void {
+        const keysToDelete: string[] = [];
+
+        this.categoryCache.forEach((_, key) => {
+            if (key.startsWith(playlistId)) {
+                keysToDelete.push(key);
+            }
+        });
+        keysToDelete.forEach((key) => this.categoryCache.delete(key));
+
+        const contentKeysToDelete: string[] = [];
+        this.contentCache.forEach((_, key) => {
+            if (key.startsWith(playlistId)) {
+                contentKeysToDelete.push(key);
+            }
+        });
+        contentKeysToDelete.forEach((key) => this.contentCache.delete(key));
+    }
+
+    /**
+     * Clear all in-memory caches
+     */
+    clearAllCaches(): void {
+        this.categoryCache.clear();
+        this.contentCache.clear();
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/lib/data-sources/xtream-data-source.interface.ts b/libs/portal/xtream/data-access/src/lib/data-sources/xtream-data-source.interface.ts
new file mode 100644
index 0000000..de9b5e1
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/data-sources/xtream-data-source.interface.ts
@@ -0,0 +1,429 @@
+import { InjectionToken } from '@angular/core';
+import {
+    PlaybackPositionData,
+    XtreamPendingRestoreState,
+    XtreamCategory,
+    XtreamLiveStream,
+    XtreamSerieItem,
+    XtreamVodStream,
+} from 'shared-interfaces';
+import type { DbOperationEvent } from 'services';
+import {
+    CategoryType,
+    StreamType,
+    XtreamCredentials,
+} from '../services/xtream-api.service';
+
+// Re-export for backward compatibility
+export { PlaybackPositionData };
+
+/**
+ * Playlist representation in the data source
+ */
+export interface XtreamPlaylistData {
+    id: string;
+    name: string;
+    title?: string; // Alias for name, used in some templates
+    updateDate?: number;
+    serverUrl: string;
+    username: string;
+    password: string;
+    type: string;
+    userAgent?: string;
+    referrer?: string;
+    origin?: string;
+}
+
+/**
+ * Content item from the data source.
+ * Includes fields from XtreamItem for template compatibility.
+ */
+export interface XtreamContentItem {
+    // Core DB fields
+    id: number;
+    category_id: number | string; // Can be number (DB) or string (API)
+    title: string;
+    rating: string;
+    added: string;
+    poster_url: string;
+    epg_channel_id?: string | null;
+    tv_archive?: number | null;
+    tv_archive_duration?: number | null;
+    direct_source?: string | null;
+    xtream_id: number;
+    type: string;
+    added_at?: string;
+    viewed_at?: string;
+    position?: number | null;
+
+    // XtreamItem compatibility fields (optional for search/navigation)
+    num?: number;
+    name?: string;
+    stream_type?: 'live' | 'movie';
+    stream_id?: number;
+    stream_icon?: string;
+    custom_sid?: string;
+    rating_imdb?: string;
+
+    // Global search result fields
+    description?: string;
+    playlist_id?: string;
+    playlist_name?: string;
+}
+
+/**
+ * Category from the database with additional fields
+ */
+export interface XtreamCategoryFromDb {
+    id: number;
+    name: string;
+    playlist_id: string;
+    type: 'movies' | 'live' | 'series';
+    xtream_id: number;
+    hidden: boolean;
+}
+
+/**
+ * Recently viewed item with playlist info
+ */
+export interface RecentlyViewedItem extends XtreamContentItem {
+    viewed_at: string;
+}
+
+/**
+ * Database category type mapping (differs from API type)
+ */
+export type DbCategoryType = 'live' | 'movies' | 'series';
+
+/**
+ * Maps CategoryType to DbCategoryType
+ */
+export function mapCategoryTypeToDbType(type: CategoryType): DbCategoryType {
+    switch (type) {
+        case 'live':
+            return 'live';
+        case 'vod':
+            return 'movies';
+        case 'series':
+            return 'series';
+    }
+}
+
+/**
+ * Maps StreamType to DbCategoryType for content storage
+ */
+export function mapStreamTypeToDbType(
+    type: StreamType
+): 'live' | 'movie' | 'series' {
+    return type;
+}
+
+/**
+ * Progress callback for bulk operations
+ */
+export type ProgressCallback = (count: number) => void;
+
+export interface XtreamOperationOptions {
+    operationId?: string;
+    sessionId?: string;
+    onEvent?: (event: DbOperationEvent) => void;
+    onPhaseChange?: (phase: string) => void;
+}
+
+/**
+ * Abstract interface for Xtream data source.
+ * Allows different implementations for Electron (DB-first) and PWA (API-only).
+ */
+export interface IXtreamDataSource {
+    // =========================================================================
+    // Playlist Operations
+    // =========================================================================
+
+    /**
+     * Get playlist by ID
+     */
+    getPlaylist(playlistId: string): Promise<XtreamPlaylistData | null>;
+
+    /**
+     * Create a new playlist
+     */
+    createPlaylist(playlist: XtreamPlaylistData): Promise<void>;
+
+    /**
+     * Update playlist details
+     */
+    updatePlaylist(
+        playlistId: string,
+        updates: Partial<XtreamPlaylistData>
+    ): Promise<void>;
+
+    /**
+     * Delete a playlist and all its data
+     */
+    deletePlaylist(playlistId: string): Promise<void>;
+
+    // =========================================================================
+    // Category Operations
+    // =========================================================================
+
+    /**
+     * Check if categories exist for a playlist and type
+     */
+    hasCategories(playlistId: string, type: DbCategoryType): Promise<boolean>;
+
+    /**
+     * Get categories for a playlist and type
+     * Returns only visible categories by default
+     */
+    getCategories(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: CategoryType,
+        options?: XtreamOperationOptions
+    ): Promise<XtreamCategory[] | XtreamCategoryFromDb[]>;
+
+    /**
+     * Get all categories including hidden (for management)
+     */
+    getAllCategories(
+        playlistId: string,
+        type: DbCategoryType
+    ): Promise<XtreamCategoryFromDb[]>;
+
+    /**
+     * Save categories in bulk
+     */
+    saveCategories(
+        playlistId: string,
+        categories: XtreamCategory[],
+        type: DbCategoryType
+    ): Promise<void>;
+
+    /**
+     * Update category visibility
+     */
+    updateCategoryVisibility(
+        categoryIds: number[],
+        hidden: boolean
+    ): Promise<void>;
+
+    // =========================================================================
+    // Content/Stream Operations
+    // =========================================================================
+
+    /**
+     * Check if content exists for a playlist and type
+     */
+    hasContent(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<boolean>;
+
+    /**
+     * Get content/streams for a playlist and type
+     * @param onProgress - Optional callback for import progress (count)
+     * @param onTotal - Optional callback for total items to import
+     */
+    getContent(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        type: StreamType,
+        onProgress?: ProgressCallback,
+        onTotal?: (total: number) => void,
+        options?: XtreamOperationOptions
+    ): Promise<
+        | XtreamLiveStream[]
+        | XtreamVodStream[]
+        | XtreamSerieItem[]
+        | XtreamContentItem[]
+    >;
+
+    /**
+     * Save content in bulk
+     */
+    saveContent(
+        playlistId: string,
+        streams:
+            | XtreamLiveStream[]
+            | XtreamVodStream[]
+            | XtreamSerieItem[]
+            | XtreamContentItem[],
+        type: 'live' | 'movie' | 'series',
+        onProgress?: ProgressCallback,
+        options?: XtreamOperationOptions
+    ): Promise<number>;
+
+    // =========================================================================
+    // Search Operations
+    // =========================================================================
+
+    /**
+     * Search content within a playlist
+     */
+    searchContent(
+        playlistId: string,
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ): Promise<XtreamContentItem[]>;
+
+    // =========================================================================
+    // Favorites Operations
+    // =========================================================================
+
+    /**
+     * Get all favorites for a playlist
+     */
+    getFavorites(playlistId: string): Promise<XtreamContentItem[]>;
+
+    /**
+     * Add content to favorites.
+     * @param backdropUrl optionally persisted to `content.backdrop_url` when
+     * the row doesn't already have one. Enables the dashboard hero to surface
+     * a cinematic backdrop without a separate round-trip.
+     */
+    addFavorite(
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ): Promise<void>;
+
+    /**
+     * Remove content from favorites
+     */
+    removeFavorite(contentId: number, playlistId: string): Promise<void>;
+
+    /**
+     * Check if content is favorited
+     */
+    isFavorite(contentId: number, playlistId: string): Promise<boolean>;
+
+    // =========================================================================
+    // Recently Viewed Operations
+    // =========================================================================
+
+    /**
+     * Get recently viewed items for a playlist
+     */
+    getRecentItems(playlistId: string): Promise<XtreamContentItem[]>;
+
+    /**
+     * Add item to recently viewed. See `addFavorite` for `backdropUrl`.
+     */
+    addRecentItem(
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ): Promise<void>;
+
+    /**
+     * Remove item from recently viewed
+     */
+    removeRecentItem(contentId: number, playlistId: string): Promise<void>;
+
+    /**
+     * Clear recently viewed for a playlist
+     */
+    clearRecentItems(playlistId: string): Promise<void>;
+
+    // =========================================================================
+    // Content Lookup
+    // =========================================================================
+
+    /**
+     * Get content by xtream ID
+     */
+    getContentByXtreamId(
+        xtreamId: number,
+        playlistId: string,
+        contentType?: 'live' | 'movie' | 'series'
+    ): Promise<XtreamContentItem | null>;
+
+    // =========================================================================
+    // Playback Position Operations
+    // =========================================================================
+
+    /**
+     * Save/update playback position for content
+     */
+    savePlaybackPosition(
+        playlistId: string,
+        data: PlaybackPositionData
+    ): Promise<void>;
+
+    /**
+     * Get playback position for a specific content item
+     */
+    getPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<PlaybackPositionData | null>;
+
+    /**
+     * Get all episode positions for a series (for highlighting watched episodes)
+     */
+    getSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<PlaybackPositionData[]>;
+
+    /**
+     * Get recently watched items with positions (for "Continue Watching" section)
+     */
+    getRecentPlaybackPositions(
+        playlistId: string,
+        limit?: number
+    ): Promise<PlaybackPositionData[]>;
+
+    /**
+     * Get all playback positions for a playlist (for grid view)
+     */
+    getAllPlaybackPositions(
+        playlistId: string
+    ): Promise<PlaybackPositionData[]>;
+
+    /**
+     * Clear playback position (mark as unwatched)
+     */
+    clearPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<void>;
+
+    // =========================================================================
+    // Cleanup Operations
+    // =========================================================================
+
+    /**
+     * Clear any in-memory session cache for a playlist.
+     * Called when the store resets for a playlist switch so stale data
+     * cannot bleed into the new session (relevant for the PWA implementation).
+     */
+    clearSessionCache(playlistId: string): void;
+
+    /**
+     * Clear all content and categories for a playlist (for refresh)
+     * Returns user data (favorites, recently viewed) for restoration
+     */
+    clearPlaylistContent(
+        playlistId: string
+    ): Promise<XtreamPendingRestoreState>;
+
+    /**
+     * Restore user data after refresh
+     */
+    restoreUserData(
+        playlistId: string,
+        restoreState: XtreamPendingRestoreState,
+        options?: XtreamOperationOptions
+    ): Promise<void>;
+}
+
+/**
+ * Injection token for the data source
+ */
+export const XTREAM_DATA_SOURCE = new InjectionToken<IXtreamDataSource>(
+    'XtreamDataSource'
+);
diff --git a/libs/portal/xtream/data-access/src/lib/services/epg-queue.service.spec.ts b/libs/portal/xtream/data-access/src/lib/services/epg-queue.service.spec.ts
new file mode 100644
index 0000000..b63682e
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/epg-queue.service.spec.ts
@@ -0,0 +1,85 @@
+import { TestBed } from '@angular/core/testing';
+import { EpgQueueService } from './epg-queue.service';
+import { XtreamApiService } from './xtream-api.service';
+
+describe('EpgQueueService', () => {
+    let service: EpgQueueService;
+    let xtreamApi: { getShortEpg: jest.Mock };
+
+    const credentials = {
+        serverUrl: 'https://xtream.example.com',
+        username: 'user',
+        password: 'pass',
+    };
+
+    beforeEach(() => {
+        jest.useFakeTimers();
+
+        xtreamApi = {
+            getShortEpg: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                EpgQueueService,
+                {
+                    provide: XtreamApiService,
+                    useValue: xtreamApi,
+                },
+            ],
+        });
+
+        service = TestBed.inject(EpgQueueService);
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it('caches empty EPG responses and does not immediately refetch them', async () => {
+        xtreamApi.getShortEpg.mockResolvedValue([]);
+
+        await (service as unknown as { fetchEpg: (credentials: typeof credentials, streamId: number) => Promise<void> }).fetchEpg(
+            credentials,
+            101
+        );
+
+        expect(service.getCached(101)).toEqual([]);
+        expect(xtreamApi.getShortEpg).toHaveBeenCalledWith(
+            credentials,
+            101,
+            3,
+            {
+                suppressErrorLog: true,
+            }
+        );
+        expect(
+            (service as unknown as { shouldFetch: (streamId: number) => boolean }).shouldFetch(
+                101
+            )
+        ).toBe(false);
+    });
+
+    it('applies a cooldown after EPG request failures', async () => {
+        xtreamApi.getShortEpg.mockRejectedValue(new Error('EPG failed'));
+
+        await (service as unknown as { fetchEpg: (credentials: typeof credentials, streamId: number) => Promise<void> }).fetchEpg(
+            credentials,
+            202
+        );
+
+        expect(
+            (service as unknown as { shouldFetch: (streamId: number) => boolean }).shouldFetch(
+                202
+            )
+        ).toBe(false);
+
+        jest.advanceTimersByTime(60_001);
+
+        expect(
+            (service as unknown as { shouldFetch: (streamId: number) => boolean }).shouldFetch(
+                202
+            )
+        ).toBe(true);
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/services/epg-queue.service.ts b/libs/portal/xtream/data-access/src/lib/services/epg-queue.service.ts
new file mode 100644
index 0000000..52b9bf1
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/epg-queue.service.ts
@@ -0,0 +1,167 @@
+import { inject, Injectable, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { EpgItem } from 'shared-interfaces';
+import { XtreamApiService, XtreamCredentials } from './xtream-api.service';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+interface CacheEntry {
+    data: EpgItem[];
+    timestamp: number;
+}
+
+/**
+ * Throttled EPG request queue with concurrency control, inter-request
+ * delay, and in-memory caching.  Prevents Xtream providers from
+ * rate-limiting / banning the client when scrolling through large
+ * channel lists.
+ */
+@Injectable({ providedIn: 'root' })
+export class EpgQueueService implements OnDestroy {
+    private readonly apiService = inject(XtreamApiService);
+    private readonly logger = createLogger('EpgQueueService');
+    private readonly previewLimit = 3;
+
+    private readonly cache = new Map<number, CacheEntry>();
+    private queue: number[] = [];
+    private readonly inFlight = new Set<number>();
+    private visibleSet = new Set<number>();
+    private processing = false;
+    private readonly failureTimestamps = new Map<number, number>();
+
+    private readonly maxConcurrency = 2;
+    private readonly delayMs = 200;
+    private readonly cacheTtlMs = 5 * 60 * 1000; // 5 minutes
+    private readonly failureCooldownMs = 60 * 1000;
+
+    /** Emits EPG results as they arrive. */
+    readonly epgResult$ = new Subject<{ streamId: number; items: EpgItem[] }>();
+
+    /** Return cached EPG items if still valid, otherwise null. */
+    getCached(streamId: number): EpgItem[] | null {
+        const entry = this.cache.get(streamId);
+        if (!entry) return null;
+        if (Date.now() - entry.timestamp > this.cacheTtlMs) {
+            this.cache.delete(streamId);
+            return null;
+        }
+        return entry.data;
+    }
+
+    private isFailureCoolingDown(streamId: number): boolean {
+        const timestamp = this.failureTimestamps.get(streamId);
+        if (timestamp == null) {
+            return false;
+        }
+
+        if (Date.now() - timestamp > this.failureCooldownMs) {
+            this.failureTimestamps.delete(streamId);
+            return false;
+        }
+
+        return true;
+    }
+
+    private shouldFetch(streamId: number): boolean {
+        return (
+            this.getCached(streamId) === null &&
+            !this.isFailureCoolingDown(streamId) &&
+            !this.inFlight.has(streamId)
+        );
+    }
+
+    /**
+     * Enqueue stream IDs for EPG fetching.
+     *
+     * - IDs already cached or in-flight are skipped.
+     * - The internal queue is replaced so that stale IDs (no longer in
+     *   `visibleIds`) are dropped on next dequeue.
+     */
+    enqueue(
+        streamIds: number[],
+        visibleIds: Set<number>,
+        credentials: XtreamCredentials
+    ): void {
+        this.visibleSet = visibleIds;
+
+        const toFetch = streamIds.filter(
+            (id) => this.shouldFetch(id)
+        );
+
+        // Replace the queue – any previously queued but now-invisible IDs
+        // will be skipped during processing via the visibleSet check.
+        this.queue = toFetch;
+
+        if (!this.processing) {
+            this.processQueue(credentials);
+        }
+    }
+
+    private async processQueue(credentials: XtreamCredentials): Promise<void> {
+        this.processing = true;
+
+        while (this.queue.length > 0) {
+            // Wait until a concurrency slot is available
+            if (this.inFlight.size >= this.maxConcurrency) {
+                await this.delay(this.delayMs);
+                continue;
+            }
+
+            const streamId = this.queue.shift();
+            if (streamId == null) {
+                continue;
+            }
+
+            // Drop stale entries that are no longer visible
+            if (!this.visibleSet.has(streamId)) continue;
+
+            // Skip if it got cached or cooled down while queued (e.g. duplicate/failure)
+            if (!this.shouldFetch(streamId)) continue;
+
+            this.inFlight.add(streamId);
+            this.fetchEpg(credentials, streamId);
+
+            // Space out requests
+            await this.delay(this.delayMs);
+        }
+
+        this.processing = false;
+    }
+
+    private async fetchEpg(
+        credentials: XtreamCredentials,
+        streamId: number
+    ): Promise<void> {
+        try {
+            const items = await this.apiService.getShortEpg(
+                credentials,
+                streamId,
+                this.previewLimit,
+                {
+                    suppressErrorLog: true,
+                }
+            );
+            this.cache.set(streamId, {
+                data: items,
+                timestamp: Date.now(),
+            });
+            this.failureTimestamps.delete(streamId);
+            this.epgResult$.next({ streamId, items });
+        } catch (error) {
+            this.failureTimestamps.set(streamId, Date.now());
+            this.logger.error(
+                `Failed to load EPG for stream ${streamId}`,
+                error
+            );
+        } finally {
+            this.inFlight.delete(streamId);
+        }
+    }
+
+    private delay(ms: number): Promise<void> {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+
+    ngOnDestroy(): void {
+        this.epgResult$.complete();
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/lib/services/favorite-item.interface.ts b/libs/portal/xtream/data-access/src/lib/services/favorite-item.interface.ts
new file mode 100644
index 0000000..6913a0d
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/favorite-item.interface.ts
@@ -0,0 +1,11 @@
+export interface FavoriteItem {
+    content_id: number;
+    playlist_id: string;
+    type: 'live' | 'movie' | 'vod' | 'series';
+    title: string;
+    stream_icon?: string;
+    poster_url?: string;
+    added_at?: string;
+    category_id: number;
+    xtream_id: number;
+}
diff --git a/libs/portal/xtream/data-access/src/lib/services/favorites.service.ts b/libs/portal/xtream/data-access/src/lib/services/favorites.service.ts
new file mode 100644
index 0000000..b3ad6b2
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/favorites.service.ts
@@ -0,0 +1,51 @@
+import { inject, Injectable } from '@angular/core';
+import { from, map, Observable } from 'rxjs';
+import { DatabaseService } from 'services';
+import { FavoriteItem } from './favorite-item.interface';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class FavoritesService {
+    private dbService = inject(DatabaseService);
+
+    async addToFavorites(item: {
+        content_id: number;
+        playlist_id: string;
+        backdrop_url?: string;
+    }): Promise<void> {
+        await this.dbService.addToFavorites(
+            item.content_id,
+            item.playlist_id,
+            item.backdrop_url
+        );
+    }
+
+    async removeFromFavorites(
+        contentId: number,
+        playlistId: string
+    ): Promise<void> {
+        await this.dbService.removeFromFavorites(contentId, playlistId);
+    }
+
+    async isFavorite(contentId: number, playlistId: string): Promise<boolean> {
+        return await this.dbService.isFavorite(contentId, playlistId);
+    }
+
+    getFavorites(playlistId: string): Observable<FavoriteItem[]> {
+        return from(this.dbService.getFavorites(playlistId)).pipe(
+            map((items) =>
+                items.map((item) => ({
+                    content_id: item.id,
+                    playlist_id: playlistId,
+                    type: item.type as FavoriteItem['type'],
+                    title: item.title,
+                    poster_url: item.poster_url,
+                    added_at: item.added_at,
+                    category_id: item.category_id,
+                    xtream_id: item.xtream_id,
+                }))
+            )
+        );
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/lib/services/index.ts b/libs/portal/xtream/data-access/src/lib/services/index.ts
new file mode 100644
index 0000000..676af82
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/index.ts
@@ -0,0 +1,5 @@
+export * from './epg-queue.service';
+export * from './favorite-item.interface';
+export * from './favorites.service';
+export * from './xtream-api.service';
+export * from './xtream-url.service';
diff --git a/libs/portal/xtream/data-access/src/lib/services/xtream-api.service.spec.ts b/libs/portal/xtream/data-access/src/lib/services/xtream-api.service.spec.ts
new file mode 100644
index 0000000..598616b
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/xtream-api.service.spec.ts
@@ -0,0 +1,251 @@
+import { TestBed } from '@angular/core/testing';
+import { DataService } from 'services';
+import { XTREAM_REQUEST } from 'shared-interfaces';
+import { XtreamApiService, XtreamCredentials } from './xtream-api.service';
+
+describe('XtreamApiService', () => {
+    let service: XtreamApiService;
+    let dataService: {
+        sendIpcEvent: jest.Mock<Promise<unknown>, [string, unknown]>;
+    };
+
+    const credentials: XtreamCredentials = {
+        serverUrl: 'http://demo.example',
+        username: 'demo',
+        password: 'secret',
+    };
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                XtreamApiService,
+                { provide: DataService, useValue: dataService },
+            ],
+        });
+
+        service = TestBed.inject(XtreamApiService);
+    });
+
+    it('falls back to the legacy full-epg action and normalizes the response', async () => {
+        dataService.sendIpcEvent.mockImplementation(
+            async (_type: string, payload: unknown) => {
+                const action = (
+                    payload as {
+                        params: { action: string };
+                    }
+                ).params.action;
+
+                if (action === 'get_simple_data_table') {
+                    return { payload: { epg_listings: [] } };
+                }
+
+                return {
+                    payload: {
+                        epg_listings: [
+                            {
+                                id: 'later',
+                                epg_id: 'channel-101.mock',
+                                title: Buffer.from('Later Show').toString(
+                                    'base64'
+                                ),
+                                description: Buffer.from(
+                                    'Later description'
+                                ).toString('base64'),
+                                start: '2026-04-04 11:00:00',
+                                end: '2026-04-04 11:30:00',
+                                start_timestamp: '1775300400',
+                                stop_timestamp: '1775302200',
+                                channel_id: 'channel-101.mock',
+                            },
+                            {
+                                id: 'current',
+                                epg_id: 'channel-101.mock',
+                                title: Buffer.from('Current Show').toString(
+                                    'base64'
+                                ),
+                                description: Buffer.from(
+                                    'Current description'
+                                ).toString('base64'),
+                                start: '2026-04-04 10:30:00',
+                                end: '2026-04-04 11:00:00',
+                                start_timestamp: '1775298600',
+                                stop_timestamp: '1775300400',
+                                channel_id: 'channel-101.mock',
+                            },
+                        ],
+                    },
+                };
+            }
+        );
+
+        const items = await service.getFullEpg(credentials, 101);
+
+        expect(dataService.sendIpcEvent).toHaveBeenNthCalledWith(
+            1,
+            XTREAM_REQUEST,
+            expect.objectContaining({
+                url: 'http://demo.example',
+                params: expect.objectContaining({
+                    action: 'get_simple_data_table',
+                    stream_id: '101',
+                    username: 'demo',
+                    password: 'secret',
+                }),
+            })
+        );
+        expect(dataService.sendIpcEvent).toHaveBeenNthCalledWith(
+            2,
+            XTREAM_REQUEST,
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    action: 'get_simple_date_table',
+                }),
+            })
+        );
+        expect(items).toHaveLength(2);
+        expect(items.map((item) => item.title)).toEqual([
+            'Current Show',
+            'Later Show',
+        ]);
+        expect(items[0]).toEqual(
+            expect.objectContaining({
+                description: 'Current description',
+                start: '2026-04-04T10:30:00.000Z',
+                stop: '2026-04-04T11:00:00.000Z',
+                start_timestamp: '1775298600',
+                stop_timestamp: '1775300400',
+            })
+        );
+    });
+
+    it('normalizes short epg items from unix timestamps for display', async () => {
+        const startTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:30:00.000Z') / 1000
+        );
+        const stopTimestamp = Math.floor(
+            Date.parse('2026-04-05T06:00:00.000Z') / 1000
+        );
+
+        dataService.sendIpcEvent.mockResolvedValue({
+            payload: {
+                epg_listings: [
+                    {
+                        id: 'current',
+                        epg_id: 'channel-101.mock',
+                        title: Buffer.from('Current Show').toString('base64'),
+                        description: Buffer.from(
+                            'Current description'
+                        ).toString('base64'),
+                        start: '2026-04-05 03:00:00',
+                        end: '2026-04-05 03:30:00',
+                        start_timestamp: String(startTimestamp),
+                        stop_timestamp: String(stopTimestamp),
+                        channel_id: 'channel-101.mock',
+                    },
+                ],
+            },
+        });
+
+        const items = await service.getShortEpg(credentials, 101, 4);
+
+        expect(items).toEqual([
+            expect.objectContaining({
+                title: 'Current Show',
+                description: 'Current description',
+                start: '2026-04-05T05:30:00.000Z',
+                stop: '2026-04-05T06:00:00.000Z',
+                start_timestamp: String(startTimestamp),
+                stop_timestamp: String(stopTimestamp),
+            }),
+        ]);
+    });
+
+    it('falls back to parsed short epg date strings when unix timestamps are absent', async () => {
+        const rawStart = '2026-04-05 03:00:00';
+        const rawStop = '2026-04-05 03:30:00';
+
+        dataService.sendIpcEvent.mockResolvedValue({
+            payload: {
+                epg_listings: [
+                    {
+                        id: 'current',
+                        epg_id: 'channel-101.mock',
+                        title: Buffer.from('Current Show').toString('base64'),
+                        description: Buffer.from(
+                            'Current description'
+                        ).toString('base64'),
+                        start: rawStart,
+                        end: rawStop,
+                        channel_id: 'channel-101.mock',
+                    },
+                ],
+            },
+        });
+
+        const items = await service.getShortEpg(credentials, 101, 4);
+
+        expect(items).toEqual([
+            expect.objectContaining({
+                start: new Date(rawStart.replace(' ', 'T')).toISOString(),
+                stop: new Date(rawStop.replace(' ', 'T')).toISOString(),
+                start_timestamp: '',
+                stop_timestamp: '',
+            }),
+        ]);
+    });
+
+    it('normalizes short and full epg items consistently for the same timestamps', async () => {
+        const startTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:30:00.000Z') / 1000
+        );
+        const stopTimestamp = Math.floor(
+            Date.parse('2026-04-05T06:00:00.000Z') / 1000
+        );
+
+        dataService.sendIpcEvent.mockImplementation(
+            async (_type: string, payload: unknown) => {
+                const action = (
+                    payload as {
+                        params: { action: string };
+                    }
+                ).params.action;
+
+                const listing = {
+                    id: 'current',
+                    epg_id: 'channel-101.mock',
+                    title: Buffer.from('Current Show').toString('base64'),
+                    description: Buffer.from('Current description').toString(
+                        'base64'
+                    ),
+                    start: '2026-04-05 03:00:00',
+                    end: '2026-04-05 03:30:00',
+                    start_timestamp: String(startTimestamp),
+                    stop_timestamp: String(stopTimestamp),
+                    channel_id: 'channel-101.mock',
+                };
+
+                if (action === 'get_short_epg') {
+                    return { payload: { epg_listings: [listing] } };
+                }
+
+                return {
+                    payload: {
+                        epg_listings: [listing],
+                    },
+                };
+            }
+        );
+
+        const shortItems = await service.getShortEpg(credentials, 101, 4);
+        const fullItems = await service.getFullEpg(credentials, 101);
+
+        expect(shortItems[0].start).toBe(fullItems[0].start);
+        expect(shortItems[0].stop).toBe(fullItems[0].stop);
+        expect(shortItems[0].start_timestamp).toBe(fullItems[0].start_timestamp);
+        expect(shortItems[0].stop_timestamp).toBe(fullItems[0].stop_timestamp);
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/services/xtream-api.service.ts b/libs/portal/xtream/data-access/src/lib/services/xtream-api.service.ts
new file mode 100644
index 0000000..48ac17a
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/xtream-api.service.ts
@@ -0,0 +1,507 @@
+import { inject, Injectable } from '@angular/core';
+import { DataService } from 'services';
+import {
+    EpgItem,
+    XtreamCategory,
+    XtreamCodeActions,
+    XtreamLiveStream,
+    XtreamSerieDetails,
+    XtreamSerieItem,
+    XtreamVodDetails,
+    XtreamVodStream,
+    XTREAM_REQUEST,
+} from 'shared-interfaces';
+import { XtreamAccountInfo } from '../account-info/account-info.interface';
+
+/**
+ * Xtream API credentials
+ */
+export interface XtreamCredentials {
+    serverUrl: string;
+    username: string;
+    password: string;
+}
+
+/**
+ * Category type mapping for API calls
+ */
+export type CategoryType = 'live' | 'vod' | 'series';
+
+/**
+ * Stream type mapping for API calls
+ */
+export type StreamType = 'live' | 'movie' | 'series';
+
+export interface XtreamRequestOptions {
+    requestId?: string;
+    sessionId?: string;
+    suppressErrorLog?: boolean;
+}
+
+/**
+ * Raw EPG listing from API (before decoding)
+ */
+interface RawEpgListing {
+    id?: string;
+    epg_id?: string;
+    title?: string;
+    description?: string;
+    start?: string;
+    end?: string;
+    stop?: string;
+    start_timestamp?: string;
+    stop_timestamp?: string;
+    channel_id?: string;
+    lang?: string;
+    [key: string]: unknown;
+}
+
+/**
+ * EPG API response
+ */
+interface EpgResponse {
+    epg_listings?: RawEpgListing[] | Record<string, RawEpgListing>;
+}
+
+/**
+ * Service for all Xtream Codes API interactions.
+ * Extracts API communication logic from the XtreamStore.
+ */
+@Injectable({ providedIn: 'root' })
+export class XtreamApiService {
+    private readonly dataService = inject(DataService);
+
+    async cancelSession(sessionId: string): Promise<boolean> {
+        if (!sessionId || typeof window.electron?.xtreamCancelSession !== 'function') {
+            return false;
+        }
+
+        try {
+            const result = await window.electron.xtreamCancelSession(sessionId);
+            return result.success;
+        } catch (error) {
+            console.error('Failed to cancel Xtream session:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Get account/portal status
+     */
+    async getAccountInfo(
+        credentials: XtreamCredentials,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamAccountInfo> {
+        return this.sendRequest(
+            credentials.serverUrl,
+            {
+                username: credentials.username,
+                password: credentials.password,
+                action: XtreamCodeActions.GetAccountInfo,
+            },
+            options
+        );
+    }
+
+    /**
+     * Get categories by type
+     */
+    async getCategories(
+        credentials: XtreamCredentials,
+        type: CategoryType,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamCategory[]> {
+        const actionMap: Record<CategoryType, XtreamCodeActions> = {
+            live: XtreamCodeActions.GetLiveCategories,
+            vod: XtreamCodeActions.GetVodCategories,
+            series: XtreamCodeActions.GetSeriesCategories,
+        };
+
+        const response = await this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: actionMap[type],
+                username: credentials.username,
+                password: credentials.password,
+            },
+            options
+        );
+
+        return Array.isArray(response) ? response : [];
+    }
+
+    /**
+     * Get live streams
+     */
+    async getLiveStreams(
+        credentials: XtreamCredentials,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamLiveStream[]> {
+        const response = await this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetLiveStreams,
+                username: credentials.username,
+                password: credentials.password,
+            },
+            options
+        );
+
+        return Array.isArray(response) ? response : [];
+    }
+
+    /**
+     * Get VOD streams
+     */
+    async getVodStreams(
+        credentials: XtreamCredentials,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamVodStream[]> {
+        const response = await this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetVodStreams,
+                username: credentials.username,
+                password: credentials.password,
+            },
+            options
+        );
+
+        return Array.isArray(response) ? response : [];
+    }
+
+    /**
+     * Get series items
+     */
+    async getSeriesStreams(
+        credentials: XtreamCredentials,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamSerieItem[]> {
+        const response = await this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetSeries,
+                username: credentials.username,
+                password: credentials.password,
+            },
+            options
+        );
+
+        return Array.isArray(response) ? response : [];
+    }
+
+    /**
+     * Get streams by type (unified method)
+     */
+    async getStreams(
+        credentials: XtreamCredentials,
+        type: StreamType,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamLiveStream[] | XtreamVodStream[] | XtreamSerieItem[]> {
+        switch (type) {
+            case 'live':
+                return this.getLiveStreams(credentials, options);
+            case 'movie':
+                return this.getVodStreams(credentials, options);
+            case 'series':
+                return this.getSeriesStreams(credentials, options);
+        }
+    }
+
+    /**
+     * Get VOD details
+     */
+    async getVodInfo(
+        credentials: XtreamCredentials,
+        vodId: string | number,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamVodDetails> {
+        return this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetVodInfo,
+                username: credentials.username,
+                password: credentials.password,
+                vod_id: vodId,
+            },
+            options
+        );
+    }
+
+    /**
+     * Get series details
+     */
+    async getSeriesInfo(
+        credentials: XtreamCredentials,
+        seriesId: string | number,
+        options?: XtreamRequestOptions
+    ): Promise<XtreamSerieDetails> {
+        return this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetSeriesInfo,
+                username: credentials.username,
+                password: credentials.password,
+                series_id: seriesId,
+            },
+            options
+        );
+    }
+
+    /**
+     * Get short EPG for a stream
+     * Returns decoded EPG items (title and description are base64 decoded)
+     */
+    async getShortEpg(
+        credentials: XtreamCredentials,
+        streamId: number,
+        limit = 10,
+        options?: XtreamRequestOptions
+    ): Promise<EpgItem[]> {
+        const response: EpgResponse = await this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetShortEpg,
+                username: credentials.username,
+                password: credentials.password,
+                stream_id: streamId,
+                limit,
+            },
+            options
+        );
+
+        return this.normalizeShortEpgItems(response);
+    }
+
+    /**
+     * Get the full EPG schedule for a stream.
+     * Uses the documented endpoint with a fallback for older typoed panels.
+     */
+    async getFullEpg(
+        credentials: XtreamCredentials,
+        streamId: number,
+        options?: XtreamRequestOptions
+    ): Promise<EpgItem[]> {
+        try {
+            const response: EpgResponse = await this.sendRequest(
+                credentials.serverUrl,
+                {
+                    action: XtreamCodeActions.GetSimpleDataTable,
+                    username: credentials.username,
+                    password: credentials.password,
+                    stream_id: streamId,
+                },
+                options
+            );
+            const items = this.normalizeFullEpgItems(response);
+            if (items.length > 0) {
+                return items;
+            }
+        } catch {
+            // Fall back to the legacy typo endpoint below.
+        }
+
+        const fallbackResponse: EpgResponse = await this.sendRequest(
+            credentials.serverUrl,
+            {
+                action: XtreamCodeActions.GetSimpleDateTable,
+                username: credentials.username,
+                password: credentials.password,
+                stream_id: streamId,
+            },
+            options
+        );
+
+        return this.normalizeFullEpgItems(fallbackResponse);
+    }
+
+    /**
+     * Decode base64 unicode string (used for EPG data)
+     */
+    private decodeBase64Unicode(str: string): string {
+        try {
+            return decodeURIComponent(
+                Array.prototype.map
+                    .call(atob(str), (c: string) => {
+                        return (
+                            '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+                        );
+                    })
+                    .join('')
+            );
+        } catch {
+            return str;
+        }
+    }
+
+    private getEpgListings(response: EpgResponse | null | undefined): RawEpgListing[] {
+        const listings = response?.epg_listings;
+        if (!listings) {
+            return [];
+        }
+
+        if (Array.isArray(listings)) {
+            return listings;
+        }
+
+        return Object.values(listings);
+    }
+
+    private normalizeShortEpgItems(response: EpgResponse): EpgItem[] {
+        return this.getEpgListings(response)
+            .map((item, index) => {
+                const startTimestamp = this.parseUnixTimestamp(
+                    item.start_timestamp
+                );
+                const stopTimestamp = this.parseUnixTimestamp(
+                    item.stop_timestamp
+                );
+                const normalizedStart =
+                    this.toIsoString(startTimestamp) ??
+                    this.normalizeDateString(item.start);
+                const normalizedStop =
+                    this.toIsoString(stopTimestamp) ??
+                    this.normalizeDateString(item.stop ?? item.end);
+
+                return {
+                    id: String(item.id ?? index),
+                    epg_id: String(item.epg_id ?? ''),
+                    title: this.decodeBase64Unicode(
+                        String(item.title ?? '')
+                    ).trim(),
+                    description: this.decodeBase64Unicode(
+                        String(item.description ?? '')
+                    ).trim(),
+                    lang: String(item.lang ?? ''),
+                    start: normalizedStart,
+                    end: normalizedStop,
+                    stop: normalizedStop,
+                    channel_id: String(item.channel_id ?? ''),
+                    start_timestamp: String(startTimestamp ?? ''),
+                    stop_timestamp: String(stopTimestamp ?? ''),
+                } satisfies EpgItem;
+            })
+            .filter((item) => Boolean(item.start) && Boolean(item.stop))
+            .sort(
+                (left, right) =>
+                    this.getEpgItemTimestampMs(left.start, left.start_timestamp) -
+                    this.getEpgItemTimestampMs(
+                        right.start,
+                        right.start_timestamp
+                    )
+            );
+    }
+
+    private normalizeFullEpgItems(response: EpgResponse): EpgItem[] {
+        return this.getEpgListings(response)
+            .map((item, index) => {
+                const startTimestamp = this.parseUnixTimestamp(
+                    item.start_timestamp
+                );
+                const stopTimestamp = this.parseUnixTimestamp(
+                    item.stop_timestamp
+                );
+                const normalizedStart =
+                    this.toIsoString(startTimestamp) ??
+                    this.normalizeDateString(item.start);
+                const normalizedStop =
+                    this.toIsoString(stopTimestamp) ??
+                    this.normalizeDateString(item.stop ?? item.end);
+
+                return {
+                    id: String(item.id ?? index),
+                    epg_id: String(item.epg_id ?? item.channel_id ?? ''),
+                    title: this.decodeBase64Unicode(
+                        String(item.title ?? '')
+                    ).trim(),
+                    description: this.decodeBase64Unicode(
+                        String(item.description ?? '')
+                    ).trim(),
+                    lang: String(item.lang ?? ''),
+                    start: normalizedStart,
+                    end: normalizedStop,
+                    stop: normalizedStop,
+                    channel_id: String(item.channel_id ?? ''),
+                    start_timestamp: String(startTimestamp ?? ''),
+                    stop_timestamp: String(stopTimestamp ?? ''),
+                } satisfies EpgItem;
+            })
+            .filter((item) => Boolean(item.start) && Boolean(item.stop))
+            .sort(
+                (left, right) =>
+                    this.getEpgItemTimestampMs(left.start, left.start_timestamp) -
+                    this.getEpgItemTimestampMs(
+                        right.start,
+                        right.start_timestamp
+                    )
+            );
+    }
+
+    private parseUnixTimestamp(value: unknown): number | null {
+        const parsed = Number.parseInt(String(value ?? ''), 10);
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+    }
+
+    private toIsoString(timestamp: number | null): string | null {
+        return timestamp ? new Date(timestamp * 1000).toISOString() : null;
+    }
+
+    private normalizeDateString(value: unknown): string {
+        const rawValue = String(value ?? '').trim();
+        if (!rawValue) {
+            return '';
+        }
+
+        const parsed = Date.parse(rawValue.replace(' ', 'T'));
+        return Number.isFinite(parsed)
+            ? new Date(parsed).toISOString()
+            : rawValue;
+    }
+
+    private getEpgItemTimestampMs(
+        isoValue: string,
+        unixTimestampValue: string
+    ): number {
+        const unixTimestamp = this.parseUnixTimestamp(unixTimestampValue);
+        if (unixTimestamp) {
+            return unixTimestamp * 1000;
+        }
+
+        return Date.parse(isoValue);
+    }
+
+    /**
+     * Send request via IPC to avoid CORS issues
+     */
+    private async sendRequest<TResponse>(
+        url: string,
+        params: Record<string, string | number>,
+        options?: XtreamRequestOptions
+    ): Promise<TResponse> {
+        const serializedParams: Record<string, string> = {};
+        Object.entries(params).forEach(([key, value]) => {
+            serializedParams[key] = String(value);
+        });
+
+        const response = (await this.dataService.sendIpcEvent(XTREAM_REQUEST, {
+            url,
+            params: serializedParams,
+            requestId: options?.requestId,
+            sessionId: options?.sessionId,
+            suppressErrorLog: options?.suppressErrorLog,
+        })) as {
+            message?: string;
+            payload?: unknown;
+            type?: string;
+        };
+
+        // The IPC layer catches errors and returns { type: 'ERROR', message, status }
+        // instead of rejecting. Convert that back into a thrown error so callers
+        // can handle it with .catch() / try-catch.
+        if (response?.type === 'ERROR' || (!response?.payload && response?.message)) {
+            throw new Error(response?.message ?? 'Request failed');
+        }
+
+        return response?.payload as TResponse;
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/lib/services/xtream-url.service.spec.ts b/libs/portal/xtream/data-access/src/lib/services/xtream-url.service.spec.ts
new file mode 100644
index 0000000..0fc4da7
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/xtream-url.service.spec.ts
@@ -0,0 +1,79 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { DatabaseService, SettingsStore } from 'services';
+import { XtreamCredentials } from './xtream-api.service';
+import { XtreamUrlService } from './xtream-url.service';
+
+describe('XtreamUrlService', () => {
+    let service: XtreamUrlService;
+    let databaseService: {
+        getAppState: jest.Mock<Promise<string | null>, [string]>;
+        setAppState: jest.Mock<Promise<void>, [string, string]>;
+    };
+
+    const credentials: XtreamCredentials = {
+        serverUrl: 'http://demo.example',
+        username: 'demo',
+        password: 'secret',
+    };
+    const originalElectron = window.electron;
+
+    beforeEach(() => {
+        databaseService = {
+            getAppState: jest.fn().mockResolvedValue(null),
+            setAppState: jest.fn().mockResolvedValue(undefined),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                XtreamUrlService,
+                { provide: DatabaseService, useValue: databaseService },
+                {
+                    provide: SettingsStore,
+                    useValue: {
+                        streamFormat: signal('ts'),
+                    },
+                },
+            ],
+        });
+
+        service = TestBed.inject(XtreamUrlService);
+    });
+
+    afterEach(() => {
+        window.electron = originalElectron;
+    });
+
+    it('detects the legacy catchup scheme once and then uses the cached result', async () => {
+        const xtreamProbeUrl = jest
+            .fn()
+            .mockResolvedValueOnce({ status: 404 })
+            .mockResolvedValueOnce({ status: 302 });
+        window.electron = {
+            xtreamProbeUrl,
+        } as typeof window.electron;
+
+        const firstUrl = await service.resolveCatchupUrl(
+            'playlist-1',
+            credentials,
+            101,
+            1775296800,
+            1775300400
+        );
+        const secondUrl = await service.resolveCatchupUrl(
+            'playlist-1',
+            credentials,
+            101,
+            1775296800,
+            1775300400
+        );
+
+        expect(firstUrl).toContain('/streaming/timeshift.php?');
+        expect(secondUrl).toBe(firstUrl);
+        expect(xtreamProbeUrl).toHaveBeenCalledTimes(2);
+        expect(databaseService.setAppState).toHaveBeenCalledWith(
+            'xtream-catchup-scheme:playlist-1',
+            'legacy'
+        );
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/services/xtream-url.service.ts b/libs/portal/xtream/data-access/src/lib/services/xtream-url.service.ts
new file mode 100644
index 0000000..dcf62da
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/services/xtream-url.service.ts
@@ -0,0 +1,261 @@
+import { inject, Injectable } from '@angular/core';
+import {
+    XtreamSerieEpisode,
+    XtreamVodDetails,
+} from 'shared-interfaces';
+import { DatabaseService, SettingsStore } from 'services';
+import { XtreamCredentials } from './xtream-api.service';
+
+/**
+ * Extended playlist with optional HTTP headers
+ */
+export interface XtreamPlaylistWithHeaders extends XtreamCredentials {
+    id: string;
+    name: string;
+    type?: string;
+    userAgent?: string;
+    referrer?: string;
+    origin?: string;
+}
+
+/**
+ * Live stream item with xtream_id
+ */
+export interface LiveStreamItem {
+    xtream_id: number;
+    [key: string]: unknown;
+}
+
+type XtreamVodStreamLike = XtreamVodDetails & {
+    readonly stream_id?: number;
+};
+
+type XtreamCatchupScheme = 'rest' | 'legacy';
+
+type XtreamProbeApi = {
+    xtreamProbeUrl?: (
+        url: string,
+        method?: 'GET' | 'HEAD'
+    ) => Promise<{ status: number }>;
+};
+
+const XTREAM_CATCHUP_SCHEME_KEY_PREFIX = 'xtream-catchup-scheme:';
+
+/**
+ * Service for constructing Xtream stream URLs.
+ * Handles URL construction for live streams, VOD, and series episodes.
+ */
+@Injectable({ providedIn: 'root' })
+export class XtreamUrlService {
+    private readonly databaseService = inject(DatabaseService);
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly catchupSchemeCache = new Map<string, XtreamCatchupScheme>();
+    private readonly catchupSchemeRequests = new Map<
+        string,
+        Promise<XtreamCatchupScheme>
+    >();
+
+    /**
+     * Construct live stream URL
+     * Format: {serverUrl}/live/{username}/{password}/{streamId}.{format}
+     */
+    constructLiveUrl(
+        credentials: XtreamCredentials,
+        xtreamId: number,
+        format?: string
+    ): string {
+        const streamFormat =
+            format ?? this.settingsStore.streamFormat() ?? 'ts';
+        return `${credentials.serverUrl}/live/${credentials.username}/${credentials.password}/${xtreamId}.${streamFormat}`;
+    }
+
+    /**
+     * Construct VOD stream URL
+     * Format: {serverUrl}/movie/{username}/{password}/{streamId}.{extension}
+     */
+    constructVodUrl(
+        credentials: XtreamCredentials,
+        vodItem: XtreamVodDetails
+    ): string {
+        const vod = vodItem as XtreamVodStreamLike;
+        const streamId = vod.movie_data?.stream_id ?? vod.stream_id;
+        const extension = vodItem.movie_data?.container_extension;
+        if (!streamId || !extension) {
+            return '';
+        }
+        return `${credentials.serverUrl}/movie/${credentials.username}/${credentials.password}/${streamId}.${extension}`;
+    }
+
+    /**
+     * Construct series episode stream URL
+     * Format: {serverUrl}/series/{username}/{password}/{episodeId}.{extension}
+     */
+    constructEpisodeUrl(
+        credentials: XtreamCredentials,
+        episode: XtreamSerieEpisode
+    ): string {
+        return `${credentials.serverUrl}/series/${credentials.username}/${credentials.password}/${episode.id}.${episode.container_extension}`;
+    }
+
+    constructCatchupUrl(
+        credentials: XtreamCredentials,
+        streamId: number,
+        startTimestamp: number,
+        stopTimestamp: number,
+        scheme: XtreamCatchupScheme
+    ): string {
+        const durationMinutes = Math.max(
+            1,
+            Math.round((stopTimestamp - startTimestamp) / 60)
+        );
+        const timeString = this.formatCatchupStartTime(startTimestamp);
+
+        if (scheme === 'legacy') {
+            const params = new URLSearchParams({
+                username: credentials.username,
+                password: credentials.password,
+                stream: String(streamId),
+                start: timeString,
+                duration: String(durationMinutes),
+            });
+            return `${credentials.serverUrl}/streaming/timeshift.php?${params.toString()}`;
+        }
+
+        return `${credentials.serverUrl}/timeshift/${credentials.username}/${credentials.password}/${durationMinutes}/${timeString}/${streamId}.ts`;
+    }
+
+    async resolveCatchupUrl(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        streamId: number,
+        startTimestamp: number,
+        stopTimestamp: number
+    ): Promise<string> {
+        const scheme = await this.getCatchupScheme(
+            playlistId,
+            credentials,
+            streamId,
+            startTimestamp,
+            stopTimestamp
+        );
+
+        return this.constructCatchupUrl(
+            credentials,
+            streamId,
+            startTimestamp,
+            stopTimestamp,
+            scheme
+        );
+    }
+
+    private async getCatchupScheme(
+        playlistId: string,
+        credentials: XtreamCredentials,
+        streamId: number,
+        startTimestamp: number,
+        stopTimestamp: number
+    ): Promise<XtreamCatchupScheme> {
+        const cacheKey = `${XTREAM_CATCHUP_SCHEME_KEY_PREFIX}${playlistId}`;
+        const cached = this.catchupSchemeCache.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+
+        const persisted = await this.databaseService.getAppState(cacheKey);
+        if (persisted === 'rest' || persisted === 'legacy') {
+            this.catchupSchemeCache.set(cacheKey, persisted);
+            return persisted;
+        }
+
+        const inFlightRequest = this.catchupSchemeRequests.get(cacheKey);
+        if (inFlightRequest) {
+            return inFlightRequest;
+        }
+
+        const request = this.detectCatchupScheme(
+            cacheKey,
+            credentials,
+            streamId,
+            startTimestamp,
+            stopTimestamp
+        ).finally(() => {
+            this.catchupSchemeRequests.delete(cacheKey);
+        });
+
+        this.catchupSchemeRequests.set(cacheKey, request);
+        return request;
+    }
+
+    private async detectCatchupScheme(
+        cacheKey: string,
+        credentials: XtreamCredentials,
+        streamId: number,
+        startTimestamp: number,
+        stopTimestamp: number
+    ): Promise<XtreamCatchupScheme> {
+        const restUrl = this.constructCatchupUrl(
+            credentials,
+            streamId,
+            startTimestamp,
+            stopTimestamp,
+            'rest'
+        );
+        const legacyUrl = this.constructCatchupUrl(
+            credentials,
+            streamId,
+            startTimestamp,
+            stopTimestamp,
+            'legacy'
+        );
+
+        const restStatus = await this.probeCatchupUrl(restUrl);
+        let detectedScheme: XtreamCatchupScheme;
+
+        if (this.isAcceptedCatchupProbeStatus(restStatus)) {
+            detectedScheme = 'rest';
+        } else {
+            const legacyStatus = await this.probeCatchupUrl(legacyUrl);
+            detectedScheme = this.isAcceptedCatchupProbeStatus(legacyStatus)
+                ? 'legacy'
+                : restStatus === 404
+                  ? 'legacy'
+                  : 'rest';
+        }
+
+        this.catchupSchemeCache.set(cacheKey, detectedScheme);
+        await this.databaseService.setAppState(cacheKey, detectedScheme);
+        return detectedScheme;
+    }
+
+    private async probeCatchupUrl(url: string): Promise<number> {
+        const probeUrl = (window.electron as XtreamProbeApi | undefined)
+            ?.xtreamProbeUrl;
+
+        if (typeof probeUrl !== 'function') {
+            return 0;
+        }
+
+        try {
+            const result = await probeUrl(url, 'HEAD');
+            return Number(result?.status ?? 0);
+        } catch {
+            return 0;
+        }
+    }
+
+    private isAcceptedCatchupProbeStatus(status: number): boolean {
+        return (
+            (status >= 200 && status < 400) ||
+            status === 401 ||
+            status === 403 ||
+            status === 405
+        );
+    }
+
+    private formatCatchupStartTime(timestamp: number): string {
+        const date = new Date(timestamp * 1000);
+        const pad = (value: number) => String(value).padStart(2, '0');
+
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}:${pad(date.getHours())}-${pad(date.getMinutes())}`;
+    }
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/index.ts b/libs/portal/xtream/data-access/src/lib/stores/features/index.ts
new file mode 100644
index 0000000..a23f0c4
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/index.ts
@@ -0,0 +1,7 @@
+export * from './with-content.feature';
+export * from './with-epg.feature';
+export * from './with-playback-positions.feature';
+export * from './with-player.feature';
+export * from './with-portal.feature';
+export * from './with-search.feature';
+export * from './with-selection.feature';
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-content.feature.spec.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-content.feature.spec.ts
new file mode 100644
index 0000000..67a3958
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-content.feature.spec.ts
@@ -0,0 +1,772 @@
+import { TestBed } from '@angular/core/testing';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { DatabaseService } from 'services';
+import {
+    XTREAM_DATA_SOURCE,
+    XtreamPlaylistData,
+} from '../../data-sources/xtream-data-source.interface';
+import { XtreamApiService } from '../../services/xtream-api.service';
+import { PortalStatusType } from '../../xtream-state';
+import { withContent } from './with-content.feature';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+type ContentType = 'live' | 'movie' | 'series';
+
+const PLAYLIST: XtreamPlaylistData = {
+    id: 'playlist-1',
+    name: 'Test Xtream',
+    serverUrl: 'http://localhost:8080',
+    username: 'demo',
+    password: 'secret',
+    type: 'xtream',
+};
+
+let checkPortalStatusMock: jest.Mock<Promise<PortalStatusType>, []>;
+
+const TestContentStore = signalStore(
+    withState({
+        playlistId: PLAYLIST.id,
+        currentPlaylist: PLAYLIST,
+        portalStatus: 'active' as PortalStatusType,
+    }),
+    withMethods((store) => ({
+        async checkPortalStatus(): Promise<PortalStatusType> {
+            const status = await checkPortalStatusMock();
+            patchState(store, { portalStatus: status });
+            return status;
+        },
+    })),
+    withContent()
+);
+
+function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return { promise, resolve, reject };
+}
+
+function createAbortError(): Error {
+    const error = new Error('Import cancelled');
+    error.name = 'AbortError';
+    return error;
+}
+
+async function waitForCondition(
+    predicate: () => boolean,
+    attempts = 20
+): Promise<void> {
+    for (let index = 0; index < attempts; index += 1) {
+        if (predicate()) {
+            return;
+        }
+
+        await Promise.resolve();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+
+    throw new Error('Timed out waiting for test condition');
+}
+
+describe('withContent import state', () => {
+    let store: InstanceType<typeof TestContentStore>;
+    let dataSource: {
+        getCategories: jest.Mock;
+        getContent: jest.Mock;
+        hasCategories: jest.Mock;
+        hasContent: jest.Mock;
+        restoreUserData: jest.Mock;
+    };
+    let databaseService: {
+        clearXtreamImportCache: jest.Mock;
+        cancelOperation: jest.Mock;
+        createOperationId: jest.Mock;
+        getXtreamImportStatus: jest.Mock;
+        setXtreamImportStatus: jest.Mock;
+        supportsDbOperationCancellation: jest.Mock;
+    };
+    let xtreamApiService: {
+        cancelSession: jest.Mock;
+    };
+
+    beforeEach(() => {
+        localStorage.clear();
+
+        let operationCounter = 0;
+        dataSource = {
+            getCategories: jest.fn().mockResolvedValue([]),
+            getContent: jest.fn(),
+            hasCategories: jest.fn().mockResolvedValue(true),
+            hasContent: jest.fn().mockResolvedValue(true),
+            restoreUserData: jest.fn().mockResolvedValue(undefined),
+        };
+        databaseService = {
+            clearXtreamImportCache: jest.fn().mockResolvedValue(true),
+            cancelOperation: jest.fn().mockResolvedValue(true),
+            createOperationId: jest.fn().mockImplementation((prefix?: string) => {
+                if (prefix === 'xtream-import-session') {
+                    return 'xtream-import-session';
+                }
+
+                operationCounter += 1;
+                return `${prefix ?? 'db-op'}-${operationCounter}`;
+            }),
+            getXtreamImportStatus: jest.fn().mockResolvedValue('completed'),
+            setXtreamImportStatus: jest.fn().mockResolvedValue(true),
+            supportsDbOperationCancellation: jest.fn().mockReturnValue(true),
+        };
+        xtreamApiService = {
+            cancelSession: jest.fn().mockResolvedValue(true),
+        };
+        checkPortalStatusMock = jest.fn().mockResolvedValue('active');
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestContentStore,
+                {
+                    provide: XTREAM_DATA_SOURCE,
+                    useValue: dataSource,
+                },
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: XtreamApiService,
+                    useValue: xtreamApiService,
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestContentStore);
+    });
+
+    afterEach(() => {
+        localStorage.clear();
+    });
+
+    it('tracks aggregated import progress while content is loading', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+        const pending = {
+            live: createDeferred<any[]>(),
+            movie: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+        const optionsByType = new Map<
+            ContentType,
+            { onEvent?: (event: any) => void; operationId?: string } | undefined
+        >();
+        const totals: Record<ContentType, number> = {
+            live: 2,
+            movie: 3,
+            series: 4,
+        };
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: ContentType,
+                onProgress?: (count: number) => void,
+                onTotal?: (total: number) => void,
+                options?: { onEvent?: (event: any) => void }
+            ) => {
+                optionsByType.set(type, options);
+                onTotal?.(totals[type]);
+                const operationId = options?.operationId ?? `${type}-op`;
+                options?.onEvent?.({
+                    operation: 'save-content',
+                    operationId,
+                    status: 'started',
+                    phase: 'saving-content',
+                });
+                onProgress?.(1);
+                options?.onEvent?.({
+                    operation: 'save-content',
+                    operationId,
+                    status: 'progress',
+                    phase: 'saving-content',
+                    current: 1,
+                    total: totals[type],
+                });
+
+                return pending[type].promise;
+            }
+        );
+
+        const initialization = store.initializeContent();
+        await Promise.resolve();
+
+        pendingCategories.live.resolve([]);
+        pendingCategories.vod.resolve([]);
+        pendingCategories.series.resolve([]);
+        await waitForCondition(() => store.importCount() === 1);
+
+        const liveOperationId =
+            optionsByType.get('live')?.operationId ?? 'live-op';
+        expect(store.isImporting()).toBe(true);
+        expect(store.activeImportContentType()).toBe('live');
+        expect(store.activeImportCurrentCount()).toBe(1);
+        expect(store.activeImportTotalCount()).toBe(2);
+        expect(store.importCount()).toBe(1);
+        expect(store.itemsToImport()).toBe(2);
+        expect(store.activeImportOperationIds()).toEqual([liveOperationId]);
+        expect(store.importPhase()).toBe('saving-content');
+
+        optionsByType.get('live')?.onEvent?.({
+            operation: 'save-content',
+            operationId: liveOperationId,
+            status: 'completed',
+            phase: 'saving-content',
+            current: totals.live,
+            total: totals.live,
+        });
+        pending.live.resolve([]);
+
+        await waitForCondition(() => store.importCount() === 2);
+        const movieOperationId =
+            optionsByType.get('movie')?.operationId ?? 'movie-op';
+        expect(store.activeImportContentType()).toBe('vod');
+        expect(store.activeImportCurrentCount()).toBe(1);
+        expect(store.activeImportTotalCount()).toBe(3);
+        expect(store.itemsToImport()).toBe(5);
+        expect(store.activeImportOperationIds()).toEqual([movieOperationId]);
+
+        optionsByType.get('movie')?.onEvent?.({
+            operation: 'save-content',
+            operationId: movieOperationId,
+            status: 'completed',
+            phase: 'saving-content',
+            current: totals.movie,
+            total: totals.movie,
+        });
+        pending.movie.resolve([]);
+
+        await waitForCondition(() => store.importCount() === 3);
+        const seriesOperationId =
+            optionsByType.get('series')?.operationId ?? 'series-op';
+        expect(store.activeImportContentType()).toBe('series');
+        expect(store.activeImportCurrentCount()).toBe(1);
+        expect(store.activeImportTotalCount()).toBe(4);
+        expect(store.itemsToImport()).toBe(9);
+        expect(store.activeImportOperationIds()).toEqual([seriesOperationId]);
+
+        optionsByType.get('series')?.onEvent?.({
+            operation: 'save-content',
+            operationId: seriesOperationId,
+            status: 'completed',
+            phase: 'saving-content',
+            current: totals.series,
+            total: totals.series,
+        });
+        pending.series.resolve([]);
+
+        await initialization;
+
+        expect(store.isImporting()).toBe(false);
+        expect(store.isContentInitialized()).toBe(true);
+        expect(store.contentInitBlockReason()).toBeNull();
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'ready',
+            vod: 'ready',
+            series: 'ready',
+        });
+        expect(store.activeImportOperationIds()).toEqual([]);
+        expect(store.importPhase()).toBeNull();
+        expect(store.activeImportContentType()).toBeNull();
+        expect(store.activeImportCurrentCount()).toBe(0);
+        expect(store.activeImportTotalCount()).toBe(0);
+        expect(store.importCount()).toBe(0);
+        expect(store.itemsToImport()).toBe(0);
+    });
+
+    it('marks content types ready and patches their streams as each import completes', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+        const pending = {
+            live: createDeferred<any[]>(),
+            movie: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+
+        const liveItems = [
+            {
+                xtream_id: 101,
+                category_id: 11,
+                title: 'Live One',
+            },
+        ];
+        const vodItems = [
+            {
+                xtream_id: 202,
+                category_id: 22,
+                title: 'Movie One',
+            },
+        ];
+        const seriesItems = [
+            {
+                xtream_id: 303,
+                category_id: 33,
+                title: 'Series One',
+            },
+        ];
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: ContentType
+            ) => pending[type].promise
+        );
+
+        const initialization = store.initializeContent();
+        await Promise.resolve();
+
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'loading',
+            vod: 'loading',
+            series: 'loading',
+        });
+
+        pendingCategories.live.resolve([]);
+        pendingCategories.vod.resolve([]);
+        pendingCategories.series.resolve([]);
+
+        pending.live.resolve(liveItems);
+        await waitForCondition(
+            () => store.contentLoadStateByType().live === 'ready'
+        );
+
+        expect(store.liveStreams()).toEqual(liveItems);
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'ready',
+            vod: 'loading',
+            series: 'loading',
+        });
+        expect(store.isContentInitialized()).toBe(false);
+
+        pending.movie.resolve(vodItems);
+        await waitForCondition(
+            () => store.contentLoadStateByType().vod === 'ready'
+        );
+
+        expect(store.vodStreams()).toEqual(vodItems);
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'ready',
+            vod: 'ready',
+            series: 'loading',
+        });
+        expect(store.isContentInitialized()).toBe(false);
+
+        pending.series.resolve(seriesItems);
+        await initialization;
+
+        expect(store.serialStreams()).toEqual(seriesItems);
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'ready',
+            vod: 'ready',
+            series: 'ready',
+        });
+        expect(store.isContentInitialized()).toBe(true);
+    });
+
+    it('loads categories before starting content import', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockResolvedValue([]);
+
+        const initialization = store.initializeContent();
+        await Promise.resolve();
+
+        expect(dataSource.getCategories).toHaveBeenCalledTimes(3);
+        expect(dataSource.getContent).not.toHaveBeenCalled();
+
+        pendingCategories.live.resolve([]);
+        pendingCategories.vod.resolve([]);
+        pendingCategories.series.resolve([]);
+
+        await initialization;
+
+        expect(dataSource.getContent).toHaveBeenCalledTimes(3);
+    });
+
+    it('reuses cached content without clearing the playlist import cache', async () => {
+        dataSource.getCategories.mockResolvedValue([]);
+        dataSource.getContent.mockResolvedValue([]);
+
+        const initialization = store.initializeContent();
+        await Promise.resolve();
+
+        expect(store.isImporting()).toBe(false);
+
+        await initialization;
+
+        expect(store.isImporting()).toBe(false);
+        expect(store.isContentInitialized()).toBe(true);
+        expect(store.contentInitBlockReason()).toBeNull();
+        expect(databaseService.clearXtreamImportCache).not.toHaveBeenCalled();
+        expect(databaseService.setXtreamImportStatus).not.toHaveBeenCalledWith(
+            PLAYLIST.id,
+            expect.anything(),
+            'importing'
+        );
+    });
+
+    it('reports offline cache availability only when every import type is completed and cached', async () => {
+        databaseService.getXtreamImportStatus
+            .mockResolvedValueOnce('completed')
+            .mockResolvedValueOnce('completed')
+            .mockResolvedValueOnce('completed');
+        dataSource.hasCategories
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(true);
+        dataSource.hasContent
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(true);
+
+        await expect(store.hasUsableOfflineCache()).resolves.toBe(true);
+
+        expect(databaseService.getXtreamImportStatus).toHaveBeenNthCalledWith(
+            1,
+            PLAYLIST.id,
+            'live'
+        );
+        expect(databaseService.getXtreamImportStatus).toHaveBeenNthCalledWith(
+            2,
+            PLAYLIST.id,
+            'movie'
+        );
+        expect(databaseService.getXtreamImportStatus).toHaveBeenNthCalledWith(
+            3,
+            PLAYLIST.id,
+            'series'
+        );
+    });
+
+    it('treats partial cache as unusable for offline initialization', async () => {
+        databaseService.getXtreamImportStatus
+            .mockResolvedValueOnce('completed')
+            .mockResolvedValueOnce('completed')
+            .mockResolvedValueOnce('completed');
+        dataSource.hasCategories
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(true);
+        dataSource.hasContent
+            .mockResolvedValueOnce(true)
+            .mockResolvedValueOnce(false)
+            .mockResolvedValueOnce(true);
+
+        await expect(store.hasUsableOfflineCache()).resolves.toBe(false);
+    });
+
+    it('ignores concurrent initializeContent calls while an import is already running', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockResolvedValue([]);
+
+        const firstInitialization = store.initializeContent();
+        const secondInitialization = store.initializeContent();
+        await Promise.resolve();
+
+        expect(store.activeImportSessionId()).toBe('xtream-import-session');
+        expect(dataSource.getCategories).toHaveBeenCalledTimes(3);
+        expect(dataSource.getContent).not.toHaveBeenCalled();
+
+        pendingCategories.live.resolve([]);
+        pendingCategories.vod.resolve([]);
+        pendingCategories.series.resolve([]);
+
+        await Promise.all([firstInitialization, secondInitialization]);
+
+        expect(dataSource.getCategories).toHaveBeenCalledTimes(3);
+        expect(dataSource.getContent).toHaveBeenCalledTimes(3);
+    });
+
+    it('blocks auto restart after cancelling during category loading until retry is explicit', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockResolvedValue([]);
+
+        const initialization = store.initializeContent();
+        await waitForCondition(() => Boolean(store.activeImportSessionId()));
+
+        await store.cancelImport();
+
+        expect(store.isCancellingImport()).toBe(true);
+        expect(store.contentInitBlockReason()).toBe('cancelled');
+        expect(databaseService.cancelOperation).not.toHaveBeenCalled();
+        expect(xtreamApiService.cancelSession).toHaveBeenCalledWith(
+            'xtream-import-session'
+        );
+
+        pendingCategories.live.reject(createAbortError());
+        pendingCategories.vod.reject(createAbortError());
+        pendingCategories.series.reject(createAbortError());
+
+        await expect(initialization).resolves.toBeUndefined();
+
+        expect(store.isImporting()).toBe(false);
+        expect(store.isCancellingImport()).toBe(false);
+        expect(store.isContentInitialized()).toBe(false);
+        expect(store.contentInitBlockReason()).toBe('cancelled');
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'idle',
+            vod: 'idle',
+            series: 'idle',
+        });
+
+        await store.initializeContent();
+
+        expect(dataSource.getCategories).toHaveBeenCalledTimes(3);
+        expect(dataSource.getContent).not.toHaveBeenCalled();
+
+        dataSource.getCategories.mockResolvedValue([]);
+        dataSource.getContent.mockResolvedValue([]);
+
+        await store.retryContentInitialization();
+
+        expect(checkPortalStatusMock).toHaveBeenCalledTimes(1);
+        expect(store.contentInitBlockReason()).toBeNull();
+        expect(store.isContentInitialized()).toBe(true);
+        expect(dataSource.getCategories).toHaveBeenCalledTimes(6);
+        expect(dataSource.getContent).toHaveBeenCalledTimes(3);
+    });
+
+    it('stops before content fetch if cancel lands between categories and content phases', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockResolvedValue([]);
+
+        const initialization = store.initializeContent();
+        await waitForCondition(() => Boolean(store.activeImportSessionId()));
+
+        pendingCategories.live.resolve([]);
+        pendingCategories.vod.resolve([]);
+        pendingCategories.series.resolve([]);
+
+        await store.cancelImport();
+        await expect(initialization).resolves.toBeUndefined();
+
+        expect(store.contentInitBlockReason()).toBe('cancelled');
+        expect(store.isContentInitialized()).toBe(false);
+        expect(dataSource.getContent).not.toHaveBeenCalled();
+    });
+
+    it('keeps the blocked state when retry finds a non-active portal status', async () => {
+        checkPortalStatusMock.mockResolvedValue('expired');
+        store.setContentInitBlockReason('cancelled');
+
+        await store.retryContentInitialization();
+
+        expect(checkPortalStatusMock).toHaveBeenCalledTimes(1);
+        expect(store.contentInitBlockReason()).toBe('expired');
+        expect(store.isContentInitialized()).toBe(false);
+        expect(dataSource.getCategories).not.toHaveBeenCalled();
+        expect(dataSource.getContent).not.toHaveBeenCalled();
+    });
+
+    it('keeps a cancelled block sticky until retry or reset clears it', async () => {
+        store.setContentInitBlockReason('cancelled');
+
+        store.setContentInitBlockReason(null);
+
+        expect(store.contentInitBlockReason()).toBe('cancelled');
+
+        dataSource.getCategories.mockResolvedValue([]);
+        dataSource.getContent.mockResolvedValue([]);
+
+        await store.retryContentInitialization();
+
+        expect(store.contentInitBlockReason()).toBeNull();
+        expect(store.isContentInitialized()).toBe(true);
+    });
+
+    it('cancels active imports and clears stale progress after worker aborts', async () => {
+        const pendingCategories = {
+            live: createDeferred<any[]>(),
+            vod: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+        const pending = {
+            live: createDeferred<any[]>(),
+            movie: createDeferred<any[]>(),
+            series: createDeferred<any[]>(),
+        };
+        const optionsByType = new Map<
+            ContentType,
+            { onEvent?: (event: any) => void; operationId?: string } | undefined
+        >();
+
+        dataSource.getCategories.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: 'live' | 'vod' | 'series'
+            ) => pendingCategories[type].promise
+        );
+        dataSource.getContent.mockImplementation(
+            (
+                _playlistId: string,
+                _credentials: unknown,
+                type: ContentType,
+                onProgress?: (count: number) => void,
+                onTotal?: (total: number) => void,
+                options?: { onEvent?: (event: any) => void }
+            ) => {
+                optionsByType.set(type, options);
+                onTotal?.(5);
+                const operationId = options?.operationId ?? `${type}-op`;
+                options?.onEvent?.({
+                    operation: 'save-content',
+                    operationId,
+                    status: 'started',
+                    phase: 'saving-content',
+                });
+                onProgress?.(2);
+                options?.onEvent?.({
+                    operation: 'save-content',
+                    operationId,
+                    status: 'progress',
+                    phase: 'saving-content',
+                    current: 2,
+                    total: 5,
+                });
+
+                return pending[type].promise;
+            }
+        );
+
+        const initialization = store.initializeContent();
+        await Promise.resolve();
+
+        pendingCategories.live.resolve([]);
+        pendingCategories.vod.resolve([]);
+        pendingCategories.series.resolve([]);
+        await waitForCondition(
+            () => store.activeImportOperationIds().length === 1
+        );
+        const liveOperationId =
+            optionsByType.get('live')?.operationId ?? 'live-op';
+        expect(store.activeImportContentType()).toBe('live');
+        expect(store.activeImportCurrentCount()).toBe(2);
+        expect(store.activeImportTotalCount()).toBe(5);
+
+        await store.cancelImport();
+
+        expect(store.isCancellingImport()).toBe(true);
+        expect(databaseService.cancelOperation).toHaveBeenCalledTimes(1);
+        expect(databaseService.cancelOperation).toHaveBeenCalledWith(
+            liveOperationId
+        );
+        expect(xtreamApiService.cancelSession).toHaveBeenCalledWith(
+            'xtream-import-session'
+        );
+
+        optionsByType.get('live')?.onEvent?.({
+            operation: 'save-content',
+            operationId: liveOperationId,
+            status: 'cancelled',
+            phase: 'saving-content',
+        });
+        pending.live.reject(createAbortError());
+
+        await expect(initialization).resolves.toBeUndefined();
+
+        expect(store.isImporting()).toBe(false);
+        expect(store.isCancellingImport()).toBe(false);
+        expect(store.isContentInitialized()).toBe(false);
+        expect(store.contentInitBlockReason()).toBe('cancelled');
+        expect(store.contentLoadStateByType()).toEqual({
+            live: 'idle',
+            vod: 'idle',
+            series: 'idle',
+        });
+        expect(store.activeImportOperationIds()).toEqual([]);
+        expect(store.importPhase()).toBeNull();
+        expect(store.activeImportContentType()).toBeNull();
+        expect(store.activeImportCurrentCount()).toBe(0);
+        expect(store.activeImportTotalCount()).toBe(0);
+        expect(store.importCount()).toBe(0);
+        expect(store.itemsToImport()).toBe(0);
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-content.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-content.feature.ts
new file mode 100644
index 0000000..dceaca4
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-content.feature.ts
@@ -0,0 +1,1008 @@
+import { computed, inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withComputed,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import {
+    XtreamCategory,
+    XtreamLiveStream,
+    XtreamSerieItem,
+    XtreamVodStream,
+} from 'shared-interfaces';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import {
+    DatabaseService,
+    DbOperationEvent,
+    isDbAbortError,
+    XtreamPendingRestoreService,
+    XtreamImportStatus,
+} from 'services';
+import {
+    DbCategoryType,
+    XTREAM_DATA_SOURCE,
+    XtreamCategoryFromDb,
+} from '../../data-sources/xtream-data-source.interface';
+import {
+    XtreamApiService,
+    XtreamCredentials,
+} from '../../services/xtream-api.service';
+import {
+    ContentType,
+    PortalStatusType,
+    XtreamContentInitBlockReason,
+    XtreamContentLoadState,
+    XtreamContentLoadStateByType,
+} from '../../xtream-state';
+
+const cancelledPlaylistInitializationLockKey = (playlistId: string): string =>
+    `xtream-init-cancelled:${playlistId}`;
+
+const hasCancelledPlaylistInitializationLock = (
+    playlistId: string
+): boolean => {
+    try {
+        return (
+            localStorage.getItem(
+                cancelledPlaylistInitializationLockKey(playlistId)
+            ) === 'true'
+        );
+    } catch {
+        return false;
+    }
+};
+
+const setCancelledPlaylistInitializationLock = (playlistId: string): void => {
+    try {
+        localStorage.setItem(
+            cancelledPlaylistInitializationLockKey(playlistId),
+            'true'
+        );
+    } catch {
+        // Ignore storage write failures; runtime state still carries the block.
+    }
+};
+
+const clearCancelledPlaylistInitializationLock = (playlistId: string): void => {
+    try {
+        localStorage.removeItem(
+            cancelledPlaylistInitializationLockKey(playlistId)
+        );
+    } catch {
+        // Ignore storage write failures; retry still clears the in-memory block.
+    }
+};
+
+/**
+ * Content state for managing categories and streams
+ */
+export interface ContentState {
+    liveCategories: (XtreamCategory | XtreamCategoryFromDb)[];
+    vodCategories: (XtreamCategory | XtreamCategoryFromDb)[];
+    serialCategories: (XtreamCategory | XtreamCategoryFromDb)[];
+    liveStreams: XtreamLiveStream[];
+    vodStreams: XtreamVodStream[];
+    serialStreams: XtreamSerieItem[];
+    isLoadingCategories: boolean;
+    isLoadingContent: boolean;
+    isImporting: boolean;
+    contentLoadStateByType: XtreamContentLoadStateByType;
+    isCancellingImport: boolean;
+    importCount: number;
+    importPhase: string | null;
+    itemsToImport: number;
+    activeImportContentType: ContentType | null;
+    activeImportCurrentCount: number;
+    activeImportTotalCount: number;
+    activeImportSessionId: string | null;
+    activeImportOperationIds: string[];
+    isContentInitialized: boolean;
+    contentInitBlockReason: XtreamContentInitBlockReason | null;
+}
+
+/**
+ * Initial content state
+ */
+const initialContentLoadStateByType: XtreamContentLoadStateByType = {
+    live: 'idle',
+    vod: 'idle',
+    series: 'idle',
+};
+
+const initialContentState: ContentState = {
+    liveCategories: [],
+    vodCategories: [],
+    serialCategories: [],
+    liveStreams: [],
+    vodStreams: [],
+    serialStreams: [],
+    isLoadingCategories: false,
+    isLoadingContent: false,
+    isImporting: false,
+    contentLoadStateByType: { ...initialContentLoadStateByType },
+    isCancellingImport: false,
+    importCount: 0,
+    importPhase: null,
+    itemsToImport: 0,
+    activeImportContentType: null,
+    activeImportCurrentCount: 0,
+    activeImportTotalCount: 0,
+    activeImportSessionId: null,
+    activeImportOperationIds: [],
+    isContentInitialized: false,
+    contentInitBlockReason: null,
+};
+
+/**
+ * Content feature store for managing Xtream categories and streams.
+ * Handles:
+ * - Fetching categories (live, vod, series)
+ * - Fetching content/streams (live, movies, series)
+ * - Import progress tracking
+ */
+export function withContent() {
+    const logger = createLogger('withContent');
+    type ParentPortalStoreLike = {
+        currentPlaylist?: () => {
+            password: string;
+            serverUrl: string;
+            username: string;
+        } | null;
+        playlistId?: () => string | null;
+        portalStatus?: () => PortalStatusType;
+        checkPortalStatus?: () => Promise<PortalStatusType>;
+    };
+
+    return signalStoreFeature(
+        withState<ContentState>(initialContentState),
+
+        withComputed((store) => ({
+            /**
+             * Get categories by content type
+             */
+            getCategoriesByType: computed(() => {
+                return (type: ContentType) => {
+                    switch (type) {
+                        case 'live':
+                            return store.liveCategories();
+                        case 'vod':
+                            return store.vodCategories();
+                        case 'series':
+                            return store.serialCategories();
+                    }
+                };
+            }),
+
+            /**
+             * Get streams/content by type
+             */
+            getContentByType: computed(() => {
+                return (type: ContentType) => {
+                    switch (type) {
+                        case 'live':
+                            return store.liveStreams();
+                        case 'vod':
+                            return store.vodStreams();
+                        case 'series':
+                            return store.serialStreams();
+                    }
+                };
+            }),
+
+            /**
+             * Get import count
+             */
+            getImportCount: computed(() => store.importCount()),
+
+            /**
+             * Check if content is being imported
+             */
+            isContentImporting: computed(() => store.isImporting()),
+
+            /**
+             * Current import phase label key source
+             */
+            currentImportPhase: computed(() => store.importPhase()),
+        })),
+
+        withMethods((store) => {
+            const dataSource = inject(XTREAM_DATA_SOURCE);
+            const databaseService = inject(DatabaseService);
+            const pendingRestoreService = inject(XtreamPendingRestoreService);
+            const xtreamApiService = inject(XtreamApiService);
+            const importTypes: ContentType[] = ['live', 'vod', 'series'];
+            let activeInitializationPromise: Promise<void> | null = null;
+
+            const updateContentTypeLoadState = (
+                type: ContentType,
+                loadState: XtreamContentLoadState
+            ): void => {
+                patchState(store, (state) => ({
+                    contentLoadStateByType: {
+                        ...state.contentLoadStateByType,
+                        [type]: loadState,
+                    },
+                }));
+            };
+
+            const setActiveImportProgress = (
+                type: ContentType | null,
+                current = 0,
+                total = 0
+            ): void => {
+                patchState(store, {
+                    activeImportContentType: type,
+                    activeImportCurrentCount: current,
+                    activeImportTotalCount: total,
+                });
+            };
+
+            const resolveInitBlockReason = (
+                portalStatus: PortalStatusType | null | undefined
+            ): XtreamContentInitBlockReason | null => {
+                switch (portalStatus) {
+                    case 'expired':
+                    case 'inactive':
+                    case 'unavailable':
+                        return portalStatus;
+                    default:
+                        return null;
+                }
+            };
+
+            const getPortalStore = (): ParentPortalStoreLike =>
+                store as ParentPortalStoreLike;
+
+            const createImportAbortError = (): Error => {
+                const error = new Error('Xtream import cancelled');
+                error.name = 'AbortError';
+                return error;
+            };
+
+            const throwIfImportCancelled = (
+                expectedImportSessionId?: string | null
+            ): void => {
+                if (
+                    store.contentInitBlockReason() === 'cancelled' ||
+                    (expectedImportSessionId != null &&
+                        store.activeImportSessionId() !==
+                            expectedImportSessionId)
+                ) {
+                    throw createImportAbortError();
+                }
+            };
+
+            /**
+             * Helper to get credentials from parent store
+             * This will be provided by the parent store's currentPlaylist
+             */
+            const getCredentialsFromStore = (): {
+                playlistId: string;
+                credentials: XtreamCredentials;
+            } | null => {
+                // Access parent store state (currentPlaylist is from withPortal)
+                const storeAny = getPortalStore();
+                const playlist = storeAny.currentPlaylist?.();
+                const playlistId = storeAny.playlistId?.();
+
+                if (!playlist || !playlistId) {
+                    return null;
+                }
+
+                return {
+                    playlistId,
+                    credentials: {
+                        serverUrl: playlist.serverUrl,
+                        username: playlist.username,
+                        password: playlist.password,
+                    },
+                };
+            };
+
+            const hasCompletedOfflineCache = async (
+                playlistId: string
+            ): Promise<boolean> => {
+                const contentTypes: Array<{
+                    categoryType: DbCategoryType;
+                    contentType: 'live' | 'movie' | 'series';
+                }> = [
+                    { categoryType: 'live', contentType: 'live' },
+                    { categoryType: 'movies', contentType: 'movie' },
+                    { categoryType: 'series', contentType: 'series' },
+                ];
+
+                const cacheChecks = await Promise.all(
+                    contentTypes.map(async ({ categoryType, contentType }) => {
+                        const [importStatus, hasCategories, hasContent] =
+                            await Promise.all([
+                                databaseService.getXtreamImportStatus(
+                                    playlistId,
+                                    contentType
+                                ),
+                                dataSource.hasCategories(
+                                    playlistId,
+                                    categoryType
+                                ),
+                                dataSource.hasContent(playlistId, contentType),
+                            ]);
+
+                        return (
+                            importStatus === 'completed' &&
+                            hasCategories &&
+                            hasContent
+                        );
+                    })
+                );
+
+                return cacheChecks.every(Boolean);
+            };
+
+            const trackImportEvent = (event: DbOperationEvent): void => {
+                const operationId = event.operationId;
+
+                if (
+                    store.contentInitBlockReason() === 'cancelled' &&
+                    event.status !== 'cancelled' &&
+                    event.status !== 'error' &&
+                    event.status !== 'completed'
+                ) {
+                    return;
+                }
+
+                if (event.status === 'started' || event.status === 'progress') {
+                    patchState(store, (state) => ({
+                        isImporting: true,
+                        importPhase: event.phase ?? state.importPhase,
+                    }));
+                }
+
+                patchState(store, (state) => ({
+                    importPhase: event.phase ?? state.importPhase,
+                    activeImportOperationIds:
+                        operationId == null
+                            ? state.activeImportOperationIds
+                            : event.status === 'completed' ||
+                                event.status === 'cancelled' ||
+                                event.status === 'error'
+                              ? state.activeImportOperationIds.filter(
+                                    (id) => id !== operationId
+                                )
+                              : state.activeImportOperationIds.includes(
+                                      operationId
+                                  )
+                                    ? state.activeImportOperationIds
+                                : [
+                                      ...state.activeImportOperationIds,
+                                      operationId,
+                                  ],
+                    isCancellingImport: state.isCancellingImport,
+                }));
+
+                if (
+                    event.operation === 'save-content' &&
+                    store.activeImportContentType()
+                ) {
+                    patchState(store, (state) => ({
+                        activeImportCurrentCount:
+                            event.current ?? state.activeImportCurrentCount,
+                        activeImportTotalCount:
+                            event.total ?? state.activeImportTotalCount,
+                    }));
+                }
+            };
+
+            const registerImportOperation = (operationId: string): void => {
+                patchState(store, (state) => ({
+                    activeImportOperationIds:
+                        state.activeImportOperationIds.includes(operationId)
+                            ? state.activeImportOperationIds
+                            : [...state.activeImportOperationIds, operationId],
+                }));
+            };
+
+            const setImportStatus = async (
+                playlistId: string,
+                type: ContentType,
+                status: XtreamImportStatus
+            ): Promise<void> => {
+                const importType = type === 'vod' ? 'movie' : type;
+                await databaseService.setXtreamImportStatus(
+                    playlistId,
+                    importType,
+                    status
+                );
+            };
+
+            const clearImportCache = async (
+                playlistId: string,
+                type: ContentType
+            ): Promise<void> => {
+                const importType = type === 'vod' ? 'movie' : type;
+                await databaseService.clearXtreamImportCache(
+                    playlistId,
+                    importType
+                );
+            };
+
+            const finalizePendingImportTypes = async (
+                playlistId: string,
+                completedTypes: Set<ContentType>,
+                status: XtreamImportStatus
+            ): Promise<void> => {
+                for (const type of importTypes) {
+                    if (completedTypes.has(type)) {
+                        continue;
+                    }
+
+                    await setImportStatus(playlistId, type, status);
+                    await clearImportCache(playlistId, type);
+                }
+            };
+
+            const finalizePendingContentLoadStates = (
+                completedTypes: Set<ContentType>,
+                loadState: XtreamContentLoadState
+            ): void => {
+                patchState(store, (state) => {
+                    const nextLoadStates = {
+                        ...state.contentLoadStateByType,
+                    };
+
+                    for (const type of importTypes) {
+                        if (completedTypes.has(type)) {
+                            continue;
+                        }
+
+                        nextLoadStates[type] = loadState;
+                    }
+
+                    return {
+                        contentLoadStateByType: nextLoadStates,
+                    };
+                });
+            };
+
+            const executeContentInitialization = async (
+                ignoreBlockedState = false
+            ): Promise<void> => {
+                const ctx = getCredentialsFromStore();
+                if (!ctx) return;
+
+                if (
+                    !ignoreBlockedState &&
+                    hasCancelledPlaylistInitializationLock(ctx.playlistId)
+                ) {
+                    patchState(store, {
+                        contentInitBlockReason: 'cancelled',
+                    });
+                    return;
+                }
+
+                // Skip duplicate route-session triggers while initialization is
+                // already running. The workspace session currently syncs from
+                // multiple entry points during bootstrap, and without this guard
+                // Electron can duplicate the same Xtream load work.
+                if (
+                    (!ignoreBlockedState && store.contentInitBlockReason()) ||
+                    store.isCancellingImport() ||
+                    store.isContentInitialized() ||
+                    store.activeImportSessionId()
+                ) {
+                    return;
+                }
+
+                const importSessionId = databaseService.createOperationId(
+                    'xtream-import-session'
+                );
+
+                patchState(store, {
+                    isImporting: false,
+                    isCancellingImport: false,
+                    importCount: 0,
+                    importPhase: null,
+                    itemsToImport: 0,
+                    activeImportContentType: null,
+                    activeImportCurrentCount: 0,
+                    activeImportTotalCount: 0,
+                    activeImportSessionId: importSessionId,
+                    activeImportOperationIds: [],
+                    contentLoadStateByType: {
+                        live: 'loading',
+                        vod: 'loading',
+                        series: 'loading',
+                    },
+                });
+
+                const completedTypes = new Set<ContentType>();
+
+                try {
+                    // Electron content persistence maps remote category IDs
+                    // to internal DB category rows, so categories must exist
+                    // before content import starts.
+                    await methods.fetchAllCategories({
+                        sessionId: importSessionId,
+                    });
+                    throwIfImportCancelled(importSessionId);
+                    await methods.fetchAllContent({
+                        importSessionId,
+                        sessionId: importSessionId,
+                        completedTypes,
+                    });
+                    throwIfImportCancelled(importSessionId);
+
+                    // Restore user data if needed
+                    const restoreData = pendingRestoreService.get(
+                        ctx.playlistId
+                    );
+                    if (restoreData) {
+                        try {
+                            throwIfImportCancelled(importSessionId);
+                            const restoreOperationId =
+                                databaseService.createOperationId(
+                                    'xtream-restore'
+                                );
+                            registerImportOperation(restoreOperationId);
+                            patchState(store, {
+                                importPhase: 'restoring-favorites',
+                            });
+                            await dataSource.restoreUserData(
+                                ctx.playlistId,
+                                restoreData,
+                                {
+                                    onEvent: trackImportEvent,
+                                    operationId: restoreOperationId,
+                                }
+                            );
+                            throwIfImportCancelled(importSessionId);
+                            pendingRestoreService.clear(ctx.playlistId);
+                        } catch (err) {
+                            if (!isDbAbortError(err)) {
+                                logger.error('Error restoring user data', err);
+                            }
+                        }
+                    }
+
+                    throwIfImportCancelled(importSessionId);
+
+                    // Mark as initialized so next routings won't re-trigger it
+                    clearCancelledPlaylistInitializationLock(ctx.playlistId);
+                    patchState(store, {
+                        isContentInitialized: true,
+                        contentInitBlockReason: null,
+                    });
+                } catch (error) {
+                    if (store.isImporting()) {
+                        await finalizePendingImportTypes(
+                            ctx.playlistId,
+                            completedTypes,
+                            isDbAbortError(error) ? 'cancelled' : 'failed'
+                        );
+                    }
+
+                    finalizePendingContentLoadStates(
+                        completedTypes,
+                        isDbAbortError(error) ? 'idle' : 'error'
+                    );
+
+                    if (isDbAbortError(error)) {
+                        patchState(store, (state) => ({
+                            contentInitBlockReason:
+                                state.contentInitBlockReason ?? 'cancelled',
+                        }));
+                    } else {
+                        patchState(store, {
+                            contentInitBlockReason:
+                                resolveInitBlockReason(
+                                    getPortalStore().portalStatus?.()
+                                ) ?? 'error',
+                        });
+                        logger.error('Error initializing content', error);
+                    }
+                } finally {
+                    patchState(store, {
+                        isImporting: false,
+                        isCancellingImport: false,
+                        importCount: 0,
+                        importPhase: null,
+                        itemsToImport: 0,
+                        activeImportContentType: null,
+                        activeImportCurrentCount: 0,
+                        activeImportTotalCount: 0,
+                        activeImportSessionId: null,
+                        activeImportOperationIds: [],
+                    });
+                }
+            };
+
+            const runContentInitialization = async (
+                ignoreBlockedState = false
+            ): Promise<void> => {
+                if (activeInitializationPromise) {
+                    return activeInitializationPromise;
+                }
+
+                const initializationPromise = executeContentInitialization(
+                    ignoreBlockedState
+                ).finally(() => {
+                    if (activeInitializationPromise === initializationPromise) {
+                        activeInitializationPromise = null;
+                    }
+                });
+
+                activeInitializationPromise = initializationPromise;
+                return initializationPromise;
+            };
+
+            const methods = {
+                setContentInitBlockReason(
+                    reason: XtreamContentInitBlockReason | null
+                ): void {
+                    patchState(store, (state) => ({
+                        contentInitBlockReason:
+                            reason === null &&
+                            state.contentInitBlockReason === 'cancelled'
+                                ? state.contentInitBlockReason
+                                : reason,
+                    }));
+                },
+
+                /**
+                 * Fetch all categories in parallel
+                 */
+                async fetchAllCategories(options?: {
+                    sessionId?: string;
+                }): Promise<void> {
+                    const ctx = getCredentialsFromStore();
+                    if (!ctx) return;
+
+                    patchState(store, { isLoadingCategories: true });
+
+                    try {
+                        const [live, vod, series] = await Promise.all([
+                            dataSource.getCategories(
+                                ctx.playlistId,
+                                ctx.credentials,
+                                'live',
+                                {
+                                    sessionId: options?.sessionId,
+                                    onPhaseChange: (phase) =>
+                                        patchState(store, {
+                                            isImporting: true,
+                                            importPhase: phase,
+                                        }),
+                                }
+                            ),
+                            dataSource.getCategories(
+                                ctx.playlistId,
+                                ctx.credentials,
+                                'vod',
+                                {
+                                    sessionId: options?.sessionId,
+                                    onPhaseChange: (phase) =>
+                                        patchState(store, {
+                                            isImporting: true,
+                                            importPhase: phase,
+                                        }),
+                                }
+                            ),
+                            dataSource.getCategories(
+                                ctx.playlistId,
+                                ctx.credentials,
+                                'series',
+                                {
+                                    sessionId: options?.sessionId,
+                                    onPhaseChange: (phase) =>
+                                        patchState(store, {
+                                            isImporting: true,
+                                            importPhase: phase,
+                                        }),
+                                }
+                            ),
+                        ]);
+
+                        patchState(store, {
+                            liveCategories: live,
+                            vodCategories: vod,
+                            serialCategories: series,
+                            isLoadingCategories: false,
+                        });
+                    } catch (error) {
+                        if (!isDbAbortError(error)) {
+                            logger.error('Error fetching categories', error);
+                        }
+                        patchState(store, { isLoadingCategories: false });
+                        throw error;
+                    }
+                },
+
+                /**
+                 * Fetch all content/streams with shared progress tracking
+                 */
+                async fetchAllContent(options?: {
+                    importSessionId?: string;
+                    sessionId?: string;
+                    completedTypes?: Set<ContentType>;
+                }): Promise<void> {
+                    const ctx = getCredentialsFromStore();
+                    if (!ctx) return;
+
+                    patchState(store, { isLoadingContent: true });
+
+                    // Track combined progress across all content types
+                    let totalItems = 0;
+                    let importedItems = 0;
+
+                    const onTotal = (count: number) => {
+                        totalItems += count;
+                        patchState(store, {
+                            itemsToImport: totalItems,
+                            activeImportTotalCount: count,
+                        });
+                    };
+
+                    const onProgress = (count: number) => {
+                        importedItems += count;
+                        patchState(store, (state) => ({
+                            importCount: importedItems,
+                            activeImportCurrentCount:
+                                state.activeImportCurrentCount + count,
+                        }));
+                    };
+
+                    try {
+                        throwIfImportCancelled(options?.importSessionId);
+                        setActiveImportProgress('live');
+                        const liveOperationId =
+                            databaseService.createOperationId(
+                                'db-save-content'
+                            );
+                        registerImportOperation(liveOperationId);
+
+                        const live = (await dataSource.getContent(
+                            ctx.playlistId,
+                            ctx.credentials,
+                            'live',
+                            onProgress,
+                            onTotal,
+                            {
+                                operationId: liveOperationId,
+                                sessionId: options?.sessionId,
+                                onEvent: trackImportEvent,
+                                onPhaseChange: (phase) =>
+                                    patchState(store, {
+                                        isImporting: true,
+                                        importPhase: phase,
+                                    }),
+                            }
+                        )) as XtreamLiveStream[];
+                        throwIfImportCancelled(options?.importSessionId);
+                        await setImportStatus(
+                            ctx.playlistId,
+                            'live',
+                            'completed'
+                        );
+                        options?.completedTypes?.add('live');
+                        patchState(store, {
+                            liveStreams: live,
+                        });
+                        updateContentTypeLoadState('live', 'ready');
+
+                        throwIfImportCancelled(options?.importSessionId);
+                        setActiveImportProgress('vod');
+                        const vodOperationId =
+                            databaseService.createOperationId(
+                                'db-save-content'
+                            );
+                        registerImportOperation(vodOperationId);
+                        const vod = (await dataSource.getContent(
+                            ctx.playlistId,
+                            ctx.credentials,
+                            'movie',
+                            onProgress,
+                            onTotal,
+                            {
+                                operationId: vodOperationId,
+                                sessionId: options?.sessionId,
+                                onEvent: trackImportEvent,
+                                onPhaseChange: (phase) =>
+                                    patchState(store, {
+                                        isImporting: true,
+                                        importPhase: phase,
+                                    }),
+                            }
+                        )) as XtreamVodStream[];
+                        throwIfImportCancelled(options?.importSessionId);
+                        await setImportStatus(
+                            ctx.playlistId,
+                            'vod',
+                            'completed'
+                        );
+                        options?.completedTypes?.add('vod');
+                        patchState(store, {
+                            vodStreams: vod,
+                        });
+                        updateContentTypeLoadState('vod', 'ready');
+
+                        throwIfImportCancelled(options?.importSessionId);
+                        setActiveImportProgress('series');
+                        const seriesOperationId =
+                            databaseService.createOperationId(
+                                'db-save-content'
+                            );
+                        registerImportOperation(seriesOperationId);
+                        const series = (await dataSource.getContent(
+                            ctx.playlistId,
+                            ctx.credentials,
+                            'series',
+                            onProgress,
+                            onTotal,
+                            {
+                                operationId: seriesOperationId,
+                                sessionId: options?.sessionId,
+                                onEvent: trackImportEvent,
+                                onPhaseChange: (phase) =>
+                                    patchState(store, {
+                                        isImporting: true,
+                                        importPhase: phase,
+                                    }),
+                            }
+                        )) as XtreamSerieItem[];
+                        throwIfImportCancelled(options?.importSessionId);
+                        await setImportStatus(
+                            ctx.playlistId,
+                            'series',
+                            'completed'
+                        );
+                        options?.completedTypes?.add('series');
+                        patchState(store, {
+                            serialStreams: series,
+                            isLoadingContent: false,
+                        });
+                        updateContentTypeLoadState('series', 'ready');
+                    } catch (error) {
+                        if (!isDbAbortError(error)) {
+                            logger.error('Error fetching content', error);
+                        }
+                        patchState(store, { isLoadingContent: false });
+                        throw error;
+                    }
+                },
+
+                /**
+                 * Initialize content (fetch categories and content)
+                 */
+                async initializeContent(): Promise<void> {
+                    await runContentInitialization();
+                },
+
+                async hasUsableOfflineCache(): Promise<boolean> {
+                    const ctx = getCredentialsFromStore();
+                    if (!ctx) {
+                        return false;
+                    }
+
+                    return hasCompletedOfflineCache(ctx.playlistId);
+                },
+
+                async retryContentInitialization(): Promise<void> {
+                    const portalStatus =
+                        (await getPortalStore().checkPortalStatus?.()) ??
+                        getPortalStore().portalStatus?.() ??
+                        'unavailable';
+                    const blockReason = resolveInitBlockReason(portalStatus);
+
+                    if (blockReason) {
+                        patchState(store, {
+                            contentInitBlockReason: blockReason,
+                        });
+                        return;
+                    }
+
+                    patchState(store, {
+                        contentInitBlockReason: null,
+                        isContentInitialized: false,
+                    });
+                    const ctx = getCredentialsFromStore();
+                    if (ctx) {
+                        clearCancelledPlaylistInitializationLock(
+                            ctx.playlistId
+                        );
+                    }
+
+                    await runContentInitialization(true);
+                },
+
+                async cancelImport(): Promise<void> {
+                    const activeImportSessionId = store.activeImportSessionId();
+                    const activeImportOperationIds =
+                        store.activeImportOperationIds();
+
+                    if (!activeImportSessionId || store.isCancellingImport()) {
+                        return;
+                    }
+
+                    patchState(store, {
+                        isCancellingImport: true,
+                        contentInitBlockReason: 'cancelled',
+                        activeImportContentType: null,
+                        activeImportCurrentCount: 0,
+                        activeImportTotalCount: 0,
+                        activeImportSessionId: null,
+                    });
+                    const ctx = getCredentialsFromStore();
+                    if (ctx) {
+                        setCancelledPlaylistInitializationLock(ctx.playlistId);
+                    }
+
+                    await xtreamApiService.cancelSession(activeImportSessionId);
+
+                    await Promise.all(
+                        activeImportOperationIds.map((operationId) =>
+                            databaseService.cancelOperation(operationId)
+                        )
+                    );
+                },
+
+                /**
+                 * Reload categories from database (after visibility changes)
+                 */
+                async reloadCategories(): Promise<void> {
+                    const ctx = getCredentialsFromStore();
+                    if (!ctx) return;
+
+                    try {
+                        const [live, vod, series] = await Promise.all([
+                            dataSource.getCategories(
+                                ctx.playlistId,
+                                ctx.credentials,
+                                'live'
+                            ),
+                            dataSource.getCategories(
+                                ctx.playlistId,
+                                ctx.credentials,
+                                'vod'
+                            ),
+                            dataSource.getCategories(
+                                ctx.playlistId,
+                                ctx.credentials,
+                                'series'
+                            ),
+                        ]);
+
+                        patchState(store, {
+                            liveCategories: live,
+                            vodCategories: vod,
+                            serialCategories: series,
+                        });
+                    } catch (error) {
+                        logger.error('Error reloading categories', error);
+                    }
+                },
+
+                /**
+                 * Update import progress
+                 */
+                setImportProgress(count: number, total?: number): void {
+                    const updates: Partial<ContentState> = {
+                        importCount: count,
+                    };
+                    if (total !== undefined) {
+                        updates.itemsToImport = total;
+                    }
+                    patchState(store, updates);
+                },
+
+                /**
+                 * Reset content state
+                 */
+                resetContent(): void {
+                    patchState(store, initialContentState);
+                },
+            };
+
+            return methods;
+        })
+    );
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-epg.feature.spec.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-epg.feature.spec.ts
new file mode 100644
index 0000000..5b08585
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-epg.feature.spec.ts
@@ -0,0 +1,109 @@
+import { TestBed } from '@angular/core/testing';
+import { signalStore, withState } from '@ngrx/signals';
+import { DataService } from 'services';
+import { EpgItem } from 'shared-interfaces';
+import { XtreamApiService } from '../../services/xtream-api.service';
+import { withEpg } from './with-epg.feature';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+const PLAYLIST = {
+    id: 'playlist-1',
+    serverUrl: 'http://demo.example',
+    username: 'demo',
+    password: 'secret',
+};
+
+const TestEpgStore = signalStore(
+    withState({
+        currentPlaylist: PLAYLIST,
+        selectedItem: { xtream_id: 101 },
+    }),
+    withEpg()
+);
+
+function buildProgram(
+    title: string,
+    startTimestamp: number,
+    stopTimestamp: number
+): EpgItem {
+    return {
+        id: title,
+        epg_id: title,
+        title,
+        description: `${title} description`,
+        lang: 'en',
+        start: new Date(startTimestamp * 1000).toISOString(),
+        stop: new Date(stopTimestamp * 1000).toISOString(),
+        end: new Date(stopTimestamp * 1000).toISOString(),
+        channel_id: 'channel-101',
+        start_timestamp: String(startTimestamp),
+        stop_timestamp: String(stopTimestamp),
+    };
+}
+
+describe('withEpg', () => {
+    let store: InstanceType<typeof TestEpgStore>;
+    let xtreamApiService: {
+        getFullEpg: jest.Mock<Promise<EpgItem[]>, unknown[]>;
+        getShortEpg: jest.Mock<Promise<EpgItem[]>, unknown[]>;
+    };
+
+    beforeEach(() => {
+        xtreamApiService = {
+            getFullEpg: jest.fn(),
+            getShortEpg: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestEpgStore,
+                {
+                    provide: DataService,
+                    useValue: { isElectron: true },
+                },
+                {
+                    provide: XtreamApiService,
+                    useValue: xtreamApiService,
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestEpgStore);
+    });
+
+    it('loads the full electron epg and derives the current program from timestamps', async () => {
+        const now = Math.floor(Date.now() / 1000);
+        const programs = [
+            buildProgram('Past Show', now - 7200, now - 3600),
+            buildProgram('Current Show', now - 300, now + 1800),
+            buildProgram('Next Show', now + 1800, now + 3600),
+        ];
+        xtreamApiService.getFullEpg.mockResolvedValue(programs);
+
+        const result = await store.loadEpg();
+
+        expect(xtreamApiService.getFullEpg).toHaveBeenCalledWith(
+            {
+                serverUrl: 'http://demo.example',
+                username: 'demo',
+                password: 'secret',
+            },
+            101,
+            {
+                suppressErrorLog: true,
+            }
+        );
+        expect(result).toEqual(programs);
+        expect(store.epgItems()).toEqual(programs);
+        expect(store.currentEpgItem()).toEqual(programs[1]);
+        expect(store.isLoadingEpg()).toBe(false);
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-epg.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-epg.feature.ts
new file mode 100644
index 0000000..a4adcfc
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-epg.feature.ts
@@ -0,0 +1,208 @@
+import { computed, inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withComputed,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { EpgItem } from 'shared-interfaces';
+import { DataService } from 'services';
+import {
+    XtreamApiService,
+    XtreamCredentials,
+} from '../../services/xtream-api.service';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+/**
+ * EPG state for managing Electronic Program Guide data
+ */
+export interface EpgState {
+    epgItems: EpgItem[];
+    isLoadingEpg: boolean;
+}
+
+/**
+ * Initial EPG state
+ */
+const initialEpgState: EpgState = {
+    epgItems: [],
+    isLoadingEpg: false,
+};
+
+/**
+ * EPG feature store for managing Electronic Program Guide data.
+ * Handles:
+ * - Loading EPG for selected stream
+ * - Loading channel EPG for preview
+ */
+export function withEpg() {
+    const logger = createLogger('withEpg');
+    type ParentSelectionStoreLike = {
+        currentPlaylist?: () => {
+            password: string;
+            serverUrl: string;
+            username: string;
+        } | null;
+        selectedItem?: () => {
+            xtream_id?: number | null;
+        } | null;
+    };
+
+    return signalStoreFeature(
+        withState<EpgState>(initialEpgState),
+        withComputed((store) => ({
+            currentEpgItem: computed(() => {
+                const now = Date.now();
+                const items = [...store.epgItems()].sort(
+                    (left, right) =>
+                        getEpgTimestampMs(
+                            left.start,
+                            left.start_timestamp
+                        ) -
+                        getEpgTimestampMs(
+                            right.start,
+                            right.start_timestamp
+                        )
+                );
+
+                return (
+                    items.find((item) => {
+                        const start = getEpgTimestampMs(
+                            item.start,
+                            item.start_timestamp
+                        );
+                        const stop = getEpgTimestampMs(
+                            item.stop ?? item.end,
+                            item.stop_timestamp
+                        );
+                        return now >= start && now < stop;
+                    }) ?? null
+                );
+            }),
+        })),
+
+        withMethods((store) => {
+            const apiService = inject(XtreamApiService);
+            const dataService = inject(DataService);
+
+            /**
+             * Helper to get credentials from parent store
+             */
+            const getCredentialsFromStore = (): XtreamCredentials | null => {
+                const storeAny = store as ParentSelectionStoreLike;
+                const playlist = storeAny.currentPlaylist?.();
+
+                if (!playlist) {
+                    return null;
+                }
+
+                return {
+                    serverUrl: playlist.serverUrl,
+                    username: playlist.username,
+                    password: playlist.password,
+                };
+            };
+
+            return {
+                /**
+                 * Load EPG for the currently selected item
+                 */
+                async loadEpg(): Promise<EpgItem[]> {
+                    const credentials = getCredentialsFromStore();
+                    if (!credentials) {
+                        patchState(store, { epgItems: [] });
+                        return [];
+                    }
+
+                    // Access selected item from parent store (from withSelection)
+                    const storeAny = store as ParentSelectionStoreLike;
+                    const selectedItem = storeAny.selectedItem?.();
+
+                    if (!selectedItem?.xtream_id) {
+                        patchState(store, { epgItems: [] });
+                        return [];
+                    }
+
+                    patchState(store, { epgItems: [], isLoadingEpg: true });
+
+                    try {
+                        const epgItems = dataService.isElectron
+                            ? await apiService.getFullEpg(
+                                  credentials,
+                                  selectedItem.xtream_id,
+                                  {
+                                      suppressErrorLog: true,
+                                  }
+                              )
+                            : await apiService.getShortEpg(
+                                  credentials,
+                                  selectedItem.xtream_id,
+                                  10,
+                                  {
+                                      suppressErrorLog: true,
+                                  }
+                              );
+
+                        patchState(store, {
+                            epgItems,
+                            isLoadingEpg: false,
+                        });
+
+                        return epgItems;
+                    } catch (error) {
+                        logger.error('Error loading EPG', error);
+                        patchState(store, {
+                            epgItems: [],
+                            isLoadingEpg: false,
+                        });
+                        return [];
+                    }
+                },
+
+                /**
+                 * Load EPG for a specific channel (for preview)
+                 */
+                async loadChannelEpg(streamId: number): Promise<EpgItem[]> {
+                    const credentials = getCredentialsFromStore();
+                    if (!credentials) {
+                        return [];
+                    }
+
+                    try {
+                        return await apiService.getShortEpg(
+                            credentials,
+                            streamId,
+                            1,
+                            {
+                                suppressErrorLog: true,
+                            }
+                        );
+                    } catch (error) {
+                        logger.error('Error loading channel EPG', error);
+                        return [];
+                    }
+                },
+
+                /**
+                 * Clear EPG data
+                 */
+                clearEpg(): void {
+                    patchState(store, initialEpgState);
+                },
+            };
+        })
+    );
+}
+
+function getEpgTimestampMs(
+    dateValue: string | undefined,
+    unixTimestampValue: string | undefined
+): number {
+    const unixTimestamp = Number.parseInt(String(unixTimestampValue ?? ''), 10);
+    if (Number.isFinite(unixTimestamp) && unixTimestamp > 0) {
+        return unixTimestamp * 1000;
+    }
+
+    return Date.parse(String(dateValue ?? ''));
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-playback-positions.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-playback-positions.feature.ts
new file mode 100644
index 0000000..9b9db04
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-playback-positions.feature.ts
@@ -0,0 +1,359 @@
+import { inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withHooks,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { XtreamSerieEpisode } from 'shared-interfaces';
+import {
+    PlaybackPositionData,
+    XTREAM_DATA_SOURCE,
+} from '../../data-sources/xtream-data-source.interface';
+
+export interface PlaybackPositionsState {
+    playbackPositions: Map<string, PlaybackPositionData>; // key: `${contentType}_${xtreamId}`
+    seriesPositions: Map<number, PlaybackPositionData[]>; // key: seriesXtreamId
+}
+
+const initialState: PlaybackPositionsState = {
+    playbackPositions: new Map(),
+    seriesPositions: new Map(),
+};
+
+function parseDuration(duration: string | number): number {
+    if (typeof duration === 'number') return duration;
+    if (!duration) return 0;
+
+    // Check for "min" format (e.g. "45 min")
+    const minMatch = duration.match(/(\d+)\s*min/);
+    if (minMatch) {
+        return parseInt(minMatch[1], 10) * 60;
+    }
+
+    // Check for "h:m:s" or "m:s" format
+    if (duration.includes(':')) {
+        const parts = duration.split(':').map((p) => parseInt(p, 10));
+        if (parts.length === 3) {
+            return parts[0] * 3600 + parts[1] * 60 + parts[2];
+        } else if (parts.length === 2) {
+            return parts[0] * 60 + parts[1];
+        }
+    }
+
+    // Fallback: try parsing as simple number (seconds or minutes? assume minutes if < 1000, seconds otherwise?)
+    // Xtream usually returns seconds or "min" string
+    const num = parseInt(duration, 10);
+    if (!isNaN(num)) {
+        return num;
+    }
+
+    return 0;
+}
+
+export function withPlaybackPositions() {
+    return signalStoreFeature(
+        withState(initialState),
+
+        withMethods((store) => {
+            const dataSource = inject(XTREAM_DATA_SOURCE);
+
+            const getPositionKey = (type: string, id: number) =>
+                `${type}_${id}`;
+
+            return {
+                /**
+                 * Get progress percentage for display (0-100)
+                 */
+                getProgressPercent(
+                    contentXtreamId: number,
+                    contentType: 'vod' | 'episode'
+                ): number {
+                    const key = getPositionKey(contentType, contentXtreamId);
+                    const position = store.playbackPositions().get(key);
+
+                    if (!position || !position.durationSeconds) return 0;
+
+                    const percent =
+                        (position.positionSeconds / position.durationSeconds) *
+                        100;
+
+                    // If watched > 10s but percent < 1, return 1 to show visual progress
+                    if (position.positionSeconds > 10 && percent < 1) {
+                        return 1;
+                    }
+
+                    return Math.min(100, Math.round(percent));
+                },
+
+                /**
+                 * Check if content is considered "watched" (>90% complete)
+                 */
+                isWatched(
+                    contentXtreamId: number,
+                    contentType: 'vod' | 'episode'
+                ): boolean {
+                    return (
+                        this.getProgressPercent(
+                            contentXtreamId,
+                            contentType
+                        ) >= 90
+                    );
+                },
+
+                /**
+                 * Check if content is "in progress" (started but not finished)
+                 */
+                isInProgress(
+                    contentXtreamId: number,
+                    contentType: 'vod' | 'episode'
+                ): boolean {
+                    const key = getPositionKey(contentType, contentXtreamId);
+                    const position = store.playbackPositions().get(key);
+                    if (!position) return false;
+
+                    const percent = this.getProgressPercent(
+                        contentXtreamId,
+                        contentType
+                    );
+                    const inProgress =
+                        position.positionSeconds > 10 && percent < 90;
+                    return inProgress;
+                },
+
+                /**
+                 * Load all playback positions for the playlist (for grid view)
+                 */
+                async loadAllPositions(playlistId: string): Promise<void> {
+                    const positions = await dataSource.getAllPlaybackPositions(
+                        playlistId
+                    );
+
+                    const positionsMap = new Map<string, PlaybackPositionData>();
+                    const seriesMap = new Map<number, PlaybackPositionData[]>();
+
+                    positions.forEach((pos) => {
+                        const key = getPositionKey(
+                            pos.contentType,
+                            pos.contentXtreamId
+                        );
+                        positionsMap.set(key, pos);
+
+                        if (
+                            pos.contentType === 'episode' &&
+                            pos.seriesXtreamId
+                        ) {
+                            const existing =
+                                seriesMap.get(pos.seriesXtreamId) || [];
+                            existing.push(pos);
+                            seriesMap.set(pos.seriesXtreamId, existing);
+                        }
+                    });
+
+                    patchState(store, {
+                        playbackPositions: positionsMap,
+                        seriesPositions: seriesMap,
+                    });
+                },
+
+                /**
+                 * Check if a series has any started or watched episodes
+                 */
+                hasSeriesProgress(seriesXtreamId: number): boolean {
+                    const positions = store
+                        .seriesPositions()
+                        .get(seriesXtreamId);
+                    return positions !== undefined && positions.length > 0;
+                },
+
+                /**
+                 * Load positions for a VOD item
+                 */
+                async loadVodPosition(
+                    playlistId: string,
+                    vodXtreamId: number
+                ): Promise<void> {
+                    const position = await dataSource.getPlaybackPosition(
+                        playlistId,
+                        vodXtreamId,
+                        'vod'
+                    );
+
+                    if (position) {
+                        const key = getPositionKey('vod', vodXtreamId);
+                        const updated = new Map(store.playbackPositions());
+                        updated.set(key, position);
+                        patchState(store, { playbackPositions: updated });
+                    }
+                },
+
+                /**
+                 * Load all episode positions for a series
+                 */
+                async loadSeriesPositions(
+                    playlistId: string,
+                    seriesXtreamId: number
+                ): Promise<void> {
+                    const positions = await dataSource.getSeriesPlaybackPositions(
+                        playlistId,
+                        seriesXtreamId
+                    );
+
+                    const updated = new Map(store.seriesPositions());
+                    updated.set(seriesXtreamId, positions);
+                    patchState(store, { seriesPositions: updated });
+
+                    // Also populate individual positions map
+                    const positionsMap = new Map(store.playbackPositions());
+                    positions.forEach((pos) => {
+                        const key = getPositionKey(
+                            'episode',
+                            pos.contentXtreamId
+                        );
+                        positionsMap.set(key, pos);
+                    });
+                    patchState(store, { playbackPositions: positionsMap });
+                },
+
+                /**
+                 * Save playback position (called from MPV updates)
+                 */
+                async savePosition(
+                    playlistId: string,
+                    data: PlaybackPositionData
+                ): Promise<void> {
+                    await dataSource.savePlaybackPosition(playlistId, data);
+
+                    const key = getPositionKey(
+                        data.contentType,
+                        data.contentXtreamId
+                    );
+                    const updated = new Map(store.playbackPositions());
+                    updated.set(key, data);
+                    patchState(store, { playbackPositions: updated });
+                },
+
+                /**
+                 * Toggle watched status for an episode
+                 */
+                async toggleEpisodeWatched(
+                    playlistId: string,
+                    episode: XtreamSerieEpisode,
+                    seriesId: number
+                ): Promise<void> {
+                    const id = Number(episode.id);
+                    const isWatched = this.isWatched(id, 'episode');
+
+                    if (isWatched) {
+                        // Mark as unwatched
+                        await dataSource.clearPlaybackPosition(
+                            playlistId,
+                            id,
+                            'episode'
+                        );
+                        // Update state (remove from map)
+                        const key = getPositionKey('episode', id);
+                        const updated = new Map(store.playbackPositions());
+                        updated.delete(key);
+
+                        // Update series map
+                        const seriesMap = new Map(store.seriesPositions());
+                        const seriesEpisodes = seriesMap.get(seriesId) || [];
+                        const filteredEpisodes = seriesEpisodes.filter(
+                            (p) => p.contentXtreamId !== id
+                        );
+                        if (filteredEpisodes.length === 0) {
+                            seriesMap.delete(seriesId);
+                        } else {
+                            seriesMap.set(seriesId, filteredEpisodes);
+                        }
+
+                        patchState(store, {
+                            playbackPositions: updated,
+                            seriesPositions: seriesMap,
+                        });
+                    } else {
+                        // Mark as watched
+                        let duration = 0;
+                        const info = Array.isArray(episode.info)
+                            ? null
+                            : episode.info;
+
+                        if (info?.duration_secs) {
+                            duration = info.duration_secs;
+                        } else if (info?.duration) {
+                            duration = parseDuration(info.duration);
+                        }
+
+                        if (duration === 0) duration = 1; // Fallback
+
+                        // Setting position = duration indicates episode is fully watched
+                        const data: PlaybackPositionData = {
+                            contentXtreamId: id,
+                            contentType: 'episode',
+                            seriesXtreamId: seriesId,
+                            seasonNumber: Number(episode.season),
+                            episodeNumber: Number(episode.episode_num),
+                            positionSeconds: duration,
+                            durationSeconds: duration,
+                            playlistId,
+                            updatedAt: new Date().toISOString(),
+                        };
+
+                        // Use existing savePosition to handle state update and persistence
+                        // But we also need to update seriesPositions map which savePosition doesn't do for individual updates
+                        // actually savePosition only updates playbackPositions map.
+                        // We should probably update savePosition to also update series map, or do it here.
+                        // Let's do it here to be safe.
+
+                        await dataSource.savePlaybackPosition(playlistId, data);
+
+                        const key = getPositionKey('episode', id);
+                        const updated = new Map(store.playbackPositions());
+                        updated.set(key, data);
+
+                        const seriesMap = new Map(store.seriesPositions());
+                        const seriesEpisodes = seriesMap.get(seriesId) || [];
+                        // Check if already exists
+                        const existingIdx = seriesEpisodes.findIndex(
+                            (p) => p.contentXtreamId === id
+                        );
+                        if (existingIdx >= 0) {
+                            seriesEpisodes[existingIdx] = data;
+                        } else {
+                            seriesEpisodes.push(data);
+                        }
+                        seriesMap.set(seriesId, seriesEpisodes);
+
+                        patchState(store, {
+                            playbackPositions: updated,
+                            seriesPositions: seriesMap,
+                        });
+                    }
+                },
+            };
+        }),
+
+        withHooks((store) => {
+            let unsubscribe: (() => void) | undefined;
+
+            return {
+                onInit() {
+                    if (window.electron?.onPlaybackPositionUpdate) {
+                        unsubscribe = window.electron.onPlaybackPositionUpdate(
+                            (data: PlaybackPositionData) => {
+                                if (data.playlistId) {
+                                    store.savePosition(data.playlistId, data);
+                                }
+                            }
+                        );
+                    }
+                },
+                onDestroy() {
+                    unsubscribe?.();
+                },
+            };
+        })
+    );
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-player.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-player.feature.ts
new file mode 100644
index 0000000..30d9099
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-player.feature.ts
@@ -0,0 +1,205 @@
+import { inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { PORTAL_PLAYER } from '@iptvnator/portal/shared/util';
+import { XtreamSerieEpisode, XtreamVodDetails } from 'shared-interfaces';
+import { XtreamCredentials } from '../../services/xtream-api.service';
+import { XtreamUrlService } from '../../services/xtream-url.service';
+
+/**
+ * Player state for managing stream URLs and player settings
+ */
+export interface PlayerState {
+    streamUrl: string | null;
+    hideExternalInfoDialog: boolean;
+}
+
+/**
+ * Initial player state
+ */
+const initialPlayerState: PlayerState = {
+    streamUrl: null,
+    hideExternalInfoDialog:
+        localStorage.getItem('hideExternalInfoDialog') === 'true',
+};
+
+interface XtreamPlayableItem {
+    readonly xtream_id: number;
+}
+
+type XtreamPlaylistHeadersLike = XtreamCredentials & {
+    readonly origin?: string;
+    readonly referrer?: string;
+    readonly userAgent?: string;
+};
+
+type ParentPlayerStoreLike = {
+    currentPlaylist?: () => XtreamPlaylistHeadersLike | null;
+    loadEpg?: () => void;
+    selectedContentType?: () => 'live' | 'vod' | 'series' | undefined;
+    setSelectedItem?: (item: XtreamPlayableItem) => void;
+};
+
+/**
+ * Player feature store for managing stream playback.
+ * Handles:
+ * - Stream URL construction
+ * - External player integration
+ * - Player settings
+ */
+export function withPlayer() {
+    return signalStoreFeature(
+        withState<PlayerState>(initialPlayerState),
+
+        withMethods((store) => {
+            const urlService = inject(XtreamUrlService);
+            const playerService = inject(PORTAL_PLAYER);
+
+            /**
+             * Helper to get credentials from parent store
+             */
+            const getCredentialsFromStore = (): XtreamCredentials | null => {
+                const storeAny = store as ParentPlayerStoreLike;
+                const playlist = storeAny.currentPlaylist?.();
+
+                if (!playlist) {
+                    return null;
+                }
+
+                return {
+                    serverUrl: playlist.serverUrl,
+                    username: playlist.username,
+                    password: playlist.password,
+                };
+            };
+
+            /**
+             * Helper to get playlist with headers from parent store
+             */
+            const getPlaylistFromStore = (): XtreamPlaylistHeadersLike | null => {
+                const storeAny = store as ParentPlayerStoreLike;
+                return storeAny.currentPlaylist?.();
+            };
+
+            return {
+                /**
+                 * Construct and return live stream URL
+                 */
+                constructStreamUrl(item: XtreamPlayableItem): string {
+                    const credentials = getCredentialsFromStore();
+                    if (!credentials) {
+                        return '';
+                    }
+
+                    const streamUrl = urlService.constructLiveUrl(
+                        credentials,
+                        item.xtream_id
+                    );
+
+                    // Set selected item in parent store and load EPG
+                    const storeAny = store as ParentPlayerStoreLike;
+                    if (storeAny.setSelectedItem) {
+                        storeAny.setSelectedItem(item);
+                    }
+                    if (storeAny.loadEpg) {
+                        storeAny.loadEpg();
+                    }
+
+                    patchState(store, { streamUrl });
+                    return streamUrl;
+                },
+
+                /**
+                 * Construct and return VOD stream URL
+                 */
+                constructVodStreamUrl(vodItem: XtreamVodDetails): string {
+                    const credentials = getCredentialsFromStore();
+                    if (!credentials) {
+                        return '';
+                    }
+
+                    const streamUrl = urlService.constructVodUrl(
+                        credentials,
+                        vodItem
+                    );
+                    patchState(store, { streamUrl });
+                    return streamUrl;
+                },
+
+                /**
+                 * Construct and return series episode stream URL
+                 */
+                constructEpisodeStreamUrl(episode: XtreamSerieEpisode): string {
+                    const credentials = getCredentialsFromStore();
+                    if (!credentials) {
+                        return '';
+                    }
+
+                    const streamUrl = urlService.constructEpisodeUrl(
+                        credentials,
+                        episode
+                    );
+                    patchState(store, { streamUrl });
+                    return streamUrl;
+                },
+
+                /**
+                 * Open external player with stream
+                 */
+                openPlayer(
+                    streamUrl: string,
+                    title: string,
+                    thumbnail: string | null = null,
+                    startTime?: number,
+                    contentInfo?: unknown
+                ): void {
+                    const playlist = getPlaylistFromStore();
+                    const storeAny = store as ParentPlayerStoreLike;
+                    const contentType =
+                        storeAny.selectedContentType?.() || 'vod';
+
+                    void playerService.openPlayer(
+                        streamUrl,
+                        title,
+                        thumbnail,
+                        localStorage.getItem('hideExternalInfoDialog') ===
+                            'true',
+                        contentType === 'live',
+                        playlist?.userAgent,
+                        playlist?.referrer,
+                        playlist?.origin,
+                        contentInfo,
+                        startTime
+                    );
+                },
+
+                /**
+                 * Set hide external info dialog preference
+                 */
+                setHideExternalInfoDialog(hide: boolean): void {
+                    localStorage.setItem(
+                        'hideExternalInfoDialog',
+                        String(hide)
+                    );
+                    patchState(store, { hideExternalInfoDialog: hide });
+                },
+
+                /**
+                 * Reset player state
+                 */
+                resetPlayer(): void {
+                    patchState(store, {
+                        streamUrl: null,
+                        hideExternalInfoDialog:
+                            localStorage.getItem('hideExternalInfoDialog') ===
+                            'true',
+                    });
+                },
+            };
+        })
+    );
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-portal.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-portal.feature.ts
new file mode 100644
index 0000000..c4a6317
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-portal.feature.ts
@@ -0,0 +1,173 @@
+import { inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import {
+    XTREAM_DATA_SOURCE,
+    XtreamPlaylistData,
+} from '../../data-sources/xtream-data-source.interface';
+import {
+    XtreamApiService,
+    XtreamCredentials,
+} from '../../services/xtream-api.service';
+import { PortalStatusType } from '../../xtream-state';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+/**
+ * Portal state for managing playlist and portal status
+ */
+export interface PortalState {
+    playlistId: string | null;
+    currentPlaylist: XtreamPlaylistData | null;
+    portalStatus: PortalStatusType;
+}
+
+/**
+ * Initial portal state
+ */
+const initialPortalState: PortalState = {
+    playlistId: null,
+    currentPlaylist: null,
+    portalStatus: 'unavailable',
+};
+
+/**
+ * Portal feature store for managing the current Xtream playlist and status.
+ * Handles:
+ * - Setting/clearing playlist ID
+ * - Fetching playlist details
+ * - Checking portal status (active, inactive, expired, unavailable)
+ */
+export function withPortal() {
+    const logger = createLogger('withPortal');
+
+    const resolvePortalStatus = (response: {
+        user_info?: {
+            exp_date?: string;
+            status?: string;
+        };
+    } | null): PortalStatusType => {
+        if (!response?.user_info?.status) {
+            return 'unavailable';
+        }
+
+        if (response.user_info.status === 'Active') {
+            if (!response.user_info.exp_date) {
+                return 'active';
+            }
+
+            const expDate = new Date(
+                parseInt(response.user_info.exp_date, 10) * 1000
+            );
+            return expDate < new Date() ? 'expired' : 'active';
+        }
+
+        return 'inactive';
+    };
+
+    return signalStoreFeature(
+        withState<PortalState>(initialPortalState),
+
+        withMethods((store) => {
+            const apiService = inject(XtreamApiService);
+            const dataSource = inject(XTREAM_DATA_SOURCE);
+
+            return {
+                /**
+                 * Set the current playlist ID
+                 */
+                setPlaylistId(playlistId: string): void {
+                    patchState(store, { playlistId });
+                },
+
+                /**
+                 * Fetch playlist details from data source
+                 */
+                async fetchPlaylist(): Promise<void> {
+                    const playlistId = store.playlistId();
+                    if (!playlistId) {
+                        return;
+                    }
+
+                    try {
+                        const playlist =
+                            await dataSource.getPlaylist(playlistId);
+
+                        if (playlist) {
+                            patchState(store, { currentPlaylist: playlist });
+                            return;
+                        }
+
+                        const currentPlaylist = store.currentPlaylist();
+                        if (
+                            !currentPlaylist ||
+                            currentPlaylist.id !== playlistId
+                        ) {
+                            return;
+                        }
+
+                        await dataSource.createPlaylist(currentPlaylist);
+                        patchState(store, { currentPlaylist });
+                    } catch (error) {
+                        logger.error('Error fetching playlist', error);
+                    }
+                },
+
+                setCurrentPlaylist(playlist: XtreamPlaylistData | null): void {
+                    patchState(store, { currentPlaylist: playlist });
+                },
+
+                /**
+                 * Check portal status via API
+                 */
+                async checkPortalStatus(): Promise<PortalStatusType> {
+                    const playlist = store.currentPlaylist();
+                    if (!playlist) {
+                        patchState(store, { portalStatus: 'unavailable' });
+                        return 'unavailable';
+                    }
+
+                    const credentials: XtreamCredentials = {
+                        serverUrl: playlist.serverUrl,
+                        username: playlist.username,
+                        password: playlist.password,
+                    };
+
+                    try {
+                        const response =
+                            await apiService.getAccountInfo(credentials);
+                        const portalStatus = resolvePortalStatus(response);
+                        patchState(store, { portalStatus });
+                        return portalStatus;
+                    } catch (error) {
+                        logger.error('Error checking portal status', error);
+                        patchState(store, { portalStatus: 'unavailable' });
+                        return 'unavailable';
+                    }
+                },
+
+                /**
+                 * Update playlist details
+                 */
+                updatePlaylist(updates: Partial<XtreamPlaylistData>): void {
+                    const current = store.currentPlaylist();
+                    if (current) {
+                        patchState(store, {
+                            currentPlaylist: { ...current, ...updates },
+                        });
+                    }
+                },
+
+                /**
+                 * Reset portal state
+                 */
+                resetPortal(): void {
+                    patchState(store, initialPortalState);
+                },
+            };
+        })
+    );
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-search.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-search.feature.ts
new file mode 100644
index 0000000..46c17fd
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-search.feature.ts
@@ -0,0 +1,207 @@
+import { inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { GlobalSearchResult } from 'services';
+import {
+    XTREAM_DATA_SOURCE,
+    XtreamContentItem,
+} from '../../data-sources/xtream-data-source.interface';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+/**
+ * Search filters configuration
+ */
+export interface SearchFilters {
+    live: boolean;
+    movie: boolean;
+    series: boolean;
+}
+
+/**
+ * Search state for managing search results
+ */
+export interface SearchState {
+    searchTerm: string;
+    searchFilters: SearchFilters;
+    searchResults: XtreamContentItem[];
+    globalSearchResults: GlobalSearchResult[];
+    isSearching: boolean;
+}
+
+type SearchContentParams = {
+    term: string;
+    types: string[];
+    excludeHidden?: boolean;
+};
+
+/**
+ * Initial search filters
+ */
+const initialSearchFilters: SearchFilters = {
+    live: true,
+    movie: true,
+    series: true,
+};
+
+/**
+ * Initial search state
+ */
+const initialSearchState: SearchState = {
+    searchTerm: '',
+    searchFilters: initialSearchFilters,
+    searchResults: [],
+    globalSearchResults: [],
+    isSearching: false,
+};
+
+/**
+ * Search feature store for managing content search.
+ * Handles:
+ * - Local playlist search
+ * - Global search results from external sources
+ */
+export function withSearch() {
+    const logger = createLogger('withSearch');
+    type ParentSearchStoreLike = {
+        playlistId?: () => string | null;
+    };
+
+    return signalStoreFeature(
+        withState<SearchState>(initialSearchState),
+
+        withMethods((store) => {
+            const dataSource = inject(XTREAM_DATA_SOURCE);
+            let searchRequestVersion = 0;
+
+            return {
+                /**
+                 * Search content within the current playlist
+                 */
+                async searchContent(
+                    searchTermOrParams: string | SearchContentParams,
+                    typesArg?: string[],
+                    excludeHiddenArg?: boolean
+                ): Promise<XtreamContentItem[]> {
+                    const searchTerm =
+                        typeof searchTermOrParams === 'string'
+                            ? searchTermOrParams
+                            : searchTermOrParams.term;
+                    const types =
+                        typeof searchTermOrParams === 'string'
+                            ? (typesArg ?? [])
+                            : searchTermOrParams.types;
+                    const excludeHidden =
+                        typeof searchTermOrParams === 'string'
+                            ? excludeHiddenArg
+                            : searchTermOrParams.excludeHidden;
+
+                    // Access parent store's playlistId (from withPortal)
+                    const storeAny = store as ParentSearchStoreLike;
+                    const playlistId = storeAny.playlistId?.();
+                    const requestVersion = ++searchRequestVersion;
+
+                    if (!playlistId || !searchTerm.trim()) {
+                        patchState(store, {
+                            searchResults: [],
+                            isSearching: false,
+                        });
+                        return [];
+                    }
+
+                    patchState(store, { isSearching: true });
+
+                    try {
+                        const results = await dataSource.searchContent(
+                            playlistId,
+                            searchTerm,
+                            types,
+                            excludeHidden
+                        );
+
+                        if (requestVersion !== searchRequestVersion) {
+                            return results;
+                        }
+
+                        patchState(store, {
+                            searchResults: results,
+                            isSearching: false,
+                        });
+
+                        return results;
+                    } catch (error) {
+                        logger.error('Error searching content', error);
+
+                        if (requestVersion !== searchRequestVersion) {
+                            return [];
+                        }
+
+                        patchState(store, {
+                            searchResults: [],
+                            isSearching: false,
+                        });
+                        return [];
+                    }
+                },
+
+                /**
+                 * Set global search results (from external search)
+                 */
+                setGlobalSearchResults(results: GlobalSearchResult[]): void {
+                    patchState(store, {
+                        searchResults: results,
+                        globalSearchResults: results,
+                        isSearching: false,
+                    });
+                },
+
+                /**
+                 * Set the searching state
+                 */
+                setIsSearching(value: boolean): void {
+                    patchState(store, { isSearching: value });
+                },
+
+                /**
+                 * Set the search term
+                 */
+                setSearchTerm(term: string): void {
+                    patchState(store, { searchTerm: term });
+                },
+
+                /**
+                 * Set search filters
+                 */
+                setSearchFilters(filters: SearchFilters): void {
+                    patchState(store, { searchFilters: filters });
+                },
+
+                /**
+                 * Update a single filter
+                 */
+                updateSearchFilter(
+                    key: keyof SearchFilters,
+                    value: boolean
+                ): void {
+                    patchState(store, {
+                        searchFilters: {
+                            ...store.searchFilters(),
+                            [key]: value,
+                        },
+                    });
+                },
+
+                /**
+                 * Clear search results
+                 */
+                resetSearchResults(): void {
+                    searchRequestVersion++;
+                    patchState(store, initialSearchState);
+                },
+            };
+        })
+    );
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-selection.feature.spec.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-selection.feature.spec.ts
new file mode 100644
index 0000000..ad797e4
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-selection.feature.spec.ts
@@ -0,0 +1,99 @@
+import { TestBed } from '@angular/core/testing';
+import { signalStore, withState } from '@ngrx/signals';
+import { withSelection } from './with-selection.feature';
+
+const TestSelectionStore = signalStore(
+    withState({
+        contentLoadStateByType: {
+            live: 'ready',
+            vod: 'ready',
+            series: 'ready',
+        },
+        liveCategories: [],
+        liveStreams: [],
+        vodCategories: [
+            {
+                id: 10,
+                category_id: '10',
+                category_name: 'Movies',
+                type: 'vod',
+            },
+        ],
+        vodStreams: [
+            {
+                xtream_id: 1,
+                category_id: '10',
+                title: 'First',
+                added: '4',
+            },
+            {
+                xtream_id: 2,
+                category_id: '10',
+                title: 'Second',
+                added: '3',
+            },
+            {
+                xtream_id: 3,
+                category_id: '10',
+                title: 'Third',
+                added: '2',
+            },
+            {
+                xtream_id: 4,
+                category_id: '10',
+                title: 'Fourth',
+                added: '1',
+            },
+        ],
+        serialCategories: [],
+        serialStreams: [],
+    }),
+    withSelection()
+);
+
+describe('withSelection', () => {
+    let store: InstanceType<typeof TestSelectionStore>;
+
+    beforeEach(() => {
+        localStorage.clear();
+
+        TestBed.configureTestingModule({
+            providers: [TestSelectionStore],
+        });
+
+        store = TestBed.inject(TestSelectionStore);
+    });
+
+    afterEach(() => {
+        localStorage.clear();
+    });
+
+    it('keeps the current page when the category search term is unchanged', () => {
+        store.setSelectedContentType('vod');
+        store.setSelectedCategory(10);
+        store.setLimit(2);
+        store.setPage(1);
+
+        store.setCategorySearchTerm('');
+
+        expect(store.page()).toBe(1);
+        expect(store.getPaginatedContent().map((item) => item.title)).toEqual([
+            'Third',
+            'Fourth',
+        ]);
+    });
+
+    it('resets the current page when the category search term changes', () => {
+        store.setSelectedContentType('vod');
+        store.setSelectedCategory(10);
+        store.setLimit(2);
+        store.setPage(1);
+
+        store.setCategorySearchTerm('first');
+
+        expect(store.page()).toBe(0);
+        expect(store.getPaginatedContent().map((item) => item.title)).toEqual([
+            'First',
+        ]);
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/stores/features/with-selection.feature.ts b/libs/portal/xtream/data-access/src/lib/stores/features/with-selection.feature.ts
new file mode 100644
index 0000000..4e139b1
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/features/with-selection.feature.ts
@@ -0,0 +1,528 @@
+import { computed } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withComputed,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { ContentType, XtreamContentLoadState } from '../../xtream-state';
+
+/**
+ * Module-level collator — allocating Intl.Collator is expensive;
+ * one shared instance avoids repeated allocation on every sort call.
+ */
+const COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'base',
+});
+
+export type XtreamCategorySortMode =
+    | 'date-desc'
+    | 'date-asc'
+    | 'name-asc'
+    | 'name-desc';
+
+/**
+ * Selection state for managing UI selection and pagination
+ */
+export interface SelectionState {
+    selectedContentType: ContentType;
+    selectedCategoryId: number | null;
+    selectedItem: XtreamSelectionItem | null;
+    page: number;
+    limit: number;
+    contentSortMode: XtreamCategorySortMode;
+    categorySearchTerm: string;
+    isLoadingDetails: boolean;
+    detailsError: string | null;
+}
+
+/**
+ * Initial selection state
+ */
+const initialSelectionState: SelectionState = {
+    selectedContentType: 'vod',
+    selectedCategoryId: null,
+    selectedItem: null,
+    page: 0,
+    limit: Number(localStorage.getItem('xtream-page-size') ?? 25),
+    contentSortMode: 'date-desc',
+    categorySearchTerm: '',
+    isLoadingDetails: false,
+    detailsError: null,
+};
+
+interface XtreamSelectionCategory {
+    readonly [key: string]: unknown;
+    readonly category_name?: string;
+    readonly category_id?: string | number;
+    readonly id?: string | number;
+    readonly name?: string;
+    readonly type?: ContentType;
+}
+
+interface XtreamSelectionItem {
+    readonly [key: string]: unknown;
+    readonly added?: string;
+    readonly category_id?: string | number;
+    readonly episodes?: unknown;
+    readonly id?: string | number;
+    readonly info?:
+        | {
+              readonly actors?: string;
+              readonly backdrop_path?: string[];
+              readonly cast?: string;
+              readonly country?: string;
+              readonly cover?: string;
+              readonly description?: string;
+              readonly director?: string;
+              readonly duration?: string;
+              readonly episode_run_time?: number | string;
+              readonly genre?: string;
+              readonly movie_image?: string;
+              readonly name?: string;
+              readonly plot?: string;
+              readonly rating?: number | string;
+              readonly rating_imdb?: string;
+              readonly rating_kinopoisk?: string;
+              readonly releaseDate?: string;
+              readonly releasedate?: string;
+              readonly youtube_trailer?: string;
+          }
+        | []
+        | null;
+    readonly last_modified?: string;
+    readonly movie_data?: {
+        readonly name?: string;
+    };
+    readonly name?: string;
+    readonly series_id?: string | number;
+    readonly stream_id?: string | number;
+    readonly title?: string;
+    readonly xtream_id?: number;
+}
+
+type ParentSelectionStoreLike = {
+    contentLoadStateByType?: () => Record<ContentType, XtreamContentLoadState>;
+    isLoadingContent?: () => boolean;
+    liveCategories?: () => XtreamSelectionCategory[];
+    liveStreams?: () => XtreamSelectionItem[];
+    serialCategories?: () => XtreamSelectionCategory[];
+    serialStreams?: () => XtreamSelectionItem[];
+    vodCategories?: () => XtreamSelectionCategory[];
+    vodStreams?: () => XtreamSelectionItem[];
+};
+
+/**
+ * Selection feature store for managing UI selection and pagination.
+ * Handles:
+ * - Content type selection (live, vod, series)
+ * - Category selection
+ * - Item selection
+ * - Pagination (page, limit)
+ */
+export function withSelection() {
+    return signalStoreFeature(
+        withState<SelectionState>(initialSelectionState),
+
+        withComputed((store) => {
+            const getItemDate = (
+                item: XtreamSelectionItem,
+                categoryType: ContentType
+            ): number => {
+                const value =
+                    categoryType === 'series'
+                        ? (item.last_modified ?? item.added)
+                        : item.added;
+                return parseInt(value ?? '', 10) || 0;
+            };
+
+            const sortByMode = (
+                items: XtreamSelectionItem[],
+                sortMode: XtreamCategorySortMode,
+                categoryType: ContentType
+            ): XtreamSelectionItem[] => {
+                return [...items].sort((a, b) => {
+                    if (sortMode === 'date-desc') {
+                        return (
+                            getItemDate(b, categoryType) -
+                            getItemDate(a, categoryType)
+                        );
+                    }
+                    if (sortMode === 'date-asc') {
+                        return (
+                            getItemDate(a, categoryType) -
+                            getItemDate(b, categoryType)
+                        );
+                    }
+
+                    const titleA = a.title ?? a.name ?? '';
+                    const titleB = b.title ?? b.name ?? '';
+                    const byName = COLLATOR.compare(titleA, titleB);
+                    return sortMode === 'name-asc' ? byName : -byName;
+                });
+            };
+
+            const filterBySearchTerm = (
+                items: XtreamSelectionItem[],
+                searchTerm: string
+            ): XtreamSelectionItem[] => {
+                const normalized = searchTerm.trim().toLocaleLowerCase();
+                if (!normalized) {
+                    return items;
+                }
+
+                return items.filter((item) => {
+                    const title = (item.title ?? item.name ?? '').toString();
+                    return title.toLocaleLowerCase().includes(normalized);
+                });
+            };
+
+            // Memoized sorted content - only recalculates when content/type changes
+            const sortedContent = computed(() => {
+                const categoryType = store.selectedContentType();
+                const sortMode = store.contentSortMode();
+                const storeAny = store as ParentSelectionStoreLike;
+                const content =
+                    categoryType === 'live'
+                        ? storeAny.liveStreams?.() || []
+                        : categoryType === 'vod'
+                          ? storeAny.vodStreams?.() || []
+                          : storeAny.serialStreams?.() || [];
+
+                if (categoryType === 'vod' || categoryType === 'series') {
+                    return sortByMode(content, sortMode, categoryType);
+                }
+
+                return sortByMode(content, 'date-desc', categoryType);
+            });
+
+            // ---------------------------------------------------------------------------
+            // Per-type category item-count maps.
+            // Each computed only recomputes when ITS streams array changes —
+            // switching content tabs no longer triggers an O(n) full scan.
+            // ---------------------------------------------------------------------------
+            const buildCountMap = (
+                streams: XtreamSelectionItem[]
+            ): Map<number, number> => {
+                const countMap = new Map<number, number>();
+                for (const item of streams) {
+                    const catId = Number(item.category_id);
+                    if (!isNaN(catId)) {
+                        countMap.set(catId, (countMap.get(catId) || 0) + 1);
+                    }
+                }
+                return countMap;
+            };
+
+            const liveItemCounts = computed(() =>
+                buildCountMap(
+                    (store as ParentSelectionStoreLike).liveStreams?.() || []
+                )
+            );
+            const vodItemCounts = computed(() =>
+                buildCountMap(
+                    (store as ParentSelectionStoreLike).vodStreams?.() || []
+                )
+            );
+            const seriesItemCounts = computed(() =>
+                buildCountMap(
+                    (store as ParentSelectionStoreLike).serialStreams?.() || []
+                )
+            );
+            const selectedTypeContentState = computed(() => {
+                const storeAny = store as ParentSelectionStoreLike;
+                const selectedType = store.selectedContentType();
+                return (
+                    storeAny.contentLoadStateByType?.()?.[selectedType] ??
+                    'idle'
+                );
+            });
+            const selectedTypeContentLoading = computed(
+                () => selectedTypeContentState() === 'loading'
+            );
+            const selectedTypeContentReady = computed(
+                () => selectedTypeContentState() === 'ready'
+            );
+            const selectedTypeCountsReady = computed(() =>
+                selectedTypeContentReady()
+            );
+
+            // ---------------------------------------------------------------------------
+            // Stable filter + sort intermediate.
+            // Depends on category / search / sort — but NOT on page or limit.
+            // This prevents re-sorting the full array on every page-navigation.
+            // ---------------------------------------------------------------------------
+            const filteredAndSortedContent = computed(() => {
+                const categoryId = store.selectedCategoryId();
+                const categoryType = store.selectedContentType();
+                const sortMode = store.contentSortMode();
+                const searchTerm = store.categorySearchTerm();
+
+                const storeAny = store as ParentSelectionStoreLike;
+                const content =
+                    categoryType === 'live'
+                        ? storeAny.liveStreams?.() || []
+                        : categoryType === 'vod'
+                          ? storeAny.vodStreams?.() || []
+                          : storeAny.serialStreams?.() || [];
+
+                if (!categoryId) {
+                    return sortedContent();
+                }
+
+                let filtered = content.filter(
+                    (item) => Number(item.category_id) === categoryId
+                );
+                if (categoryType === 'vod' || categoryType === 'series') {
+                    filtered = filterBySearchTerm(filtered, searchTerm);
+                    filtered = sortByMode(filtered, sortMode, categoryType);
+                }
+                return filtered;
+            });
+
+            return {
+                /**
+                 * Get the selected category from the parent store's categories
+                 */
+                getSelectedCategory: computed(() => {
+                    const categoryId = store.selectedCategoryId();
+                    if (!categoryId) {
+                        return {
+                            id: 0,
+                            name: 'All Items',
+                            type: store.selectedContentType(),
+                        };
+                    }
+
+                    // Access parent store categories (from withContent)
+                    const storeAny = store as ParentSelectionStoreLike;
+                    const allCategories: XtreamSelectionCategory[] = [
+                        ...(storeAny.vodCategories?.() || []),
+                        ...(storeAny.liveCategories?.() || []),
+                        ...(storeAny.serialCategories?.() || []),
+                    ];
+
+                    return allCategories.find(
+                        (c) =>
+                            c.id === categoryId ||
+                            c.category_id === String(categoryId)
+                    );
+                }),
+
+                /**
+                 * Get the selected item by ID from content
+                 */
+                getSelectedItemById: computed(() => {
+                    const categoryType = store.selectedContentType();
+                    const selectedItem = store.selectedItem();
+
+                    if (!selectedItem) return null;
+
+                    // Access parent store content (from withContent)
+                    const storeAny = store as ParentSelectionStoreLike;
+                    const content =
+                        categoryType === 'live'
+                            ? storeAny.liveStreams?.() || []
+                            : categoryType === 'vod'
+                              ? storeAny.vodStreams?.() || []
+                              : storeAny.serialStreams?.() || [];
+
+                    return content.find(
+                        (item) =>
+                            item.stream_id === selectedItem.stream_id ||
+                            item.id === selectedItem.id ||
+                            item.series_id === selectedItem.series_id
+                    );
+                }),
+
+                /**
+                 * Get paginated content for the selected category.
+                 * Slices from the stable `filteredAndSortedContent` intermediate so
+                 * page navigation never triggers a full re-sort of the array.
+                 */
+                getPaginatedContent: computed(() => {
+                    const start = store.page() * store.limit();
+                    return filteredAndSortedContent().slice(
+                        start,
+                        start + store.limit()
+                    );
+                }),
+
+                /**
+                 * Get all items from the selected category (without pagination).
+                 * Reuses the `filteredAndSortedContent` intermediate to avoid
+                 * duplicating the filter+sort work already done for pagination.
+                 */
+                selectItemsFromSelectedCategory: computed(() =>
+                    filteredAndSortedContent()
+                ),
+
+                /**
+                 * Get total pages for the selected category.
+                 * Derives length from the shared `filteredAndSortedContent` intermediate.
+                 */
+                getTotalPages: computed(() =>
+                    Math.ceil(filteredAndSortedContent().length / store.limit())
+                ),
+
+                /**
+                 * Check if paginated content is loading
+                 */
+                isPaginatedContentLoading: computed(() =>
+                    selectedTypeContentLoading()
+                ),
+
+                selectedTypeContentState,
+
+                selectedTypeContentLoading,
+
+                selectedTypeContentReady,
+
+                selectedTypeCountsReady,
+
+                /**
+                 * Memoized category item counts map.
+                 * Selects from per-type pre-computed maps so switching content tabs
+                 * is O(1) — no full array scan on every tab switch.
+                 */
+                getCategoryItemCounts: computed(() => {
+                    const type = store.selectedContentType();
+                    return type === 'live'
+                        ? liveItemCounts()
+                        : type === 'vod'
+                          ? vodItemCounts()
+                          : seriesItemCounts();
+                }),
+
+                /**
+                 * Get categories for the currently selected content type
+                 */
+                getCategoriesBySelectedType: computed(() => {
+                    const type = store.selectedContentType();
+
+                    // Access parent store categories (from withContent)
+                    const storeAny = store as ParentSelectionStoreLike;
+                    return type === 'live'
+                        ? storeAny.liveCategories?.() || []
+                        : type === 'vod'
+                          ? storeAny.vodCategories?.() || []
+                          : storeAny.serialCategories?.() || [];
+                }),
+            };
+        }),
+
+        withMethods((store) => ({
+            /**
+             * Set the content type (live, vod, series)
+             */
+            setSelectedContentType(type: ContentType): void {
+                if (store.selectedContentType() === type) {
+                    return;
+                }
+
+                patchState(store, {
+                    selectedContentType: type,
+                    selectedCategoryId: null,
+                    page: 0,
+                    categorySearchTerm: '',
+                });
+            },
+
+            /**
+             * Set the selected category
+             * Only resets page to 0 when category actually changes
+             */
+            setSelectedCategory(categoryId: number | null): void {
+                const newCategoryId =
+                    categoryId !== null ? Number(categoryId) : null;
+                const currentCategoryId = store.selectedCategoryId();
+
+                // Only reset page if category actually changed
+                if (currentCategoryId !== newCategoryId) {
+                    patchState(store, {
+                        selectedCategoryId: newCategoryId,
+                        page: 0,
+                        categorySearchTerm: '',
+                    });
+                }
+            },
+
+            /**
+             * Set the selected item
+             */
+            setSelectedItem(item: XtreamSelectionItem | null): void {
+                patchState(store, { selectedItem: item });
+            },
+
+            /**
+             * Set the loading details state
+             */
+            setIsLoadingDetails(isLoading: boolean): void {
+                patchState(store, { isLoadingDetails: isLoading });
+            },
+
+            /**
+             * Set the details error state
+             */
+            setDetailsError(error: string | null): void {
+                patchState(store, { detailsError: error });
+            },
+
+            /**
+             * Set the current page
+             */
+            setPage(page: number): void {
+                patchState(store, { page });
+            },
+
+            /**
+             * Set the page limit (items per page)
+             */
+            setLimit(limit: number): void {
+                patchState(store, { limit });
+                localStorage.setItem('xtream-page-size', String(limit));
+            },
+
+            /**
+             * Set category content sort mode
+             */
+            setContentSortMode(mode: XtreamCategorySortMode): void {
+                if (store.contentSortMode() === mode) {
+                    return;
+                }
+                patchState(store, {
+                    contentSortMode: mode,
+                    page: 0,
+                });
+            },
+
+            /**
+             * Set selected category search term
+             */
+            setCategorySearchTerm(term: string): void {
+                if (store.categorySearchTerm() === term) {
+                    return;
+                }
+
+                patchState(store, {
+                    categorySearchTerm: term,
+                    page: 0,
+                });
+            },
+
+            /**
+             * Reset selection state
+             */
+            resetSelection(): void {
+                patchState(store, {
+                    ...initialSelectionState,
+                    limit: Number(
+                        localStorage.getItem('xtream-page-size') ?? 25
+                    ),
+                });
+            },
+        }))
+    );
+}
diff --git a/libs/portal/xtream/data-access/src/lib/stores/index.ts b/libs/portal/xtream/data-access/src/lib/stores/index.ts
new file mode 100644
index 0000000..89f2c09
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/index.ts
@@ -0,0 +1,2 @@
+export * from './features';
+export * from './xtream.store';
diff --git a/libs/portal/xtream/data-access/src/lib/stores/xtream.store.ts b/libs/portal/xtream/data-access/src/lib/stores/xtream.store.ts
new file mode 100644
index 0000000..52bb775
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/stores/xtream.store.ts
@@ -0,0 +1,227 @@
+import { computed, inject } from '@angular/core';
+import { signalStore, withComputed, withMethods } from '@ngrx/signals';
+import { XtreamSerieDetails, XtreamVodDetails } from 'shared-interfaces';
+
+// Import existing features that are already separate
+import { withFavorites } from '../with-favorites.feature';
+import { withRecentItems } from '../with-recent-items';
+
+// Import service
+import { XTREAM_DATA_SOURCE } from '../data-sources/xtream-data-source.interface';
+import { XtreamApiService } from '../services/xtream-api.service';
+
+// Import new feature stores
+import { createLogger } from '@iptvnator/portal/shared/util';
+import {
+    withContent,
+    withEpg,
+    withPlaybackPositions,
+    withPlayer,
+    withPortal,
+    withSearch,
+    withSelection,
+} from './features';
+
+/**
+ * XtreamStore - Facade composing all feature stores.
+ *
+ * This store provides a unified API for components while delegating
+ * to specialized feature stores for different concerns:
+ *
+ * - withPortal: Playlist and portal status management
+ * - withContent: Categories and streams management
+ * - withSelection: UI selection and pagination
+ * - withSearch: Search functionality
+ * - withEpg: EPG (Electronic Program Guide) data
+ * - withPlayer: Stream URL construction and player integration
+ * - withFavorites: Favorites management
+ * - withRecentItems: Recently viewed items
+ * - withPlaybackPositions: Playback position tracking
+ *
+ * @see docs/XTREAM_STORE_REFACTORING_PLAN.md
+ */
+export const XtreamStore = signalStore(
+    { providedIn: 'root' },
+
+    // Compose all features
+    withPortal(),
+    withContent(),
+    withSelection(),
+    withSearch(),
+    withEpg(),
+    withPlayer(),
+    withFavorites(),
+    withRecentItems(),
+    withPlaybackPositions(),
+
+    // Cross-feature computed properties
+    withComputed((store) => ({
+        /**
+         * Get global recent items (from withRecentItems)
+         */
+        globalRecentItems: computed(() => {
+            return store.recentItems();
+        }),
+    })),
+
+    // Cross-feature methods & orchestration
+    withMethods((store) => {
+        const xtreamApiService = inject(XtreamApiService);
+        const dataSource = inject(XTREAM_DATA_SOURCE);
+        const logger = createLogger('XtreamStore');
+        const findVodCatalogItem = (vodId: string | number) =>
+            store.vodStreams().find((item) => {
+                const candidateId =
+                    item.xtream_id ??
+                    item.stream_id ??
+                    (item as { id?: string | number }).id;
+
+                return Number(candidateId) === Number(vodId);
+            });
+
+        return {
+            /**
+             * Full store reset for switching between playlists
+             */
+            resetStore(newPlaylistId?: string): void {
+                // Clear the session cache for the playlist we're leaving so
+                // stale data cannot bleed into the new playlist (PWA path).
+                const leavingPlaylistId = store.playlistId();
+                const preserveCancelledBlock =
+                    Boolean(newPlaylistId) &&
+                    leavingPlaylistId === newPlaylistId &&
+                    store.contentInitBlockReason() === 'cancelled';
+                if (leavingPlaylistId) {
+                    dataSource.clearSessionCache(leavingPlaylistId);
+                }
+
+                store.resetPortal();
+                store.resetContent();
+                store.resetSelection();
+                store.resetSearchResults();
+                store.clearEpg();
+                store.resetPlayer();
+
+                if (newPlaylistId) {
+                    store.setPlaylistId(newPlaylistId);
+                }
+
+                if (preserveCancelledBlock) {
+                    store.setContentInitBlockReason('cancelled');
+                }
+            },
+
+            /**
+             * Initialize the store for a playlist
+             */
+            async initialize(): Promise<void> {
+                await store.fetchPlaylist();
+                await store.checkPortalStatus();
+                await store.initializeContent();
+                const playlist = store.currentPlaylist();
+                if (playlist) {
+                    store.loadAllPositions(playlist.id);
+                }
+            },
+
+            /**
+             * Fetch Xtream playlist (convenience alias)
+             */
+            async fetchXtreamPlaylist(): Promise<void> {
+                await store.fetchPlaylist();
+            },
+
+            /**
+             * Fetch VOD details with metadata
+             * Accepts object format for backward compatibility with rxMethod callers
+             */
+            fetchVodDetailsWithMetadata(params: {
+                vodId: string;
+                categoryId: number;
+            }): void {
+                const playlist = store.currentPlaylist();
+                if (!playlist) return;
+
+                store.setIsLoadingDetails(true);
+                store.setDetailsError(null);
+                xtreamApiService
+                    .getVodInfo(
+                        {
+                            serverUrl: playlist.serverUrl,
+                            username: playlist.username,
+                            password: playlist.password,
+                        },
+                        params.vodId
+                    )
+                    .then((vodDetails: XtreamVodDetails) => {
+                        const catalogItem = findVodCatalogItem(params.vodId);
+
+                        store.setSelectedCategory(params.categoryId);
+                        store.setSelectedItem({
+                            ...catalogItem,
+                            ...vodDetails,
+                            stream_id: params.vodId,
+                            xtream_id:
+                                catalogItem?.xtream_id ?? Number(params.vodId),
+                        });
+                    })
+                    .catch((error: unknown) => {
+                        logger.error('Error fetching VOD details', error);
+                        store.setDetailsError(
+                            error instanceof Error
+                                ? error.message
+                                : 'Unknown error'
+                        );
+                    })
+                    .finally(() => {
+                        store.setIsLoadingDetails(false);
+                    });
+            },
+
+            /**
+             * Fetch series details with metadata
+             * Accepts object format for backward compatibility with rxMethod callers
+             */
+            fetchSerialDetailsWithMetadata(params: {
+                serialId: string;
+                categoryId: number;
+            }): void {
+                const playlist = store.currentPlaylist();
+                if (!playlist) return;
+
+                store.setIsLoadingDetails(true);
+                store.setDetailsError(null);
+                xtreamApiService
+                    .getSeriesInfo(
+                        {
+                            serverUrl: playlist.serverUrl,
+                            username: playlist.username,
+                            password: playlist.password,
+                        },
+                        params.serialId
+                    )
+                    .then((serialDetails: XtreamSerieDetails) => {
+                        store.setSelectedCategory(params.categoryId);
+                        store.setSelectedItem({
+                            ...serialDetails,
+                            series_id: params.serialId,
+                        });
+                    })
+                    .catch((error: unknown) => {
+                        logger.error('Error fetching series details', error);
+                        store.setDetailsError(
+                            error instanceof Error
+                                ? error.message
+                                : 'Unknown error'
+                        );
+                    })
+                    .finally(() => {
+                        store.setIsLoadingDetails(false);
+                    });
+            },
+        };
+    })
+);
+
+// Type alias for the store
+export type XtreamStoreType = InstanceType<typeof XtreamStore>;
diff --git a/libs/portal/xtream/data-access/src/lib/with-favorites.feature.spec.ts b/libs/portal/xtream/data-access/src/lib/with-favorites.feature.spec.ts
new file mode 100644
index 0000000..b931d8d
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/with-favorites.feature.spec.ts
@@ -0,0 +1,125 @@
+import { TestBed } from '@angular/core/testing';
+import { patchState, signalStore } from '@ngrx/signals';
+import { DatabaseService } from 'services';
+import { FavoritesService } from './services/favorites.service';
+import { withFavorites } from './with-favorites.feature';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+const TestFavoritesStore = signalStore(withFavorites());
+
+describe('withFavorites', () => {
+    let store: InstanceType<typeof TestFavoritesStore>;
+    let databaseService: {
+        getContentByXtreamId: jest.Mock;
+    };
+    let favoritesService: {
+        addToFavorites: jest.Mock;
+        isFavorite: jest.Mock;
+        removeFromFavorites: jest.Mock;
+    };
+
+    beforeEach(() => {
+        databaseService = {
+            getContentByXtreamId: jest.fn(),
+        };
+        favoritesService = {
+            addToFavorites: jest.fn().mockResolvedValue(undefined),
+            isFavorite: jest.fn().mockResolvedValue(false),
+            removeFromFavorites: jest.fn().mockResolvedValue(undefined),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestFavoritesStore,
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: FavoritesService,
+                    useValue: favoritesService,
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestFavoritesStore);
+    });
+
+    it('looks favorites up with the requested content type before adding one', async () => {
+        databaseService.getContentByXtreamId.mockResolvedValue({
+            id: 3941697,
+            title: 'Krypton',
+            type: 'series',
+            xtream_id: 290,
+        });
+
+        const result = await store.toggleFavorite(290, 'playlist-1', 'series');
+
+        expect(databaseService.getContentByXtreamId).toHaveBeenCalledWith(
+            290,
+            'playlist-1',
+            'series'
+        );
+        expect(favoritesService.addToFavorites).toHaveBeenCalledWith({
+            content_id: 3941697,
+            playlist_id: 'playlist-1',
+        });
+        expect(result).toBe(true);
+        expect(store.isFavorite()).toBe(true);
+    });
+
+    it('looks favorites up with the requested content type before removing one', async () => {
+        databaseService.getContentByXtreamId.mockResolvedValue({
+            id: 3867578,
+            title: 'SE: V Film Premiere FHD',
+            type: 'live',
+            xtream_id: 290,
+        });
+        patchState(store, { isFavorite: true });
+
+        const result = await store.toggleFavorite(290, 'playlist-1', 'live');
+
+        expect(databaseService.getContentByXtreamId).toHaveBeenCalledWith(
+            290,
+            'playlist-1',
+            'live'
+        );
+        expect(favoritesService.removeFromFavorites).toHaveBeenCalledWith(
+            3867578,
+            'playlist-1'
+        );
+        expect(result).toBe(false);
+        expect(store.isFavorite()).toBe(false);
+    });
+
+    it('checks favorite state against the matching content type', async () => {
+        databaseService.getContentByXtreamId.mockResolvedValue({
+            id: 3829429,
+            title: 'Dragon Ball Heroes',
+            type: 'series',
+            xtream_id: 31,
+        });
+        favoritesService.isFavorite.mockResolvedValue(true);
+
+        await store.checkFavoriteStatus(31, 'playlist-1', 'series');
+
+        expect(databaseService.getContentByXtreamId).toHaveBeenCalledWith(
+            31,
+            'playlist-1',
+            'series'
+        );
+        expect(favoritesService.isFavorite).toHaveBeenCalledWith(
+            3829429,
+            'playlist-1'
+        );
+        expect(store.isFavorite()).toBe(true);
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/with-favorites.feature.ts b/libs/portal/xtream/data-access/src/lib/with-favorites.feature.ts
new file mode 100644
index 0000000..3241268
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/with-favorites.feature.ts
@@ -0,0 +1,99 @@
+import { inject } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { DatabaseService } from 'services';
+import { FavoritesService } from './services/favorites.service';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+export const withFavorites = function () {
+    const logger = createLogger('withFavorites');
+    return signalStoreFeature(
+        withState({
+            isFavorite: false,
+        }),
+        withMethods(
+            (
+                store,
+                dbService = inject(DatabaseService),
+                favoritesService = inject(FavoritesService)
+            ) => ({
+                async toggleFavorite(
+                    xtreamId: number,
+                    playlistId: string,
+                    contentType: 'live' | 'movie' | 'series',
+                    backdropUrl?: string
+                ) {
+                    if (!xtreamId || !playlistId) {
+                        return false;
+                    }
+
+                    const content = await dbService.getContentByXtreamId(
+                        xtreamId,
+                        playlistId,
+                        contentType
+                    );
+                    if (!content) {
+                        logger.error(
+                            'Content not found for xtream ID',
+                            xtreamId
+                        );
+                        return false;
+                    }
+
+                    const currentStatus = store.isFavorite();
+
+                    if (currentStatus) {
+                        // Remove from favorites
+                        await favoritesService.removeFromFavorites(
+                            content.id,
+                            playlistId
+                        );
+                        patchState(store, { isFavorite: false });
+                        return false;
+                    } else {
+                        // Add to favorites
+                        await favoritesService.addToFavorites({
+                            content_id: content.id,
+                            playlist_id: playlistId,
+                            backdrop_url: backdropUrl,
+                        });
+                        patchState(store, { isFavorite: true });
+                        return true;
+                    }
+                },
+
+                async checkFavoriteStatus(
+                    xtreamId: number,
+                    playlistId: string,
+                    contentType: 'live' | 'movie' | 'series'
+                ) {
+                    if (!xtreamId || !playlistId) {
+                        patchState(store, { isFavorite: false });
+                        return;
+                    }
+
+                    const content = await dbService.getContentByXtreamId(
+                        xtreamId,
+                        playlistId,
+                        contentType
+                    );
+                    if (!content) {
+                        patchState(store, { isFavorite: false });
+                        return;
+                    }
+
+                    const isFavorite = await favoritesService.isFavorite(
+                        content.id,
+                        playlistId
+                    );
+
+                    patchState(store, { isFavorite });
+                },
+            })
+        )
+    );
+};
diff --git a/libs/portal/xtream/data-access/src/lib/with-recent-items.feature.spec.ts b/libs/portal/xtream/data-access/src/lib/with-recent-items.feature.spec.ts
new file mode 100644
index 0000000..950f41e
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/with-recent-items.feature.spec.ts
@@ -0,0 +1,161 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { signalStore } from '@ngrx/signals';
+import { of } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import { withRecentItems } from './with-recent-items';
+
+jest.mock('@iptvnator/portal/shared/util', () => ({
+    createLogger: () => ({
+        debug: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn(),
+        error: jest.fn(),
+    }),
+}));
+
+const TestRecentItemsStore = signalStore(withRecentItems());
+
+describe('withRecentItems', () => {
+    let store: InstanceType<typeof TestRecentItemsStore>;
+    let databaseService: {
+        addRecentItem: jest.Mock;
+        getContentByXtreamId: jest.Mock;
+        getRecentItems: jest.Mock;
+        setContentBackdropIfMissing: jest.Mock;
+    };
+
+    beforeEach(() => {
+        Object.defineProperty(window, 'electron', {
+            value: {} as Window['electron'],
+            configurable: true,
+        });
+
+        databaseService = {
+            addRecentItem: jest.fn().mockResolvedValue(undefined),
+            getContentByXtreamId: jest.fn(),
+            getRecentItems: jest.fn().mockResolvedValue([
+                {
+                    id: 3941697,
+                    title: 'Krypton',
+                    type: 'series',
+                    poster_url: 'https://example.com/krypton.png',
+                    backdrop_url: 'https://example.com/krypton-backdrop.png',
+                    viewed_at: '2026-04-21T20:42:27.000Z',
+                    xtream_id: 290,
+                    category_id: 17,
+                },
+            ]),
+            setContentBackdropIfMissing: jest.fn().mockResolvedValue(undefined),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                TestRecentItemsStore,
+                {
+                    provide: DatabaseService,
+                    useValue: databaseService,
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {
+                        clearPlaylistRecentlyViewed: jest.fn().mockReturnValue(
+                            of(undefined)
+                        ),
+                        getAllPlaylists: jest.fn().mockReturnValue(of([])),
+                    },
+                },
+            ],
+        });
+
+        store = TestBed.inject(TestRecentItemsStore);
+    });
+
+    it('looks recent items up with the requested content type before saving one', async () => {
+        databaseService.getContentByXtreamId.mockResolvedValue({
+            id: 3941697,
+            title: 'Krypton',
+            type: 'series',
+            xtream_id: 290,
+        });
+
+        store.addRecentItem({
+            xtreamId: 290,
+            contentType: 'series',
+            playlist: signal({ id: 'playlist-1' }),
+        });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        expect(databaseService.getContentByXtreamId).toHaveBeenCalledWith(
+            290,
+            'playlist-1',
+            'series'
+        );
+        expect(databaseService.addRecentItem).toHaveBeenCalledWith(
+            3941697,
+            'playlist-1',
+            undefined
+        );
+        expect(store.recentItems()).toEqual([
+            expect.objectContaining({
+                id: 3941697,
+                title: 'Krypton',
+                type: 'series',
+                xtream_id: 290,
+                backdrop_url: 'https://example.com/krypton-backdrop.png',
+            }),
+        ]);
+    });
+
+    it('forwards backdrop urls on recent-item saves', async () => {
+        databaseService.getContentByXtreamId.mockResolvedValue({
+            id: 3941697,
+            title: 'Krypton',
+            type: 'series',
+            xtream_id: 290,
+        });
+
+        store.addRecentItem({
+            xtreamId: 290,
+            contentType: 'series',
+            playlist: signal({ id: 'playlist-1' }),
+            backdropUrl: 'https://example.com/krypton-backdrop.png',
+        });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        expect(databaseService.addRecentItem).toHaveBeenCalledWith(
+            3941697,
+            'playlist-1',
+            'https://example.com/krypton-backdrop.png'
+        );
+    });
+
+    it('backfills a backdrop without rewriting recent ordering', async () => {
+        databaseService.getContentByXtreamId.mockResolvedValue({
+            id: 3941697,
+            title: 'Krypton',
+            type: 'series',
+            xtream_id: 290,
+        });
+
+        await store.backfillContentBackdrop({
+            xtreamId: 290,
+            contentType: 'series',
+            playlist: signal({ id: 'playlist-1' }),
+            backdropUrl: ' https://example.com/krypton-backdrop.png ',
+        });
+
+        expect(databaseService.getContentByXtreamId).toHaveBeenCalledWith(
+            290,
+            'playlist-1',
+            'series'
+        );
+        expect(
+            databaseService.setContentBackdropIfMissing
+        ).toHaveBeenCalledWith(
+            3941697,
+            'https://example.com/krypton-backdrop.png'
+        );
+        expect(databaseService.addRecentItem).not.toHaveBeenCalled();
+    });
+});
diff --git a/libs/portal/xtream/data-access/src/lib/with-recent-items.ts b/libs/portal/xtream/data-access/src/lib/with-recent-items.ts
new file mode 100644
index 0000000..32e1f60
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/with-recent-items.ts
@@ -0,0 +1,269 @@
+import { inject, Signal } from '@angular/core';
+import {
+    patchState,
+    signalStoreFeature,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { firstValueFrom, pipe, switchMap, tap } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import {
+    buildPlaylistRecentItems,
+    Playlist,
+    PortalRecentItem,
+} from 'shared-interfaces';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+export interface RecentlyViewedItem extends PortalRecentItem {
+    /** @deprecated Redundant — always equals `id`. Retained for compat. */
+    content_id: number | string;
+}
+
+function mapDbRecentItem(
+    item: {
+        id: number;
+        title: string;
+        type: string;
+        poster_url: string;
+        backdrop_url?: string | null;
+        viewed_at?: string;
+        xtream_id: number;
+        category_id: number;
+    },
+    playlistId: string
+): RecentlyViewedItem {
+    return {
+        id: item.id,
+        title: item.title,
+        type: item.type as 'live' | 'movie' | 'series',
+        poster_url: item.poster_url,
+        backdrop_url: item.backdrop_url ?? undefined,
+        content_id: item.id,
+        playlist_id: playlistId,
+        viewed_at: item.viewed_at || '',
+        xtream_id: item.xtream_id,
+        category_id: item.category_id,
+    };
+}
+
+export const withRecentItems = function () {
+    const logger = createLogger('withRecentItems');
+    return signalStoreFeature(
+        withState({
+            recentItems: [],
+        }),
+        withMethods((store, dbService = inject(DatabaseService)) => ({
+            loadRecentItems: rxMethod<{ id: string }>(
+                pipe(
+                    switchMap(async (playlist) => {
+                        const items = await dbService.getRecentItems(
+                            playlist.id
+                        );
+                        return items.map((item) =>
+                            mapDbRecentItem(item, playlist.id)
+                        );
+                    }),
+                    tap((items: RecentlyViewedItem[]) =>
+                        patchState(store, { recentItems: items })
+                    )
+                )
+            ),
+        })),
+        withMethods(
+            (
+                store,
+                dbService = inject(DatabaseService),
+                playlistsService = inject(PlaylistsService)
+            ) => ({
+                addRecentItem: rxMethod<{
+                    xtreamId: number;
+                    contentType: 'live' | 'movie' | 'series';
+                    playlist: Signal<{ id: string }>;
+                    backdropUrl?: string;
+                }>(
+                    pipe(
+                        switchMap(
+                            async ({
+                                xtreamId,
+                                contentType,
+                                playlist,
+                                backdropUrl,
+                            }) => {
+                            const playlistId = playlist().id;
+                            const content = await dbService.getContentByXtreamId(
+                                xtreamId,
+                                playlistId,
+                                contentType
+                            );
+                            if (content) {
+                                await dbService.addRecentItem(
+                                    content.id,
+                                    playlistId,
+                                    backdropUrl
+                                );
+
+                                // Reload after add/update so re-watched items
+                                // immediately move to the top in recently-viewed.
+                                const items =
+                                    await dbService.getRecentItems(playlistId);
+                                patchState(store, {
+                                    recentItems: items.map((item) =>
+                                        mapDbRecentItem(item, playlistId)
+                                    ),
+                                });
+                            }
+                        })
+                    )
+                ),
+                async backfillContentBackdrop({
+                    xtreamId,
+                    contentType,
+                    playlist,
+                    backdropUrl,
+                }: {
+                    xtreamId: number;
+                    contentType: 'live' | 'movie' | 'series';
+                    playlist: Signal<{ id: string }>;
+                    backdropUrl?: string;
+                }): Promise<void> {
+                    if (!window.electron) {
+                        return;
+                    }
+
+                    const playlistId = playlist().id;
+                    const normalizedBackdropUrl = backdropUrl?.trim();
+                    if (!playlistId || !normalizedBackdropUrl) {
+                        return;
+                    }
+
+                    const content = await dbService.getContentByXtreamId(
+                        xtreamId,
+                        playlistId,
+                        contentType
+                    );
+                    if (!content) {
+                        return;
+                    }
+
+                    await dbService.setContentBackdropIfMissing(
+                        content.id,
+                        normalizedBackdropUrl
+                    );
+                },
+                clearRecentItems: rxMethod<{ id: string }>(
+                    pipe(
+                        switchMap(async (playlist) => {
+                            await dbService.clearPlaylistRecentItems(
+                                playlist.id
+                            );
+                            patchState(store, { recentItems: [] });
+                        })
+                    )
+                ),
+                removeRecentItem: rxMethod<{
+                    itemId: number;
+                    playlistId: string;
+                }>(
+                    pipe(
+                        switchMap(async ({ itemId, playlistId }) => {
+                            await dbService.removeRecentItem(
+                                itemId,
+                                playlistId
+                            );
+                            // Reload recent items to update UI
+                            const items =
+                                await dbService.getRecentItems(playlistId);
+                            patchState(store, {
+                                recentItems: items.map((item) =>
+                                    mapDbRecentItem(item, playlistId)
+                                ),
+                            });
+                        })
+                    )
+                ),
+                async loadGlobalRecentItems() {
+                    try {
+                        const xtreamItems =
+                            await dbService.getGlobalRecentlyViewed();
+                        const playlists = (await firstValueFrom(
+                            playlistsService.getAllPlaylists()
+                        )) as Playlist[];
+                        const playlistBackedItems =
+                            buildPlaylistRecentItems(playlists, {
+                                stalker: 'Stalker Portal',
+                                m3u: 'M3U',
+                            }).map((item) => ({
+                                ...item,
+                                content_id: item.id,
+                            })) as RecentlyViewedItem[];
+
+                        const normalizedXtream: RecentlyViewedItem[] = (
+                            xtreamItems || []
+                        ).map((item) => ({
+                            id: item.id,
+                            title: item.title,
+                            type: item.type as 'live' | 'movie' | 'series',
+                            poster_url: item.poster_url,
+                            backdrop_url: item.backdrop_url ?? undefined,
+                            content_id: item.id,
+                            playlist_id: item.playlist_id,
+                            playlist_name: item.playlist_name,
+                            viewed_at: item.viewed_at,
+                            xtream_id: item.xtream_id,
+                            category_id: item.category_id,
+                            source: 'xtream',
+                        }));
+
+                        const items = [
+                            ...normalizedXtream,
+                            ...playlistBackedItems,
+                        ].sort(
+                            (a, b) =>
+                                new Date(b.viewed_at).getTime() -
+                                new Date(a.viewed_at).getTime()
+                        );
+                        patchState(store, {
+                            recentItems: items,
+                        });
+                    } catch (error) {
+                        logger.error(
+                            'Error loading global recent items',
+                            error
+                        );
+                        patchState(store, { recentItems: [] });
+                    }
+                },
+                async clearGlobalRecentlyViewed() {
+                    try {
+                        await dbService.clearGlobalRecentlyViewed();
+                        const playlists = (await firstValueFrom(
+                            playlistsService.getAllPlaylists()
+                        )) as Playlist[];
+                        await Promise.all(
+                            playlists
+                                .filter(
+                                    (playlist) =>
+                                        Boolean(playlist.macAddress) ||
+                                        !playlist.serverUrl
+                                )
+                                .map((playlist) =>
+                                    firstValueFrom(
+                                        playlistsService.clearPlaylistRecentlyViewed(
+                                            playlist._id
+                                        )
+                                    )
+                                )
+                        );
+                        patchState(store, { recentItems: [] });
+                    } catch (error) {
+                        logger.error(
+                            'Error clearing global recently viewed',
+                            error
+                        );
+                    }
+                },
+            })
+        )
+    );
+};
diff --git a/libs/portal/xtream/data-access/src/lib/xtream-state.ts b/libs/portal/xtream/data-access/src/lib/xtream-state.ts
new file mode 100644
index 0000000..0f79c9b
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/lib/xtream-state.ts
@@ -0,0 +1,66 @@
+import { GlobalSearchResult } from 'services';
+import {
+    EpgItem,
+    XtreamCategory,
+    XtreamLiveStream,
+    XtreamSerieItem,
+    XtreamVodStream,
+} from 'shared-interfaces';
+import {
+    XtreamContentItem,
+    XtreamPlaylistData,
+} from './data-sources/xtream-data-source.interface';
+
+export type ContentType = 'live' | 'vod' | 'series';
+export type XtreamContentLoadState = 'idle' | 'loading' | 'ready' | 'error';
+export type XtreamContentLoadStateByType = Record<
+    ContentType,
+    XtreamContentLoadState
+>;
+
+export type PortalStatusType =
+    | 'active'
+    | 'inactive'
+    | 'expired'
+    | 'unavailable';
+
+export type XtreamContentInitBlockReason =
+    | 'cancelled'
+    | 'expired'
+    | 'inactive'
+    | 'unavailable'
+    | 'error';
+
+export interface XtreamPortalStatus {
+    status: 'active' | 'inactive' | 'expired' | 'unavailable';
+    message?: string;
+}
+
+export interface XtreamState {
+    isLoadingCategories: boolean;
+    isLoadingContent: boolean;
+    isImporting: boolean;
+    contentLoadStateByType: XtreamContentLoadStateByType;
+    liveCategories: XtreamCategory[];
+    vodCategories: XtreamCategory[];
+    serialCategories: XtreamCategory[];
+    liveStreams: XtreamLiveStream[];
+    vodStreams: XtreamVodStream[];
+    serialStreams: XtreamSerieItem[];
+    page: number;
+    limit: number;
+    selectedCategoryId: number | null;
+    searchResults: XtreamContentItem[];
+    selectedContentType: ContentType;
+    selectedItem: unknown | null;
+    importCount: number;
+    itemsToImport: number;
+    currentPlaylist: XtreamPlaylistData | null;
+    epgItems: EpgItem[];
+    hideExternalInfoDialog: boolean;
+    portalStatus: PortalStatusType;
+    contentInitBlockReason: XtreamContentInitBlockReason | null;
+    globalSearchResults: GlobalSearchResult[];
+    streamUrl: string;
+    playlistId: string | null;
+}
diff --git a/libs/portal/xtream/data-access/src/test-setup.ts b/libs/portal/xtream/data-access/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/xtream/data-access/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/xtream/data-access/tsconfig.json b/libs/portal/xtream/data-access/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/portal/xtream/data-access/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/portal/xtream/data-access/tsconfig.lib.json b/libs/portal/xtream/data-access/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/portal/xtream/data-access/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/xtream/data-access/tsconfig.spec.json b/libs/portal/xtream/data-access/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/xtream/data-access/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/portal/xtream/feature/jest.config.ts b/libs/portal/xtream/feature/jest.config.ts
new file mode 100644
index 0000000..6566025
--- /dev/null
+++ b/libs/portal/xtream/feature/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'portal-xtream-feature',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/portal/xtream/feature',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/portal/xtream/feature/project.json b/libs/portal/xtream/feature/project.json
new file mode 100644
index 0000000..509357d
--- /dev/null
+++ b/libs/portal/xtream/feature/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "portal-xtream-feature",
+    "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/portal/xtream/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:portal", "domain:xtream", "type:feature"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/portal/xtream/feature/jest.config.ts",
+                "tsConfig": "libs/portal/xtream/feature/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/portal/xtream/feature/src/index.ts b/libs/portal/xtream/feature/src/index.ts
new file mode 100644
index 0000000..2723356
--- /dev/null
+++ b/libs/portal/xtream/feature/src/index.ts
@@ -0,0 +1,16 @@
+export * from './lib/account-info/account-info.component';
+export * from './lib/category-management-dialog/category-management-dialog.component';
+export * from './lib/global-search-results/global-search-results.component';
+export * from './lib/live-stream-layout/live-stream-layout.component';
+export * from './lib/loading-overlay.component';
+export * from './lib/player-dialog/player-dialog.component';
+export * from './lib/portal-channels-list/portal-channels-list.component';
+export * from './lib/recently-added/recently-added.component';
+export * from './lib/search-results/search-results.component';
+export * from './lib/serial-details/serial-details.component';
+export * from './lib/xtream-collection-detail.component';
+export * from './lib/vod-details/vod-details-route.component';
+export * from './lib/xtream-content-gate.component';
+export * from './lib/xtream-catalog-facade.service';
+export * from './lib/xtream-feature.routes';
+export * from './lib/xtream-workspace-route-session.service';
diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.html b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.html
new file mode 100644
index 0000000..a5ae8ee
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.html
@@ -0,0 +1,218 @@
+<section mat-dialog-title class="account-dialog__hero">
+    <div class="account-dialog__hero-copy">
+        <div class="account-dialog__eyebrow">
+            <span class="account-dialog__eyebrow-mark"></span>
+            @if (accountInfo(); as info) {
+                {{ info.server_info?.server_protocol || 'Xtream' }}
+                @if (info.server_info?.timezone) {
+                    <span class="account-dialog__eyebrow-divider"></span>
+                    {{ info.server_info?.timezone }}
+                }
+            } @else {
+                Xtream
+            }
+        </div>
+
+        <div class="account-dialog__headline-row">
+            <div>
+                <h2 class="account-dialog__title">
+                    {{ 'XTREAM.ACCOUNT_INFO.TITLE' | translate }}
+                </h2>
+                <p class="account-dialog__subtitle">
+                    {{ playlistLabel() }}
+                </p>
+            </div>
+
+            @if (accountInfo(); as info) {
+                <div class="account-dialog__status-cluster">
+                    <span
+                        class="account-dialog__status-pill"
+                        [class.account-dialog__status-pill--active]="isActive()"
+                    >
+                        {{ info.user_info?.status || '-' }}
+                    </span>
+
+                    @if (isTrial()) {
+                        <span
+                            class="account-dialog__status-pill account-dialog__status-pill--trial"
+                        >
+                            {{
+                                'XTREAM.ACCOUNT_INFO.TRIAL_ACCOUNT' | translate
+                            }}
+                        </span>
+                    }
+                </div>
+            }
+        </div>
+
+        @if (accountInfo()?.user_info?.message) {
+            <div class="account-dialog__message">
+                {{ accountInfo()?.user_info?.message }}
+            </div>
+        } @else if (loadState() === 'loading') {
+            <p class="account-dialog__loading-copy">
+                {{ 'LOADING' | translate }}...
+            </p>
+        }
+    </div>
+
+    <div class="account-dialog__hero-stats">
+        @if (loadState() === 'ready') {
+            @for (stat of heroStats(); track stat.labelKey) {
+                <article class="account-stat">
+                    <div class="account-stat__icon">
+                        <mat-icon>{{ stat.icon }}</mat-icon>
+                    </div>
+                    <div class="account-stat__label">
+                        {{ stat.labelKey | translate }}
+                    </div>
+                    <div class="account-stat__value">
+                        {{ stat.value }}
+                    </div>
+                    @if (stat.meter !== null) {
+                        <div class="account-stat__meter">
+                            <span [style.width.%]="stat.meter"></span>
+                        </div>
+                    }
+                </article>
+            }
+        } @else {
+            @for (item of skeletonStats; track item) {
+                <div class="account-skeleton account-skeleton--stat"></div>
+            }
+        }
+    </div>
+</section>
+
+<mat-dialog-content class="account-dialog__content">
+    @if (loadState() === 'error') {
+        <section class="account-dialog__error-state">
+            <div class="account-dialog__error-icon">
+                <mat-icon>signal_wifi_connected_no_internet_4</mat-icon>
+            </div>
+            <h3>
+                {{ 'PORTALS.ERROR_VIEW.PORTAL_UNAVAILABLE.TITLE' | translate }}
+            </h3>
+            <p>
+                {{
+                    'PORTALS.ERROR_VIEW.PORTAL_UNAVAILABLE.DESCRIPTION'
+                        | translate
+                }}
+            </p>
+            <button mat-flat-button color="primary" (click)="reload()">
+                {{ 'RETRY' | translate }}
+            </button>
+        </section>
+    } @else if (loadState() === 'loading') {
+        <div class="account-dialog__grid">
+            @for (panel of skeletonPanels; track panel) {
+                <section class="account-panel account-panel--loading">
+                    <div class="account-skeleton account-skeleton--heading"></div>
+                    <div class="account-skeleton account-skeleton--row"></div>
+                    <div class="account-skeleton account-skeleton--row"></div>
+                    <div class="account-skeleton account-skeleton--row"></div>
+                    <div class="account-skeleton account-skeleton--row short"></div>
+                </section>
+            }
+        </div>
+    } @else if (accountInfo(); as info) {
+        <div class="account-dialog__grid">
+            <section class="account-panel">
+                <div class="account-panel__header">
+                    <p class="account-panel__eyebrow">
+                        {{ 'XTREAM.ACCOUNT_INFO.USER_INFO' | translate }}
+                    </p>
+                    <h3>{{ info.user_info?.username || '-' }}</h3>
+                </div>
+
+                <dl class="account-detail-list">
+                    @for (row of userDetails(); track row.labelKey) {
+                        <div class="account-detail-row">
+                            <dt>{{ row.labelKey | translate }}</dt>
+                            <dd
+                                [class.account-detail-row__value--mono]="
+                                    row.mono
+                                "
+                                [class.account-detail-row__value--accent]="
+                                    row.tone === 'accent'
+                                "
+                                [class.account-detail-row__value--positive]="
+                                    row.tone === 'positive'
+                                "
+                                [class.account-detail-row__value--warning]="
+                                    row.tone === 'warning'
+                                "
+                            >
+                                @if (row.translateValue) {
+                                    {{ row.value | translate }}
+                                } @else {
+                                    {{ row.value }}
+                                }
+                            </dd>
+                        </div>
+                    }
+                </dl>
+
+                <div class="account-chip-section">
+                    <p class="account-chip-section__label">
+                        {{ 'XTREAM.ACCOUNT_INFO.ALLOWED_FORMATS' | translate }}
+                    </p>
+                    <div class="account-chip-group">
+                        @for (format of allowedFormats(); track format) {
+                            <span class="account-chip">
+                                {{ format }}
+                            </span>
+                        } @empty {
+                            <span class="account-chip account-chip--muted">
+                                -
+                            </span>
+                        }
+                    </div>
+                </div>
+            </section>
+
+            <section class="account-panel">
+                <div class="account-panel__header">
+                    <p class="account-panel__eyebrow">
+                        {{ 'XTREAM.ACCOUNT_INFO.SERVER_INFO' | translate }}
+                    </p>
+                    <h3>{{ serverHost() }}</h3>
+                </div>
+
+                <dl class="account-detail-list">
+                    @for (row of serverDetails(); track row.labelKey) {
+                        <div class="account-detail-row">
+                            <dt>{{ row.labelKey | translate }}</dt>
+                            <dd
+                                [class.account-detail-row__value--mono]="
+                                    row.mono
+                                "
+                            >
+                                {{ row.value }}
+                            </dd>
+                        </div>
+                    }
+                </dl>
+
+                <div class="account-chip-section">
+                    <p class="account-chip-section__label">
+                        {{ 'XTREAM.ACCOUNT_INFO.PORTS' | translate }}
+                    </p>
+                    <div class="account-chip-group">
+                        @for (port of ports(); track port.labelKey) {
+                            <span class="account-chip account-chip--mono">
+                                {{ port.labelKey | translate }} {{ port.value }}
+                            </span>
+                        }
+                    </div>
+                </div>
+            </section>
+        </div>
+    }
+</mat-dialog-content>
+
+<mat-dialog-actions class="account-dialog__actions">
+    <button mat-stroked-button mat-dialog-close class="account-dialog__close">
+        {{ 'CLOSE' | translate }}
+    </button>
+</mat-dialog-actions>
diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
new file mode 100644
index 0000000..f553b6f
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
@@ -0,0 +1,477 @@
+:host {
+    display: block;
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+}
+
+// ─── Hero header ────────────────────────────────────────────────────────────
+.account-dialog__hero {
+    margin: 0;
+    padding: 20px 20px 18px;
+    display: grid;
+    gap: 18px;
+    background:
+        var(--app-accent-gradient),
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+}
+
+.account-dialog__hero-copy {
+    display: grid;
+    gap: 10px;
+}
+
+.account-dialog__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    color: var(--app-eyebrow-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.account-dialog__eyebrow-mark {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--app-provider-xtream, var(--mat-sys-primary));
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 14%, transparent);
+}
+
+.account-dialog__eyebrow-divider {
+    width: 3px;
+    height: 3px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.5;
+}
+
+.account-dialog__headline-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+}
+
+.account-dialog__title {
+    margin: 0;
+    font-size: 1.3rem;
+    line-height: 1.2;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+}
+
+.account-dialog__subtitle {
+    margin: 4px 0 0;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.88rem;
+}
+
+// ─── Status pills ───────────────────────────────────────────────────────────
+.account-dialog__status-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.account-dialog__status-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 28px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid var(--app-separator);
+    background: var(--mat-sys-surface-container);
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+    font-size: 0.76rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.account-dialog__status-pill--active {
+    border-color: color-mix(in srgb, #34d399 30%, transparent);
+    background: color-mix(in srgb, #34d399 12%, transparent);
+    color: #2db36f;
+}
+
+.account-dialog__status-pill--trial {
+    border-color: color-mix(in srgb, #fbbf24 28%, transparent);
+    background: color-mix(in srgb, #f59e0b 12%, transparent);
+    color: #d18b09;
+}
+
+// ─── Messages ───────────────────────────────────────────────────────────────
+.account-dialog__message,
+.account-dialog__loading-copy {
+    margin: 0;
+    max-width: 60ch;
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+}
+
+.account-dialog__message {
+    padding: 10px 14px;
+    border-radius: 10px;
+    border: 1px solid var(--app-separator);
+    background: var(--mat-sys-surface-container);
+    line-height: 1.5;
+    font-size: 0.88rem;
+}
+
+// ─── Hero stat cards ────────────────────────────────────────────────────────
+.account-dialog__hero-stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.account-stat {
+    display: grid;
+    gap: 6px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1px solid var(--app-widget-border, transparent);
+    background: var(--app-widget-bg, var(--mat-sys-surface-container));
+    box-shadow: var(--app-widget-shadow, none);
+    // Subtle inset highlight matching widget-shell pattern
+    outline: 1px solid rgba(255, 255, 255, 0.04);
+    outline-offset: -1px;
+}
+
+.account-stat__icon {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 12%, transparent);
+    color: var(--app-provider-xtream, var(--mat-sys-primary));
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.account-stat__label {
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.account-stat__value {
+    font-size: 1.3rem;
+    font-weight: 650;
+    letter-spacing: -0.03em;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+}
+
+.account-stat__meter {
+    position: relative;
+    overflow: hidden;
+    height: 4px;
+    border-radius: 999px;
+    background: var(--app-separator);
+}
+
+.account-stat__meter span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--app-provider-xtream, var(--mat-sys-primary));
+}
+
+// ─── Content area ───────────────────────────────────────────────────────────
+.account-dialog__content {
+    margin: 0;
+    padding: 20px;
+    background: var(--app-widget-bg, var(--mat-sys-surface));
+}
+
+.account-dialog__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+}
+
+// ─── Detail panels ──────────────────────────────────────────────────────────
+.account-panel {
+    display: grid;
+    gap: 14px;
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid var(--app-widget-border, transparent);
+    background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
+    box-shadow: var(--app-widget-shadow, none);
+    outline: 1px solid rgba(255, 255, 255, 0.04);
+    outline-offset: -1px;
+}
+
+.account-panel__header {
+    display: grid;
+    gap: 4px;
+}
+
+.account-panel__header h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+}
+
+.account-panel__eyebrow {
+    margin: 0;
+    color: var(--app-eyebrow-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+// ─── Detail rows ────────────────────────────────────────────────────────────
+.account-detail-list {
+    display: grid;
+    gap: 0;
+    margin: 0;
+}
+
+.account-detail-row {
+    display: grid;
+    grid-template-columns: minmax(120px, 140px) minmax(0, 1fr);
+    gap: 12px;
+    align-items: baseline;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--app-separator);
+}
+
+.account-detail-row:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+}
+
+.account-detail-row dt {
+    margin: 0;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.account-detail-row dd {
+    margin: 0;
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+    font-size: 0.9rem;
+    font-weight: 500;
+    word-break: break-word;
+}
+
+.account-detail-row__value--mono {
+    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
+    font-size: 0.84rem;
+}
+
+.account-detail-row__value--accent {
+    color: var(--app-provider-xtream, var(--mat-sys-primary));
+}
+
+.account-detail-row__value--positive {
+    color: #2db36f;
+}
+
+.account-detail-row__value--warning {
+    color: #d18b09;
+}
+
+// ─── Chip sections ──────────────────────────────────────────────────────────
+.account-chip-section {
+    display: grid;
+    gap: 10px;
+}
+
+.account-chip-section__label {
+    margin: 0;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.account-chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.account-chip {
+    display: inline-flex;
+    align-items: center;
+    min-height: 28px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 16%, transparent);
+    background: color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 8%, transparent);
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.account-chip--mono {
+    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
+    text-transform: none;
+}
+
+.account-chip--muted {
+    border-color: var(--app-separator);
+    background: var(--mat-sys-surface-container);
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+}
+
+// ─── Error state ────────────────────────────────────────────────────────────
+.account-dialog__error-state {
+    display: grid;
+    justify-items: center;
+    gap: 12px;
+    padding: 36px 20px;
+    border-radius: 16px;
+    border: 1px dashed var(--app-separator);
+    background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
+    text-align: center;
+}
+
+.account-dialog__error-state h3,
+.account-dialog__error-state p {
+    margin: 0;
+}
+
+.account-dialog__error-state p {
+    max-width: 52ch;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    line-height: 1.5;
+    font-size: 0.88rem;
+}
+
+.account-dialog__error-icon {
+    width: 48px;
+    height: 48px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
+    color: var(--mat-sys-error);
+}
+
+// ─── Skeleton loading ───────────────────────────────────────────────────────
+.account-panel--loading {
+    gap: 12px;
+}
+
+.account-skeleton {
+    position: relative;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--app-separator);
+}
+
+.account-skeleton::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in srgb, var(--app-heading-color, var(--mat-sys-on-surface)) 10%, transparent),
+        transparent
+    );
+    animation: account-dialog-shimmer 1.4s infinite;
+}
+
+.account-skeleton--stat {
+    min-height: 110px;
+    border-radius: 12px;
+}
+
+.account-skeleton--heading {
+    width: 54%;
+    height: 20px;
+}
+
+.account-skeleton--row {
+    width: 100%;
+    height: 16px;
+}
+
+.account-skeleton--row.short {
+    width: 62%;
+}
+
+// ─── Footer actions ─────────────────────────────────────────────────────────
+.account-dialog__actions {
+    padding: 0 20px 20px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    border-top: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+    background: var(--app-widget-bg, var(--mat-sys-surface));
+}
+
+.account-dialog__close {
+    min-width: 100px;
+    border-radius: 999px;
+}
+
+@keyframes account-dialog-shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+// ─── Responsive breakpoints ─────────────────────────────────────────────────
+@media (max-width: 980px) {
+    .account-dialog__hero-stats,
+    .account-dialog__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 720px) {
+    .account-dialog__hero,
+    .account-dialog__content,
+    .account-dialog__actions {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    .account-dialog__headline-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .account-dialog__status-cluster {
+        justify-content: flex-start;
+    }
+
+    .account-dialog__hero-stats,
+    .account-dialog__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .account-detail-row {
+        grid-template-columns: 1fr;
+        gap: 4px;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.spec.ts b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.spec.ts
new file mode 100644
index 0000000..04d35f3
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.spec.ts
@@ -0,0 +1,95 @@
+import { signal } from '@angular/core';
+import type { WritableSignal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+    XtreamApiService,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { AccountInfoComponent } from './account-info.component';
+
+describe('AccountInfoComponent', () => {
+    let fixture: ComponentFixture<AccountInfoComponent>;
+    let component: AccountInfoComponent;
+    let xtreamApiService: {
+        getAccountInfo: jest.Mock;
+    };
+    let currentPlaylist: WritableSignal<null>;
+
+    beforeEach(async () => {
+        xtreamApiService = {
+            getAccountInfo: jest.fn().mockResolvedValue({
+                user_info: {
+                    active_cons: '0',
+                    allowed_output_formats: [],
+                    max_connections: '0',
+                    status: 'Active',
+                    username: 'dialog-user',
+                },
+                server_info: {
+                    server_protocol: 'http',
+                    url: 'dialog.example.test',
+                },
+            }),
+        };
+        currentPlaylist = signal(null);
+
+        await TestBed.configureTestingModule({
+            imports: [
+                AccountInfoComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {
+                        playlist: {
+                            id: 'dialog-playlist',
+                            title: 'Dialog Xtream',
+                            serverUrl: 'https://dialog.example.test',
+                            username: 'dialog-user',
+                            password: 'dialog-secret',
+                        },
+                    },
+                },
+                {
+                    provide: XtreamApiService,
+                    useValue: xtreamApiService,
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: {
+                        currentPlaylist,
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AccountInfoComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        await fixture.whenStable();
+    });
+
+    it('loads account info from dialog-supplied playlist credentials', () => {
+        expect(xtreamApiService.getAccountInfo).toHaveBeenCalledWith({
+            serverUrl: 'https://dialog.example.test',
+            username: 'dialog-user',
+            password: 'dialog-secret',
+        });
+        expect(component.loadState()).toBe('ready');
+        expect(component.playlistLabel()).toBe('Dialog Xtream');
+    });
+
+    it('shows unknown content counts when dashboard does not supply them', () => {
+        expect(component.heroStats().map((stat) => stat.value)).toEqual([
+            '0/0',
+            '-',
+            '-',
+            '-',
+        ]);
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.ts b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.ts
new file mode 100644
index 0000000..80a6662
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.ts
@@ -0,0 +1,265 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    XtreamAccountInfo,
+    XtreamApiService,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import type { XtreamAccountInfoDialogData } from 'shared-interfaces';
+
+type AccountLoadState = 'loading' | 'ready' | 'error';
+
+interface AccountStat {
+    icon: string;
+    labelKey: string;
+    value: string;
+    meter: number | null;
+}
+
+interface AccountDetailRow {
+    labelKey: string;
+    value: string;
+    mono?: boolean;
+    tone?: 'accent' | 'positive' | 'warning';
+    translateValue?: boolean;
+}
+
+interface AccountPort {
+    labelKey: string;
+    value: string;
+}
+
+@Component({
+    selector: 'app-account-info',
+    imports: [MatButtonModule, MatDialogModule, MatIconModule, TranslatePipe],
+    templateUrl: './account-info.component.html',
+    styleUrl: './account-info.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccountInfoComponent {
+    readonly data =
+        inject<XtreamAccountInfoDialogData | null>(MAT_DIALOG_DATA, {
+            optional: true,
+        }) ?? {};
+    private readonly xtreamApiService = inject(XtreamApiService);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly logger = createLogger('XtreamAccountInfo');
+
+    readonly currentPlaylist = computed(
+        () => this.data.playlist ?? this.xtreamStore.currentPlaylist()
+    );
+    readonly loadState = signal<AccountLoadState>('loading');
+    readonly accountInfo = signal<XtreamAccountInfo | null>(null);
+    readonly skeletonStats = [1, 2, 3, 4];
+    readonly skeletonPanels = [1, 2];
+
+    readonly isActive = computed(
+        () => this.accountInfo()?.user_info?.status === 'Active'
+    );
+    readonly isTrial = computed(
+        () => this.accountInfo()?.user_info?.is_trial === '1'
+    );
+    readonly playlistLabel = computed(() => {
+        const playlist = this.currentPlaylist();
+        const info = this.accountInfo();
+
+        return (
+            playlist?.title ||
+            playlist?.name ||
+            info?.server_info?.url ||
+            info?.user_info?.username ||
+            '-'
+        );
+    });
+    readonly serverHost = computed(
+        () => this.accountInfo()?.server_info?.url || '-'
+    );
+    readonly activeConnections = computed(() =>
+        this.parseNumber(this.accountInfo()?.user_info?.active_cons)
+    );
+    readonly maxConnections = computed(() =>
+        this.parseNumber(this.accountInfo()?.user_info?.max_connections)
+    );
+    readonly connectionUsagePercent = computed(() => {
+        const maxConnections = this.maxConnections();
+
+        if (maxConnections <= 0) {
+            return 0;
+        }
+
+        return Math.min(
+            100,
+            Math.round((this.activeConnections() / maxConnections) * 100)
+        );
+    });
+    readonly activeConnectionsLabel = computed(
+        () =>
+            `${this.activeConnections()}/${Math.max(this.maxConnections(), 0)}`
+    );
+    readonly formattedExpDate = computed(() =>
+        this.formatUnixDate(this.accountInfo()?.user_info?.exp_date)
+    );
+    readonly formattedCreatedDate = computed(() =>
+        this.formatUnixDate(this.accountInfo()?.user_info?.created_at)
+    );
+    readonly allowedFormats = computed(
+        () => this.accountInfo()?.user_info?.allowed_output_formats ?? []
+    );
+    readonly ports = computed<AccountPort[]>(() => {
+        const serverInfo = this.accountInfo()?.server_info;
+
+        return [
+            {
+                labelKey: 'XTREAM.ACCOUNT_INFO.HTTP_PORT',
+                value: serverInfo?.port || '-',
+            },
+            {
+                labelKey: 'XTREAM.ACCOUNT_INFO.HTTPS_PORT',
+                value: serverInfo?.https_port || '-',
+            },
+            {
+                labelKey: 'XTREAM.ACCOUNT_INFO.RTMP_PORT',
+                value: serverInfo?.rtmp_port || '-',
+            },
+        ];
+    });
+    readonly heroStats = computed<AccountStat[]>(() => [
+        {
+            icon: 'bolt',
+            labelKey: 'XTREAM.ACCOUNT_INFO.ACTIVE_CONNECTIONS',
+            value: this.activeConnectionsLabel(),
+            meter: this.connectionUsagePercent(),
+        },
+        {
+            icon: 'live_tv',
+            labelKey: 'XTREAM.ACCOUNT_INFO.LIVE_TV',
+            value: this.formatOptionalCount(this.data.liveStreamsCount),
+            meter: null,
+        },
+        {
+            icon: 'movie',
+            labelKey: 'XTREAM.ACCOUNT_INFO.MOVIES',
+            value: this.formatOptionalCount(this.data.vodStreamsCount),
+            meter: null,
+        },
+        {
+            icon: 'tv',
+            labelKey: 'XTREAM.ACCOUNT_INFO.TV_SERIES',
+            value: this.formatOptionalCount(this.data.seriesCount),
+            meter: null,
+        },
+    ]);
+    readonly userDetails = computed<AccountDetailRow[]>(() => [
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.STATUS',
+            value: this.accountInfo()?.user_info?.status || '-',
+            tone: this.isActive() ? 'positive' : undefined,
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.USERNAME',
+            value: this.accountInfo()?.user_info?.username || '-',
+            mono: true,
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.ACTIVE_CONNECTIONS',
+            value: this.activeConnectionsLabel(),
+            tone: 'accent',
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.CREATED',
+            value: this.formattedCreatedDate(),
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.EXPIRES',
+            value: this.formattedExpDate(),
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.TRIAL_ACCOUNT',
+            value: this.isTrial()
+                ? 'XTREAM.ACCOUNT_INFO.YES'
+                : 'XTREAM.ACCOUNT_INFO.NO',
+            translateValue: true,
+            tone: this.isTrial() ? 'warning' : undefined,
+        },
+    ]);
+    readonly serverDetails = computed<AccountDetailRow[]>(() => [
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.URL',
+            value: this.accountInfo()?.server_info?.url || '-',
+            mono: true,
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.PROTOCOL',
+            value: this.accountInfo()?.server_info?.server_protocol || '-',
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.TIMEZONE',
+            value: this.accountInfo()?.server_info?.timezone || '-',
+        },
+        {
+            labelKey: 'XTREAM.ACCOUNT_INFO.SERVER_TIME',
+            value: this.accountInfo()?.server_info?.time_now || '-',
+            mono: true,
+        },
+    ]);
+
+    constructor() {
+        void this.reload();
+    }
+
+    async reload(): Promise<void> {
+        const playlist = this.currentPlaylist();
+
+        if (!playlist?.serverUrl || !playlist.username || !playlist.password) {
+            this.loadState.set('error');
+            this.accountInfo.set(null);
+            return;
+        }
+
+        this.loadState.set('loading');
+
+        try {
+            const accountInfo = await this.xtreamApiService.getAccountInfo({
+                serverUrl: playlist.serverUrl,
+                username: playlist.username,
+                password: playlist.password,
+            });
+
+            this.accountInfo.set(accountInfo);
+            this.loadState.set('ready');
+        } catch (error) {
+            this.logger.error('Failed to fetch account info', error);
+            this.accountInfo.set(null);
+            this.loadState.set('error');
+        }
+    }
+
+    private formatUnixDate(timestamp?: string): string {
+        const value = Number.parseInt(timestamp ?? '', 10);
+
+        if (!Number.isFinite(value) || value <= 0) {
+            return '-';
+        }
+
+        return new Date(value * 1000).toLocaleDateString();
+    }
+
+    private parseNumber(value?: string): number {
+        const parsed = Number.parseInt(value ?? '', 10);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+
+    private formatOptionalCount(value?: number): string {
+        return Number.isFinite(value) ? String(value) : '-';
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html
new file mode 100644
index 0000000..4d4f30e
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.html
@@ -0,0 +1,111 @@
+<h2 mat-dialog-title>{{ 'XTREAM.CATEGORY_MANAGEMENT.TITLE' | translate }}</h2>
+
+<mat-dialog-content>
+    @if (isLoading()) {
+        <div class="loading-container">
+            <mat-spinner diameter="40" />
+            <p>{{ 'XTREAM.CATEGORY_MANAGEMENT.LOADING' | translate }}</p>
+        </div>
+    } @else {
+        <div class="header-actions">
+            <div class="selection-info">
+                {{ 'XTREAM.CATEGORY_MANAGEMENT.SELECTED' | translate }}:
+                <strong>{{ selectedCount() }}</strong> / {{ totalCount() }}
+            </div>
+            <div class="bulk-actions">
+                <button
+                    mat-stroked-button
+                    (click)="selectAll()"
+                    [disabled]="allSelected()"
+                >
+                    <mat-icon>check_box</mat-icon>
+                    {{ 'XTREAM.CATEGORY_MANAGEMENT.SELECT_ALL' | translate }}
+                </button>
+                <button
+                    mat-stroked-button
+                    (click)="deselectAll()"
+                    [disabled]="selectedCount() === 0"
+                >
+                    <mat-icon>check_box_outline_blank</mat-icon>
+                    {{ 'XTREAM.CATEGORY_MANAGEMENT.DESELECT_ALL' | translate }}
+                </button>
+            </div>
+        </div>
+
+        <label class="search-inline">
+            <mat-icon class="search-inline__icon">search</mat-icon>
+            <input
+                type="search"
+                spellcheck="false"
+                [value]="searchTerm()"
+                (input)="searchTerm.set($any($event.target).value)"
+                [placeholder]="
+                    'XTREAM.CATEGORY_MANAGEMENT.SEARCH_PLACEHOLDER'
+                        | translate
+                "
+            />
+            @if (searchTerm()) {
+                <button
+                    type="button"
+                    mat-icon-button
+                    class="search-inline__clear"
+                    (click)="clearSearch()"
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+        </label>
+
+        <div class="categories-list">
+            @for (category of filteredCategories(); track category.id) {
+                <div
+                    class="category-item"
+                    [attr.data-category-id]="category.xtream_id"
+                    (click)="toggleCategory(category)"
+                >
+                    <mat-checkbox
+                        [checked]="category.selected"
+                        (click)="$event.stopPropagation()"
+                        (change)="toggleCategory(category)"
+                    >
+                    </mat-checkbox>
+                    <span class="category-name">{{ category.name }}</span>
+                    <span class="item-count"
+                        >({{ getItemCount(category) }})</span
+                    >
+                </div>
+            } @empty {
+                <div class="empty-message">
+                    @if (searchTerm()) {
+                        {{
+                            'XTREAM.CATEGORY_MANAGEMENT.NO_RESULTS' | translate
+                        }}
+                    } @else {
+                        {{
+                            'XTREAM.CATEGORY_MANAGEMENT.NO_CATEGORIES'
+                                | translate
+                        }}
+                    }
+                </div>
+            }
+        </div>
+    }
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="cancel()" [disabled]="isSaving()">
+        {{ 'CLOSE' | translate }}
+    </button>
+    <button
+        mat-flat-button
+        color="primary"
+        (click)="save()"
+        [disabled]="isLoading() || isSaving()"
+    >
+        @if (isSaving()) {
+            <mat-spinner diameter="20" />
+        } @else {
+            {{ 'XTREAM.CATEGORY_MANAGEMENT.SAVE' | translate }}
+        }
+    </button>
+</mat-dialog-actions>
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
new file mode 100644
index 0000000..2f1944e
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
@@ -0,0 +1,170 @@
+::ng-deep .mat-mdc-dialog-content {
+    overflow: hidden !important;
+}
+
+.mat-mdc-dialog-content {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    gap: 16px;
+}
+
+.header-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.selection-info {
+    font-size: 0.8125rem;
+    color: var(--mat-sys-on-surface-variant);
+
+    strong {
+        color: var(--mat-sys-primary);
+    }
+}
+
+.bulk-actions {
+    display: flex;
+    gap: 8px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.search-inline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    min-height: 36px;
+    border-radius: 10px;
+    border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+    background: var(--app-search-bg, var(--mat-sys-surface-container));
+    cursor: text;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--mat-sys-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    }
+}
+
+.search-inline__icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--mat-sys-on-surface-variant);
+    flex-shrink: 0;
+}
+
+.search-inline input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--mat-sys-on-surface);
+    font: inherit;
+    font-size: 0.84rem;
+    width: 100%;
+    min-width: 0;
+
+    &::placeholder {
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.6;
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}
+
+.search-inline__clear {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    line-height: 24px;
+    flex-shrink: 0;
+    padding: 0;
+
+    mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+.categories-list {
+    flex: 1;
+    min-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--mat-sys-outline-variant);
+    border-radius: 8px;
+}
+
+.category-item {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    min-height: 30px;
+    cursor: pointer;
+    gap: 6px;
+    transition: background-color 0.12s ease;
+
+    &:hover {
+        background-color: var(--mat-sys-surface-container);
+    }
+
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--mat-sys-surface-container);
+    }
+
+    mat-checkbox {
+        --mdc-checkbox-state-layer-size: 28px;
+    }
+}
+
+.category-name {
+    flex: 1;
+    font-size: 0.8125rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.empty-message {
+    padding: 24px;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.8125rem;
+}
+
+:host ::ng-deep {
+    .mat-mdc-dialog-content {
+        min-width: 480px;
+        max-width: 600px;
+        max-height: 85vh !important;
+    }
+}
+
+mat-dialog-actions {
+    button {
+        mat-spinner {
+            display: inline-block;
+        }
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts
new file mode 100644
index 0000000..44e1cac
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.ts
@@ -0,0 +1,199 @@
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogModule,
+    MatDialogRef,
+} from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslatePipe } from '@ngx-translate/core';
+import { DatabaseService, XCategoryFromDb } from 'services';
+import { createLogger } from '@iptvnator/portal/shared/util';
+
+export interface CategoryManagementDialogData {
+    playlistId: string;
+    contentType: 'live' | 'vod' | 'series';
+    itemCounts: Map<number, number>;
+}
+
+interface CategoryWithSelection extends XCategoryFromDb {
+    selected: boolean;
+}
+
+@Component({
+    selector: 'app-category-management-dialog',
+    imports: [
+        MatDialogModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        TranslatePipe,
+    ],
+    templateUrl: './category-management-dialog.component.html',
+    styleUrl: './category-management-dialog.component.scss',
+})
+export class CategoryManagementDialogComponent implements OnInit {
+    private readonly dbService = inject(DatabaseService);
+    private readonly dialogRef = inject(
+        MatDialogRef<CategoryManagementDialogComponent>
+    );
+    readonly data = inject<CategoryManagementDialogData>(MAT_DIALOG_DATA);
+    private readonly logger = createLogger('CategoryManagementDialog');
+
+    readonly isLoading = signal(true);
+    readonly isSaving = signal(false);
+    readonly categories = signal<CategoryWithSelection[]>([]);
+    readonly searchTerm = signal('');
+
+    readonly filteredCategories = computed(() => {
+        const term = this.searchTerm().toLowerCase();
+        if (!term) return this.categories();
+        return this.categories().filter((c) =>
+            c.name.toLowerCase().includes(term)
+        );
+    });
+
+    readonly selectedCount = computed(
+        () => this.categories().filter((c) => c.selected).length
+    );
+
+    readonly totalCount = computed(() => this.categories().length);
+
+    readonly allSelected = computed(
+        () =>
+            this.categories().length > 0 &&
+            this.categories().every((c) => c.selected)
+    );
+
+    readonly someSelected = computed(
+        () => this.categories().some((c) => c.selected) && !this.allSelected()
+    );
+
+    async ngOnInit(): Promise<void> {
+        await this.loadCategories();
+    }
+
+    private async loadCategories(): Promise<void> {
+        try {
+            const type = this.getDbType();
+            const allCategories = await this.waitForCategories(type);
+            this.categories.set(
+                allCategories.map((c) => ({
+                    ...c,
+                    selected: !c.hidden,
+                }))
+            );
+        } catch (error) {
+            this.logger.error('Error loading categories', error);
+        } finally {
+            this.isLoading.set(false);
+        }
+    }
+
+    private async waitForCategories(
+        type: 'live' | 'movies' | 'series'
+    ): Promise<XCategoryFromDb[]> {
+        const retryDeadlineMs = Date.now() + 10000;
+        const expectedCategoryCount = this.data.itemCounts.size;
+
+        while (true) {
+            const categories = await this.dbService.getAllXtreamCategories(
+                this.data.playlistId,
+                type
+            );
+
+            if (
+                categories.length > 0 ||
+                expectedCategoryCount === 0 ||
+                Date.now() >= retryDeadlineMs
+            ) {
+                return categories;
+            }
+
+            await new Promise((resolve) => setTimeout(resolve, 250));
+        }
+    }
+
+    clearSearch(): void {
+        this.searchTerm.set('');
+    }
+
+    getItemCount(category: CategoryWithSelection): number {
+        const categoryId = Number(category.id);
+        return this.data.itemCounts.get(categoryId) ?? 0;
+    }
+
+    private getDbType(): 'live' | 'movies' | 'series' {
+        switch (this.data.contentType) {
+            case 'live':
+                return 'live';
+            case 'vod':
+                return 'movies';
+            case 'series':
+                return 'series';
+        }
+    }
+
+    toggleCategory(category: CategoryWithSelection): void {
+        this.categories.update((cats) =>
+            cats.map((c) =>
+                c.id === category.id ? { ...c, selected: !c.selected } : c
+            )
+        );
+    }
+
+    selectAll(): void {
+        this.categories.update((cats) =>
+            cats.map((c) => ({ ...c, selected: true }))
+        );
+    }
+
+    deselectAll(): void {
+        this.categories.update((cats) =>
+            cats.map((c) => ({ ...c, selected: false }))
+        );
+    }
+
+    toggleAll(): void {
+        if (this.allSelected()) {
+            this.deselectAll();
+        } else {
+            this.selectAll();
+        }
+    }
+
+    async save(): Promise<void> {
+        this.isSaving.set(true);
+        try {
+            const categories = this.categories();
+            const toHide = categories.filter((c) => !c.selected).map((c) => c.id);
+            const toShow = categories.filter((c) => c.selected).map((c) => c.id);
+
+            if (toHide.length > 0) {
+                await this.dbService.updateCategoryVisibility(toHide, true);
+            }
+            if (toShow.length > 0) {
+                await this.dbService.updateCategoryVisibility(toShow, false);
+            }
+
+            this.dialogRef.close(true);
+        } catch (error) {
+            this.logger.error('Error saving category visibility', error);
+            inject(MatSnackBar).open(
+                'Failed to save category visibility',
+                'Close',
+                { duration: 3000 }
+            );
+        } finally {
+            this.isSaving.set(false);
+        }
+    }
+
+    cancel(): void {
+        this.dialogRef.close(false);
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/global-search-results/global-search-results.component.ts b/libs/portal/xtream/feature/src/lib/global-search-results/global-search-results.component.ts
new file mode 100644
index 0000000..61dca71
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/global-search-results/global-search-results.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { SearchResultsComponent } from '../search-results/search-results.component';
+
+@Component({
+    selector: 'app-global-search-results',
+    imports: [SearchResultsComponent],
+    providers: [XtreamStore],
+    template: '<app-search-results/>',
+})
+export class GlobalSearchResultsComponent {}
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.html b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.html
new file mode 100644
index 0000000..e8bd8c2
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.html
@@ -0,0 +1,131 @@
+@let isEmbeddedPlayer = usesEmbeddedPlayer();
+@let streamUrl = activeStreamUrl();
+@let epgPrograms = controlledEpgPrograms();
+
+@if (selectedCategoryId()) {
+    <div
+        class="sidebar"
+        appResizable
+        [minWidth]="250"
+        [maxWidth]="600"
+        [defaultWidth]="400"
+        storageKey="sidebar-width"
+    >
+        <div class="sidebar-header">
+            <div class="category-heading">
+                <h2 class="category-title">
+                    {{ selectedCategoryInfo()?.name }}
+                </h2>
+                @if (selectedCategoryInfo()?.count) {
+                    <span class="category-count">{{
+                        selectedCategoryInfo()?.count
+                    }}</span>
+                }
+            </div>
+            <button
+                mat-icon-button
+                [matMenuTriggerFor]="channelSortMenu"
+                [matTooltip]="'Sort: ' + liveChannelSortLabel()"
+                aria-label="Sort channels"
+            >
+                <mat-icon>sort_by_alpha</mat-icon>
+            </button>
+            <mat-menu #channelSortMenu="matMenu">
+                <button
+                    mat-menu-item
+                    (click)="setLiveChannelSortMode('server')"
+                >
+                    <span>Server Order</span>
+                    @if (liveChannelSortMode() === 'server') {
+                        <mat-icon>check</mat-icon>
+                    }
+                </button>
+                <button
+                    mat-menu-item
+                    (click)="setLiveChannelSortMode('name-asc')"
+                >
+                    <span>Name A-Z</span>
+                    @if (liveChannelSortMode() === 'name-asc') {
+                        <mat-icon>check</mat-icon>
+                    }
+                </button>
+                <button
+                    mat-menu-item
+                    (click)="setLiveChannelSortMode('name-desc')"
+                >
+                    <span>Name Z-A</span>
+                    @if (liveChannelSortMode() === 'name-desc') {
+                        <mat-icon>check</mat-icon>
+                    }
+                </button>
+            </mat-menu>
+        </div>
+        <app-portal-channels-list
+            [sortMode]="liveChannelSortMode()"
+            [searchTermInput]="workspaceSearchTerm()"
+            (playClicked)="playLive($event)"
+        />
+    </div>
+}
+<div class="content-container">
+    @if (!selectedCategoryId()) {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'PORTALS.SELECT_CATEGORY' | translate"
+        />
+    } @else if (streamUrl) {
+        @if (isEmbeddedPlayer) {
+            <div class="video-player">
+                <app-web-player-view [streamUrl]="streamUrl" />
+            </div>
+        }
+        <div class="epg">
+            <div class="epg-content">
+                @if (isLoadingEpg()) {
+                    <div class="loading-indicator">
+                        <mat-spinner diameter="24" />
+                    </div>
+                } @else if (isElectron && epgPrograms.length > 0) {
+                    @if (showArchiveUnavailableNotice()) {
+                        <div class="archive-unavailable-banner" role="status">
+                            <div class="archive-unavailable-banner__title">
+                                {{
+                                    'EPG.ARCHIVE_PLAYBACK_UNAVAILABLE_TITLE'
+                                        | translate
+                                }}
+                            </div>
+                            <div
+                                class="archive-unavailable-banner__description"
+                            >
+                                {{
+                                    'EPG.ARCHIVE_PLAYBACK_UNAVAILABLE_DESCRIPTION'
+                                        | translate
+                                }}
+                            </div>
+                        </div>
+                    }
+                    <app-epg-list
+                        [controlledPrograms]="epgPrograms"
+                        [controlledArchiveDays]="controlledArchiveDays()"
+                        [archivePlaybackAvailable]="
+                            archivePlaybackAvailable()
+                        "
+                        (programActivated)="onProgramActivated($event)"
+                    />
+                } @else if (!isElectron && epgItems().length > 0) {
+                    <app-epg-view [epgItems]="epgItems()" />
+                } @else {
+                    <app-portal-empty-state
+                        icon="event_busy"
+                        [message]="'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate"
+                    />
+                }
+            </div>
+        </div>
+    } @else {
+        <app-portal-empty-state
+            icon="live_tv"
+            [message]="'CHANNELS.SELECT_CHANNEL_PLAYBACK' | translate"
+        />
+    }
+</div>
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
new file mode 100644
index 0000000..6cddd46
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
@@ -0,0 +1,52 @@
+@use '@angular/material' as mat;
+@use '../../../../../../ui/styles/portal-layout' as portal;
+@use '../../../../../../ui/styles/portal-sidebar';
+
+@include portal.live-layout;
+
+// ─── Sidebar-header overrides ──────────────────────────────────────────────
+// Base .sidebar-header styles come from portal-sidebar
+.sidebar-header button {
+    @include mat.form-field-density(-5);
+}
+
+// ─── Side-panel channel list ───────────────────────────────────────────────
+.sidebar {
+    app-portal-channels-list {
+        flex: 1;
+        overflow: hidden;
+        width: 100%;
+    }
+}
+
+.loading-indicator {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+}
+
+.archive-unavailable-banner {
+    margin: 12px 12px 0;
+    padding: 12px 14px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.05);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 10px 20px -20px rgba(0, 0, 0, 0.35);
+}
+
+.archive-unavailable-banner__title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+}
+
+.archive-unavailable-banner__description {
+    margin-top: 4px;
+    font-size: 0.78rem;
+    line-height: 1.45;
+    opacity: 0.74;
+}
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.spec.ts b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.spec.ts
new file mode 100644
index 0000000..a0e08ea
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.spec.ts
@@ -0,0 +1,405 @@
+import { Directive, Component, input, output, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { MockPipe } from 'ng-mocks';
+import { TranslatePipe } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import {
+    PORTAL_PLAYER,
+    ResizableDirective,
+} from '@iptvnator/portal/shared/util';
+import {
+    FavoritesService,
+    XtreamStore,
+    XtreamUrlService,
+} from '@iptvnator/portal/xtream/data-access';
+import { EpgListComponent, EpgProgramActivationEvent } from '@iptvnator/ui/epg';
+import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
+import { EpgItem, EpgProgram } from 'shared-interfaces';
+import { PortalChannelsListComponent } from '../portal-channels-list/portal-channels-list.component';
+import { LiveStreamLayoutComponent } from './live-stream-layout.component';
+
+const LIVE_CHANNEL_SORT_STORAGE_KEY = 'xtream-live-channel-sort-mode';
+
+@Component({
+    selector: 'app-portal-channels-list',
+    standalone: true,
+    template: '',
+})
+class StubPortalChannelsListComponent {
+    readonly sortMode = input<'server' | 'name-asc' | 'name-desc'>('server');
+    readonly searchTermInput = input('');
+    readonly playClicked = output<unknown>();
+}
+
+@Component({
+    selector: 'app-web-player-view',
+    standalone: true,
+    template: '',
+})
+class StubWebPlayerViewComponent {
+    readonly streamUrl = input('');
+}
+
+@Component({
+    selector: 'app-epg-view',
+    standalone: true,
+    template: '',
+})
+class StubEpgViewComponent {
+    readonly epgItems = input<EpgItem[]>([]);
+}
+
+@Component({
+    selector: 'app-epg-list',
+    standalone: true,
+    template: '',
+})
+class StubEpgListComponent {
+    readonly controlledPrograms = input<EpgProgram[] | null>(null);
+    readonly controlledArchiveDays = input<number | null>(null);
+    readonly archivePlaybackAvailable = input<boolean | null>(null);
+    readonly programActivated = output<EpgProgramActivationEvent>();
+}
+
+@Directive({
+    selector: '[appResizable]',
+    standalone: true,
+})
+class StubResizableDirective {}
+
+describe('LiveStreamLayoutComponent', () => {
+    let fixture: ComponentFixture<LiveStreamLayoutComponent>;
+    let component: LiveStreamLayoutComponent;
+    const fixedNow = new Date('2026-04-05T12:00:00.000Z');
+
+    const sampleChannel = {
+        xtream_id: 101,
+        name: 'Channel 101',
+        stream_icon: 'channel-101.png',
+        tv_archive: 1,
+        tv_archive_duration: 3,
+    };
+    const playlist = {
+        id: 'playlist-1',
+        serverUrl: 'http://demo.example',
+        username: 'demo',
+        password: 'secret',
+    };
+
+    const categories = signal([{ category_id: 1, category_name: 'News' }]);
+    const categoryItemCounts = signal(new Map<number, number>([[1, 1]]));
+    const epgItems = signal<EpgItem[]>([]);
+    const currentEpgItem = signal<EpgItem | null>(null);
+    const isLoadingEpg = signal(false);
+    const selectedCategoryId = signal<number | null>(1);
+    const selectedContentType = signal<'live' | 'vod' | 'series'>('live');
+    const selectedItem = signal<unknown>(sampleChannel);
+    const currentPlaylist = signal(playlist);
+
+    const xtreamStore = {
+        getCategoriesBySelectedType: categories,
+        getCategoryItemCounts: categoryItemCounts,
+        epgItems,
+        currentEpgItem,
+        isLoadingEpg,
+        selectedCategoryId,
+        selectedContentType,
+        selectedItem,
+        currentPlaylist,
+        selectItemsFromSelectedCategory: jest.fn(() => [sampleChannel]),
+        constructStreamUrl: jest.fn(() => 'https://example.com/live.ts'),
+        openPlayer: jest.fn(),
+    };
+    const favoritesService = {
+        getFavorites: jest.fn().mockReturnValue(of([])),
+    };
+    const xtreamUrlService = {
+        resolveCatchupUrl: jest
+            .fn()
+            .mockResolvedValue('https://example.com/timeshift.ts'),
+    };
+    const portalPlayer = {
+        isEmbeddedPlayer: jest.fn().mockReturnValue(true),
+    };
+
+    const originalElectron = window.electron;
+
+    beforeEach(async () => {
+        jest.useFakeTimers();
+        jest.setSystemTime(fixedNow);
+        localStorage.removeItem(LIVE_CHANNEL_SORT_STORAGE_KEY);
+
+        window.electron = {
+            updateRemoteControlStatus: jest.fn(),
+        } as typeof window.electron;
+
+        xtreamStore.constructStreamUrl.mockClear();
+        xtreamStore.openPlayer.mockClear();
+        xtreamStore.selectItemsFromSelectedCategory.mockReturnValue([
+            sampleChannel,
+        ]);
+        favoritesService.getFavorites.mockClear();
+        xtreamUrlService.resolveCatchupUrl.mockClear();
+        portalPlayer.isEmbeddedPlayer.mockReset();
+        portalPlayer.isEmbeddedPlayer.mockReturnValue(true);
+
+        epgItems.set([]);
+        currentEpgItem.set(null);
+        isLoadingEpg.set(false);
+        selectedCategoryId.set(1);
+        selectedContentType.set('live');
+        selectedItem.set(sampleChannel);
+        currentPlaylist.set(playlist);
+
+        await TestBed.configureTestingModule({
+            imports: [LiveStreamLayoutComponent, NoopAnimationsModule],
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        snapshot: {
+                            data: {},
+                            queryParamMap: convertToParamMap({}),
+                        },
+                        queryParamMap: of(convertToParamMap({})),
+                        pathFromRoot: [
+                            {
+                                snapshot: {
+                                    data: {},
+                                },
+                            },
+                        ],
+                    },
+                },
+                { provide: XtreamStore, useValue: xtreamStore },
+                { provide: FavoritesService, useValue: favoritesService },
+                { provide: XtreamUrlService, useValue: xtreamUrlService },
+                { provide: PORTAL_PLAYER, useValue: portalPlayer },
+            ],
+        })
+            .overrideComponent(LiveStreamLayoutComponent, {
+                remove: {
+                    imports: [
+                        EpgListComponent,
+                        EpgViewComponent,
+                        PortalChannelsListComponent,
+                        ResizableDirective,
+                        TranslatePipe,
+                        WebPlayerViewComponent,
+                    ],
+                },
+                add: {
+                    imports: [
+                        StubEpgListComponent,
+                        StubEpgViewComponent,
+                        StubPortalChannelsListComponent,
+                        StubResizableDirective,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                        StubWebPlayerViewComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(LiveStreamLayoutComponent);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        jest.useRealTimers();
+        localStorage.removeItem(LIVE_CHANNEL_SORT_STORAGE_KEY);
+        window.electron = originalElectron;
+    });
+
+    it('renders the controlled epg list for electron playback', () => {
+        epgItems.set([
+            buildEpgItem(
+                '1',
+                'Current Show',
+                '2026-04-05T11:30:00.000Z',
+                '2026-04-05T12:30:00.000Z'
+            ),
+        ]);
+
+        component.playLive(sampleChannel);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('app-epg-list')
+        ).not.toBeNull();
+        expect(fixture.nativeElement.querySelector('app-epg-view')).toBeNull();
+    });
+
+    it('uses currentEpgItem instead of assuming the first schedule item is current', () => {
+        epgItems.set([
+            buildEpgItem(
+                'past',
+                'Past Show',
+                '2026-04-05T08:00:00.000Z',
+                '2026-04-05T09:00:00.000Z'
+            ),
+            buildEpgItem(
+                'current',
+                'Current Show',
+                '2026-04-05T11:30:00.000Z',
+                '2026-04-05T12:30:00.000Z'
+            ),
+        ]);
+        currentEpgItem.set(epgItems()[1]);
+
+        fixture.detectChanges();
+
+        expect(window.electron?.updateRemoteControlStatus).toHaveBeenCalledWith(
+            expect.objectContaining({
+                epgTitle: 'Current Show',
+            })
+        );
+    });
+
+    it('resolves a catchup url for archived program activation', async () => {
+        portalPlayer.isEmbeddedPlayer.mockReturnValue(false);
+
+        await component.onProgramActivated({
+            type: 'timeshift',
+            program: {
+                start: '2026-04-04T10:00:00.000Z',
+                stop: '2026-04-04T11:00:00.000Z',
+                channel: 'channel-101',
+                title: 'Archived Show',
+                desc: null,
+                category: null,
+                startTimestamp: 1775296800,
+                stopTimestamp: 1775300400,
+            },
+        });
+
+        expect(xtreamUrlService.resolveCatchupUrl).toHaveBeenCalledWith(
+            'playlist-1',
+            {
+                serverUrl: 'http://demo.example',
+                username: 'demo',
+                password: 'secret',
+            },
+            101,
+            1775296800,
+            1775300400
+        );
+        expect(xtreamStore.openPlayer).toHaveBeenCalledWith(
+            'https://example.com/timeshift.ts',
+            'Channel 101 - Archived Show',
+            'channel-101.png'
+        );
+    });
+
+    it('shows an archive-unavailable notice when past programs exist but archive playback is unavailable', () => {
+        const nonArchiveChannel = {
+            ...sampleChannel,
+            tv_archive: 0,
+            tv_archive_duration: null,
+        };
+        selectedItem.set(nonArchiveChannel);
+        epgItems.set([
+            buildEpgItem(
+                'past',
+                'Past Show',
+                '2026-04-05T09:00:00.000Z',
+                '2026-04-05T10:00:00.000Z'
+            ),
+            buildEpgItem(
+                'current',
+                'Current Show',
+                '2026-04-05T11:30:00.000Z',
+                '2026-04-05T12:30:00.000Z'
+            ),
+        ]);
+
+        component.playLive(nonArchiveChannel);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.archive-unavailable-banner')
+        ).not.toBeNull();
+    });
+
+    it('hides the archive-unavailable notice when archive playback is available', () => {
+        selectedItem.set(sampleChannel);
+        epgItems.set([
+            buildEpgItem(
+                'past',
+                'Past Show',
+                '2026-04-05T09:00:00.000Z',
+                '2026-04-05T10:00:00.000Z'
+            ),
+            buildEpgItem(
+                'current',
+                'Current Show',
+                '2026-04-05T11:30:00.000Z',
+                '2026-04-05T12:30:00.000Z'
+            ),
+        ]);
+
+        component.playLive(sampleChannel);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.archive-unavailable-banner')
+        ).toBeNull();
+    });
+
+    it('hides the archive-unavailable notice when there are no past programs yet', () => {
+        const nonArchiveChannel = {
+            ...sampleChannel,
+            tv_archive: 0,
+            tv_archive_duration: null,
+        };
+        selectedItem.set(nonArchiveChannel);
+        epgItems.set([
+            buildEpgItem(
+                'current',
+                'Current Show',
+                '2026-04-05T11:30:00.000Z',
+                '2026-04-05T12:30:00.000Z'
+            ),
+            buildEpgItem(
+                'future',
+                'Future Show',
+                '2026-04-05T12:30:00.000Z',
+                '2026-04-05T13:30:00.000Z'
+            ),
+        ]);
+
+        component.playLive(nonArchiveChannel);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.archive-unavailable-banner')
+        ).toBeNull();
+    });
+});
+
+function buildEpgItem(
+    id: string,
+    title: string,
+    start: string,
+    stop: string
+): EpgItem {
+    return {
+        id,
+        epg_id: `epg-${id}`,
+        title,
+        description: '',
+        lang: 'en',
+        start,
+        stop,
+        end: stop,
+        channel_id: 'channel-101',
+        start_timestamp: String(Math.floor(Date.parse(start) / 1000)),
+        stop_timestamp: String(Math.floor(Date.parse(stop) / 1000)),
+    };
+}
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.ts b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.ts
new file mode 100644
index 0000000..bfc6b8a
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.ts
@@ -0,0 +1,502 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    inject,
+    OnDestroy,
+    OnInit,
+    signal,
+} from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ResizableDirective } from 'components';
+import { PortalEmptyStateComponent } from '@iptvnator/portal/shared/ui';
+import {
+    PORTAL_PLAYER,
+    PortalChannelSortMode,
+    getPortalChannelSortModeLabel,
+    getAdjacentChannelItem,
+    getChannelItemByNumber,
+    isWorkspaceLayoutRoute,
+    persistPortalChannelSortMode,
+    queryParamSignal,
+    restorePortalChannelSortMode,
+} from '@iptvnator/portal/shared/util';
+import {
+    FavoriteItem,
+    FavoritesService,
+    XtreamUrlService,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { EpgListComponent, EpgProgramActivationEvent } from '@iptvnator/ui/epg';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { EpgViewComponent, WebPlayerViewComponent } from 'shared-portals';
+import { EpgItem, EpgProgram } from 'shared-interfaces';
+import { PortalChannelsListComponent } from '../portal-channels-list/portal-channels-list.component';
+import { ActivatedRoute } from '@angular/router';
+
+const LIVE_CHANNEL_SORT_STORAGE_KEY = 'xtream-live-channel-sort-mode';
+
+interface XtreamLiveChannelItem {
+    readonly name?: string;
+    readonly poster_url?: string;
+    readonly stream_icon?: string;
+    readonly title?: string;
+    readonly tv_archive?: number | null;
+    readonly tv_archive_duration?: number | string | null;
+    readonly xtream_id: number;
+}
+
+@Component({
+    selector: 'app-live-stream-layout',
+    templateUrl: './live-stream-layout.component.html',
+    styleUrls: ['./live-stream-layout.component.scss'],
+    imports: [
+        EpgListComponent,
+        EpgViewComponent,
+        MatIcon,
+        MatIconButton,
+        MatMenuModule,
+        MatProgressSpinnerModule,
+        MatTooltipModule,
+        PortalChannelsListComponent,
+        PortalEmptyStateComponent,
+        ResizableDirective,
+        TranslatePipe,
+        WebPlayerViewComponent,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LiveStreamLayoutComponent implements OnInit, OnDestroy {
+    private readonly route = inject(ActivatedRoute);
+    private readonly favoritesService = inject(FavoritesService);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly xtreamUrlService = inject(XtreamUrlService);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+
+    readonly categories = this.xtreamStore.getCategoriesBySelectedType;
+    readonly categoryItemCounts = this.xtreamStore.getCategoryItemCounts;
+    readonly epgItems = this.xtreamStore.epgItems;
+    readonly currentEpgItem = this.xtreamStore.currentEpgItem;
+    readonly isLoadingEpg = this.xtreamStore.isLoadingEpg;
+    readonly selectedCategoryId = this.xtreamStore.selectedCategoryId;
+    readonly liveChannelSortMode = signal<PortalChannelSortMode>('server');
+    readonly isElectron = Boolean(window.electron);
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.route);
+    private readonly routeSearchTerm = queryParamSignal(
+        this.route,
+        'q',
+        (value) => (value ?? '').trim()
+    );
+    readonly workspaceSearchTerm = computed(() =>
+        this.isWorkspaceLayout ? this.routeSearchTerm() : ''
+    );
+    private readonly pendingAutoOpenLiveItemId = signal<number | null>(null);
+    readonly selectedLiveItem = computed<XtreamLiveChannelItem | null>(() => {
+        if (this.xtreamStore.selectedContentType() !== 'live') {
+            return null;
+        }
+
+        const selectedItem = this.xtreamStore.selectedItem();
+        if (!selectedItem || typeof selectedItem !== 'object') {
+            return null;
+        }
+
+        const item = selectedItem as XtreamLiveChannelItem;
+        return item.xtream_id ? item : null;
+    });
+    readonly controlledEpgPrograms = computed<EpgProgram[]>(() =>
+        this.epgItems().map((program) => this.toControlledEpgProgram(program))
+    );
+    private readonly currentTimeMs = signal(Date.now());
+    readonly controlledArchiveDays = computed(() =>
+        Math.max(
+            0,
+            Number(this.selectedLiveItem()?.tv_archive_duration ?? 0) || 0
+        )
+    );
+    readonly archivePlaybackAvailable = computed(() => {
+        const selectedItem = this.selectedLiveItem();
+        return (
+            Number(selectedItem?.tv_archive ?? 0) === 1 &&
+            this.controlledArchiveDays() > 0
+        );
+    });
+    readonly hasPastPrograms = computed(() => {
+        const now = this.currentTimeMs();
+        return this.controlledEpgPrograms().some((program) => {
+            const stop = this.getProgramTimestampMilliseconds(
+                program.stop,
+                program.stopTimestamp
+            );
+            return stop !== null && stop < now;
+        });
+    });
+    readonly showArchiveUnavailableNotice = computed(
+        () =>
+            this.controlledEpgPrograms().length > 0 &&
+            this.hasPastPrograms() &&
+            !this.archivePlaybackAvailable()
+    );
+    readonly liveChannelSortLabel = computed(() =>
+        getPortalChannelSortModeLabel(this.liveChannelSortMode())
+    );
+
+    readonly selectedCategoryInfo = computed(() => {
+        const categoryId = this.selectedCategoryId();
+        if (!categoryId) return null;
+
+        const categories = this.categories();
+        const category = categories?.find(
+            (c) => (c.category_id ?? c.id) === categoryId
+        );
+        const count = this.categoryItemCounts()?.get(categoryId) ?? 0;
+
+        return {
+            name: category?.category_name ?? category?.name ?? 'Channels',
+            count,
+        };
+    });
+
+    private unsubscribeRemoteChannelChange?: () => void;
+    private unsubscribeRemoteCommand?: () => void;
+
+    readonly usesEmbeddedPlayer = computed(() =>
+        this.portalPlayer.isEmbeddedPlayer()
+    );
+    readonly activeStreamUrl = signal('');
+    favorites = new Map<number, boolean>();
+
+    constructor() {
+        effect((onCleanup) => {
+            const intervalId = window.setInterval(() => {
+                this.currentTimeMs.set(Date.now());
+            }, 30_000);
+
+            onCleanup(() => clearInterval(intervalId));
+        });
+
+        const requestedItemId = Number(
+            (window.history.state as Record<string, unknown> | null)?.[
+                'openXtreamLiveItemId'
+            ]
+        );
+        if (Number.isFinite(requestedItemId) && requestedItemId > 0) {
+            this.pendingAutoOpenLiveItemId.set(requestedItemId);
+        }
+
+        effect(() => {
+            const pendingId = this.pendingAutoOpenLiveItemId();
+            if (!pendingId) {
+                return;
+            }
+
+            const channels = this.getVisibleChannels();
+            if (!Array.isArray(channels) || channels.length === 0) {
+                return;
+            }
+
+            const item = channels.find(
+                (channel) => Number(channel?.xtream_id) === pendingId
+            );
+            if (!item) {
+                this.pendingAutoOpenLiveItemId.set(null);
+                return;
+            }
+
+            this.playLive(item);
+            this.pendingAutoOpenLiveItemId.set(null);
+            this.clearAutoOpenHistoryState();
+        });
+
+        effect(() => {
+            if (!window.electron?.updateRemoteControlStatus) {
+                return;
+            }
+
+            const selectedContentType = this.xtreamStore.selectedContentType();
+            const selectedItem = this.xtreamStore.selectedItem();
+            const channels = this.getVisibleChannels();
+            const currentProgram = this.currentEpgItem();
+
+            if (selectedContentType !== 'live' || !selectedItem?.xtream_id) {
+                window.electron.updateRemoteControlStatus({
+                    portal: 'xtream',
+                    isLiveView: false,
+                    supportsVolume: false,
+                });
+                return;
+            }
+
+            const currentIndex = channels.findIndex(
+                (item) =>
+                    Number(item.xtream_id) === Number(selectedItem.xtream_id)
+            );
+
+            window.electron.updateRemoteControlStatus({
+                portal: 'xtream',
+                isLiveView: true,
+                channelName: selectedItem.title ?? selectedItem.name,
+                channelNumber: currentIndex >= 0 ? currentIndex + 1 : undefined,
+                epgTitle: currentProgram?.title,
+                epgStart: currentProgram?.start,
+                epgEnd: currentProgram?.stop ?? currentProgram?.end,
+                supportsVolume: false,
+            });
+        });
+    }
+
+    ngOnInit() {
+        if (window.electron?.onChannelChange) {
+            const unsubscribe = window.electron.onChannelChange(
+                (data: { direction: 'up' | 'down' }) => {
+                    this.handleRemoteChannelChange(data.direction);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteChannelChange = unsubscribe;
+            }
+        }
+        if (window.electron?.onRemoteControlCommand) {
+            const unsubscribe = window.electron.onRemoteControlCommand(
+                (command) => {
+                    this.handleRemoteControlCommand(command);
+                }
+            );
+            if (typeof unsubscribe === 'function') {
+                this.unsubscribeRemoteCommand = unsubscribe;
+            }
+        }
+
+        this.liveChannelSortMode.set(
+            restorePortalChannelSortMode(LIVE_CHANNEL_SORT_STORAGE_KEY)
+        );
+
+        const playlist = this.xtreamStore.currentPlaylist();
+        if (playlist) {
+            this.favoritesService
+                .getFavorites(playlist.id)
+                .subscribe((favorites) => {
+                    // Map using content.id instead of xtream_id
+                    favorites.forEach((fav: FavoriteItem) => {
+                        this.favorites.set(fav.xtream_id, true);
+                    });
+                });
+        }
+    }
+
+    playLive(item: XtreamLiveChannelItem) {
+        const streamUrl = this.xtreamStore.constructStreamUrl(item);
+        this.activeStreamUrl.set(streamUrl);
+        if (this.usesEmbeddedPlayer()) {
+            return;
+        }
+        this.xtreamStore.openPlayer(
+            streamUrl,
+            item.title ?? item.name ?? '',
+            item.poster_url ?? item.stream_icon ?? null
+        );
+    }
+
+    async onProgramActivated(event: EpgProgramActivationEvent): Promise<void> {
+        const selectedItem = this.selectedLiveItem();
+        if (!selectedItem?.xtream_id) {
+            return;
+        }
+
+        if (event.type === 'live') {
+            this.playLive(selectedItem);
+            return;
+        }
+
+        await this.playCatchup(event.program, selectedItem);
+    }
+
+    setLiveChannelSortMode(mode: PortalChannelSortMode): void {
+        this.liveChannelSortMode.set(mode);
+        persistPortalChannelSortMode(LIVE_CHANNEL_SORT_STORAGE_KEY, mode);
+    }
+
+    ngOnDestroy(): void {
+        this.unsubscribeRemoteChannelChange?.();
+        this.unsubscribeRemoteCommand?.();
+    }
+
+    private handleRemoteChannelChange(direction: 'up' | 'down'): void {
+        const activeItem = this.xtreamStore.selectedItem();
+        if (!activeItem?.xtream_id) {
+            return;
+        }
+
+        const channels = this.getVisibleChannels();
+        const nextItem = getAdjacentChannelItem(
+            channels,
+            activeItem.xtream_id,
+            direction,
+            (item) => item.xtream_id
+        );
+
+        if (!nextItem) {
+            return;
+        }
+
+        this.playLive(nextItem);
+    }
+
+    private handleRemoteControlCommand(command: {
+        type:
+            | 'channel-select-number'
+            | 'volume-up'
+            | 'volume-down'
+            | 'volume-toggle-mute';
+        number?: number;
+    }): void {
+        if (command.type !== 'channel-select-number' || !command.number) {
+            return;
+        }
+
+        const channels = this.getVisibleChannels();
+        const channel = getChannelItemByNumber(channels, command.number);
+        if (!channel) {
+            return;
+        }
+
+        this.playLive(channel);
+    }
+
+    private getVisibleChannels(): XtreamLiveChannelItem[] {
+        return this.xtreamStore.selectItemsFromSelectedCategory() as XtreamLiveChannelItem[];
+    }
+
+    private async playCatchup(
+        program: EpgProgram,
+        item: XtreamLiveChannelItem
+    ): Promise<void> {
+        const playlist = this.xtreamStore.currentPlaylist();
+        if (!playlist) {
+            return;
+        }
+
+        const startTimestamp = this.getProgramTimestampSeconds(
+            program.start,
+            program.startTimestamp
+        );
+        const stopTimestamp = this.getProgramTimestampSeconds(
+            program.stop,
+            program.stopTimestamp
+        );
+
+        if (!startTimestamp || !stopTimestamp) {
+            return;
+        }
+
+        const catchupUrl = await this.xtreamUrlService.resolveCatchupUrl(
+            playlist.id,
+            {
+                serverUrl: playlist.serverUrl,
+                username: playlist.username,
+                password: playlist.password,
+            },
+            item.xtream_id,
+            startTimestamp,
+            stopTimestamp
+        );
+
+        this.activeStreamUrl.set(catchupUrl);
+        if (this.usesEmbeddedPlayer()) {
+            return;
+        }
+
+        this.xtreamStore.openPlayer(
+            catchupUrl,
+            this.getCatchupPlaybackTitle(item, program),
+            item.poster_url ?? item.stream_icon ?? null
+        );
+    }
+
+    private toControlledEpgProgram(program: EpgItem): EpgProgram {
+        return {
+            start: program.start,
+            stop: program.stop ?? program.end,
+            channel: program.channel_id ?? program.id,
+            title: program.title,
+            desc: program.description ?? null,
+            category: null,
+            startTimestamp: this.getProgramTimestampSeconds(
+                program.start,
+                program.start_timestamp
+            ),
+            stopTimestamp: this.getProgramTimestampSeconds(
+                program.stop ?? program.end,
+                program.stop_timestamp
+            ),
+        };
+    }
+
+    private getProgramTimestampSeconds(
+        dateValue: string,
+        unixTimestampValue?: number | string | null
+    ): number | null {
+        const unixTimestamp = Number.parseInt(
+            String(unixTimestampValue ?? ''),
+            10
+        );
+        if (Number.isFinite(unixTimestamp) && unixTimestamp > 0) {
+            return unixTimestamp;
+        }
+
+        const parsedDate = Date.parse(dateValue);
+        return Number.isFinite(parsedDate)
+            ? Math.floor(parsedDate / 1000)
+            : null;
+    }
+
+    private getProgramTimestampMilliseconds(
+        dateValue: string,
+        unixTimestampValue?: number | string | null
+    ): number | null {
+        const unixTimestamp = this.getProgramTimestampSeconds(
+            dateValue,
+            unixTimestampValue
+        );
+        return unixTimestamp !== null ? unixTimestamp * 1000 : null;
+    }
+
+    private getCatchupPlaybackTitle(
+        item: XtreamLiveChannelItem,
+        program: EpgProgram
+    ): string {
+        const channelTitle = item.title ?? item.name ?? '';
+        if (!program.title) {
+            return channelTitle;
+        }
+
+        return channelTitle
+            ? `${channelTitle} - ${program.title}`
+            : program.title;
+    }
+
+    private clearAutoOpenHistoryState(): void {
+        try {
+            const state = (window.history.state ?? {}) as Record<
+                string,
+                unknown
+            >;
+            if (!('openXtreamLiveItemId' in state)) {
+                return;
+            }
+
+            const nextState = { ...state };
+            delete nextState['openXtreamLiveItemId'];
+            delete nextState['openXtreamLiveTitle'];
+            delete nextState['openXtreamLivePoster'];
+            window.history.replaceState(nextState, document.title);
+        } catch {
+            // no-op
+        }
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/loading-overlay.component.ts b/libs/portal/xtream/feature/src/lib/loading-overlay.component.ts
new file mode 100644
index 0000000..9f5192b
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/loading-overlay.component.ts
@@ -0,0 +1,54 @@
+import { Component, input } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@Component({
+    selector: 'app-loading-overlay',
+    imports: [MatProgressBarModule],
+    template: `
+        <div class="overlay">
+            <div class="progress-container">
+                <h3>Loading playlist...</h3>
+                @if (current() !== 0 && total() !== 0) {
+                    <mat-progress-bar
+                        mode="determinate"
+                        [value]="(current() / total()) * 100"
+                    />
+                    <p>{{ current() }} / {{ total() }}</p>
+                } @else {
+                    <mat-progress-bar mode="indeterminate" />
+                }
+            </div>
+        </div>
+    `,
+    styles: [
+        `
+            .overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.7);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 1000;
+            }
+
+            .progress-container {
+                padding: 2rem;
+                border-radius: 8px;
+                min-width: 300px;
+                text-align: center;
+
+                h3 {
+                    margin-top: 0;
+                }
+            }
+        `,
+    ],
+})
+export class LoadingOverlayComponent {
+    current = input(0);
+    total = input(0);
+}
diff --git a/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.html b/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.html
new file mode 100644
index 0000000..9e30ad8
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.html
@@ -0,0 +1,22 @@
+<h2 mat-dialog-title>{{ title }}</h2>
+<mat-dialog-content class="content">
+    <app-web-player-view
+        [streamUrl]="streamUrl"
+        [startTime]="data.startTime || 0"
+        (timeUpdate)="handleTimeUpdate($event)"
+    />
+</mat-dialog-content>
+<mat-dialog-actions class="align-actions">
+    <button
+        mat-button
+        [cdkCopyToClipboard]="streamUrl"
+        (click)="showCopyNotification()"
+        [matTooltip]="streamUrl"
+    >
+        <mat-icon>content_copy</mat-icon>
+        {{ 'PORTALS.COPY_STREAM_URL' | translate }}
+    </button>
+    <button mat-button mat-dialog-close color="accent">
+        {{ 'CLOSE' | translate }}
+    </button>
+</mat-dialog-actions>
diff --git a/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.scss b/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.scss
new file mode 100644
index 0000000..a77331c
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.scss
@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+
+.content {
+    overflow: hidden;
+    padding: 10px !important;
+}
+
+.align-actions {
+    justify-content: space-between;
+}
+
+mat-dialog-content {
+    .video-js {
+        height: 500px !important;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.ts b/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.ts
new file mode 100644
index 0000000..74a2711
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/player-dialog/player-dialog.component.ts
@@ -0,0 +1,77 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { Component, inject, ViewEncapsulation } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { PORTAL_PLAYBACK_POSITIONS } from '@iptvnator/portal/shared/util';
+import { PlayerContentInfo } from 'shared-interfaces';
+import { WebPlayerViewComponent } from 'shared-portals';
+
+export interface PlayerDialogData {
+    streamUrl: string;
+    title: string;
+    contentInfo?: PlayerContentInfo;
+    startTime?: number;
+}
+
+@Component({
+    templateUrl: './player-dialog.component.html',
+    imports: [
+        ClipboardModule,
+        MatButton,
+        MatDialogModule,
+        MatIcon,
+        MatTooltip,
+        TranslatePipe,
+        WebPlayerViewComponent,
+    ],
+    styleUrl: './player-dialog.component.scss',
+    encapsulation: ViewEncapsulation.None,
+})
+export class PlayerDialogComponent {
+    readonly data = inject<PlayerDialogData>(MAT_DIALOG_DATA);
+    private snackBar = inject(MatSnackBar);
+    private translateService = inject(TranslateService);
+    private readonly playbackPositions = inject(PORTAL_PLAYBACK_POSITIONS);
+
+    readonly title: string;
+    readonly streamUrl: string;
+
+    private lastSaveTime = 0;
+
+    constructor() {
+        this.streamUrl = this.data.streamUrl;
+        this.title = this.data.title;
+    }
+
+    handleTimeUpdate(event: { currentTime: number; duration: number }) {
+        if (!this.data.contentInfo) return;
+
+        const now = Date.now();
+        // Save every 15 seconds
+        if (now - this.lastSaveTime > 15000) {
+            this.lastSaveTime = now;
+            void this.playbackPositions.savePlaybackPosition(
+                this.data.contentInfo.playlistId,
+                {
+                    ...this.data.contentInfo,
+                    positionSeconds: Math.floor(event.currentTime),
+                    durationSeconds: Math.floor(event.duration),
+                }
+            );
+        }
+    }
+
+    showCopyNotification() {
+        this.snackBar.open(
+            this.translateService.instant('PORTALS.STREAM_URL_COPIED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html
new file mode 100644
index 0000000..1eeaa24
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.html
@@ -0,0 +1,60 @@
+<div class="channels-list">
+    @if (isSelectedTypeContentLoading()) {
+        <div class="channels-loading-state" aria-live="polite">
+            <div class="channels-loading-state__copy">
+                <div class="channels-loading-state__title">
+                    {{ 'CHANNELS.LOADING' | translate }}
+                </div>
+            </div>
+
+            <div class="channels-loading-state__list" aria-hidden="true">
+                @for (row of loadingRows; track row) {
+                    <div class="channel-skeleton">
+                        <span class="channel-skeleton__logo"></span>
+                        <span class="channel-skeleton__title"></span>
+                        <span class="channel-skeleton__meta"></span>
+                    </div>
+                }
+            </div>
+        </div>
+    } @else if (filteredChannels().length > 0) {
+        <cdk-virtual-scroll-viewport
+            [itemSize]="68"
+            class="scroll-viewport-portals"
+        >
+            <app-channel-list-item
+                *cdkVirtualFor="
+                    let item of filteredChannels();
+                    trackBy: trackBy;
+                    templateCacheSize: 0
+                "
+                [name]="item.title || item.name"
+                [logo]="item.stream_icon ?? item.poster_url"
+                [selected]="
+                    xtreamStore.selectedItem()?.xtream_id === item.xtream_id
+                "
+                [epgProgram]="epgPrograms.get(item.xtream_id) ?? null"
+                [progressPercentage]="
+                    currentProgramsProgress.get(item.xtream_id) ?? 0
+                "
+                [showFavoriteButton]="true"
+                [showProgramInfoButton]="false"
+                [isFavorite]="favorites.get(favoriteKeyFor(item)) ?? false"
+                (clicked)="playClicked.emit(item)"
+                (favoriteToggled)="toggleFavorite($event, item)"
+            />
+        </cdk-virtual-scroll-viewport>
+    } @else {
+        <div class="empty-search-state">
+            <div class="empty-icon-wrapper">
+                <mat-icon>search_off</mat-icon>
+            </div>
+            <h3>{{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}</h3>
+            @if (searchTermInput()) {
+                <p>
+                    {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
+                </p>
+            }
+        </div>
+    }
+</div>
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
new file mode 100644
index 0000000..46aa52a
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
@@ -0,0 +1,263 @@
+:host {
+    display: block;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    container-type: inline-size;
+    border-right: 1px solid var(--app-separator);
+}
+
+.channels-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+}
+
+.scroll-viewport-portals {
+    height: 100%;
+    width: 100%;
+    padding: 4px 8px 12px;
+    box-sizing: border-box;
+
+    ::ng-deep .cdk-virtual-scroll-content-wrapper {
+        width: 100% !important;
+        max-width: 100% !important;
+        contain: layout style;
+    }
+}
+
+.search-panel {
+    padding: 10px 12px;
+    flex-shrink: 0;
+    height: 56px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid var(--app-separator);
+    app-region: drag;
+}
+
+.search-field {
+    flex: 1;
+    width: 100%;
+    height: 36px;
+    border-radius: 10px;
+    border: 1px solid rgba(127, 127, 127, 0.22);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.08);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    box-sizing: border-box;
+    cursor: text;
+    transition:
+        border-color 0.15s ease,
+        background-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--app-selection-border);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-selection-color) 16%, transparent);
+    }
+
+    mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+        opacity: 0.68;
+        flex-shrink: 0;
+    }
+
+    input {
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: 0.875rem;
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        &::placeholder {
+            opacity: 0.62;
+        }
+    }
+}
+
+.empty-search-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 32px 24px;
+    text-align: center;
+    animation: fade-in 0.3s ease-out;
+
+    .empty-icon-wrapper {
+        width: 64px;
+        height: 64px;
+        border-radius: 20px;
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
+            rgba(127, 127, 127, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20px;
+        box-shadow:
+            0 8px 24px -8px rgba(0, 0, 0, 0.1),
+            inset 0 1px 1px rgba(255, 255, 255, 0.05);
+
+        mat-icon {
+            width: 32px;
+            height: 32px;
+            font-size: 32px;
+            opacity: 0.8;
+        }
+    }
+
+    h3 {
+        font-size: 1.05rem;
+        font-weight: 520;
+        margin: 0 0 8px;
+        letter-spacing: -0.01em;
+    }
+
+    p {
+        font-size: 0.85rem;
+        margin: 0;
+        opacity: 0.65;
+        line-height: 1.4;
+        max-width: 260px;
+    }
+}
+
+.channels-loading-state {
+    display: grid;
+    gap: 14px;
+    height: 100%;
+    padding: 16px 12px 18px;
+}
+
+.channels-loading-state__copy {
+    padding: 0 4px;
+}
+
+.channels-loading-state__title {
+    font-size: 0.86rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--mat-sys-on-surface);
+}
+
+.channels-loading-state__list {
+    display: grid;
+    gap: 8px;
+    overflow: hidden;
+}
+
+.channel-skeleton {
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-rows: 14px 10px;
+    align-items: center;
+    gap: 8px 12px;
+    min-height: 68px;
+    padding: 10px 12px;
+    border-radius: 14px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 12%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 96%,
+            transparent
+        );
+}
+
+.channel-skeleton__logo,
+.channel-skeleton__title,
+.channel-skeleton__meta {
+    position: relative;
+    overflow: hidden;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
+    );
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 8%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 18%,
+                    transparent
+                )
+                44%,
+            transparent 74%
+        );
+        transform: translateX(-120%);
+        animation: channel-skeleton-shimmer 1.15s ease-in-out infinite;
+    }
+}
+
+.channel-skeleton__logo {
+    grid-row: 1 / span 2;
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+}
+
+.channel-skeleton__title {
+    height: 11px;
+    width: min(68%, 180px);
+    border-radius: 999px;
+}
+
+.channel-skeleton__meta {
+    height: 9px;
+    width: min(42%, 120px);
+    border-radius: 999px;
+}
+
+@container (max-width: 350px) {
+    .scroll-viewport-portals {
+        padding-inline: 6px;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes channel-skeleton-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.spec.ts b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.spec.ts
new file mode 100644
index 0000000..dc3c358
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.spec.ts
@@ -0,0 +1,299 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { of, Subject } from 'rxjs';
+import {
+    FavoriteItem,
+    EpgQueueService,
+    FavoritesService,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { PortalChannelsListComponent } from './portal-channels-list.component';
+
+function buildEpgItem(params: {
+    id: string;
+    title: string;
+    start: string;
+    stop: string;
+    startTimestamp: number;
+    stopTimestamp: number;
+}) {
+    return {
+        id: params.id,
+        epg_id: `epg-${params.id}`,
+        title: params.title,
+        description: `${params.title} description`,
+        lang: 'en',
+        start: params.start,
+        end: params.stop,
+        stop: params.stop,
+        channel_id: 'channel-1',
+        start_timestamp: String(params.startTimestamp),
+        stop_timestamp: String(params.stopTimestamp),
+    };
+}
+
+describe('PortalChannelsListComponent', () => {
+    let fixture: ComponentFixture<PortalChannelsListComponent>;
+    const selectedChannels = signal<unknown[]>([]);
+    const selectedItem = signal<unknown>(null);
+    const epgItems = signal<unknown[]>([]);
+    const selectedTypeContentLoading = signal(true);
+    const selectedContentType = signal('live');
+    const currentPlaylist = signal<unknown>(null);
+    const selectedCategoryId = signal<number | null>(1);
+    const storeSignals = {
+        selectItemsFromSelectedCategory: selectedChannels,
+        selectedItem,
+        epgItems,
+        selectedTypeContentLoading,
+        selectedContentType,
+        currentPlaylist,
+        selectedCategoryId,
+        setSelectedCategory: jest.fn(),
+        toggleFavorite: jest.fn().mockResolvedValue(true),
+    };
+    const epgResults$ = new Subject<{ streamId: number; items: unknown[] }>();
+    const favoritesService = {
+        getFavorites: jest.fn().mockReturnValue(of([] as FavoriteItem[])),
+    };
+
+    beforeEach(async () => {
+        storeSignals.setSelectedCategory.mockClear();
+        storeSignals.toggleFavorite.mockClear();
+        selectedChannels.set([]);
+        selectedItem.set(null);
+        epgItems.set([]);
+        selectedTypeContentLoading.set(true);
+        selectedContentType.set('live');
+        currentPlaylist.set(null);
+        selectedCategoryId.set(1);
+        favoritesService.getFavorites.mockReturnValue(of([] as FavoriteItem[]));
+
+        await TestBed.configureTestingModule({
+            imports: [PortalChannelsListComponent, NoopAnimationsModule],
+            providers: [
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) =>
+                            key === 'CHANNELS.LOADING'
+                                ? 'Loading channels...'
+                                : key,
+                        get: (key: string) =>
+                            of(
+                                key === 'CHANNELS.LOADING'
+                                    ? 'Loading channels...'
+                                    : key
+                            ),
+                        stream: (key: string) =>
+                            of(
+                                key === 'CHANNELS.LOADING'
+                                    ? 'Loading channels...'
+                                    : key
+                            ),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: storeSignals,
+                },
+                {
+                    provide: FavoritesService,
+                    useValue: favoritesService,
+                },
+                {
+                    provide: EpgQueueService,
+                    useValue: {
+                        epgResult$: epgResults$,
+                        getCached: jest.fn().mockReturnValue(null),
+                        enqueue: jest.fn(),
+                    },
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        snapshot: {
+                            params: {},
+                        },
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(PortalChannelsListComponent);
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it('renders a loading placeholder instead of the empty state while xtream live content is still loading', () => {
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.channels-loading-state')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('.empty-search-state')
+        ).toBeNull();
+    });
+
+    it('renders the empty state once loading has finished and the selected category has no channels', () => {
+        selectedTypeContentLoading.set(false);
+
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.channels-loading-state')
+        ).toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('.empty-search-state')
+        ).not.toBeNull();
+    });
+
+    it('selects the current preview program by timestamps, preserves them, and updates progress from them', () => {
+        jest.useFakeTimers();
+        const currentStartTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:30:00.000Z') / 1000
+        );
+        const currentStopTimestamp = Math.floor(
+            Date.parse('2026-04-05T06:00:00.000Z') / 1000
+        );
+        const previousStartTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:00:00.000Z') / 1000
+        );
+        const previousStopTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:30:00.000Z') / 1000
+        );
+
+        jest.setSystemTime(new Date('2026-04-05T05:45:00.000Z'));
+
+        selectedTypeContentLoading.set(false);
+        selectedChannels.set([
+            {
+                title: 'Cartoon Network',
+                xtream_id: 50,
+            },
+        ]);
+        currentPlaylist.set({
+            id: 'playlist-1',
+            password: 'secret',
+            serverUrl: 'http://demo.example',
+            username: 'demo',
+        });
+
+        fixture.detectChanges();
+
+        epgResults$.next({
+            streamId: 50,
+            items: [
+                buildEpgItem({
+                    id: 'previous',
+                    title: 'Previous Show',
+                    start: '2026-04-05T03:00:00.000Z',
+                    stop: '2026-04-05T03:30:00.000Z',
+                    startTimestamp: previousStartTimestamp,
+                    stopTimestamp: previousStopTimestamp,
+                }),
+                buildEpgItem({
+                    id: 'current',
+                    title: 'Current Show',
+                    start: '2026-04-05T03:00:00.000Z',
+                    stop: '2026-04-05T03:30:00.000Z',
+                    startTimestamp: currentStartTimestamp,
+                    stopTimestamp: currentStopTimestamp,
+                }),
+            ],
+        });
+
+        fixture.detectChanges();
+
+        const component = fixture.componentInstance;
+        expect(component.epgPrograms.get(50)).toEqual(
+            expect.objectContaining({
+                title: 'Current Show',
+                startTimestamp: currentStartTimestamp,
+                stopTimestamp: currentStopTimestamp,
+            })
+        );
+        expect(component.currentProgramsProgress.get(50)).toBeCloseTo(50, 1);
+    });
+
+    it('does not mark a live item as favorite when only a colliding movie ID is favorited', () => {
+        favoritesService.getFavorites.mockReturnValue(
+            of([
+                {
+                    content_id: 42,
+                    playlist_id: 'playlist-1',
+                    type: 'movie',
+                    title: 'Krypton',
+                    category_id: 7,
+                    xtream_id: 290,
+                },
+            ] satisfies FavoriteItem[])
+        );
+        selectedTypeContentLoading.set(false);
+        selectedChannels.set([
+            {
+                title: 'SE: V Film Premiere FHD',
+                type: 'live',
+                xtream_id: 290,
+            },
+        ]);
+        currentPlaylist.set({
+            id: 'playlist-1',
+            password: 'secret',
+            serverUrl: 'http://demo.example',
+            username: 'demo',
+        });
+
+        fixture.detectChanges();
+
+        const component = fixture.componentInstance;
+        expect(component.favorites.get('movie:290')).toBe(true);
+        expect(component.favorites.get('live:290')).toBeUndefined();
+        expect(
+            component.favoriteKeyFor({
+                title: 'SE: V Film Premiere FHD',
+                type: 'live',
+                xtream_id: 290,
+            })
+        ).toBe('live:290');
+    });
+
+    it('passes the live content type when toggling a channel favorite', async () => {
+        selectedTypeContentLoading.set(false);
+        currentPlaylist.set({
+            id: 'playlist-1',
+            password: 'secret',
+            serverUrl: 'http://demo.example',
+            username: 'demo',
+        });
+
+        fixture.detectChanges();
+
+        fixture.componentInstance.toggleFavorite(
+            new MouseEvent('click'),
+            {
+                title: 'Cartoon Network',
+                xtream_id: 253,
+            }
+        );
+        await Promise.resolve();
+
+        expect(storeSignals.toggleFavorite).toHaveBeenCalledWith(
+            253,
+            'playlist-1',
+            'live'
+        );
+        expect(fixture.componentInstance.favorites.get('live:253')).toBe(true);
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.ts b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.ts
new file mode 100644
index 0000000..bd36f8e
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.ts
@@ -0,0 +1,404 @@
+import {
+    CdkVirtualScrollViewport,
+    ScrollingModule,
+} from '@angular/cdk/scrolling';
+import {
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    computed,
+    effect,
+    inject,
+    input,
+    OnDestroy,
+    output,
+    viewChild,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { ActivatedRoute } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import {
+    EpgItem,
+    EpgProgram,
+    XtreamCategory,
+    XtreamItem,
+} from 'shared-interfaces';
+import { ChannelListItemComponent } from 'components';
+import {
+    PortalChannelSortMode,
+    sortPortalChannelItems,
+} from '@iptvnator/portal/shared/util';
+import { EpgQueueService } from '@iptvnator/portal/xtream/data-access';
+import { XtreamCredentials } from '@iptvnator/portal/xtream/data-access';
+import { FavoritesService } from '@iptvnator/portal/xtream/data-access';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+
+export interface XtreamChannelListItem {
+    readonly category_id?: string | number;
+    readonly id?: string | number;
+    readonly name?: string;
+    readonly poster_url?: string;
+    readonly stream_icon?: string;
+    readonly title?: string;
+    readonly type?: 'live' | 'movie' | 'series' | 'vod';
+    readonly xtream_id: number;
+}
+
+interface XtreamCategoryLike {
+    readonly category_id?: string | number;
+    readonly id?: string | number;
+}
+
+@Component({
+    selector: 'app-portal-channels-list',
+    templateUrl: './portal-channels-list.component.html',
+    styleUrls: ['./portal-channels-list.component.scss'],
+    imports: [
+        ChannelListItemComponent,
+        MatIcon,
+        ScrollingModule,
+        TranslatePipe,
+    ],
+})
+export class PortalChannelsListComponent implements AfterViewInit, OnDestroy {
+    readonly playClicked = output<XtreamChannelListItem>();
+    readonly sortMode = input<PortalChannelSortMode>('server');
+    readonly channelsOverride = input<XtreamChannelListItem[] | null>(null);
+    readonly searchTermInput = input('');
+
+    readonly xtreamStore = inject(XtreamStore);
+    private readonly favoritesService = inject(FavoritesService);
+    private readonly epgQueueService = inject(EpgQueueService);
+    private readonly route = inject(ActivatedRoute);
+    readonly isSelectedTypeContentLoading =
+        this.xtreamStore.selectedTypeContentLoading;
+    readonly loadingRows = Array.from({ length: 9 }, (_, index) => index);
+    readonly channels = computed(() => {
+        const override = this.channelsOverride();
+        if (Array.isArray(override)) {
+            return override;
+        }
+
+        return this.xtreamStore.selectItemsFromSelectedCategory() as XtreamChannelListItem[];
+    });
+    readonly sortedChannels = computed(() => {
+        const mode = this.sortMode();
+        const channels = this.channels();
+        return sortPortalChannelItems(
+            channels,
+            mode,
+            (item) => item.title ?? item.name
+        );
+    });
+    readonly filteredChannels = computed(() => {
+        const term = this.searchTermInput().trim().toLowerCase();
+        const channels = this.sortedChannels();
+
+        if (!term) {
+            return channels;
+        }
+
+        return channels.filter((item) =>
+            `${item.title ?? ''} ${item.name ?? ''}`
+                .toLowerCase()
+                .includes(term)
+        );
+    });
+
+    favorites = new Map<string, boolean>();
+    epgPrograms = new Map<number, EpgProgram>();
+    currentProgramsProgress = new Map<number, number>();
+
+    readonly viewport = viewChild(CdkVirtualScrollViewport);
+
+    private subscriptions = new Subscription();
+
+    constructor(private cdr: ChangeDetectorRef) {
+        effect(() => {
+            const selectedItem = this.xtreamStore.selectedItem();
+            const epgItems = this.xtreamStore.epgItems();
+
+            if (!selectedItem?.xtream_id || epgItems.length === 0) {
+                return;
+            }
+
+            const previewProgram = this.pickPreviewProgram(epgItems);
+            if (!previewProgram) {
+                return;
+            }
+
+            this.applyProgram(selectedItem.xtream_id, previewProgram);
+        });
+    }
+
+    trackBy(_index: number, item: XtreamChannelListItem | XtreamItem) {
+        return item.xtream_id;
+    }
+
+    ngOnInit(): void {
+        const { categoryId } = this.route.snapshot.params;
+        if (categoryId && !this.channelsOverride())
+            this.xtreamStore.setSelectedCategory(Number(categoryId));
+
+        const playlist = this.xtreamStore.currentPlaylist();
+        if (playlist) {
+            this.favoritesService
+                .getFavorites(playlist.id)
+                .subscribe((favorites) => {
+                    favorites.forEach((fav) => {
+                        this.favorites.set(
+                            this.getFavoriteKey(fav.xtream_id, fav.type),
+                            true
+                        );
+                    });
+                });
+        }
+
+        // Subscribe to EPG results from the queue service
+        this.subscriptions.add(
+            this.epgQueueService.epgResult$.subscribe(({ streamId, items }) => {
+                const previewProgram = this.pickPreviewProgram(items);
+                if (previewProgram) {
+                    this.applyProgram(streamId, previewProgram);
+                }
+            })
+        );
+    }
+
+    ngAfterViewInit() {
+        const vp = this.viewport();
+        if (vp && this.xtreamStore.selectedContentType() === 'live') {
+            this.subscriptions.add(
+                vp.renderedRangeStream
+                    .pipe(debounceTime(300))
+                    .subscribe((range) => {
+                        const visibleChannels = this.filteredChannels().slice(
+                            range.start,
+                            range.end
+                        );
+                        this.loadEpgForVisibleChannels(visibleChannels);
+                    })
+            );
+        }
+    }
+
+    private loadEpgForVisibleChannels(channels: XtreamChannelListItem[]): void {
+        const playlist = this.xtreamStore.currentPlaylist();
+        if (!playlist) return;
+
+        const credentials: XtreamCredentials = {
+            serverUrl: playlist.serverUrl,
+            username: playlist.username,
+            password: playlist.password,
+        };
+
+        const visibleIds = new Set<number>(channels.map((ch) => ch.xtream_id));
+        const uncachedIds: number[] = [];
+
+        // Apply cached results immediately
+        for (const channel of channels) {
+            const cached = this.epgQueueService.getCached(channel.xtream_id);
+            if (cached !== null) {
+                const previewProgram = this.pickPreviewProgram(cached);
+                if (previewProgram) {
+                    if (!this.epgPrograms.has(channel.xtream_id)) {
+                        this.applyProgram(channel.xtream_id, previewProgram);
+                    }
+                }
+
+                continue;
+            }
+
+            if (!this.epgPrograms.has(channel.xtream_id)) {
+                uncachedIds.push(channel.xtream_id);
+            }
+        }
+
+        if (uncachedIds.length > 0) {
+            this.epgQueueService.enqueue(uncachedIds, visibleIds, credentials);
+        }
+    }
+
+    private updateProgramProgress(streamId: number, program: EpgItem) {
+        const now = Date.now();
+        const start = this.getProgramTimestampMs(
+            program.start,
+            program.start_timestamp
+        );
+        const end = this.getProgramTimestampMs(
+            program.stop ?? program.end,
+            program.stop_timestamp
+        );
+
+        if (now >= start && now <= end) {
+            const duration = end - start;
+            const elapsed = now - start;
+            const progress = (elapsed / duration) * 100;
+
+            this.currentProgramsProgress.set(streamId, progress);
+            return;
+        }
+
+        this.currentProgramsProgress.delete(streamId);
+    }
+
+    isSelected(item: XtreamCategory | XtreamCategoryLike): boolean {
+        const selectedCategory = this.xtreamStore.selectedCategoryId();
+        const itemId = Number(item.category_id ?? item.id);
+        return selectedCategory !== null && selectedCategory === itemId;
+    }
+
+    toggleFavorite(event: Event, item: XtreamChannelListItem) {
+        event.stopPropagation();
+        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+        if (!playlistId) {
+            return;
+        }
+
+        const favoriteKey = this.favoriteKeyFor(item);
+        const contentType = this.getContentTypeForItem(item);
+
+        this.xtreamStore
+            .toggleFavorite(item.xtream_id, playlistId, contentType)
+            .then((result: boolean) => {
+                if (result) {
+                    this.favorites.set(favoriteKey, true);
+                } else {
+                    this.favorites.delete(favoriteKey);
+                }
+                this.cdr.detectChanges();
+            });
+    }
+
+    favoriteKeyFor(item: XtreamChannelListItem): string {
+        return this.getFavoriteKey(
+            item.xtream_id,
+            item.type ?? this.xtreamStore.selectedContentType()
+        );
+    }
+
+    private getFavoriteKey(
+        xtreamId: number,
+        type?: 'live' | 'movie' | 'series' | 'vod'
+    ): string {
+        return `${this.normalizeContentType(type)}:${xtreamId}`;
+    }
+
+    private getContentTypeForItem(
+        item: XtreamChannelListItem
+    ): 'live' | 'movie' | 'series' {
+        return this.normalizeContentType(
+            item.type ?? this.xtreamStore.selectedContentType()
+        );
+    }
+
+    private normalizeContentType(
+        type?: 'live' | 'movie' | 'series' | 'vod'
+    ): 'live' | 'movie' | 'series' {
+        if (type === 'movie' || type === 'vod') {
+            return 'movie';
+        }
+
+        if (type === 'series') {
+            return 'series';
+        }
+
+        return 'live';
+    }
+
+    ngOnDestroy(): void {
+        this.subscriptions.unsubscribe();
+    }
+
+    private applyProgram(streamId: number, program: EpgItem): void {
+        this.epgPrograms.set(streamId, this.toSharedEpgProgram(program));
+        this.updateProgramProgress(streamId, program);
+        this.cdr.detectChanges();
+    }
+
+    private pickPreviewProgram(items: EpgItem[]): EpgItem | null {
+        if (!items.length) {
+            return null;
+        }
+
+        const now = Date.now();
+        const normalizedItems = [...items].sort(
+            (a, b) =>
+                this.getProgramTimestampMs(a.start, a.start_timestamp) -
+                this.getProgramTimestampMs(b.start, b.start_timestamp)
+        );
+
+        const currentProgram = normalizedItems.find((item) => {
+            const start = this.getProgramTimestampMs(
+                item.start,
+                item.start_timestamp
+            );
+            const end = this.getProgramTimestampMs(
+                item.stop ?? item.end,
+                item.stop_timestamp
+            );
+            return now >= start && now <= end;
+        });
+
+        if (currentProgram) {
+            return currentProgram;
+        }
+
+        const nextProgram = normalizedItems.find((item) => {
+            return (
+                this.getProgramTimestampMs(item.start, item.start_timestamp) >
+                now
+            );
+        });
+
+        return nextProgram ?? normalizedItems[0];
+    }
+
+    private getProgramTimestampMs(
+        dateValue: string | undefined,
+        unixTimestampValue: string | undefined
+    ): number {
+        const unixTimestamp = Number(unixTimestampValue);
+        if (Number.isFinite(unixTimestamp) && unixTimestamp > 0) {
+            return unixTimestamp * 1000;
+        }
+
+        return new Date(dateValue ?? '').getTime();
+    }
+
+    private toSharedEpgProgram(program: EpgItem): EpgProgram {
+        return {
+            start: program.start,
+            stop: program.stop ?? program.end,
+            channel: program.channel_id ?? program.id,
+            title: program.title,
+            desc: program.description ?? null,
+            category: null,
+            startTimestamp: this.getProgramTimestampSeconds(
+                program.start,
+                program.start_timestamp
+            ),
+            stopTimestamp: this.getProgramTimestampSeconds(
+                program.stop ?? program.end,
+                program.stop_timestamp
+            ),
+        };
+    }
+
+    private getProgramTimestampSeconds(
+        dateValue: string | undefined,
+        unixTimestampValue: string | undefined
+    ): number | null {
+        const unixTimestamp = Number(unixTimestampValue);
+        if (Number.isFinite(unixTimestamp) && unixTimestamp > 0) {
+            return unixTimestamp;
+        }
+
+        const parsedDate = new Date(dateValue ?? '').getTime();
+        return Number.isFinite(parsedDate)
+            ? Math.floor(parsedDate / 1000)
+            : null;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.html b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.html
new file mode 100644
index 0000000..5acf147
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.html
@@ -0,0 +1,85 @@
+<div class="recently-added-page">
+    <h2 class="recently-added-page__title">
+        {{ 'PORTALS.SIDEBAR.RECENTLY_ADDED' | translate }}
+    </h2>
+
+    @if (isLoading()) {
+        <!-- Three skeleton rails cover the typical shape of this view. -->
+        @for (_ of [1, 2, 3]; track $index) {
+            <section class="recently-added-page__skeleton-rail">
+                <div
+                    class="recently-added-page__skeleton-header"
+                    aria-hidden="true"
+                ></div>
+                <div
+                    class="recently-added-page__skeleton-track"
+                    aria-hidden="true"
+                >
+                    @for (slot of skeletonSlots; track slot) {
+                        <div class="recently-added-page__skeleton-card"></div>
+                    }
+                </div>
+            </section>
+        }
+    } @else {
+        @if (recentlyAddedVod().length > 0) {
+            <app-content-rail-shell
+                class="recently-added-page__rail"
+                [label]="'PORTALS.SIDEBAR.MOVIES' | translate"
+                [totalCount]="recentlyAddedVod().length"
+                [seeAllLink]="vodSeeAllLink()"
+                [seeAllLabel]="vodSeeAllLabel()"
+            >
+                @for (item of recentlyAddedVod(); track item.xtream_id) {
+                    <app-content-card
+                        [title]="item.title || item.name"
+                        [posterUrl]="item.poster_url || item.stream_icon"
+                        [type]="'movie'"
+                        [date]="getDate(item)"
+                        (cardClick)="openItem(item, 'vod')"
+                    />
+                }
+            </app-content-rail-shell>
+        }
+
+        @if (recentlyAddedSeries().length > 0) {
+            <app-content-rail-shell
+                class="recently-added-page__rail"
+                [label]="'PORTALS.SIDEBAR.SERIES' | translate"
+                [totalCount]="recentlyAddedSeries().length"
+                [seeAllLink]="seriesSeeAllLink()"
+                [seeAllLabel]="seriesSeeAllLabel()"
+            >
+                @for (item of recentlyAddedSeries(); track item.xtream_id) {
+                    <app-content-card
+                        [title]="item.title || item.name"
+                        [posterUrl]="item.poster_url || item.cover"
+                        [type]="'series'"
+                        [date]="getDate(item)"
+                        (cardClick)="openItem(item, 'series')"
+                    />
+                }
+            </app-content-rail-shell>
+        }
+
+        @if (recentlyAddedLive().length > 0) {
+            <app-content-rail-shell
+                class="recently-added-page__rail"
+                [label]="'PORTALS.SIDEBAR.LIVE_TV' | translate"
+                [totalCount]="recentlyAddedLive().length"
+                [seeAllLink]="liveSeeAllLink()"
+                [seeAllLabel]="liveSeeAllLabel()"
+            >
+                @for (item of recentlyAddedLive(); track item.xtream_id) {
+                    <app-content-card
+                        [title]="item.title || item.name"
+                        [posterUrl]="item.poster_url || item.stream_icon"
+                        [type]="'live'"
+                        [date]="getDate(item)"
+                        (cardClick)="openItem(item, 'live')"
+                    />
+                }
+            </app-content-rail-shell>
+        }
+    }
+</div>
diff --git a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
new file mode 100644
index 0000000..4788b76
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
@@ -0,0 +1,106 @@
+:host {
+    display: block;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.recently-added-page {
+    padding: 24px 28px 40px;
+    max-width: 1440px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    min-width: 0;
+    box-sizing: border-box;
+}
+
+.recently-added-page__title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 650;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    color: var(--app-heading-color, #d8dce8);
+}
+
+// Projected card sizing lives on the caller — the rail shell can't reach
+// projected children through emulated encapsulation.
+.recently-added-page__rail app-content-card {
+    flex: 0 0 160px;
+    width: 160px;
+    scroll-snap-align: start;
+}
+
+// ── Skeleton rails ─────────────────────────────────────────────────────────
+// Shown while the xtream store is still fetching categories/content and
+// before any section has resolved data. Matches the rail shell's header +
+// track geometry so the layout doesn't shift when real content arrives.
+.recently-added-page__skeleton-rail {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 0 0;
+}
+
+.recently-added-page__skeleton-header {
+    width: 180px;
+    height: 22px;
+    border-radius: 6px;
+}
+
+.recently-added-page__skeleton-track {
+    display: flex;
+    gap: 16px;
+    padding: 4px 0 16px;
+    overflow: hidden;
+}
+
+.recently-added-page__skeleton-card {
+    flex: 0 0 160px;
+    width: 160px;
+    aspect-ratio: 2 / 3;
+    border-radius: 12px;
+}
+
+.recently-added-page__skeleton-header,
+.recently-added-page__skeleton-card {
+    background: linear-gradient(
+        90deg,
+        var(--app-widget-bg, #1e2330) 0%,
+        var(--app-widget-header-bg, #232840) 50%,
+        var(--app-widget-bg, #1e2330) 100%
+    );
+    background-size: 200% 100%;
+    animation: recently-added-shimmer 1.6s linear infinite;
+    border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+}
+
+@keyframes recently-added-shimmer {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .recently-added-page__skeleton-header,
+    .recently-added-page__skeleton-card {
+        animation: none;
+        background-position: 0 0;
+    }
+}
+
+@media (max-width: 720px) {
+    .recently-added-page {
+        padding: 16px 16px 32px;
+        gap: 20px;
+    }
+
+    .recently-added-page__skeleton-card {
+        flex: 0 0 136px;
+        width: 136px;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.ts b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.ts
new file mode 100644
index 0000000..d742b66
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.ts
@@ -0,0 +1,162 @@
+import { Component, computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { startWith } from 'rxjs';
+import {
+    ContentCardComponent,
+    ContentRailShellComponent,
+} from '@iptvnator/portal/shared/ui';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { ContentType } from '@iptvnator/portal/xtream/data-access';
+
+interface RecentlyAddedItem {
+    readonly added?: string;
+    readonly category_id: string | number;
+    readonly cover?: string;
+    readonly id?: number;
+    readonly last_modified?: string;
+    readonly name?: string;
+    readonly poster_url?: string;
+    readonly series_id?: number;
+    readonly stream_id?: number;
+    readonly stream_icon?: string;
+    readonly title?: string;
+    readonly xtream_id?: number;
+}
+
+// Three placeholder slots per skeleton rail — enough to suggest a horizontal
+// scroll without taking the whole viewport.
+const SKELETON_CARDS_PER_RAIL = [1, 2, 3, 4, 5, 6] as const;
+
+@Component({
+    selector: 'app-recently-added',
+    templateUrl: './recently-added.component.html',
+    styleUrls: ['./recently-added.component.scss'],
+    imports: [ContentCardComponent, ContentRailShellComponent, TranslatePipe],
+})
+export class RecentlyAddedComponent {
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly router = inject(Router);
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly translate = inject(TranslateService);
+    // Re-compute translated labels when the active language changes.
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    readonly recentlyAddedLive = computed(() =>
+        this.getRecentlyAdded(
+            this.xtreamStore.liveStreams() as RecentlyAddedItem[]
+        )
+    );
+    readonly recentlyAddedVod = computed(() =>
+        this.getRecentlyAdded(
+            this.xtreamStore.vodStreams() as RecentlyAddedItem[]
+        )
+    );
+    readonly recentlyAddedSeries = computed(() =>
+        this.getRecentlyAdded(
+            this.xtreamStore.serialStreams() as RecentlyAddedItem[],
+            true
+        )
+    );
+
+    readonly skeletonSlots = SKELETON_CARDS_PER_RAIL;
+
+    readonly totalItems = computed(
+        () =>
+            this.recentlyAddedVod().length +
+            this.recentlyAddedSeries().length +
+            this.recentlyAddedLive().length
+    );
+
+    /**
+     * Show skeleton rails when the store is still fetching AND we have
+     * nothing resolved yet. Once a single section has data we drop the
+     * skeletons so partial-load states aren't obscured.
+     */
+    readonly isLoading = computed(() => {
+        const store = this.xtreamStore;
+        const hasAnyData = this.totalItems() > 0;
+        if (hasAnyData) return false;
+        return (
+            store.isLoadingContent() ||
+            store.isLoadingCategories() ||
+            store.isImporting()
+        );
+    });
+
+    // Absolute rail "browse all" routes reuse the active playlist id. The
+    // store owns the current playlist, so navigation stays correct even if
+    // the user switches playlists before the rails finish loading.
+    private readonly playlistId = computed(
+        () => this.xtreamStore.currentPlaylist()?.id ?? null
+    );
+
+    readonly vodSeeAllLink = computed(() => this.buildSectionLink('vod'));
+    readonly seriesSeeAllLink = computed(() =>
+        this.buildSectionLink('series')
+    );
+    readonly liveSeeAllLink = computed(() => this.buildSectionLink('live'));
+
+    readonly vodSeeAllLabel = computed(() =>
+        this.translateWithTick('PORTALS.BROWSE_ALL_MOVIES')
+    );
+    readonly seriesSeeAllLabel = computed(() =>
+        this.translateWithTick('PORTALS.BROWSE_ALL_SERIES')
+    );
+    readonly liveSeeAllLabel = computed(() =>
+        this.translateWithTick('PORTALS.BROWSE_ALL_LIVE')
+    );
+
+    private buildSectionLink(section: 'vod' | 'series' | 'live'): string[] | null {
+        const id = this.playlistId();
+        if (!id) return null;
+        return ['/workspace', 'xtreams', id, section];
+    }
+
+    private translateWithTick(key: string): string {
+        this.languageTick();
+        return this.translate.instant(key);
+    }
+
+    private getRecentlyAdded<T extends RecentlyAddedItem>(
+        items: T[],
+        isSeries = false
+    ): T[] {
+        return [...items]
+            .sort((a, b) => {
+                const dateA =
+                    parseInt(isSeries ? a.last_modified : a.added) || 0;
+                const dateB =
+                    parseInt(isSeries ? b.last_modified : b.added) || 0;
+                return dateB - dateA;
+            })
+            .slice(0, 20);
+    }
+
+    getDate(item: RecentlyAddedItem): number {
+        const timestamp = item.added || item.last_modified;
+        return parseInt(timestamp) * 1000;
+    }
+
+    openItem(item: RecentlyAddedItem, type: ContentType) {
+        this.xtreamStore.setSelectedContentType(type);
+
+        if (type === 'live') {
+            this.router.navigate(['..', type, item.category_id], {
+                relativeTo: this.activatedRoute,
+            });
+        } else {
+            const itemId =
+                item.xtream_id ||
+                item.id ||
+                (type === 'series' ? item.series_id : item.stream_id);
+            this.router.navigate(['..', type, item.category_id, itemId], {
+                relativeTo: this.activatedRoute,
+            });
+        }
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/search-results/search-results.component.html b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.html
new file mode 100644
index 0000000..1e60c95
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.html
@@ -0,0 +1,134 @@
+<app-search-layout
+    [searchTerm]="searchTerm()"
+    [resultsCount]="xtreamStore.searchResults().length"
+    [isLoading]="xtreamStore.isSearching()"
+    [showCloseButton]="false"
+    [showResultsCount]="!isGlobalSearch || !groupByPlaylist()"
+    [showSearchInput]="showInlineSearchInput"
+    (searchTermChange)="updateSearchTerm($event)"
+    (closeClick)="onCloseDialog()"
+>
+    <!-- Type filters -->
+    <ng-container filters>
+        @if (!isGlobalSearch) {
+            @for (filter of filterConfig; track filter.key) {
+                <mat-checkbox
+                    [ngModel]="filters()[filter.key]"
+                    (ngModelChange)="updateFilter(filter.key, $event)"
+                >
+                    {{ filter.translationKey | translate }}
+                </mat-checkbox>
+            }
+        }
+    </ng-container>
+
+    <ng-container header-actions>
+        <mat-checkbox
+            [ngModel]="excludeHidden()"
+            (ngModelChange)="toggleExcludeHidden($event)"
+        >
+            {{ 'PORTALS.SEARCH_VIEW.VISIBLE_CATEGORIES_ONLY' | translate }}
+        </mat-checkbox>
+        @if (isGlobalSearch) {
+            <button mat-icon-button (click)="onCloseDialog()">
+                <mat-icon>close</mat-icon>
+            </button>
+        }
+    </ng-container>
+
+    <ng-container subheader>
+        @if (isGlobalSearch) {
+            <div class="global-search-subheader">
+                <div class="global-search-subheader-left">
+                    <div class="global-search-note">
+                        <mat-icon>info_outline</mat-icon>
+                        <span>{{ 'PORTALS.SEARCH_VIEW.XTREAM_ONLY_NOTE' | translate }}</span>
+                    </div>
+                    <div class="global-search-filters">
+                        @for (filter of filterConfig; track filter.key) {
+                            <mat-checkbox
+                                [ngModel]="filters()[filter.key]"
+                                (ngModelChange)="updateFilter(filter.key, $event)"
+                            >
+                                {{ filter.translationKey | translate }}
+                            </mat-checkbox>
+                        }
+                    </div>
+                </div>
+                <mat-checkbox
+                    [ngModel]="groupByPlaylist()"
+                    (ngModelChange)="toggleGroupByPlaylist($event)"
+                >
+                    {{ 'PORTALS.SEARCH_VIEW.GROUP_BY_PLAYLIST' | translate }}
+                </mat-checkbox>
+            </div>
+        }
+    </ng-container>
+
+    <!-- Results -->
+    <ng-container results>
+        @if (isGlobalSearch) {
+            <!-- Global Search Results -->
+            @if (groupByPlaylist()) {
+                <!-- Grouped by playlist -->
+                <div class="playlist-section">
+                    <h2 class="section-title">
+                        Found {{ xtreamStore.searchResults().length }} items across
+                        {{ (groupedResults() | keyvalue).length }} playlists
+                    </h2>
+                    @for (
+                        group of groupedResults() | keyvalue;
+                        track group.key
+                    ) {
+                        <div class="playlist-group">
+                            <h3 class="playlist-title">
+                                <mat-icon>playlist_play</mat-icon>
+                                {{ group.key }}
+                                <span class="item-count"
+                                    >({{ $any(group).value.length }} items)</span
+                                >
+                            </h3>
+                            <div class="results-grid">
+                                @for (item of $any(group).value; track item.id) {
+                                    <app-content-card
+                                        [posterUrl]="item.poster_url"
+                                        [title]="item.title"
+                                        [type]="item.type"
+                                        [showPlaceholder]="true"
+                                        (cardClick)="selectItem(item)"
+                                    />
+                                }
+                            </div>
+                        </div>
+                    }
+                </div>
+            } @else {
+                <!-- Flat list -->
+                <div class="results-grid">
+                    @for (item of xtreamStore.searchResults(); track item.id) {
+                        <app-content-card
+                            [posterUrl]="item.poster_url"
+                            [title]="item.title"
+                            [type]="item.type"
+                            [showPlaceholder]="true"
+                            (cardClick)="selectItem(item)"
+                        />
+                    }
+                </div>
+            }
+        } @else {
+            <!-- Playlist-level Search Results -->
+            <div class="results-grid">
+                @for (item of xtreamStore.searchResults(); track item.id) {
+                    <app-content-card
+                        [posterUrl]="item.poster_url"
+                        [title]="item.title"
+                        [type]="item.type"
+                        [showPlaceholder]="true"
+                        (cardClick)="selectItem(item)"
+                    />
+                }
+            </div>
+        }
+    </ng-container>
+</app-search-layout>
diff --git a/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss
new file mode 100644
index 0000000..e9c3e0e
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.scss
@@ -0,0 +1,160 @@
+@use '../../../../../shared/ui/src/lib/styles/content-grid' as grid;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
+// Results grid styling
+.results-grid {
+    @include grid.content-grid(140px, 20px);
+    padding-bottom: 1rem;
+}
+
+// Global search overlay styles
+:host-context(.global-search-overlay) {
+    .results-grid {
+        mat-card {
+            position: relative;
+
+            .poster,
+            .poster-placeholder {
+                margin-top: 24px;
+            }
+
+            .playlist-badge {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                background: rgba(0, 0, 0, 0.85);
+                padding: 6px 8px;
+                font-size: 12px;
+                color: white;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                border-top-left-radius: inherit;
+                border-top-right-radius: inherit;
+                display: flex;
+                align-items: center;
+                gap: 4px;
+
+                mat-icon {
+                    font-size: 14px;
+                    width: 14px;
+                    height: 14px;
+                    flex-shrink: 0;
+                }
+            }
+        }
+    }
+}
+
+// Subheader row for global search (note + grouping toggle)
+.global-search-subheader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+
+    .global-search-subheader-left {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        min-width: 0;
+    }
+
+    .global-search-note {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 0.8rem;
+        opacity: 0.55;
+
+        mat-icon {
+            font-size: 15px;
+            width: 15px;
+            height: 15px;
+            flex-shrink: 0;
+        }
+    }
+
+    .global-search-filters {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    ::ng-deep mat-checkbox {
+        flex-shrink: 0;
+    }
+}
+
+// Playlist grouping styles for global search
+.playlist-group {
+    margin-bottom: 2rem;
+
+    .playlist-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 0 0 1rem 0;
+        padding: 8px;
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: 4px;
+        font-size: 1rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+
+        mat-icon {
+            opacity: 0.7;
+        }
+
+        .item-count {
+            margin-left: auto;
+            font-size: 0.85rem;
+            opacity: 0.7;
+        }
+    }
+
+    .results-grid {
+        margin-bottom: 0;
+    }
+}
+
+:host-context(.global-search-overlay) {
+    .playlist-group {
+        .playlist-title {
+            background: var(--surface);
+        }
+    }
+
+    .results-grid {
+        mat-card {
+            .playlist-badge {
+                display: none;
+            }
+
+            .poster,
+            .poster-placeholder {
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+.playlist-section {
+    .section-title {
+        margin: 0 0 1.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--mat-sys-on-surface);
+        padding: 0 8px;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/search-results/search-results.component.spec.ts b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.spec.ts
new file mode 100644
index 0000000..6912a0c
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.spec.ts
@@ -0,0 +1,203 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
+import { of } from 'rxjs';
+import { DatabaseService } from 'services';
+import { SearchResultsComponent } from './search-results.component';
+import {
+    SearchFilters,
+    XtreamContentItem,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+
+jest.mock('@iptvnator/portal/shared/ui', () => ({
+    ContentCardComponent: class {},
+    SearchLayoutComponent: class {},
+}));
+
+const DEFAULT_SEARCH_FILTERS: SearchFilters = {
+    live: true,
+    movie: true,
+    series: true,
+};
+
+function createSearchItem(
+    overrides: Partial<XtreamContentItem> = {}
+): XtreamContentItem {
+    return {
+        id: 1,
+        category_id: 123,
+        title: 'Matrix',
+        rating: '0',
+        added: '0',
+        poster_url: '',
+        xtream_id: 456,
+        type: 'movie',
+        ...overrides,
+    };
+}
+
+function createDeferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return { promise, resolve, reject };
+}
+
+class MockXtreamStore {
+    readonly searchTerm = signal('');
+    readonly searchFilters = signal(DEFAULT_SEARCH_FILTERS);
+    readonly searchResults = signal<XtreamContentItem[]>([]);
+    readonly isSearching = signal(false);
+
+    setSearchTerm = jest.fn((term: string) => {
+        this.searchTerm.set(term);
+    });
+    setSearchFilters = jest.fn((filters: SearchFilters) => {
+        this.searchFilters.set(filters);
+    });
+    updateSearchFilter = jest.fn();
+    setGlobalSearchResults = jest.fn((items: XtreamContentItem[]) => {
+        this.searchResults.set(items);
+    });
+    setIsSearching = jest.fn((state: boolean) => {
+        this.isSearching.set(state);
+    });
+    resetSearchResults = jest.fn();
+    searchContent = jest.fn();
+    setSelectedContentType = jest.fn();
+}
+
+describe('SearchResultsComponent initialQuery contract', () => {
+    let routerNavigateMock: jest.Mock;
+
+    beforeEach(() => {
+        routerNavigateMock = jest.fn();
+
+        TestBed.configureTestingModule({
+            providers: [
+                {
+                    provide: XtreamStore,
+                    useClass: MockXtreamStore,
+                },
+                {
+                    provide: Router,
+                    useValue: {
+                        navigate: routerNavigateMock,
+                    },
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        snapshot: {
+                            data: {},
+                            queryParamMap: convertToParamMap({ q: '' }),
+                        },
+                        queryParamMap: of(convertToParamMap({ q: '' })),
+                    },
+                },
+                {
+                    provide: DatabaseService,
+                    useValue: {
+                        globalSearchContent: jest.fn().mockResolvedValue([]),
+                    },
+                },
+            ],
+        });
+    });
+
+    it('applies initialQuery when opened as global search', () => {
+        const component = TestBed.runInInjectionContext(
+            () =>
+                new SearchResultsComponent(
+                    {
+                        isGlobalSearch: true,
+                        initialQuery: 'matrix',
+                    },
+                    undefined
+                )
+        );
+
+        const store = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+        expect(store.setSearchTerm).toHaveBeenCalledWith('matrix');
+        expect(component.searchTerm()).toBe('matrix');
+    });
+
+    it('does not force search term when initialQuery is not provided', () => {
+        TestBed.runInInjectionContext(
+            () =>
+                new SearchResultsComponent(
+                    {
+                        isGlobalSearch: true,
+                    },
+                    undefined
+                )
+        );
+
+        const store = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+        expect(store.setSearchTerm).not.toHaveBeenCalled();
+    });
+
+    it('navigates global search selection to workspace xtream route', () => {
+        const component = TestBed.runInInjectionContext(
+            () =>
+                new SearchResultsComponent(
+                    {
+                        isGlobalSearch: true,
+                    },
+                    undefined
+                )
+        );
+
+        component.selectItem(
+            createSearchItem({
+                playlist_id: 'playlist-1',
+            })
+        );
+
+        expect(routerNavigateMock).toHaveBeenCalledWith(
+            ['/workspace', 'xtreams', 'playlist-1', 'vod', '123', '456'],
+            {
+                state: undefined,
+            }
+        );
+    });
+
+    it('ignores stale global search responses once a newer search has completed', async () => {
+        const staleSearch = createDeferred<XtreamContentItem[]>();
+        const freshResults = [
+            createSearchItem({ xtream_id: 777, title: 'Fresh result' }),
+        ];
+        const databaseService = TestBed.inject(DatabaseService) as {
+            globalSearchContent: jest.Mock;
+        };
+        databaseService.globalSearchContent
+            .mockReturnValueOnce(staleSearch.promise)
+            .mockResolvedValueOnce(freshResults);
+
+        const component = TestBed.runInInjectionContext(
+            () =>
+                new SearchResultsComponent({
+                    isGlobalSearch: true,
+                }, undefined)
+        );
+        const store = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+
+        const stalePromise = component.searchGlobal('mat', ['movie']);
+        const freshPromise = component.searchGlobal('matrix', ['movie']);
+
+        await freshPromise;
+        expect(store.searchResults()).toEqual(freshResults);
+
+        staleSearch.resolve([
+            createSearchItem({ xtream_id: 1, title: 'Stale result' }),
+        ]);
+        await stalePromise;
+
+        expect(store.searchResults()).toEqual(freshResults);
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/search-results/search-results.component.ts b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.ts
new file mode 100644
index 0000000..fc69e49
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/search-results/search-results.component.ts
@@ -0,0 +1,350 @@
+import { KeyValuePipe } from '@angular/common';
+import {
+    AfterViewInit,
+    Component,
+    computed,
+    effect,
+    inject,
+    Inject,
+    Optional,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIconButton } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogModule,
+    MatDialogRef,
+} from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { DatabaseService } from 'services';
+import { ContentCardComponent } from '@iptvnator/portal/shared/ui';
+import { SearchLayoutComponent } from '@iptvnator/portal/shared/ui';
+import {
+    buildXtreamNavigationTarget,
+    isWorkspaceLayoutRoute,
+    queryParamSignal,
+} from '@iptvnator/portal/shared/util';
+import { createLogger } from '@iptvnator/portal/shared/util';
+import { XtreamContentItem } from '@iptvnator/portal/xtream/data-access';
+import { SearchFilters } from '@iptvnator/portal/xtream/data-access';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { ContentType } from '@iptvnator/portal/xtream/data-access';
+
+interface SearchResultsData {
+    isGlobalSearch: boolean;
+    initialQuery?: string;
+}
+
+function groupResultsByPlaylistName(
+    items: XtreamContentItem[]
+): Record<string, XtreamContentItem[]> {
+    return items.reduce<Record<string, XtreamContentItem[]>>(
+        (groups, item) => {
+            const key = String(item.playlist_name);
+            if (!groups[key]) {
+                groups[key] = [];
+            }
+            groups[key].push(item);
+            return groups;
+        },
+        {}
+    );
+}
+
+@Component({
+    selector: 'app-search-results',
+    imports: [
+        ContentCardComponent,
+        FormsModule,
+        KeyValuePipe,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIcon,
+        MatIconButton,
+        SearchLayoutComponent,
+        TranslatePipe,
+    ],
+    providers: [],
+    templateUrl: './search-results.component.html',
+    styleUrls: ['./search-results.component.scss'],
+})
+export class SearchResultsComponent implements AfterViewInit {
+    readonly searchLayoutComponent = viewChild(SearchLayoutComponent);
+    readonly xtreamStore = inject(XtreamStore);
+    readonly router = inject(Router);
+    readonly activatedRoute = inject(ActivatedRoute);
+    readonly databaseService = inject(DatabaseService);
+    private readonly logger = createLogger('XtreamSearchResults');
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.activatedRoute);
+    readonly routeSearchTerm = queryParamSignal(
+        this.activatedRoute,
+        'q',
+        (value) => (value ?? '').trim()
+    );
+
+    /** Search term from store */
+    readonly searchTerm = this.xtreamStore.searchTerm;
+
+    /** Search filters from store */
+    readonly filters = this.xtreamStore.searchFilters;
+    private globalSearchRequestVersion = 0;
+
+    private static readonly GROUP_BY_STORAGE_KEY =
+        'global-search-group-by-playlist';
+    private static readonly EXCLUDE_HIDDEN_STORAGE_KEY =
+        'xtream-search-exclude-hidden';
+    private static readonly TYPE_FILTERS_STORAGE_KEY =
+        'global-search-type-filters';
+
+    isGlobalSearch = false;
+
+    /** Whether to group global search results by playlist */
+    readonly groupByPlaylist = signal(
+        localStorage.getItem(SearchResultsComponent.GROUP_BY_STORAGE_KEY) !==
+            'false'
+    );
+
+    /** Whether to exclude content from hidden categories */
+    readonly excludeHidden = signal(
+        localStorage.getItem(
+            SearchResultsComponent.EXCLUDE_HIDDEN_STORAGE_KEY
+        ) === 'true'
+    );
+
+    readonly filterConfig = [
+        {
+            key: 'live' as keyof SearchFilters,
+            label: 'Live TV',
+            translationKey: 'PORTALS.SIDEBAR.LIVE_TV',
+        },
+        {
+            key: 'movie' as keyof SearchFilters,
+            label: 'Movies',
+            translationKey: 'PORTALS.SIDEBAR.MOVIES',
+        },
+        {
+            key: 'series' as keyof SearchFilters,
+            label: 'Series',
+            translationKey: 'PORTALS.SIDEBAR.SERIES',
+        },
+    ];
+
+    /** Grouped results computed once per result change (avoids recalculating on every CD cycle) */
+    readonly groupedResults = computed(() => {
+        const results = this.xtreamStore.searchResults();
+        if (!this.isGlobalSearch) return { default: results };
+        return groupResultsByPlaylistName(results);
+    });
+
+    constructor(
+        @Optional() @Inject(MAT_DIALOG_DATA) data: SearchResultsData,
+        @Optional() public dialogRef: MatDialogRef<SearchResultsComponent>
+    ) {
+        this.isGlobalSearch = data?.isGlobalSearch || false;
+        const initialQuery = (data?.initialQuery ?? '').trim();
+
+        if (this.isGlobalSearch) {
+            const savedFilters = localStorage.getItem(
+                SearchResultsComponent.TYPE_FILTERS_STORAGE_KEY
+            );
+            if (savedFilters) {
+                try {
+                    const parsed = JSON.parse(
+                        savedFilters
+                    ) as Partial<SearchFilters>;
+                    this.xtreamStore.setSearchFilters({
+                        live: parsed.live !== false,
+                        movie: parsed.movie !== false,
+                        series: parsed.series !== false,
+                    });
+                } catch {
+                    // Ignore malformed storage value and keep defaults.
+                }
+            }
+
+            if (initialQuery) {
+                this.xtreamStore.setSearchTerm(initialQuery);
+            }
+        }
+
+        effect((onCleanup) => {
+            const term = this.searchTerm();
+            if (term.length >= 3) {
+                const timeout = setTimeout(() => this.executeSearch(), 300);
+                onCleanup(() => clearTimeout(timeout));
+            } else if (term.length === 0) {
+                this.clearResultsOnly();
+            }
+        });
+
+        effect(() => {
+            if (this.isGlobalSearch || !this.isWorkspaceLayout) {
+                return;
+            }
+
+            const queryTerm = this.routeSearchTerm();
+            if (!queryTerm || queryTerm === this.searchTerm()) {
+                return;
+            }
+
+            this.xtreamStore.setSearchTerm(queryTerm);
+        });
+    }
+
+    ngAfterViewInit() {
+        this.xtreamStore.setSelectedContentType(undefined);
+        setTimeout(() => {
+            this.searchLayoutComponent()?.focusSearchInput();
+        });
+    }
+
+    executeSearch() {
+        const filters = this.filters();
+        const types = Object.entries(filters)
+            .filter(([, enabled]) => enabled)
+            .map(([type]) => type);
+        const excludeHidden = this.excludeHidden();
+
+        if (this.isGlobalSearch) {
+            this.searchGlobal(this.searchTerm(), types, excludeHidden);
+        } else {
+            this.xtreamStore.searchContent({
+                term: this.searchTerm(),
+                types,
+                excludeHidden,
+            });
+        }
+    }
+
+    /**
+     * Update search term in the store
+     */
+    updateSearchTerm(term: string) {
+        this.xtreamStore.setSearchTerm(term);
+    }
+
+    /**
+     * Update a single filter in the store
+     */
+    updateFilter(key: keyof SearchFilters, value: boolean) {
+        this.xtreamStore.updateSearchFilter(key, value);
+
+        if (this.isGlobalSearch) {
+            localStorage.setItem(
+                SearchResultsComponent.TYPE_FILTERS_STORAGE_KEY,
+                JSON.stringify(this.xtreamStore.searchFilters())
+            );
+        }
+
+        if (this.searchTerm().length >= 3) {
+            this.executeSearch();
+        }
+    }
+
+    /**
+     * Clear only the results, not the search term/filters
+     */
+    private clearResultsOnly() {
+        this.globalSearchRequestVersion++;
+        this.xtreamStore.setIsSearching(false);
+        this.xtreamStore.setGlobalSearchResults([]);
+    }
+
+    async searchGlobal(term: string, types: string[], excludeHidden?: boolean) {
+        const requestVersion = ++this.globalSearchRequestVersion;
+        this.xtreamStore.setIsSearching(true);
+        try {
+            const results = await this.databaseService.globalSearchContent(
+                term,
+                types,
+                excludeHidden
+            );
+
+            if (requestVersion !== this.globalSearchRequestVersion) {
+                return;
+            }
+
+            if (results && Array.isArray(results)) {
+                this.xtreamStore.setGlobalSearchResults(results);
+            } else {
+                this.xtreamStore.setIsSearching(false);
+            }
+        } catch (error) {
+            if (requestVersion !== this.globalSearchRequestVersion) {
+                return;
+            }
+
+            this.logger.error('Error in global search', error);
+            this.xtreamStore.resetSearchResults();
+        }
+    }
+
+    selectItem(item: XtreamContentItem) {
+        const playlistId = item.playlist_id ?? this.xtreamStore.playlistId();
+        if (!playlistId) {
+            return;
+        }
+
+        const type = (item.type === 'movie' ? 'vod' : item.type) as ContentType;
+        const navigationType =
+            item.type === 'movie'
+                ? 'movie'
+                : item.type === 'series'
+                  ? 'series'
+                  : 'live';
+        this.xtreamStore.setSelectedContentType(type);
+
+        const navigation = buildXtreamNavigationTarget({
+            playlistId,
+            type: navigationType,
+            categoryId: item.category_id,
+            itemId: item.xtream_id,
+            title: item.title,
+            imageUrl: item.poster_url,
+        });
+
+        if (this.isGlobalSearch) {
+            this.dialogRef?.close();
+        }
+
+        void this.router.navigate(navigation.link, {
+            state: navigation.state,
+        });
+    }
+
+    onCloseDialog() {
+        this.dialogRef?.close();
+    }
+
+    toggleGroupByPlaylist(value: boolean) {
+        this.groupByPlaylist.set(value);
+        localStorage.setItem(
+            SearchResultsComponent.GROUP_BY_STORAGE_KEY,
+            String(value)
+        );
+    }
+
+    toggleExcludeHidden(value: boolean) {
+        this.excludeHidden.set(value);
+        localStorage.setItem(
+            SearchResultsComponent.EXCLUDE_HIDDEN_STORAGE_KEY,
+            String(value)
+        );
+        if (this.searchTerm().length >= 3) {
+            this.executeSearch();
+        }
+    }
+
+    getGroupedResults() {
+        return this.groupedResults();
+    }
+
+    get showInlineSearchInput(): boolean {
+        return !this.isWorkspaceLayout || this.isGlobalSearch;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.html b/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.html
new file mode 100644
index 0000000..da237b5
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.html
@@ -0,0 +1,94 @@
+@let item = selectedItem();
+@if (item?.info) {
+    <app-content-hero
+        [title]="item.info?.name"
+        [description]="item.info?.plot"
+        [posterUrl]="item.info?.cover"
+        [backdropUrl]="item.info?.backdrop_path?.[0]"
+        (backClicked)="goBack()"
+    >
+        <ng-container hero-tags>
+            @if (item.info?.releaseDate) {
+                <span class="details__tag">{{
+                    item.info.releaseDate | slice: 0 : 4
+                }}</span>
+            }
+            @if (item.info?.genre) {
+                <span class="details__tag">{{ item.info.genre }}</span>
+            }
+            @if (item.info?.episode_run_time) {
+                <span class="details__tag"
+                    >{{ item.info.episode_run_time }} min/ep</span
+                >
+            }
+            @if (item.info?.rating) {
+                <span class="details__tag details__tag--rating">
+                    ⭐ {{ item.info.rating }}
+                </span>
+            }
+        </ng-container>
+
+        <ng-container hero-meta>
+            @if (item.info?.cast) {
+                <div class="details__meta-item">
+                    <span class="label">{{ 'XTREAM.CAST' | translate }}</span>
+                    <span class="value">{{ item.info.cast }}</span>
+                </div>
+            }
+            @if (item.info?.director) {
+                <div class="details__meta-item">
+                    <span class="label">{{
+                        'XTREAM.DIRECTOR' | translate
+                    }}</span>
+                    <span class="value">{{ item.info.director }}</span>
+                </div>
+            }
+        </ng-container>
+
+        <ng-container hero-actions>
+            @if (!isFavorite()) {
+                <button class="favorite-btn" (click)="toggleFavorite()">
+                    <mat-icon>add</mat-icon>
+                    {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
+                </button>
+            } @else {
+                <button
+                    class="favorite-btn favorite-btn--active"
+                    (click)="toggleFavorite()"
+                >
+                    <mat-icon>check</mat-icon>
+                    {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
+                </button>
+            }
+        </ng-container>
+
+        @if (inlinePlayback(); as playback) {
+            <app-portal-inline-player
+                [playback]="playback"
+                (timeUpdate)="handleInlineTimeUpdate($event)"
+                (closed)="closeInlinePlayer()"
+                (streamUrlCopied)="showCopyNotification()"
+            />
+        }
+
+        <app-season-container
+            [seasons]="item.episodes"
+            [seriesId]="item.series_id"
+            [playlistId]="currentPlaylistId()"
+            [seriesTitle]="item.info?.name"
+            [playbackPositions]="episodePlaybackPositions()"
+            [xtreamDownloadContext]="xtreamDownloadContext()"
+            [openingEpisodeId]="openingEpisodeId()"
+            [activeEpisodeId]="activeEpisodeId()"
+            (episodeClicked)="playEpisode($event)"
+            (playbackToggleRequested)="handlePlaybackToggleRequested($event)"
+        />
+    </app-content-hero>
+} @else if (detailsError()) {
+    <app-content-hero
+        [errorMessage]="detailsError()"
+        (backClicked)="goBack()"
+    />
+} @else {
+    <app-content-hero [isLoading]="true" (backClicked)="goBack()" />
+}
diff --git a/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.spec.ts b/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.spec.ts
new file mode 100644
index 0000000..7999240
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.spec.ts
@@ -0,0 +1,269 @@
+import { Component, input, output, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Location } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+import {
+    ContentHeroComponent,
+    SeasonContainerComponent,
+} from 'components';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYBACK_POSITIONS,
+    PORTAL_PLAYER,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { PortalInlinePlayerComponent } from '@iptvnator/ui/playback';
+import { of } from 'rxjs';
+import { SerialDetailsComponent } from './serial-details.component';
+
+@Component({
+    selector: 'app-content-hero',
+    standalone: true,
+    template: '<ng-content />',
+})
+class StubContentHeroComponent {
+    readonly title = input<string | undefined>(undefined);
+    readonly description = input<string | undefined>(undefined);
+    readonly posterUrl = input<string | undefined>(undefined);
+    readonly backdropUrl = input<string | undefined>(undefined);
+    readonly isLoading = input(false);
+    readonly errorMessage = input<string | null>(null);
+    readonly backClicked = output<void>();
+}
+
+@Component({
+    selector: 'app-season-container',
+    standalone: true,
+    template: '<div data-testid="season-container"></div>',
+})
+class StubSeasonContainerComponent {
+    readonly seasons = input<unknown>(null);
+    readonly seriesId = input<number | string | null>(null);
+    readonly playlistId = input('');
+    readonly seriesTitle = input<string | undefined>(undefined);
+    readonly playbackPositions = input<unknown>(null);
+    readonly xtreamDownloadContext = input<unknown>(null);
+    readonly openingEpisodeId = input<number | null>(null);
+    readonly activeEpisodeId = input<number | null>(null);
+    readonly episodeClicked = output<unknown>();
+    readonly playbackToggleRequested = output<unknown>();
+}
+
+@Component({
+    selector: 'app-portal-inline-player',
+    standalone: true,
+    template: '',
+})
+class StubPortalInlinePlayerComponent {
+    readonly playback = input<unknown>(null);
+    readonly timeUpdate = output<unknown>();
+    readonly closed = output<void>();
+    readonly streamUrlCopied = output<void>();
+}
+
+@Component({
+    selector: 'mat-icon',
+    standalone: true,
+    template: '<ng-content />',
+})
+class StubMatIconComponent {}
+
+describe('SerialDetailsComponent', () => {
+    let fixture: ComponentFixture<SerialDetailsComponent>;
+    const selectedItem = signal<unknown>(null);
+    const selectedContentType = signal<'series'>('series');
+    const isFavorite = signal(false);
+    const isLoadingDetails = signal(false);
+    const detailsError = signal<string | null>(null);
+    const currentPlaylist = signal({
+        id: 'xtream-1',
+        serverUrl: 'http://xtream.example',
+        username: 'user',
+        password: 'pass',
+    });
+    const fetchSerialDetailsWithMetadata = jest.fn();
+    const checkFavoriteStatus = jest.fn();
+    const getSeriesPlaybackPositions = jest.fn().mockResolvedValue([]);
+
+    beforeEach(async () => {
+        selectedItem.set({
+            series_id: 103,
+            info: {
+                name: 'Series One',
+                plot: 'Series plot',
+                cover: 'cover.jpg',
+                backdrop_path: [],
+                genre: 'Drama',
+            },
+            episodes: {
+                '1': [
+                    {
+                        id: '1001',
+                        episode_num: 1,
+                        title: 'Episode 1',
+                        season: 1,
+                    },
+                ],
+            },
+        });
+        isFavorite.set(false);
+        isLoadingDetails.set(false);
+        detailsError.set(null);
+        fetchSerialDetailsWithMetadata.mockClear();
+        checkFavoriteStatus.mockClear();
+        getSeriesPlaybackPositions.mockClear();
+
+        await TestBed.configureTestingModule({
+            imports: [SerialDetailsComponent],
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        snapshot: {
+                            params: {
+                                categoryId: '3',
+                                serialId: '103',
+                            },
+                        },
+                    },
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: {
+                        selectedItem,
+                        selectedContentType,
+                        isFavorite,
+                        isLoadingDetails,
+                        detailsError,
+                        currentPlaylist,
+                        fetchSerialDetailsWithMetadata,
+                        checkFavoriteStatus,
+                        setSelectedItem: jest.fn((value: unknown) =>
+                            selectedItem.set(value)
+                        ),
+                        toggleFavorite: jest.fn(),
+                        constructEpisodeStreamUrl: jest.fn(),
+                        addRecentItem: jest.fn(),
+                        backfillContentBackdrop: jest.fn(),
+                    },
+                },
+                {
+                    provide: PORTAL_EXTERNAL_PLAYBACK,
+                    useValue: {
+                        activeSession: signal(null),
+                    },
+                },
+                {
+                    provide: PORTAL_PLAYBACK_POSITIONS,
+                    useValue: {
+                        getSeriesPlaybackPositions,
+                        savePlaybackPosition: jest.fn(),
+                        clearPlaybackPosition: jest.fn(),
+                    },
+                },
+                {
+                    provide: PORTAL_PLAYER,
+                    useValue: {
+                        isEmbeddedPlayer: jest.fn().mockReturnValue(false),
+                        openResolvedPlayback: jest.fn(),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                    },
+                },
+                {
+                    provide: Location,
+                    useValue: {
+                        back: jest.fn(),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(SerialDetailsComponent, {
+                remove: {
+                    imports: [
+                        ContentHeroComponent,
+                        MatIcon,
+                        PortalInlinePlayerComponent,
+                        SeasonContainerComponent,
+                        TranslatePipe,
+                    ],
+                },
+                add: {
+                    imports: [
+                        StubContentHeroComponent,
+                        StubMatIconComponent,
+                        StubPortalInlinePlayerComponent,
+                        StubSeasonContainerComponent,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(SerialDetailsComponent);
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+    });
+
+    it('initializes series metadata and renders the season container', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(fetchSerialDetailsWithMetadata).toHaveBeenCalledWith({
+            serialId: '103',
+            categoryId: 3,
+        });
+        expect(checkFavoriteStatus).toHaveBeenCalledWith(
+            103,
+            'xtream-1',
+            'series'
+        );
+        expect(getSeriesPlaybackPositions).toHaveBeenCalledWith(
+            'xtream-1',
+            103
+        );
+
+        const seasonContainer = fixture.debugElement.query(
+            By.directive(StubSeasonContainerComponent)
+        )?.componentInstance as StubSeasonContainerComponent | undefined;
+
+        expect(seasonContainer).toBeDefined();
+        expect(seasonContainer?.seriesId()).toBe(103);
+        expect(seasonContainer?.playlistId()).toBe('xtream-1');
+        expect(seasonContainer?.seasons()).toEqual({
+            '1': [
+                {
+                    id: '1001',
+                    episode_num: 1,
+                    title: 'Episode 1',
+                    season: 1,
+                },
+            ],
+        });
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.ts b/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.ts
new file mode 100644
index 0000000..89ca17a
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/serial-details/serial-details.component.ts
@@ -0,0 +1,404 @@
+import { Location, SlicePipe } from '@angular/common';
+import {
+    Component,
+    effect,
+    inject,
+    OnDestroy,
+    OnInit,
+    signal,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import {
+    ContentHeroComponent,
+    SeasonContainerComponent,
+    SeasonContainerPlaybackToggleRequest,
+    SeasonContainerXtreamDownloadContext,
+} from 'components';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYBACK_POSITIONS,
+    PORTAL_PLAYER,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { PortalInlinePlayerComponent } from '@iptvnator/ui/playback';
+import {
+    PlaybackPositionData,
+    PlayerContentInfo,
+    ResolvedPortalPlayback,
+    XtreamSerieEpisode,
+    XtreamSerieDetails,
+} from 'shared-interfaces';
+
+type XtreamSerieDetailsView = XtreamSerieDetails & {
+    readonly series_id: number;
+};
+
+@Component({
+    selector: 'app-serial-details',
+    templateUrl: './serial-details.component.html',
+    styleUrls: [
+        '../../../../../../ui/components/src/lib/styles/detail-view.scss',
+    ],
+    styles: [
+        `
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+                min-height: 0;
+            }
+        `,
+    ],
+    imports: [
+        ContentHeroComponent,
+        MatIcon,
+        PortalInlinePlayerComponent,
+        SeasonContainerComponent,
+        SlicePipe,
+        TranslatePipe,
+    ],
+})
+export class SerialDetailsComponent implements OnInit, OnDestroy {
+    private readonly location = inject(Location);
+    private readonly route = inject(ActivatedRoute);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly playbackPositions = inject(PORTAL_PLAYBACK_POSITIONS);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+    private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translateService = inject(TranslateService);
+
+    readonly selectedItem = signal<XtreamSerieDetailsView | null>(null);
+    readonly selectedContentType = this.xtreamStore.selectedContentType;
+    readonly isFavorite = this.xtreamStore.isFavorite;
+    readonly isLoadingDetails = this.xtreamStore.isLoadingDetails;
+    readonly detailsError = this.xtreamStore.detailsError;
+    readonly inlinePlayback = signal<ResolvedPortalPlayback | null>(null);
+    readonly episodePlaybackPositions = signal<
+        Map<number, PlaybackPositionData>
+    >(new Map());
+    readonly currentPlaylistId = signal('');
+    readonly xtreamDownloadContext =
+        signal<SeasonContainerXtreamDownloadContext | null>(null);
+    private readonly detailsInitDone = signal(false);
+    private readonly backdropBackfillKey = signal<string | null>(null);
+    private lastSaveTime = 0;
+    private unsubscribePositionUpdates: (() => void) | null = null;
+    readonly openingEpisodeId = signal<number | null>(null);
+    readonly activeEpisodeId = signal<number | null>(null);
+
+    constructor() {
+        effect(() => {
+            const item = this.xtreamStore.selectedItem() as unknown as
+                | (XtreamSerieDetails & {
+                      readonly series_id?: string | number;
+                  })
+                | null;
+            this.selectedItem.set(
+                item
+                    ? {
+                          ...item,
+                          series_id: Number(item.series_id),
+                      }
+                    : null
+            );
+        });
+
+        effect(() => {
+            const playlist = this.xtreamStore.currentPlaylist();
+            this.currentPlaylistId.set(playlist?.id ?? '');
+            this.xtreamDownloadContext.set(
+                playlist
+                    ? {
+                          serverUrl: playlist.serverUrl,
+                          username: playlist.username,
+                          password: playlist.password,
+                      }
+                    : null
+            );
+        });
+
+        effect(() => {
+            const playlistId = this.xtreamStore.currentPlaylist()?.id;
+            const { categoryId, serialId } = this.route.snapshot.params;
+            if (!playlistId || this.detailsInitDone()) {
+                return;
+            }
+
+            this.initializeSerialDetails(playlistId, categoryId, serialId);
+            this.detailsInitDone.set(true);
+        });
+
+        effect(() => {
+            const playlistId = this.currentPlaylistId();
+            const selectedItem = this.selectedItem();
+            const xtreamId = Number(selectedItem?.series_id ?? 0);
+            const backdropUrl = selectedItem?.info?.backdrop_path?.[0]?.trim();
+
+            if (!playlistId || !Number.isFinite(xtreamId) || xtreamId <= 0 || !backdropUrl) {
+                return;
+            }
+
+            const backfillKey = `${playlistId}:${xtreamId}:${backdropUrl}`;
+            if (this.backdropBackfillKey() === backfillKey) {
+                return;
+            }
+
+            this.backdropBackfillKey.set(backfillKey);
+            void this.xtreamStore.backfillContentBackdrop({
+                xtreamId,
+                contentType: 'series',
+                playlist: this.xtreamStore.currentPlaylist,
+                backdropUrl,
+            });
+        });
+
+        effect(() => {
+            const session = this.externalPlayback.activeSession();
+            const selectedItem = this.selectedItem();
+            const playlistId = this.currentPlaylistId();
+
+            if (
+                !session?.contentInfo ||
+                !selectedItem?.series_id ||
+                !playlistId ||
+                session.contentInfo.contentType !== 'episode' ||
+                session.contentInfo.playlistId !== playlistId ||
+                session.contentInfo.seriesXtreamId !==
+                    Number(selectedItem.series_id)
+            ) {
+                this.openingEpisodeId.set(null);
+                this.activeEpisodeId.set(null);
+                return;
+            }
+
+            if (session.status === 'launching') {
+                this.openingEpisodeId.set(session.contentInfo.contentXtreamId);
+                this.activeEpisodeId.set(null);
+                return;
+            }
+
+            if (session.status === 'opened' || session.status === 'playing') {
+                this.openingEpisodeId.set(null);
+                this.activeEpisodeId.set(session.contentInfo.contentXtreamId);
+                return;
+            }
+
+            this.openingEpisodeId.set(null);
+            this.activeEpisodeId.set(null);
+        });
+
+        if (window.electron?.onPlaybackPositionUpdate) {
+            this.unsubscribePositionUpdates =
+                window.electron.onPlaybackPositionUpdate(
+                    (data: PlaybackPositionData) => {
+                        const selectedItem = this.selectedItem();
+
+                        if (
+                            data.contentType !== 'episode' ||
+                            data.playlistId !== this.currentPlaylistId() ||
+                            data.seriesXtreamId !==
+                                Number(selectedItem?.series_id ?? 0)
+                        ) {
+                            return;
+                        }
+
+                        this.updateEpisodePlaybackPosition(data);
+                    }
+                );
+        }
+    }
+
+    ngOnInit(): void {
+        const currentPlaylist = this.xtreamStore.currentPlaylist();
+        if (!currentPlaylist?.id) {
+            return;
+        }
+
+        const { categoryId, serialId } = this.route.snapshot.params;
+        this.initializeSerialDetails(currentPlaylist.id, categoryId, serialId);
+        this.detailsInitDone.set(true);
+    }
+
+    ngOnDestroy(): void {
+        this.closeInlinePlayer();
+        this.xtreamStore.setSelectedItem(null);
+        this.unsubscribePositionUpdates?.();
+    }
+
+    playEpisode(episode: XtreamSerieEpisode): void {
+        this.addToRecentlyViewed(this.route.snapshot.params.serialId);
+
+        const streamUrl = this.xtreamStore.constructEpisodeStreamUrl(episode);
+        const contentInfo: PlayerContentInfo = {
+            playlistId: this.xtreamStore.currentPlaylist().id,
+            contentXtreamId: Number(episode.id),
+            contentType: 'episode',
+            seriesXtreamId: Number(this.selectedItem().series_id),
+            seasonNumber: Number(episode.season),
+            episodeNumber: Number(episode.episode_num),
+        };
+
+        const position = this.episodePlaybackPositions().get(
+            Number(episode.id)
+        );
+
+        const playback: ResolvedPortalPlayback = {
+            streamUrl,
+            title: episode.title,
+            thumbnail: this.selectedItem().info.cover,
+            startTime: position?.positionSeconds,
+            contentInfo,
+        };
+
+        this.startPlayback(playback);
+    }
+
+    toggleFavorite(): void {
+        this.xtreamStore.toggleFavorite(
+            this.route.snapshot.params.serialId,
+            this.xtreamStore.currentPlaylist().id,
+            'series',
+            this.selectedItem()?.info?.backdrop_path?.[0]
+        );
+    }
+
+    goBack(): void {
+        this.closeInlinePlayer();
+        this.location.back();
+    }
+
+    closeInlinePlayer(): void {
+        this.inlinePlayback.set(null);
+        this.lastSaveTime = 0;
+    }
+
+    handleInlineTimeUpdate(event: {
+        currentTime: number;
+        duration: number;
+    }): void {
+        const playback = this.inlinePlayback();
+        if (!playback?.contentInfo) return;
+
+        const now = Date.now();
+        if (now - this.lastSaveTime <= 15000) return;
+
+        this.lastSaveTime = now;
+        const position: PlaybackPositionData = {
+            ...playback.contentInfo,
+            positionSeconds: Math.floor(event.currentTime),
+            durationSeconds: Math.floor(event.duration),
+        };
+        void this.playbackPositions.savePlaybackPosition(
+            playback.contentInfo.playlistId,
+            position
+        );
+        this.updateEpisodePlaybackPosition(position);
+    }
+
+    showCopyNotification(): void {
+        this.snackBar.open(
+            this.translateService.instant('PORTALS.STREAM_URL_COPIED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
+
+    private addToRecentlyViewed(xtreamId: number): void {
+        this.xtreamStore.addRecentItem({
+            xtreamId,
+            contentType: 'series',
+            playlist: this.xtreamStore.currentPlaylist,
+            backdropUrl: this.selectedItem()?.info?.backdrop_path?.[0],
+        });
+    }
+
+    private startPlayback(playback: ResolvedPortalPlayback): void {
+        this.lastSaveTime = 0;
+        if (this.portalPlayer.isEmbeddedPlayer()) {
+            this.inlinePlayback.set(playback);
+            return;
+        }
+
+        this.closeInlinePlayer();
+        void this.portalPlayer.openResolvedPlayback(playback, true);
+    }
+
+    async handlePlaybackToggleRequested(
+        request: SeasonContainerPlaybackToggleRequest
+    ): Promise<void> {
+        const playlistId = this.currentPlaylistId();
+        if (!playlistId) {
+            return;
+        }
+
+        if (request.nextPosition) {
+            await this.playbackPositions.savePlaybackPosition(
+                playlistId,
+                request.nextPosition
+            );
+            this.updateEpisodePlaybackPosition(request.nextPosition);
+            return;
+        }
+
+        await this.playbackPositions.clearPlaybackPosition(
+            playlistId,
+            request.contentXtreamId,
+            'episode'
+        );
+        this.removeEpisodePlaybackPosition(request.contentXtreamId);
+    }
+
+    private async loadSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<void> {
+        const positions =
+            await this.playbackPositions.getSeriesPlaybackPositions(
+                playlistId,
+                seriesXtreamId
+            );
+        const positionsMap = new Map<number, PlaybackPositionData>();
+        positions.forEach((position) => {
+            positionsMap.set(position.contentXtreamId, position);
+        });
+        this.episodePlaybackPositions.set(positionsMap);
+    }
+
+    private updateEpisodePlaybackPosition(
+        position: PlaybackPositionData
+    ): void {
+        const updated = new Map(this.episodePlaybackPositions());
+        updated.set(position.contentXtreamId, position);
+        this.episodePlaybackPositions.set(updated);
+    }
+
+    private removeEpisodePlaybackPosition(contentXtreamId: number): void {
+        const updated = new Map(this.episodePlaybackPositions());
+        updated.delete(contentXtreamId);
+        this.episodePlaybackPositions.set(updated);
+    }
+
+    private initializeSerialDetails(
+        playlistId: string,
+        categoryId: string | number,
+        serialId: string
+    ): void {
+        this.xtreamStore.fetchSerialDetailsWithMetadata({
+            serialId,
+            categoryId: Number(categoryId),
+        });
+        const serialXtreamId = Number(serialId);
+        this.xtreamStore.checkFavoriteStatus(
+            serialXtreamId,
+            playlistId,
+            'series'
+        );
+        void this.loadSeriesPlaybackPositions(playlistId, serialXtreamId);
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-fallback.util.spec.ts b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-fallback.util.spec.ts
new file mode 100644
index 0000000..65f03b9
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-fallback.util.spec.ts
@@ -0,0 +1,177 @@
+import { XtreamVodDetails, XtreamVodStream } from 'shared-interfaces';
+import {
+    buildXtreamVodFallbackViewModel,
+    hasUsableXtreamVodMetadata,
+} from './vod-details-fallback.util';
+
+describe('vod-details-fallback.util', () => {
+    it('treats populated Xtream info as usable metadata', () => {
+        const vodDetails: XtreamVodDetails = {
+            info: {
+                kinopoisk_url: '',
+                tmdb_id: 1,
+                name: 'City of McFarland',
+                o_name: 'City of McFarland',
+                cover_big: 'https://example.com/poster.jpg',
+                movie_image: 'https://example.com/poster.jpg',
+                releasedate: '2015-02-20',
+                episode_run_time: 120,
+                youtube_trailer: '',
+                director: 'Niki Caro',
+                actors: 'Kevin Costner',
+                cast: 'Kevin Costner',
+                description: 'A real description',
+                plot: 'A real plot',
+                age: '',
+                mpaa_rating: '',
+                rating_count_kinopoisk: 0,
+                country: 'US',
+                genre: 'Drama',
+                backdrop_path: ['https://example.com/backdrop.jpg'],
+                duration_secs: 7200,
+                duration: '02:00:00',
+                video: ['H.264'],
+                audio: ['AAC'],
+                bitrate: 5000,
+                rating: 7.4,
+                rating_imdb: '7.4',
+                rating_kinopoisk: '7.4',
+            },
+            movie_data: {
+                stream_id: 678140,
+                name: 'City of McFarland (2015) DE',
+                added: '1750671180',
+                category_id: '235',
+                container_extension: 'mkv',
+                custom_sid: null,
+                direct_source: '',
+            },
+        };
+
+        expect(hasUsableXtreamVodMetadata(vodDetails)).toBe(true);
+    });
+
+    it('builds a curated fallback model when Xtream returns info as an empty array', () => {
+        const catalogItem = {
+            name: 'Die Kühe sind Los! (2004) DE',
+            stream_id: 650020,
+            stream_icon: 'https://example.com/cows.jpg',
+            added: '1720000000',
+            category_id: '235',
+            container_extension: 'mp4',
+            rating: 6.1,
+            rating_imdb: '6.1',
+        } satisfies Partial<XtreamVodStream>;
+
+        const fallback = buildXtreamVodFallbackViewModel({
+            vodDetails: { info: [] },
+            catalogItem,
+            category: {
+                category_id: '235',
+                category_name: 'DE | DISNEY',
+            },
+            vodId: 650020,
+        });
+
+        expect(hasUsableXtreamVodMetadata({ info: [] })).toBe(false);
+        expect(fallback).toEqual({
+            added: '2024-07-03',
+            facts: [
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.STREAM_ID',
+                    monospace: true,
+                    value: '650020',
+                },
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.CATEGORY',
+                    value: 'DE | DISNEY',
+                },
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.CONTAINER',
+                    monospace: true,
+                    value: 'MP4',
+                },
+            ],
+            format: 'MP4',
+            posterUrl: 'https://example.com/cows.jpg',
+            rating: '6.1',
+            title: 'Die Kühe sind Los! (2004) DE',
+            year: '2004',
+        });
+    });
+
+    it('falls back to the route id when movie_data and catalog context are missing', () => {
+        const fallback = buildXtreamVodFallbackViewModel({
+            vodDetails: {
+                info: [],
+            } as XtreamVodDetails,
+            vodId: 650021,
+        });
+
+        expect(fallback).toEqual({
+            added: undefined,
+            facts: [
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.STREAM_ID',
+                    monospace: true,
+                    value: '650021',
+                },
+            ],
+            format: undefined,
+            posterUrl: undefined,
+            rating: undefined,
+            title: 'VOD 650021',
+            year: undefined,
+        });
+    });
+
+    it('uses preserved catalog fields from the selected item when the details payload is sparse', () => {
+        const fallback = buildXtreamVodFallbackViewModel({
+            vodDetails: {
+                info: [],
+                xtream_id: 20000,
+                title: "Ain't No Sunshine: venia turbo",
+                poster_url: 'https://example.com/sunshine.jpg',
+                rating_imdb: '7.7',
+                added: '1743984000',
+                container_extension: 'avi',
+            } as XtreamVodDetails & {
+                added?: string;
+                container_extension?: string;
+                poster_url?: string;
+                rating_imdb?: string;
+                title?: string;
+                xtream_id?: number;
+            },
+            category: {
+                category_name: 'Action',
+            },
+            vodId: 20000,
+        });
+
+        expect(fallback).toEqual({
+            added: '2025-04-07',
+            facts: [
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.STREAM_ID',
+                    monospace: true,
+                    value: '20000',
+                },
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.CATEGORY',
+                    value: 'Action',
+                },
+                {
+                    labelKey: 'XTREAM.DETAIL_FALLBACK.CONTAINER',
+                    monospace: true,
+                    value: 'AVI',
+                },
+            ],
+            format: 'AVI',
+            posterUrl: 'https://example.com/sunshine.jpg',
+            rating: '7.7',
+            title: "Ain't No Sunshine: venia turbo",
+            year: undefined,
+        });
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-fallback.util.ts b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-fallback.util.ts
new file mode 100644
index 0000000..a688bad
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-fallback.util.ts
@@ -0,0 +1,235 @@
+import {
+    XtreamVodDetails,
+    XtreamVodInfo,
+    XtreamVodStream,
+    getXtreamVodInfo,
+} from 'shared-interfaces';
+
+type XtreamCategoryContext = {
+    readonly id?: string | number;
+    readonly name?: string;
+    readonly category_id?: string | number;
+    readonly category_name?: string;
+};
+
+type XtreamVodCatalogContext = Partial<XtreamVodStream> & {
+    readonly added_at?: string | number;
+    readonly id?: string | number;
+    readonly poster_url?: string;
+    readonly title?: string;
+    readonly xtream_id?: string | number;
+};
+
+type XtreamVodDetailsContext = XtreamVodDetails &
+    Partial<XtreamVodStream> & {
+        readonly added_at?: string | number;
+        readonly id?: string | number;
+        readonly poster_url?: string;
+        readonly title?: string;
+        readonly xtream_id?: string | number;
+    };
+
+export interface XtreamVodFallbackFact {
+    readonly labelKey: string;
+    readonly monospace?: boolean;
+    readonly value: string;
+}
+
+export interface XtreamVodFallbackViewModel {
+    readonly added?: string;
+    readonly facts: XtreamVodFallbackFact[];
+    readonly format?: string;
+    readonly posterUrl?: string;
+    readonly rating?: string;
+    readonly title: string;
+    readonly year?: string;
+}
+
+export interface XtreamVodFallbackOptions {
+    readonly category?: XtreamCategoryContext | null;
+    readonly catalogItem?: XtreamVodCatalogContext | null;
+    readonly vodDetails?: XtreamVodDetails | null;
+    readonly vodId: number;
+}
+
+export function hasUsableXtreamVodMetadata(
+    vodDetails: XtreamVodDetails | null | undefined
+): vodDetails is XtreamVodDetails & { info: XtreamVodInfo } {
+    const info = getXtreamVodInfo(vodDetails);
+    if (!info) {
+        return false;
+    }
+
+    return Boolean(
+        info.description ||
+            info.plot ||
+            info.movie_image ||
+            info.cover_big ||
+            info.genre ||
+            info.releasedate ||
+            info.duration ||
+            info.duration_secs ||
+            info.country ||
+            info.director ||
+            info.actors ||
+            info.cast ||
+            info.youtube_trailer ||
+            info.rating_imdb ||
+            info.rating_kinopoisk ||
+            info.backdrop_path?.length
+    );
+}
+
+export function buildXtreamVodFallbackViewModel(
+    options: XtreamVodFallbackOptions
+): XtreamVodFallbackViewModel | null {
+    const detailItem = options.vodDetails as XtreamVodDetailsContext | null;
+    const info = getXtreamVodInfo(detailItem);
+    const movieData = detailItem?.movie_data;
+    const catalogItem = options.catalogItem;
+    const categoryName =
+        options.category?.name ?? options.category?.category_name;
+    const streamId =
+        movieData?.stream_id ??
+        numericValue(detailItem?.xtream_id) ??
+        numericValue(detailItem?.stream_id) ??
+        numericValue(detailItem?.id) ??
+        numericValue(catalogItem?.xtream_id) ??
+        numericValue(catalogItem?.stream_id) ??
+        numericValue(catalogItem?.id) ??
+        options.vodId;
+    const sourceTitle =
+        sanitizeText(detailItem?.title) ??
+        sanitizeText(detailItem?.name) ??
+        sanitizeText(catalogItem?.title) ??
+        sanitizeText(catalogItem?.name);
+    const title =
+        sanitizeText(movieData?.name) ??
+        sourceTitle ??
+        sanitizeText(info?.name) ??
+        `VOD ${streamId}`;
+    const posterUrl =
+        sanitizeText(detailItem?.poster_url) ??
+        sanitizeText(detailItem?.stream_icon) ??
+        sanitizeText(catalogItem?.poster_url) ??
+        sanitizeText(catalogItem?.stream_icon) ??
+        sanitizeText(info?.movie_image) ??
+        sanitizeText(info?.cover_big) ??
+        undefined;
+    const rating =
+        sanitizeText(detailItem?.rating_imdb) ??
+        formatRating(detailItem?.rating) ??
+        sanitizeText(catalogItem?.rating_imdb) ??
+        formatRating(catalogItem?.rating);
+    const added = formatUnixDate(
+        movieData?.added ??
+            detailItem?.added_at ??
+            detailItem?.added ??
+            catalogItem?.added_at ??
+            catalogItem?.added
+    );
+    const format = sanitizeText(
+        movieData?.container_extension ??
+            detailItem?.container_extension ??
+            catalogItem?.container_extension
+    )?.toUpperCase();
+    const year = extractYear(info?.releasedate) ?? extractYear(title);
+
+    const facts: XtreamVodFallbackFact[] = [
+        {
+            labelKey: 'XTREAM.DETAIL_FALLBACK.STREAM_ID',
+            monospace: true,
+            value: String(streamId),
+        },
+    ];
+
+    if (categoryName) {
+        facts.push({
+            labelKey: 'XTREAM.DETAIL_FALLBACK.CATEGORY',
+            value: categoryName,
+        });
+    }
+
+    if (format) {
+        facts.push({
+            labelKey: 'XTREAM.DETAIL_FALLBACK.CONTAINER',
+            monospace: true,
+            value: format,
+        });
+    }
+
+    if (sourceTitle && sourceTitle !== title) {
+        facts.push({
+            labelKey: 'XTREAM.DETAIL_FALLBACK.SOURCE_TITLE',
+            value: sourceTitle,
+        });
+    }
+
+    return {
+        added,
+        facts,
+        format,
+        posterUrl,
+        rating,
+        title,
+        year,
+    };
+}
+
+function sanitizeText(value: unknown): string | undefined {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+}
+
+function numericValue(value: unknown): number | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+
+    if (typeof value === 'string' && value.trim().length > 0) {
+        const parsed = Number.parseInt(value, 10);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+
+    return undefined;
+}
+
+function formatRating(value: unknown): string | undefined {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value.toFixed(1);
+    }
+
+    if (typeof value === 'string' && value.trim().length > 0) {
+        return value.trim();
+    }
+
+    return undefined;
+}
+
+function extractYear(value: string | undefined): string | undefined {
+    if (!value) {
+        return undefined;
+    }
+
+    const yearMatch = value.match(/\b(19|20)\d{2}\b/);
+    return yearMatch?.[0];
+}
+
+function formatUnixDate(value: unknown): string | undefined {
+    const seconds = numericValue(value);
+    if (!seconds) {
+        return undefined;
+    }
+
+    try {
+        return new Date(seconds * 1000).toISOString().slice(0, 10);
+    } catch {
+        return undefined;
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.html b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.html
new file mode 100644
index 0000000..eb7f765
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.html
@@ -0,0 +1,235 @@
+@let item = selectedItem();
+@if (selectedVodInfo(); as info) {
+    <app-content-hero
+        [title]="info.name || item?.movie_data?.name"
+        [description]="info.description || info.plot"
+        [posterUrl]="info.movie_image || info.cover_big"
+        [backdropUrl]="info.backdrop_path?.[0]"
+        (backClicked)="goBack()"
+    >
+        <ng-container hero-tags>
+            @if (info.releasedate) {
+                <span class="details__tag">{{
+                    info.releasedate | slice: 0 : 4
+                }}</span>
+            }
+            @if (info.genre) {
+                <span class="details__tag">{{ info.genre }}</span>
+            }
+            @if (info.duration) {
+                <span class="details__tag">{{ info.duration }}</span>
+            }
+            @if (info.rating_imdb) {
+                <span class="details__tag details__tag--rating">
+                    ⭐ {{ info.rating_imdb }}
+                </span>
+            }
+            @if (info.country) {
+                <span class="details__tag">{{ info.country }}</span>
+            }
+        </ng-container>
+
+        <ng-container hero-meta>
+            @if (info.actors || info.cast) {
+                <div class="details__meta-item">
+                    <span class="label">{{ 'XTREAM.ACTORS' | translate }}</span>
+                    <span class="value">{{ info.actors || info.cast }}</span>
+                </div>
+            }
+            @if (info.director) {
+                <div class="details__meta-item">
+                    <span class="label">{{
+                        'XTREAM.DIRECTOR' | translate
+                    }}</span>
+                    <span class="value">{{ info.director }}</span>
+                </div>
+            }
+            @if (info.rating_kinopoisk) {
+                <div class="details__meta-item">
+                    <span class="label">{{
+                        'XTREAM.KINOPOISK_RATING' | translate
+                    }}</span>
+                    <span class="value">{{ info.rating_kinopoisk }}</span>
+                </div>
+            }
+        </ng-container>
+
+        <ng-container hero-actions>
+            @if (hasPlaybackPosition()) {
+                <button
+                    class="play-btn play-btn--resume"
+                    (click)="onPrimaryAction(item)"
+                    [disabled]="isExternalLaunchPending()"
+                    [class.play-btn--state-launching]="externalPrimaryButtonState() === 'launching'"
+                    [class.play-btn--state-stop]="externalPrimaryButtonState() === 'stop'"
+                >
+                    <span class="play-btn__icon-shell" aria-hidden="true">
+                        <mat-icon class="play-btn__icon">{{
+                            externalPrimaryIcon()
+                        }}</mat-icon>
+                    </span>
+                    <span class="play-btn__label">
+                        @if (externalPrimaryLabel(); as label) {
+                            {{ label }}
+                        } @else {
+                            {{ 'XTREAM.RESUME' | translate }}
+                            {{ formatPosition() }}
+                        }
+                    </span>
+                </button>
+                @if (!isExternalStopAction()) {
+                    <button
+                        class="play-btn play-btn--restart"
+                        (click)="playVod(item)"
+                    >
+                        <mat-icon>replay</mat-icon>
+                        {{ 'XTREAM.RESTART' | translate }}
+                    </button>
+                }
+            } @else {
+                <button
+                    class="play-btn"
+                    (click)="onPrimaryAction(item)"
+                    [disabled]="isExternalLaunchPending()"
+                    [class.play-btn--state-launching]="externalPrimaryButtonState() === 'launching'"
+                    [class.play-btn--state-stop]="externalPrimaryButtonState() === 'stop'"
+                >
+                    <span class="play-btn__icon-shell" aria-hidden="true">
+                        <mat-icon class="play-btn__icon">{{
+                            externalPrimaryIcon()
+                        }}</mat-icon>
+                    </span>
+                    <span class="play-btn__label">
+                        @if (externalPrimaryLabel(); as label) {
+                            {{ label }}
+                        } @else {
+                            {{ 'XTREAM.PLAY' | translate }}
+                        }
+                    </span>
+                </button>
+            }
+            @if (!isFavorite()) {
+                <button class="favorite-btn" (click)="toggleFavorite()">
+                    <mat-icon>add</mat-icon>
+                    {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
+                </button>
+            } @else {
+                <button
+                    class="favorite-btn favorite-btn--active"
+                    (click)="toggleFavorite()"
+                >
+                    <mat-icon>check</mat-icon>
+                    {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
+                </button>
+            }
+            @if (isElectron()) {
+                @if (isDownloaded()) {
+                    <button
+                        class="download-btn download-btn--completed"
+                        (click)="playFromLocal()"
+                    >
+                        <mat-icon>play_circle</mat-icon>
+                        {{ 'DOWNLOADS.PLAY_LOCAL' | translate }}
+                    </button>
+                } @else if (isDownloading()) {
+                    <button
+                        class="download-btn download-btn--downloading"
+                        disabled
+                    >
+                        <mat-icon>downloading</mat-icon>
+                        {{ 'DOWNLOADS.STATUS.DOWNLOADING' | translate }}
+                    </button>
+                } @else {
+                    <button class="download-btn" (click)="downloadVod(item)">
+                        <mat-icon>download</mat-icon>
+                        {{ 'DOWNLOADS.DOWNLOAD' | translate }}
+                    </button>
+                }
+            }
+        </ng-container>
+
+        @if (inlinePlayback(); as playback) {
+            <app-portal-inline-player
+                [playback]="playback"
+                (timeUpdate)="handleInlineTimeUpdate($event)"
+                (closed)="closeInlinePlayer()"
+                (streamUrlCopied)="showCopyNotification()"
+            />
+        }
+
+        @if (info.youtube_trailer) {
+            <div class="youtube-trailer">
+                <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
+                <div class="trailer-wrapper">
+                    <iframe
+                        [src]="
+                            'https://www.youtube.com/embed/' +
+                                info.youtube_trailer | safe
+                        "
+                        title="YouTube video player"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        referrerpolicy="strict-origin-when-cross-origin"
+                        allowfullscreen
+                    ></iframe>
+                </div>
+            </div>
+        }
+    </app-content-hero>
+} @else if (fallbackView(); as fallback) {
+    <app-content-hero
+        [title]="fallback.title"
+        [posterUrl]="fallback.posterUrl"
+        (backClicked)="goBack()"
+    >
+        <ng-container hero-tags>
+            <span
+                class="details__tag details__tag--status"
+                data-testid="xtream-vod-fallback-status"
+            >
+                {{ 'XTREAM.DETAIL_FALLBACK.STATUS' | translate }}
+            </span>
+            @if (fallback.year) {
+                <span class="details__tag">{{ fallback.year }}</span>
+            }
+            @if (fallback.rating) {
+                <span class="details__tag details__tag--rating">
+                    ⭐ {{ fallback.rating }}
+                </span>
+            }
+            @if (fallback.added) {
+                <span class="details__tag">{{ fallback.added }}</span>
+            }
+            @if (fallback.format) {
+                <span class="details__tag">{{ fallback.format }}</span>
+            }
+        </ng-container>
+
+        <ng-container hero-meta>
+            <div
+                class="details__fallback-note"
+                data-testid="xtream-vod-fallback"
+            >
+                {{ 'XTREAM.DETAIL_FALLBACK.NOTE' | translate }}
+            </div>
+
+            @for (fact of fallback.facts; track fact.labelKey) {
+                <div class="details__meta-item details__meta-item--fallback">
+                    <span class="label">{{ fact.labelKey | translate }}</span>
+                    <span
+                        class="value"
+                        [class.value--mono]="fact.monospace"
+                    >
+                        {{ fact.value }}
+                    </span>
+                </div>
+            }
+        </ng-container>
+    </app-content-hero>
+} @else if (detailsError()) {
+    <app-content-hero
+        [errorMessage]="detailsError()"
+        (backClicked)="goBack()"
+    />
+} @else {
+    <app-content-hero [isLoading]="true" (backClicked)="goBack()" />
+}
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
new file mode 100644
index 0000000..c350992
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
@@ -0,0 +1,45 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+
+    ::ng-deep .details__tag--status {
+        color: var(--text-primary);
+        border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
+        background: linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--accent-color) 12%, transparent) 0%,
+            var(--tag-bg) 100%
+        );
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+    }
+
+    ::ng-deep .details__fallback-note {
+        flex: 1 0 100%;
+        margin-bottom: 4px;
+        padding: 14px 16px;
+        border: 1px solid color-mix(in srgb, var(--tag-border) 85%, transparent);
+        border-radius: 14px;
+        background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--surface-bg) 86%, transparent) 0%,
+            color-mix(in srgb, var(--tag-bg) 86%, transparent) 100%
+        );
+        color: var(--text-secondary);
+        line-height: 1.5;
+        backdrop-filter: blur(14px);
+    }
+
+    ::ng-deep .details__meta-item--fallback {
+        min-width: min(220px, 100%);
+
+        .value--mono {
+            font-family:
+                ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
+                monospace;
+            font-size: 0.8125rem;
+            letter-spacing: 0.03em;
+        }
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.spec.ts b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.spec.ts
new file mode 100644
index 0000000..7b7fee0
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.spec.ts
@@ -0,0 +1,254 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { Location } from '@angular/common';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYBACK_POSITIONS,
+    PORTAL_PLAYER,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import {
+    XtreamCategory,
+    XtreamVodDetails,
+    XtreamVodStream,
+} from 'shared-interfaces';
+import { DownloadsService, SettingsStore } from 'services';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { VodDetailsRouteComponent } from './vod-details-route.component';
+
+describe('VodDetailsRouteComponent', () => {
+    let fixture: ComponentFixture<VodDetailsRouteComponent>;
+    const selectedItem = signal<XtreamVodDetails | null>(null);
+    const isLoadingDetails = signal(false);
+    const detailsError = signal<string | null>(null);
+    const isFavorite = signal(false);
+    const currentPlaylist = signal<{
+        id: string;
+        userAgent?: string;
+        referrer?: string;
+        origin?: string;
+    } | null>(null);
+    const vodStreams = signal<Partial<XtreamVodStream>[]>([]);
+    const vodCategories = signal<Partial<XtreamCategory>[]>([]);
+    const fetchVodDetailsWithMetadata = jest.fn();
+    const checkFavoriteStatus = jest.fn();
+    const setSelectedItem = jest.fn();
+    const toggleFavorite = jest.fn();
+    const constructVodStreamUrl = jest.fn().mockReturnValue(
+        'http://example.com/movie/650020.mp4'
+    );
+    const addRecentItem = jest.fn();
+    const downloads = signal([]);
+    const getPlaybackPosition = jest.fn().mockResolvedValue(null);
+
+    beforeEach(async () => {
+        selectedItem.set(null);
+        isLoadingDetails.set(false);
+        detailsError.set(null);
+        isFavorite.set(false);
+        currentPlaylist.set(null);
+        vodStreams.set([]);
+        vodCategories.set([]);
+        fetchVodDetailsWithMetadata.mockClear();
+        checkFavoriteStatus.mockClear();
+        setSelectedItem.mockClear();
+        toggleFavorite.mockClear();
+        constructVodStreamUrl.mockClear();
+        addRecentItem.mockClear();
+        getPlaybackPosition.mockClear();
+
+        await TestBed.configureTestingModule({
+            imports: [VodDetailsRouteComponent],
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        snapshot: {
+                            params: {
+                                vodId: '650020',
+                                categoryId: '235',
+                            },
+                        },
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: {
+                        selectedItem,
+                        isLoadingDetails,
+                        detailsError,
+                        isFavorite,
+                        currentPlaylist,
+                        vodStreams,
+                        vodCategories,
+                        fetchVodDetailsWithMetadata,
+                        checkFavoriteStatus,
+                        setSelectedItem,
+                        toggleFavorite,
+                        constructVodStreamUrl,
+                        addRecentItem,
+                    },
+                },
+                {
+                    provide: SettingsStore,
+                    useValue: {
+                        theme: signal('dark'),
+                    },
+                },
+                {
+                    provide: DownloadsService,
+                    useValue: {
+                        isAvailable: signal(false),
+                        downloads,
+                        isDownloaded: jest.fn().mockReturnValue(false),
+                        isDownloading: jest.fn().mockReturnValue(false),
+                        startDownload: jest.fn(),
+                        getDownloadedFilePath: jest.fn(),
+                        playDownload: jest.fn(),
+                    },
+                },
+                {
+                    provide: PORTAL_EXTERNAL_PLAYBACK,
+                    useValue: {
+                        activeSession: signal(null),
+                        closeSession: jest.fn(),
+                    },
+                },
+                {
+                    provide: PORTAL_PLAYBACK_POSITIONS,
+                    useValue: {
+                        getPlaybackPosition,
+                        savePlaybackPosition: jest.fn().mockResolvedValue(undefined),
+                    },
+                },
+                {
+                    provide: PORTAL_PLAYER,
+                    useValue: {
+                        isEmbeddedPlayer: jest.fn().mockReturnValue(false),
+                        openResolvedPlayback: jest.fn(),
+                    },
+                },
+                {
+                    provide: MatSnackBar,
+                    useValue: {
+                        open: jest.fn(),
+                    },
+                },
+                {
+                    provide: Location,
+                    useValue: {
+                        back: jest.fn(),
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(VodDetailsRouteComponent);
+    });
+
+    it('renders an informational fallback without playback controls when Xtream returns empty metadata', () => {
+        selectedItem.set({
+            info: [],
+        } as XtreamVodDetails);
+        vodStreams.set([
+            {
+                name: 'Die Kühe sind Los! (2004) DE',
+                stream_id: 650020,
+                stream_icon: 'https://example.com/cows.jpg',
+                added: '1720000000',
+                category_id: '235',
+                container_extension: 'mp4',
+                rating: 6.1,
+                rating_imdb: '6.1',
+            },
+        ]);
+        vodCategories.set([
+            {
+                category_id: '235',
+                category_name: 'DE | DISNEY',
+            },
+        ]);
+
+        fixture.detectChanges();
+
+        const host = fixture.nativeElement as HTMLElement;
+        expect(host.textContent).toContain('Die Kühe sind Los! (2004) DE');
+        expect(
+            host.querySelector('[data-testid="xtream-vod-fallback"]')?.textContent
+        ).toContain('XTREAM.DETAIL_FALLBACK.NOTE');
+        expect(
+            host.querySelector('[data-testid="xtream-vod-fallback-status"]')
+                ?.textContent
+        ).toContain('XTREAM.DETAIL_FALLBACK.STATUS');
+        expect(host.querySelector('button.play-btn')).toBeNull();
+        expect(host.querySelector('button.favorite-btn')).toBeNull();
+        expect(host.querySelector('button.download-btn')).toBeNull();
+    });
+
+    it('keeps the full Xtream detail view when usable metadata exists', () => {
+        selectedItem.set({
+            info: {
+                kinopoisk_url: '',
+                tmdb_id: 228203,
+                name: 'City of McFarland (2015)',
+                o_name: 'City of McFarland (2015)',
+                cover_big: 'https://example.com/poster-big.jpg',
+                movie_image: 'https://example.com/poster.jpg',
+                releasedate: '2015-02-20',
+                episode_run_time: 129,
+                youtube_trailer: '',
+                director: 'Niki Caro',
+                actors: 'Kevin Costner',
+                cast: 'Kevin Costner',
+                description: 'A populated description',
+                plot: 'A populated plot',
+                age: '',
+                mpaa_rating: '',
+                rating_count_kinopoisk: 0,
+                country: 'English',
+                genre: 'Drama',
+                backdrop_path: ['https://example.com/backdrop.jpg'],
+                duration_secs: 7744,
+                duration: '02:09:04',
+                video: ['H.264'],
+                audio: ['AAC'],
+                bitrate: 6251,
+                rating: 7.455,
+                rating_imdb: '7.455',
+                rating_kinopoisk: '7.455',
+            },
+            movie_data: {
+                stream_id: 678140,
+                name: 'City of McFarland (2015) DE',
+                added: '1750671180',
+                category_id: '235',
+                container_extension: 'mkv',
+                custom_sid: null,
+                direct_source: '',
+            },
+        });
+
+        fixture.detectChanges();
+
+        const host = fixture.nativeElement as HTMLElement;
+        expect(host.textContent).toContain('City of McFarland (2015)');
+        expect(host.querySelector('[data-testid="xtream-vod-fallback"]')).toBeNull();
+        expect(host.querySelector('button.play-btn')).not.toBeNull();
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts
new file mode 100644
index 0000000..3b2e97f
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.ts
@@ -0,0 +1,552 @@
+import { Location, SlicePipe } from '@angular/common';
+import {
+    Component,
+    OnDestroy,
+    OnInit,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { ContentHeroComponent } from 'components';
+import { SafePipe } from '@iptvnator/pipes';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    PORTAL_PLAYBACK_POSITIONS,
+    PORTAL_PLAYER,
+    createLogger,
+    getPortalPlaybackProgressPercent,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { PortalInlinePlayerComponent } from '@iptvnator/ui/playback';
+import { DownloadsService, SettingsStore } from 'services';
+import {
+    PlaybackPositionData,
+    PlayerContentInfo,
+    ResolvedPortalPlayback,
+    XtreamCategory,
+    XtreamVodDetails,
+    XtreamVodStream,
+    getXtreamVodInfo,
+} from 'shared-interfaces';
+import {
+    buildXtreamVodFallbackViewModel,
+    hasUsableXtreamVodMetadata,
+} from './vod-details-fallback.util';
+
+@Component({
+    templateUrl: './vod-details-route.component.html',
+    styleUrls: [
+        '../../../../../../ui/components/src/lib/styles/detail-view.scss',
+        './vod-details-route.component.scss',
+    ],
+    imports: [
+        ContentHeroComponent,
+        MatIcon,
+        SafePipe,
+        SlicePipe,
+        TranslateModule,
+        PortalInlinePlayerComponent,
+    ],
+})
+export class VodDetailsRouteComponent implements OnInit, OnDestroy {
+    private readonly location = inject(Location);
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly route = inject(ActivatedRoute);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly playbackPositions = inject(PORTAL_PLAYBACK_POSITIONS);
+    private readonly downloadsService = inject(DownloadsService);
+    private readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    private readonly portalPlayer = inject(PORTAL_PLAYER);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translateService = inject(TranslateService);
+    private readonly logger = createLogger('VodDetailsRoute');
+    private readonly detailsInitDone = signal(false);
+    private readonly backdropBackfillKey = signal<string | null>(null);
+    readonly inlinePlayback = signal<ResolvedPortalPlayback | null>(null);
+    readonly vodPlaybackPosition = signal<PlaybackPositionData | null>(null);
+
+    readonly theme = this.settingsStore.theme;
+    readonly isElectron = this.downloadsService.isAvailable;
+
+    readonly isFavorite = this.xtreamStore.isFavorite;
+    readonly selectedItem = computed(
+        () =>
+            this.xtreamStore.selectedItem() as unknown as XtreamVodDetails | null
+    );
+    readonly selectedVodId = computed(() =>
+        Number(this.route.snapshot.params.vodId)
+    );
+    readonly selectedCategory = computed<Partial<XtreamCategory> | null>(() => {
+        const categoryId = this.route.snapshot.params.categoryId;
+        if (!categoryId) {
+            return null;
+        }
+
+        return (
+            this.xtreamStore
+                .vodCategories()
+                .find(
+                    (category) =>
+                        String(
+                            (category as XtreamCategory & { id?: string | number })
+                                .category_id ??
+                                (category as XtreamCategory & { id?: string | number })
+                                    .id
+                        ) === String(categoryId)
+                ) ?? null
+        );
+    });
+    readonly selectedCatalogItem = computed<
+        (Partial<XtreamVodStream> & {
+            id?: string | number;
+            poster_url?: string;
+            title?: string;
+            xtream_id?: string | number;
+        }) | null
+    >(() => {
+        const vodId = this.selectedVodId();
+        if (!Number.isFinite(vodId) || vodId <= 0) {
+            return null;
+        }
+
+        return (
+            this.xtreamStore
+                .vodStreams()
+                .find(
+                    (item) =>
+                        Number(
+                            (
+                                item as XtreamVodStream & {
+                                    id?: string | number;
+                                    xtream_id?: string | number;
+                                }
+                            ).xtream_id ??
+                                (
+                                    item as XtreamVodStream & {
+                                        id?: string | number;
+                                    }
+                                ).stream_id ??
+                                (
+                                    item as XtreamVodStream & {
+                                        id?: string | number;
+                                    }
+                                ).id
+                        ) === vodId
+                ) ?? null
+        );
+    });
+    readonly selectedVodInfo = computed(() => {
+        const item = this.selectedItem();
+        return item && hasUsableXtreamVodMetadata(item)
+            ? getXtreamVodInfo(item)
+            : null;
+    });
+    readonly fallbackView = computed(() => {
+        const item = this.selectedItem();
+        if (!item || this.selectedVodInfo()) {
+            return null;
+        }
+
+        return buildXtreamVodFallbackViewModel({
+            vodDetails: item,
+            catalogItem: this.selectedCatalogItem(),
+            category: this.selectedCategory(),
+            vodId: this.selectedVodId(),
+        });
+    });
+    readonly isLoadingDetails = this.xtreamStore.isLoadingDetails;
+    readonly detailsError = this.xtreamStore.detailsError;
+    private lastSaveTime = 0;
+    private unsubscribePositionUpdates: (() => void) | null = null;
+    readonly matchedExternalPlayback = computed(() => {
+        const session = this.externalPlayback.activeSession();
+        const vodId = Number(this.route.snapshot.params.vodId);
+        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+
+        if (
+            !session?.contentInfo ||
+            !playlistId ||
+            session.status === 'error' ||
+            session.status === 'closed'
+        ) {
+            return null;
+        }
+
+        const contentInfo = session.contentInfo;
+        if (
+            contentInfo.playlistId !== playlistId ||
+            contentInfo.contentType !== 'vod' ||
+            contentInfo.contentXtreamId !== vodId
+        ) {
+            return null;
+        }
+
+        return session;
+    });
+    readonly externalPrimaryLabel = computed(() => {
+        const session = this.matchedExternalPlayback();
+        if (!session) {
+            return null;
+        }
+
+        const player = session.player.toUpperCase();
+        switch (session.status) {
+            case 'launching':
+                return `Opening in ${player}...`;
+            case 'opened':
+            case 'playing':
+                return `Stop ${player}`;
+            default:
+                return null;
+        }
+    });
+    readonly externalPrimaryIcon = computed(() => {
+        const session = this.matchedExternalPlayback();
+        switch (session?.status) {
+            case 'launching':
+                return 'hourglass_top';
+            case 'opened':
+            case 'playing':
+                return 'stop_circle';
+            default:
+                return 'play_arrow';
+        }
+    });
+    readonly isExternalLaunchPending = computed(
+        () => this.matchedExternalPlayback()?.status === 'launching'
+    );
+    readonly isExternalStopAction = computed(() => {
+        const status = this.matchedExternalPlayback()?.status;
+        return status === 'opened' || status === 'playing';
+    });
+    readonly externalPrimaryButtonState = computed(() => {
+        if (this.isExternalLaunchPending()) {
+            return 'launching';
+        }
+
+        return this.isExternalStopAction() ? 'stop' : 'idle';
+    });
+    readonly vodPlaybackProgress = computed(() =>
+        getPortalPlaybackProgressPercent(this.vodPlaybackPosition())
+    );
+
+    readonly hasPlaybackPosition = computed(() => {
+        const inProgress =
+            this.vodPlaybackProgress() > 0 && this.vodPlaybackProgress() < 90;
+        this.logger.debug('hasPlaybackPosition check', {
+            vodId: this.route.snapshot.params.vodId,
+            inProgress,
+        });
+        return inProgress;
+    });
+
+    readonly isDownloaded = computed(() => {
+        const vodId = Number(this.route.snapshot.params.vodId);
+        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+        if (!playlistId) return false;
+        this.downloadsService.downloads();
+        return this.downloadsService.isDownloaded(vodId, playlistId, 'vod');
+    });
+
+    readonly isDownloading = computed(() => {
+        const vodId = Number(this.route.snapshot.params.vodId);
+        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+        if (!playlistId) return false;
+        this.downloadsService.downloads();
+        return this.downloadsService.isDownloading(vodId, playlistId, 'vod');
+    });
+
+    constructor() {
+        effect(() => {
+            const playlistId = this.xtreamStore.currentPlaylist()?.id;
+            const vodId = Number(this.route.snapshot.params.vodId);
+            if (!playlistId || this.detailsInitDone()) return;
+            this.initializeVodDetails(playlistId, vodId);
+            this.detailsInitDone.set(true);
+        });
+
+        effect(() => {
+            const playlistId = this.xtreamStore.currentPlaylist()?.id;
+            const vodId = Number(this.route.snapshot.params.vodId);
+            const backdropUrl = this.selectedVodInfo()?.backdrop_path?.[0]?.trim();
+
+            if (!playlistId || !Number.isFinite(vodId) || vodId <= 0 || !backdropUrl) {
+                return;
+            }
+
+            const backfillKey = `${playlistId}:${vodId}:${backdropUrl}`;
+            if (this.backdropBackfillKey() === backfillKey) {
+                return;
+            }
+
+            this.backdropBackfillKey.set(backfillKey);
+            void this.xtreamStore.backfillContentBackdrop({
+                xtreamId: vodId,
+                contentType: 'movie',
+                playlist: this.xtreamStore.currentPlaylist,
+                backdropUrl,
+            });
+        });
+
+        if (window.electron?.onPlaybackPositionUpdate) {
+            this.unsubscribePositionUpdates =
+                window.electron.onPlaybackPositionUpdate(
+                    (data: PlaybackPositionData) => {
+                        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+                        const vodId = Number(this.route.snapshot.params.vodId);
+
+                        if (
+                            data.contentType !== 'vod' ||
+                            data.playlistId !== playlistId ||
+                            data.contentXtreamId !== vodId
+                        ) {
+                            return;
+                        }
+
+                        this.vodPlaybackPosition.set(data);
+                    }
+                );
+        }
+    }
+
+    ngOnInit(): void {
+        const currentPlaylist = this.xtreamStore.currentPlaylist();
+        if (!currentPlaylist?.id) {
+            this.logger.warn('Deferring VOD details init: playlist not ready');
+            return;
+        }
+        this.initializeVodDetails(currentPlaylist.id, Number(this.route.snapshot.params.vodId));
+        this.detailsInitDone.set(true);
+    }
+
+    ngOnDestroy(): void {
+        this.inlinePlayback.set(null);
+        this.unsubscribePositionUpdates?.();
+        this.xtreamStore.setSelectedItem(null);
+    }
+
+    playVod(vodItem: XtreamVodDetails): void {
+        const info = getXtreamVodInfo(vodItem);
+        this.addToRecentlyViewed();
+        const streamUrl = this.xtreamStore.constructVodStreamUrl(vodItem);
+        const routeVodId = this.route.snapshot.params.vodId;
+        const id = routeVodId
+            ? Number(routeVodId)
+            : Number(
+                  vodItem.movie_data?.stream_id ||
+                      (vodItem as { stream_id?: number }).stream_id
+              );
+
+        this.logger.debug('playVod resolved ID', { id, vodItem });
+
+        const contentInfo: PlayerContentInfo = {
+            playlistId: this.xtreamStore.currentPlaylist().id,
+            contentXtreamId: id,
+            contentType: 'vod',
+        };
+        const playback: ResolvedPortalPlayback = {
+            streamUrl,
+            title: info?.name ?? vodItem.movie_data?.name,
+            thumbnail: info?.movie_image,
+            contentInfo,
+        };
+
+        this.startPlayback(playback);
+    }
+
+    resumeVod(vodItem: XtreamVodDetails): void {
+        const info = getXtreamVodInfo(vodItem);
+        this.addToRecentlyViewed();
+        const vodId = Number(this.route.snapshot.params.vodId);
+        const position = this.vodPlaybackPosition();
+        const streamUrl = this.xtreamStore.constructVodStreamUrl(vodItem);
+
+        const contentInfo: PlayerContentInfo = {
+            playlistId: this.xtreamStore.currentPlaylist().id,
+            contentXtreamId: vodId,
+            contentType: 'vod',
+        };
+        const playback: ResolvedPortalPlayback = {
+            streamUrl,
+            title: info?.name ?? vodItem.movie_data?.name,
+            thumbnail: info?.movie_image,
+            startTime: position?.positionSeconds,
+            contentInfo,
+        };
+
+        this.startPlayback(playback);
+    }
+
+    onPrimaryAction(vodItem: XtreamVodDetails): void {
+        if (this.isExternalStopAction()) {
+            void this.stopExternalPlayback();
+            return;
+        }
+
+        if (this.hasPlaybackPosition()) {
+            this.resumeVod(vodItem);
+            return;
+        }
+
+        this.playVod(vodItem);
+    }
+
+    async stopExternalPlayback(): Promise<void> {
+        await this.externalPlayback.closeSession(this.matchedExternalPlayback());
+    }
+
+    formatPosition(): string {
+        const position = this.vodPlaybackPosition();
+        if (!position) return '';
+
+        const date = new Date(0);
+        date.setSeconds(position.positionSeconds);
+        const timeString = date.toISOString().substr(11, 8);
+        return timeString.startsWith('00:')
+            ? timeString.substr(3)
+            : timeString;
+    }
+
+    toggleFavorite(): void {
+        this.xtreamStore.toggleFavorite(
+            this.route.snapshot.params.vodId,
+            this.xtreamStore.currentPlaylist().id,
+            'movie',
+            this.selectedVodInfo()?.backdrop_path?.[0]
+        );
+    }
+
+    goBack(): void {
+        this.closeInlinePlayer();
+        this.location.back();
+    }
+
+    closeInlinePlayer(): void {
+        this.inlinePlayback.set(null);
+        this.lastSaveTime = 0;
+    }
+
+    handleInlineTimeUpdate(event: {
+        currentTime: number;
+        duration: number;
+    }): void {
+        const playback = this.inlinePlayback();
+        if (!playback?.contentInfo) return;
+
+        const now = Date.now();
+        if (now - this.lastSaveTime <= 15000) return;
+
+        this.lastSaveTime = now;
+        const position: PlaybackPositionData = {
+            ...playback.contentInfo,
+            positionSeconds: Math.floor(event.currentTime),
+            durationSeconds: Math.floor(event.duration),
+        };
+        void this.playbackPositions.savePlaybackPosition(
+            playback.contentInfo.playlistId,
+            position
+        );
+        this.vodPlaybackPosition.set(position);
+    }
+
+    showCopyNotification(): void {
+        this.snackBar.open(
+            this.translateService.instant('PORTALS.STREAM_URL_COPIED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
+
+    async downloadVod(vodItem: XtreamVodDetails): Promise<void> {
+        const info = getXtreamVodInfo(vodItem);
+        const streamUrl = this.xtreamStore.constructVodStreamUrl(vodItem);
+        const routeVodId = this.route.snapshot.params.vodId;
+        const id = routeVodId
+            ? Number(routeVodId)
+            : Number(
+                  vodItem.movie_data?.stream_id ||
+                      (vodItem as { stream_id?: number }).stream_id
+              );
+
+        const playlist = this.xtreamStore.currentPlaylist();
+
+        await this.downloadsService.startDownload({
+            playlistId: playlist.id,
+            xtreamId: id,
+            contentType: 'vod',
+            title: info?.name ?? vodItem.movie_data?.name ?? 'Unknown',
+            url: streamUrl,
+            posterUrl: info?.movie_image,
+            headers: {
+                userAgent: playlist.userAgent,
+                referer: playlist.referrer,
+                origin: playlist.origin,
+            },
+        });
+    }
+
+    async playFromLocal(): Promise<void> {
+        const vodId = Number(this.route.snapshot.params.vodId);
+        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+        if (!playlistId) return;
+
+        const filePath = this.downloadsService.getDownloadedFilePath(
+            vodId,
+            playlistId,
+            'vod'
+        );
+
+        if (filePath) {
+            await this.downloadsService.playDownload(filePath);
+        }
+    }
+
+    private addToRecentlyViewed(): void {
+        this.xtreamStore.addRecentItem({
+            xtreamId: Number(this.route.snapshot.params.vodId),
+            contentType: 'movie',
+            playlist: this.xtreamStore.currentPlaylist,
+            backdropUrl: this.selectedVodInfo()?.backdrop_path?.[0],
+        });
+    }
+
+    private initializeVodDetails(playlistId: string, vodId: number): void {
+        const { categoryId } = this.route.snapshot.params;
+        this.xtreamStore.fetchVodDetailsWithMetadata({
+            vodId: String(vodId),
+            categoryId,
+        });
+        this.xtreamStore.checkFavoriteStatus(vodId, playlistId, 'movie');
+        void this.loadVodPlaybackPosition(playlistId, vodId);
+    }
+
+    private startPlayback(playback: ResolvedPortalPlayback): void {
+        this.lastSaveTime = 0;
+        if (this.portalPlayer.isEmbeddedPlayer()) {
+            this.inlinePlayback.set(playback);
+            return;
+        }
+
+        this.closeInlinePlayer();
+        void this.portalPlayer.openResolvedPlayback(playback, true);
+    }
+
+    private async loadVodPlaybackPosition(
+        playlistId: string,
+        vodId: number
+    ): Promise<void> {
+        const position = await this.playbackPositions.getPlaybackPosition(
+            playlistId,
+            vodId,
+            'vod'
+        );
+        this.vodPlaybackPosition.set(position);
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-cached-offline-notice.component.ts b/libs/portal/xtream/feature/src/lib/xtream-cached-offline-notice.component.ts
new file mode 100644
index 0000000..10b577a
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-cached-offline-notice.component.ts
@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+
+@Component({
+    selector: 'app-xtream-cached-offline-notice',
+    imports: [MatIconModule, TranslatePipe],
+    template: `
+        @if (showWarning()) {
+            <div
+                class="xtream-cached-offline-notice"
+                data-test-id="xtream-offline-warning"
+                data-testid="xtream-offline-warning"
+            >
+                <mat-icon>cloud_off</mat-icon>
+
+                <div class="xtream-cached-offline-notice__copy">
+                    <strong>
+                        {{
+                            'PORTALS.ERROR_VIEW.PORTAL_UNAVAILABLE.TITLE'
+                                | translate
+                        }}
+                    </strong>
+                    <span>
+                        {{
+                            'PORTALS.ERROR_VIEW.PORTAL_UNAVAILABLE.DESCRIPTION'
+                                | translate
+                        }}
+                    </span>
+                </div>
+            </div>
+        }
+    `,
+    styles: [
+        `
+            .xtream-cached-offline-notice {
+                display: flex;
+                align-items: flex-start;
+                gap: 12px;
+                margin: 0 0 12px;
+                padding: 12px 14px;
+                border-radius: 12px;
+                background: var(--mat-sys-error-container);
+                color: var(--mat-sys-on-error-container);
+            }
+
+            .xtream-cached-offline-notice__copy {
+                display: grid;
+                gap: 4px;
+            }
+
+            .xtream-cached-offline-notice__copy strong {
+                font-size: 0.92rem;
+                font-weight: 700;
+                line-height: 1.2;
+            }
+
+            .xtream-cached-offline-notice__copy span {
+                font-size: 0.84rem;
+                line-height: 1.35;
+            }
+
+            .xtream-cached-offline-notice mat-icon {
+                margin-top: 1px;
+                flex-shrink: 0;
+            }
+        `,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class XtreamCachedOfflineNoticeComponent {
+    private readonly xtreamStore = inject(XtreamStore);
+
+    readonly showWarning = computed(
+        () =>
+            this.xtreamStore.portalStatus() === 'unavailable' &&
+            this.xtreamStore.isContentInitialized() &&
+            !this.xtreamStore.contentInitBlockReason()
+    );
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-catalog-facade.service.spec.ts b/libs/portal/xtream/feature/src/lib/xtream-catalog-facade.service.spec.ts
new file mode 100644
index 0000000..5492aab
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-catalog-facade.service.spec.ts
@@ -0,0 +1,193 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import {
+    PortalCatalogSortMode,
+} from '@iptvnator/portal/shared/util';
+import {
+    XtreamPlaylistData,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { XtreamCatalogFacadeService } from './xtream-catalog-facade.service';
+
+const PLAYLIST_ONE: XtreamPlaylistData = {
+    id: 'playlist-1',
+    name: 'Playlist One',
+    title: 'Playlist One',
+    serverUrl: 'http://localhost:3000',
+    username: 'user',
+    password: 'secret',
+    type: 'xtream',
+};
+
+const PLAYLIST_TWO: XtreamPlaylistData = {
+    ...PLAYLIST_ONE,
+    id: 'playlist-2',
+    name: 'Playlist Two',
+    title: 'Playlist Two',
+};
+
+describe('XtreamCatalogFacadeService', () => {
+    let service: XtreamCatalogFacadeService;
+    const contentType = signal<'live' | 'vod' | 'series'>('vod');
+    const limit = signal(25);
+    const page = signal(0);
+    const selectedCategory = signal<Record<string, unknown> | null>({
+        id: 11,
+        name: 'Movies',
+    });
+    const selectedCategoryId = signal<number | null>(11);
+    const paginatedContent = signal<Record<string, unknown>[]>([
+        { xtream_id: 1, title: 'A' },
+    ]);
+    const selectedCategoryItems = signal<Record<string, unknown>[]>([
+        { xtream_id: 1, title: 'A' },
+        { xtream_id: 2, title: 'B' },
+    ]);
+    const selectedItem = signal<Record<string, unknown> | null>(null);
+    const totalPages = signal(1);
+    const isPaginatedContentLoading = signal(false);
+    const contentSortMode = signal<PortalCatalogSortMode>('date-desc');
+    const currentPlaylist = signal<XtreamPlaylistData | null>(PLAYLIST_ONE);
+
+    const xtreamStore = {
+        selectedContentType: contentType,
+        limit,
+        page,
+        getSelectedCategory: selectedCategory,
+        selectedCategoryId,
+        getPaginatedContent: paginatedContent,
+        selectItemsFromSelectedCategory: selectedCategoryItems,
+        selectedItem,
+        getTotalPages: totalPages,
+        isPaginatedContentLoading,
+        contentSortMode,
+        currentPlaylist,
+        loadAllPositions: jest.fn(),
+        setCategorySearchTerm: jest.fn(),
+        setSelectedItem: jest.fn((item: Record<string, unknown> | null) => {
+            selectedItem.set(item);
+        }),
+        setSelectedCategory: jest.fn((categoryId: number | null) => {
+            selectedCategoryId.set(categoryId);
+        }),
+        setPage: jest.fn((nextPage: number) => {
+            page.set(nextPage);
+        }),
+        setLimit: jest.fn((nextLimit: number) => {
+            limit.set(nextLimit);
+        }),
+        setContentSortMode: jest.fn((mode: PortalCatalogSortMode) => {
+            contentSortMode.set(mode);
+        }),
+        hasSeriesProgress: jest.fn().mockReturnValue(false),
+        getProgressPercent: jest.fn().mockReturnValue(40),
+        isWatched: jest.fn().mockReturnValue(false),
+    };
+
+    beforeEach(() => {
+        localStorage.removeItem('xtream-category-sort-mode');
+        contentType.set('vod');
+        limit.set(25);
+        page.set(0);
+        selectedCategory.set({ id: 11, name: 'Movies' });
+        selectedCategoryId.set(11);
+        paginatedContent.set([{ xtream_id: 1, title: 'A' }]);
+        selectedCategoryItems.set([
+            { xtream_id: 1, title: 'A' },
+            { xtream_id: 2, title: 'B' },
+        ]);
+        selectedItem.set(null);
+        totalPages.set(1);
+        isPaginatedContentLoading.set(false);
+        contentSortMode.set('date-desc');
+        currentPlaylist.set(PLAYLIST_ONE);
+
+        xtreamStore.loadAllPositions.mockClear();
+        xtreamStore.setCategorySearchTerm.mockClear();
+        xtreamStore.setSelectedItem.mockClear();
+        xtreamStore.setSelectedCategory.mockClear();
+        xtreamStore.setPage.mockClear();
+        xtreamStore.setLimit.mockClear();
+        xtreamStore.setContentSortMode.mockClear();
+        xtreamStore.hasSeriesProgress.mockClear();
+        xtreamStore.getProgressPercent.mockClear();
+        xtreamStore.isWatched.mockClear();
+
+        TestBed.configureTestingModule({
+            providers: [
+                XtreamCatalogFacadeService,
+                {
+                    provide: XtreamStore,
+                    useValue: xtreamStore,
+                },
+            ],
+        });
+
+        service = TestBed.inject(XtreamCatalogFacadeService);
+    });
+
+    it('delegates category search to the Xtream store', () => {
+        service.setSearchQuery('matrix');
+
+        expect(xtreamStore.setCategorySearchTerm).toHaveBeenCalledWith(
+            'matrix'
+        );
+    });
+
+    it('exposes store-driven paginated content, total pages, and category counts', () => {
+        expect(service.paginatedContent()).toEqual([
+            { xtream_id: 1, title: 'A' },
+        ]);
+        expect(service.totalPages()).toBe(1);
+        expect(service.categoryItemCount()).toBe(2);
+
+        paginatedContent.set([
+            { xtream_id: 3, title: 'C' },
+            { xtream_id: 4, title: 'D' },
+        ]);
+        selectedCategoryItems.set([
+            { xtream_id: 3, title: 'C' },
+            { xtream_id: 4, title: 'D' },
+            { xtream_id: 5, title: 'E' },
+        ]);
+        totalPages.set(4);
+
+        expect(service.paginatedContent()).toEqual([
+            { xtream_id: 3, title: 'C' },
+            { xtream_id: 4, title: 'D' },
+        ]);
+        expect(service.totalPages()).toBe(4);
+        expect(service.categoryItemCount()).toBe(3);
+    });
+
+    it('restores saved sort mode, sets the selected category, and loads positions once per playlist', () => {
+        localStorage.setItem('xtream-category-sort-mode', 'name-asc');
+
+        service.initialize('42');
+        service.initialize('77');
+
+        expect(xtreamStore.setContentSortMode).toHaveBeenCalledWith('name-asc');
+        expect(xtreamStore.setSelectedCategory).toHaveBeenLastCalledWith(77);
+        expect(xtreamStore.loadAllPositions).toHaveBeenCalledTimes(1);
+        expect(xtreamStore.loadAllPositions).toHaveBeenCalledWith('playlist-1');
+
+        currentPlaylist.set(PLAYLIST_TWO);
+        service.initialize('88');
+
+        expect(xtreamStore.loadAllPositions).toHaveBeenCalledTimes(2);
+        expect(xtreamStore.loadAllPositions).toHaveBeenLastCalledWith(
+            'playlist-2'
+        );
+    });
+
+    it('persists sort mode changes and delegates them to the store', () => {
+        service.setContentSortMode('name-desc');
+
+        expect(xtreamStore.setContentSortMode).toHaveBeenCalledWith(
+            'name-desc'
+        );
+        expect(localStorage.getItem('xtream-category-sort-mode')).toBe(
+            'name-desc'
+        );
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/xtream-catalog-facade.service.ts b/libs/portal/xtream/feature/src/lib/xtream-catalog-facade.service.ts
new file mode 100644
index 0000000..79f7c40
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-catalog-facade.service.ts
@@ -0,0 +1,149 @@
+import { Provider, Injectable, computed, inject } from '@angular/core';
+import {
+    PortalCatalogFacade,
+    PortalCatalogItemProgress,
+    PortalCatalogPlaylistMeta,
+    PortalCatalogSortMode,
+    PORTAL_CATALOG_FACADE,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+
+const SORT_STORAGE_KEY = 'xtream-category-sort-mode';
+
+@Injectable()
+export class XtreamCatalogFacadeService implements PortalCatalogFacade<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    unknown
+> {
+    private readonly xtreamStore = inject(XtreamStore);
+    private loadedPositionsPlaylistId: string | null = null;
+
+    readonly provider = 'xtream' as const;
+    readonly pageSizeOptions = [10, 25, 50, 100] as const;
+    readonly contentType = this.xtreamStore.selectedContentType;
+    readonly limit = this.xtreamStore.limit;
+    readonly pageIndex = this.xtreamStore.page;
+    readonly selectedCategory = this.xtreamStore.getSelectedCategory;
+    readonly paginatedContent = this.xtreamStore.getPaginatedContent;
+    readonly selectedItem = this.xtreamStore.selectedItem;
+    readonly totalPages = this.xtreamStore.getTotalPages;
+    readonly isPaginatedContentLoading =
+        this.xtreamStore.isPaginatedContentLoading;
+    readonly selectedCategoryTitle = computed(() => {
+        const category = this.selectedCategory();
+        return String(category?.['name'] ?? category?.['title'] ?? '');
+    });
+    readonly categoryItemCount = computed(
+        () => this.xtreamStore.selectItemsFromSelectedCategory().length
+    );
+    readonly contentSortMode = this.xtreamStore.contentSortMode;
+    readonly playlist = computed<PortalCatalogPlaylistMeta | null>(() => {
+        const playlist = this.xtreamStore.currentPlaylist();
+        if (!playlist) {
+            return null;
+        }
+
+        return {
+            id: String(playlist.id),
+            title: playlist.name ?? playlist.title ?? 'Xtream',
+        };
+    });
+
+    initialize(categoryId?: string | null): void {
+        const savedSortMode = localStorage.getItem(SORT_STORAGE_KEY);
+        if (
+            savedSortMode === 'date-desc' ||
+            savedSortMode === 'date-asc' ||
+            savedSortMode === 'name-asc' ||
+            savedSortMode === 'name-desc'
+        ) {
+            this.xtreamStore.setContentSortMode(savedSortMode);
+        }
+
+        const playlistId = this.xtreamStore.currentPlaylist()?.id;
+        if (playlistId && this.loadedPositionsPlaylistId !== playlistId) {
+            this.loadedPositionsPlaylistId = playlistId;
+            this.xtreamStore.loadAllPositions(playlistId);
+        }
+
+        this.clearSelectedItem();
+
+        if (categoryId) {
+            this.xtreamStore.setSelectedCategory(Number(categoryId));
+        } else {
+            this.xtreamStore.setSelectedCategory(null);
+        }
+    }
+
+    clearSelectedItem(): void {
+        this.xtreamStore.setSelectedItem(null);
+    }
+
+    setSearchQuery(query: string): void {
+        this.xtreamStore.setCategorySearchTerm(query);
+    }
+
+    setPage(page: number): void {
+        this.xtreamStore.setPage(page);
+    }
+
+    setLimit(limit: number): void {
+        this.xtreamStore.setLimit(limit);
+    }
+
+    setContentSortMode(mode: PortalCatalogSortMode): void {
+        this.xtreamStore.setContentSortMode(mode);
+        localStorage.setItem(SORT_STORAGE_KEY, mode);
+    }
+
+    selectItem(item: Record<string, unknown>): string[] | null {
+        const xtreamId = item['xtream_id'];
+        if (xtreamId === undefined || xtreamId === null) {
+            return null;
+        }
+
+        const selectedCategoryId = this.xtreamStore.selectedCategoryId();
+        if (selectedCategoryId !== null && selectedCategoryId !== undefined) {
+            return [String(xtreamId)];
+        }
+
+        const categoryId = item['category_id'];
+        if (categoryId === undefined || categoryId === null) {
+            return null;
+        }
+
+        return [String(categoryId), String(xtreamId)];
+    }
+
+    getItemProgress(item: Record<string, unknown>): PortalCatalogItemProgress {
+        const isSeries = this.contentType() === 'series';
+        const itemId = Number(
+            item['xtream_id'] ?? item['series_id'] ?? item['stream_id']
+        );
+        if (Number.isNaN(itemId)) {
+            return {};
+        }
+
+        if (isSeries) {
+            return {
+                hasSeriesProgress: this.xtreamStore.hasSeriesProgress(itemId),
+            };
+        }
+
+        return {
+            progress: this.xtreamStore.getProgressPercent(itemId, 'vod'),
+            isWatched: this.xtreamStore.isWatched(itemId, 'vod'),
+        };
+    }
+}
+
+export function provideXtreamCatalogFacade(): Provider[] {
+    return [
+        XtreamCatalogFacadeService,
+        {
+            provide: PORTAL_CATALOG_FACADE,
+            useExisting: XtreamCatalogFacadeService,
+        },
+    ];
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-collection-detail.component.spec.ts b/libs/portal/xtream/feature/src/lib/xtream-collection-detail.component.spec.ts
new file mode 100644
index 0000000..857e67b
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-collection-detail.component.spec.ts
@@ -0,0 +1,142 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { UnifiedCollectionItem } from '@iptvnator/portal/shared/util';
+import {
+    XtreamPlaylistData,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { PlaylistsService } from 'services';
+import { Playlist } from 'shared-interfaces';
+import { of } from 'rxjs';
+import { SerialDetailsComponent } from './serial-details/serial-details.component';
+import { XtreamCollectionDetailComponent } from './xtream-collection-detail.component';
+
+describe('XtreamCollectionDetailComponent', () => {
+    let fixture: ComponentFixture<XtreamCollectionDetailComponent>;
+    let playlistId: ReturnType<typeof signal<string>>;
+    let currentPlaylist: ReturnType<
+        typeof signal<XtreamPlaylistData | null>
+    >;
+    let selectedContentType: ReturnType<
+        typeof signal<'live' | 'vod' | 'series'>
+    >;
+    let selectedCategoryId: ReturnType<typeof signal<number | null>>;
+    let selectedItem: ReturnType<typeof signal<unknown>>;
+    let isLoadingDetails: ReturnType<typeof signal<boolean>>;
+    let detailsError: ReturnType<typeof signal<string | null>>;
+
+    beforeEach(async () => {
+        playlistId = signal('');
+        currentPlaylist = signal<XtreamPlaylistData | null>(null);
+        selectedContentType = signal<'live' | 'vod' | 'series'>('vod');
+        selectedCategoryId = signal<number | null>(null);
+        selectedItem = signal<unknown>(null);
+        isLoadingDetails = signal(false);
+        detailsError = signal<string | null>(null);
+
+        await TestBed.configureTestingModule({
+            imports: [XtreamCollectionDetailComponent],
+            providers: [
+                {
+                    provide: XtreamStore,
+                    useValue: {
+                        playlistId,
+                        currentPlaylist,
+                        selectedContentType,
+                        selectedCategoryId,
+                        selectedItem,
+                        isLoadingDetails,
+                        detailsError,
+                        setPlaylistId: jest.fn((value: string) =>
+                            playlistId.set(value)
+                        ),
+                        setCurrentPlaylist: jest.fn(
+                            (value: XtreamPlaylistData | null) =>
+                                currentPlaylist.set(value)
+                        ),
+                        setSelectedContentType: jest.fn(
+                            (value: 'live' | 'vod' | 'series') =>
+                                selectedContentType.set(value)
+                        ),
+                        setSelectedCategory: jest.fn(
+                            (value: number | null) =>
+                                selectedCategoryId.set(value)
+                        ),
+                        setSelectedItem: jest.fn((value: unknown) =>
+                            selectedItem.set(value)
+                        ),
+                        setIsLoadingDetails: jest.fn((value: boolean) =>
+                            isLoadingDetails.set(value)
+                        ),
+                        setDetailsError: jest.fn((value: string | null) =>
+                            detailsError.set(value)
+                        ),
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {
+                        getPlaylistById: jest.fn(() =>
+                            of({
+                                _id: 'xtream-1',
+                                title: 'Xtream Portal',
+                                serverUrl: 'http://xtream.example',
+                                username: 'user',
+                                password: 'pass',
+                            } as Playlist)
+                        ),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(XtreamCollectionDetailComponent, {
+                set: {
+                    template: '',
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(XtreamCollectionDetailComponent);
+    });
+
+    afterEach(() => {
+        fixture?.destroy();
+    });
+
+    it('opens Xtream series favorites with the serial detail route context', async () => {
+        fixture.componentRef.setInput(
+            'item',
+            {
+                uid: 'xtream::xtream-1::series:103',
+                name: 'Series One',
+                contentType: 'series',
+                sourceType: 'xtream',
+                playlistId: 'xtream-1',
+                playlistName: 'Xtream Portal',
+                xtreamId: 103,
+                categoryId: 3,
+            } satisfies UnifiedCollectionItem
+        );
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+        await Promise.resolve();
+        fixture.detectChanges();
+
+        expect(selectedContentType()).toBe('series');
+        expect(selectedCategoryId()).toBe(3);
+        expect(fixture.componentInstance.detailComponent()).toBe(
+            SerialDetailsComponent
+        );
+        expect(
+            fixture.componentInstance
+                .detailInjector()
+                ?.get(ActivatedRoute)
+                .snapshot.params
+        ).toEqual({
+            categoryId: '3',
+            serialId: '103',
+        });
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/xtream-collection-detail.component.ts b/libs/portal/xtream/feature/src/lib/xtream-collection-detail.component.ts
new file mode 100644
index 0000000..4ebd3f8
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-collection-detail.component.ts
@@ -0,0 +1,243 @@
+import { NgComponentOutlet } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Injector,
+    Type,
+    effect,
+    inject,
+    input,
+    signal,
+    untracked,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ContentHeroComponent } from 'components';
+import { UnifiedCollectionItem } from '@iptvnator/portal/shared/util';
+import {
+    XtreamPlaylistData,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { PlaylistsService } from 'services';
+import { Playlist } from 'shared-interfaces';
+import { firstValueFrom } from 'rxjs';
+import { SerialDetailsComponent } from './serial-details/serial-details.component';
+import { VodDetailsRouteComponent } from './vod-details/vod-details-route.component';
+
+interface XtreamCollectionStateSnapshot {
+    playlistId: string | null;
+    currentPlaylist: XtreamPlaylistData | null;
+    selectedContentType: 'live' | 'vod' | 'series';
+    selectedCategoryId: number | null;
+    selectedItem: unknown;
+    isLoadingDetails: boolean;
+    detailsError: string | null;
+}
+
+@Component({
+    selector: 'app-xtream-collection-detail',
+    imports: [ContentHeroComponent, NgComponentOutlet],
+    template: `
+        @if (detailComponent() && detailInjector()) {
+            <ng-container
+                *ngComponentOutlet="
+                    detailComponent();
+                    injector: detailInjector()
+                "
+            />
+        } @else {
+            <app-content-hero [isLoading]="true" />
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+                min-height: 0;
+            }
+        `,
+    ],
+})
+export class XtreamCollectionDetailComponent {
+    readonly item = input<UnifiedCollectionItem | null>(null);
+
+    private readonly parentInjector = inject(Injector);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly originalState = this.captureStoreState();
+    readonly detailComponent = signal<Type<unknown> | null>(null);
+    readonly detailInjector = signal<Injector | null>(null);
+
+    private initRequestId = 0;
+
+    constructor() {
+        effect(() => {
+            const item = this.item();
+            untracked(() => {
+                void this.prepareDetail(item);
+            });
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.restoreStoreState();
+    }
+
+    private async prepareDetail(
+        item: UnifiedCollectionItem | null
+    ): Promise<void> {
+        const requestId = ++this.initRequestId;
+
+        if (!item) {
+            this.detailComponent.set(null);
+            this.detailInjector.set(null);
+            return;
+        }
+
+        const xtreamId = this.resolveXtreamId(item);
+        if (!xtreamId) {
+            this.detailComponent.set(null);
+            this.detailInjector.set(null);
+            return;
+        }
+
+        const playlist = await this.loadPlaylist(item.playlistId);
+        if (requestId !== this.initRequestId) {
+            return;
+        }
+
+        if (!playlist?.serverUrl || !playlist.username || !playlist.password) {
+            this.detailComponent.set(null);
+            this.detailInjector.set(null);
+            return;
+        }
+
+        const xtreamPlaylist = this.toXtreamPlaylist(playlist);
+        this.xtreamStore.setPlaylistId(xtreamPlaylist.id);
+        this.xtreamStore.setCurrentPlaylist(xtreamPlaylist);
+        this.xtreamStore.setSelectedContentType(
+            item.contentType === 'movie' ? 'vod' : 'series'
+        );
+        this.xtreamStore.setSelectedCategory(
+            this.toCategoryId(item.categoryId)
+        );
+        this.xtreamStore.setSelectedItem(null);
+        this.xtreamStore.setIsLoadingDetails(false);
+        this.xtreamStore.setDetailsError(null);
+
+        this.detailComponent.set(
+            item.contentType === 'movie'
+                ? VodDetailsRouteComponent
+                : SerialDetailsComponent
+        );
+        this.detailInjector.set(
+            Injector.create({
+                providers: [
+                    {
+                        provide: ActivatedRoute,
+                        useValue: {
+                            snapshot: {
+                                params:
+                                    item.contentType === 'movie'
+                                        ? {
+                                              categoryId: this.toPathSegment(
+                                                  item.categoryId
+                                              ),
+                                              vodId: xtreamId,
+                                          }
+                                        : {
+                                              categoryId: this.toPathSegment(
+                                                  item.categoryId
+                                              ),
+                                              serialId: xtreamId,
+                                          },
+                            },
+                        },
+                    },
+                ],
+                parent: this.parentInjector,
+            })
+        );
+    }
+
+    private captureStoreState(): XtreamCollectionStateSnapshot {
+        return {
+            playlistId: this.xtreamStore.playlistId(),
+            currentPlaylist: this.xtreamStore.currentPlaylist(),
+            selectedContentType: this.xtreamStore.selectedContentType(),
+            selectedCategoryId: this.xtreamStore.selectedCategoryId(),
+            selectedItem: this.xtreamStore.selectedItem(),
+            isLoadingDetails: this.xtreamStore.isLoadingDetails(),
+            detailsError: this.xtreamStore.detailsError(),
+        };
+    }
+
+    private restoreStoreState(): void {
+        this.xtreamStore.setPlaylistId(this.originalState.playlistId ?? '');
+        this.xtreamStore.setCurrentPlaylist(this.originalState.currentPlaylist);
+        this.xtreamStore.setSelectedContentType(
+            this.originalState.selectedContentType
+        );
+        this.xtreamStore.setSelectedCategory(
+            this.originalState.selectedCategoryId
+        );
+        this.xtreamStore.setSelectedItem(
+            this.originalState.selectedItem as never
+        );
+        this.xtreamStore.setIsLoadingDetails(
+            this.originalState.isLoadingDetails
+        );
+        this.xtreamStore.setDetailsError(this.originalState.detailsError);
+    }
+
+    private async loadPlaylist(playlistId: string): Promise<Playlist | null> {
+        try {
+            return (
+                (await firstValueFrom(
+                    this.playlistsService.getPlaylistById(playlistId)
+                )) ?? null
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    private toXtreamPlaylist(playlist: Playlist): XtreamPlaylistData {
+        return {
+            id: playlist._id,
+            name: playlist.title || '',
+            title: playlist.title || '',
+            serverUrl: playlist.serverUrl || '',
+            username: playlist.username || '',
+            password: playlist.password || '',
+            type: 'xtream',
+            userAgent: playlist.userAgent,
+            referrer: playlist.referrer,
+            origin: playlist.origin,
+        };
+    }
+
+    private resolveXtreamId(item: UnifiedCollectionItem): string | null {
+        const directId = Number(item.xtreamId);
+        if (Number.isFinite(directId) && directId > 0) {
+            return String(directId);
+        }
+
+        const uidSegments = item.uid.split('::');
+        const fallbackId = Number(uidSegments[uidSegments.length - 1]);
+        return Number.isFinite(fallbackId) && fallbackId > 0
+            ? String(fallbackId)
+            : null;
+    }
+
+    private toCategoryId(value: unknown): number | null {
+        const categoryId = Number(String(value ?? '').trim());
+        return Number.isFinite(categoryId) ? categoryId : null;
+    }
+
+    private toPathSegment(value: unknown): string {
+        return String(value ?? '').trim();
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-collection-route.component.ts b/libs/portal/xtream/feature/src/lib/xtream-collection-route.component.ts
new file mode 100644
index 0000000..b32934b
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-collection-route.component.ts
@@ -0,0 +1,48 @@
+import {
+    inject,
+    ChangeDetectionStrategy,
+    Component,
+    input,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+    UnifiedCollectionDetailDirective,
+    UnifiedCollectionPageComponent,
+} from '@iptvnator/portal/shared/ui';
+import { routeParamSignal } from '@iptvnator/portal/shared/util';
+import { XtreamCachedOfflineNoticeComponent } from './xtream-cached-offline-notice.component';
+import { XtreamCollectionDetailComponent } from './xtream-collection-detail.component';
+
+@Component({
+    selector: 'app-xtream-collection-route',
+    imports: [
+        UnifiedCollectionDetailDirective,
+        UnifiedCollectionPageComponent,
+        XtreamCachedOfflineNoticeComponent,
+        XtreamCollectionDetailComponent,
+    ],
+    template: `
+        <app-xtream-cached-offline-notice />
+        <app-unified-collection-page
+            [mode]="mode()"
+            [portalType]="portalType()"
+            [playlistId]="playlistId()"
+        >
+            <ng-template unifiedCollectionDetail let-item>
+                <app-xtream-collection-detail [item]="item" />
+            </ng-template>
+        </app-unified-collection-page>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class XtreamCollectionRouteComponent {
+    private readonly route = inject(ActivatedRoute);
+
+    readonly mode = input<'favorites' | 'recent'>('favorites');
+    readonly portalType = input('xtream');
+    readonly playlistId = routeParamSignal<string | undefined>(
+        this.route,
+        'id',
+        (value) => value ?? undefined
+    );
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-content-gate.component.spec.ts b/libs/portal/xtream/feature/src/lib/xtream-content-gate.component.spec.ts
new file mode 100644
index 0000000..30ae792
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-content-gate.component.spec.ts
@@ -0,0 +1,145 @@
+import { Component, input, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { provideRouter, RouterOutlet } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import {
+    XtreamContentInitBlockReason,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { XtreamCachedOfflineNoticeComponent } from './xtream-cached-offline-notice.component';
+import { XtreamContentGateComponent } from './xtream-content-gate.component';
+
+@Component({
+    selector: 'app-playlist-error-view',
+    standalone: true,
+    template: `
+        <div class="mock-error">
+            <span class="mock-error__title">{{ title() }}</span>
+            <span class="mock-error__description">{{ description() }}</span>
+        </div>
+    `,
+})
+class MockPlaylistErrorViewComponent {
+    readonly title = input<string>('');
+    readonly description = input<string | undefined>(undefined);
+}
+
+describe('XtreamContentGateComponent', () => {
+    let fixture: ComponentFixture<XtreamContentGateComponent>;
+    const contentInitBlockReason =
+        signal<XtreamContentInitBlockReason | null>(null);
+    const isContentInitialized = signal(false);
+    const portalStatus = signal<'active' | 'inactive' | 'expired' | 'unavailable'>(
+        'active'
+    );
+    const retryContentInitialization = jest.fn().mockResolvedValue(undefined);
+
+    beforeEach(async () => {
+        contentInitBlockReason.set(null);
+        isContentInitialized.set(false);
+        portalStatus.set('active');
+        retryContentInitialization.mockClear();
+
+        await TestBed.configureTestingModule({
+            imports: [XtreamContentGateComponent],
+            providers: [
+                provideRouter([]),
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: {
+                        contentInitBlockReason,
+                        isContentInitialized,
+                        portalStatus,
+                        retryContentInitialization,
+                    },
+                },
+            ],
+        })
+            .overrideComponent(XtreamContentGateComponent, {
+                set: {
+                    imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        MockPlaylistErrorViewComponent,
+                        RouterOutlet,
+                        TranslatePipe,
+                        XtreamCachedOfflineNoticeComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(XtreamContentGateComponent);
+    });
+
+    it.each([
+        ['cancelled', 'PORTALS.ERROR_VIEW.IMPORT_CANCELLED.TITLE'],
+        ['expired', 'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.TITLE'],
+        ['inactive', 'PORTALS.ERROR_VIEW.ACCOUNT_INACTIVE.TITLE'],
+        ['unavailable', 'PORTALS.ERROR_VIEW.PORTAL_UNAVAILABLE.TITLE'],
+        ['error', 'PORTALS.ERROR_VIEW.UNKNOWN_ERROR.TITLE'],
+    ] as const)(
+        'renders the blocked error state for %s imports',
+        (reason, expectedTitleKey) => {
+            contentInitBlockReason.set(reason);
+            fixture.detectChanges();
+
+            const title = fixture.nativeElement.querySelector(
+                '.mock-error__title'
+            ) as HTMLElement | null;
+            expect(title?.textContent?.trim()).toBe(expectedTitleKey);
+        }
+    );
+
+    it('keeps the child outlet available when there is no block reason', () => {
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.mock-error')
+        ).toBeNull();
+        expect(fixture.nativeElement.querySelector('router-outlet')).not.toBeNull();
+    });
+
+    it('shows an inline warning when cached content remains available offline', () => {
+        isContentInitialized.set(true);
+        portalStatus.set('unavailable');
+        fixture.detectChanges();
+
+        const warning = fixture.nativeElement.querySelector(
+            '[data-testid="xtream-offline-warning"]'
+        ) as HTMLElement | null;
+
+        expect(warning?.textContent).toContain(
+            'PORTALS.ERROR_VIEW.PORTAL_UNAVAILABLE.TITLE'
+        );
+        expect(fixture.nativeElement.querySelector('router-outlet')).not.toBeNull();
+    });
+
+    it('retries content initialization from the blocked state', () => {
+        contentInitBlockReason.set('cancelled');
+        fixture.detectChanges();
+
+        const retryButton = fixture.nativeElement.querySelector(
+            'button'
+        ) as HTMLButtonElement | null;
+        retryButton?.click();
+
+        expect(retryContentInitialization).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/xtream-content-gate.component.ts b/libs/portal/xtream/feature/src/lib/xtream-content-gate.component.ts
new file mode 100644
index 0000000..420d545
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-content-gate.component.ts
@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterOutlet } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    PlaylistErrorViewComponent,
+} from '@iptvnator/portal/shared/ui';
+import {
+    XtreamContentInitBlockReason,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { XtreamCachedOfflineNoticeComponent } from './xtream-cached-offline-notice.component';
+
+@Component({
+    selector: 'app-xtream-content-gate',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        PlaylistErrorViewComponent,
+        RouterOutlet,
+        TranslatePipe,
+        XtreamCachedOfflineNoticeComponent,
+    ],
+    template: `
+        @if (contentInitBlockReason(); as blockReason) {
+            <div class="xtream-content-gate">
+                <app-playlist-error-view
+                    [title]="titleKey() | translate"
+                    [description]="descriptionKey() | translate"
+                />
+
+                <div class="xtream-content-gate__actions">
+                    <button
+                        mat-flat-button
+                        color="primary"
+                        type="button"
+                        (click)="retryContentInitialization()"
+                    >
+                        <mat-icon>refresh</mat-icon>
+                        {{ 'DOWNLOADS.RETRY' | translate }}
+                    </button>
+                </div>
+            </div>
+        } @else {
+            <app-xtream-cached-offline-notice />
+            <router-outlet />
+        }
+    `,
+    styles: [
+        `
+            .xtream-content-gate {
+                display: grid;
+                gap: 16px;
+                justify-items: center;
+                padding: 24px;
+            }
+
+            .xtream-content-gate__actions {
+                display: flex;
+                justify-content: center;
+            }
+        `,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class XtreamContentGateComponent {
+    private readonly xtreamStore = inject(XtreamStore);
+
+    readonly contentInitBlockReason = this.xtreamStore.contentInitBlockReason;
+    private readonly errorViewKey = computed(() => {
+        switch (this.contentInitBlockReason()) {
+            case 'cancelled':
+                return 'IMPORT_CANCELLED';
+            case 'expired':
+                return 'ACCOUNT_EXPIRED';
+            case 'inactive':
+                return 'ACCOUNT_INACTIVE';
+            case 'unavailable':
+                return 'PORTAL_UNAVAILABLE';
+            case 'error':
+            default:
+                return 'UNKNOWN_ERROR';
+        }
+    });
+    readonly titleKey = computed(
+        () => `PORTALS.ERROR_VIEW.${this.errorViewKey()}.TITLE`
+    );
+    readonly descriptionKey = computed(
+        () => `PORTALS.ERROR_VIEW.${this.errorViewKey()}.DESCRIPTION`
+    );
+
+    retryContentInitialization(): void {
+        void this.xtreamStore.retryContentInitialization();
+    }
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-feature.routes.spec.ts b/libs/portal/xtream/feature/src/lib/xtream-feature.routes.spec.ts
new file mode 100644
index 0000000..4af1c06
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-feature.routes.spec.ts
@@ -0,0 +1,28 @@
+import { createXtreamRoutes } from './xtream-feature.routes';
+
+describe('createXtreamRoutes', () => {
+    it('keeps import-driven routes behind the content gate and leaves collections outside it', () => {
+        const [xtreamRoute] = createXtreamRoutes();
+        const gateRoute = xtreamRoute.children?.find(
+            (route) => route.path === '' && typeof route.loadComponent === 'function'
+        );
+
+        expect(gateRoute?.children?.map((route) => route.path)).toEqual(
+            expect.arrayContaining([
+                'live',
+                'live/:categoryId',
+                'vod',
+                'series',
+                'search',
+                'recently-added',
+            ])
+        );
+
+        expect(xtreamRoute.children?.find((route) => route.path === 'favorites'))
+            .toMatchObject({ path: 'favorites' });
+        expect(xtreamRoute.children?.find((route) => route.path === 'recent'))
+            .toMatchObject({ path: 'recent' });
+        expect(xtreamRoute.children?.find((route) => route.path === 'downloads'))
+            .toMatchObject({ path: 'downloads' });
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/xtream-feature.routes.ts b/libs/portal/xtream/feature/src/lib/xtream-feature.routes.ts
new file mode 100644
index 0000000..c8942e0
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-feature.routes.ts
@@ -0,0 +1,138 @@
+import { Route } from '@angular/router';
+import { provideXtreamCatalogFacade } from './xtream-catalog-facade.service';
+import { provideXtreamWorkspaceRouteSession } from './xtream-workspace-route-session.service';
+
+type ComponentLoader = NonNullable<Route['loadComponent']>;
+
+const loadDownloadsComponent: ComponentLoader = () =>
+    import('@iptvnator/portal/downloads/feature').then(
+        (c) => c.DownloadsComponent
+    );
+
+const loadXtreamContentGateComponent: ComponentLoader = () =>
+    import('./xtream-content-gate.component').then(
+        (c) => c.XtreamContentGateComponent
+    );
+
+const loadLiveStreamLayoutComponent: ComponentLoader = () =>
+    import('./live-stream-layout/live-stream-layout.component').then(
+        (c) => c.LiveStreamLayoutComponent
+    );
+
+const loadCategoryContentViewComponent: ComponentLoader = () =>
+    import('@iptvnator/portal/catalog/feature').then(
+        (c) => c.CategoryContentViewComponent
+    );
+
+const loadXtreamCollectionRouteComponent: ComponentLoader = () =>
+    import('./xtream-collection-route.component').then(
+        (c) => c.XtreamCollectionRouteComponent
+    );
+
+const loadSearchResultsComponent: ComponentLoader = () =>
+    import('./search-results/search-results.component').then(
+        (c) => c.SearchResultsComponent
+    );
+
+const loadRecentlyAddedComponent: ComponentLoader = () =>
+    import('./recently-added/recently-added.component').then(
+        (c) => c.RecentlyAddedComponent
+    );
+
+const loadVodDetailsRouteComponent: ComponentLoader = () =>
+    import('./vod-details/vod-details-route.component').then(
+        (c) => c.VodDetailsRouteComponent
+    );
+
+const loadSerialDetailsComponent: ComponentLoader = () =>
+    import('./serial-details/serial-details.component').then(
+        (c) => c.SerialDetailsComponent
+    );
+
+export function createXtreamRoutes(): Route[] {
+    return [
+        {
+            path: 'xtreams/:id',
+            providers: provideXtreamWorkspaceRouteSession(),
+            children: [
+                {
+                    path: '',
+                    redirectTo: 'vod',
+                    pathMatch: 'full',
+                },
+                {
+                    path: '',
+                    loadComponent: loadXtreamContentGateComponent,
+                    children: [
+                        {
+                            path: 'live',
+                            loadComponent: loadLiveStreamLayoutComponent,
+                        },
+                        {
+                            path: 'live/:categoryId',
+                            loadComponent: loadLiveStreamLayoutComponent,
+                        },
+                        {
+                            path: 'vod',
+                            providers: provideXtreamCatalogFacade(),
+                            children: [
+                                {
+                                    path: '',
+                                    loadComponent: loadCategoryContentViewComponent,
+                                },
+                                {
+                                    path: ':categoryId',
+                                    loadComponent: loadCategoryContentViewComponent,
+                                },
+                                {
+                                    path: ':categoryId/:vodId',
+                                    loadComponent: loadVodDetailsRouteComponent,
+                                },
+                            ],
+                        },
+                        {
+                            path: 'series',
+                            providers: provideXtreamCatalogFacade(),
+                            children: [
+                                {
+                                    path: '',
+                                    loadComponent: loadCategoryContentViewComponent,
+                                },
+                                {
+                                    path: ':categoryId',
+                                    loadComponent: loadCategoryContentViewComponent,
+                                },
+                                {
+                                    path: ':categoryId/:serialId',
+                                    loadComponent: loadSerialDetailsComponent,
+                                },
+                            ],
+                        },
+                        {
+                            path: 'search',
+                            loadComponent: loadSearchResultsComponent,
+                        },
+                        {
+                            path: 'recently-added',
+                            loadComponent: loadRecentlyAddedComponent,
+                        },
+                    ],
+                },
+                {
+                    path: 'favorites',
+                    loadComponent: loadXtreamCollectionRouteComponent,
+                    data: { mode: 'favorites', portalType: 'xtream' },
+                },
+                {
+                    path: 'recent',
+                    loadComponent: loadXtreamCollectionRouteComponent,
+                    data: { mode: 'recent', portalType: 'xtream' },
+                },
+                {
+                    path: 'downloads',
+                    loadComponent: loadDownloadsComponent,
+                },
+            ],
+        },
+    ];
+}
diff --git a/libs/portal/xtream/feature/src/lib/xtream-workspace-route-session.service.spec.ts b/libs/portal/xtream/feature/src/lib/xtream-workspace-route-session.service.spec.ts
new file mode 100644
index 0000000..60d206c
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-workspace-route-session.service.spec.ts
@@ -0,0 +1,357 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    PortalStatusType,
+    XtreamContentInitBlockReason,
+    XtreamPlaylistData,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { PlaylistMeta } from 'shared-interfaces';
+import { XtreamWorkspaceRouteSession } from './xtream-workspace-route-session.service';
+
+const PLAYLIST_ID = 'playlist-1';
+const ACTIVE_PLAYLIST: PlaylistMeta = {
+    _id: PLAYLIST_ID,
+    filename: 'xtream.m3u',
+    password: 'secret',
+    serverUrl: 'http://localhost:3211',
+    title: 'Test Xtream',
+    username: 'user1',
+} as PlaylistMeta;
+const UPDATED_ACTIVE_PLAYLIST: PlaylistMeta = {
+    ...ACTIVE_PLAYLIST,
+    serverUrl: 'http://localhost:65530',
+} as PlaylistMeta;
+
+const XTREAM_PLAYLIST: XtreamPlaylistData = {
+    id: PLAYLIST_ID,
+    name: 'Test Xtream',
+    title: 'Test Xtream',
+    serverUrl: 'http://localhost:3211',
+    username: 'user1',
+    password: 'secret',
+    type: 'xtream',
+};
+const XTREAM_PLAYLIST_WITH_NULL_OPTIONALS = {
+    ...XTREAM_PLAYLIST,
+    origin: null,
+    referrer: null,
+    userAgent: null,
+} as XtreamPlaylistData;
+
+async function flushEffects(): Promise<void> {
+    await Promise.resolve();
+    await Promise.resolve();
+}
+
+function getXtreamSectionFromUrl(url: string): string | null {
+    const match = url.match(
+        /^\/workspace\/xtreams\/[^/]+\/([^/?]+)(?:\/|$)/
+    );
+
+    return match?.[1] ?? null;
+}
+
+describe('XtreamWorkspaceRouteSession', () => {
+    const routerEvents = new Subject<NavigationEnd>();
+    const routeProvider = signal<'xtreams' | null>('xtreams');
+    const routePlaylistId = signal<string | null>(PLAYLIST_ID);
+    const activePlaylist = signal<PlaylistMeta | null>(ACTIVE_PLAYLIST);
+    const currentPlaylist = signal<XtreamPlaylistData | null>(XTREAM_PLAYLIST);
+    const playlistId = signal<string | null>(PLAYLIST_ID);
+    const portalStatus = signal<PortalStatusType>('active');
+    const selectedContentType = signal<'live' | 'vod' | 'series'>('vod');
+    const selectedCategoryId = signal<number | null>(null);
+    const isContentInitialized = signal(false);
+    const contentInitBlockReason =
+        signal<XtreamContentInitBlockReason | null>(null);
+    let hasUsableOfflineCache = false;
+
+    const playlistContext = {
+        routeProvider,
+        routePlaylistId,
+        activePlaylist,
+        syncFromUrl: jest.fn(),
+    };
+
+    const xtreamStore = {
+        currentPlaylist,
+        playlistId,
+        portalStatus,
+        resetStore: jest.fn((nextPlaylistId?: string) => {
+            playlistId.set(nextPlaylistId ?? null);
+            currentPlaylist.set(null);
+            selectedContentType.set('vod');
+            isContentInitialized.set(false);
+        }),
+        setCurrentPlaylist: jest.fn((playlist: XtreamPlaylistData | null) => {
+            currentPlaylist.set(playlist);
+        }),
+        fetchXtreamPlaylist: jest.fn().mockResolvedValue(undefined),
+        checkPortalStatus: jest.fn(),
+        hasUsableOfflineCache: jest.fn().mockImplementation(async () => {
+            return hasUsableOfflineCache;
+        }),
+        isContentInitialized,
+        contentInitBlockReason,
+        initializeContent: jest.fn().mockImplementation(async () => {
+            isContentInitialized.set(true);
+        }),
+        setSelectedContentType: jest.fn(
+            (type: 'live' | 'vod' | 'series') => {
+                selectedContentType.set(type);
+            }
+        ),
+        setSelectedCategory: jest.fn((categoryId: number | null) => {
+            selectedCategoryId.set(categoryId);
+        }),
+        setContentInitBlockReason: jest.fn(
+            (reason: XtreamContentInitBlockReason | null) => {
+                contentInitBlockReason.set(reason);
+            }
+        ),
+    };
+
+    const router = {
+        url: `/workspace/xtreams/${PLAYLIST_ID}/vod`,
+        events: routerEvents.asObservable(),
+    };
+
+    beforeEach(async () => {
+        router.url = `/workspace/xtreams/${PLAYLIST_ID}/vod`;
+        routeProvider.set('xtreams');
+        routePlaylistId.set(PLAYLIST_ID);
+        activePlaylist.set(ACTIVE_PLAYLIST);
+        currentPlaylist.set(null);
+        playlistId.set(null);
+        portalStatus.set('active');
+        selectedContentType.set('vod');
+        selectedCategoryId.set(null);
+        isContentInitialized.set(false);
+        contentInitBlockReason.set(null);
+        hasUsableOfflineCache = false;
+
+        playlistContext.syncFromUrl.mockImplementation((url: string) => ({
+            inWorkspace: true,
+            provider: 'xtreams',
+            playlistId: PLAYLIST_ID,
+            section: getXtreamSectionFromUrl(url) as
+                | 'favorites'
+                | 'live'
+                | 'recently-added'
+                | 'search'
+                | 'series'
+                | 'vod'
+                | null,
+        }));
+
+        xtreamStore.resetStore.mockClear();
+        xtreamStore.setCurrentPlaylist.mockClear();
+        xtreamStore.fetchXtreamPlaylist.mockClear();
+        xtreamStore.checkPortalStatus.mockReset();
+        xtreamStore.hasUsableOfflineCache.mockClear();
+        xtreamStore.initializeContent.mockClear();
+        xtreamStore.setSelectedContentType.mockClear();
+        xtreamStore.setSelectedCategory.mockClear();
+        xtreamStore.setContentInitBlockReason.mockClear();
+
+        await TestBed.configureTestingModule({
+            providers: [
+                XtreamWorkspaceRouteSession,
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: playlistContext,
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: xtreamStore,
+                },
+            ],
+        });
+    });
+
+    it('initializes content for active import-driven routes', async () => {
+        xtreamStore.checkPortalStatus.mockImplementation(async () => {
+            portalStatus.set('active');
+            return 'active';
+        });
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(xtreamStore.checkPortalStatus).toHaveBeenCalled();
+        expect(xtreamStore.setContentInitBlockReason).toHaveBeenCalledWith(null);
+        expect(xtreamStore.setSelectedContentType).toHaveBeenCalledWith('vod');
+        expect(xtreamStore.initializeContent).toHaveBeenCalled();
+    });
+
+    it('reapplies a live route section after resetStore restores the default selection', async () => {
+        router.url = `/workspace/xtreams/${PLAYLIST_ID}/live`;
+        xtreamStore.checkPortalStatus.mockImplementation(async () => {
+            portalStatus.set('active');
+            return 'active';
+        });
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(xtreamStore.resetStore).toHaveBeenCalledWith(PLAYLIST_ID);
+        expect(xtreamStore.setSelectedContentType).toHaveBeenCalledWith('live');
+        expect(selectedContentType()).toBe('live');
+        expect(
+            xtreamStore.setSelectedContentType.mock.invocationCallOrder[0]
+        ).toBeGreaterThan(xtreamStore.resetStore.mock.invocationCallOrder[0]);
+    });
+
+    it('does not bootstrap again when the store already holds the active playlist', async () => {
+        router.url = `/workspace/xtreams/${PLAYLIST_ID}/vod/101`;
+        currentPlaylist.set(XTREAM_PLAYLIST);
+        playlistId.set(PLAYLIST_ID);
+        isContentInitialized.set(true);
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(xtreamStore.setSelectedContentType).toHaveBeenCalledWith('vod');
+        expect(xtreamStore.setSelectedCategory).toHaveBeenCalledWith(101);
+        expect(xtreamStore.resetStore).not.toHaveBeenCalled();
+        expect(xtreamStore.fetchXtreamPlaylist).not.toHaveBeenCalled();
+        expect(xtreamStore.checkPortalStatus).not.toHaveBeenCalled();
+        expect(xtreamStore.initializeContent).not.toHaveBeenCalled();
+    });
+
+    it('does not treat null and undefined Xtream connection metadata as a playlist change', async () => {
+        router.url = `/workspace/xtreams/${PLAYLIST_ID}/vod/101`;
+        currentPlaylist.set(XTREAM_PLAYLIST_WITH_NULL_OPTIONALS);
+        playlistId.set(PLAYLIST_ID);
+        isContentInitialized.set(true);
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(xtreamStore.resetStore).not.toHaveBeenCalled();
+        expect(xtreamStore.fetchXtreamPlaylist).not.toHaveBeenCalled();
+        expect(xtreamStore.checkPortalStatus).not.toHaveBeenCalled();
+        expect(xtreamStore.initializeContent).not.toHaveBeenCalled();
+    });
+
+    it('does not reinitialize content when switching categories in an initialized playlist', async () => {
+        router.url = `/workspace/xtreams/${PLAYLIST_ID}/vod/101`;
+        xtreamStore.checkPortalStatus.mockImplementation(async () => {
+            portalStatus.set('active');
+            return 'active';
+        });
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+        await flushEffects();
+
+        expect(isContentInitialized()).toBe(true);
+
+        xtreamStore.resetStore.mockClear();
+        xtreamStore.fetchXtreamPlaylist.mockClear();
+        xtreamStore.checkPortalStatus.mockClear();
+        xtreamStore.initializeContent.mockClear();
+        xtreamStore.setSelectedContentType.mockClear();
+        xtreamStore.setSelectedCategory.mockClear();
+
+        router.url = `/workspace/xtreams/${PLAYLIST_ID}/vod/202`;
+        routerEvents.next(
+            new NavigationEnd(1, router.url, router.url)
+        );
+        await flushEffects();
+
+        expect(xtreamStore.setSelectedContentType).toHaveBeenCalledWith('vod');
+        expect(xtreamStore.setSelectedCategory).toHaveBeenCalledWith(202);
+        expect(selectedCategoryId()).toBe(202);
+        expect(xtreamStore.resetStore).not.toHaveBeenCalled();
+        expect(xtreamStore.fetchXtreamPlaylist).not.toHaveBeenCalled();
+        expect(xtreamStore.checkPortalStatus).not.toHaveBeenCalled();
+        expect(xtreamStore.initializeContent).not.toHaveBeenCalled();
+    });
+
+    it.each(['expired', 'inactive', 'unavailable'] as const)(
+        'blocks %s portals before import-driven initialization starts',
+        async (status) => {
+            xtreamStore.checkPortalStatus.mockImplementation(async () => {
+                portalStatus.set(status);
+                return status;
+            });
+
+            TestBed.inject(XtreamWorkspaceRouteSession);
+            await flushEffects();
+
+            expect(xtreamStore.checkPortalStatus).toHaveBeenCalled();
+            expect(xtreamStore.setContentInitBlockReason).toHaveBeenCalledWith(
+                status
+            );
+            expect(xtreamStore.initializeContent).not.toHaveBeenCalled();
+        }
+    );
+
+    it('allows unavailable portals to initialize cached content', async () => {
+        hasUsableOfflineCache = true;
+        activePlaylist.set(UPDATED_ACTIVE_PLAYLIST);
+        xtreamStore.checkPortalStatus.mockImplementation(async () => {
+            portalStatus.set('unavailable');
+            return 'unavailable';
+        });
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+        await flushEffects();
+
+        expect(xtreamStore.checkPortalStatus).toHaveBeenCalled();
+        expect(xtreamStore.hasUsableOfflineCache).toHaveBeenCalled();
+        expect(xtreamStore.setContentInitBlockReason).toHaveBeenCalledWith(
+            null
+        );
+        expect(xtreamStore.initializeContent).toHaveBeenCalled();
+    });
+
+    it('rebootstraps the current Xtream playlist when its connection details change', async () => {
+        activePlaylist.set(UPDATED_ACTIVE_PLAYLIST);
+        currentPlaylist.set(XTREAM_PLAYLIST);
+        playlistId.set(PLAYLIST_ID);
+        xtreamStore.checkPortalStatus.mockImplementation(async () => {
+            portalStatus.set('active');
+            return 'active';
+        });
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+        await flushEffects();
+
+        expect(xtreamStore.resetStore).toHaveBeenCalledWith(PLAYLIST_ID);
+        expect(xtreamStore.setCurrentPlaylist).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: PLAYLIST_ID,
+                serverUrl: UPDATED_ACTIVE_PLAYLIST.serverUrl,
+            })
+        );
+        expect(xtreamStore.checkPortalStatus).toHaveBeenCalled();
+    });
+
+    it('does not clear a cancelled block while an active portal bootstrap finishes', async () => {
+        xtreamStore.checkPortalStatus.mockImplementation(async () => {
+            portalStatus.set('active');
+            return 'active';
+        });
+        contentInitBlockReason.set('cancelled');
+
+        TestBed.inject(XtreamWorkspaceRouteSession);
+        await flushEffects();
+
+        expect(xtreamStore.checkPortalStatus).toHaveBeenCalled();
+        expect(xtreamStore.setContentInitBlockReason).not.toHaveBeenCalledWith(
+            null
+        );
+    });
+});
diff --git a/libs/portal/xtream/feature/src/lib/xtream-workspace-route-session.service.ts b/libs/portal/xtream/feature/src/lib/xtream-workspace-route-session.service.ts
new file mode 100644
index 0000000..329c5e8
--- /dev/null
+++ b/libs/portal/xtream/feature/src/lib/xtream-workspace-route-session.service.ts
@@ -0,0 +1,321 @@
+import {
+    DestroyRef,
+    ENVIRONMENT_INITIALIZER,
+    effect,
+    inject,
+    Injectable,
+    Provider,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { PortalRailSection } from '@iptvnator/portal/shared/util';
+import {
+    PortalStatusType,
+    XtreamPlaylistData,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { PlaylistMeta } from 'shared-interfaces';
+
+function toXtreamPlaylistData(
+    playlist: PlaylistMeta | null
+): XtreamPlaylistData | null {
+    if (
+        !playlist?._id ||
+        !playlist.serverUrl ||
+        !playlist.username ||
+        !playlist.password
+    ) {
+        return null;
+    }
+
+    return {
+        id: playlist._id,
+        name: playlist.title || playlist.filename || 'Untitled playlist',
+        title: playlist.title,
+        updateDate: playlist.updateDate,
+        serverUrl: playlist.serverUrl,
+        username: playlist.username,
+        password: playlist.password,
+        type: 'xtream',
+        userAgent: playlist.userAgent,
+        referrer: playlist.referrer,
+        origin: playlist.origin,
+    };
+}
+
+function isImportDrivenSection(section: PortalRailSection | null): boolean {
+    return (
+        section === 'vod' ||
+        section === 'live' ||
+        section === 'series' ||
+        section === 'search' ||
+        section === 'recently-added'
+    );
+}
+
+function toContentInitBlockReason(
+    portalStatus: PortalStatusType
+): 'expired' | 'inactive' | 'unavailable' | null {
+    switch (portalStatus) {
+        case 'expired':
+        case 'inactive':
+        case 'unavailable':
+            return portalStatus;
+        default:
+            return null;
+    }
+}
+
+function hasPlaylistConnectionChanges(
+    currentPlaylist: XtreamPlaylistData | null,
+    nextPlaylist: XtreamPlaylistData | null
+): boolean {
+    if (!currentPlaylist || !nextPlaylist) {
+        return false;
+    }
+
+    const currentUserAgent = currentPlaylist.userAgent ?? null;
+    const nextUserAgent = nextPlaylist.userAgent ?? null;
+    const currentReferrer = currentPlaylist.referrer ?? null;
+    const nextReferrer = nextPlaylist.referrer ?? null;
+    const currentOrigin = currentPlaylist.origin ?? null;
+    const nextOrigin = nextPlaylist.origin ?? null;
+
+    return (
+        currentPlaylist.serverUrl !== nextPlaylist.serverUrl ||
+        currentPlaylist.username !== nextPlaylist.username ||
+        currentPlaylist.password !== nextPlaylist.password ||
+        currentUserAgent !== nextUserAgent ||
+        currentReferrer !== nextReferrer ||
+        currentOrigin !== nextOrigin
+    );
+}
+
+function shouldBootstrapXtreamPlaylist(
+    playlistId: string | null,
+    routePlaylist: XtreamPlaylistData | null,
+    storePlaylistId: string | null,
+    currentPlaylist: XtreamPlaylistData | null
+): boolean {
+    const currentPlaylistUpdateDate = currentPlaylist?.updateDate ?? null;
+    const routePlaylistUpdateDate = routePlaylist?.updateDate ?? null;
+
+    return Boolean(
+        playlistId &&
+            routePlaylist &&
+            (storePlaylistId !== playlistId ||
+                currentPlaylist?.id !== playlistId ||
+                currentPlaylistUpdateDate !== routePlaylistUpdateDate ||
+                hasPlaylistConnectionChanges(currentPlaylist, routePlaylist))
+    );
+}
+
+function getXtreamRouteCategoryId(
+    url: string,
+    section: PortalRailSection | null
+): number | null {
+    if (
+        section !== 'live' &&
+        section !== 'vod' &&
+        section !== 'series'
+    ) {
+        return null;
+    }
+
+    const path = url.split('?')[0] ?? '';
+    const segments = path.split('/').filter(Boolean);
+    const categorySegment = segments[4];
+
+    if (!categorySegment) {
+        return null;
+    }
+
+    const categoryId = Number(categorySegment);
+    return Number.isNaN(categoryId) ? null : categoryId;
+}
+
+@Injectable()
+export class XtreamWorkspaceRouteSession {
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly router = inject(Router);
+    private readonly xtreamStore = inject(XtreamStore);
+
+    private syncInFlight = false;
+    private syncPending = false;
+
+    constructor() {
+        effect(() => {
+            const routeProvider = this.playlistContext.routeProvider();
+            const routePlaylistId = this.playlistContext.routePlaylistId();
+            const activePlaylist = this.playlistContext.activePlaylist();
+
+            if (
+                routeProvider !== 'xtreams' ||
+                !routePlaylistId ||
+                activePlaylist?._id !== routePlaylistId
+            ) {
+                return;
+            }
+
+            this.scheduleSyncRouteContext();
+        });
+
+        this.router.events
+            .pipe(
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe(() => {
+                this.scheduleSyncRouteContext();
+            });
+
+        this.scheduleSyncRouteContext();
+    }
+
+    private scheduleSyncRouteContext(): void {
+        if (this.syncInFlight) {
+            this.syncPending = true;
+            return;
+        }
+
+        this.syncInFlight = true;
+
+        void (async () => {
+            try {
+                do {
+                    this.syncPending = false;
+                    await this.syncRouteContext();
+                } while (this.syncPending);
+            } finally {
+                this.syncInFlight = false;
+            }
+        })();
+    }
+
+    private async syncRouteContext(): Promise<void> {
+        const routeContext = this.playlistContext.syncFromUrl(this.router.url);
+        const playlistId =
+            routeContext.provider === 'xtreams'
+                ? routeContext.playlistId
+                : null;
+        const routeSection =
+            routeContext.provider === 'xtreams' ? routeContext.section : null;
+        const routePlaylist =
+            routeContext.provider === 'xtreams'
+                ? toXtreamPlaylistData(this.playlistContext.activePlaylist())
+                : null;
+        const storePlaylistId = this.xtreamStore.playlistId();
+        const currentPlaylist = this.xtreamStore.currentPlaylist();
+        const shouldBootstrapPlaylist = shouldBootstrapXtreamPlaylist(
+            playlistId,
+            routePlaylist,
+            storePlaylistId,
+            currentPlaylist
+        );
+        let portalStatus = this.xtreamStore.portalStatus();
+        let didBootstrapPlaylist = false;
+
+        if (playlistId && shouldBootstrapPlaylist) {
+            this.xtreamStore.resetStore(playlistId);
+            didBootstrapPlaylist = true;
+
+            this.xtreamStore.setCurrentPlaylist(routePlaylist);
+
+            await this.xtreamStore.fetchXtreamPlaylist();
+            portalStatus = await this.xtreamStore.checkPortalStatus();
+            const hasUsableOfflineCache =
+                portalStatus === 'unavailable'
+                    ? await this.xtreamStore.hasUsableOfflineCache()
+                    : false;
+            const nextBlockReason =
+                portalStatus === 'unavailable' && hasUsableOfflineCache
+                    ? null
+                    : toContentInitBlockReason(portalStatus);
+            const currentBlockReason =
+                this.xtreamStore.contentInitBlockReason();
+
+            if (
+                nextBlockReason !== null ||
+                currentBlockReason !== 'cancelled'
+            ) {
+                this.xtreamStore.setContentInitBlockReason(nextBlockReason);
+            }
+        }
+
+        const section = this.syncRouteState(routeSection);
+
+        const canUseOfflineCache =
+            portalStatus === 'unavailable'
+                ? await this.xtreamStore.hasUsableOfflineCache()
+                : false;
+
+        if (
+            isImportDrivenSection(section) &&
+            portalStatus !== 'active' &&
+            !canUseOfflineCache
+        ) {
+            return;
+        }
+
+        await this.initializeCurrentSectionContent(
+            section,
+            didBootstrapPlaylist
+        );
+    }
+
+    private syncRouteState(
+        section: PortalRailSection | null
+    ): PortalRailSection | null {
+        if (!section) {
+            return null;
+        }
+
+        if (section === 'vod' || section === 'live' || section === 'series') {
+            this.xtreamStore.setSelectedContentType(section);
+        }
+
+        this.xtreamStore.setSelectedCategory(
+            getXtreamRouteCategoryId(this.router.url, section)
+        );
+
+        return section;
+    }
+
+    private async initializeCurrentSectionContent(
+        section: PortalRailSection | null,
+        didBootstrapPlaylist: boolean
+    ): Promise<void> {
+        const playlist = this.xtreamStore.currentPlaylist();
+        const playlistId = this.xtreamStore.playlistId();
+
+        if (!playlist || playlist.id !== playlistId) {
+            return;
+        }
+
+        if (
+            isImportDrivenSection(section) &&
+            (didBootstrapPlaylist || !this.xtreamStore.isContentInitialized())
+        ) {
+            await this.xtreamStore.initializeContent();
+        }
+    }
+}
+
+export function provideXtreamWorkspaceRouteSession(): Provider[] {
+    return [
+        XtreamWorkspaceRouteSession,
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                inject(XtreamWorkspaceRouteSession);
+            },
+        },
+    ];
+}
diff --git a/libs/portal/xtream/feature/src/test-setup.ts b/libs/portal/xtream/feature/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/portal/xtream/feature/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/portal/xtream/feature/tsconfig.json b/libs/portal/xtream/feature/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/portal/xtream/feature/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/portal/xtream/feature/tsconfig.lib.json b/libs/portal/xtream/feature/tsconfig.lib.json
new file mode 100644
index 0000000..eb0b673
--- /dev/null
+++ b/libs/portal/xtream/feature/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/portal/xtream/feature/tsconfig.spec.json b/libs/portal/xtream/feature/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/portal/xtream/feature/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/services/README.md b/libs/services/README.md
new file mode 100644
index 0000000..8a106f0
--- /dev/null
+++ b/libs/services/README.md
@@ -0,0 +1,7 @@
+# services
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test services` to execute the unit tests.
diff --git a/libs/services/eslint.config.mjs b/libs/services/eslint.config.mjs
new file mode 100644
index 0000000..9234ef5
--- /dev/null
+++ b/libs/services/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'lib',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'lib',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/services/jest.config.ts b/libs/services/jest.config.ts
new file mode 100644
index 0000000..5fdbeaf
--- /dev/null
+++ b/libs/services/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'services',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../coverage/libs/services',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/services/project.json b/libs/services/project.json
new file mode 100644
index 0000000..f60978f
--- /dev/null
+++ b/libs/services/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "services",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/services/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:shared-runtime", "type:data-access"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/services/jest.config.ts",
+                "tsConfig": "libs/services/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/services/src/index.ts b/libs/services/src/index.ts
new file mode 100644
index 0000000..5b79568
--- /dev/null
+++ b/libs/services/src/index.ts
@@ -0,0 +1,12 @@
+export * from './lib/data.service';
+export * from './lib/database-electron.service';
+export * from './lib/downloads.service';
+export * from './lib/playback-position.service';
+export * from './lib/playlist-backup.service';
+export * from './lib/playlist-refresh.service';
+export * from './lib/playlists.service';
+export * from './lib/portal-status.service';
+export * from './lib/settings-store.service';
+export * from './lib/workspace-product-branding.token';
+export * from './lib/sort.service';
+export * from './lib/xtream-pending-restore.service';
diff --git a/libs/services/src/lib/data.service.ts b/libs/services/src/lib/data.service.ts
new file mode 100644
index 0000000..ed23adf
--- /dev/null
+++ b/libs/services/src/lib/data.service.ts
@@ -0,0 +1,29 @@
+type ElectronProcessWindow = Window & {
+    process?: {
+        type?: string;
+    };
+};
+
+export abstract class DataService {
+    get isElectron(): boolean {
+        const currentWindow = window as ElectronProcessWindow;
+        return Boolean(currentWindow.process?.type);
+    }
+    get remote() {
+        return null;
+    }
+    get ipcRenderer() {
+        return null;
+    }
+    abstract getAppVersion(): string;
+    abstract sendIpcEvent<T = unknown>(
+        type: string,
+        payload?: unknown
+    ): T | Promise<T>;
+    abstract removeAllListeners(type: string): void;
+    abstract listenOn(
+        command: string,
+        callback: (...args: unknown[]) => void
+    ): void;
+    abstract getAppEnvironment(): string;
+}
diff --git a/libs/services/src/lib/database-electron.service.ts b/libs/services/src/lib/database-electron.service.ts
new file mode 100644
index 0000000..6905855
--- /dev/null
+++ b/libs/services/src/lib/database-electron.service.ts
@@ -0,0 +1,860 @@
+/**
+ * Database service for Electron renderer process
+ * Communicates with the main process database via IPC
+ */
+
+import { Injectable } from '@angular/core';
+import {
+    PlaylistMeta,
+    XtreamBackupFavoriteItem,
+    XtreamBackupHiddenCategory,
+    XtreamBackupRecentlyViewedItem,
+    XtreamCategory,
+} from 'shared-interfaces';
+
+export interface XCategoryFromDb {
+    id: number;
+    name: string;
+    playlist_id: string;
+    type: 'movies' | 'live' | 'series';
+    xtream_id: number;
+    hidden: boolean;
+}
+
+export interface XtreamContent {
+    id: number;
+    category_id: number;
+    title: string;
+    rating: string;
+    added: string;
+    poster_url: string;
+    backdrop_url?: string | null;
+    epg_channel_id?: string | null;
+    tv_archive?: number | null;
+    tv_archive_duration?: number | null;
+    direct_source?: string | null;
+    xtream_id: number;
+    type: string;
+    added_at?: string;
+    viewed_at?: string;
+    position?: number | null;
+}
+
+export interface XtreamPlaylist {
+    id: string;
+    name: string;
+    serverUrl: string;
+    username: string;
+    password: string;
+    type: string;
+}
+
+type XtreamDatabasePlaylistUpdate = {
+    name?: string;
+    username?: string;
+    password?: string;
+    serverUrl?: string;
+    lastUpdated?: string;
+};
+
+type XtreamContentStream =
+    | {
+          category_id: string | number;
+          rating?: string | number;
+          rating_imdb?: string;
+          last_modified?: string;
+          added?: string;
+          stream_icon?: string;
+          poster?: string;
+          cover?: string;
+          name?: string;
+          title?: string;
+          epg_channel_id?: string;
+          tv_archive?: string | number;
+          tv_archive_duration?: string | number;
+          direct_source?: string;
+          series_id?: string | number;
+          stream_id?: string | number;
+      }
+    | Record<string, unknown>;
+
+export interface GlobalSearchResult extends XtreamContent {
+    playlist_id: string;
+    playlist_name: string;
+}
+
+export interface GlobalRecentItem extends XtreamContent {
+    playlist_id: string;
+    playlist_name: string;
+    viewed_at: string;
+}
+
+export interface GlobalFavoriteItem extends XtreamContent {
+    playlist_id: string;
+    playlist_name: string;
+    added_at: string;
+}
+
+export interface DbOperationEvent {
+    operationId?: string;
+    operation: string;
+    playlistId?: string;
+    status: 'started' | 'progress' | 'completed' | 'cancelled' | 'error';
+    phase?: string;
+    current?: number;
+    total?: number;
+    increment?: number;
+    error?: string;
+}
+
+export interface DbOperationOptions {
+    operationId?: string;
+    onEvent?: (event: DbOperationEvent) => void;
+}
+
+export type XtreamImportStatus =
+    | 'idle'
+    | 'importing'
+    | 'completed'
+    | 'cancelled'
+    | 'failed';
+
+export function isDbAbortError(error: unknown): boolean {
+    return error instanceof Error && error.name === 'AbortError';
+}
+
+export type GlobalRecentlyAddedKind = 'all' | 'vod' | 'series';
+
+export type GlobalRecentlyAddedPlaylistType =
+    | 'xtream'
+    | 'stalker'
+    | 'm3u-file'
+    | 'm3u-text'
+    | 'm3u-url';
+
+export interface GlobalRecentlyAddedItem extends XtreamContent {
+    playlist_id: string;
+    playlist_name: string;
+    added_at: string;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DatabaseService {
+    private buildXtreamImportStateKey(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): string {
+        return `xtream-import-status:${playlistId}:${type}`;
+    }
+
+    createOperationId(prefix = 'db-op'): string {
+        return (
+            globalThis.crypto?.randomUUID?.() ??
+            `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`
+        );
+    }
+
+    supportsDbOperationEvents(): boolean {
+        return typeof window.electron.onDbOperationEvent === 'function';
+    }
+
+    supportsDbOperationCancellation(): boolean {
+        return typeof window.electron.dbCancelOperation === 'function';
+    }
+
+    async cancelOperation(operationId: string): Promise<boolean> {
+        if (!operationId || !this.supportsDbOperationCancellation()) {
+            return false;
+        }
+
+        try {
+            const result = await window.electron.dbCancelOperation(operationId);
+            return result.success;
+        } catch (error) {
+            console.error('Error cancelling DB operation:', error);
+            return false;
+        }
+    }
+
+    private subscribeToOperation(
+        operationId: string,
+        operation: string,
+        onEvent?: (event: DbOperationEvent) => void,
+        onProgress?: (count: number) => void
+    ): (() => void) | undefined {
+        if (!onEvent && !onProgress) {
+            return undefined;
+        }
+
+        if (window.electron.onDbOperationEvent) {
+            return window.electron.onDbOperationEvent(
+                (event: DbOperationEvent) => {
+                    if (
+                        event.operationId !== operationId ||
+                        event.operation !== operation
+                    ) {
+                        return;
+                    }
+
+                    onEvent?.(event);
+
+                    if (event.status === 'progress') {
+                        onProgress?.(event.increment ?? event.current ?? 0);
+                    }
+                }
+            );
+        }
+
+        if (onProgress && operation === 'save-content') {
+            window.electron.onDbSaveContentProgress(onProgress);
+            return () => window.electron.removeDbSaveContentProgress();
+        }
+
+        return undefined;
+    }
+
+    private async runWithOperationEvents<TResult>(
+        prefix: string,
+        operation: string,
+        execute: (operationId: string) => Promise<TResult>,
+        options?: DbOperationOptions,
+        onProgress?: (count: number) => void
+    ): Promise<TResult> {
+        const operationId =
+            options?.operationId ?? this.createOperationId(prefix);
+        const unsubscribe = this.subscribeToOperation(
+            operationId,
+            operation,
+            options?.onEvent,
+            onProgress
+        );
+
+        try {
+            return await execute(operationId);
+        } finally {
+            unsubscribe?.();
+        }
+    }
+
+    /**
+     * Delete a playlist and all its related data
+     */
+    async deletePlaylist(
+        playlistId: string,
+        options?: DbOperationOptions
+    ): Promise<boolean> {
+        try {
+            await this.runWithOperationEvents(
+                'db-delete-playlist',
+                'delete-playlist',
+                (operationId) =>
+                    window.electron.dbDeletePlaylist(playlistId, operationId),
+                options
+            );
+            return true;
+        } catch (error) {
+            if (!isDbAbortError(error)) {
+                console.error('Error deleting playlist:', error);
+            }
+            return false;
+        }
+    }
+
+    /**
+     * Delete all content and categories for an Xtream playlist (for refresh).
+     * Keeps the playlist entry but removes all imported data.
+     */
+    async deleteXtreamPlaylistContent(
+        playlistId: string,
+        options?: DbOperationOptions
+    ): Promise<{
+        success: boolean;
+        favorites: XtreamBackupFavoriteItem[];
+        recentlyViewed: XtreamBackupRecentlyViewedItem[];
+        hiddenCategories: XtreamBackupHiddenCategory[];
+    }> {
+        return this.runWithOperationEvents(
+            'db-delete-xtream-content',
+            'delete-xtream-content',
+            (operationId) =>
+                window.electron.dbDeleteXtreamContent(playlistId, operationId),
+            options
+        );
+    }
+
+    /**
+     * Restore favorites and recently viewed items after Xtream refresh
+     */
+    async restoreXtreamUserData(
+        playlistId: string,
+        favorites: XtreamBackupFavoriteItem[],
+        recentlyViewed: XtreamBackupRecentlyViewedItem[],
+        options?: DbOperationOptions
+    ): Promise<void> {
+        await this.runWithOperationEvents(
+            'db-restore-xtream-user-data',
+            'restore-xtream-user-data',
+            (operationId) =>
+                window.electron.dbRestoreXtreamUserData(
+                    playlistId,
+                    favorites,
+                    recentlyViewed,
+                    operationId
+                ),
+            options
+        );
+    }
+
+    async deleteAllPlaylists(options?: DbOperationOptions): Promise<boolean> {
+        try {
+            await this.runWithOperationEvents(
+                'db-delete-all-playlists',
+                'delete-all-playlists',
+                (operationId) =>
+                    window.electron.dbDeleteAllPlaylists(operationId),
+                options
+            );
+            return true;
+        } catch (error) {
+            if (!isDbAbortError(error)) {
+                console.error('Error deleting all playlists:', error);
+            }
+            return false;
+        }
+    }
+
+    /**
+     * Update playlist basic info
+     */
+    async updateXtreamPlaylist(
+        playlist: Pick<XtreamPlaylist, 'id' | 'name'>
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbUpdatePlaylist(playlist.id, {
+                name: playlist.name,
+            });
+            return true;
+        } catch (error) {
+            console.error('Error updating playlist:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Update playlist details including credentials
+     */
+    async updateXtreamPlaylistDetails(playlist: {
+        id: string;
+        title?: string;
+        username?: string;
+        password?: string;
+        serverUrl?: string;
+        updateDate?: number;
+    }): Promise<boolean> {
+        try {
+            const updates: XtreamDatabasePlaylistUpdate = {};
+            if (playlist.title) updates.name = playlist.title;
+            if (playlist.username) updates.username = playlist.username;
+            if (playlist.password) updates.password = playlist.password;
+            if (playlist.serverUrl) updates.serverUrl = playlist.serverUrl;
+            if (playlist.updateDate !== undefined)
+                updates.lastUpdated = new Date(
+                    playlist.updateDate
+                ).toISOString();
+
+            await window.electron.dbUpdatePlaylist(playlist.id, updates);
+            return true;
+        } catch (error) {
+            console.error('Error updating playlist details:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Check if categories exist
+     */
+    async hasXtreamCategories(
+        playlistId: string,
+        type: 'live' | 'movies' | 'series'
+    ): Promise<boolean> {
+        return await window.electron.dbHasCategories(playlistId, type);
+    }
+
+    /**
+     * Get categories for a playlist
+     */
+    async getXtreamCategories(
+        playlistId: string,
+        type: 'live' | 'movies' | 'series'
+    ): Promise<XCategoryFromDb[]> {
+        return await window.electron.dbGetCategories(playlistId, type);
+    }
+
+    /**
+     * Save categories in bulk
+     * Optionally accepts hidden category xtreamIds to restore visibility preferences
+     */
+    async saveXtreamCategories(
+        playlistId: string,
+        categories: XtreamCategory[],
+        type: 'live' | 'movies' | 'series',
+        hiddenCategoryXtreamIds?: number[]
+    ): Promise<void> {
+        await window.electron.dbSaveCategories(
+            playlistId,
+            categories,
+            type,
+            hiddenCategoryXtreamIds
+        );
+    }
+
+    /**
+     * Get all categories for a playlist (including hidden, for management dialog)
+     */
+    async getAllXtreamCategories(
+        playlistId: string,
+        type: 'live' | 'movies' | 'series'
+    ): Promise<XCategoryFromDb[]> {
+        return await window.electron.dbGetAllCategories(playlistId, type);
+    }
+
+    /**
+     * Update category visibility (show/hide categories)
+     */
+    async updateCategoryVisibility(
+        categoryIds: number[],
+        hidden: boolean
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbUpdateCategoryVisibility(
+                categoryIds,
+                hidden
+            );
+            return true;
+        } catch (error) {
+            console.error('Error updating category visibility:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Check if content exists
+     */
+    async hasXtreamContent(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<boolean> {
+        return await window.electron.dbHasContent(playlistId, type);
+    }
+
+    /**
+     * Get content for a playlist
+     */
+    async getXtreamContent(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<XtreamContent[]> {
+        return await window.electron.dbGetContent(playlistId, type);
+    }
+
+    /**
+     * Save content in bulk
+     */
+    async saveXtreamContent(
+        playlistId: string,
+        streams: XtreamContentStream[],
+        type: 'live' | 'movie' | 'series',
+        onProgress?: (count: number) => void,
+        options?: DbOperationOptions
+    ): Promise<number> {
+        try {
+            const result = await this.runWithOperationEvents(
+                'db-save-content',
+                'save-content',
+                (operationId) =>
+                    window.electron.dbSaveContent(
+                        playlistId,
+                        streams,
+                        type,
+                        operationId
+                    ),
+                options,
+                onProgress
+            );
+            return (result as { count: number }).count;
+        } catch (error) {
+            if (!isDbAbortError(error)) {
+                console.error('Error saving Xtream content:', error);
+            }
+            throw error;
+        }
+    }
+
+    async clearXtreamImportCache(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbClearXtreamImportCache(playlistId, type);
+            return true;
+        } catch (error) {
+            console.error('Error clearing Xtream import cache:', error);
+            return false;
+        }
+    }
+
+    async getAppState(key: string): Promise<string | null> {
+        try {
+            return await window.electron.dbGetAppState(key);
+        } catch (error) {
+            console.error('Error getting app state:', error);
+            return null;
+        }
+    }
+
+    async setAppState(key: string, value: string): Promise<boolean> {
+        try {
+            await window.electron.dbSetAppState(key, value);
+            return true;
+        } catch (error) {
+            console.error('Error setting app state:', error);
+            return false;
+        }
+    }
+
+    async getXtreamImportStatus(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series'
+    ): Promise<XtreamImportStatus> {
+        const value = await this.getAppState(
+            this.buildXtreamImportStateKey(playlistId, type)
+        );
+
+        switch (value) {
+            case 'importing':
+            case 'completed':
+            case 'cancelled':
+            case 'failed':
+            case 'idle':
+                return value;
+            default:
+                return 'idle';
+        }
+    }
+
+    async setXtreamImportStatus(
+        playlistId: string,
+        type: 'live' | 'movie' | 'series',
+        status: XtreamImportStatus
+    ): Promise<boolean> {
+        return this.setAppState(
+            this.buildXtreamImportStateKey(playlistId, type),
+            status
+        );
+    }
+
+    /**
+     * Search content within a playlist
+     */
+    async searchXtreamContent(
+        playlistId: string,
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ): Promise<XtreamContent[]> {
+        return await window.electron.dbSearchContent(
+            playlistId,
+            searchTerm,
+            types,
+            excludeHidden
+        );
+    }
+
+    /**
+     * Global search across all playlists
+     */
+    async globalSearchContent(
+        searchTerm: string,
+        types: string[],
+        excludeHidden?: boolean
+    ): Promise<GlobalSearchResult[]> {
+        return await window.electron.dbGlobalSearch(
+            searchTerm,
+            types,
+            excludeHidden
+        );
+    }
+
+    /**
+     * Get recently added VOD and series items across all Xtream playlists.
+     * When `playlistType` is supplied, the LIMIT window is applied only to
+     * rows from playlists of that type, so Xtream items cannot be squeezed
+     * out by newer M3U/Stalker content.
+     */
+    async getGlobalRecentlyAdded(
+        kind: GlobalRecentlyAddedKind,
+        limit = 200,
+        playlistType?: GlobalRecentlyAddedPlaylistType
+    ): Promise<GlobalRecentlyAddedItem[]> {
+        try {
+            const items = await window.electron.dbGetGlobalRecentlyAdded(
+                kind,
+                limit,
+                playlistType
+            );
+            return items || [];
+        } catch (error) {
+            console.error('Error getting global recently added items:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Get recently viewed items
+     */
+    async getGlobalRecentlyViewed(): Promise<GlobalRecentItem[]> {
+        try {
+            const items = await window.electron.dbGetRecentlyViewed();
+            return items || [];
+        } catch (error) {
+            console.error('Error getting recently viewed:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Get global favorites across all playlists
+     */
+    async getGlobalFavorites(): Promise<GlobalFavoriteItem[]> {
+        try {
+            const items = await window.electron.dbGetGlobalFavorites();
+            return items || [];
+        } catch (error) {
+            console.error('Error getting global favorites:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Get global favorites across all playlists (all content types)
+     */
+    async getAllGlobalFavorites(): Promise<GlobalFavoriteItem[]> {
+        try {
+            const items = await window.electron.dbGetAllGlobalFavorites();
+            return items || [];
+        } catch (error) {
+            console.error('Error getting all global favorites:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Clear recently viewed items
+     */
+    async clearGlobalRecentlyViewed(): Promise<void> {
+        try {
+            await window.electron.dbClearRecentlyViewed();
+        } catch (error) {
+            console.error('Error clearing recently viewed:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Get playlist by ID
+     */
+    async getPlaylistById(playlistId: string): Promise<XtreamPlaylist | null> {
+        return await window.electron.dbGetPlaylist(playlistId);
+    }
+
+    /**
+     * Create a new playlist
+     */
+    async createPlaylist(playlist: PlaylistMeta): Promise<void> {
+        await window.electron.dbCreatePlaylist({
+            id: playlist._id,
+            name: playlist.title,
+            serverUrl: playlist.serverUrl,
+            username: playlist.username,
+            password: playlist.password,
+            type: 'xtream',
+        });
+    }
+
+    /**
+     * Add content to favorites.
+     * @param backdropUrl optionally persisted to `content.backdrop_url` when
+     * the row doesn't already have one. Lets the dashboard hero surface a
+     * cinematic backdrop without a separate round-trip.
+     */
+    async addToFavorites(
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbAddFavorite(
+                contentId,
+                playlistId,
+                backdropUrl
+            );
+            return true;
+        } catch (error) {
+            console.error('Error adding to favorites:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Remove content from favorites
+     */
+    async removeFromFavorites(
+        contentId: number,
+        playlistId: string
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbRemoveFavorite(contentId, playlistId);
+            return true;
+        } catch (error) {
+            console.error('Error removing from favorites:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Check if content is favorited
+     */
+    async isFavorite(contentId: number, playlistId: string): Promise<boolean> {
+        try {
+            return await window.electron.dbIsFavorite(contentId, playlistId);
+        } catch (error) {
+            console.error('Error checking favorite:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Get all favorites for a playlist
+     */
+    async getFavorites(playlistId: string): Promise<XtreamContent[]> {
+        try {
+            return await window.electron.dbGetFavorites(playlistId);
+        } catch (error) {
+            console.error('Error getting favorites:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Get recently viewed items for a specific playlist
+     */
+    async getRecentItems(playlistId: string): Promise<XtreamContent[]> {
+        try {
+            return await window.electron.dbGetRecentItems(playlistId);
+        } catch (error) {
+            console.error('Error getting recent items:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Add item to recently viewed. See `addToFavorites` for `backdropUrl`.
+     */
+    async addRecentItem(
+        contentId: number,
+        playlistId: string,
+        backdropUrl?: string
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbAddRecentItem(
+                contentId,
+                playlistId,
+                backdropUrl
+            );
+            return true;
+        } catch (error) {
+            console.error('Error adding recent item:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Persist a backdrop URL onto an Xtream content row without touching
+     * recently viewed ordering or timestamps.
+     */
+    async setContentBackdropIfMissing(
+        contentId: number,
+        backdropUrl?: string
+    ): Promise<boolean> {
+        const normalizedBackdropUrl = backdropUrl?.trim();
+        if (!normalizedBackdropUrl) {
+            return true;
+        }
+
+        if (!window.electron?.dbSetContentBackdropIfMissing) {
+            return true;
+        }
+
+        try {
+            await window.electron.dbSetContentBackdropIfMissing(
+                contentId,
+                normalizedBackdropUrl
+            );
+            return true;
+        } catch (error) {
+            console.error('Error backfilling content backdrop:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Clear recently viewed for a specific playlist
+     */
+    async clearPlaylistRecentItems(playlistId: string): Promise<boolean> {
+        try {
+            await window.electron.dbClearPlaylistRecentItems(playlistId);
+            return true;
+        } catch (error) {
+            console.error('Error clearing playlist recent items:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Remove specific item from recently viewed
+     */
+    async removeRecentItem(
+        contentId: number,
+        playlistId: string
+    ): Promise<boolean> {
+        try {
+            await window.electron.dbRemoveRecentItem(contentId, playlistId);
+            return true;
+        } catch (error) {
+            console.error('Error removing recent item:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Get content by xtream ID
+     */
+    async getContentByXtreamId(
+        xtreamId: number,
+        playlistId: string,
+        contentType?: 'live' | 'movie' | 'series'
+    ): Promise<XtreamContent | null> {
+        try {
+            return await window.electron.dbGetContentByXtreamId(
+                xtreamId,
+                playlistId,
+                contentType
+            );
+        } catch (error) {
+            console.error('Error getting content by xtream ID:', error);
+            return null;
+        }
+    }
+}
diff --git a/libs/services/src/lib/downloads.service.ts b/libs/services/src/lib/downloads.service.ts
new file mode 100644
index 0000000..992c3a4
--- /dev/null
+++ b/libs/services/src/lib/downloads.service.ts
@@ -0,0 +1,424 @@
+import { computed, inject, Injectable, OnDestroy, signal } from '@angular/core';
+import { SettingsStore } from './settings-store.service';
+
+export type DownloadStatus =
+    | 'queued'
+    | 'downloading'
+    | 'completed'
+    | 'failed'
+    | 'canceled';
+
+export interface DownloadItem {
+    id: number;
+    playlistId: string;
+    xtreamId: number;
+    contentType: 'vod' | 'episode';
+    seriesXtreamId?: number;
+    seasonNumber?: number;
+    episodeNumber?: number;
+    title: string;
+    url: string;
+    fileName?: string;
+    filePath?: string;
+    posterUrl?: string;
+    status: DownloadStatus;
+    bytesDownloaded?: number;
+    totalBytes?: number;
+    errorMessage?: string;
+    createdAt?: string;
+    updatedAt?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class DownloadsService implements OnDestroy {
+    private readonly settingsStore = inject(SettingsStore);
+    private unsubscribe?: () => void;
+
+    /** Signal for the list of downloads */
+    readonly downloads = signal<DownloadItem[]>([]);
+
+    /** Whether the download feature is available (Electron only) */
+    readonly isAvailable = computed(() => !!window.electron?.downloadsGetList);
+
+    /** Whether there are any downloads */
+    readonly hasDownloads = computed(() => this.downloads().length > 0);
+
+    /** Active downloads count */
+    readonly activeCount = computed(
+        () =>
+            this.downloads().filter(
+                (d) => d.status === 'queued' || d.status === 'downloading'
+            ).length
+    );
+
+    /** Completed downloads count */
+    readonly completedCount = computed(
+        () => this.downloads().filter((d) => d.status === 'completed').length
+    );
+
+    /** Failed downloads count */
+    readonly failedCount = computed(
+        () =>
+            this.downloads().filter(
+                (d) => d.status === 'failed' || d.status === 'canceled'
+            ).length
+    );
+
+    /** Current download folder */
+    readonly downloadFolder = signal<string>('');
+
+    constructor() {
+        this.init();
+    }
+
+    private async init() {
+        if (!this.isAvailable()) {
+            return;
+        }
+
+        // Load initial download list
+        await this.loadDownloads();
+
+        // Load download folder
+        await this.loadDownloadFolder();
+
+        // Subscribe to download updates
+        this.unsubscribe = window.electron.onDownloadsUpdate(() => {
+            this.loadDownloads();
+        });
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe?.();
+    }
+
+    /**
+     * Load downloads from the backend
+     */
+    async loadDownloads(playlistId?: string): Promise<void> {
+        if (!this.isAvailable()) return;
+
+        try {
+            const list = await window.electron.downloadsGetList(playlistId);
+            this.downloads.set(list);
+        } catch (error) {
+            console.error('[DownloadsService] Error loading downloads:', error);
+        }
+    }
+
+    /**
+     * Load or resolve download folder
+     */
+    async loadDownloadFolder(): Promise<string> {
+        if (!this.isAvailable()) return '';
+
+        // First check settings
+        const storedFolder = this.settingsStore.getDownloadFolder?.();
+        if (storedFolder) {
+            this.downloadFolder.set(storedFolder);
+            return storedFolder;
+        }
+
+        // Fall back to default
+        try {
+            const defaultFolder =
+                await window.electron.downloadsGetDefaultFolder();
+            this.downloadFolder.set(defaultFolder);
+            return defaultFolder;
+        } catch (error) {
+            console.error(
+                '[DownloadsService] Error getting default folder:',
+                error
+            );
+            return '';
+        }
+    }
+
+    /**
+     * Start a new download
+     */
+    async startDownload(data: {
+        playlistId: string;
+        xtreamId: number;
+        contentType: 'vod' | 'episode';
+        title: string;
+        url: string;
+        posterUrl?: string;
+        headers?: { userAgent?: string; referer?: string; origin?: string };
+        seriesXtreamId?: number;
+        seasonNumber?: number;
+        episodeNumber?: number;
+        // Playlist info for auto-creation if needed (Stalker playlists)
+        playlistName?: string;
+        playlistType?: 'xtream' | 'stalker' | 'm3u-file' | 'm3u-text' | 'm3u-url';
+        serverUrl?: string;
+        portalUrl?: string;
+        macAddress?: string;
+    }): Promise<{ success: boolean; id?: number; error?: string }> {
+        if (!this.isAvailable()) {
+            return { success: false, error: 'Downloads not available' };
+        }
+
+        const folder = await this.loadDownloadFolder();
+        if (!folder) {
+            return { success: false, error: 'No download folder configured' };
+        }
+
+        try {
+            const result = await window.electron.downloadsStart({
+                ...data,
+                downloadFolder: folder,
+            });
+            return result;
+        } catch (error) {
+            console.error('[DownloadsService] Error starting download:', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }
+
+    /**
+     * Cancel a download
+     */
+    async cancelDownload(
+        downloadId: number
+    ): Promise<{ success: boolean; error?: string }> {
+        if (!this.isAvailable()) {
+            return { success: false, error: 'Downloads not available' };
+        }
+
+        try {
+            return await window.electron.downloadsCancel(downloadId);
+        } catch (error) {
+            console.error(
+                '[DownloadsService] Error canceling download:',
+                error
+            );
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }
+
+    /**
+     * Retry a failed download
+     */
+    async retryDownload(
+        downloadId: number
+    ): Promise<{ success: boolean; error?: string }> {
+        if (!this.isAvailable()) {
+            return { success: false, error: 'Downloads not available' };
+        }
+
+        const folder = await this.loadDownloadFolder();
+        if (!folder) {
+            return { success: false, error: 'No download folder configured' };
+        }
+
+        try {
+            return await window.electron.downloadsRetry(downloadId, folder);
+        } catch (error) {
+            console.error(
+                '[DownloadsService] Error retrying download:',
+                error
+            );
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }
+
+    /**
+     * Remove a download from the list
+     */
+    async removeDownload(
+        downloadId: number
+    ): Promise<{ success: boolean; error?: string }> {
+        if (!this.isAvailable()) {
+            return { success: false, error: 'Downloads not available' };
+        }
+
+        try {
+            return await window.electron.downloadsRemove(downloadId);
+        } catch (error) {
+            console.error(
+                '[DownloadsService] Error removing download:',
+                error
+            );
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }
+
+    /**
+     * Play a downloaded file
+     */
+    async playDownload(
+        filePath: string
+    ): Promise<{ success: boolean; error?: string }> {
+        if (!this.isAvailable()) {
+            return { success: false, error: 'Downloads not available' };
+        }
+
+        try {
+            return await window.electron.downloadsPlayFile(filePath);
+        } catch (error) {
+            console.error('[DownloadsService] Error playing file:', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }
+
+    /**
+     * Reveal file in system file manager
+     */
+    async revealFile(
+        filePath: string
+    ): Promise<{ success: boolean; error?: string }> {
+        if (!this.isAvailable()) {
+            return { success: false, error: 'Downloads not available' };
+        }
+
+        try {
+            return await window.electron.downloadsRevealFile(filePath);
+        } catch (error) {
+            console.error('[DownloadsService] Error revealing file:', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }
+
+    /**
+     * Select a new download folder
+     */
+    async selectFolder(): Promise<string | null> {
+        if (!this.isAvailable()) {
+            return null;
+        }
+
+        try {
+            const folder = await window.electron.downloadsSelectFolder();
+            if (folder) {
+                this.downloadFolder.set(folder);
+                // Save to settings
+                await this.settingsStore.updateSettings({ downloadFolder: folder });
+            }
+            return folder;
+        } catch (error) {
+            console.error(
+                '[DownloadsService] Error selecting folder:',
+                error
+            );
+            return null;
+        }
+    }
+
+    /**
+     * Clear completed/failed downloads
+     */
+    async clearCompleted(
+        playlistId?: string
+    ): Promise<{ success: boolean }> {
+        if (!this.isAvailable()) {
+            return { success: false };
+        }
+
+        try {
+            return await window.electron.downloadsClearCompleted(playlistId);
+        } catch (error) {
+            console.error(
+                '[DownloadsService] Error clearing completed:',
+                error
+            );
+            return { success: false };
+        }
+    }
+
+    /**
+     * Get download progress as percentage
+     */
+    getProgressPercent(item: DownloadItem): number {
+        if (!item.totalBytes || item.totalBytes === 0) {
+            return 0;
+        }
+        return Math.round(
+            ((item.bytesDownloaded || 0) / item.totalBytes) * 100
+        );
+    }
+
+    /**
+     * Get download item by xtreamId and playlistId
+     */
+    getDownloadByContent(
+        xtreamId: number,
+        playlistId: string,
+        contentType: 'vod' | 'episode'
+    ): DownloadItem | undefined {
+        return this.downloads().find(
+            (d) =>
+                d.xtreamId === xtreamId &&
+                d.playlistId === playlistId &&
+                d.contentType === contentType
+        );
+    }
+
+    /**
+     * Check if content is downloaded (completed status)
+     */
+    isDownloaded(
+        xtreamId: number,
+        playlistId: string,
+        contentType: 'vod' | 'episode'
+    ): boolean {
+        const download = this.getDownloadByContent(xtreamId, playlistId, contentType);
+        return download?.status === 'completed' && !!download.filePath;
+    }
+
+    /**
+     * Check if content is currently downloading or queued
+     */
+    isDownloading(
+        xtreamId: number,
+        playlistId: string,
+        contentType: 'vod' | 'episode'
+    ): boolean {
+        const download = this.getDownloadByContent(xtreamId, playlistId, contentType);
+        return download?.status === 'downloading' || download?.status === 'queued';
+    }
+
+    /**
+     * Get the file path for a downloaded content item
+     */
+    getDownloadedFilePath(
+        xtreamId: number,
+        playlistId: string,
+        contentType: 'vod' | 'episode'
+    ): string | undefined {
+        const download = this.getDownloadByContent(xtreamId, playlistId, contentType);
+        if (download?.status === 'completed') {
+            return download.filePath;
+        }
+        return undefined;
+    }
+
+    /**
+     * Format bytes to human readable string
+     */
+    formatBytes(bytes: number): string {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+}
diff --git a/libs/services/src/lib/playback-position.service.ts b/libs/services/src/lib/playback-position.service.ts
new file mode 100644
index 0000000..7df46b5
--- /dev/null
+++ b/libs/services/src/lib/playback-position.service.ts
@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+import { PlaybackPositionData } from 'shared-interfaces';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PlaybackPositionService {
+    async savePlaybackPosition(
+        playlistId: string,
+        data: PlaybackPositionData
+    ): Promise<void> {
+        try {
+            await window.electron.dbSavePlaybackPosition(playlistId, data);
+        } catch (error) {
+            console.error('Error saving playback position:', error);
+        }
+    }
+
+    async getPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<PlaybackPositionData | null> {
+        try {
+            return await window.electron.dbGetPlaybackPosition(
+                playlistId,
+                contentXtreamId,
+                contentType
+            );
+        } catch (error) {
+            console.error('Error getting playback position:', error);
+            return null;
+        }
+    }
+
+    async getSeriesPlaybackPositions(
+        playlistId: string,
+        seriesXtreamId: number
+    ): Promise<PlaybackPositionData[]> {
+        try {
+            return await window.electron.dbGetSeriesPlaybackPositions(
+                playlistId,
+                seriesXtreamId
+            );
+        } catch (error) {
+            console.error('Error getting series playback positions:', error);
+            return [];
+        }
+    }
+
+    async getRecentPlaybackPositions(
+        playlistId: string,
+        limit?: number
+    ): Promise<PlaybackPositionData[]> {
+        try {
+            return await window.electron.dbGetRecentPlaybackPositions(
+                playlistId,
+                limit
+            );
+        } catch (error) {
+            console.error('Error getting recent playback positions:', error);
+            return [];
+        }
+    }
+
+    async getAllPlaybackPositions(
+        playlistId: string
+    ): Promise<PlaybackPositionData[]> {
+        try {
+            return await window.electron.dbGetAllPlaybackPositions(playlistId);
+        } catch (error) {
+            console.error('Error getting all playback positions:', error);
+            return [];
+        }
+    }
+
+    async clearAllPlaybackPositions(playlistId: string): Promise<void> {
+        try {
+            await window.electron.dbClearAllPlaybackPositions(playlistId);
+        } catch (error) {
+            console.error('Error clearing all playback positions:', error);
+        }
+    }
+
+    async clearPlaybackPosition(
+        playlistId: string,
+        contentXtreamId: number,
+        contentType: 'vod' | 'episode'
+    ): Promise<void> {
+        try {
+            await window.electron.dbClearPlaybackPosition(
+                playlistId,
+                contentXtreamId,
+                contentType
+            );
+        } catch (error) {
+            console.error('Error clearing playback position:', error);
+        }
+    }
+}
diff --git a/libs/services/src/lib/playlist-backup.service.spec.ts b/libs/services/src/lib/playlist-backup.service.spec.ts
new file mode 100644
index 0000000..712beff
--- /dev/null
+++ b/libs/services/src/lib/playlist-backup.service.spec.ts
@@ -0,0 +1,279 @@
+import { of } from 'rxjs';
+import {
+    Playlist,
+    PlaylistBackupManifestV1,
+    PLAYLIST_BACKUP_KIND,
+    PLAYLIST_BACKUP_VERSION,
+} from 'shared-interfaces';
+import {
+    PlaylistBackupError,
+    PlaylistBackupService,
+} from './playlist-backup.service';
+
+describe('PlaylistBackupService', () => {
+    function createService(overrides: Record<string, unknown> = {}) {
+        const service = Object.create(
+            PlaylistBackupService.prototype
+        ) as PlaylistBackupService;
+
+        Object.assign(service as object, {
+            playlistsService: {
+                addPlaylist: jest.fn((playlist: Playlist) => of(playlist)),
+                getAllData: jest.fn(() => of([])),
+                getRawPlaylistById: jest.fn(() => of('#EXTM3U')),
+                handlePlaylistParsing: jest.fn(
+                    (_uploadType: string, rawM3u: string, title: string) => ({
+                        _id: 'generated-id',
+                        title,
+                        filename: title,
+                        count: rawM3u.split('\n').filter(Boolean).length,
+                        playlist: {
+                            header: { raw: '#EXTM3U' },
+                            items: [],
+                        },
+                        importDate: '2026-04-21T00:00:00.000Z',
+                        lastUsage: '2026-04-21T00:00:00.000Z',
+                        favorites: [],
+                        autoRefresh: false,
+                    })
+                ),
+            },
+            settingsStore: {
+                getSettings: jest.fn(() => ({ epgUrl: [] })),
+                updateSettings: jest.fn().mockResolvedValue(undefined),
+            },
+            databaseService: {
+                getAllXtreamCategories: jest.fn().mockResolvedValue([]),
+                getFavorites: jest.fn().mockResolvedValue([]),
+                getRecentItems: jest.fn().mockResolvedValue([]),
+                getXtreamImportStatus: jest.fn().mockResolvedValue('idle'),
+                hasXtreamCategories: jest.fn().mockResolvedValue(false),
+                hasXtreamContent: jest.fn().mockResolvedValue(false),
+                restoreXtreamUserData: jest.fn().mockResolvedValue(undefined),
+                updateCategoryVisibility: jest.fn().mockResolvedValue(true),
+            },
+            playbackPositionService: {
+                getAllPlaybackPositions: jest.fn().mockResolvedValue([]),
+                clearAllPlaybackPositions: jest
+                    .fn()
+                    .mockResolvedValue(undefined),
+                savePlaybackPosition: jest.fn().mockResolvedValue(undefined),
+            },
+            pendingRestoreService: {
+                set: jest.fn(),
+                clear: jest.fn(),
+            },
+            ...overrides,
+        });
+
+        return service;
+    }
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        localStorage.clear();
+    });
+
+    it('exports self-contained M3U data and strips Stalker session fields', async () => {
+        const playlistsService = {
+            addPlaylist: jest.fn((playlist: Playlist) => of(playlist)),
+            getAllData: jest.fn(() =>
+                of([
+                    {
+                        _id: 'm3u-file-1',
+                        title: 'Local Playlist',
+                        count: 2,
+                        importDate: '2026-04-21T00:00:00.000Z',
+                        lastUsage: '2026-04-21T00:00:00.000Z',
+                        autoRefresh: true,
+                        filePath: '/tmp/playlist.m3u',
+                        favorites: ['https://example.com/stream-1'],
+                        recentlyViewed: [],
+                    },
+                    {
+                        _id: 'stalker-1',
+                        title: 'Stalker Portal',
+                        count: 0,
+                        importDate: '2026-04-21T00:00:00.000Z',
+                        lastUsage: '2026-04-21T00:00:00.000Z',
+                        autoRefresh: false,
+                        portalUrl:
+                            'http://example.com/stalker_portal/server/load.php',
+                        macAddress: '00:1A:79:AA:BB:CC',
+                        stalkerToken: 'session-token',
+                        stalkerAccountInfo: {
+                            login: 'demo',
+                        },
+                    },
+                ] as Playlist[])
+            ),
+            getRawPlaylistById: jest.fn((playlistId: string) =>
+                of(
+                    playlistId === 'm3u-file-1'
+                        ? '#EXTM3U\n#EXTINF:-1,One\nhttps://example.com/stream-1'
+                        : '#EXTM3U'
+                )
+            ),
+            handlePlaylistParsing: jest.fn(),
+        };
+        const settingsStore = {
+            getSettings: jest.fn(() => ({
+                epgUrl: ['https://example.com/epg.xml'],
+            })),
+            updateSettings: jest.fn().mockResolvedValue(undefined),
+        };
+        const service = createService({
+            playlistsService,
+            settingsStore,
+        });
+
+        const backup = await service.exportBackup();
+
+        expect(backup.defaultFileName).toEqual(
+            expect.stringMatching(
+                /^iptvnator-playlist-backup-\d{4}-\d{2}-\d{2}\.json$/
+            )
+        );
+        expect(backup.manifest.settings).toEqual({
+            epgUrls: ['https://example.com/epg.xml'],
+        });
+        expect(backup.manifest.playlists).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    portalType: 'm3u',
+                    source: expect.objectContaining({
+                        kind: 'file',
+                        rawM3u: '#EXTM3U\n#EXTINF:-1,One\nhttps://example.com/stream-1',
+                        filePathHint: '/tmp/playlist.m3u',
+                    }),
+                }),
+                expect.objectContaining({
+                    portalType: 'stalker',
+                    connection: expect.objectContaining({
+                        portalUrl:
+                            'http://example.com/stalker_portal/server/load.php',
+                        macAddress: '00:1A:79:AA:BB:CC',
+                    }),
+                }),
+            ])
+        );
+        expect(JSON.stringify(backup.manifest)).not.toContain('session-token');
+        expect(JSON.stringify(backup.manifest)).not.toContain('demo');
+    });
+
+    it('rejects legacy raw playlist arrays on import', async () => {
+        const service = createService();
+
+        await expect(service.importBackup('[]')).rejects.toBeInstanceOf(
+            PlaylistBackupError
+        );
+    });
+
+    it('merges onto an existing M3U playlist by normalized URL and restores backup-first EPG urls', async () => {
+        const existingPlaylist: Playlist = {
+            _id: 'existing-playlist-id',
+            title: 'Original Title',
+            count: 1,
+            importDate: '2026-04-20T00:00:00.000Z',
+            lastUsage: '2026-04-20T00:00:00.000Z',
+            autoRefresh: false,
+            url: 'https://example.com/playlist.m3u',
+            favorites: ['https://example.com/original'],
+            recentlyViewed: [],
+            hiddenGroupTitles: ['News'],
+        } as Playlist;
+        const playlistsService = {
+            addPlaylist: jest.fn((playlist: Playlist) => of(playlist)),
+            getAllData: jest.fn(() => of([existingPlaylist])),
+            getRawPlaylistById: jest.fn(() => of('#EXTM3U')),
+            handlePlaylistParsing: jest.fn(
+                (_uploadType: string, rawM3u: string, title: string) => ({
+                    _id: 'generated-id',
+                    title,
+                    filename: title,
+                    count: rawM3u.split('\n').filter(Boolean).length,
+                    playlist: {
+                        header: { raw: '#EXTM3U' },
+                        items: [],
+                    },
+                    importDate: '2026-04-21T00:00:00.000Z',
+                    lastUsage: '2026-04-21T00:00:00.000Z',
+                    favorites: [],
+                    autoRefresh: false,
+                })
+            ),
+        };
+        const settingsStore = {
+            getSettings: jest.fn(() => ({
+                epgUrl: ['https://existing.example.com/epg.xml'],
+            })),
+            updateSettings: jest.fn().mockResolvedValue(undefined),
+        };
+        const service = createService({
+            playlistsService,
+            settingsStore,
+        });
+
+        const manifest: PlaylistBackupManifestV1 = {
+            kind: PLAYLIST_BACKUP_KIND,
+            version: PLAYLIST_BACKUP_VERSION,
+            exportedAt: '2026-04-21T00:00:00.000Z',
+            includeSecrets: true,
+            settings: {
+                epgUrls: [
+                    'https://backup.example.com/epg.xml',
+                    'https://existing.example.com/epg.xml',
+                ],
+            },
+            playlists: [
+                {
+                    portalType: 'm3u',
+                    exportedId: 'backup-playlist-id',
+                    title: 'Imported Title',
+                    autoRefresh: true,
+                    position: 3,
+                    source: {
+                        kind: 'url',
+                        rawM3u: '#EXTM3U\n#EXTINF:-1,Backup\nhttps://example.com/stream-1',
+                        url: 'https://example.com/playlist.m3u/',
+                        userAgent: 'BackupAgent/1.0',
+                    },
+                    userState: {
+                        favorites: ['https://example.com/stream-1'],
+                        recentlyViewed: [],
+                        hiddenGroupTitles: ['Sports'],
+                    },
+                },
+            ],
+        };
+
+        const summary = await service.importBackup(JSON.stringify(manifest));
+
+        expect(summary).toEqual({
+            imported: 0,
+            merged: 1,
+            skipped: 0,
+            failed: 0,
+            errors: [],
+        });
+        expect(settingsStore.updateSettings).toHaveBeenCalledWith({
+            epgUrl: [
+                'https://backup.example.com/epg.xml',
+                'https://existing.example.com/epg.xml',
+            ],
+        });
+        expect(playlistsService.addPlaylist).toHaveBeenCalledWith(
+            expect.objectContaining({
+                _id: 'existing-playlist-id',
+                title: 'Imported Title',
+                autoRefresh: true,
+                position: 3,
+                url: 'https://example.com/playlist.m3u/',
+                userAgent: 'BackupAgent/1.0',
+                filePath: undefined,
+                favorites: ['https://example.com/stream-1'],
+                hiddenGroupTitles: ['Sports'],
+            })
+        );
+    });
+});
diff --git a/libs/services/src/lib/playlist-backup.service.ts b/libs/services/src/lib/playlist-backup.service.ts
new file mode 100644
index 0000000..5219181
--- /dev/null
+++ b/libs/services/src/lib/playlist-backup.service.ts
@@ -0,0 +1,1028 @@
+import { inject, Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { v4 as uuidv4 } from 'uuid';
+import { PlaylistsService } from './playlists.service';
+import { SettingsStore } from './settings-store.service';
+import { DatabaseService } from './database-electron.service';
+import { PlaybackPositionService } from './playback-position.service';
+import { XtreamPendingRestoreService } from './xtream-pending-restore.service';
+import {
+    isM3uRecentlyViewedItem,
+    M3uPlaylistBackupEntry,
+    M3uRecentlyViewedItem,
+    Playlist,
+    PlaylistBackupEntry,
+    PlaylistBackupManifestV1,
+    PlaylistBackupSettings,
+    PLAYLIST_BACKUP_KIND,
+    PLAYLIST_BACKUP_VERSION,
+    StalkerPlaylistBackupEntry,
+    StalkerPortalItem,
+    XtreamBackupCategoryType,
+    XtreamBackupContentType,
+    XtreamPlaylistBackupEntry,
+    XtreamPendingRestoreState,
+} from 'shared-interfaces';
+
+export interface PlaylistBackupExportPayload {
+    defaultFileName: string;
+    json: string;
+    manifest: PlaylistBackupManifestV1;
+}
+
+export interface PlaylistBackupImportSummary {
+    imported: number;
+    merged: number;
+    skipped: number;
+    failed: number;
+    errors: string[];
+}
+
+export class PlaylistBackupError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = 'PlaylistBackupError';
+    }
+}
+
+type PlaylistPortalType = 'm3u' | 'xtream' | 'stalker';
+
+type XtreamContentType = XtreamBackupContentType;
+type XtreamCategoryType = XtreamBackupCategoryType;
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PlaylistBackupService {
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly databaseService = inject(DatabaseService);
+    private readonly playbackPositionService = inject(PlaybackPositionService);
+    private readonly pendingRestoreService = inject(
+        XtreamPendingRestoreService
+    );
+
+    async exportBackup(): Promise<PlaylistBackupExportPayload> {
+        const playlists = await firstValueFrom(
+            this.playlistsService.getAllData()
+        );
+        const settings = this.buildSettingsPayload();
+        const playlistEntries = await Promise.all(
+            playlists.map((playlist) => this.buildPlaylistEntry(playlist))
+        );
+        const exportedAt = new Date().toISOString();
+        const manifest: PlaylistBackupManifestV1 = {
+            kind: PLAYLIST_BACKUP_KIND,
+            version: PLAYLIST_BACKUP_VERSION,
+            exportedAt,
+            includeSecrets: true,
+            ...(settings ? { settings } : {}),
+            playlists: playlistEntries,
+        };
+
+        return {
+            defaultFileName: `iptvnator-playlist-backup-${exportedAt.slice(
+                0,
+                10
+            )}.json`,
+            json: JSON.stringify(manifest, null, 2),
+            manifest,
+        };
+    }
+
+    async importBackup(json: string): Promise<PlaylistBackupImportSummary> {
+        const manifest = this.parseManifest(json);
+        const existingPlaylists = await firstValueFrom(
+            this.playlistsService.getAllData()
+        );
+        const existingIds = new Set(
+            existingPlaylists.map((playlist) => playlist._id)
+        );
+        const fingerprintMap =
+            await this.buildExistingFingerprintMap(existingPlaylists);
+        const seenBackupFingerprints = new Set<string>();
+        const summary: PlaylistBackupImportSummary = {
+            imported: 0,
+            merged: 0,
+            skipped: 0,
+            failed: 0,
+            errors: [],
+        };
+
+        await this.restoreSettings(manifest.settings);
+
+        for (const entry of manifest.playlists) {
+            const entryLabel =
+                entry.title || entry.exportedId || entry.portalType;
+
+            try {
+                const fingerprint = this.getEntryFingerprint(entry);
+
+                if (seenBackupFingerprints.has(fingerprint)) {
+                    summary.skipped += 1;
+                    summary.errors.push(
+                        `${entryLabel}: duplicate backup entry skipped`
+                    );
+                    continue;
+                }
+
+                seenBackupFingerprints.add(fingerprint);
+
+                const existingMatch = fingerprintMap.get(fingerprint);
+                const targetId = this.resolveTargetPlaylistId(
+                    entry,
+                    existingMatch?._id,
+                    existingIds
+                );
+                const isMerge = existingMatch != null;
+                const nextPlaylist = await this.buildImportedPlaylist(
+                    entry,
+                    targetId,
+                    existingMatch ?? null
+                );
+
+                await firstValueFrom(
+                    this.playlistsService.addPlaylist(nextPlaylist)
+                );
+
+                if (entry.portalType === 'xtream') {
+                    await this.restoreXtreamEntry(targetId, entry);
+                }
+
+                if (isMerge) {
+                    summary.merged += 1;
+                } else {
+                    summary.imported += 1;
+                    existingIds.add(targetId);
+                }
+            } catch (error) {
+                summary.failed += 1;
+                summary.errors.push(
+                    `${entryLabel}: ${this.getErrorMessage(error)}`
+                );
+            }
+        }
+
+        return summary;
+    }
+
+    private async buildPlaylistEntry(
+        playlist: Playlist
+    ): Promise<PlaylistBackupEntry> {
+        const portalType = this.getPlaylistPortalType(playlist);
+
+        switch (portalType) {
+            case 'xtream':
+                return this.buildXtreamEntry(playlist);
+            case 'stalker':
+                return this.buildStalkerEntry(playlist);
+            case 'm3u':
+            default:
+                return this.buildM3uEntry(playlist);
+        }
+    }
+
+    private async buildM3uEntry(
+        playlist: Playlist
+    ): Promise<M3uPlaylistBackupEntry> {
+        const rawM3u = await firstValueFrom(
+            this.playlistsService.getRawPlaylistById(playlist._id)
+        );
+        const favorites = Array.isArray(playlist.favorites)
+            ? playlist.favorites.filter(
+                  (item): item is string =>
+                      typeof item === 'string' && item.trim().length > 0
+              )
+            : [];
+        const recentlyViewed = Array.isArray(playlist.recentlyViewed)
+            ? playlist.recentlyViewed.filter(isM3uRecentlyViewedItem)
+            : [];
+
+        return {
+            portalType: 'm3u',
+            exportedId: playlist._id,
+            title: playlist.title,
+            autoRefresh: Boolean(playlist.autoRefresh),
+            position: playlist.position,
+            source: {
+                kind: this.resolveM3uSourceKind(playlist),
+                rawM3u,
+                ...(playlist.url ? { url: playlist.url } : {}),
+                ...(playlist.userAgent
+                    ? { userAgent: playlist.userAgent }
+                    : {}),
+                ...(playlist.referrer ? { referrer: playlist.referrer } : {}),
+                ...(playlist.origin ? { origin: playlist.origin } : {}),
+                ...(playlist.filePath
+                    ? { filePathHint: playlist.filePath }
+                    : {}),
+            },
+            userState: {
+                favorites: this.uniqueStrings(favorites),
+                recentlyViewed: recentlyViewed.map((item) => ({ ...item })),
+                hiddenGroupTitles: this.uniqueStrings(
+                    Array.isArray(playlist.hiddenGroupTitles)
+                        ? playlist.hiddenGroupTitles
+                        : []
+                ),
+            },
+        };
+    }
+
+    private async buildXtreamEntry(
+        playlist: Playlist
+    ): Promise<XtreamPlaylistBackupEntry> {
+        if (!this.hasElectronApi()) {
+            return {
+                portalType: 'xtream',
+                exportedId: playlist._id,
+                title: playlist.title,
+                autoRefresh: Boolean(playlist.autoRefresh),
+                position: playlist.position,
+                connection: {
+                    serverUrl: playlist.serverUrl ?? '',
+                    username: playlist.username ?? '',
+                    ...(playlist.password
+                        ? { password: playlist.password }
+                        : {}),
+                },
+                userState: {
+                    hiddenCategories: [],
+                    favorites: [],
+                    recentlyViewed: [],
+                    playbackPositions: [],
+                },
+            };
+        }
+
+        const [
+            liveCategories,
+            movieCategories,
+            seriesCategories,
+            favorites,
+            recent,
+            playbackPositions,
+        ] = await Promise.all([
+            this.databaseService.getAllXtreamCategories(playlist._id, 'live'),
+            this.databaseService.getAllXtreamCategories(playlist._id, 'movies'),
+            this.databaseService.getAllXtreamCategories(playlist._id, 'series'),
+            this.databaseService.getFavorites(playlist._id),
+            this.databaseService.getRecentItems(playlist._id),
+            this.playbackPositionService.getAllPlaybackPositions(playlist._id),
+        ]);
+
+        return {
+            portalType: 'xtream',
+            exportedId: playlist._id,
+            title: playlist.title,
+            autoRefresh: Boolean(playlist.autoRefresh),
+            position: playlist.position,
+            connection: {
+                serverUrl: playlist.serverUrl ?? '',
+                username: playlist.username ?? '',
+                ...(playlist.password ? { password: playlist.password } : {}),
+            },
+            userState: {
+                hiddenCategories: [
+                    ...this.mapHiddenCategories(liveCategories, 'live'),
+                    ...this.mapHiddenCategories(movieCategories, 'movies'),
+                    ...this.mapHiddenCategories(seriesCategories, 'series'),
+                ],
+                favorites: favorites.map((item) => ({
+                    xtreamId: item.xtream_id,
+                    contentType: item.type as XtreamContentType,
+                    ...(item.added_at ? { addedAt: item.added_at } : {}),
+                    ...(item.position !== undefined
+                        ? { position: item.position }
+                        : {}),
+                })),
+                recentlyViewed: recent.map((item) => ({
+                    xtreamId: item.xtream_id,
+                    contentType: item.type as XtreamContentType,
+                    viewedAt: item.viewed_at ?? new Date().toISOString(),
+                })),
+                playbackPositions: playbackPositions.map((item) => ({
+                    ...item,
+                })),
+            },
+        };
+    }
+
+    private buildStalkerEntry(playlist: Playlist): StalkerPlaylistBackupEntry {
+        return {
+            portalType: 'stalker',
+            exportedId: playlist._id,
+            title: playlist.title,
+            autoRefresh: Boolean(playlist.autoRefresh),
+            position: playlist.position,
+            connection: {
+                portalUrl: playlist.portalUrl ?? playlist.url ?? '',
+                macAddress: playlist.macAddress ?? '',
+                ...(playlist.isFullStalkerPortal !== undefined
+                    ? {
+                          isFullStalkerPortal: playlist.isFullStalkerPortal,
+                      }
+                    : {}),
+                ...(playlist.username ? { username: playlist.username } : {}),
+                ...(playlist.password ? { password: playlist.password } : {}),
+                ...(playlist.userAgent
+                    ? { userAgent: playlist.userAgent }
+                    : {}),
+                ...(playlist.referrer ? { referrer: playlist.referrer } : {}),
+                ...(playlist.origin ? { origin: playlist.origin } : {}),
+                ...(playlist.stalkerSerialNumber
+                    ? { stalkerSerialNumber: playlist.stalkerSerialNumber }
+                    : {}),
+                ...(playlist.stalkerDeviceId1
+                    ? { stalkerDeviceId1: playlist.stalkerDeviceId1 }
+                    : {}),
+                ...(playlist.stalkerDeviceId2
+                    ? { stalkerDeviceId2: playlist.stalkerDeviceId2 }
+                    : {}),
+                ...(playlist.stalkerSignature1
+                    ? { stalkerSignature1: playlist.stalkerSignature1 }
+                    : {}),
+                ...(playlist.stalkerSignature2
+                    ? { stalkerSignature2: playlist.stalkerSignature2 }
+                    : {}),
+            },
+            userState: {
+                favorites: this.extractStalkerItems(playlist.favorites),
+                recentlyViewed: this.extractStalkerItems(
+                    playlist.recentlyViewed
+                ),
+            },
+        };
+    }
+
+    private buildSettingsPayload(): PlaylistBackupSettings | undefined {
+        const epgUrls = this.normalizeSettingsUrls(
+            this.settingsStore.getSettings().epgUrl ?? []
+        );
+
+        if (epgUrls.length === 0) {
+            return undefined;
+        }
+
+        return { epgUrls };
+    }
+
+    private parseManifest(json: string): PlaylistBackupManifestV1 {
+        let parsed: unknown;
+
+        try {
+            parsed = JSON.parse(json);
+        } catch (error) {
+            throw new PlaylistBackupError(
+                `Invalid backup JSON: ${this.getErrorMessage(error)}`
+            );
+        }
+
+        if (Array.isArray(parsed)) {
+            throw new PlaylistBackupError(
+                'Legacy playlist JSON exports are not supported. Create a versioned backup first.'
+            );
+        }
+
+        if (!parsed || typeof parsed !== 'object') {
+            throw new PlaylistBackupError('Backup file must be a JSON object.');
+        }
+
+        const manifest = parsed as Partial<PlaylistBackupManifestV1>;
+
+        if (manifest.kind !== PLAYLIST_BACKUP_KIND) {
+            throw new PlaylistBackupError('Unsupported backup file format.');
+        }
+
+        if (manifest.version !== PLAYLIST_BACKUP_VERSION) {
+            throw new PlaylistBackupError(
+                `Unsupported backup version: ${manifest.version ?? 'unknown'}`
+            );
+        }
+
+        if (!Array.isArray(manifest.playlists)) {
+            throw new PlaylistBackupError(
+                'Backup file must contain playlists.'
+            );
+        }
+
+        for (const entry of manifest.playlists) {
+            this.validateEntry(entry);
+        }
+
+        return manifest as PlaylistBackupManifestV1;
+    }
+
+    private validateEntry(entry: PlaylistBackupEntry): void {
+        if (!entry || typeof entry !== 'object') {
+            throw new PlaylistBackupError(
+                'Backup contains an invalid playlist entry.'
+            );
+        }
+
+        if (!entry.exportedId || !entry.title) {
+            throw new PlaylistBackupError(
+                'Backup contains a playlist entry without required metadata.'
+            );
+        }
+
+        switch (entry.portalType) {
+            case 'm3u':
+                if (!entry.source?.rawM3u) {
+                    throw new PlaylistBackupError(
+                        `M3U backup "${entry.title}" is missing raw playlist data.`
+                    );
+                }
+                break;
+            case 'xtream':
+                if (
+                    !entry.connection?.serverUrl ||
+                    !entry.connection?.username
+                ) {
+                    throw new PlaylistBackupError(
+                        `Xtream backup "${entry.title}" is missing connection metadata.`
+                    );
+                }
+                break;
+            case 'stalker':
+                if (
+                    !entry.connection?.portalUrl ||
+                    !entry.connection?.macAddress
+                ) {
+                    throw new PlaylistBackupError(
+                        `Stalker backup "${entry.title}" is missing connection metadata.`
+                    );
+                }
+                break;
+            default:
+                throw new PlaylistBackupError(
+                    `Unsupported backup playlist type: ${(entry as { portalType?: string }).portalType ?? 'unknown'}`
+                );
+        }
+    }
+
+    private async buildExistingFingerprintMap(
+        playlists: Playlist[]
+    ): Promise<Map<string, Playlist>> {
+        const map = new Map<string, Playlist>();
+
+        for (const playlist of playlists) {
+            const portalType = this.getPlaylistPortalType(playlist);
+
+            if (portalType === 'm3u' && !playlist.url) {
+                const rawM3u = await firstValueFrom(
+                    this.playlistsService.getRawPlaylistById(playlist._id)
+                );
+                map.set(this.buildM3uRawFingerprint(rawM3u), playlist);
+                continue;
+            }
+
+            map.set(this.getPlaylistFingerprint(playlist), playlist);
+        }
+
+        return map;
+    }
+
+    private getPlaylistFingerprint(playlist: Playlist): string {
+        const portalType = this.getPlaylistPortalType(playlist);
+
+        switch (portalType) {
+            case 'xtream':
+                return [
+                    'xtream',
+                    this.normalizeUrlIdentity(playlist.serverUrl ?? ''),
+                    this.normalizeIdentityValue(playlist.username ?? ''),
+                ].join('|');
+            case 'stalker':
+                return [
+                    'stalker',
+                    this.normalizeUrlIdentity(
+                        playlist.portalUrl ?? playlist.url ?? ''
+                    ),
+                    this.normalizeIdentityValue(
+                        playlist.macAddress ?? '',
+                        true
+                    ),
+                ].join('|');
+            case 'm3u':
+            default:
+                if (playlist.url) {
+                    return this.buildM3uUrlFingerprint(playlist.url);
+                }
+
+                throw new PlaylistBackupError(
+                    `Unable to fingerprint M3U playlist "${playlist.title}".`
+                );
+        }
+    }
+
+    private getEntryFingerprint(entry: PlaylistBackupEntry): string {
+        switch (entry.portalType) {
+            case 'xtream':
+                return [
+                    'xtream',
+                    this.normalizeUrlIdentity(entry.connection.serverUrl),
+                    this.normalizeIdentityValue(entry.connection.username),
+                ].join('|');
+            case 'stalker':
+                return [
+                    'stalker',
+                    this.normalizeUrlIdentity(entry.connection.portalUrl),
+                    this.normalizeIdentityValue(
+                        entry.connection.macAddress,
+                        true
+                    ),
+                ].join('|');
+            case 'm3u':
+            default:
+                if (entry.source.url) {
+                    return this.buildM3uUrlFingerprint(entry.source.url);
+                }
+
+                return this.buildM3uRawFingerprint(entry.source.rawM3u);
+        }
+    }
+
+    private buildM3uUrlFingerprint(url: string): string {
+        return ['m3u', 'url', this.normalizeUrlIdentity(url)].join('|');
+    }
+
+    private buildM3uRawFingerprint(rawM3u: string): string {
+        return [
+            'm3u',
+            'raw',
+            this.hashString(this.canonicalizeM3u(rawM3u)),
+        ].join('|');
+    }
+
+    private resolveTargetPlaylistId(
+        entry: PlaylistBackupEntry,
+        matchedId: string | undefined,
+        existingIds: Set<string>
+    ): string {
+        if (matchedId) {
+            return matchedId;
+        }
+
+        if (entry.exportedId && !existingIds.has(entry.exportedId)) {
+            return entry.exportedId;
+        }
+
+        let nextId = uuidv4();
+
+        while (existingIds.has(nextId)) {
+            nextId = uuidv4();
+        }
+
+        return nextId;
+    }
+
+    private async buildImportedPlaylist(
+        entry: PlaylistBackupEntry,
+        playlistId: string,
+        existing: Playlist | null
+    ): Promise<Playlist> {
+        switch (entry.portalType) {
+            case 'xtream':
+                return this.buildImportedXtreamPlaylist(
+                    entry,
+                    playlistId,
+                    existing
+                );
+            case 'stalker':
+                return this.buildImportedStalkerPlaylist(
+                    entry,
+                    playlistId,
+                    existing
+                );
+            case 'm3u':
+            default:
+                return this.buildImportedM3uPlaylist(
+                    entry,
+                    playlistId,
+                    existing
+                );
+        }
+    }
+
+    private async buildImportedM3uPlaylist(
+        entry: M3uPlaylistBackupEntry,
+        playlistId: string,
+        existing: Playlist | null
+    ): Promise<Playlist> {
+        const parsedPlaylist = this.playlistsService.handlePlaylistParsing(
+            'TEXT',
+            entry.source.rawM3u,
+            entry.title
+        );
+        const now = new Date().toISOString();
+
+        return {
+            ...existing,
+            ...parsedPlaylist,
+            _id: playlistId,
+            title: entry.title,
+            filename: entry.title,
+            importDate: existing?.importDate ?? now,
+            lastUsage: existing?.lastUsage ?? now,
+            autoRefresh: entry.autoRefresh,
+            position: entry.position,
+            favorites: this.uniqueStrings(entry.userState.favorites),
+            recentlyViewed: entry.userState.recentlyViewed.map((item) =>
+                this.normalizeM3uRecentlyViewedItem(item)
+            ),
+            hiddenGroupTitles: this.uniqueStrings(
+                entry.userState.hiddenGroupTitles
+            ),
+            ...(entry.source.url
+                ? { url: entry.source.url }
+                : { url: undefined }),
+            ...(entry.source.userAgent
+                ? { userAgent: entry.source.userAgent }
+                : { userAgent: undefined }),
+            ...(entry.source.referrer
+                ? { referrer: entry.source.referrer }
+                : { referrer: undefined }),
+            ...(entry.source.origin
+                ? { origin: entry.source.origin }
+                : { origin: undefined }),
+            filePath: undefined,
+        };
+    }
+
+    private buildImportedXtreamPlaylist(
+        entry: XtreamPlaylistBackupEntry,
+        playlistId: string,
+        existing: Playlist | null
+    ): Playlist {
+        const now = new Date().toISOString();
+
+        return {
+            ...existing,
+            _id: playlistId,
+            title: entry.title,
+            filename: entry.title,
+            count: existing?.count ?? 0,
+            importDate: existing?.importDate ?? now,
+            lastUsage: existing?.lastUsage ?? now,
+            autoRefresh: entry.autoRefresh,
+            position: entry.position,
+            serverUrl: entry.connection.serverUrl,
+            username: entry.connection.username,
+            password: entry.connection.password,
+            favorites: [],
+            recentlyViewed: [],
+        };
+    }
+
+    private buildImportedStalkerPlaylist(
+        entry: StalkerPlaylistBackupEntry,
+        playlistId: string,
+        existing: Playlist | null
+    ): Playlist {
+        const now = new Date().toISOString();
+
+        return {
+            ...existing,
+            _id: playlistId,
+            title: entry.title,
+            filename: entry.title,
+            count: existing?.count ?? 0,
+            importDate: existing?.importDate ?? now,
+            lastUsage: existing?.lastUsage ?? now,
+            autoRefresh: entry.autoRefresh,
+            position: entry.position,
+            portalUrl: entry.connection.portalUrl,
+            url: entry.connection.portalUrl,
+            macAddress: entry.connection.macAddress,
+            username: entry.connection.username,
+            password: entry.connection.password,
+            userAgent: entry.connection.userAgent,
+            referrer: entry.connection.referrer,
+            origin: entry.connection.origin,
+            isFullStalkerPortal: entry.connection.isFullStalkerPortal,
+            favorites: entry.userState.favorites.map((item) => ({ ...item })),
+            recentlyViewed: entry.userState.recentlyViewed.map((item) => ({
+                ...item,
+            })),
+            stalkerSerialNumber: entry.connection.stalkerSerialNumber,
+            stalkerDeviceId1: entry.connection.stalkerDeviceId1,
+            stalkerDeviceId2: entry.connection.stalkerDeviceId2,
+            stalkerSignature1: entry.connection.stalkerSignature1,
+            stalkerSignature2: entry.connection.stalkerSignature2,
+            stalkerToken: undefined,
+            stalkerAccountInfo: undefined,
+        };
+    }
+
+    private async restoreSettings(
+        settings: PlaylistBackupSettings | undefined
+    ): Promise<void> {
+        if (!settings?.epgUrls) {
+            return;
+        }
+
+        const existingSettings = this.settingsStore.getSettings();
+        const mergedEpgUrls = this.mergeUrls(
+            settings.epgUrls,
+            existingSettings.epgUrl ?? []
+        );
+
+        await this.settingsStore.updateSettings({
+            epgUrl: mergedEpgUrls,
+        });
+    }
+
+    private async restoreXtreamEntry(
+        playlistId: string,
+        entry: XtreamPlaylistBackupEntry
+    ): Promise<void> {
+        const restoreState: XtreamPendingRestoreState = {
+            hiddenCategories: entry.userState.hiddenCategories.map((item) => ({
+                ...item,
+            })),
+            favorites: entry.userState.favorites.map((item) => ({ ...item })),
+            recentlyViewed: entry.userState.recentlyViewed.map((item) => ({
+                ...item,
+            })),
+            playbackPositions: entry.userState.playbackPositions.map(
+                (item) => ({
+                    ...item,
+                })
+            ),
+        };
+
+        this.pendingRestoreService.set(playlistId, restoreState);
+
+        if (!this.hasElectronApi()) {
+            return;
+        }
+
+        if (!(await this.hasCompletedOfflineCache(playlistId))) {
+            return;
+        }
+
+        await this.applyXtreamRestoreState(playlistId, restoreState);
+        this.pendingRestoreService.clear(playlistId);
+    }
+
+    private async hasCompletedOfflineCache(
+        playlistId: string
+    ): Promise<boolean> {
+        const checks = await Promise.all(
+            [
+                {
+                    categoryType: 'live' as const,
+                    contentType: 'live' as const,
+                },
+                {
+                    categoryType: 'movies' as const,
+                    contentType: 'movie' as const,
+                },
+                {
+                    categoryType: 'series' as const,
+                    contentType: 'series' as const,
+                },
+            ].map(async ({ categoryType, contentType }) => {
+                const [importStatus, hasCategories, hasContent] =
+                    await Promise.all([
+                        this.databaseService.getXtreamImportStatus(
+                            playlistId,
+                            contentType
+                        ),
+                        this.databaseService.hasXtreamCategories(
+                            playlistId,
+                            categoryType
+                        ),
+                        this.databaseService.hasXtreamContent(
+                            playlistId,
+                            contentType
+                        ),
+                    ]);
+
+                return (
+                    importStatus === 'completed' && hasCategories && hasContent
+                );
+            })
+        );
+
+        return checks.every(Boolean);
+    }
+
+    private async applyXtreamRestoreState(
+        playlistId: string,
+        state: XtreamPendingRestoreState
+    ): Promise<void> {
+        await this.restoreXtreamCategoryVisibility(playlistId, state);
+        await this.databaseService.restoreXtreamUserData(
+            playlistId,
+            state.favorites,
+            state.recentlyViewed
+        );
+
+        await this.playbackPositionService.clearAllPlaybackPositions(
+            playlistId
+        );
+
+        for (const playbackPosition of state.playbackPositions) {
+            await this.playbackPositionService.savePlaybackPosition(
+                playlistId,
+                playbackPosition
+            );
+        }
+    }
+
+    private async restoreXtreamCategoryVisibility(
+        playlistId: string,
+        state: XtreamPendingRestoreState
+    ): Promise<void> {
+        const categoriesByType = await Promise.all([
+            this.databaseService.getAllXtreamCategories(playlistId, 'live'),
+            this.databaseService.getAllXtreamCategories(playlistId, 'movies'),
+            this.databaseService.getAllXtreamCategories(playlistId, 'series'),
+        ]);
+
+        for (const categories of categoriesByType) {
+            if (categories.length === 0) {
+                continue;
+            }
+
+            await this.databaseService.updateCategoryVisibility(
+                categories.map((category) => category.id),
+                false
+            );
+
+            const hiddenCategoryIds = categories
+                .filter((category) =>
+                    state.hiddenCategories.some(
+                        (hiddenCategory) =>
+                            hiddenCategory.categoryType === category.type &&
+                            hiddenCategory.xtreamId === category.xtream_id
+                    )
+                )
+                .map((category) => category.id);
+
+            if (hiddenCategoryIds.length > 0) {
+                await this.databaseService.updateCategoryVisibility(
+                    hiddenCategoryIds,
+                    true
+                );
+            }
+        }
+    }
+
+    private mapHiddenCategories(
+        categories: Array<{
+            hidden: boolean;
+            xtream_id: number;
+            type: XtreamCategoryType;
+        }>,
+        categoryType: XtreamCategoryType
+    ): XtreamPendingRestoreState['hiddenCategories'] {
+        return categories
+            .filter((category) => category.hidden)
+            .map((category) => ({
+                categoryType,
+                xtreamId: category.xtream_id,
+            }));
+    }
+
+    private getPlaylistPortalType(playlist: Playlist): PlaylistPortalType {
+        if (playlist.serverUrl && playlist.username) {
+            return 'xtream';
+        }
+
+        if (playlist.macAddress && (playlist.portalUrl || playlist.url)) {
+            return 'stalker';
+        }
+
+        return 'm3u';
+    }
+
+    private resolveM3uSourceKind(playlist: Playlist): 'url' | 'file' | 'text' {
+        if (playlist.url) {
+            return 'url';
+        }
+
+        if (playlist.filePath) {
+            return 'file';
+        }
+
+        return 'text';
+    }
+
+    private extractStalkerItems(items: unknown): StalkerPortalItem[] {
+        if (!Array.isArray(items)) {
+            return [];
+        }
+
+        return items.filter(
+            (item): item is StalkerPortalItem =>
+                !!item && typeof item === 'object' && !Array.isArray(item)
+        );
+    }
+
+    private normalizeM3uRecentlyViewedItem(
+        item: M3uRecentlyViewedItem
+    ): M3uRecentlyViewedItem {
+        return {
+            ...item,
+            source: 'm3u',
+            id: String(item.id ?? item.url),
+            url: String(item.url),
+            title: String(item.title ?? ''),
+            category_id: 'live',
+            added_at: item.added_at ?? new Date().toISOString(),
+        };
+    }
+
+    private normalizeSettingsUrls(urls: string[]): string[] {
+        return this.uniqueStrings(
+            urls
+                .map((url) => String(url ?? '').trim())
+                .filter((url) => url.length > 0)
+        );
+    }
+
+    private mergeUrls(primary: string[], secondary: string[]): string[] {
+        const merged = new Map<string, string>();
+
+        for (const url of [...primary, ...secondary]) {
+            const normalized = this.normalizeUrlIdentity(url);
+
+            if (!normalized || merged.has(normalized)) {
+                continue;
+            }
+
+            merged.set(normalized, url.trim());
+        }
+
+        return [...merged.values()];
+    }
+
+    private uniqueStrings(values: string[]): string[] {
+        const seen = new Set<string>();
+        const result: string[] = [];
+
+        for (const value of values) {
+            const normalized = value.trim();
+
+            if (!normalized || seen.has(normalized)) {
+                continue;
+            }
+
+            seen.add(normalized);
+            result.push(normalized);
+        }
+
+        return result;
+    }
+
+    private normalizeUrlIdentity(value: string): string {
+        const trimmed = value.trim();
+
+        if (!trimmed) {
+            return '';
+        }
+
+        try {
+            const url = new URL(trimmed);
+            const pathname =
+                url.pathname === '/'
+                    ? '/'
+                    : url.pathname.replace(/\/+$/, '') || '/';
+
+            return `${url.protocol.toLowerCase()}//${url.host.toLowerCase()}${pathname}${url.search}${url.hash}`;
+        } catch {
+            return trimmed.toLowerCase();
+        }
+    }
+
+    private normalizeIdentityValue(value: string, toLowerCase = false): string {
+        const trimmed = value.trim();
+        return toLowerCase ? trimmed.toLowerCase() : trimmed;
+    }
+
+    private canonicalizeM3u(rawM3u: string): string {
+        return rawM3u.replace(/\r\n?/g, '\n').trim();
+    }
+
+    private hashString(value: string): string {
+        let hash = 0x811c9dc5;
+
+        for (let index = 0; index < value.length; index += 1) {
+            hash ^= value.charCodeAt(index);
+            hash = Math.imul(hash, 0x01000193);
+        }
+
+        return (hash >>> 0).toString(16);
+    }
+
+    private getErrorMessage(error: unknown): string {
+        return error instanceof Error ? error.message : String(error);
+    }
+
+    private hasElectronApi(): boolean {
+        return !!(window as Window & { electron?: unknown }).electron;
+    }
+}
diff --git a/libs/services/src/lib/playlist-refresh.service.ts b/libs/services/src/lib/playlist-refresh.service.ts
new file mode 100644
index 0000000..a38f102
--- /dev/null
+++ b/libs/services/src/lib/playlist-refresh.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import {
+    Playlist,
+    PlaylistRefreshEvent,
+    PlaylistRefreshPayload,
+} from 'shared-interfaces';
+
+export interface PlaylistRefreshOptions {
+    onEvent?: (event: PlaylistRefreshEvent) => void;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PlaylistRefreshService {
+    async refreshPlaylist(
+        payload: PlaylistRefreshPayload,
+        options?: PlaylistRefreshOptions
+    ): Promise<Playlist> {
+        if (!window.electron?.refreshPlaylist) {
+            throw new Error('Playlist refresh is only available in Electron');
+        }
+
+        const unsubscribe = window.electron.onPlaylistRefreshEvent?.((event) => {
+            if (event.operationId !== payload.operationId) {
+                return;
+            }
+
+            options?.onEvent?.(event);
+        });
+
+        try {
+            return await window.electron.refreshPlaylist(payload);
+        } finally {
+            unsubscribe?.();
+        }
+    }
+
+    async cancelRefresh(operationId: string): Promise<boolean> {
+        if (!window.electron?.cancelPlaylistRefresh || !operationId) {
+            return false;
+        }
+
+        try {
+            const result = await window.electron.cancelPlaylistRefresh(operationId);
+            return result.success;
+        } catch (error) {
+            console.error('Failed to cancel playlist refresh:', error);
+            return false;
+        }
+    }
+}
diff --git a/libs/services/src/lib/playlists.service.spec.ts b/libs/services/src/lib/playlists.service.spec.ts
new file mode 100644
index 0000000..6633269
--- /dev/null
+++ b/libs/services/src/lib/playlists.service.spec.ts
@@ -0,0 +1,252 @@
+import { firstValueFrom, of } from 'rxjs';
+import { DbStores, Playlist, PlaylistMeta } from 'shared-interfaces';
+import { PlaylistsService } from './playlists.service';
+
+const SQLITE_PLAYLIST_MIGRATION_FLAG = 'm3u-playlists-indexeddb-to-sqlite-v1';
+const STALKER_PLAYLIST_METADATA_MIGRATION_FLAG =
+    'm3u-playlists-stalker-metadata-v1';
+
+describe('PlaylistsService', () => {
+    const testWindow = window as unknown as { electron?: unknown };
+    const originalElectron = testWindow.electron;
+
+    afterEach(() => {
+        testWindow.electron = originalElectron;
+        localStorage.removeItem(STALKER_PLAYLIST_METADATA_MIGRATION_FLAG);
+        jest.restoreAllMocks();
+    });
+
+    function createService(overrides: Record<string, unknown> = {}) {
+        const service = Object.create(PlaylistsService.prototype) as PlaylistsService;
+
+        Object.assign(service as object, {
+            dbService: {
+                clear: jest.fn(() => of(undefined)),
+                getAll: jest.fn(() => of([])),
+                getByID: jest.fn(() => of(undefined)),
+                update: jest.fn(() => of(undefined)),
+                ...overrides,
+            },
+            snackBar: {
+                open: jest.fn(),
+            },
+            translateService: {
+                instant: jest.fn((key: string) => key),
+            },
+            electronMigrationPromise: null,
+            indexedDbMigrationPromise: null,
+        });
+
+        return service;
+    }
+
+    it('migrates legacy Stalker portal flags in SQLite before returning playlists', async () => {
+        let storedPlaylists: Playlist[] = [
+            {
+                _id: 'stalker-1',
+                title: 'Legacy Stalker',
+                count: 0,
+                importDate: new Date('2026-03-28T00:00:00.000Z').toISOString(),
+                lastUsage: new Date('2026-03-28T00:00:00.000Z').toISOString(),
+                autoRefresh: false,
+                macAddress: '00:1A:79:AA:BB:CC',
+                portalUrl: 'http://example.com/stalker_portal/c/',
+            } as Playlist,
+        ];
+        const appState = new Map<string, string>([
+            [SQLITE_PLAYLIST_MIGRATION_FLAG, '1'],
+        ]);
+        const electron = {
+            dbGetAppPlaylists: jest.fn(async () => storedPlaylists),
+            dbGetAppState: jest.fn(
+                async (key: string) => appState.get(key) ?? null
+            ),
+            dbSetAppState: jest.fn(async (key: string, value: string) => {
+                appState.set(key, value);
+            }),
+            dbUpsertAppPlaylist: jest.fn(),
+            dbUpsertAppPlaylists: jest.fn(async (playlists: Playlist[]) => {
+                const updates = new Map(
+                    playlists.map((playlist) => [playlist._id, playlist])
+                );
+                storedPlaylists = storedPlaylists.map(
+                    (playlist) => updates.get(playlist._id) ?? playlist
+                );
+            }),
+        };
+        testWindow.electron = electron;
+
+        const service = createService();
+
+        await expect(firstValueFrom(service.getAllPlaylists())).resolves.toEqual([
+            expect.objectContaining({
+                _id: 'stalker-1',
+                isFullStalkerPortal: true,
+            }),
+        ]);
+
+        expect(electron.dbUpsertAppPlaylists).toHaveBeenCalledWith([
+            expect.objectContaining({
+                _id: 'stalker-1',
+                isFullStalkerPortal: true,
+            }),
+        ]);
+        expect(appState.get(STALKER_PLAYLIST_METADATA_MIGRATION_FLAG)).toBe('1');
+    });
+
+    it('does not rerun the SQLite Stalker metadata migration after the flag is set', async () => {
+        const electron = {
+            dbGetAppPlaylists: jest.fn(async () => []),
+            dbGetAppState: jest.fn(async (key: string) => {
+                if (
+                    key === SQLITE_PLAYLIST_MIGRATION_FLAG ||
+                    key === STALKER_PLAYLIST_METADATA_MIGRATION_FLAG
+                ) {
+                    return '1';
+                }
+
+                return null;
+            }),
+            dbSetAppState: jest.fn(),
+            dbUpsertAppPlaylist: jest.fn(),
+            dbUpsertAppPlaylists: jest.fn(),
+        };
+        testWindow.electron = electron;
+
+        const service = createService();
+
+        await firstValueFrom(service.getAllPlaylists());
+        await firstValueFrom(service.getAllPlaylists());
+
+        expect(electron.dbUpsertAppPlaylists).not.toHaveBeenCalled();
+        expect(electron.dbSetAppState).not.toHaveBeenCalledWith(
+            STALKER_PLAYLIST_METADATA_MIGRATION_FLAG,
+            '1'
+        );
+    });
+
+    it('migrates legacy Stalker portal flags in IndexedDB before returning full playlists', async () => {
+        let storedPlaylists: Playlist[] = [
+            {
+                _id: 'stalker-2',
+                title: 'IndexedDB Stalker',
+                count: 0,
+                importDate: new Date('2026-03-28T00:00:00.000Z').toISOString(),
+                lastUsage: new Date('2026-03-28T00:00:00.000Z').toISOString(),
+                autoRefresh: false,
+                macAddress: '00:1A:79:11:22:33',
+                portalUrl: 'http://example.com/portal/c/',
+            } as Playlist,
+        ];
+        const dbService = {
+            getAll: jest.fn(() => of(storedPlaylists)),
+            update: jest.fn((_storeName: string, playlist: Playlist) => {
+                storedPlaylists = storedPlaylists.map((current) =>
+                    current._id === playlist._id ? playlist : current
+                );
+                return of(playlist);
+            }),
+        };
+        testWindow.electron = undefined;
+
+        const service = createService(dbService);
+
+        await expect(firstValueFrom(service.getAllData())).resolves.toEqual([
+            expect.objectContaining({
+                _id: 'stalker-2',
+                isFullStalkerPortal: false,
+            }),
+        ]);
+
+        expect(dbService.update).toHaveBeenCalledWith(
+            DbStores.Playlists,
+            expect.objectContaining({
+                _id: 'stalker-2',
+                isFullStalkerPortal: false,
+            })
+        );
+        expect(
+            localStorage.getItem(STALKER_PLAYLIST_METADATA_MIGRATION_FLAG)
+        ).toBe('1');
+    });
+
+    it('persists hiddenGroupTitles in playlist meta updates', async () => {
+        const existingPlaylist: Playlist = {
+            _id: 'playlist-1',
+            title: 'Playlist One',
+            count: 2,
+            importDate: new Date('2026-04-11T00:00:00.000Z').toISOString(),
+            lastUsage: new Date('2026-04-11T00:00:00.000Z').toISOString(),
+            autoRefresh: false,
+            hiddenGroupTitles: ['News'],
+        } as Playlist;
+        const dbService = {
+            getAll: jest.fn(() => of([])),
+            getByID: jest.fn(() => of(existingPlaylist)),
+            update: jest.fn((_storeName: string, playlist: Playlist) =>
+                of(playlist)
+            ),
+        };
+        testWindow.electron = undefined;
+
+        const service = createService(dbService);
+
+        await firstValueFrom(
+            service.updatePlaylistMeta({
+                _id: 'playlist-1',
+                hiddenGroupTitles: ['Movies', 'Sports'],
+            } as PlaylistMeta)
+        );
+
+        expect(dbService.update).toHaveBeenCalledWith(
+            DbStores.Playlists,
+            expect.objectContaining({
+                _id: 'playlist-1',
+                hiddenGroupTitles: ['Movies', 'Sports'],
+            })
+        );
+    });
+
+    it('keeps hiddenGroupTitles when refreshing a playlist payload', async () => {
+        const existingPlaylist: Playlist = {
+            _id: 'playlist-2',
+            title: 'Playlist Two',
+            count: 1,
+            importDate: new Date('2026-04-11T00:00:00.000Z').toISOString(),
+            lastUsage: new Date('2026-04-11T00:00:00.000Z').toISOString(),
+            autoRefresh: false,
+            hiddenGroupTitles: ['Radio-de'],
+            playlist: {
+                items: [{ id: 'channel-1' }],
+            },
+        } as Playlist;
+        const dbService = {
+            getAll: jest.fn(() => of([])),
+            getByID: jest.fn(() => of(existingPlaylist)),
+            update: jest.fn((_storeName: string, playlist: Playlist) =>
+                of(playlist)
+            ),
+        };
+        testWindow.electron = undefined;
+
+        const service = createService(dbService);
+
+        await firstValueFrom(
+            service.updatePlaylist('playlist-2', {
+                _id: 'playlist-2',
+                playlist: {
+                    items: [],
+                },
+            } as Playlist)
+        );
+
+        expect(dbService.update).toHaveBeenCalledWith(
+            DbStores.Playlists,
+            expect.objectContaining({
+                _id: 'playlist-2',
+                hiddenGroupTitles: ['Radio-de'],
+                count: 0,
+            })
+        );
+    });
+});
diff --git a/libs/services/src/lib/playlists.service.ts b/libs/services/src/lib/playlists.service.ts
new file mode 100644
index 0000000..47d36af
--- /dev/null
+++ b/libs/services/src/lib/playlists.service.ts
@@ -0,0 +1,1084 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { inject, Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '@ngx-translate/core';
+import { parse } from 'iptv-playlist-parser';
+import {
+    aggregateFavoriteChannels,
+    createFavoritesPlaylist,
+    createPlaylistObject,
+} from 'm3u-utils';
+import { NgxIndexedDBService } from 'ngx-indexed-db';
+import {
+    combineLatest,
+    firstValueFrom,
+    from,
+    map,
+    Observable,
+    of,
+    switchMap,
+} from 'rxjs';
+import {
+    Channel,
+    DbStores,
+    extractStalkerItemId,
+    isM3uRecentlyViewedItem,
+    M3uRecentlyViewedItem,
+    Playlist,
+    PlaylistMeta,
+    PlaylistRecentlyViewedItem,
+    PlaylistUpdateState,
+    StalkerPortalItem,
+    normalizeStalkerDate,
+} from 'shared-interfaces';
+
+const SQLITE_PLAYLIST_MIGRATION_FLAG = 'm3u-playlists-indexeddb-to-sqlite-v1';
+const STALKER_PLAYLIST_METADATA_MIGRATION_FLAG =
+    'm3u-playlists-stalker-metadata-v1';
+
+type PortalFavoriteItem = StalkerPortalItem & {
+    category_id?: string;
+    raw?: string;
+    [key: string]: unknown;
+};
+
+type PlaylistRawItem = {
+    raw?: string;
+};
+
+type PlaylistStorageElectronApi = {
+    dbDeleteAllPlaylists: () => Promise<unknown>;
+    dbDeletePlaylist: (playlistId: string) => Promise<unknown>;
+    dbGetAppPlaylist: (playlistId: string) => Promise<Playlist | null>;
+    dbGetAppPlaylists: () => Promise<Playlist[]>;
+    dbGetAppState: (key: string) => Promise<string | null>;
+    dbSetAppState: (key: string, value: string) => Promise<unknown>;
+    dbUpsertAppPlaylist: (playlist: Playlist) => Promise<unknown>;
+    dbUpsertAppPlaylists: (playlists: Playlist[]) => Promise<unknown>;
+};
+
+type PlaylistStorageWindow = Window & {
+    electron?: PlaylistStorageElectronApi;
+};
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PlaylistsService {
+    private readonly dbService = inject(NgxIndexedDBService);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translateService = inject(TranslateService);
+    private electronMigrationPromise: Promise<void> | null = null;
+    private indexedDbMigrationPromise: Promise<void> | null = null;
+
+    private get electronApi(): PlaylistStorageElectronApi | null {
+        if (typeof window === 'undefined') {
+            return null;
+        }
+
+        return (window as PlaylistStorageWindow).electron ?? null;
+    }
+
+    private get isElectronStorageAvailable(): boolean {
+        const electron = this.electronApi;
+
+        return (
+            !!electron &&
+            typeof electron.dbGetAppPlaylists === 'function' &&
+            typeof electron.dbUpsertAppPlaylist === 'function' &&
+            typeof electron.dbGetAppState === 'function' &&
+            typeof electron.dbSetAppState === 'function'
+        );
+    }
+
+    private runOnSqlite<T>(operation: () => Promise<T>) {
+        return from(
+            this.ensureElectronPlaylistMigrations().then(() => operation())
+        );
+    }
+
+    private runOnIndexedDb<T>(operation: () => Promise<T>) {
+        return from(
+            this.ensureIndexedDbPlaylistMigrations().then(() => operation())
+        );
+    }
+
+    private async ensureElectronPlaylistMigrations(): Promise<void> {
+        if (!this.isElectronStorageAvailable) {
+            return;
+        }
+
+        if (!this.electronMigrationPromise) {
+            this.electronMigrationPromise = (async () => {
+                await this.migrateIndexedDbPlaylistsToSqlite();
+                await this.migrateStalkerPlaylistMetadataInSqlite();
+            })();
+        }
+
+        return this.electronMigrationPromise;
+    }
+
+    private async ensureIndexedDbPlaylistMigrations(): Promise<void> {
+        if (this.isElectronStorageAvailable) {
+            return;
+        }
+
+        if (!this.indexedDbMigrationPromise) {
+            this.indexedDbMigrationPromise =
+                this.migrateStalkerPlaylistMetadataInIndexedDb();
+        }
+
+        return this.indexedDbMigrationPromise;
+    }
+
+    private async migrateIndexedDbPlaylistsToSqlite(): Promise<void> {
+        try {
+            const electron = this.electronApi;
+            if (!electron) {
+                return;
+            }
+
+            const alreadyMigrated = await electron.dbGetAppState(
+                SQLITE_PLAYLIST_MIGRATION_FLAG
+            );
+            if (alreadyMigrated === '1') {
+                return;
+            }
+
+            const indexedDbPlaylists = await firstValueFrom(
+                this.dbService.getAll<Playlist>(DbStores.Playlists)
+            );
+
+            if (indexedDbPlaylists.length > 0) {
+                await electron.dbUpsertAppPlaylists(indexedDbPlaylists);
+                await firstValueFrom(this.dbService.clear(DbStores.Playlists));
+            }
+
+            await electron.dbSetAppState(SQLITE_PLAYLIST_MIGRATION_FLAG, '1');
+        } catch (error) {
+            console.error(
+                'Failed to migrate IndexedDB playlists to SQLite:',
+                error
+            );
+        }
+    }
+
+    private createSqliteFallbackPlaylist(
+        playlist: Partial<Playlist> & { _id?: string; id?: string }
+    ): Playlist {
+        const id = String(playlist._id ?? playlist.id ?? '');
+        return {
+            ...playlist,
+            _id: id,
+            title: playlist.title ?? '',
+            count: Number(playlist.count ?? 0),
+            importDate: playlist.importDate ?? new Date().toISOString(),
+            lastUsage: playlist.lastUsage ?? new Date().toISOString(),
+            favorites: playlist.favorites ?? [],
+            recentlyViewed: playlist.recentlyViewed ?? [],
+            autoRefresh: Boolean(playlist.autoRefresh),
+            playlist: playlist.playlist,
+            url: playlist.url,
+            filePath: playlist.filePath,
+            userAgent: playlist.userAgent,
+            referrer: playlist.referrer,
+            origin: playlist.origin,
+            updateDate: playlist.updateDate,
+            updateState: playlist.updateState,
+            position: playlist.position,
+            serverUrl: playlist.serverUrl,
+            username: playlist.username,
+            password: playlist.password,
+            macAddress: playlist.macAddress,
+            portalUrl: playlist.portalUrl,
+            stalkerSerialNumber: playlist.stalkerSerialNumber,
+            stalkerDeviceId1: playlist.stalkerDeviceId1,
+            stalkerDeviceId2: playlist.stalkerDeviceId2,
+            stalkerSignature1: playlist.stalkerSignature1,
+            stalkerSignature2: playlist.stalkerSignature2,
+            isFullStalkerPortal: playlist.isFullStalkerPortal,
+            stalkerToken: playlist.stalkerToken,
+            stalkerAccountInfo: playlist.stalkerAccountInfo,
+        } as Playlist;
+    }
+
+    private withExplicitLegacyStalkerPortalFlag(playlist: Playlist): Playlist {
+        if (
+            !playlist?.macAddress ||
+            playlist.isFullStalkerPortal !== undefined
+        ) {
+            return playlist;
+        }
+
+        const portalUrl = playlist.portalUrl ?? playlist.url ?? '';
+        const isFullPortal =
+            portalUrl.includes('/stalker_portal') ||
+            portalUrl.includes('/server/load.php');
+
+        return {
+            ...playlist,
+            isFullStalkerPortal: isFullPortal,
+        };
+    }
+
+    private collectStalkerMetadataMigrationUpdates(
+        playlists: Playlist[]
+    ): Playlist[] {
+        return playlists.reduce<Playlist[]>((updates, playlist) => {
+            const migratedPlaylist =
+                this.withExplicitLegacyStalkerPortalFlag(playlist);
+
+            if (migratedPlaylist !== playlist) {
+                updates.push(migratedPlaylist);
+            }
+
+            return updates;
+        }, []);
+    }
+
+    private readIndexedDbMigrationFlag(key: string): string | null {
+        try {
+            const value = localStorage.getItem(key);
+            return value && value.trim().length > 0 ? value : null;
+        } catch {
+            return null;
+        }
+    }
+
+    private writeIndexedDbMigrationFlag(key: string): void {
+        try {
+            localStorage.setItem(key, '1');
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+
+    private async migrateStalkerPlaylistMetadataInSqlite(): Promise<void> {
+        try {
+            const electron = this.electronApi;
+            if (!electron) {
+                return;
+            }
+
+            const alreadyMigrated = await electron.dbGetAppState(
+                STALKER_PLAYLIST_METADATA_MIGRATION_FLAG
+            );
+            if (alreadyMigrated === '1') {
+                return;
+            }
+
+            const storedPlaylists =
+                (await electron.dbGetAppPlaylists()) as Playlist[];
+            const updates =
+                this.collectStalkerMetadataMigrationUpdates(storedPlaylists);
+
+            if (updates.length > 0) {
+                await electron.dbUpsertAppPlaylists(updates);
+            }
+
+            await electron.dbSetAppState(
+                STALKER_PLAYLIST_METADATA_MIGRATION_FLAG,
+                '1'
+            );
+        } catch (error) {
+            console.error(
+                'Failed to migrate Stalker playlist metadata in SQLite:',
+                error
+            );
+        }
+    }
+
+    private async migrateStalkerPlaylistMetadataInIndexedDb(): Promise<void> {
+        try {
+            if (
+                this.readIndexedDbMigrationFlag(
+                    STALKER_PLAYLIST_METADATA_MIGRATION_FLAG
+                ) === '1'
+            ) {
+                return;
+            }
+
+            const storedPlaylists = await firstValueFrom(
+                this.dbService.getAll<Playlist>(DbStores.Playlists)
+            );
+            const updates =
+                this.collectStalkerMetadataMigrationUpdates(storedPlaylists);
+
+            if (updates.length > 0) {
+                await firstValueFrom(
+                    combineLatest(
+                        updates.map((playlist) =>
+                            this.dbService.update(DbStores.Playlists, playlist)
+                        )
+                    )
+                );
+            }
+
+            this.writeIndexedDbMigrationFlag(
+                STALKER_PLAYLIST_METADATA_MIGRATION_FLAG
+            );
+        } catch (error) {
+            console.error(
+                'Failed to migrate Stalker playlist metadata in IndexedDB:',
+                error
+            );
+        }
+    }
+
+    private upsertSqlitePlaylist(playlist: Playlist) {
+        return this.runOnSqlite(async () => {
+            const electron = this.electronApi;
+            if (!electron) {
+                return playlist;
+            }
+
+            await electron.dbUpsertAppPlaylist(playlist);
+            return playlist;
+        });
+    }
+
+    private upsertManySqlitePlaylists(playlists: Playlist[]) {
+        return this.runOnSqlite(async () => {
+            const electron = this.electronApi;
+            if (!electron) {
+                return playlists;
+            }
+
+            await electron.dbUpsertAppPlaylists(playlists);
+            return playlists;
+        });
+    }
+
+    getAllPlaylists() {
+        if (this.isElectronStorageAvailable) {
+            return this.runOnSqlite(async () => {
+                const electron = this.electronApi;
+                const playlists = electron
+                    ? await electron.dbGetAppPlaylists()
+                    : [];
+                return (playlists as Playlist[]).map(
+                    ({ playlist, items, header, ...rest }) => ({
+                        ...(rest as Playlist),
+                    })
+                );
+            });
+        }
+
+        return this.runOnIndexedDb(() =>
+            firstValueFrom(this.dbService.getAll<Playlist>(DbStores.Playlists))
+        ).pipe(
+            map((data) =>
+                data.map(({ playlist, items, header, ...rest }) => ({
+                    ...(rest as Playlist),
+                }))
+            )
+        );
+    }
+
+    addPlaylist(playlist: Playlist) {
+        if (this.isElectronStorageAvailable) {
+            return this.upsertSqlitePlaylist(playlist);
+        }
+
+        return this.dbService
+            .add(DbStores.Playlists, playlist)
+            .pipe(map(() => playlist));
+    }
+
+    getPlaylist(id: string) {
+        if (id === 'global-favorites') {
+            return this.getPlaylistWithGlobalFavorites();
+        }
+        return this.getPlaylistById(id);
+    }
+
+    deletePlaylist(playlistId: string): Observable<{ success: boolean }> {
+        if (this.isElectronStorageAvailable) {
+            return this.runOnSqlite(async () => {
+                const electron = this.electronApi;
+                if (!electron) {
+                    return undefined;
+                }
+
+                await electron.dbDeletePlaylist(playlistId);
+                return undefined;
+            }).pipe(map(() => ({ success: true })));
+        }
+
+        return this.dbService
+            .delete(DbStores.Playlists, playlistId)
+            .pipe(map(() => ({ success: true })));
+    }
+
+    updatePlaylist(playlistId: string, updatedPlaylist: Playlist) {
+        return this.getPlaylistById(playlistId).pipe(
+            switchMap((currentPlaylist: Playlist) => {
+                const mergedPlaylist: Playlist = {
+                    ...currentPlaylist,
+                    ...updatedPlaylist,
+                    _id: playlistId,
+                    count:
+                        updatedPlaylist.playlist?.items?.length ??
+                        currentPlaylist.count,
+                    updateDate: Date.now(),
+                    updateState: PlaylistUpdateState.UPDATED,
+                    favorites: currentPlaylist.favorites,
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(mergedPlaylist);
+                }
+
+                return this.dbService.update(
+                    DbStores.Playlists,
+                    mergedPlaylist
+                );
+            })
+        );
+    }
+
+    getPlaylistById(id: string) {
+        if (this.isElectronStorageAvailable) {
+            return this.runOnSqlite(async () => {
+                const electron = this.electronApi;
+                const playlist = electron
+                    ? await electron.dbGetAppPlaylist(id)
+                    : null;
+                return playlist
+                    ? this.createSqliteFallbackPlaylist(playlist as Playlist)
+                    : (undefined as unknown as Playlist);
+            });
+        }
+
+        return this.runOnIndexedDb(() =>
+            firstValueFrom(
+                this.dbService.getByID<Playlist>(DbStores.Playlists, id)
+            )
+        );
+    }
+
+    updatePlaylistMeta(updatedPlaylist: PlaylistMeta) {
+        return this.getPlaylistById(updatedPlaylist._id).pipe(
+            switchMap((playlist) => {
+                const nextPlaylist: Playlist = {
+                    ...playlist,
+                    ...(updatedPlaylist.title != null
+                        ? { title: updatedPlaylist.title }
+                        : {}),
+                    ...(updatedPlaylist.autoRefresh != null
+                        ? { autoRefresh: updatedPlaylist.autoRefresh }
+                        : {}),
+                    ...(updatedPlaylist.userAgent != null
+                        ? { userAgent: updatedPlaylist.userAgent }
+                        : {}),
+                    ...(updatedPlaylist.referrer !== undefined
+                        ? { referrer: updatedPlaylist.referrer }
+                        : {}),
+                    ...(updatedPlaylist.origin !== undefined
+                        ? { origin: updatedPlaylist.origin }
+                        : {}),
+                    ...(updatedPlaylist.serverUrl != null
+                        ? { serverUrl: updatedPlaylist.serverUrl }
+                        : {}),
+                    ...(updatedPlaylist.portalUrl != null
+                        ? { portalUrl: updatedPlaylist.portalUrl }
+                        : {}),
+                    ...(updatedPlaylist.isFullStalkerPortal !== undefined
+                        ? {
+                              isFullStalkerPortal:
+                                  updatedPlaylist.isFullStalkerPortal,
+                          }
+                        : {}),
+                    ...(updatedPlaylist.macAddress != null
+                        ? { macAddress: updatedPlaylist.macAddress }
+                        : {}),
+                    ...(updatedPlaylist.username != null
+                        ? { username: updatedPlaylist.username }
+                        : {}),
+                    ...(updatedPlaylist.password != null
+                        ? { password: updatedPlaylist.password }
+                        : {}),
+                    ...(updatedPlaylist.favorites != null
+                        ? { favorites: updatedPlaylist.favorites }
+                        : {}),
+                    ...(updatedPlaylist.recentlyViewed != null
+                        ? { recentlyViewed: updatedPlaylist.recentlyViewed }
+                        : {}),
+                    ...(updatedPlaylist.hiddenGroupTitles != null
+                        ? {
+                              hiddenGroupTitles:
+                                  updatedPlaylist.hiddenGroupTitles,
+                          }
+                        : {}),
+                    ...(updatedPlaylist.updateDate !== undefined
+                        ? { updateDate: updatedPlaylist.updateDate }
+                        : {}),
+                    ...(updatedPlaylist.stalkerSerialNumber !== undefined
+                        ? {
+                              stalkerSerialNumber:
+                                  updatedPlaylist.stalkerSerialNumber,
+                          }
+                        : {}),
+                    ...(updatedPlaylist.stalkerDeviceId1 !== undefined
+                        ? { stalkerDeviceId1: updatedPlaylist.stalkerDeviceId1 }
+                        : {}),
+                    ...(updatedPlaylist.stalkerDeviceId2 !== undefined
+                        ? { stalkerDeviceId2: updatedPlaylist.stalkerDeviceId2 }
+                        : {}),
+                    ...(updatedPlaylist.stalkerSignature1 !== undefined
+                        ? {
+                              stalkerSignature1:
+                                  updatedPlaylist.stalkerSignature1,
+                          }
+                        : {}),
+                    ...(updatedPlaylist.stalkerSignature2 !== undefined
+                        ? {
+                              stalkerSignature2:
+                                  updatedPlaylist.stalkerSignature2,
+                          }
+                        : {}),
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    updateFavorites(id: string, favorites: string[]) {
+        return this.getPlaylistById(id).pipe(
+            switchMap((playlist) => {
+                const nextPlaylist: Playlist = {
+                    ...playlist,
+                    favorites,
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    updateManyPlaylists(playlists: Playlist[]) {
+        if (playlists.length === 0) {
+            return of([]);
+        }
+
+        if (this.isElectronStorageAvailable) {
+            const updatedPlaylists = playlists.map((playlist) => ({
+                ...playlist,
+                updateDate: Date.now(),
+                autoRefresh: true,
+            }));
+            return this.upsertManySqlitePlaylists(updatedPlaylists);
+        }
+
+        return combineLatest(
+            playlists.map((playlist) => {
+                return this.dbService.update(DbStores.Playlists, {
+                    ...playlist,
+                    updateDate: Date.now(),
+                    autoRefresh: true,
+                });
+            })
+        );
+    }
+
+    getFavoriteChannels(playlistId: string) {
+        return this.getPlaylistById(playlistId).pipe(
+            map((data) =>
+                (data.playlist?.items ?? []).filter((channel: Channel) =>
+                    data.favorites?.includes(channel.id)
+                )
+            )
+        );
+    }
+
+    getPortalFavorites(portalId: string) {
+        if (!portalId) {
+            throw new Error('Portal ID is required');
+        }
+
+        return this.getPlaylistById(portalId).pipe(
+            map((item) => {
+                if (!item || !item.favorites) return [];
+                return item.favorites as PortalFavoriteItem[];
+            }),
+            map((favorites) =>
+                favorites.sort(
+                    (a, b) =>
+                        new Date(b.added_at ?? '').getTime() -
+                        new Date(a.added_at ?? '').getTime()
+                )
+            )
+        );
+    }
+
+    getPortalLiveStreamFavorites(portalId: string) {
+        return this.getPlaylistById(portalId).pipe(
+            map((item) => {
+                if (!item || !item.favorites) return [];
+                return (item.favorites as PortalFavoriteItem[]).filter(
+                    (itm) =>
+                        itm && itm.stream_type && itm.stream_type === 'live'
+                );
+            })
+        );
+    }
+
+    addPortalFavorite(portalId: string, item: PortalFavoriteItem) {
+        if (!portalId) {
+            throw new Error('Portal ID is required');
+        }
+        return this.getPlaylistById(portalId).pipe(
+            switchMap((portal) => {
+                const nextPlaylist: Playlist = {
+                    ...portal,
+                    favorites: [...(portal.favorites ?? []), item],
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    setPortalFavorites(portalId: string, favorites: StalkerPortalItem[]) {
+        if (!portalId) {
+            throw new Error('Portal ID is required');
+        }
+
+        return this.getPlaylistById(portalId).pipe(
+            switchMap((portal) => {
+                const nextPlaylist: Playlist = {
+                    ...portal,
+                    favorites,
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    removeFromPortalFavorites(portalId: string, favoriteId: number | string) {
+        if (!portalId) {
+            throw new Error('Portal ID is required');
+        }
+        return this.getPlaylistById(portalId).pipe(
+            switchMap((portal) => {
+                const nextPlaylist: Playlist = {
+                    ...portal,
+                    favorites: portal.favorites?.filter((i) => {
+                        const expectedId = String(favoriteId);
+                        const favorite = i as PortalFavoriteItem;
+                        const streamId = String(favorite.stream_id ?? '');
+                        const seriesId = String(favorite.series_id ?? '');
+                        const movieId = String(favorite.movie_id ?? '');
+                        const itemId = String(favorite.id ?? '');
+
+                        return (
+                            streamId !== expectedId &&
+                            seriesId !== expectedId &&
+                            movieId !== expectedId &&
+                            itemId !== expectedId
+                        );
+                    }),
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    updatePlaylistPositions(
+        positionUpdates: {
+            id: string;
+            changes: { position: number };
+        }[]
+    ) {
+        if (positionUpdates.length === 0) {
+            return of([]);
+        }
+
+        if (this.isElectronStorageAvailable) {
+            return this.runOnSqlite(async () => {
+                const electron = this.electronApi;
+                const playlists = electron
+                    ? ((await electron.dbGetAppPlaylists()) as Playlist[])
+                    : [];
+                const positionsById = new Map(
+                    positionUpdates.map((item) => [
+                        item.id,
+                        item.changes.position,
+                    ])
+                );
+
+                const updatedPlaylists = playlists
+                    .filter((playlist) => positionsById.has(playlist._id))
+                    .map((playlist) => ({
+                        ...playlist,
+                        position: positionsById.get(playlist._id),
+                    }));
+
+                if (electron) {
+                    await electron.dbUpsertAppPlaylists(updatedPlaylists);
+                }
+                return updatedPlaylists;
+            });
+        }
+
+        return combineLatest(
+            positionUpdates.map((item) => {
+                return this.dbService
+                    .getByID<Playlist>(DbStores.Playlists, item.id)
+                    .pipe(
+                        switchMap((playlist: Playlist) =>
+                            this.dbService.update(DbStores.Playlists, {
+                                ...playlist,
+                                position: item.changes.position,
+                            })
+                        )
+                    );
+            })
+        );
+    }
+
+    handlePlaylistParsing(
+        uploadType: 'FILE' | 'URL' | 'TEXT',
+        playlist: string,
+        title: string,
+        path?: string
+    ) {
+        try {
+            const parsedPlaylist = parse(playlist);
+            return createPlaylistObject(
+                title,
+                parsedPlaylist,
+                path,
+                uploadType
+            );
+        } catch (error) {
+            this.snackBar.open(
+                this.translateService.instant('HOME.PARSING_ERROR'),
+                undefined,
+                { duration: 2000 }
+            );
+            throw new Error(`Parsing failed, not a valid playlist: ${error}`);
+        }
+    }
+
+    getPlaylistWithGlobalFavorites() {
+        return this.getAllData().pipe(
+            map((playlists: Playlist[]) => {
+                const favoriteChannels = aggregateFavoriteChannels(playlists);
+                const favPlaylist = createFavoritesPlaylist(favoriteChannels);
+                return favPlaylist;
+            })
+        );
+    }
+
+    addManyPlaylists(playlists: Playlist[]) {
+        if (this.isElectronStorageAvailable) {
+            return this.upsertManySqlitePlaylists(playlists);
+        }
+
+        return this.dbService.bulkAdd(
+            DbStores.Playlists,
+            playlists as unknown as Playlist[]
+        );
+    }
+
+    getPlaylistsForAutoUpdate() {
+        return this.getAllData().pipe(
+            map((playlists: Playlist[]) => {
+                return playlists
+                    .filter((item) => item.autoRefresh)
+                    .map(
+                        ({
+                            playlist,
+                            header,
+                            items,
+                            favorites,
+                            ...rest
+                        }: Playlist) => rest
+                    );
+            })
+        );
+    }
+
+    setFavorites(playlistId: string, favorites: string[]) {
+        return this.getPlaylistById(playlistId).pipe(
+            switchMap((playlist) => {
+                const nextPlaylist: Playlist = {
+                    ...playlist,
+                    favorites,
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    getRawPlaylistById(id: string) {
+        return this.getPlaylistById(id).pipe(
+            map((playlist) => {
+                return (
+                    `${playlist.playlist?.header?.raw ?? ''}` +
+                    '\n' +
+                    (playlist.playlist?.items ?? [])
+                        .map((item: PlaylistRawItem) => item.raw)
+                        .join('\n')
+                );
+            })
+        );
+    }
+
+    getAllData() {
+        if (this.isElectronStorageAvailable) {
+            return this.runOnSqlite(async () => {
+                const electron = this.electronApi;
+                return electron
+                    ? ((await electron.dbGetAppPlaylists()) as Playlist[])
+                    : [];
+            });
+        }
+
+        return this.runOnIndexedDb(() =>
+            firstValueFrom(this.dbService.getAll<Playlist>(DbStores.Playlists))
+        );
+    }
+
+    removeAll(): Observable<void> {
+        if (this.isElectronStorageAvailable) {
+            return this.runOnSqlite(async () => {
+                const electron = this.electronApi;
+                if (electron) {
+                    await electron.dbDeleteAllPlaylists();
+                }
+                return undefined;
+            }).pipe(map(() => undefined));
+        }
+
+        return this.dbService
+            .clear(DbStores.Playlists)
+            .pipe(map(() => undefined));
+    }
+
+    private normalizePortalRecentIdentity(value: unknown): string {
+        const raw = String(value ?? '').trim();
+        if (!raw) {
+            return '';
+        }
+        return raw.includes(':') ? raw.split(':')[0] : raw;
+    }
+
+    private getPlaylistRecentIdentity(
+        item: PlaylistRecentlyViewedItem
+    ): string {
+        if (isM3uRecentlyViewedItem(item)) {
+            return String(item.url ?? item.id ?? '').trim();
+        }
+
+        return this.normalizePortalRecentIdentity(
+            extractStalkerItemId(item ?? {})
+        );
+    }
+
+    private matchesPlaylistRecentIdentity(
+        item: PlaylistRecentlyViewedItem,
+        expectedIdentity: string | number
+    ): boolean {
+        const expectedRaw = String(expectedIdentity ?? '').trim();
+        if (!expectedRaw) {
+            return false;
+        }
+
+        if (isM3uRecentlyViewedItem(item)) {
+            return this.getPlaylistRecentIdentity(item) === expectedRaw;
+        }
+
+        return (
+            this.getPlaylistRecentIdentity(item) ===
+            this.normalizePortalRecentIdentity(expectedRaw)
+        );
+    }
+
+    private sortPlaylistRecentItems(
+        items: PlaylistRecentlyViewedItem[]
+    ): PlaylistRecentlyViewedItem[] {
+        return [...items].sort(
+            (a, b) =>
+                new Date(normalizeStalkerDate(b.added_at ?? '')).getTime() -
+                new Date(normalizeStalkerDate(a.added_at ?? '')).getTime()
+        );
+    }
+
+    getPlaylistRecentlyViewed(playlistId: string) {
+        if (!playlistId) {
+            throw new Error('Playlist ID is required');
+        }
+
+        return this.getPlaylistById(playlistId).pipe(
+            map((item) => {
+                if (!item || !Array.isArray(item.recentlyViewed)) {
+                    return [];
+                }
+                return item.recentlyViewed as PlaylistRecentlyViewedItem[];
+            }),
+            map((items) => this.sortPlaylistRecentItems(items))
+        );
+    }
+
+    addPlaylistRecentlyViewed(
+        playlistId: string,
+        item: PlaylistRecentlyViewedItem
+    ) {
+        if (!playlistId) {
+            throw new Error('Playlist ID is required');
+        }
+
+        return this.getPlaylistById(playlistId).pipe(
+            switchMap((playlist) => {
+                const nowIso = new Date().toISOString();
+                const recentItems = Array.isArray(playlist.recentlyViewed)
+                    ? (playlist.recentlyViewed as PlaylistRecentlyViewedItem[])
+                    : [];
+                const existingIndex = recentItems.findIndex((recentItem) =>
+                    this.matchesPlaylistRecentIdentity(
+                        recentItem,
+                        this.getPlaylistRecentIdentity(item)
+                    )
+                );
+                const existingItem =
+                    existingIndex >= 0 ? recentItems[existingIndex] : null;
+                const nextItem: PlaylistRecentlyViewedItem = {
+                    ...(existingItem ?? {}),
+                    ...item,
+                    added_at: nowIso,
+                };
+                const remainingItems = recentItems.filter(
+                    (_, index) => index !== existingIndex
+                );
+                const nextPlaylist: Playlist = {
+                    ...playlist,
+                    recentlyViewed: [nextItem, ...remainingItems],
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    removeFromPlaylistRecentlyViewed(
+        playlistId: string,
+        identity: string | number
+    ) {
+        if (!playlistId) {
+            throw new Error('Playlist ID is required');
+        }
+
+        return this.getPlaylistById(playlistId).pipe(
+            switchMap((playlist) => {
+                const nextPlaylist: Playlist = {
+                    ...playlist,
+                    recentlyViewed: (
+                        playlist.recentlyViewed as PlaylistRecentlyViewedItem[]
+                    )?.filter(
+                        (item) =>
+                            !this.matchesPlaylistRecentIdentity(item, identity)
+                    ),
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    clearPlaylistRecentlyViewed(playlistId: string) {
+        if (!playlistId) {
+            throw new Error('Playlist ID is required');
+        }
+
+        return this.getPlaylistById(playlistId).pipe(
+            switchMap((playlist) => {
+                const nextPlaylist: Playlist = {
+                    ...playlist,
+                    recentlyViewed: [],
+                };
+
+                if (this.isElectronStorageAvailable) {
+                    return this.upsertSqlitePlaylist(nextPlaylist);
+                }
+
+                return this.dbService.update(DbStores.Playlists, nextPlaylist);
+            })
+        );
+    }
+
+    getPortalRecentlyViewed(portalId: string) {
+        return this.getPlaylistRecentlyViewed(portalId).pipe(
+            map((items) =>
+                items.filter(
+                    (item): item is StalkerPortalItem =>
+                        !isM3uRecentlyViewedItem(item)
+                )
+            )
+        );
+    }
+
+    addPortalRecentlyViewed(
+        portalId: string,
+        item: StalkerPortalItem & { id: string | number; title: string }
+    ) {
+        return this.addPlaylistRecentlyViewed(portalId, item);
+    }
+
+    addM3uRecentlyViewed(playlistId: string, item: M3uRecentlyViewedItem) {
+        return this.addPlaylistRecentlyViewed(playlistId, item);
+    }
+
+    removeFromPortalRecentlyViewed(portalId: string, id: string | number) {
+        return this.removeFromPlaylistRecentlyViewed(portalId, id);
+    }
+
+    removeFromM3uRecentlyViewed(playlistId: string, channelUrl: string) {
+        return this.removeFromPlaylistRecentlyViewed(playlistId, channelUrl);
+    }
+
+    clearPortalRecentlyViewed(portalId: string) {
+        return this.clearPlaylistRecentlyViewed(portalId);
+    }
+
+    clearM3uRecentlyViewed(playlistId: string) {
+        return this.clearPlaylistRecentlyViewed(playlistId);
+    }
+}
diff --git a/libs/services/src/lib/portal-status.service.spec.ts b/libs/services/src/lib/portal-status.service.spec.ts
new file mode 100644
index 0000000..378774a
--- /dev/null
+++ b/libs/services/src/lib/portal-status.service.spec.ts
@@ -0,0 +1,78 @@
+import {
+    EnvironmentInjector,
+    Injector,
+    createEnvironmentInjector,
+    runInInjectionContext,
+} from '@angular/core';
+import { DataService } from './data.service';
+import { PortalStatusService } from './portal-status.service';
+
+describe('PortalStatusService', () => {
+    let service: PortalStatusService;
+    let dataService: { sendIpcEvent: jest.Mock };
+
+    beforeEach(() => {
+        dataService = {
+            sendIpcEvent: jest.fn(),
+        };
+        const injector = createEnvironmentInjector([
+            {
+                provide: DataService,
+                useValue: dataService,
+            },
+        ], Injector.NULL as unknown as EnvironmentInjector);
+
+        service = runInInjectionContext(
+            injector,
+            () => new PortalStatusService()
+        );
+    });
+
+    it('marks portal status checks as silent background probes', async () => {
+        const futureExpDate = String(
+            Math.floor(Date.now() / 1000) + 60 * 60 * 24
+        );
+        dataService.sendIpcEvent.mockResolvedValue({
+            payload: {
+                user_info: {
+                    status: 'Active',
+                    exp_date: futureExpDate,
+                },
+            },
+        });
+
+        const status = await service.checkPortalStatus(
+            'http://example.com',
+            'user',
+            'pass'
+        );
+
+        expect(status).toBe('active');
+        expect(dataService.sendIpcEvent).toHaveBeenCalledWith(
+            'XTREAM_REQUEST',
+            expect.objectContaining({
+                suppressErrorLog: true,
+                url: 'http://example.com',
+                params: {
+                    action: 'get_account_info',
+                    password: 'pass',
+                    username: 'user',
+                },
+            })
+        );
+    });
+
+    it('returns unavailable without console noise when the portal is offline', async () => {
+        const consoleErrorSpy = jest
+            .spyOn(console, 'error')
+            .mockImplementation(() => undefined);
+        dataService.sendIpcEvent.mockRejectedValue(new Error('ECONNREFUSED'));
+
+        await expect(
+            service.checkPortalStatus('http://example.com', 'user', 'pass')
+        ).resolves.toBe('unavailable');
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+
+        consoleErrorSpy.mockRestore();
+    });
+});
diff --git a/libs/services/src/lib/portal-status.service.ts b/libs/services/src/lib/portal-status.service.ts
new file mode 100644
index 0000000..9dcfb14
--- /dev/null
+++ b/libs/services/src/lib/portal-status.service.ts
@@ -0,0 +1,126 @@
+import { Injectable, inject } from '@angular/core';
+import { DataService } from './data.service';
+
+export type PortalStatus = 'active' | 'inactive' | 'expired' | 'unavailable';
+
+interface XtreamPortalStatusResponse {
+    payload?: {
+        user_info?: {
+            status?: string;
+            exp_date?: string;
+        };
+    };
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PortalStatusService {
+    private readonly dataService = inject(DataService);
+
+    /**
+     * Checks the status of an Xtream Code portal
+     *
+     * @param serverUrl The base URL of the server
+     * @param username The username for authentication
+     * @param password The password for authentication
+     * @returns A promise that resolves to the portal status
+     */
+    async checkPortalStatus(
+        serverUrl: string,
+        username: string,
+        password: string
+    ): Promise<PortalStatus> {
+        try {
+            let normalizedUrl = serverUrl;
+            if (serverUrl && !serverUrl.endsWith('/')) {
+                normalizedUrl = serverUrl;
+            }
+
+            const response =
+                await this.dataService.sendIpcEvent<XtreamPortalStatusResponse>(
+                    'XTREAM_REQUEST',
+                    {
+                        url: normalizedUrl,
+                        params: {
+                            password,
+                            username,
+                            action: 'get_account_info',
+                        },
+                        suppressErrorLog: true,
+                    }
+                );
+            const payload = response?.payload;
+
+            if (!payload?.user_info?.status) {
+                return 'unavailable';
+            }
+
+            if (payload.user_info.status === 'Active') {
+                if (!payload.user_info.exp_date) {
+                    return 'active';
+                }
+
+                const expDate = new Date(
+                    parseInt(payload.user_info.exp_date, 10) * 1000
+                );
+                return expDate < new Date() ? 'expired' : 'active';
+            } else {
+                return 'inactive';
+            }
+        } catch (error) {
+            return 'unavailable';
+        }
+    }
+
+    /**
+     * Gets a user-friendly message based on the portal status
+     *
+     * @param status The portal status
+     * @returns A message describing the status
+     */
+    getStatusMessage(status: PortalStatus | null): string {
+        switch (status) {
+            case 'active':
+                return 'Connection successful! Portal is active.';
+            case 'inactive':
+                return 'Portal is inactive.';
+            case 'expired':
+                return 'Portal subscription has expired.';
+            case 'unavailable':
+                return 'Could not connect to the portal.';
+            default:
+                return '';
+        }
+    }
+
+    /**
+     * Gets a CSS class name based on the portal status
+     *
+     * @param status The portal status
+     * @returns A CSS class name
+     */
+    getStatusClass(status: PortalStatus | null): string {
+        return status ? `status-${status}` : '';
+    }
+
+    /**
+     * Gets an icon name based on the portal status
+     *
+     * @param status The portal status
+     * @returns A material icon name
+     */
+    getStatusIcon(status: PortalStatus | null): string {
+        switch (status) {
+            case 'active':
+                return 'check_circle';
+            case 'inactive':
+                return 'cancel';
+            case 'expired':
+                return 'warning';
+            case 'unavailable':
+            default:
+                return 'error';
+        }
+    }
+}
diff --git a/libs/services/src/lib/settings-store.service.ts b/libs/services/src/lib/settings-store.service.ts
new file mode 100644
index 0000000..0fc7328
--- /dev/null
+++ b/libs/services/src/lib/settings-store.service.ts
@@ -0,0 +1,124 @@
+import { inject, Injector } from '@angular/core';
+import {
+    patchState,
+    signalStore,
+    withHooks,
+    withMethods,
+    withState,
+} from '@ngrx/signals';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { firstValueFrom } from 'rxjs';
+import {
+    Language,
+    Settings,
+    StartupBehavior,
+    STORE_KEY,
+    StreamFormat,
+    Theme,
+    VideoPlayer,
+} from 'shared-interfaces';
+import { WORKSPACE_PRODUCT_BRANDING } from './workspace-product-branding.token';
+
+const DEFAULT_SETTINGS: Settings = {
+    player: VideoPlayer.VideoJs,
+    streamFormat: StreamFormat.M3u8StreamFormat,
+    language: Language.ENGLISH,
+    showCaptions: false,
+    showDashboard: true,
+    startupBehavior: StartupBehavior.FirstView,
+    showExternalPlaybackBar: true,
+    theme: Theme.SystemTheme,
+    mpvPlayerPath: '',
+    mpvReuseInstance: false,
+    vlcPlayerPath: '',
+    remoteControl: false,
+    remoteControlPort: 8765,
+    epgUrl: [],
+    downloadFolder: '',
+};
+
+export const SettingsStore = signalStore(
+    { providedIn: 'root' },
+    withState<Settings>(DEFAULT_SETTINGS),
+    withMethods((store, storage = inject(StorageMap), injector = inject(Injector)) => ({
+        async loadSettings() {
+            try {
+                const branding = injector.get(WORKSPACE_PRODUCT_BRANDING);
+                const stored = await firstValueFrom(
+                    storage.get(STORE_KEY.Settings)
+                );
+                if (stored) {
+                    patchState(store, {
+                        ...DEFAULT_SETTINGS,
+                        ...(stored as Settings),
+                    });
+                } else if (branding) {
+                    patchState(store, {
+                        ...DEFAULT_SETTINGS,
+                        player: branding.defaultVideoPlayer,
+                        streamFormat: branding.defaultStreamFormat,
+                        language: branding.defaultLanguage,
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to load settings:', error);
+                // Keep default settings if loading fails
+            }
+        },
+
+        async updateSettings(settings: Partial<Settings>) {
+            patchState(store, settings);
+            // Save the complete settings object, not just the partial update
+            const completeSettings = this.getSettings();
+            try {
+                await firstValueFrom(
+                    storage.set(STORE_KEY.Settings, completeSettings)
+                );
+            } catch (error) {
+                console.error('Failed to save settings:', error);
+                throw error;
+            }
+        },
+
+        getSettings() {
+            return {
+                player: store.player(),
+                streamFormat: store.streamFormat(),
+                language: store.language(),
+                showCaptions: store.showCaptions(),
+                showDashboard: store.showDashboard(),
+                startupBehavior: store.startupBehavior(),
+                showExternalPlaybackBar: store.showExternalPlaybackBar!(),
+                theme: store.theme(),
+                mpvPlayerPath: store.mpvPlayerPath(),
+                mpvReuseInstance: store.mpvReuseInstance(),
+                vlcPlayerPath: store.vlcPlayerPath(),
+                remoteControl: store.remoteControl(),
+                remoteControlPort: store.remoteControlPort(),
+                epgUrl: store.epgUrl(),
+                downloadFolder: store.downloadFolder!(),
+            };
+        },
+
+        getDownloadFolder() {
+            return store.downloadFolder!();
+        },
+
+        getPlayer() {
+            return store.player();
+        },
+
+        isEmbeddedPlayer() {
+            return (
+                store.player() === VideoPlayer.VideoJs ||
+                store.player() === VideoPlayer.Html5Player ||
+                store.player() === VideoPlayer.ArtPlayer
+            );
+        },
+    })),
+    withHooks({
+        onInit(store) {
+            store.loadSettings();
+        },
+    })
+);
diff --git a/libs/services/src/lib/sort.service.ts b/libs/services/src/lib/sort.service.ts
new file mode 100644
index 0000000..4f374fe
--- /dev/null
+++ b/libs/services/src/lib/sort.service.ts
@@ -0,0 +1,119 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { PlaylistMeta } from 'shared-interfaces';
+
+export enum SortBy {
+    DATE_ADDED = 'date',
+    NAME = 'name',
+    CUSTOM = 'custom',
+}
+
+export enum SortOrder {
+    ASC = 'asc',
+    DESC = 'desc',
+}
+
+export interface SortOptions {
+    by: SortBy;
+    order: SortOrder;
+}
+
+const SORT_OPTIONS_STORAGE_KEY = 'iptvnator-sort-options';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class SortService {
+    private sortOptions = new BehaviorSubject<SortOptions>(
+        this.getSavedSortOptions()
+    );
+
+    getSortOptions(): Observable<SortOptions> {
+        return this.sortOptions.asObservable();
+    }
+
+    setSortOptions(options: SortOptions): void {
+        this.sortOptions.next(options);
+        this.saveSortOptions(options);
+    }
+
+    private getSavedSortOptions(): SortOptions {
+        const defaultOptions: SortOptions = {
+            by: SortBy.DATE_ADDED,
+            order: SortOrder.DESC,
+        };
+
+        try {
+            const savedOptions = localStorage.getItem(SORT_OPTIONS_STORAGE_KEY);
+            if (!savedOptions) {
+                return defaultOptions;
+            }
+
+            const parsedOptions = JSON.parse(savedOptions) as SortOptions;
+
+            // Validate that the saved options match our expected types
+            if (
+                (parsedOptions.by === SortBy.DATE_ADDED ||
+                    parsedOptions.by === SortBy.NAME ||
+                    parsedOptions.by === SortBy.CUSTOM) &&
+                (parsedOptions.order === SortOrder.ASC ||
+                    parsedOptions.order === SortOrder.DESC)
+            ) {
+                return parsedOptions;
+            }
+
+            return defaultOptions;
+        } catch (error) {
+            console.error(
+                'Error retrieving sort options from localStorage:',
+                error
+            );
+            return defaultOptions;
+        }
+    }
+
+    private saveSortOptions(options: SortOptions): void {
+        try {
+            localStorage.setItem(
+                SORT_OPTIONS_STORAGE_KEY,
+                JSON.stringify(options)
+            );
+        } catch (error) {
+            console.error('Error saving sort options to localStorage:', error);
+        }
+    }
+
+    sortPlaylists(
+        playlists: PlaylistMeta[],
+        options: SortOptions
+    ): PlaylistMeta[] {
+        const { by, order } = options;
+
+        return [...playlists].sort((a, b) => {
+            let comparison = 0;
+
+            if (by === SortBy.NAME) {
+                comparison = a.title
+                    .toLowerCase()
+                    .localeCompare(b.title.toLowerCase());
+            } else if (by === SortBy.DATE_ADDED) {
+                const dateA = new Date(a.importDate).getTime();
+                const dateB = new Date(b.importDate).getTime();
+                comparison = dateA - dateB;
+            } else if (by === SortBy.CUSTOM) {
+                // Sort by position field (lower position comes first)
+                const posA = a.position ?? Number.MAX_SAFE_INTEGER;
+                const posB = b.position ?? Number.MAX_SAFE_INTEGER;
+                comparison = posA - posB;
+                // Custom sort always uses ASC order
+                return comparison;
+            }
+
+            return order === SortOrder.ASC ? comparison : -comparison;
+        });
+    }
+
+    isCustomSort(): boolean {
+        return this.sortOptions.getValue().by === SortBy.CUSTOM;
+    }
+}
diff --git a/libs/services/src/lib/workspace-product-branding.token.ts b/libs/services/src/lib/workspace-product-branding.token.ts
new file mode 100644
index 0000000..07a02db
--- /dev/null
+++ b/libs/services/src/lib/workspace-product-branding.token.ts
@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import type { WorkspaceProductBranding } from 'shared-interfaces';
+
+export type { WorkspaceProductBranding } from 'shared-interfaces';
+
+export const WORKSPACE_PRODUCT_BRANDING =
+    new InjectionToken<WorkspaceProductBranding | null>(
+        'WORKSPACE_PRODUCT_BRANDING'
+    );
diff --git a/libs/services/src/lib/xtream-pending-restore.service.ts b/libs/services/src/lib/xtream-pending-restore.service.ts
new file mode 100644
index 0000000..b032ae7
--- /dev/null
+++ b/libs/services/src/lib/xtream-pending-restore.service.ts
@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import {
+    getXtreamPendingRestoreStorageKey,
+    XtreamPendingRestoreState,
+} from 'shared-interfaces';
+
+const EMPTY_RESTORE_STATE: XtreamPendingRestoreState = {
+    hiddenCategories: [],
+    favorites: [],
+    recentlyViewed: [],
+    playbackPositions: [],
+};
+
+@Injectable({
+    providedIn: 'root',
+})
+export class XtreamPendingRestoreService {
+    get(playlistId: string): XtreamPendingRestoreState | null {
+        if (!playlistId) {
+            return null;
+        }
+
+        try {
+            const rawState = localStorage.getItem(
+                getXtreamPendingRestoreStorageKey(playlistId)
+            );
+
+            if (!rawState) {
+                return null;
+            }
+
+            return this.normalize(JSON.parse(rawState));
+        } catch {
+            return null;
+        }
+    }
+
+    set(playlistId: string, state: XtreamPendingRestoreState): void {
+        if (!playlistId) {
+            return;
+        }
+
+        try {
+            localStorage.setItem(
+                getXtreamPendingRestoreStorageKey(playlistId),
+                JSON.stringify(this.normalize(state))
+            );
+        } catch {
+            // Ignore local storage write failures.
+        }
+    }
+
+    clear(playlistId: string): void {
+        if (!playlistId) {
+            return;
+        }
+
+        try {
+            localStorage.removeItem(
+                getXtreamPendingRestoreStorageKey(playlistId)
+            );
+        } catch {
+            // Ignore local storage remove failures.
+        }
+    }
+
+    private normalize(value: unknown): XtreamPendingRestoreState {
+        if (!value || typeof value !== 'object') {
+            return { ...EMPTY_RESTORE_STATE };
+        }
+
+        const candidate = value as Partial<XtreamPendingRestoreState>;
+
+        return {
+            hiddenCategories: Array.isArray(candidate.hiddenCategories)
+                ? candidate.hiddenCategories
+                : [],
+            favorites: Array.isArray(candidate.favorites)
+                ? candidate.favorites
+                : [],
+            recentlyViewed: Array.isArray(candidate.recentlyViewed)
+                ? candidate.recentlyViewed
+                : [],
+            playbackPositions: Array.isArray(candidate.playbackPositions)
+                ? candidate.playbackPositions
+                : [],
+        };
+    }
+}
diff --git a/libs/services/src/material-snack-bar.d.ts b/libs/services/src/material-snack-bar.d.ts
new file mode 100644
index 0000000..f67502b
--- /dev/null
+++ b/libs/services/src/material-snack-bar.d.ts
@@ -0,0 +1,9 @@
+declare module '@angular/material/snack-bar' {
+    export class MatSnackBar {
+        open(
+            message: string,
+            action?: string,
+            config?: { duration?: number }
+        ): void;
+    }
+}
diff --git a/libs/services/src/test-setup.ts b/libs/services/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/services/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/services/tsconfig.json b/libs/services/tsconfig.json
new file mode 100644
index 0000000..7cac292
--- /dev/null
+++ b/libs/services/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/services/tsconfig.lib.json b/libs/services/tsconfig.lib.json
new file mode 100644
index 0000000..61d8f1f
--- /dev/null
+++ b/libs/services/tsconfig.lib.json
@@ -0,0 +1,18 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "files": ["../../global.d.ts"],
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": ["src/**/*.ts", "../../../global.d.ts"]
+}
diff --git a/libs/services/tsconfig.spec.json b/libs/services/tsconfig.spec.json
new file mode 100644
index 0000000..1949799
--- /dev/null
+++ b/libs/services/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "module": "preserve",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "bundler"
+    },
+    "files": ["src/test-setup.ts", "../../global.d.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/shared/database/README.md b/libs/shared/database/README.md
new file mode 100644
index 0000000..651b510
--- /dev/null
+++ b/libs/shared/database/README.md
@@ -0,0 +1,33 @@
+# Database
+
+Shared database library for IPTVnator providing Drizzle ORM schema and connection utilities.
+
+## Usage
+
+```typescript
+// Full access (electron-backend)
+import { getDatabase, initDatabase } from 'database';
+
+// Read-only access (agent-backend)
+import { getReadOnlyDatabase } from 'database';
+
+// Schema and types
+import { content, categories, playlists, type Content } from 'database';
+```
+
+## Exports
+
+### Schema (`schema.ts`)
+- **Tables**: `playlists`, `categories`, `content`, `recentlyViewed`, `favorites`
+- **Types**: `Playlist`, `Category`, `Content`, `RecentlyViewed`, `Favorite` (and `New*` variants)
+
+### Connection (`connection.ts`)
+- `getDatabase(options?)` - Full read-write access
+- `getReadOnlyDatabase()` - Read-only access for agent queries
+- `initDatabase(options?)` - Initialize with custom options
+- `closeDatabase()` - Close connection
+- `getDatabasePath()` - Get database file path
+
+## Database Location
+
+The SQLite database is stored at: `~/.iptvnator/databases/iptvnator.db`
diff --git a/libs/shared/database/project.json b/libs/shared/database/project.json
new file mode 100644
index 0000000..f945a3e
--- /dev/null
+++ b/libs/shared/database/project.json
@@ -0,0 +1,23 @@
+{
+    "name": "database",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/shared/database/src",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:shared-runtime", "type:data-access"],
+    "targets": {
+        "build": {
+            "executor": "@nx/esbuild:esbuild",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/shared/database",
+                "main": "libs/shared/database/src/index.ts",
+                "tsConfig": "libs/shared/database/tsconfig.lib.json",
+                "assets": ["libs/shared/database/*.md"],
+                "format": ["cjs"]
+            }
+        },
+        "lint": {
+            "command": "eslint libs/shared/database/**/*.ts"
+        }
+    }
+}
diff --git a/libs/shared/database/src/index.ts b/libs/shared/database/src/index.ts
new file mode 100644
index 0000000..9df4dff
--- /dev/null
+++ b/libs/shared/database/src/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Shared Database module for IPTVnator
+ * Provides Drizzle ORM schema and connection utilities for SQLite database
+ * Used by both electron-backend (read-write) and agent-backend (read-only)
+ */
+
+export * from './lib/schema';
+export * from './lib/connection';
+export * from './lib/path-utils';
diff --git a/libs/shared/database/src/lib/connection.ts b/libs/shared/database/src/lib/connection.ts
new file mode 100644
index 0000000..9ca1e00
--- /dev/null
+++ b/libs/shared/database/src/lib/connection.ts
@@ -0,0 +1,581 @@
+/**
+ * Database connection and initialization for IPTVnator
+ * Uses Drizzle ORM with better-sqlite3
+ * Stores database file under ~/.iptvnator/databases/ by default.
+ * E2E tests can override the root with IPTVNATOR_E2E_DATA_DIR.
+ *
+ * Provides two connection modes:
+ * - Full access (for electron-backend): creates tables, read-write
+ * - Read-only access (for agent-backend): no table creation, read-only queries
+ */
+
+import Database from 'better-sqlite3';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import { drizzle } from 'drizzle-orm/better-sqlite3';
+import * as schema from './schema';
+import { getIptvnatorDatabasePath } from './path-utils';
+
+export type DatabaseInstance = BetterSQLite3Database<typeof schema>;
+
+const TRACE_ENV_TRUE_VALUES = new Set(['1', 'true', 'yes', 'on']);
+
+let db: DatabaseInstance | null = null;
+let sqlite: Database.Database | null = null;
+let initPromise: Promise<DatabaseInstance> | null = null;
+
+function readTraceFlag(name: string): boolean {
+    const value = process.env[name]?.trim().toLowerCase();
+    return value ? TRACE_ENV_TRUE_VALUES.has(value) : false;
+}
+
+function isSqlTraceEnabled(): boolean {
+    return (
+        readTraceFlag('IPTVNATOR_TRACE_STARTUP') ||
+        readTraceFlag('IPTVNATOR_TRACE_DB') ||
+        readTraceFlag('IPTVNATOR_TRACE_SQL')
+    );
+}
+
+function compactSqlForTrace(sql: string): string {
+    const compactSql = sql.replace(/\s+/g, ' ').trim();
+    return compactSql.length <= 180
+        ? compactSql
+        : `${compactSql.slice(0, 177)}...`;
+}
+
+function traceSql(scope: string, message: string, payload?: unknown): void {
+    if (payload === undefined) {
+        console.log(`[IPTVnator Trace][${scope}] ${message}`);
+        return;
+    }
+
+    console.log(
+        `[IPTVnator Trace][${scope}] ${message} ${JSON.stringify(payload)}`
+    );
+}
+
+/**
+ * Get the database file path
+ */
+export function getDatabasePath(): string {
+    return getIptvnatorDatabasePath();
+}
+
+/**
+ * SQL statements for creating all tables
+ */
+const CREATE_TABLE_STATEMENTS = [
+    `CREATE TABLE IF NOT EXISTS playlists (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      serverUrl TEXT,
+      username TEXT,
+      password TEXT,
+      date_created TEXT DEFAULT (datetime('now')),
+      last_updated TEXT,
+      type TEXT NOT NULL CHECK (type IN ('xtream', 'stalker', 'm3u-file', 'm3u-text', 'm3u-url')),
+      userAgent TEXT,
+      origin TEXT,
+      referrer TEXT,
+      filePath TEXT,
+      autoRefresh INTEGER DEFAULT 0,
+      macAddress TEXT,
+      url TEXT,
+      portal_url TEXT,
+      count INTEGER,
+      import_date TEXT,
+      update_date INTEGER,
+      position INTEGER,
+      favorites TEXT,
+      recently_viewed TEXT,
+      payload TEXT,
+      last_usage TEXT
+  )`,
+    `CREATE TABLE IF NOT EXISTS app_state (
+      key TEXT PRIMARY KEY,
+      value TEXT NOT NULL,
+      updated_at TEXT DEFAULT (datetime('now'))
+  )`,
+    `CREATE TABLE IF NOT EXISTS categories (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      playlist_id TEXT NOT NULL,
+      name TEXT NOT NULL,
+      type TEXT NOT NULL CHECK (type IN ('live', 'movies', 'series')),
+      xtream_id INTEGER NOT NULL,
+      hidden INTEGER DEFAULT 0,
+      FOREIGN KEY (playlist_id) REFERENCES playlists (id) ON DELETE CASCADE
+  )`,
+    `CREATE TABLE IF NOT EXISTS content (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      category_id INTEGER NOT NULL,
+      title TEXT NOT NULL,
+      rating TEXT,
+      added TEXT,
+      poster_url TEXT,
+      backdrop_url TEXT,
+      epg_channel_id TEXT,
+      tv_archive INTEGER,
+      tv_archive_duration INTEGER,
+      direct_source TEXT,
+      xtream_id INTEGER NOT NULL,
+      type TEXT NOT NULL CHECK (type IN ('live', 'movie', 'series')),
+      FOREIGN KEY (category_id) REFERENCES categories (id) ON DELETE CASCADE
+  )`,
+    `CREATE TABLE IF NOT EXISTS recently_viewed (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      content_id INTEGER NOT NULL,
+      playlist_id TEXT NOT NULL,
+      viewed_at TEXT DEFAULT (datetime('now')),
+      FOREIGN KEY (content_id) REFERENCES content (id) ON DELETE CASCADE,
+      FOREIGN KEY (playlist_id) REFERENCES playlists (id) ON DELETE CASCADE
+  )`,
+    `CREATE TABLE IF NOT EXISTS favorites (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      content_id INTEGER NOT NULL,
+      playlist_id TEXT NOT NULL,
+      added_at TEXT DEFAULT (datetime('now')),
+      FOREIGN KEY (content_id) REFERENCES content(id) ON DELETE CASCADE,
+      FOREIGN KEY (playlist_id) REFERENCES playlists(id) ON DELETE CASCADE
+  )`,
+    `CREATE INDEX IF NOT EXISTS idx_content_type ON content(type)`,
+    `CREATE INDEX IF NOT EXISTS idx_content_category ON content(category_id)`,
+    `CREATE INDEX IF NOT EXISTS idx_categories_playlist ON categories(playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS idx_content_title ON content(title)`,
+    `CREATE INDEX IF NOT EXISTS idx_content_xtream ON content(xtream_id)`,
+    `CREATE INDEX IF NOT EXISTS idx_content_type_added ON content(type, added)`,
+    `CREATE INDEX IF NOT EXISTS idx_categories_type ON categories(type)`,
+    `CREATE UNIQUE INDEX IF NOT EXISTS favorites_content_playlist_unique ON favorites(content_id, playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS favorites_playlist_idx ON favorites(playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS favorites_content_idx ON favorites(content_id)`,
+    `CREATE UNIQUE INDEX IF NOT EXISTS recently_viewed_content_playlist_unique ON recently_viewed(content_id, playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS recently_viewed_playlist_idx ON recently_viewed(playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS recently_viewed_viewed_at_idx ON recently_viewed(viewed_at)`,
+    // EPG tables
+    `CREATE TABLE IF NOT EXISTS epg_channels (
+      id TEXT PRIMARY KEY,
+      display_name TEXT NOT NULL,
+      icon_url TEXT,
+      url TEXT,
+      source_url TEXT NOT NULL,
+      updated_at TEXT DEFAULT (datetime('now'))
+  )`,
+    `CREATE TABLE IF NOT EXISTS epg_programs (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      channel_id TEXT NOT NULL,
+      start TEXT NOT NULL,
+      stop TEXT NOT NULL,
+      title TEXT NOT NULL,
+      description TEXT,
+      category TEXT,
+      icon_url TEXT,
+      rating TEXT,
+      episode_num TEXT,
+      FOREIGN KEY (channel_id) REFERENCES epg_channels(id) ON DELETE CASCADE
+  )`,
+    // EPG indexes
+    `CREATE INDEX IF NOT EXISTS idx_epg_channels_source ON epg_channels(source_url)`,
+    `CREATE INDEX IF NOT EXISTS idx_epg_channels_name ON epg_channels(display_name)`,
+    `CREATE INDEX IF NOT EXISTS idx_epg_programs_channel ON epg_programs(channel_id)`,
+    `CREATE INDEX IF NOT EXISTS idx_epg_programs_start ON epg_programs(start)`,
+    `CREATE INDEX IF NOT EXISTS idx_epg_programs_stop ON epg_programs(stop)`,
+    `CREATE INDEX IF NOT EXISTS idx_epg_programs_time_range ON epg_programs(channel_id, start, stop)`,
+    // FTS5 virtual table for full-text search on EPG programs
+    `CREATE VIRTUAL TABLE IF NOT EXISTS epg_programs_fts USING fts5(
+      title,
+      description,
+      category,
+      content='epg_programs',
+      content_rowid='id'
+  )`,
+    // Triggers to keep FTS index in sync with epg_programs table
+    `CREATE TRIGGER IF NOT EXISTS epg_programs_ai AFTER INSERT ON epg_programs BEGIN
+      INSERT INTO epg_programs_fts(rowid, title, description, category)
+      VALUES (new.id, new.title, new.description, new.category);
+  END`,
+    `CREATE TRIGGER IF NOT EXISTS epg_programs_ad AFTER DELETE ON epg_programs BEGIN
+      INSERT INTO epg_programs_fts(epg_programs_fts, rowid, title, description, category)
+      VALUES ('delete', old.id, old.title, old.description, old.category);
+  END`,
+    `CREATE TRIGGER IF NOT EXISTS epg_programs_au AFTER UPDATE ON epg_programs BEGIN
+      INSERT INTO epg_programs_fts(epg_programs_fts, rowid, title, description, category)
+      VALUES ('delete', old.id, old.title, old.description, old.category);
+      INSERT INTO epg_programs_fts(rowid, title, description, category)
+      VALUES (new.id, new.title, new.description, new.category);
+  END`,
+    // Playback Positions table
+    `CREATE TABLE IF NOT EXISTS playback_positions (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      playlist_id TEXT NOT NULL,
+      content_xtream_id INTEGER NOT NULL,
+      content_type TEXT NOT NULL CHECK (content_type IN ('vod', 'episode')),
+      series_xtream_id INTEGER,
+      season_number INTEGER,
+      episode_number INTEGER,
+      position_seconds INTEGER NOT NULL DEFAULT 0,
+      duration_seconds INTEGER,
+      updated_at TEXT DEFAULT (datetime('now')),
+      FOREIGN KEY (playlist_id) REFERENCES playlists (id) ON DELETE CASCADE
+  )`,
+    `CREATE UNIQUE INDEX IF NOT EXISTS playback_positions_content_playlist_unique ON playback_positions(content_xtream_id, playlist_id, content_type)`,
+    `CREATE INDEX IF NOT EXISTS playback_positions_playlist_idx ON playback_positions(playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS playback_positions_series_idx ON playback_positions(series_xtream_id)`,
+    `CREATE INDEX IF NOT EXISTS playback_positions_updated_idx ON playback_positions(updated_at)`,
+    // Downloads table
+    `CREATE TABLE IF NOT EXISTS downloads (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      playlist_id TEXT NOT NULL,
+      xtream_id INTEGER NOT NULL,
+      content_type TEXT NOT NULL CHECK (content_type IN ('vod', 'episode')),
+      series_xtream_id INTEGER,
+      season_number INTEGER,
+      episode_number INTEGER,
+      title TEXT NOT NULL,
+      url TEXT NOT NULL,
+      file_name TEXT,
+      file_path TEXT,
+      poster_url TEXT,
+      status TEXT NOT NULL DEFAULT 'queued' CHECK (status IN ('queued', 'downloading', 'completed', 'failed', 'canceled')),
+      bytes_downloaded INTEGER DEFAULT 0,
+      total_bytes INTEGER,
+      error_message TEXT,
+      created_at TEXT DEFAULT (datetime('now')),
+      updated_at TEXT DEFAULT (datetime('now')),
+      FOREIGN KEY (playlist_id) REFERENCES playlists (id) ON DELETE CASCADE
+  )`,
+    `CREATE UNIQUE INDEX IF NOT EXISTS downloads_xtream_playlist_unique ON downloads(xtream_id, playlist_id, content_type)`,
+    `CREATE INDEX IF NOT EXISTS downloads_playlist_idx ON downloads(playlist_id)`,
+    `CREATE INDEX IF NOT EXISTS downloads_status_idx ON downloads(status)`,
+];
+
+/**
+ * Migration statements that may fail if already applied
+ * These are run with try-catch to handle existing columns
+ */
+const COLUMN_MIGRATION_STATEMENTS = [
+    // v1.0.0 -> v1.1.0: Add hidden column to categories for category management
+    `ALTER TABLE categories ADD COLUMN hidden INTEGER DEFAULT 0`,
+    // v1.1.0 -> v1.2.0: Add playlist metadata/payload columns for M3U + unified playlist persistence
+    `ALTER TABLE playlists ADD COLUMN portal_url TEXT`,
+    `ALTER TABLE playlists ADD COLUMN count INTEGER`,
+    `ALTER TABLE playlists ADD COLUMN import_date TEXT`,
+    `ALTER TABLE playlists ADD COLUMN update_date INTEGER`,
+    `ALTER TABLE playlists ADD COLUMN position INTEGER`,
+    `ALTER TABLE playlists ADD COLUMN favorites TEXT`,
+    `ALTER TABLE playlists ADD COLUMN recently_viewed TEXT`,
+    `ALTER TABLE playlists ADD COLUMN payload TEXT`,
+    // v1.2.0 -> v1.3.0: Add position column to favorites for global favorites ordering
+    `ALTER TABLE favorites ADD COLUMN position INTEGER DEFAULT 0`,
+    // v1.4.0 -> v1.5.0: Preserve Xtream live metadata required for EPG/catch-up
+    `ALTER TABLE content ADD COLUMN epg_channel_id TEXT`,
+    `ALTER TABLE content ADD COLUMN tv_archive INTEGER`,
+    `ALTER TABLE content ADD COLUMN tv_archive_duration INTEGER`,
+    `ALTER TABLE content ADD COLUMN direct_source TEXT`,
+    // v1.5.0 -> v1.6.0: Cinematic backdrop persisted on first detail fetch
+    `ALTER TABLE content ADD COLUMN backdrop_url TEXT`,
+];
+
+const INDEX_MIGRATION_STATEMENTS = [
+    // v1.3.0 -> v1.4.0: Prevent duplicate Xtream categories/content rows
+    `CREATE UNIQUE INDEX IF NOT EXISTS categories_playlist_type_xtream_unique ON categories(playlist_id, type, xtream_id)`,
+    `CREATE UNIQUE INDEX IF NOT EXISTS content_category_type_xtream_unique ON content(category_id, type, xtream_id)`,
+];
+
+/**
+ * Create tables if they don't exist
+ */
+function createTables(sqliteDb: Database.Database): void {
+    for (const stmt of CREATE_TABLE_STATEMENTS) {
+        sqliteDb.exec(stmt);
+    }
+}
+
+function isDuplicateColumnError(error: unknown): boolean {
+    const message =
+        typeof error === 'object' && error !== null && 'message' in error
+            ? String((error as { message?: unknown }).message ?? '')
+            : '';
+
+    return message.toLowerCase().includes('duplicate column name');
+}
+
+type XtreamCategoryDuplicateGroup = {
+    playlistId: string;
+    type: 'live' | 'movies' | 'series';
+    xtreamId: number;
+};
+
+type XtreamCategoryCandidate = {
+    id: number;
+    hidden: number;
+    contentCount: number;
+};
+
+type XtreamContentDuplicateGroup = {
+    categoryId: number;
+    type: 'live' | 'movie' | 'series';
+    xtreamId: number;
+};
+
+type XtreamContentCandidate = {
+    id: number;
+};
+
+function deduplicateXtreamCache(sqliteDb: Database.Database): void {
+    const executeCleanup = sqliteDb.transaction(() => {
+        const duplicateCategoryGroups = sqliteDb
+            .prepare(
+                `SELECT
+                    playlist_id AS playlistId,
+                    type,
+                    xtream_id AS xtreamId
+                 FROM categories
+                 GROUP BY playlist_id, type, xtream_id
+                 HAVING COUNT(*) > 1`
+            )
+            .all() as XtreamCategoryDuplicateGroup[];
+
+        const selectCategoryCandidates = sqliteDb.prepare(
+            `SELECT
+                categories.id AS id,
+                COALESCE(categories.hidden, 0) AS hidden,
+                COUNT(content.id) AS contentCount
+             FROM categories
+             LEFT JOIN content ON content.category_id = categories.id
+             WHERE categories.playlist_id = ?
+               AND categories.type = ?
+               AND categories.xtream_id = ?
+             GROUP BY categories.id, categories.hidden
+             ORDER BY COUNT(content.id) DESC, COALESCE(categories.hidden, 0) ASC, categories.id ASC`
+        );
+        const updateContentCategory = sqliteDb.prepare(
+            `UPDATE content SET category_id = ? WHERE category_id = ?`
+        );
+        const deleteCategory = sqliteDb.prepare(
+            `DELETE FROM categories WHERE id = ?`
+        );
+
+        for (const group of duplicateCategoryGroups) {
+            const candidates = selectCategoryCandidates.all(
+                group.playlistId,
+                group.type,
+                group.xtreamId
+            ) as XtreamCategoryCandidate[];
+            const canonicalCategoryId = candidates[0]?.id;
+
+            if (!canonicalCategoryId) {
+                continue;
+            }
+
+            for (const candidate of candidates.slice(1)) {
+                updateContentCategory.run(canonicalCategoryId, candidate.id);
+                deleteCategory.run(candidate.id);
+            }
+        }
+
+        const duplicateContentGroups = sqliteDb
+            .prepare(
+                `SELECT
+                    category_id AS categoryId,
+                    type,
+                    xtream_id AS xtreamId
+                 FROM content
+                 GROUP BY category_id, type, xtream_id
+                 HAVING COUNT(*) > 1`
+            )
+            .all() as XtreamContentDuplicateGroup[];
+
+        const selectContentCandidates = sqliteDb.prepare(
+            `SELECT id
+             FROM content
+             WHERE category_id = ?
+               AND type = ?
+               AND xtream_id = ?
+             ORDER BY id ASC`
+        );
+        const moveFavorites = sqliteDb.prepare(
+            `INSERT INTO favorites (content_id, playlist_id, added_at, position)
+             SELECT ?, playlist_id, added_at, COALESCE(position, 0)
+             FROM favorites
+             WHERE content_id = ?
+             ON CONFLICT(content_id, playlist_id) DO NOTHING`
+        );
+        const deleteFavorites = sqliteDb.prepare(
+            `DELETE FROM favorites WHERE content_id = ?`
+        );
+        const moveRecentlyViewed = sqliteDb.prepare(
+            `INSERT INTO recently_viewed (content_id, playlist_id, viewed_at)
+             SELECT ?, playlist_id, viewed_at
+             FROM recently_viewed
+             WHERE content_id = ?
+             ON CONFLICT(content_id, playlist_id) DO UPDATE SET
+                viewed_at = CASE
+                    WHEN excluded.viewed_at > recently_viewed.viewed_at
+                        THEN excluded.viewed_at
+                    ELSE recently_viewed.viewed_at
+                END`
+        );
+        const deleteRecentlyViewed = sqliteDb.prepare(
+            `DELETE FROM recently_viewed WHERE content_id = ?`
+        );
+        const deleteContent = sqliteDb.prepare(`DELETE FROM content WHERE id = ?`);
+
+        for (const group of duplicateContentGroups) {
+            const candidates = selectContentCandidates.all(
+                group.categoryId,
+                group.type,
+                group.xtreamId
+            ) as XtreamContentCandidate[];
+            const canonicalContentId = candidates[0]?.id;
+
+            if (!canonicalContentId) {
+                continue;
+            }
+
+            for (const candidate of candidates.slice(1)) {
+                moveFavorites.run(canonicalContentId, candidate.id);
+                deleteFavorites.run(candidate.id);
+                moveRecentlyViewed.run(canonicalContentId, candidate.id);
+                deleteRecentlyViewed.run(candidate.id);
+                deleteContent.run(candidate.id);
+            }
+        }
+    });
+
+    executeCleanup();
+}
+
+function runMigrationStatements(
+    sqliteDb: Database.Database,
+    statements: string[]
+): void {
+    for (const stmt of statements) {
+        try {
+            sqliteDb.exec(stmt);
+        } catch (error) {
+            // Ignore idempotent ALTER TABLE errors on existing columns.
+            if (isDuplicateColumnError(error)) {
+                continue;
+            }
+
+            const compactStmt = stmt.replace(/\s+/g, ' ').trim();
+            const message =
+                typeof error === 'object' &&
+                error !== null &&
+                'message' in error
+                    ? String((error as { message?: unknown }).message ?? error)
+                    : String(error);
+
+            console.warn(
+                `Migration failed (continuing): ${compactStmt} :: ${message}`
+            );
+        }
+    }
+}
+
+/**
+ * Run migrations that may fail if already applied
+ */
+function runMigrations(sqliteDb: Database.Database): void {
+    runMigrationStatements(sqliteDb, COLUMN_MIGRATION_STATEMENTS);
+    deduplicateXtreamCache(sqliteDb);
+    runMigrationStatements(sqliteDb, INDEX_MIGRATION_STATEMENTS);
+}
+
+export interface DatabaseOptions {
+    /** Open database in read-only mode (for agent-backend) */
+    readonly?: boolean;
+    /** Skip table creation (useful for read-only connections) */
+    skipTableCreation?: boolean;
+}
+
+/**
+ * Initialize the database connection with full access (read-write)
+ * Creates tables if they don't exist
+ * Used by electron-backend
+ */
+export async function initDatabase(
+    options: DatabaseOptions = {}
+): Promise<DatabaseInstance> {
+    const { readonly = false, skipTableCreation = false } = options;
+
+    if (db) return db;
+    if (initPromise) return initPromise;
+
+    initPromise = (async () => {
+        const filePath = getDatabasePath();
+        sqlite = new Database(filePath, {
+            readonly,
+            verbose: isSqlTraceEnabled()
+                ? (sql: string) => {
+                      traceSql('sql-main', 'query', {
+                          sql: compactSqlForTrace(sql),
+                      });
+                  }
+                : undefined,
+        });
+
+        if (isSqlTraceEnabled()) {
+            traceSql('sql-main', 'open', {
+                filePath,
+                readonly,
+            });
+        }
+
+        // Enable foreign keys
+        sqlite.pragma('foreign_keys = ON');
+        sqlite.pragma('busy_timeout = 5000');
+
+        if (!readonly) {
+            sqlite.pragma('journal_mode = WAL');
+        }
+
+        // Create tables only for read-write connections
+        if (!readonly && !skipTableCreation) {
+            createTables(sqlite);
+            runMigrations(sqlite);
+        }
+
+        const database = drizzle(sqlite, { schema });
+        db = database;
+        return database;
+    })();
+
+    return initPromise;
+}
+
+/**
+ * Get the database instance
+ * Initializes the database if not already initialized (with defaults for full access)
+ * Used by electron-backend
+ */
+export async function getDatabase(
+    options?: DatabaseOptions
+): Promise<DatabaseInstance> {
+    if (db) return db;
+    return initDatabase(options);
+}
+
+/**
+ * Get a read-only database connection
+ * Used by agent-backend for safe read-only queries
+ */
+export async function getReadOnlyDatabase(): Promise<DatabaseInstance> {
+    return getDatabase({ readonly: true, skipTableCreation: true });
+}
+
+/**
+ * Close the database connection
+ */
+export function closeDatabase(): void {
+    if (sqlite) {
+        sqlite.close();
+
+        if (isSqlTraceEnabled()) {
+            traceSql('sql-main', 'close');
+        }
+
+        sqlite = null;
+        db = null;
+        initPromise = null;
+    }
+}
diff --git a/libs/shared/database/src/lib/path-utils.ts b/libs/shared/database/src/lib/path-utils.ts
new file mode 100644
index 0000000..f36471c
--- /dev/null
+++ b/libs/shared/database/src/lib/path-utils.ts
@@ -0,0 +1,51 @@
+import { existsSync, mkdirSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+
+export const IPTVNATOR_E2E_DATA_DIR_ENV = 'IPTVNATOR_E2E_DATA_DIR';
+
+function ensureDirectory(dirPath: string): string {
+    if (!existsSync(dirPath)) {
+        mkdirSync(dirPath, { recursive: true });
+    }
+
+    return dirPath;
+}
+
+export function getIptvnatorDataRoot(): string {
+    const e2eDataDir = process.env[IPTVNATOR_E2E_DATA_DIR_ENV]?.trim();
+
+    if (e2eDataDir) {
+        return ensureDirectory(e2eDataDir);
+    }
+
+    return ensureDirectory(join(homedir(), '.iptvnator'));
+}
+
+export function getIptvnatorDatabaseDirectory(): string {
+    return ensureDirectory(join(getIptvnatorDataRoot(), 'databases'));
+}
+
+export function getIptvnatorDatabasePath(): string {
+    return join(getIptvnatorDatabaseDirectory(), 'iptvnator.db');
+}
+
+export function getElectronUserDataPath(): string | null {
+    const e2eDataDir = process.env[IPTVNATOR_E2E_DATA_DIR_ENV]?.trim();
+
+    if (!e2eDataDir) {
+        return null;
+    }
+
+    return ensureDirectory(join(e2eDataDir, 'user-data'));
+}
+
+export function getElectronConfigDirectory(): string | null {
+    const e2eDataDir = process.env[IPTVNATOR_E2E_DATA_DIR_ENV]?.trim();
+
+    if (!e2eDataDir) {
+        return null;
+    }
+
+    return ensureDirectory(join(e2eDataDir, 'config'));
+}
diff --git a/libs/shared/database/src/lib/schema.ts b/libs/shared/database/src/lib/schema.ts
new file mode 100644
index 0000000..d34a53e
--- /dev/null
+++ b/libs/shared/database/src/lib/schema.ts
@@ -0,0 +1,320 @@
+/**
+ * Drizzle ORM schema for IPTVnator database
+ * This schema defines the structure for Xtream Codes API data storage
+ *
+ * Single source of truth for database schema - used by:
+ * - electron-backend (full read-write access)
+ * - agent-backend (read-only access for AI queries)
+ */
+
+import { sql } from 'drizzle-orm';
+import {
+    index,
+    integer,
+    sqliteTable,
+    text,
+    uniqueIndex,
+} from 'drizzle-orm/sqlite-core';
+
+// Playlists table
+export const playlists = sqliteTable('playlists', {
+    id: text('id').primaryKey(),
+    name: text('name').notNull(),
+    serverUrl: text('serverUrl'),
+    username: text('username'),
+    password: text('password'),
+    dateCreated: text('date_created').default(sql`CURRENT_TIMESTAMP`),
+    lastUpdated: text('last_updated'),
+    type: text('type', {
+        enum: ['xtream', 'stalker', 'm3u-file', 'm3u-text', 'm3u-url'],
+    }).notNull(),
+    userAgent: text('userAgent'),
+    origin: text('origin'),
+    referrer: text('referrer'),
+    filePath: text('filePath'),
+    autoRefresh: integer('autoRefresh', { mode: 'boolean' }).default(false),
+    macAddress: text('macAddress'),
+    url: text('url'),
+    portalUrl: text('portal_url'),
+    count: integer('count'),
+    importDate: text('import_date'),
+    updateDate: integer('update_date'),
+    position: integer('position'),
+    favorites: text('favorites'),
+    recentlyViewed: text('recently_viewed'),
+    payload: text('payload'),
+    lastUsage: text('last_usage'),
+});
+
+// App key-value state table (e.g. one-time migration flags)
+export const appState = sqliteTable('app_state', {
+    key: text('key').primaryKey(),
+    value: text('value').notNull(),
+    updatedAt: text('updated_at').default(sql`CURRENT_TIMESTAMP`),
+});
+
+// Categories table
+export const categories = sqliteTable(
+    'categories',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        playlistId: text('playlist_id')
+            .notNull()
+            .references(() => playlists.id, { onDelete: 'cascade' }),
+        name: text('name').notNull(),
+        type: text('type', { enum: ['live', 'movies', 'series'] }).notNull(),
+        xtreamId: integer('xtream_id').notNull(),
+        hidden: integer('hidden', { mode: 'boolean' }).default(false),
+    },
+    (table) => ({
+        playlistIdx: index('idx_categories_playlist').on(table.playlistId),
+        typeIdx: index('idx_categories_type').on(table.type),
+        playlistTypeXtreamUnique: uniqueIndex(
+            'categories_playlist_type_xtream_unique'
+        ).on(table.playlistId, table.type, table.xtreamId),
+    })
+);
+
+// Content table (streams/VODs/series)
+export const content = sqliteTable(
+    'content',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        categoryId: integer('category_id')
+            .notNull()
+            .references(() => categories.id, { onDelete: 'cascade' }),
+        title: text('title').notNull(),
+        rating: text('rating'),
+        added: text('added'),
+        posterUrl: text('poster_url'),
+        backdropUrl: text('backdrop_url'),
+        epgChannelId: text('epg_channel_id'),
+        tvArchive: integer('tv_archive'),
+        tvArchiveDuration: integer('tv_archive_duration'),
+        directSource: text('direct_source'),
+        xtreamId: integer('xtream_id').notNull(),
+        type: text('type', { enum: ['live', 'movie', 'series'] }).notNull(),
+    },
+    (table) => ({
+        typeIdx: index('idx_content_type').on(table.type),
+        categoryIdx: index('idx_content_category').on(table.categoryId),
+        titleIdx: index('idx_content_title').on(table.title),
+        xtreamIdx: index('idx_content_xtream').on(table.xtreamId),
+        categoryTypeXtreamUnique: uniqueIndex(
+            'content_category_type_xtream_unique'
+        ).on(table.categoryId, table.type, table.xtreamId),
+        typeAddedIdx: index('idx_content_type_added').on(
+            table.type,
+            table.added
+        ),
+    })
+);
+
+// Recently viewed table
+export const recentlyViewed = sqliteTable(
+    'recently_viewed',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        contentId: integer('content_id')
+            .notNull()
+            .references(() => content.id, { onDelete: 'cascade' }),
+        playlistId: text('playlist_id')
+            .notNull()
+            .references(() => playlists.id, { onDelete: 'cascade' }),
+        viewedAt: text('viewed_at').default(sql`CURRENT_TIMESTAMP`),
+    },
+    (table) => ({
+        contentPlaylistUnique: uniqueIndex(
+            'recently_viewed_content_playlist_unique'
+        ).on(table.contentId, table.playlistId),
+        playlistIdx: index('recently_viewed_playlist_idx').on(table.playlistId),
+        viewedAtIdx: index('recently_viewed_viewed_at_idx').on(table.viewedAt),
+    })
+);
+
+// Favorites table
+export const favorites = sqliteTable(
+    'favorites',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        contentId: integer('content_id')
+            .notNull()
+            .references(() => content.id, { onDelete: 'cascade' }),
+        playlistId: text('playlist_id')
+            .notNull()
+            .references(() => playlists.id, { onDelete: 'cascade' }),
+        addedAt: text('added_at').default(sql`CURRENT_TIMESTAMP`),
+        /** Display order position in the global favorites list (lower = first) */
+        position: integer('position').default(0),
+    },
+    (table) => ({
+        contentPlaylistUnique: uniqueIndex(
+            'favorites_content_playlist_unique'
+        ).on(table.contentId, table.playlistId),
+        playlistIdx: index('favorites_playlist_idx').on(table.playlistId),
+        contentIdx: index('favorites_content_idx').on(table.contentId),
+    })
+);
+
+// EPG Channels table
+export const epgChannels = sqliteTable(
+    'epg_channels',
+    {
+        id: text('id').primaryKey(), // Channel ID from EPG source
+        displayName: text('display_name').notNull(),
+        iconUrl: text('icon_url'),
+        url: text('url'),
+        sourceUrl: text('source_url').notNull(), // Which EPG URL this came from
+        updatedAt: text('updated_at').default(sql`CURRENT_TIMESTAMP`),
+    },
+    (table) => ({
+        sourceIdx: index('idx_epg_channels_source').on(table.sourceUrl),
+        nameIdx: index('idx_epg_channels_name').on(table.displayName),
+    })
+);
+
+// EPG Programs table
+export const epgPrograms = sqliteTable(
+    'epg_programs',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        channelId: text('channel_id')
+            .notNull()
+            .references(() => epgChannels.id, { onDelete: 'cascade' }),
+        start: text('start').notNull(), // ISO datetime
+        stop: text('stop').notNull(), // ISO datetime
+        title: text('title').notNull(),
+        description: text('description'),
+        category: text('category'),
+        iconUrl: text('icon_url'),
+        rating: text('rating'),
+        episodeNum: text('episode_num'),
+    },
+    (table) => ({
+        channelIdx: index('idx_epg_programs_channel').on(table.channelId),
+        startIdx: index('idx_epg_programs_start').on(table.start),
+        stopIdx: index('idx_epg_programs_stop').on(table.stop),
+        timeRangeIdx: index('idx_epg_programs_time_range').on(
+            table.channelId,
+            table.start,
+            table.stop
+        ),
+    })
+);
+
+// Playback Positions table
+export const playbackPositions = sqliteTable(
+    'playback_positions',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        playlistId: text('playlist_id')
+            .notNull()
+            .references(() => playlists.id, { onDelete: 'cascade' }),
+        // For VOD: store xtream_id of the movie
+        // For Series: store episode ID (from XtreamSerieEpisode.id)
+        contentXtreamId: integer('content_xtream_id').notNull(),
+        // 'vod' | 'episode'
+        contentType: text('content_type', {
+            enum: ['vod', 'episode'],
+        }).notNull(),
+        // For episodes: store series xtream_id for grouping
+        seriesXtreamId: integer('series_xtream_id'),
+        // For episodes: store season and episode numbers for display
+        seasonNumber: integer('season_number'),
+        episodeNumber: integer('episode_number'),
+        // Playback position in seconds
+        positionSeconds: integer('position_seconds').notNull().default(0),
+        // Total duration in seconds (for percentage calculation)
+        durationSeconds: integer('duration_seconds'),
+        // Last updated timestamp
+        updatedAt: text('updated_at').default(sql`CURRENT_TIMESTAMP`),
+    },
+    (table) => ({
+        // Unique constraint: one position per content per playlist
+        contentPlaylistUnique: uniqueIndex(
+            'playback_positions_content_playlist_unique'
+        ).on(table.contentXtreamId, table.playlistId, table.contentType),
+        playlistIdx: index('playback_positions_playlist_idx').on(
+            table.playlistId
+        ),
+        seriesIdx: index('playback_positions_series_idx').on(
+            table.seriesXtreamId
+        ),
+        updatedIdx: index('playback_positions_updated_idx').on(table.updatedAt),
+    })
+);
+
+// Type exports for TypeScript
+export type Playlist = typeof playlists.$inferSelect;
+export type NewPlaylist = typeof playlists.$inferInsert;
+export type AppState = typeof appState.$inferSelect;
+export type NewAppState = typeof appState.$inferInsert;
+
+export type Category = typeof categories.$inferSelect;
+export type NewCategory = typeof categories.$inferInsert;
+
+export type Content = typeof content.$inferSelect;
+export type NewContent = typeof content.$inferInsert;
+
+export type RecentlyViewed = typeof recentlyViewed.$inferSelect;
+export type NewRecentlyViewed = typeof recentlyViewed.$inferInsert;
+
+export type Favorite = typeof favorites.$inferSelect;
+export type NewFavorite = typeof favorites.$inferInsert;
+
+export type EpgChannel = typeof epgChannels.$inferSelect;
+export type NewEpgChannel = typeof epgChannels.$inferInsert;
+
+export type EpgProgramDb = typeof epgPrograms.$inferSelect;
+export type NewEpgProgramDb = typeof epgPrograms.$inferInsert;
+
+export type PlaybackPosition = typeof playbackPositions.$inferSelect;
+export type NewPlaybackPosition = typeof playbackPositions.$inferInsert;
+
+// Downloads table
+export const downloads = sqliteTable(
+    'downloads',
+    {
+        id: integer('id').primaryKey({ autoIncrement: true }),
+        playlistId: text('playlist_id')
+            .notNull()
+            .references(() => playlists.id, { onDelete: 'cascade' }),
+        // Content identifiers
+        xtreamId: integer('xtream_id').notNull(),
+        contentType: text('content_type', {
+            enum: ['vod', 'episode'],
+        }).notNull(),
+        // For episodes: store series info
+        seriesXtreamId: integer('series_xtream_id'),
+        seasonNumber: integer('season_number'),
+        episodeNumber: integer('episode_number'),
+        // Download metadata
+        title: text('title').notNull(),
+        url: text('url').notNull(),
+        fileName: text('file_name'),
+        filePath: text('file_path'),
+        posterUrl: text('poster_url'),
+        // Download progress
+        status: text('status', {
+            enum: ['queued', 'downloading', 'completed', 'failed', 'canceled'],
+        })
+            .notNull()
+            .default('queued'),
+        bytesDownloaded: integer('bytes_downloaded').default(0),
+        totalBytes: integer('total_bytes'),
+        errorMessage: text('error_message'),
+        // Timestamps
+        createdAt: text('created_at').default(sql`CURRENT_TIMESTAMP`),
+        updatedAt: text('updated_at').default(sql`CURRENT_TIMESTAMP`),
+    },
+    (table) => ({
+        playlistIdx: index('downloads_playlist_idx').on(table.playlistId),
+        statusIdx: index('downloads_status_idx').on(table.status),
+        xtreamPlaylistUnique: uniqueIndex(
+            'downloads_xtream_playlist_unique'
+        ).on(table.xtreamId, table.playlistId, table.contentType),
+    })
+);
+
+export type Download = typeof downloads.$inferSelect;
+export type NewDownload = typeof downloads.$inferInsert;
diff --git a/libs/shared/database/tsconfig.json b/libs/shared/database/tsconfig.json
new file mode 100644
index 0000000..106e941
--- /dev/null
+++ b/libs/shared/database/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "importHelpers": true,
+        "noImplicitOverride": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "esModuleInterop": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/shared/database/tsconfig.lib.json b/libs/shared/database/tsconfig.lib.json
new file mode 100644
index 0000000..2b245b0
--- /dev/null
+++ b/libs/shared/database/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "types": ["node"]
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/shared/interfaces/eslint.config.mjs b/libs/shared/interfaces/eslint.config.mjs
new file mode 100644
index 0000000..f8e3541
--- /dev/null
+++ b/libs/shared/interfaces/eslint.config.mjs
@@ -0,0 +1,21 @@
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    {
+        files: ['**/*.json'],
+        rules: {
+            '@nx/dependency-checks': [
+                'error',
+                {
+                    ignoredFiles: [
+                        '{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}',
+                    ],
+                },
+            ],
+        },
+        languageOptions: {
+            parser: await import('jsonc-eslint-parser'),
+        },
+    },
+];
diff --git a/libs/shared/interfaces/jest.config.ts b/libs/shared/interfaces/jest.config.ts
new file mode 100644
index 0000000..038ae63
--- /dev/null
+++ b/libs/shared/interfaces/jest.config.ts
@@ -0,0 +1,13 @@
+export default {
+    displayName: 'shared-interfaces',
+    preset: '../../../jest.preset.js',
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.[tj]s$': [
+            'ts-jest',
+            { tsconfig: '<rootDir>/tsconfig.spec.json' },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../../coverage/libs/shared/interfaces',
+};
diff --git a/libs/shared/interfaces/package.json b/libs/shared/interfaces/package.json
new file mode 100644
index 0000000..e39f9a8
--- /dev/null
+++ b/libs/shared/interfaces/package.json
@@ -0,0 +1,11 @@
+{
+    "name": "shared-interfaces",
+    "version": "0.0.1",
+    "private": true,
+    "type": "commonjs",
+    "main": "./src/index.js",
+    "types": "./src/index.d.ts",
+    "dependencies": {
+        "tslib": "^2.3.0"
+    }
+}
diff --git a/libs/shared/interfaces/project.json b/libs/shared/interfaces/project.json
new file mode 100644
index 0000000..e7bb02e
--- /dev/null
+++ b/libs/shared/interfaces/project.json
@@ -0,0 +1,27 @@
+{
+    "name": "shared-interfaces",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/shared/interfaces/src",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:shared-contracts", "type:util"],
+    "targets": {
+        "build": {
+            "executor": "@nx/js:tsc",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/shared/interfaces",
+                "main": "libs/shared/interfaces/src/index.ts",
+                "tsConfig": "libs/shared/interfaces/tsconfig.lib.json",
+                "assets": []
+            }
+        },
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/shared/interfaces/jest.config.ts",
+                "tsConfig": "libs/shared/interfaces/tsconfig.spec.json"
+            }
+        }
+    }
+}
diff --git a/libs/shared/interfaces/src/index.ts b/libs/shared/interfaces/src/index.ts
new file mode 100644
index 0000000..5de78c7
--- /dev/null
+++ b/libs/shared/interfaces/src/index.ts
@@ -0,0 +1,50 @@
+export * from './lib/channel.interface';
+export * from './lib/channel.model';
+export * from './lib/epg-channel-metadata.model';
+export * from './lib/epg-channel-with-programs.interface';
+export * from './lib/epg-channel.model';
+export * from './lib/epg-item.interface';
+export * from './lib/epg-program.model';
+export * from './lib/external-player-session.interface';
+export * from './lib/indexed-db.config';
+export * from './lib/ipc-command.class';
+export * from './lib/ipc-commands';
+export * from './lib/language.enum';
+export * from './lib/parsed-playlist.interface';
+export * from './lib/playback-position.interface';
+export * from './lib/playlist-backup.interface';
+export * from './lib/playlist-meta.type';
+export * from './lib/playlist-recently-viewed.interface';
+export * from './lib/playlist-recently-viewed.utils';
+export * from './lib/playlist-refresh.interface';
+export * from './lib/playlist.interface';
+export * from './lib/portal-activity-item.interface';
+export * from './lib/portal-debug.interface';
+export * from './lib/portal-playback.interface';
+export * from './lib/settings.interface';
+export * from './lib/stalker-portal-actions.enum';
+export * from './lib/store-keys.enum';
+export * from './lib/stream-format.enum';
+export * from './lib/theme.enum';
+export * from './lib/xtream-account-info-dialog-data.interface';
+export * from './lib/xtream-category.interface';
+export * from './lib/xtream-code-actions';
+export * from './lib/xtream-item.interface';
+export * from './lib/xtream-live-stream.interface';
+export * from './lib/xtream-response.interface';
+export * from './lib/xtream-restore-state.util';
+export * from './lib/xtream-serie-details.interface';
+export * from './lib/xtream-serie-item.interface';
+export * from './lib/xtream-vod-details.interface';
+export * from './lib/xtream-vod-stream.interface';
+export * from './lib/workspace-product-branding.interface';
+
+// Stalker interfaces
+export * from './lib/stalker-item.normalizer';
+export * from './lib/stalker-portal-item.interface';
+export * from './lib/stalker-serial-details.interface';
+export * from './lib/stalker-vod-details.interface';
+
+// Unified VOD details (discriminated union + adapters)
+export * from './lib/vod-details-adapters';
+export * from './lib/vod-details-item.interface';
diff --git a/libs/shared/interfaces/src/lib/channel.interface.ts b/libs/shared/interfaces/src/lib/channel.interface.ts
new file mode 100644
index 0000000..03bef9e
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/channel.interface.ts
@@ -0,0 +1,32 @@
+/**
+ * Represents channel object
+ * TODO: define channel interface in iptv-parser library
+ */
+export interface Channel {
+    id: string;
+    url: string;
+    name: string;
+    group: {
+        title: string;
+    };
+    tvg: {
+        id: string;
+        name: string;
+        url: string;
+        logo: string;
+        rec: string;
+    };
+    epgParams?: string;
+    timeshift?: string;
+    catchup?: {
+        type?: string;
+        source?: string;
+        days?: string;
+    };
+    http: {
+        referrer: string;
+        'user-agent': string;
+        origin: string;
+    };
+    radio: string;
+}
diff --git a/libs/shared/interfaces/src/lib/channel.model.ts b/libs/shared/interfaces/src/lib/channel.model.ts
new file mode 100644
index 0000000..df61322
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/channel.model.ts
@@ -0,0 +1,22 @@
+import { Channel } from './channel.interface';
+
+/**
+ * Creates new channel object based on the given fields
+ * @param params partial channel object
+ */
+export function createChannel(params: Partial<Channel>): Channel {
+    return {
+        id: params?.id || params.url,
+        name: params.name,
+        group: params.group,
+        url: params.url,
+        tvg: params.tvg,
+        timeshift: params.timeshift,
+        catchup: params.catchup,
+        http: params.http,
+        radio: params.radio,
+    } as Channel;
+}
+
+/** Possible sidebar view options */
+export type SidebarView = 'CHANNELS' | 'PLAYLISTS';
diff --git a/libs/shared/interfaces/src/lib/epg-channel-metadata.model.ts b/libs/shared/interfaces/src/lib/epg-channel-metadata.model.ts
new file mode 100644
index 0000000..aed69ac
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/epg-channel-metadata.model.ts
@@ -0,0 +1,9 @@
+/**
+ * Flattened EPG channel metadata returned to the renderer for lookup-based
+ * enrichment of playlist channels.
+ */
+export interface EpgChannelMetadata {
+    id: string;
+    displayName: string;
+    iconUrl: string | null;
+}
diff --git a/libs/shared/interfaces/src/lib/epg-channel-with-programs.interface.ts b/libs/shared/interfaces/src/lib/epg-channel-with-programs.interface.ts
new file mode 100644
index 0000000..94b95ba
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/epg-channel-with-programs.interface.ts
@@ -0,0 +1,17 @@
+import { EpgChannel } from './epg-channel.model';
+import { EpgProgram } from './epg-program.model';
+
+/**
+ * EPG Channel with associated programs
+ */
+export interface EpgChannelWithPrograms extends EpgChannel {
+    programs: EpgProgram[];
+}
+
+/**
+ * EPG Data structure
+ */
+export interface EpgData {
+    channels: EpgChannel[];
+    programs: EpgProgram[];
+}
diff --git a/libs/shared/interfaces/src/lib/epg-channel.model.ts b/libs/shared/interfaces/src/lib/epg-channel.model.ts
new file mode 100644
index 0000000..61f4deb
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/epg-channel.model.ts
@@ -0,0 +1,9 @@
+/**
+ * EPG Channel interface compatible with epg-parser v0.4.0
+ */
+export interface EpgChannel {
+    id: string;
+    displayName: { lang: string; value: string }[];
+    icon: { src: string; width?: number; height?: number }[];
+    url: string[];
+}
diff --git a/libs/shared/interfaces/src/lib/epg-item.interface.ts b/libs/shared/interfaces/src/lib/epg-item.interface.ts
new file mode 100644
index 0000000..9d31fd5
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/epg-item.interface.ts
@@ -0,0 +1,13 @@
+export interface EpgItem {
+    id: string;
+    epg_id: string;
+    title: string;
+    lang: string;
+    start: string;
+    end: string;
+    stop: string;
+    description: string;
+    channel_id: string;
+    start_timestamp: string;
+    stop_timestamp: string;
+}
diff --git a/libs/shared/interfaces/src/lib/epg-program.model.ts b/libs/shared/interfaces/src/lib/epg-program.model.ts
new file mode 100644
index 0000000..63ce100
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/epg-program.model.ts
@@ -0,0 +1,17 @@
+/**
+ * EPG Program interface - flat structure matching database storage
+ */
+export interface EpgProgram {
+    start: string; // ISO string
+    stop: string; // ISO string
+    channel: string;
+    title: string;
+    desc: string | null;
+    category: string | null;
+    startTimestamp?: number | null;
+    stopTimestamp?: number | null;
+    date?: string;
+    episodeNum?: string | null;
+    iconUrl?: string | null;
+    rating?: string | null;
+}
diff --git a/libs/shared/interfaces/src/lib/external-player-session.interface.ts b/libs/shared/interfaces/src/lib/external-player-session.interface.ts
new file mode 100644
index 0000000..868c2bd
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/external-player-session.interface.ts
@@ -0,0 +1,24 @@
+import { PlayerContentInfo } from './portal-playback.interface';
+
+export type ExternalPlayerName = 'mpv' | 'vlc';
+
+export type ExternalPlayerSessionStatus =
+    | 'launching'
+    | 'opened'
+    | 'playing'
+    | 'error'
+    | 'closed';
+
+export interface ExternalPlayerSession {
+    id: string;
+    player: ExternalPlayerName;
+    status: ExternalPlayerSessionStatus;
+    title: string;
+    thumbnail?: string | null;
+    streamUrl: string;
+    contentInfo?: PlayerContentInfo;
+    startedAt: string;
+    updatedAt: string;
+    error?: string;
+    canClose: boolean;
+}
diff --git a/libs/shared/interfaces/src/lib/indexed-db.config.ts b/libs/shared/interfaces/src/lib/indexed-db.config.ts
new file mode 100644
index 0000000..810119e
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/indexed-db.config.ts
@@ -0,0 +1,74 @@
+import { DBConfig } from 'ngx-indexed-db';
+
+/**
+ * Contains names of the database stores
+ */
+export enum DbStores {
+    Playlists = 'playlists',
+}
+
+/** Defines db tables and schema */
+export const dbConfig: DBConfig = {
+    name: 'iptvnator',
+    version: 1,
+    objectStoresMeta: [
+        {
+            store: DbStores.Playlists,
+            storeConfig: { keyPath: '_id', autoIncrement: false },
+            storeSchema: [
+                {
+                    name: '_id',
+                    keypath: '_id',
+                    options: { unique: false },
+                },
+                {
+                    name: 'filename',
+                    keypath: 'filename',
+                    options: { unique: false },
+                },
+                { name: 'title', keypath: 'title', options: { unique: false } },
+                { name: 'count', keypath: 'count', options: { unique: false } },
+                {
+                    name: 'playlist',
+                    keypath: 'playlist',
+                    options: { unique: false },
+                },
+                {
+                    name: 'importDate',
+                    keypath: 'importDate',
+                    options: { unique: false },
+                },
+                {
+                    name: 'lastUsage',
+                    keypath: 'lastUsage',
+                    options: { unique: false },
+                },
+                {
+                    name: 'favorites',
+                    keypath: 'favorites',
+                    options: { unique: false },
+                },
+                {
+                    name: 'recentlyViewed',
+                    keypath: 'recentlyViewed',
+                    options: { unique: false },
+                },
+                {
+                    name: 'autoRefresh',
+                    keypath: 'autoRefresh',
+                    options: { unique: false },
+                },
+                {
+                    name: 'url',
+                    keypath: 'url',
+                    options: { unique: false },
+                },
+                {
+                    name: 'filePath',
+                    keypath: 'filePath',
+                    options: { unique: false },
+                },
+            ],
+        },
+    ],
+};
diff --git a/libs/shared/interfaces/src/lib/ipc-command.class.ts b/libs/shared/interfaces/src/lib/ipc-command.class.ts
new file mode 100644
index 0000000..504683c
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/ipc-command.class.ts
@@ -0,0 +1,9 @@
+export class IpcCommand {
+    constructor(
+        public id: string,
+        public callback: (payload: any) => void
+    ) {
+        this.id = id;
+        this.callback = callback;
+    }
+}
diff --git a/libs/shared/interfaces/src/lib/ipc-commands.ts b/libs/shared/interfaces/src/lib/ipc-commands.ts
new file mode 100644
index 0000000..c26b147
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/ipc-commands.ts
@@ -0,0 +1,56 @@
+// EPG related commands
+export const EPG_FETCH = 'EPG:FETCH';
+export const EPG_FETCH_DONE = 'EPG:FETCH_DONE';
+export const EPG_ERROR = 'EPG:ERROR';
+export const EPG_GET_CHANNELS = 'EPG:GET_CHANNELS';
+export const EPG_GET_CHANNELS_DONE = 'EPG:GET_CHANNELS_DONE';
+export const EPG_GET_CHANNELS_BY_RANGE = 'EPG:EPG_GET_CHANNELS_BY_RANGE';
+export const EPG_GET_CHANNELS_BY_RANGE_RESPONSE =
+    'EPG:EPG_GET_CHANNELS_BY_RANGE_RESPONSE';
+export const EPG_FORCE_FETCH = 'EPG:EPG_FORCE_FETCH';
+
+// Playlist related commands
+export const PLAYLIST_PARSE_BY_URL = 'PLAYLIST:PARSE_PLAYLIST_BY_URL';
+export const PLAYLIST_UPDATE = 'PLAYLIST:UPDATE';
+export const PLAYLIST_REFRESH = 'PLAYLIST:REFRESH';
+export const PLAYLIST_REFRESH_EVENT = 'PLAYLIST:REFRESH_EVENT';
+export const PLAYLIST_CANCEL_REFRESH = 'PLAYLIST:CANCEL_REFRESH';
+
+// General
+export const ERROR = 'ERROR';
+export const OPEN_FILE = 'OPEN_FILE';
+
+// Views
+export const VIEW_SETTINGS = 'VIEW:SETTINGS';
+export const VIEW_ADD_PLAYLIST = 'VIEW:PLAYLISTS';
+
+// Auto-update
+export const AUTO_UPDATE_PLAYLISTS = 'AUTO_UPDATE';
+export const AUTO_UPDATE_PLAYLISTS_RESPONSE = 'AUTO_UPDATE_RESPONSE';
+
+// Experimental
+export const OPEN_MPV_PLAYER = 'OPEN_MPV_PLAYER';
+export const SET_MPV_PLAYER_PATH = 'SET_MPV_PLAYER_PATH';
+export const SET_MPV_REUSE_INSTANCE = 'SET_MPV_REUSE_INSTANCE';
+export const OPEN_VLC_PLAYER = 'OPEN_VLC_PLAYER';
+export const SET_VLC_PLAYER_PATH = 'SET_VLC_PLAYER_PATH';
+export const CLOSE_EXTERNAL_PLAYER_SESSION = 'CLOSE_EXTERNAL_PLAYER_SESSION';
+export const EXTERNAL_PLAYER_SESSION_UPDATE =
+    'EXTERNAL_PLAYER_SESSION_UPDATE';
+
+// Xtream
+export const XTREAM_REQUEST = 'XTREAM_REQUEST';
+export const XTREAM_RESPONSE = 'XTREAM_RESPONSE';
+export const XTREAM_CANCEL_SESSION = 'XTREAM_CANCEL_SESSION';
+
+// Stalker
+export const STALKER_REQUEST = 'STALKER_REQUEST';
+export const STALKER_RESPONSE = 'STALKER_RESPONSE';
+export const PORTAL_DEBUG_EVENT = 'PORTAL_DEBUG_EVENT';
+
+// Settings
+export const SETTINGS_UPDATE = 'SETTINGS_UPDATE';
+export const DELETE_ALL_PLAYLISTS = 'DELETE_ALL_PLAYLISTS';
+
+// Remote Control
+export const REMOTE_CONTROL_CHANGE_CHANNEL = 'REMOTE_CONTROL_CHANGE_CHANNEL';
diff --git a/libs/shared/interfaces/src/lib/language.enum.ts b/libs/shared/interfaces/src/lib/language.enum.ts
new file mode 100644
index 0000000..2373f31
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/language.enum.ts
@@ -0,0 +1,23 @@
+/**
+ * Enum with all languages that are available in the application
+ */
+export enum Language {
+    ARABIC = 'ar',
+    MOROCCAN_ARABIC = 'ary',
+    ENGLISH = 'en',
+    KOREAN = 'ko',
+    RUSSIAN = 'ru',
+    GERMAN = 'de',
+    SPANISH = 'es',
+    CHINESE = 'zh',
+    TRADITIONAL_CHINESE = 'zhtw',
+    FRENCH = 'fr',
+    ITALIAN = 'it',
+    TURKISH = 'tr',
+    JAPANESE = 'ja',
+    DUTCH = 'nl',
+    BELARUSIAN = 'by',
+    POLISH = 'pl',
+    PORTUGUESE = 'pt',
+    GREEK = 'el',
+}
diff --git a/libs/shared/interfaces/src/lib/parsed-playlist.interface.ts b/libs/shared/interfaces/src/lib/parsed-playlist.interface.ts
new file mode 100644
index 0000000..79c623e
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/parsed-playlist.interface.ts
@@ -0,0 +1,36 @@
+export interface ParsedPlaylist {
+    header: {
+        attrs: {
+            'x-tvg-url': string;
+        };
+        raw: string;
+    };
+    items: ParsedPlaylistItem[];
+}
+
+export interface ParsedPlaylistItem {
+    name: string;
+    tvg: {
+        id: string;
+        name: string;
+        url: string;
+        logo: string;
+        rec: string;
+    };
+    group: {
+        title: string;
+    };
+    http: {
+        referrer: string;
+        'user-agent': string;
+    };
+    url: string;
+    raw: string;
+    catchup?: {
+        type?: string;
+        source?: string;
+        days?: string;
+    };
+    timeshift?: string;
+    radio?: string;
+}
diff --git a/libs/shared/interfaces/src/lib/playback-position.interface.ts b/libs/shared/interfaces/src/lib/playback-position.interface.ts
new file mode 100644
index 0000000..935a215
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playback-position.interface.ts
@@ -0,0 +1,15 @@
+/**
+ * Playback position data for resume functionality
+ */
+export interface PlaybackPositionData {
+    contentXtreamId: number;
+    contentType: 'vod' | 'episode';
+    seriesXtreamId?: number;
+    seasonNumber?: number;
+    episodeNumber?: number;
+    positionSeconds: number;
+    durationSeconds?: number;
+    playlistId?: string;
+    updatedAt?: string;
+    sessionId?: string;
+}
diff --git a/libs/shared/interfaces/src/lib/playlist-backup.interface.ts b/libs/shared/interfaces/src/lib/playlist-backup.interface.ts
new file mode 100644
index 0000000..2ff9300
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playlist-backup.interface.ts
@@ -0,0 +1,113 @@
+import { PlaybackPositionData } from './playback-position.interface';
+import { M3uRecentlyViewedItem } from './playlist-recently-viewed.interface';
+import { StalkerPortalItem } from './stalker-portal-item.interface';
+
+export const PLAYLIST_BACKUP_KIND = 'iptvnator-playlist-backup';
+export const PLAYLIST_BACKUP_VERSION = 1;
+
+export type PlaylistBackupPortalType = 'm3u' | 'xtream' | 'stalker';
+export type M3uBackupSourceKind = 'url' | 'file' | 'text';
+export type XtreamBackupContentType = 'live' | 'movie' | 'series';
+export type XtreamBackupCategoryType = 'live' | 'movies' | 'series';
+
+export interface PlaylistBackupSettings {
+    epgUrls: string[];
+}
+
+export interface PlaylistBackupBaseEntry {
+    portalType: PlaylistBackupPortalType;
+    exportedId: string;
+    title: string;
+    autoRefresh: boolean;
+    position?: number;
+}
+
+export interface M3uPlaylistBackupEntry extends PlaylistBackupBaseEntry {
+    portalType: 'm3u';
+    source: {
+        kind: M3uBackupSourceKind;
+        rawM3u: string;
+        url?: string;
+        userAgent?: string;
+        referrer?: string;
+        origin?: string;
+        filePathHint?: string;
+    };
+    userState: {
+        favorites: string[];
+        recentlyViewed: M3uRecentlyViewedItem[];
+        hiddenGroupTitles: string[];
+    };
+}
+
+export interface XtreamBackupHiddenCategory {
+    categoryType: XtreamBackupCategoryType;
+    xtreamId: number;
+}
+
+export interface XtreamBackupFavoriteItem {
+    contentType: XtreamBackupContentType;
+    xtreamId: number;
+    addedAt?: string;
+    position?: number | null;
+}
+
+export interface XtreamBackupRecentlyViewedItem {
+    contentType: XtreamBackupContentType;
+    xtreamId: number;
+    viewedAt: string;
+}
+
+export interface XtreamBackupUserState {
+    hiddenCategories: XtreamBackupHiddenCategory[];
+    favorites: XtreamBackupFavoriteItem[];
+    recentlyViewed: XtreamBackupRecentlyViewedItem[];
+    playbackPositions: PlaybackPositionData[];
+}
+
+export interface XtreamPlaylistBackupEntry extends PlaylistBackupBaseEntry {
+    portalType: 'xtream';
+    connection: {
+        serverUrl: string;
+        username: string;
+        password?: string;
+    };
+    userState: XtreamBackupUserState;
+}
+
+export interface StalkerPlaylistBackupEntry extends PlaylistBackupBaseEntry {
+    portalType: 'stalker';
+    connection: {
+        portalUrl: string;
+        macAddress: string;
+        isFullStalkerPortal?: boolean;
+        username?: string;
+        password?: string;
+        userAgent?: string;
+        referrer?: string;
+        origin?: string;
+        stalkerSerialNumber?: string;
+        stalkerDeviceId1?: string;
+        stalkerDeviceId2?: string;
+        stalkerSignature1?: string;
+        stalkerSignature2?: string;
+    };
+    userState: {
+        favorites: StalkerPortalItem[];
+        recentlyViewed: StalkerPortalItem[];
+    };
+}
+
+export type PlaylistBackupEntry =
+    | M3uPlaylistBackupEntry
+    | XtreamPlaylistBackupEntry
+    | StalkerPlaylistBackupEntry;
+
+export interface PlaylistBackupManifestV1 {
+    kind: typeof PLAYLIST_BACKUP_KIND;
+    version: typeof PLAYLIST_BACKUP_VERSION;
+    exportedAt: string;
+    includeSecrets: boolean;
+    settings?: PlaylistBackupSettings;
+    playlists: PlaylistBackupEntry[];
+}
diff --git a/libs/shared/interfaces/src/lib/playlist-meta.type.ts b/libs/shared/interfaces/src/lib/playlist-meta.type.ts
new file mode 100644
index 0000000..5a0ea96
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playlist-meta.type.ts
@@ -0,0 +1,33 @@
+import { Playlist } from './playlist.interface';
+
+export type PlaylistMeta = Pick<
+    Playlist,
+    | 'count'
+    | 'title'
+    | 'filename'
+    | '_id'
+    | 'url'
+    | 'importDate'
+    | 'userAgent'
+    | 'referrer'
+    | 'origin'
+    | 'filePath'
+    | 'updateDate'
+    | 'updateState'
+    | 'position'
+    | 'autoRefresh'
+    | 'favorites'
+    | 'serverUrl'
+    | 'username'
+    | 'password'
+    | 'macAddress'
+    | 'hiddenGroupTitles'
+    | 'portalUrl'
+    | 'recentlyViewed'
+    | 'isFullStalkerPortal'
+    | 'stalkerSerialNumber'
+    | 'stalkerDeviceId1'
+    | 'stalkerDeviceId2'
+    | 'stalkerSignature1'
+    | 'stalkerSignature2'
+>;
diff --git a/libs/shared/interfaces/src/lib/playlist-recently-viewed.interface.ts b/libs/shared/interfaces/src/lib/playlist-recently-viewed.interface.ts
new file mode 100644
index 0000000..679b8c1
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playlist-recently-viewed.interface.ts
@@ -0,0 +1,34 @@
+import { StalkerPortalItem } from './stalker-portal-item.interface';
+
+export interface M3uRecentlyViewedItem {
+    source: 'm3u';
+    id: string;
+    url: string;
+    title: string;
+    channel_id?: string;
+    poster_url?: string;
+    tvg_id?: string;
+    tvg_name?: string;
+    group_title?: string;
+    category_id: 'live';
+    added_at: string | number;
+}
+
+export type PlaylistRecentlyViewedItem =
+    | M3uRecentlyViewedItem
+    | StalkerPortalItem;
+
+export function isM3uRecentlyViewedItem(
+    item: unknown
+): item is M3uRecentlyViewedItem {
+    if (!item || typeof item !== 'object') {
+        return false;
+    }
+
+    const candidate = item as Record<string, unknown>;
+    return (
+        candidate['source'] === 'm3u' &&
+        typeof candidate['url'] === 'string' &&
+        candidate['url'].trim().length > 0
+    );
+}
diff --git a/libs/shared/interfaces/src/lib/playlist-recently-viewed.utils.ts b/libs/shared/interfaces/src/lib/playlist-recently-viewed.utils.ts
new file mode 100644
index 0000000..ab037c7
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playlist-recently-viewed.utils.ts
@@ -0,0 +1,117 @@
+import { PlaylistMeta } from './playlist-meta.type';
+import { PortalRecentItem } from './portal-activity-item.interface';
+import {
+    extractStalkerItemId,
+    extractStalkerItemPoster,
+    extractStalkerItemTitle,
+    extractStalkerItemType,
+    normalizeStalkerDate,
+} from './stalker-item.normalizer';
+import {
+    PlaylistRecentlyViewedItem,
+    isM3uRecentlyViewedItem,
+} from './playlist-recently-viewed.interface';
+
+interface PlaylistRecentLabels {
+    stalker: string;
+    m3u: string;
+}
+
+function getPlaylistRecentItems(
+    playlist: PlaylistMeta
+): PlaylistRecentlyViewedItem[] {
+    return Array.isArray(playlist.recentlyViewed)
+        ? (playlist.recentlyViewed as PlaylistRecentlyViewedItem[])
+        : [];
+}
+
+function mapStalkerPlaylistRecentItems(
+    playlist: PlaylistMeta,
+    defaultPlaylistName: string
+): PortalRecentItem[] {
+    return getPlaylistRecentItems(playlist).reduce<PortalRecentItem[]>(
+        (acc, rawItem, index) => {
+            if (isM3uRecentlyViewedItem(rawItem)) {
+                return acc;
+            }
+
+            const item = (rawItem ?? {}) as Record<string, unknown>;
+            const id = extractStalkerItemId(item, playlist._id, index);
+
+            acc.push({
+                id,
+                title: extractStalkerItemTitle(item),
+                type: extractStalkerItemType(item),
+                playlist_id: playlist._id,
+                playlist_name: playlist.title || defaultPlaylistName,
+                viewed_at: normalizeStalkerDate(item['added_at']),
+                category_id: String(item['category_id'] ?? ''),
+                xtream_id: id,
+                poster_url: extractStalkerItemPoster(item),
+                source: 'stalker',
+                stalker_item: rawItem,
+            });
+
+            return acc;
+        },
+        []
+    );
+}
+
+function mapM3uPlaylistRecentItems(
+    playlist: PlaylistMeta,
+    defaultPlaylistName: string
+): PortalRecentItem[] {
+    return getPlaylistRecentItems(playlist).reduce<PortalRecentItem[]>(
+        (acc, rawItem) => {
+            if (!isM3uRecentlyViewedItem(rawItem)) {
+                return acc;
+            }
+
+            const channelUrl = rawItem.url.trim();
+            if (!channelUrl) {
+                return acc;
+            }
+
+            acc.push({
+                id: rawItem.id || channelUrl,
+                title:
+                    rawItem.title?.trim() ||
+                    rawItem.tvg_name?.trim() ||
+                    rawItem.channel_id ||
+                    channelUrl,
+                type: 'live',
+                playlist_id: playlist._id,
+                playlist_name: playlist.title || defaultPlaylistName,
+                viewed_at: normalizeStalkerDate(rawItem.added_at),
+                category_id: rawItem.category_id || 'live',
+                xtream_id: channelUrl,
+                poster_url: rawItem.poster_url || undefined,
+                source: 'm3u',
+            });
+
+            return acc;
+        },
+        []
+    );
+}
+
+export function buildPlaylistRecentItems(
+    playlists: PlaylistMeta[],
+    labels: PlaylistRecentLabels
+): PortalRecentItem[] {
+    return playlists.reduce<PortalRecentItem[]>((acc, playlist) => {
+        if (playlist.macAddress) {
+            acc.push(
+                ...mapStalkerPlaylistRecentItems(playlist, labels.stalker)
+            );
+            return acc;
+        }
+
+        if (!playlist.serverUrl) {
+            acc.push(...mapM3uPlaylistRecentItems(playlist, labels.m3u));
+        }
+
+        return acc;
+    }, []);
+}
diff --git a/libs/shared/interfaces/src/lib/playlist-refresh.interface.ts b/libs/shared/interfaces/src/lib/playlist-refresh.interface.ts
new file mode 100644
index 0000000..87ad106
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playlist-refresh.interface.ts
@@ -0,0 +1,28 @@
+export type PlaylistRefreshPhase =
+    | 'fetching'
+    | 'reading-file'
+    | 'parsing'
+    | 'saving';
+
+export type PlaylistRefreshStatus =
+    | 'started'
+    | 'progress'
+    | 'completed'
+    | 'cancelled'
+    | 'error';
+
+export interface PlaylistRefreshEvent {
+    operationId: string;
+    playlistId: string;
+    phase?: PlaylistRefreshPhase;
+    status: PlaylistRefreshStatus;
+    error?: string;
+}
+
+export interface PlaylistRefreshPayload {
+    operationId: string;
+    playlistId: string;
+    title: string;
+    filePath?: string;
+    url?: string;
+}
diff --git a/libs/shared/interfaces/src/lib/playlist.interface.ts b/libs/shared/interfaces/src/lib/playlist.interface.ts
new file mode 100644
index 0000000..9c95962
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/playlist.interface.ts
@@ -0,0 +1,70 @@
+import { PlaylistRecentlyViewedItem } from './playlist-recently-viewed.interface';
+import { StalkerPortalItem } from './stalker-portal-item.interface';
+
+/**
+ * An interface that describe the possible states of the playlist update/refresh process
+ */
+export enum PlaylistUpdateState {
+    UPDATED,
+    IN_PROGRESS,
+    NOT_UPDATED,
+}
+
+/**
+ * Describes playlist interface
+ */
+export interface Playlist {
+    _id: string;
+    title: string;
+    filename?: string;
+    playlist?: any;
+    importDate: string;
+    lastUsage: string;
+    /**
+     * M3U playlists store channel URL strings (`string[]`).
+     * Stalker portals store full item objects (`StalkerPortalItem[]`).
+     */
+    favorites?: (string | StalkerPortalItem)[];
+    items?: unknown[];
+    header?: unknown;
+    count: number;
+    url?: string;
+    userAgent?: string;
+    referrer?: string;
+    origin?: string;
+    filePath?: string;
+    autoRefresh: boolean;
+    updateDate?: number;
+    updateState?: PlaylistUpdateState;
+    position?: number;
+    isTemporary?: boolean;
+    serverUrl?: string;
+    username?: string;
+    password?: string;
+    macAddress?: string;
+    portalUrl?: string;
+    recentlyViewed?: PlaylistRecentlyViewedItem[];
+    /** Indicates if this is a full stalker portal URL (e.g., /stalker_portal/c) requiring handshake authentication */
+    isFullStalkerPortal?: boolean;
+    /** Session token for full stalker portal authentication - persisted for session */
+    stalkerToken?: string;
+    /** Serial number for stalker portal - generated once and stored for consistency */
+    stalkerSerialNumber?: string;
+    /** Optional device ID 1 for stalker portal - if not provided, auto-generated from MAC */
+    stalkerDeviceId1?: string;
+    /** Optional device ID 2 for stalker portal - if not provided, auto-generated from MAC */
+    stalkerDeviceId2?: string;
+    /** Optional signature 1 for stalker portal - required by some portals for device verification */
+    stalkerSignature1?: string;
+    /** Optional signature 2 for stalker portal - required by some portals for device verification */
+    stalkerSignature2?: string;
+    /** Account info from get_profile call */
+    stalkerAccountInfo?: {
+        login?: string;
+        expireDate?: number;
+        tariffPlanName?: string;
+        status?: number;
+    };
+    /** Hidden M3U group titles for the groups view */
+    hiddenGroupTitles?: string[];
+}
diff --git a/libs/shared/interfaces/src/lib/portal-activity-item.interface.ts b/libs/shared/interfaces/src/lib/portal-activity-item.interface.ts
new file mode 100644
index 0000000..548fdad
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/portal-activity-item.interface.ts
@@ -0,0 +1,44 @@
+import {
+    PortalActivityType,
+    StalkerPortalItem,
+} from './stalker-portal-item.interface';
+
+/**
+ * Base interface for cross-provider activity items (recently viewed,
+ * favorites) displayed on the dashboard and in global lists.
+ */
+export interface PortalActivityItem {
+    id: string | number;
+    title: string;
+    type: PortalActivityType;
+    playlist_id: string;
+    playlist_name?: string;
+    category_id: string | number;
+    xtream_id: string | number;
+    poster_url?: string;
+    /**
+     * Wide backdrop URL (typically 16:9), persisted when the user first views
+     * the detail page. Absent for stalker and for items that have never had
+     * their detail page opened. Dashboards should fall back to a blurred
+     * `poster_url` when undefined.
+     */
+    backdrop_url?: string;
+    source?: 'xtream' | 'stalker' | 'm3u';
+    /** Original stalker item for navigation state; undefined for xtream. */
+    stalker_item?: StalkerPortalItem;
+}
+
+/** A recently-viewed item with a `viewed_at` timestamp. */
+export interface PortalRecentItem extends PortalActivityItem {
+    viewed_at: string;
+}
+
+/** A favorite item with an `added_at` timestamp. */
+export interface PortalFavoriteItem extends PortalActivityItem {
+    added_at: string;
+}
+
+/** A recently-added catalog item with an `added_at` timestamp. */
+export interface PortalAddedItem extends PortalActivityItem {
+    added_at: string;
+}
diff --git a/libs/shared/interfaces/src/lib/portal-debug.interface.ts b/libs/shared/interfaces/src/lib/portal-debug.interface.ts
new file mode 100644
index 0000000..cbc1938
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/portal-debug.interface.ts
@@ -0,0 +1,21 @@
+export type PortalDebugProvider = 'xtream' | 'stalker';
+
+export type PortalDebugTransport =
+    | 'electron-main'
+    | 'electron-renderer'
+    | 'pwa-http';
+
+export type PortalDebugStatus = 'success' | 'error';
+
+export interface PortalDebugEvent {
+    requestId: string;
+    provider: PortalDebugProvider;
+    operation: string;
+    transport: PortalDebugTransport;
+    startedAt: string;
+    durationMs: number;
+    status: PortalDebugStatus;
+    request: unknown;
+    response?: unknown;
+    error?: unknown;
+}
diff --git a/libs/shared/interfaces/src/lib/portal-playback.interface.ts b/libs/shared/interfaces/src/lib/portal-playback.interface.ts
new file mode 100644
index 0000000..1a4d3c7
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/portal-playback.interface.ts
@@ -0,0 +1,21 @@
+import { PlaybackPositionData } from './playback-position.interface';
+
+export interface PlayerContentInfo
+    extends Omit<
+        PlaybackPositionData,
+        'positionSeconds' | 'durationSeconds' | 'updatedAt'
+    > {
+    playlistId: string;
+}
+
+export interface ResolvedPortalPlayback {
+    streamUrl: string;
+    title: string;
+    thumbnail?: string | null;
+    startTime?: number;
+    contentInfo?: PlayerContentInfo;
+    headers?: Record<string, string>;
+    userAgent?: string;
+    referer?: string;
+    origin?: string;
+}
diff --git a/libs/shared/interfaces/src/lib/settings.interface.ts b/libs/shared/interfaces/src/lib/settings.interface.ts
new file mode 100644
index 0000000..78a74fc
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/settings.interface.ts
@@ -0,0 +1,42 @@
+import { Language } from './language.enum';
+import { StreamFormat } from './stream-format.enum';
+import { Theme } from './theme.enum';
+
+/**
+ * Contains all types of supported video players
+ */
+export enum VideoPlayer {
+    VideoJs = 'videojs',
+    Html5Player = 'html5',
+    MPV = 'mpv',
+    VLC = 'vlc',
+    ArtPlayer = 'artplayer',
+}
+
+export enum StartupBehavior {
+    FirstView = 'first-view',
+    RestoreLastView = 'restore-last-view',
+}
+
+/**
+ * Describes all available settings options of the application
+ */
+export interface Settings {
+    player: VideoPlayer;
+    epgUrl: string[];
+    streamFormat: StreamFormat;
+    language: Language;
+    showCaptions: boolean;
+    showDashboard: boolean;
+    startupBehavior: StartupBehavior;
+    /** Show the desktop footer bar for external playback status */
+    showExternalPlaybackBar?: boolean;
+    theme: Theme;
+    mpvPlayerPath: string;
+    mpvReuseInstance: boolean;
+    vlcPlayerPath: string;
+    remoteControl: boolean;
+    remoteControlPort: number;
+    /** Custom download folder path (uses system Downloads folder if not set) */
+    downloadFolder?: string;
+}
diff --git a/libs/shared/interfaces/src/lib/stalker-item.normalizer.spec.ts b/libs/shared/interfaces/src/lib/stalker-item.normalizer.spec.ts
new file mode 100644
index 0000000..d3e4bb8
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stalker-item.normalizer.spec.ts
@@ -0,0 +1,27 @@
+import { normalizeStalkerDate } from './stalker-item.normalizer';
+
+describe('normalizeStalkerDate', () => {
+    it('normalizes SQLite UTC timestamps without relying on engine-specific parsing', () => {
+        const originalParse = Date.parse;
+        const parseSpy = jest
+            .spyOn(Date, 'parse')
+            .mockImplementation((value: string) => {
+                if (value === '2026-04-21 22:49:02') {
+                    return Number.NaN;
+                }
+
+                return originalParse(value);
+            });
+
+        expect(normalizeStalkerDate('2026-04-21 22:49:02')).toBe(
+            '2026-04-21T22:49:02.000Z'
+        );
+        expect(parseSpy).not.toHaveBeenCalledWith('2026-04-21 22:49:02');
+    });
+
+    it('preserves fractional seconds in SQLite UTC timestamps', () => {
+        expect(normalizeStalkerDate('2026-04-21 22:49:02.7')).toBe(
+            '2026-04-21T22:49:02.700Z'
+        );
+    });
+});
diff --git a/libs/shared/interfaces/src/lib/stalker-item.normalizer.ts b/libs/shared/interfaces/src/lib/stalker-item.normalizer.ts
new file mode 100644
index 0000000..881306a
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stalker-item.normalizer.ts
@@ -0,0 +1,157 @@
+import {
+    PortalActivityType,
+    StalkerPortalItem,
+} from './stalker-portal-item.interface';
+
+const SQLITE_UTC_TIMESTAMP_PATTERN =
+    /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?$/;
+
+/**
+ * Extract a stable ID from an untyped Stalker portal item.
+ *
+ * Stalker portals use different id fields depending on the content type
+ * (`id`, `stream_id`, `series_id`, `movie_id`). This function returns
+ * the first non-empty one, or a generated fallback based on the playlist
+ * id and index.
+ */
+export function extractStalkerItemId(
+    item: StalkerPortalItem | Record<string, unknown>,
+    fallbackPrefix = '',
+    fallbackIndex = 0
+): string {
+    const raw = item as Record<string, unknown>;
+    const id =
+        raw['id'] ?? raw['stream_id'] ?? raw['series_id'] ?? raw['movie_id'];
+    const idStr = String(id ?? '').trim();
+    return idStr || `${fallbackPrefix}-${fallbackIndex}`;
+}
+
+/**
+ * Extract a display title from a Stalker portal item.
+ */
+export function extractStalkerItemTitle(
+    item: StalkerPortalItem | Record<string, unknown>
+): string {
+    const raw = item as Record<string, unknown>;
+    return String(raw['title'] ?? raw['o_name'] ?? raw['name'] ?? 'Unknown');
+}
+
+/**
+ * Extract a poster/cover URL from a Stalker portal item.
+ */
+export function extractStalkerItemPoster(
+    item: StalkerPortalItem | Record<string, unknown>
+): string {
+    const raw = item as Record<string, unknown>;
+    return String(raw['cover'] ?? raw['logo'] ?? raw['poster_url'] ?? '');
+}
+
+/**
+ * Determine the normalised activity type of a Stalker item.
+ *
+ * - `itv` / `live` → `'live'`
+ * - `series` or `is_series` truthy → `'series'`
+ * - everything else → `'movie'`
+ */
+export function extractStalkerItemType(
+    item: StalkerPortalItem | Record<string, unknown>
+): PortalActivityType {
+    const raw = item as Record<string, unknown>;
+    const categoryId = String(raw['category_id'] ?? '').toLowerCase();
+    const streamType = String(raw['stream_type'] ?? '').toLowerCase();
+
+    if (categoryId === 'itv' || streamType === 'live') {
+        return 'live';
+    }
+
+    if (
+        categoryId === 'series' ||
+        raw['is_series'] === true ||
+        raw['is_series'] === 1 ||
+        raw['is_series'] === '1'
+    ) {
+        return 'series';
+    }
+
+    return 'movie';
+}
+
+/**
+ * Normalise a raw date value (epoch number, numeric string, or ISO string)
+ * into a consistent ISO 8601 string.
+ */
+export function normalizeStalkerDate(value: unknown): string {
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value)) return '';
+        const ms = value > 10_000_000_000 ? value : value * 1000;
+        return new Date(ms).toISOString();
+    }
+
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (/^\d+$/.test(trimmed)) {
+            const numeric = Number(trimmed);
+            if (Number.isFinite(numeric)) {
+                const ms = numeric > 10_000_000_000 ? numeric : numeric * 1000;
+                return new Date(ms).toISOString();
+            }
+        }
+        const sqliteUtcIso = normalizeSqliteUtcTimestamp(trimmed);
+        if (sqliteUtcIso) {
+            return sqliteUtcIso;
+        }
+        const parsed = Date.parse(trimmed);
+        if (!Number.isNaN(parsed)) {
+            return new Date(parsed).toISOString();
+        }
+    }
+
+    return '';
+}
+
+/**
+ * Check whether a raw item from `Playlist.favorites` matches the given itemId.
+ *
+ * Used to filter stalker favorites/recently-viewed arrays when removing items.
+ */
+export function stalkerItemMatchesId(
+    raw: unknown,
+    targetId: string,
+    fallbackPrefix = '',
+    fallbackIndex = 0
+): boolean {
+    const item = (raw ?? {}) as Record<string, unknown>;
+    const rawId = extractStalkerItemId(item, fallbackPrefix, fallbackIndex);
+    return rawId === targetId;
+}
+
+function normalizeSqliteUtcTimestamp(value: string): string | null {
+    const match = SQLITE_UTC_TIMESTAMP_PATTERN.exec(value);
+    if (!match) {
+        return null;
+    }
+
+    const [
+        ,
+        year,
+        month,
+        day,
+        hours,
+        minutes,
+        seconds,
+        milliseconds = '0',
+    ] = match;
+
+    const normalizedMs = milliseconds.padEnd(3, '0').slice(0, 3);
+    return new Date(
+        Date.UTC(
+            Number(year),
+            Number(month) - 1,
+            Number(day),
+            Number(hours),
+            Number(minutes),
+            Number(seconds),
+            Number(normalizedMs)
+        )
+    ).toISOString();
+}
diff --git a/libs/shared/interfaces/src/lib/stalker-portal-actions.enum.ts b/libs/shared/interfaces/src/lib/stalker-portal-actions.enum.ts
new file mode 100644
index 0000000..73d5a2f
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stalker-portal-actions.enum.ts
@@ -0,0 +1,11 @@
+export enum StalkerPortalActions {
+    GetCategories = 'get_categories',
+    GetGenres = 'get_genres',
+    CreateLink = 'create_link',
+    GetOrderedList = 'get_ordered_list',
+    Favorites = 'favorites',
+    Handshake = 'handshake',
+    DoAuth = 'do_auth',
+    GetShortEpg = 'get_short_epg',
+    GetEpgInfo = 'get_epg_info',
+}
diff --git a/libs/shared/interfaces/src/lib/stalker-portal-item.interface.ts b/libs/shared/interfaces/src/lib/stalker-portal-item.interface.ts
new file mode 100644
index 0000000..819ec3c
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stalker-portal-item.interface.ts
@@ -0,0 +1,31 @@
+/**
+ * Represents a Stalker portal item stored in `Playlist.favorites` or
+ * `Playlist.recentlyViewed` arrays.
+ *
+ * Stalker portals store favourites / recently-viewed as full objects
+ * (unlike M3U playlists, which use a simple `string[]` of channel URLs).
+ */
+export interface StalkerPortalItem {
+    id?: string | number;
+    stream_id?: string | number;
+    series_id?: string | number;
+    movie_id?: string | number;
+    title?: string;
+    /** Original name */
+    o_name?: string;
+    name?: string;
+    cover?: string;
+    logo?: string;
+    poster_url?: string;
+    /** 'itv' | 'vod' | 'series' — Stalker content type */
+    category_id?: string | number;
+    stream_type?: string;
+    is_series?: boolean | number | string;
+    /** Embedded VOD-series episode numbers preserved for VOD favorites. */
+    series?: unknown[];
+    added_at?: string | number;
+    cmd?: string;
+}
+
+/** Activity type normalised across all providers. */
+export type PortalActivityType = 'live' | 'movie' | 'series';
diff --git a/libs/shared/interfaces/src/lib/stalker-serial-details.interface.ts b/libs/shared/interfaces/src/lib/stalker-serial-details.interface.ts
new file mode 100644
index 0000000..76ed130
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stalker-serial-details.interface.ts
@@ -0,0 +1,28 @@
+/**
+ * Stalker portal series/serial details response structure.
+ * Contains series metadata from Stalker/Ministra portals.
+ */
+export interface StalkerSerialDetails {
+    /** Series title */
+    name: string;
+    /** Plot description */
+    description: string;
+    /** Director name */
+    director: string;
+    /** Comma-separated list of actors */
+    actors: string;
+    /** Release year */
+    year: string;
+    /** Comma-separated genres */
+    genres_str: string;
+    /** Age rating */
+    age: string;
+    /** IMDB rating as string */
+    rating_imdb: string;
+    /** Kinopoisk rating as string */
+    rating_kinopoisk: string;
+    /** Screenshot/poster URL */
+    screenshot_uri: string;
+    /** Date added to portal */
+    added: string;
+}
diff --git a/libs/shared/interfaces/src/lib/stalker-vod-details.interface.ts b/libs/shared/interfaces/src/lib/stalker-vod-details.interface.ts
new file mode 100644
index 0000000..e4e8ab2
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stalker-vod-details.interface.ts
@@ -0,0 +1,35 @@
+/**
+ * Stalker portal VOD details response structure.
+ * Contains movie metadata from Stalker/Ministra portals.
+ */
+export interface StalkerVodDetails {
+    /** Unique identifier for the VOD item */
+    id: string;
+    /** Command string used to play the stream (e.g., "/media/file_123.mpg") */
+    cmd: string;
+    /** VOD metadata */
+    info: StalkerVodInfo;
+}
+
+export interface StalkerVodInfo {
+    /** Poster/cover image URL */
+    movie_image: string;
+    /** Plot description */
+    description: string;
+    /** Formatted/system title (often generic like "video_name_format") */
+    name: string;
+    /** Original title (preferred, more descriptive) */
+    o_name?: string;
+    /** Comma-separated list of actors */
+    actors: string;
+    /** Director name */
+    director: string;
+    /** Release date (format varies) */
+    releasedate: string;
+    /** Genre(s) */
+    genre: string;
+    /** IMDB rating as string */
+    rating_imdb: string;
+    /** Kinopoisk rating as string */
+    rating_kinopoisk: string;
+}
diff --git a/libs/shared/interfaces/src/lib/store-keys.enum.ts b/libs/shared/interfaces/src/lib/store-keys.enum.ts
new file mode 100644
index 0000000..ce99277
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/store-keys.enum.ts
@@ -0,0 +1,5 @@
+/** Labels of properties in local storage */
+export enum STORE_KEY {
+    Settings = 'settings',
+    Version = 'version'
+}
\ No newline at end of file
diff --git a/libs/shared/interfaces/src/lib/stream-format.enum.ts b/libs/shared/interfaces/src/lib/stream-format.enum.ts
new file mode 100644
index 0000000..f85789b
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/stream-format.enum.ts
@@ -0,0 +1,7 @@
+/**
+ * Enum with all the formats that are allowed in the application
+ */
+export enum StreamFormat {
+    TsStreamFormat = 'ts',
+    M3u8StreamFormat = 'm3u8',
+}
diff --git a/libs/shared/interfaces/src/lib/theme.enum.ts b/libs/shared/interfaces/src/lib/theme.enum.ts
new file mode 100644
index 0000000..6b7b4f3
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/theme.enum.ts
@@ -0,0 +1,5 @@
+export enum Theme {
+    DarkTheme = 'DARK_THEME',
+    LightTheme = 'LIGHT_THEME',
+    SystemTheme = 'SYSTEM_THEME',
+}
diff --git a/libs/shared/interfaces/src/lib/vod-details-adapters.ts b/libs/shared/interfaces/src/lib/vod-details-adapters.ts
new file mode 100644
index 0000000..2763d0d
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/vod-details-adapters.ts
@@ -0,0 +1,159 @@
+import { XtreamVodDetails, getXtreamVodInfo } from './xtream-vod-details.interface';
+import { StalkerVodDetails } from './stalker-vod-details.interface';
+import {
+    NormalizedVodMeta,
+    VodDetailsItem,
+    XtreamVodItem,
+    StalkerVodItem,
+} from './vod-details-item.interface';
+
+/**
+ * Normalizes Xtream VOD details into a display-friendly format.
+ * Handles the various field name variations in Xtream API responses.
+ */
+export function normalizeXtreamVod(item: XtreamVodDetails): NormalizedVodMeta {
+    const info = getXtreamVodInfo(item);
+    const movieData = item?.movie_data;
+
+    return {
+        title: info?.name || movieData?.name || 'Unknown',
+        description: info?.description || info?.plot,
+        posterUrl: info?.movie_image || info?.cover_big,
+        backdropUrl: info?.backdrop_path?.[0],
+        year: extractYear(info?.releasedate),
+        genre: info?.genre,
+        duration: info?.duration || formatDuration(info?.duration_secs),
+        country: info?.country,
+        director: info?.director,
+        actors: info?.actors || info?.cast,
+        ratingImdb: info?.rating_imdb,
+        ratingKinopoisk: info?.rating_kinopoisk,
+        youtubeTrailer: info?.youtube_trailer,
+    };
+}
+
+/**
+ * Normalizes Stalker VOD details into a display-friendly format.
+ * Stalker has fewer metadata fields than Xtream.
+ * Prefers o_name (original title) over name (often formatted/generic).
+ */
+export function normalizeStalkerVod(item: StalkerVodDetails): NormalizedVodMeta {
+    const info = item?.info;
+
+    return {
+        title: info?.o_name || info?.name || 'Unknown',
+        description: info?.description,
+        posterUrl: info?.movie_image,
+        backdropUrl: undefined, // Stalker doesn't provide backdrop
+        year: extractYear(info?.releasedate),
+        genre: info?.genre,
+        duration: undefined, // Stalker doesn't provide duration
+        country: undefined, // Stalker doesn't provide country
+        director: info?.director,
+        actors: info?.actors,
+        ratingImdb: info?.rating_imdb,
+        ratingKinopoisk: info?.rating_kinopoisk,
+        youtubeTrailer: undefined, // Stalker doesn't provide trailers
+    };
+}
+
+/**
+ * Normalizes any VodDetailsItem to display-friendly format.
+ * Uses discriminated union for type-safe handling.
+ */
+export function normalizeVodDetails(item: VodDetailsItem): NormalizedVodMeta {
+    if (item.type === 'xtream') {
+        return normalizeXtreamVod(item.data);
+    }
+    return normalizeStalkerVod(item.data);
+}
+
+/**
+ * Creates an XtreamVodItem from raw data and context.
+ */
+export function createXtreamVodItem(
+    data: XtreamVodDetails,
+    playlistId: string,
+    vodId?: number
+): XtreamVodItem {
+    return {
+        type: 'xtream',
+        data,
+        playlistId,
+        vodId: vodId ?? data.movie_data?.stream_id ?? 0,
+    };
+}
+
+/**
+ * Creates a StalkerVodItem from raw data and context.
+ */
+export function createStalkerVodItem(
+    data: StalkerVodDetails,
+    playlistId: string
+): StalkerVodItem {
+    return {
+        type: 'stalker',
+        data,
+        playlistId,
+        cmd: data.cmd,
+    };
+}
+
+/**
+ * Gets the unique identifier for a VOD item.
+ * Returns vodId for Xtream, id for Stalker.
+ */
+export function getVodId(item: VodDetailsItem): number | string {
+    if (item.type === 'xtream') {
+        return item.vodId;
+    }
+    return item.data.id;
+}
+
+/**
+ * Gets the numeric ID for download/favorite tracking.
+ */
+export function getVodNumericId(item: VodDetailsItem): number {
+    if (item.type === 'xtream') {
+        return item.vodId;
+    }
+    return Number(item.data.id) || 0;
+}
+
+// ============ Helper Functions ============
+
+/**
+ * Extracts 4-digit year from various date formats.
+ */
+function extractYear(dateString?: string): string | undefined {
+    if (!dateString) return undefined;
+
+    // Try to extract 4-digit year from beginning
+    const yearMatch = dateString.match(/^(\d{4})/);
+    if (yearMatch) {
+        return yearMatch[1];
+    }
+
+    // Try to parse as date and extract year
+    const date = new Date(dateString);
+    if (!isNaN(date.getTime())) {
+        return date.getFullYear().toString();
+    }
+
+    return dateString.slice(0, 4);
+}
+
+/**
+ * Formats duration from seconds to human-readable string.
+ */
+function formatDuration(seconds?: number): string | undefined {
+    if (!seconds || seconds <= 0) return undefined;
+
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+
+    if (hours > 0) {
+        return `${hours}h ${minutes}m`;
+    }
+    return `${minutes}m`;
+}
diff --git a/libs/shared/interfaces/src/lib/vod-details-item.interface.ts b/libs/shared/interfaces/src/lib/vod-details-item.interface.ts
new file mode 100644
index 0000000..3e6b883
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/vod-details-item.interface.ts
@@ -0,0 +1,96 @@
+import { XtreamVodDetails } from './xtream-vod-details.interface';
+import { StalkerVodDetails } from './stalker-vod-details.interface';
+
+/**
+ * Discriminated union for VOD details across portal types.
+ * Enables type-safe handling without runtime type checks.
+ *
+ * @example
+ * ```typescript
+ * function handleVod(item: VodDetailsItem) {
+ *   if (item.type === 'xtream') {
+ *     // TypeScript knows item.data is XtreamVodDetails
+ *     console.log(item.data.movie_data.stream_id);
+ *   } else {
+ *     // TypeScript knows item.data is StalkerVodDetails
+ *     console.log(item.data.cmd);
+ *   }
+ * }
+ * ```
+ */
+export type VodDetailsItem = XtreamVodItem | StalkerVodItem;
+
+/**
+ * Xtream Codes VOD item wrapper with context.
+ */
+export interface XtreamVodItem {
+    /** Discriminator for Xtream Codes portals */
+    readonly type: 'xtream';
+    /** Full VOD details from Xtream API */
+    data: XtreamVodDetails;
+    /** Playlist/portal ID for favorites and downloads */
+    playlistId: string;
+    /** Stream ID from Xtream API */
+    vodId: number;
+}
+
+/**
+ * Stalker portal VOD item wrapper with context.
+ */
+export interface StalkerVodItem {
+    /** Discriminator for Stalker portals */
+    readonly type: 'stalker';
+    /** Full VOD details from Stalker API */
+    data: StalkerVodDetails;
+    /** Playlist/portal ID for favorites and downloads */
+    playlistId: string;
+    /** Command string for stream playback */
+    cmd: string;
+}
+
+/**
+ * Normalized metadata for display in templates.
+ * Provides a consistent interface regardless of portal type.
+ */
+export interface NormalizedVodMeta {
+    /** Movie title */
+    title: string;
+    /** Plot description */
+    description?: string;
+    /** Poster/cover image URL */
+    posterUrl?: string;
+    /** Backdrop image URL (Xtream only) */
+    backdropUrl?: string;
+    /** Release year (4 digits) */
+    year?: string;
+    /** Genre(s) */
+    genre?: string;
+    /** Duration string (e.g., "1h 30m") */
+    duration?: string;
+    /** Country of origin (Xtream only) */
+    country?: string;
+    /** Director name */
+    director?: string;
+    /** Actors/cast (comma-separated) */
+    actors?: string;
+    /** IMDB rating */
+    ratingImdb?: string;
+    /** Kinopoisk rating */
+    ratingKinopoisk?: string;
+    /** YouTube trailer ID (Xtream only) */
+    youtubeTrailer?: string;
+}
+
+/**
+ * Type guard to check if item is Xtream VOD.
+ */
+export function isXtreamVod(item: VodDetailsItem): item is XtreamVodItem {
+    return item.type === 'xtream';
+}
+
+/**
+ * Type guard to check if item is Stalker VOD.
+ */
+export function isStalkerVod(item: VodDetailsItem): item is StalkerVodItem {
+    return item.type === 'stalker';
+}
diff --git a/libs/shared/interfaces/src/lib/workspace-product-branding.interface.ts b/libs/shared/interfaces/src/lib/workspace-product-branding.interface.ts
new file mode 100644
index 0000000..0f77285
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/workspace-product-branding.interface.ts
@@ -0,0 +1,17 @@
+import type { Language } from './language.enum';
+import type { StreamFormat } from './stream-format.enum';
+import type { VideoPlayer } from './settings.interface';
+
+/**
+ * Optional product branding (e.g. KiraTV). When null, the app behaves as generic IPTVnator.
+ */
+export interface WorkspaceProductBranding {
+    readonly appDisplayName: string;
+    readonly xtreamOnlyUi: boolean;
+    readonly xtreamDefaultServerUrl: string;
+    readonly defaultPlaylistTitle: string;
+    readonly defaultLanguage: Language;
+    readonly defaultVideoPlayer: VideoPlayer;
+    readonly defaultStreamFormat: StreamFormat;
+    readonly indexHtmlLang: string;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-account-info-dialog-data.interface.ts b/libs/shared/interfaces/src/lib/xtream-account-info-dialog-data.interface.ts
new file mode 100644
index 0000000..7a4b78e
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-account-info-dialog-data.interface.ts
@@ -0,0 +1,15 @@
+export interface XtreamAccountInfoDialogPlaylist {
+    id: string;
+    name?: string;
+    title?: string;
+    serverUrl: string;
+    username: string;
+    password: string;
+}
+
+export interface XtreamAccountInfoDialogData {
+    vodStreamsCount?: number;
+    liveStreamsCount?: number;
+    seriesCount?: number;
+    playlist?: XtreamAccountInfoDialogPlaylist;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-category.interface.ts b/libs/shared/interfaces/src/lib/xtream-category.interface.ts
new file mode 100644
index 0000000..8c4dbde
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-category.interface.ts
@@ -0,0 +1,7 @@
+export interface XtreamCategory {
+    id?: number;
+    category_id: string;
+    category_name: string;
+    parent_id: number;
+    count?: number;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-code-actions.ts b/libs/shared/interfaces/src/lib/xtream-code-actions.ts
new file mode 100644
index 0000000..795d722
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-code-actions.ts
@@ -0,0 +1,14 @@
+export enum XtreamCodeActions {
+    GetAccountInfo = 'get_account_info',
+    GetLiveStreams = 'get_live_streams',
+    GetLiveCategories = 'get_live_categories',
+    GetSeries = 'get_series',
+    GetSeriesCategories = 'get_series_categories',
+    GetSeriesInfo = 'get_series_info',
+    GetVodStreams = 'get_vod_streams',
+    GetVodCategories = 'get_vod_categories',
+    GetVodInfo = 'get_vod_info',
+    GetShortEpg = 'get_short_epg',
+    GetSimpleDataTable = 'get_simple_data_table',
+    GetSimpleDateTable = 'get_simple_date_table',
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-item.interface.ts b/libs/shared/interfaces/src/lib/xtream-item.interface.ts
new file mode 100644
index 0000000..8d4d9d6
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-item.interface.ts
@@ -0,0 +1,18 @@
+export interface XtreamItem {
+    num: number;
+    name: string;
+    stream_type: 'live' | 'movie';
+    stream_id: number;
+    stream_icon: string;
+    added: string;
+    category_id: string;
+    custom_sid: string;
+    direct_source: string;
+    epg_channel_id?: string;
+    tv_archive?: number;
+    tv_archive_duration?: number;
+    rating_imdb?: string;
+    xtream_id?: number;
+    type?: 'movie' | 'series' | 'live';
+    added_at?: number;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-live-stream.interface.ts b/libs/shared/interfaces/src/lib/xtream-live-stream.interface.ts
new file mode 100644
index 0000000..1c13398
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-live-stream.interface.ts
@@ -0,0 +1,8 @@
+import { XtreamItem } from './xtream-item.interface';
+
+export interface XtreamLiveStream extends XtreamItem {
+    stream_type: 'live';
+    epg_channel_id?: string;
+    tv_archive: number;
+    tv_archive_duration: number;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-response.interface.ts b/libs/shared/interfaces/src/lib/xtream-response.interface.ts
new file mode 100644
index 0000000..5723e69
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-response.interface.ts
@@ -0,0 +1,6 @@
+import { XtreamCodeActions } from './xtream-code-actions';
+
+export interface XtreamResponse {
+    payload: unknown;
+    action: XtreamCodeActions;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-restore-state.util.ts b/libs/shared/interfaces/src/lib/xtream-restore-state.util.ts
new file mode 100644
index 0000000..965f84e
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-restore-state.util.ts
@@ -0,0 +1,17 @@
+import {
+    XtreamBackupFavoriteItem,
+    XtreamBackupHiddenCategory,
+    XtreamBackupRecentlyViewedItem,
+} from './playlist-backup.interface';
+import { PlaybackPositionData } from './playback-position.interface';
+
+export interface XtreamPendingRestoreState {
+    hiddenCategories: XtreamBackupHiddenCategory[];
+    favorites: XtreamBackupFavoriteItem[];
+    recentlyViewed: XtreamBackupRecentlyViewedItem[];
+    playbackPositions: PlaybackPositionData[];
+}
+
+export function getXtreamPendingRestoreStorageKey(playlistId: string): string {
+    return `xtream-restore-${playlistId}`;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-serie-details.interface.ts b/libs/shared/interfaces/src/lib/xtream-serie-details.interface.ts
new file mode 100644
index 0000000..1da99e1
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-serie-details.interface.ts
@@ -0,0 +1,59 @@
+export interface XtreamSerieDetails {
+    seasons: XtreamSerieSeason[];
+    info: XtreamSerieInfo;
+    episodes: Record<string, XtreamSerieEpisode[]>;
+}
+
+export interface XtreamSerieInfo {
+    name: string;
+    cover: string;
+    plot: string;
+    cast: string;
+    director: string;
+    genre: string;
+    releaseDate: string;
+    last_modified: string;
+    rating: string;
+    rating_5based: number;
+    backdrop_path: string[];
+    youtube_trailer: string;
+    episode_run_time: string;
+    category_id: string;
+}
+
+export interface XtreamSerieEpisode {
+    id: string;
+    episode_num: number;
+    title: string;
+    container_extension: string;
+    info: XtreamSerieEpisodeInfo | []; // Can be empty array when no metadata available
+    custom_sid: string;
+    added: string;
+    season: number;
+    direct_source: string;
+}
+
+export interface XtreamSerieEpisodeInfo {
+    tmdb_id?: number;
+    releasedate?: string;
+    plot?: string;
+    duration_secs?: number;
+    duration?: string;
+    movie_image?: string;
+    video?: Record<string, string>; // TODO
+    audio?: Record<string, string>; // TODO
+    bitrate?: number;
+    rating?: number;
+    season?: string;
+}
+
+export interface XtreamSerieSeason {
+    air_date: string;
+    episode_count: number;
+    id: number;
+    name: string;
+    overview: string;
+    season_number: number;
+    cover: string;
+    cover_big: string;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-serie-item.interface.ts b/libs/shared/interfaces/src/lib/xtream-serie-item.interface.ts
new file mode 100644
index 0000000..378c759
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-serie-item.interface.ts
@@ -0,0 +1,18 @@
+export interface XtreamSerieItem {
+    num: number;
+    name: string;
+    series_id: number;
+    cover: string;
+    plot: string;
+    cast: string;
+    director: string;
+    genre: string;
+    releaseDate: string;
+    last_modified: string;
+    rating: string;
+    rating_5based: number;
+    backdrop_path: string[];
+    youtube_trailer: string;
+    episode_run_time: string;
+    category_id: number;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-vod-details.interface.ts b/libs/shared/interfaces/src/lib/xtream-vod-details.interface.ts
new file mode 100644
index 0000000..1a6ac6a
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-vod-details.interface.ts
@@ -0,0 +1,64 @@
+export interface XtreamVodInfo {
+    kinopoisk_url: string;
+    tmdb_id: number | string;
+    name: string;
+    o_name: string;
+    cover_big: string;
+    movie_image: string;
+    releasedate: string;
+    episode_run_time: number;
+    youtube_trailer: string;
+    director: string;
+    actors: string;
+    cast: string;
+    description: string;
+    plot: string;
+    age: string;
+    mpaa_rating: string;
+    rating_count_kinopoisk: number;
+    country: string;
+    genre: string;
+    backdrop_path: string[];
+    duration_secs: number;
+    duration: string;
+    video: string[];
+    audio: string[];
+    bitrate: number;
+    rating: number | string;
+    runtime?: string;
+    status?: string;
+    rating_kinopoisk?: string;
+    rating_imdb?: string;
+}
+
+export interface XtreamVodMovieData {
+    stream_id: number;
+    name: string;
+    added: string;
+    category_id: string;
+    container_extension: string;
+    custom_sid: string | null;
+    direct_source: string;
+    category_ids?: number[];
+}
+
+export interface XtreamVodDetails {
+    info?: XtreamVodInfo | [] | null;
+    movie_data?: XtreamVodMovieData;
+}
+
+export function getXtreamVodInfo(
+    details: Pick<XtreamVodDetails, 'info'> | null | undefined
+): XtreamVodInfo | null {
+    const info = details?.info;
+    if (!info || Array.isArray(info) || typeof info !== 'object') {
+        return null;
+    }
+    return info;
+}
+
+export function hasXtreamVodInfo(
+    details: Pick<XtreamVodDetails, 'info'> | null | undefined
+): details is XtreamVodDetails & { info: XtreamVodInfo } {
+    return getXtreamVodInfo(details) !== null;
+}
diff --git a/libs/shared/interfaces/src/lib/xtream-vod-stream.interface.ts b/libs/shared/interfaces/src/lib/xtream-vod-stream.interface.ts
new file mode 100644
index 0000000..4df9d94
--- /dev/null
+++ b/libs/shared/interfaces/src/lib/xtream-vod-stream.interface.ts
@@ -0,0 +1,8 @@
+import { XtreamItem } from './xtream-item.interface';
+
+export interface XtreamVodStream extends XtreamItem {
+    stream_type: 'movie';
+    rating: number;
+    rating_5based: number;
+    container_extension: string;
+}
diff --git a/libs/shared/interfaces/tsconfig.json b/libs/shared/interfaces/tsconfig.json
new file mode 100644
index 0000000..c0906eb
--- /dev/null
+++ b/libs/shared/interfaces/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "importHelpers": true,
+        "noImplicitOverride": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noPropertyAccessFromIndexSignature": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/shared/interfaces/tsconfig.lib.json b/libs/shared/interfaces/tsconfig.lib.json
new file mode 100644
index 0000000..2e5b123
--- /dev/null
+++ b/libs/shared/interfaces/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "types": ["node"]
+    },
+    "include": ["src/**/*.ts", "../../../global.d.ts"],
+    "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/shared/interfaces/tsconfig.spec.json b/libs/shared/interfaces/tsconfig.spec.json
new file mode 100644
index 0000000..4b0383f
--- /dev/null
+++ b/libs/shared/interfaces/tsconfig.spec.json
@@ -0,0 +1,15 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "moduleResolution": "node10",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/shared/m3u-utils/eslint.config.mjs b/libs/shared/m3u-utils/eslint.config.mjs
new file mode 100644
index 0000000..f8e3541
--- /dev/null
+++ b/libs/shared/m3u-utils/eslint.config.mjs
@@ -0,0 +1,21 @@
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    {
+        files: ['**/*.json'],
+        rules: {
+            '@nx/dependency-checks': [
+                'error',
+                {
+                    ignoredFiles: [
+                        '{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}',
+                    ],
+                },
+            ],
+        },
+        languageOptions: {
+            parser: await import('jsonc-eslint-parser'),
+        },
+    },
+];
diff --git a/libs/shared/m3u-utils/jest.config.ts b/libs/shared/m3u-utils/jest.config.ts
new file mode 100644
index 0000000..557c7be
--- /dev/null
+++ b/libs/shared/m3u-utils/jest.config.ts
@@ -0,0 +1,13 @@
+export default {
+    displayName: 'm3u-utils',
+    preset: '../../../jest.preset.js',
+    testEnvironment: 'node',
+    transform: {
+        '^.+\\.[tj]s$': [
+            'ts-jest',
+            { tsconfig: '<rootDir>/tsconfig.spec.json' },
+        ],
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../../coverage/libs/shared/m3u-utils',
+};
diff --git a/libs/shared/m3u-utils/package.json b/libs/shared/m3u-utils/package.json
new file mode 100644
index 0000000..a9a138e
--- /dev/null
+++ b/libs/shared/m3u-utils/package.json
@@ -0,0 +1,11 @@
+{
+    "name": "m3u-utils",
+    "version": "0.0.1",
+    "private": true,
+    "type": "commonjs",
+    "main": "./src/index.js",
+    "types": "./src/index.d.ts",
+    "dependencies": {
+        "tslib": "^2.3.0"
+    }
+}
diff --git a/libs/shared/m3u-utils/project.json b/libs/shared/m3u-utils/project.json
new file mode 100644
index 0000000..165cdb9
--- /dev/null
+++ b/libs/shared/m3u-utils/project.json
@@ -0,0 +1,26 @@
+{
+    "name": "m3u-utils",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/shared/m3u-utils/src",
+    "projectType": "library",
+    "tags": ["scope:playlist", "domain:m3u", "type:util"],
+    "targets": {
+        "build": {
+            "executor": "@nx/js:tsc",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/libs/shared/m3u-utils",
+                "main": "libs/shared/m3u-utils/src/index.ts",
+                "tsConfig": "libs/shared/m3u-utils/tsconfig.lib.json",
+                "assets": []
+            }
+        },
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/shared/m3u-utils/jest.config.ts"
+            }
+        }
+    }
+}
diff --git a/libs/shared/m3u-utils/src/index.ts b/libs/shared/m3u-utils/src/index.ts
new file mode 100644
index 0000000..27a97c6
--- /dev/null
+++ b/libs/shared/m3u-utils/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/playlist.utils';
+export * from './lib/catchup.utils';
diff --git a/libs/shared/m3u-utils/src/lib/catchup.utils.spec.ts b/libs/shared/m3u-utils/src/lib/catchup.utils.spec.ts
new file mode 100644
index 0000000..b0c0545
--- /dev/null
+++ b/libs/shared/m3u-utils/src/lib/catchup.utils.spec.ts
@@ -0,0 +1,254 @@
+import { Channel, EpgProgram } from 'shared-interfaces';
+import {
+    getM3uArchiveDays,
+    isM3uCatchupPlaybackSupported,
+    resolveM3uCatchupUrl,
+} from './catchup.utils';
+import { createPlaylistObject } from './playlist.utils';
+
+describe('catchup.utils', () => {
+    const baseChannel: Channel = {
+        id: 'channel-1',
+        name: 'News One',
+        url: 'https://streams.example.com/live/channel-1.m3u8',
+        group: { title: 'News' },
+        tvg: {
+            id: 'news-1',
+            name: 'News One',
+            url: '',
+            logo: '',
+            rec: '3',
+        },
+        catchup: {
+            type: 'shift',
+            days: '3',
+        },
+        timeshift: '3',
+        http: {
+            referrer: '',
+            'user-agent': '',
+            origin: '',
+        },
+        radio: 'false',
+        epgParams: '',
+    };
+
+    const archivedProgram: EpgProgram = {
+        start: '2026-04-10T08:00:00.000Z',
+        stop: '2026-04-10T09:00:00.000Z',
+        channel: 'news-1',
+        title: 'Morning News',
+        desc: null,
+        category: null,
+        startTimestamp: 1_775_808_800,
+        stopTimestamp: 1_775_812_400,
+    };
+
+    it('reports archive days from catchup metadata before legacy fields', () => {
+        expect(
+            getM3uArchiveDays({
+                ...baseChannel,
+                catchup: { type: 'shift', days: '5' },
+                timeshift: '3',
+                tvg: { ...baseChannel.tvg, rec: '2' },
+            })
+        ).toBe(5);
+    });
+
+    it('falls back to tvg-rec when catchup-days and timeshift are blank strings', () => {
+        expect(
+            getM3uArchiveDays({
+                ...baseChannel,
+                catchup: { type: '', days: '' },
+                timeshift: '',
+                tvg: { ...baseChannel.tvg, rec: '7' },
+            })
+        ).toBe(7);
+    });
+
+    it('supports legacy same-stream shift playback when catchup type is shift', () => {
+        expect(isM3uCatchupPlaybackSupported(baseChannel)).toBe(true);
+        expect(resolveM3uCatchupUrl(baseChannel, archivedProgram, 1_775_820_000))
+            .toBe(
+                'https://streams.example.com/live/channel-1.m3u8?utc=1775808800&lutc=1775820000'
+            );
+    });
+
+    it('supports tvg-rec-only legacy same-stream playback when the channel url is reusable', () => {
+        const channel: Channel = {
+            ...baseChannel,
+            tvg: {
+                ...baseChannel.tvg,
+                rec: '7',
+            },
+            catchup: undefined,
+            timeshift: undefined,
+        };
+
+        expect(isM3uCatchupPlaybackSupported(channel)).toBe(true);
+        expect(resolveM3uCatchupUrl(channel, archivedProgram, 1_775_820_000))
+            .toBe(
+                'https://streams.example.com/live/channel-1.m3u8?utc=1775808800&lutc=1775820000'
+            );
+    });
+
+    it('rewrites utc and lutc query params on catchup-source urls', () => {
+        const playbackUrl = resolveM3uCatchupUrl(
+            {
+                ...baseChannel,
+                catchup: {
+                    type: 'append',
+                    days: '3',
+                    source:
+                        'https://archive.example.com/catchup.m3u8?utc=1&lutc=2&token=abc',
+                },
+            },
+            archivedProgram,
+            1_775_820_000
+        );
+
+        expect(playbackUrl).toBe(
+            'https://archive.example.com/catchup.m3u8?utc=1775808800&lutc=1775820000&token=abc'
+        );
+    });
+
+    it('returns null when the channel metadata declares an unsupported replay scheme', () => {
+        expect(
+            isM3uCatchupPlaybackSupported({
+                ...baseChannel,
+                catchup: {
+                    type: 'append',
+                    days: '3',
+                    source: '',
+                },
+                timeshift: '3',
+            })
+        ).toBe(false);
+        expect(
+            resolveM3uCatchupUrl(
+                {
+                    ...baseChannel,
+                    catchup: {
+                        type: 'append',
+                        days: '3',
+                        source: '',
+                    },
+                    timeshift: '3',
+                },
+                archivedProgram
+            )
+        ).toBeNull();
+    });
+
+    it('returns null for tvg-rec-only channels when the stream url is not http', () => {
+        expect(
+            isM3uCatchupPlaybackSupported({
+                ...baseChannel,
+                url: 'udp://239.0.0.1:1234',
+                tvg: {
+                    ...baseChannel.tvg,
+                    rec: '7',
+                },
+                catchup: undefined,
+                timeshift: undefined,
+            })
+        ).toBe(false);
+        expect(
+            resolveM3uCatchupUrl(
+                {
+                    ...baseChannel,
+                    url: 'udp://239.0.0.1:1234',
+                    tvg: {
+                        ...baseChannel.tvg,
+                        rec: '7',
+                    },
+                    catchup: undefined,
+                    timeshift: undefined,
+                },
+                archivedProgram
+            )
+        ).toBeNull();
+    });
+
+    it('returns null when archive days are missing', () => {
+        expect(
+            resolveM3uCatchupUrl(
+                {
+                    ...baseChannel,
+                    tvg: { ...baseChannel.tvg, rec: '' },
+                    timeshift: '',
+                    catchup: {
+                        type: 'shift',
+                        days: '',
+                    },
+                },
+                archivedProgram
+            )
+        ).toBeNull();
+    });
+
+    it('falls back to parsing the program start string when the unix timestamp is unavailable', () => {
+        expect(
+            resolveM3uCatchupUrl(
+                baseChannel,
+                {
+                    ...archivedProgram,
+                    start: '202604100800 +0000',
+                    startTimestamp: null,
+                },
+                1_775_820_000
+            )
+        ).toBe(
+            'https://streams.example.com/live/channel-1.m3u8?utc=1775808000&lutc=1775820000'
+        );
+    });
+
+    it('preserves catchup metadata when storing parsed playlist items', () => {
+        const playlist = createPlaylistObject('Catchup playlist', {
+            header: {
+                attrs: {
+                    'x-tvg-url': 'https://example.com/guide.xml',
+                },
+                raw: '#EXTM3U x-tvg-url="https://example.com/guide.xml"',
+            },
+            items: [
+                {
+                    name: 'News One',
+                    tvg: {
+                        id: 'news-1',
+                        name: 'News One',
+                        url: '',
+                        logo: '',
+                        rec: '3',
+                    },
+                    group: { title: 'News' },
+                    http: {
+                        referrer: '',
+                        'user-agent': '',
+                    },
+                    url: 'https://streams.example.com/live/channel-1.m3u8',
+                    raw: '#EXTINF:-1,News One',
+                    catchup: {
+                        type: 'shift',
+                        source: 'https://archive.example.com/catchup.m3u8',
+                        days: '3',
+                    },
+                    timeshift: '3',
+                    radio: 'false',
+                },
+            ],
+        });
+
+        expect(playlist.playlist?.items[0]).toEqual(
+            expect.objectContaining({
+                catchup: {
+                    type: 'shift',
+                    source: 'https://archive.example.com/catchup.m3u8',
+                    days: '3',
+                },
+                timeshift: '3',
+                radio: 'false',
+            })
+        );
+    });
+});
diff --git a/libs/shared/m3u-utils/src/lib/catchup.utils.ts b/libs/shared/m3u-utils/src/lib/catchup.utils.ts
new file mode 100644
index 0000000..fff3fab
--- /dev/null
+++ b/libs/shared/m3u-utils/src/lib/catchup.utils.ts
@@ -0,0 +1,155 @@
+import { Channel, EpgProgram } from 'shared-interfaces';
+
+const XMLTV_TIMESTAMP_PATTERN =
+    /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})\s*([+-]\d{2})(\d{2})$/;
+
+type CatchupSupportMode = 'none' | 'source' | 'shift';
+
+export function getM3uArchiveDays(
+    channel: Pick<Channel, 'tvg' | 'timeshift' | 'catchup'> | null | undefined
+): number {
+    const value = getFirstNonBlankValue(
+        channel?.catchup?.days,
+        channel?.timeshift,
+        channel?.tvg?.rec
+    );
+    return Math.max(0, Number(value ?? 0) || 0);
+}
+
+export function isM3uCatchupPlaybackSupported(
+    channel: Channel | null | undefined
+): boolean {
+    return getM3uCatchupSupportMode(channel) !== 'none';
+}
+
+export function resolveM3uCatchupUrl(
+    channel: Channel | null | undefined,
+    program: Pick<EpgProgram, 'start' | 'startTimestamp'>,
+    nowTimestampSeconds = Math.floor(Date.now() / 1000)
+): string | null {
+    const supportMode = getM3uCatchupSupportMode(channel);
+    if (supportMode === 'none') {
+        return null;
+    }
+
+    const startTimestamp = getEpgProgramTimestampSeconds(
+        program.start,
+        program.startTimestamp
+    );
+    if (startTimestamp === null) {
+        return null;
+    }
+
+    const playbackBaseUrl =
+        supportMode === 'source'
+            ? channel?.catchup?.source
+            : channel?.url;
+    if (!playbackBaseUrl?.trim()) {
+        return null;
+    }
+
+    const normalizedNow =
+        Number.isFinite(nowTimestampSeconds) && nowTimestampSeconds > 0
+            ? Math.floor(nowTimestampSeconds)
+            : Math.floor(Date.now() / 1000);
+
+    return setCatchupQueryParams(playbackBaseUrl, {
+        utc: startTimestamp,
+        lutc: normalizedNow,
+    });
+}
+
+function getM3uCatchupSupportMode(
+    channel: Channel | null | undefined
+): CatchupSupportMode {
+    if (getM3uArchiveDays(channel) <= 0) {
+        return 'none';
+    }
+
+    const catchupSource = channel?.catchup?.source?.trim() ?? '';
+    if (isHttpUrl(catchupSource)) {
+        return 'source';
+    }
+
+    const streamUrl = channel?.url?.trim() ?? '';
+    const catchupType = channel?.catchup?.type?.trim().toLowerCase() ?? '';
+    if (catchupType === 'shift' && isHttpUrl(streamUrl)) {
+        return 'shift';
+    }
+
+    if (!catchupType && isHttpUrl(streamUrl)) {
+        return 'shift';
+    }
+
+    return 'none';
+}
+
+function getEpgProgramTimestampSeconds(
+    dateValue: string,
+    unixTimestampValue?: number | string | null
+): number | null {
+    const unixTimestamp = Number.parseInt(String(unixTimestampValue ?? ''), 10);
+    if (Number.isFinite(unixTimestamp) && unixTimestamp > 0) {
+        return unixTimestamp;
+    }
+
+    const parsed = Date.parse(dateValue);
+    if (Number.isFinite(parsed)) {
+        return Math.floor(parsed / 1000);
+    }
+
+    const match = dateValue.match(XMLTV_TIMESTAMP_PATTERN);
+    if (!match) {
+        return null;
+    }
+
+    const [, year, month, day, hour, minute, offsetHours, offsetMinutes] =
+        match;
+    const utcMillis = Date.UTC(
+        Number(year),
+        Number(month) - 1,
+        Number(day),
+        Number(hour),
+        Number(minute)
+    );
+    const offsetTotalMinutes =
+        Number(offsetHours) * 60 +
+        Math.sign(Number(offsetHours)) * Number(offsetMinutes);
+
+    return Math.floor((utcMillis - offsetTotalMinutes * 60_000) / 1000);
+}
+
+function setCatchupQueryParams(
+    rawUrl: string,
+    params: Record<'utc' | 'lutc', number>
+): string | null {
+    try {
+        const url = new URL(rawUrl.trim());
+        url.searchParams.set('utc', String(params.utc));
+        url.searchParams.set('lutc', String(params.lutc));
+        return url.toString();
+    } catch {
+        return null;
+    }
+}
+
+function isHttpUrl(value: string): boolean {
+    if (!value) {
+        return false;
+    }
+
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    } catch {
+        return false;
+    }
+}
+
+function getFirstNonBlankValue(
+    ...values: Array<string | null | undefined>
+): string | undefined {
+    return values.find(
+        (value): value is string => value != null && value.trim() !== ''
+    );
+}
diff --git a/libs/shared/m3u-utils/src/lib/playlist.utils.ts b/libs/shared/m3u-utils/src/lib/playlist.utils.ts
new file mode 100644
index 0000000..aff6f81
--- /dev/null
+++ b/libs/shared/m3u-utils/src/lib/playlist.utils.ts
@@ -0,0 +1,98 @@
+import {
+    Channel,
+    ParsedPlaylist,
+    ParsedPlaylistItem,
+    Playlist,
+} from 'shared-interfaces';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * Aggregates favorite channels as objects from all available playlists
+ * @param playlists all available playlists
+ * @returns an array with favorite channels from all playlists
+ */
+export function aggregateFavoriteChannels(playlists: Playlist[]): Channel[] {
+    const favorites: Channel[] = [];
+    playlists.forEach((playlist) => {
+        if (playlist.favorites?.length && playlist.favorites.length > 0) {
+            playlist?.playlist?.items.forEach((channel: Channel) => {
+                if (
+                    playlist.favorites &&
+                    (playlist.favorites.includes(channel.id) ||
+                        playlist.favorites.includes(channel.url))
+                ) {
+                    favorites.push(channel);
+                }
+            });
+        }
+    });
+    return favorites;
+}
+
+/**
+ * Creates a simplified playlist object which is used for global favorites
+ * @param channels channels list
+ * @returns simplified playlist object
+ */
+export function createFavoritesPlaylist(
+    channels: Channel[]
+): Partial<Playlist> {
+    return {
+        _id: 'global-favorites',
+        count: channels.length,
+        playlist: {
+            items: channels,
+        },
+        favorites: channels.map((channel) => channel.url),
+        filename: 'Global favorites',
+    };
+}
+
+/**
+ * Returns last segment (part after last slash "/") of the given URL
+ * @param value URL as string
+ */
+export const getFilenameFromUrl = (value: string): string => {
+    if (value && value.length > 1) {
+        return value.substring(value.lastIndexOf('/') + 1);
+    }
+    return 'Untitled playlist';
+};
+
+/**
+ * Creates a playlist object
+ * @param name name of the playlist
+ * @param playlist playlist to save
+ * @param urlOrPath absolute fs path or url of the playlist
+ * @param uploadType upload type - by file or via an url
+ */
+export const createPlaylistObject = (
+    name: string,
+    playlist: ParsedPlaylist,
+    urlOrPath?: string,
+    uploadType?: 'URL' | 'FILE' | 'TEXT'
+): Playlist => {
+    return {
+        _id: uuidv4(),
+        filename: name,
+        title: name,
+        count: playlist.items.length,
+        playlist: {
+            ...playlist,
+            items: playlist.items.map((item: ParsedPlaylistItem) => ({
+                ...item,
+                id: uuidv4(),
+            })),
+        },
+        importDate: new Date().toISOString(),
+        lastUsage: new Date().toISOString(),
+        favorites: [],
+        autoRefresh: false,
+        ...(uploadType === 'URL' ? { url: urlOrPath } : {}),
+        ...(uploadType === 'FILE' ? { filePath: urlOrPath } : {}),
+    };
+};
+
+export const getExtensionFromUrl = (url: string) => {
+    return url.split(/[#?]/)[0].split('.').pop()?.trim();
+};
diff --git a/libs/shared/m3u-utils/tsconfig.json b/libs/shared/m3u-utils/tsconfig.json
new file mode 100644
index 0000000..c0906eb
--- /dev/null
+++ b/libs/shared/m3u-utils/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "importHelpers": true,
+        "noImplicitOverride": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noPropertyAccessFromIndexSignature": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/shared/m3u-utils/tsconfig.lib.json b/libs/shared/m3u-utils/tsconfig.lib.json
new file mode 100644
index 0000000..163d907
--- /dev/null
+++ b/libs/shared/m3u-utils/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "types": ["node"]
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/shared/m3u-utils/tsconfig.spec.json b/libs/shared/m3u-utils/tsconfig.spec.json
new file mode 100644
index 0000000..4b0383f
--- /dev/null
+++ b/libs/shared/m3u-utils/tsconfig.spec.json
@@ -0,0 +1,15 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "moduleResolution": "node10",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/ui/components/README.md b/libs/ui/components/README.md
new file mode 100644
index 0000000..992f27e
--- /dev/null
+++ b/libs/ui/components/README.md
@@ -0,0 +1,7 @@
+# components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components` to execute the unit tests.
diff --git a/libs/ui/components/eslint.config.mjs b/libs/ui/components/eslint.config.mjs
new file mode 100644
index 0000000..cf003ab
--- /dev/null
+++ b/libs/ui/components/eslint.config.mjs
@@ -0,0 +1,37 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'app',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'app',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {
+            '@angular-eslint/template/click-events-have-key-events': 'off',
+            '@angular-eslint/template/interactive-supports-focus': 'off',
+        },
+    },
+];
diff --git a/libs/ui/components/jest.config.ts b/libs/ui/components/jest.config.ts
new file mode 100644
index 0000000..577d486
--- /dev/null
+++ b/libs/ui/components/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'components',
+    preset: '../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../coverage/libs/ui/components',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/ui/components/project.json b/libs/ui/components/project.json
new file mode 100644
index 0000000..305d265
--- /dev/null
+++ b/libs/ui/components/project.json
@@ -0,0 +1,28 @@
+{
+    "name": "components",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/ui/components/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:shared-ui", "type:ui"],
+    "targets": {
+        "test": {
+            "executor": "nx:run-commands",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "command": [
+                    "node",
+                    "./tools/testing/run-web-esm-lib-tests.mjs",
+                    "libs/ui/components/src"
+                ],
+                "env": {
+                    "NODE_OPTIONS": "--experimental-vm-modules"
+                },
+                "forwardAllArgs": true
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/ui/components/src/index.ts b/libs/ui/components/src/index.ts
new file mode 100644
index 0000000..e13958e
--- /dev/null
+++ b/libs/ui/components/src/index.ts
@@ -0,0 +1,11 @@
+export * from './lib/channel-list-container/channel-list-container.component';
+export * from './lib/channel-list-container/channel-list-item/channel-list-item.component';
+export * from './lib/channel-list-loading-state/channel-list-loading-state.component';
+export * from './lib/confirm-dialog/confirm-dialog.component';
+export * from './lib/confirm-dialog/dialog.service';
+export * from './lib/content-hero/content-hero.component';
+export * from './lib/external-playback-dock/external-playback-dock.component';
+export * from './lib/progress-capsule/progress-capsule.component';
+export * from './lib/resizable/resizable.directive';
+export * from './lib/season-container/season-container.component';
+export * from './lib/watched-badge/watched-badge.component';
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
new file mode 100644
index 0000000..91c49a6
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
@@ -0,0 +1,60 @@
+<div id="all-channels" class="channel-list">
+    @if (enrichedChannels().length === 0 && searchTerm()) {
+        <div class="no-results">
+            <mat-icon class="no-results-icon">search_off</mat-icon>
+            <div class="no-results-title">
+                {{ 'CHANNELS.NO_SEARCH_RESULTS' | translate }}
+            </div>
+            <div class="no-results-hint">
+                {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
+            </div>
+        </div>
+    } @else {
+        <cdk-virtual-scroll-viewport
+            [itemSize]="itemSize()"
+            class="scroll-viewport"
+        >
+            <app-channel-list-item
+                *cdkVirtualFor="
+                    let channel of enrichedChannels();
+                    index as i;
+                    trackBy: trackByFn
+                "
+                [name]="
+                    i +
+                    1 +
+                    '. ' +
+                    (channel?.name || 'CHANNELS.UNNAMED_CHANNEL' | translate)
+                "
+                [logo]="channel.logo"
+                [showEpg]="shouldShowEpg()"
+                [showDetailsContextMenu]="true"
+                [isRadio]="channel?.radio === 'true'"
+                [epgProgram]="channel.epgProgram"
+                [progressPercentage]="channel.progressPercentage"
+                (clicked)="onChannelClick(channel)"
+                (contextMenuRequested)="onChannelContextMenu(channel, $event)"
+                [selected]="activeChannelUrl() === channel?.url"
+                [showFavoriteButton]="true"
+                [isFavorite]="favoriteIds().has(channel?.url)"
+                (favoriteToggled)="onFavoriteToggle(channel, $event)"
+            />
+        </cdk-virtual-scroll-viewport>
+    }
+</div>
+
+<div
+    aria-hidden="true"
+    class="channel-context-menu-anchor"
+    [style.left]="contextMenuPosition().x"
+    [style.top]="contextMenuPosition().y"
+    [matMenuTriggerFor]="channelContextMenu"
+    #contextMenuTrigger="matMenuTrigger"
+></div>
+
+<mat-menu #channelContextMenu="matMenu">
+    <button mat-menu-item (click)="openChannelDetails()">
+        <mat-icon>info</mat-icon>
+        <span>{{ 'CHANNELS.SHOW_DETAILS' | translate }}</span>
+    </button>
+</mat-menu>
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
new file mode 100644
index 0000000..4208174
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
@@ -0,0 +1,105 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.scroll-viewport {
+    height: 100%;
+    overflow-x: hidden;
+    width: 100%;
+
+    ::ng-deep .cdk-virtual-scroll-content-wrapper {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+
+.search-panel {
+    padding: 10px 0 0 0;
+    display: flex;
+    justify-content: center;
+}
+
+.search-bar {
+    @include mat.form-field-density(-5);
+
+    & {
+        width: 96%;
+    }
+}
+
+#all-channels {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.channel-list {
+    overflow-x: hidden;
+}
+
+.channel-context-menu-anchor {
+    position: fixed;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+
+:host ::ng-deep .search-bar div {
+    border-radius: 20px;
+}
+
+:host ::ng-deep .search-bar div[matformfieldlineripple],
+:host ::ng-deep .search-bar .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
+
+[type='search']::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    cursor: pointer;
+    appearance: none;
+    height: 10px;
+    width: 10px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5NiA5NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTYgOTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gZmlsbD0iI2VlZSIgcG9pbnRzPSI5NiwxNCA4MiwwIDQ4LDM0IDE0LDAgMCwxNCAzNCw0OCAwLDgyIDE0LDk2IDQ4LDYyIDgyLDk2IDk2LDgyIDYyLDQ4ICIvPg0KPC9zdmc+DQo=');
+    background-size: 10px 10px;
+    color: #fff;
+}
+
+.no-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    text-align: center;
+    height: calc(100vh - 220px);
+}
+
+.no-results-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    opacity: 0.5;
+    margin-bottom: 16px;
+}
+
+.no-results-title {
+    font-size: 1.05rem;
+    font-weight: 520;
+    letter-spacing: -0.01em;
+    margin-bottom: 8px;
+}
+
+.no-results-hint {
+    opacity: 0.65;
+    font-size: 0.85rem;
+}
+
+@media only screen and (max-width: 599px) {
+    /* Mobile responsive tweaks if needed */
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.spec.ts
new file mode 100644
index 0000000..61d263f
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.spec.ts
@@ -0,0 +1,157 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { Channel } from 'shared-interfaces';
+import { ChannelDetailsDialogComponent } from '../channel-details-dialog/channel-details-dialog.component';
+import { AllChannelsViewComponent } from './all-channels-view.component';
+
+function createChannel(id: string, name: string, url: string): Channel {
+    return {
+        epgParams: '',
+        group: {
+            title: 'News',
+        },
+        http: {
+            origin: '',
+            referrer: '',
+            'user-agent': '',
+        },
+        id,
+        name,
+        radio: 'false',
+        tvg: {
+            id: `${id}-tvg`,
+            logo: '',
+            name,
+            rec: '7',
+            url: '',
+        },
+        url,
+        catchup: {
+            days: '7',
+            type: 'shift',
+        },
+    } as Channel;
+}
+
+describe('AllChannelsViewComponent', () => {
+    let fixture: ComponentFixture<AllChannelsViewComponent>;
+    let component: AllChannelsViewComponent;
+    let dialog: { open: jest.Mock };
+
+    const primaryChannel = createChannel(
+        'channel-1',
+        'News One',
+        'https://example.com/news-one.m3u8'
+    );
+
+    beforeEach(async () => {
+        dialog = {
+            open: jest.fn(),
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [
+                AllChannelsViewComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AllChannelsViewComponent);
+        component = fixture.componentInstance;
+
+        fixture.componentRef.setInput('channels', [primaryChannel]);
+        fixture.componentRef.setInput('searchTerm', '');
+        fixture.componentRef.setInput('channelEpgMap', new Map<string, null>());
+        fixture.componentRef.setInput('channelIconMap', new Map<string, string>());
+        fixture.componentRef.setInput('progressTick', 0);
+        fixture.componentRef.setInput('shouldShowEpg', false);
+        fixture.componentRef.setInput('itemSize', 48);
+        fixture.componentRef.setInput('favoriteIds', new Set<string>());
+        fixture.detectChanges();
+    });
+
+    it('stores viewport coordinates for the context menu and opens the dialog for that channel', async () => {
+        const openMenuSpy = jest
+            .spyOn(component.contextMenuTrigger(), 'openMenu')
+            .mockImplementation();
+
+        component.onChannelContextMenu(
+            primaryChannel,
+            {
+                clientX: 144,
+                clientY: 188,
+            } as MouseEvent
+        );
+        await Promise.resolve();
+
+        expect(component.contextMenuChannel()).toBe(primaryChannel);
+        expect(component.contextMenuPosition()).toEqual({
+            x: '144px',
+            y: '188px',
+        });
+        expect(openMenuSpy).toHaveBeenCalled();
+
+        component.openChannelDetails();
+
+        expect(dialog.open).toHaveBeenCalledWith(
+            ChannelDetailsDialogComponent,
+            expect.objectContaining({
+                data: primaryChannel,
+                maxWidth: '720px',
+                width: 'calc(100vw - 32px)',
+            })
+        );
+    });
+
+    it('keeps the playlist logo when an EPG icon is also available', () => {
+        const playlistLogo = 'https://example.com/playlist-logo.png';
+        const channel = {
+            ...primaryChannel,
+            tvg: {
+                ...primaryChannel.tvg,
+                logo: playlistLogo,
+            },
+        };
+
+        fixture.componentRef.setInput('channels', [channel]);
+        fixture.componentRef.setInput(
+            'channelIconMap',
+            new Map([[channel.tvg.id, 'https://example.com/epg-logo.png']])
+        );
+        fixture.detectChanges();
+
+        expect(component.enrichedChannels()[0].logo).toBe(playlistLogo);
+    });
+
+    it('falls back to the EPG icon using tvg-name when tvg-id and playlist logo are missing', () => {
+        const channel = {
+            ...primaryChannel,
+            tvg: {
+                ...primaryChannel.tvg,
+                id: '',
+                logo: '',
+                name: 'Guide News',
+            },
+        };
+
+        fixture.componentRef.setInput('channels', [channel]);
+        fixture.componentRef.setInput(
+            'channelIconMap',
+            new Map([['Guide News', 'https://example.com/guide-news.png']])
+        );
+        fixture.detectChanges();
+
+        expect(component.enrichedChannels()[0].logo).toBe(
+            'https://example.com/guide-news.png'
+        );
+    });
+});
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.ts b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.ts
new file mode 100644
index 0000000..c141cb2
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.ts
@@ -0,0 +1,195 @@
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+    output,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { TranslatePipe } from '@ngx-translate/core';
+import { resolveChannelEpgLookupKey } from 'm3u-state';
+import { Channel, EpgProgram } from 'shared-interfaces';
+import { resolveChannelLogo } from '../channel-logo-fallback.util';
+import { ChannelDetailsDialogComponent } from '../channel-details-dialog/channel-details-dialog.component';
+import { ChannelListItemComponent } from '../channel-list-item/channel-list-item.component';
+
+/** Enriched channel with pre-computed EPG and progress data */
+export interface EnrichedChannel extends Channel {
+    epgProgram: EpgProgram | null | undefined;
+    logo: string;
+    progressPercentage: number;
+}
+
+@Component({
+    selector: 'app-all-channels-view',
+    templateUrl: './all-channels-view.component.html',
+    styleUrls: ['./all-channels-view.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        ChannelListItemComponent,
+        MatIconModule,
+        MatMenuModule,
+        ScrollingModule,
+        TranslatePipe,
+    ],
+})
+export class AllChannelsViewComponent {
+    private readonly dialog = inject(MatDialog);
+
+    readonly contextMenuTrigger = viewChild.required<MatMenuTrigger>(
+        'contextMenuTrigger'
+    );
+
+    /** All channels (will be filtered by search) */
+    readonly channels = input.required<Channel[]>();
+    readonly searchTerm = input('');
+
+    /** EPG map for channel enrichment */
+    readonly channelEpgMap = input.required<Map<string, EpgProgram | null>>();
+    readonly channelIconMap = input.required<Map<string, string>>();
+
+    /** Progress tick to trigger progress recalculation */
+    readonly progressTick = input.required<number>();
+
+    /** Whether to show EPG data */
+    readonly shouldShowEpg = input.required<boolean>();
+
+    /** Item size for virtual scroll */
+    readonly itemSize = input.required<number>();
+
+    /** Currently active channel URL */
+    readonly activeChannelUrl = input<string | undefined>();
+
+    /** Set of favorite channel URLs */
+    readonly favoriteIds = input<Set<string>>(new Set());
+
+    /** Emits when a channel is selected */
+    readonly channelSelected = output<Channel>();
+
+    /** Emits when favorite is toggled */
+    readonly favoriteToggled = output<{
+        channel: Channel;
+        event: MouseEvent;
+    }>();
+
+    readonly contextMenuChannel = signal<Channel | null>(null);
+    readonly contextMenuPosition = signal({
+        x: '0px',
+        y: '0px',
+    });
+
+    /**
+     * Computed signal for filtered and enriched channels.
+     */
+    readonly enrichedChannels = computed(() => {
+        const term = this.searchTerm().trim().toLowerCase();
+        const channels = this.channels();
+        const epgMap = this.channelEpgMap();
+        const iconMap = this.channelIconMap();
+        // Read progressTick to create dependency for progress refresh
+        this.progressTick();
+
+        let result = channels;
+
+        // Filter if search term exists
+        if (term) {
+            result = channels.filter((ch) =>
+                ch.name?.toLowerCase().includes(term)
+            );
+        }
+
+        // Enrich with EPG data and pre-calculate progress
+        return result.map((channel) => {
+            const channelId = resolveChannelEpgLookupKey(channel);
+            const epgProgram = channelId ? epgMap.get(channelId) : null;
+            return {
+                ...channel,
+                epgProgram,
+                logo: resolveChannelLogo(channel, iconMap),
+                progressPercentage: this.calculateProgress(epgProgram),
+            } as EnrichedChannel;
+        });
+    });
+
+    /**
+     * Calculates progress percentage for an EPG program
+     */
+    private calculateProgress(
+        epgProgram: EpgProgram | null | undefined
+    ): number {
+        if (!epgProgram) {
+            return 0;
+        }
+
+        const now = Date.now();
+        const start = new Date(epgProgram.start).getTime();
+        const stop = new Date(epgProgram.stop).getTime();
+
+        // Validate start/stop are finite numbers
+        if (!Number.isFinite(start) || !Number.isFinite(stop)) {
+            return 0;
+        }
+
+        const total = stop - start;
+
+        // Bail out if duration is zero or negative
+        if (total <= 0) {
+            return 0;
+        }
+
+        // Clamp elapsed to [0, total]
+        const elapsed = Math.min(total, Math.max(0, now - start));
+
+        return Math.round((elapsed / total) * 100);
+    }
+
+    trackByFn(_: number, channel: Channel): string {
+        return channel?.id;
+    }
+
+    onChannelClick(channel: Channel): void {
+        this.channelSelected.emit(channel);
+    }
+
+    onFavoriteToggle(channel: Channel, event: MouseEvent): void {
+        this.favoriteToggled.emit({ channel, event });
+    }
+
+    onChannelContextMenu(channel: Channel, event: MouseEvent): void {
+        this.contextMenuChannel.set(channel);
+        this.contextMenuPosition.set({
+            x: `${event.clientX}px`,
+            y: `${event.clientY}px`,
+        });
+
+        const trigger = this.contextMenuTrigger();
+        if (trigger.menuOpen) {
+            trigger.closeMenu();
+        }
+
+        queueMicrotask(() => {
+            this.contextMenuTrigger().openMenu();
+        });
+    }
+
+    openChannelDetails(): void {
+        const channel = this.contextMenuChannel();
+        if (!channel) {
+            return;
+        }
+
+        this.contextMenuTrigger().closeMenu();
+        this.dialog.open(ChannelDetailsDialogComponent, {
+            data: channel,
+            maxWidth: '720px',
+            width: 'calc(100vw - 32px)',
+        });
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.html b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.html
new file mode 100644
index 0000000..4276745
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.html
@@ -0,0 +1,233 @@
+<section mat-dialog-title class="channel-dialog__hero">
+    <div class="channel-dialog__hero-copy">
+        <div class="channel-dialog__eyebrow">
+            <span class="channel-dialog__eyebrow-mark"></span>
+            {{ channel.group?.title || 'M3U' }}
+        </div>
+
+        <div class="channel-dialog__headline-row">
+            <div class="channel-dialog__headline-text">
+                @if (channel.tvg?.logo) {
+                    <img
+                        class="channel-dialog__logo"
+                        [src]="channel.tvg.logo"
+                        [alt]="channel.name"
+                        (error)="logoError = true"
+                        [hidden]="logoError"
+                    />
+                }
+                <div>
+                    <h2 class="channel-dialog__title">{{ channel.name }}</h2>
+                    <p class="channel-dialog__subtitle">
+                        {{ 'CHANNELS.DETAILS_DIALOG.DESCRIPTION' | translate }}
+                    </p>
+                </div>
+            </div>
+
+            <div class="channel-dialog__status-cluster">
+                @if (channel.radio === 'true') {
+                    <span
+                        class="channel-dialog__status-pill channel-dialog__status-pill--radio"
+                    >
+                        {{ 'CHANNELS.DETAILS_DIALOG.RADIO' | translate }}
+                    </span>
+                }
+                @if (catchupAvailable) {
+                    <span
+                        class="channel-dialog__status-pill channel-dialog__status-pill--active"
+                    >
+                        {{ 'CHANNELS.DETAILS_DIALOG.CATCHUP_AVAILABLE' | translate }}
+                    </span>
+                }
+                @if (catchupPlaybackSupported) {
+                    <span
+                        class="channel-dialog__status-pill channel-dialog__status-pill--playback"
+                    >
+                        {{ 'CHANNELS.DETAILS_DIALOG.PLAYBACK_SUPPORTED' | translate }}
+                    </span>
+                }
+            </div>
+        </div>
+    </div>
+
+    <div class="channel-dialog__hero-stats">
+        @for (stat of heroStats; track stat.labelKey) {
+            <article class="channel-stat">
+                <div class="channel-stat__icon">
+                    <mat-icon>{{ stat.icon }}</mat-icon>
+                </div>
+                <div class="channel-stat__label">
+                    {{ stat.labelKey | translate }}
+                </div>
+                <div
+                    class="channel-stat__value"
+                    [class.channel-stat__value--mono]="stat.mono"
+                    [class.channel-stat__value--empty]="stat.empty"
+                >
+                    @if (stat.valueKey) {
+                        {{ stat.valueKey | translate: stat.translateParams }}
+                    } @else {
+                        {{ stat.value }}
+                    }
+                </div>
+            </article>
+        }
+    </div>
+</section>
+
+<mat-dialog-content class="channel-dialog__content">
+    <div class="channel-dialog__grid">
+        <section class="channel-panel">
+            <div class="channel-panel__header">
+                <p class="channel-panel__eyebrow">
+                    {{ 'CHANNELS.DETAILS_DIALOG.SUMMARY' | translate }}
+                </p>
+                <h3>{{ 'CHANNELS.DETAILS_DIALOG.STREAM_URL' | translate }}</h3>
+            </div>
+
+            <div class="channel-dialog__url-block">
+                <code>{{ channel.url }}</code>
+                <button
+                    mat-icon-button
+                    class="channel-dialog__copy-btn"
+                    [cdkCopyToClipboard]="channel.url"
+                >
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+            <dl class="channel-detail-list">
+                @for (field of streamFields; track field.labelKey) {
+                    <div class="channel-detail-row">
+                        <dt>{{ field.labelKey | translate }}</dt>
+                        <dd
+                            [class.channel-detail-row__value--mono]="
+                                field.monospace
+                            "
+                            [class.channel-detail-row__value--empty]="
+                                field.empty
+                            "
+                        >
+                            @if (field.valueKey) {
+                                {{
+                                    field.valueKey
+                                        | translate: field.translateParams
+                                }}
+                            } @else {
+                                {{ field.value }}
+                            }
+                        </dd>
+                    </div>
+                }
+            </dl>
+
+            @if (hasTvgData) {
+                <div class="channel-chip-section">
+                    <p class="channel-chip-section__label">
+                        {{ 'CHANNELS.DETAILS_DIALOG.TVG' | translate }}
+                    </p>
+                    <dl class="channel-detail-list">
+                        @for (field of tvgFields; track field.labelKey) {
+                            <div class="channel-detail-row">
+                                <dt>{{ field.labelKey | translate }}</dt>
+                                <dd
+                                    [class.channel-detail-row__value--mono]="
+                                        field.monospace
+                                    "
+                                    [class.channel-detail-row__value--empty]="
+                                        field.empty
+                                    "
+                                >
+                                    @if (field.valueKey) {
+                                        {{
+                                            field.valueKey
+                                                | translate
+                                                    : field.translateParams
+                                        }}
+                                    } @else {
+                                        {{ field.value }}
+                                    }
+                                </dd>
+                            </div>
+                        }
+                    </dl>
+                </div>
+            }
+        </section>
+
+        <section class="channel-panel">
+            <div class="channel-panel__header">
+                <p class="channel-panel__eyebrow">
+                    {{ 'CHANNELS.DETAILS_DIALOG.CATCHUP' | translate }}
+                </p>
+                <h3>
+                    {{ channel.catchup?.type || ('CHANNELS.DETAILS_DIALOG.NOT_AVAILABLE' | translate) }}
+                </h3>
+            </div>
+
+            <dl class="channel-detail-list">
+                @for (field of catchupFields; track field.labelKey) {
+                    <div class="channel-detail-row">
+                        <dt>{{ field.labelKey | translate }}</dt>
+                        <dd
+                            [class.channel-detail-row__value--mono]="
+                                field.monospace
+                            "
+                            [class.channel-detail-row__value--empty]="
+                                field.empty
+                            "
+                        >
+                            @if (field.valueKey) {
+                                {{
+                                    field.valueKey
+                                        | translate: field.translateParams
+                                }}
+                            } @else {
+                                {{ field.value }}
+                            }
+                        </dd>
+                    </div>
+                }
+            </dl>
+
+            @if (hasHttpData) {
+                <div class="channel-chip-section">
+                    <p class="channel-chip-section__label">
+                        {{ 'CHANNELS.DETAILS_DIALOG.HTTP' | translate }}
+                    </p>
+                    <dl class="channel-detail-list">
+                        @for (field of httpFields; track field.labelKey) {
+                            <div class="channel-detail-row">
+                                <dt>{{ field.labelKey | translate }}</dt>
+                                <dd
+                                    [class.channel-detail-row__value--mono]="
+                                        field.monospace
+                                    "
+                                    [class.channel-detail-row__value--empty]="
+                                        field.empty
+                                    "
+                                >
+                                    @if (field.valueKey) {
+                                        {{
+                                            field.valueKey
+                                                | translate
+                                                    : field.translateParams
+                                        }}
+                                    } @else {
+                                        {{ field.value }}
+                                    }
+                                </dd>
+                            </div>
+                        }
+                    </dl>
+                </div>
+            }
+        </section>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions class="channel-dialog__actions">
+    <button mat-stroked-button mat-dialog-close class="channel-dialog__close">
+        {{ 'CLOSE' | translate }}
+    </button>
+</mat-dialog-actions>
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
new file mode 100644
index 0000000..7b53595
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
@@ -0,0 +1,390 @@
+:host {
+    display: block;
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+}
+
+// ─── Hero header ────────────────────────────────────────────────────────────
+.channel-dialog__hero {
+    margin: 0;
+    padding: 20px 20px 18px;
+    display: grid;
+    gap: 18px;
+    background:
+        var(--app-accent-gradient),
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+}
+
+.channel-dialog__hero-copy {
+    display: grid;
+    gap: 10px;
+}
+
+.channel-dialog__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    color: var(--app-eyebrow-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.channel-dialog__eyebrow-mark {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--mat-sys-primary);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
+}
+
+.channel-dialog__headline-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 14px;
+}
+
+.channel-dialog__headline-text {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    min-width: 0;
+}
+
+.channel-dialog__logo {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    object-fit: contain;
+    background: var(--mat-sys-surface-container);
+    border: 1px solid var(--app-separator);
+    flex-shrink: 0;
+}
+
+.channel-dialog__title {
+    margin: 0;
+    font-size: 1.3rem;
+    line-height: 1.2;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+}
+
+.channel-dialog__subtitle {
+    margin: 4px 0 0;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.88rem;
+}
+
+// ─── Status pills ───────────────────────────────────────────────────────────
+.channel-dialog__status-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.channel-dialog__status-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 26px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid var(--app-separator);
+    background: var(--mat-sys-surface-container);
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.channel-dialog__status-pill--active {
+    border-color: color-mix(in srgb, #34d399 30%, transparent);
+    background: color-mix(in srgb, #34d399 12%, transparent);
+    color: #2db36f;
+}
+
+.channel-dialog__status-pill--radio {
+    border-color: color-mix(in srgb, var(--mat-sys-tertiary) 30%, transparent);
+    background: color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent);
+    color: var(--mat-sys-tertiary);
+}
+
+.channel-dialog__status-pill--playback {
+    border-color: color-mix(in srgb, var(--mat-sys-primary) 30%, transparent);
+    background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    color: var(--mat-sys-primary);
+}
+
+// ─── Hero stat cards ────────────────────────────────────────────────────────
+.channel-dialog__hero-stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.channel-stat {
+    display: grid;
+    gap: 4px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1px solid var(--app-widget-border, transparent);
+    background: var(--app-widget-bg, var(--mat-sys-surface-container));
+    box-shadow: var(--app-widget-shadow, none);
+    outline: 1px solid rgba(255, 255, 255, 0.04);
+    outline-offset: -1px;
+}
+
+.channel-stat__icon {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    color: var(--mat-sys-primary);
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.channel-stat__label {
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.channel-stat__value {
+    font-size: 1.1rem;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--mono {
+        font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
+        font-size: 0.92rem;
+    }
+
+    &--empty {
+        color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+        font-style: italic;
+        font-weight: 500;
+        font-size: 0.88rem;
+    }
+}
+
+// ─── Content area ───────────────────────────────────────────────────────────
+.channel-dialog__content {
+    margin: 0;
+    padding: 20px;
+    background: var(--app-widget-bg, var(--mat-sys-surface));
+}
+
+.channel-dialog__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+}
+
+// ─── URL block ──────────────────────────────────────────────────────────────
+.channel-dialog__url-block {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 10px 10px 10px 14px;
+    border-radius: 10px;
+    border: 1px solid var(--app-separator);
+    background: var(--mat-sys-surface-container);
+
+    code {
+        flex: 1;
+        min-width: 0;
+        font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
+        font-size: 0.82rem;
+        line-height: 1.5;
+        color: var(--app-body-color, var(--mat-sys-on-surface));
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
+}
+
+.channel-dialog__copy-btn {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    --mdc-icon-button-state-layer-size: 32px;
+    --mdc-icon-button-icon-size: 18px;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+}
+
+// ─── Detail panels ──────────────────────────────────────────────────────────
+.channel-panel {
+    display: grid;
+    gap: 14px;
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid var(--app-widget-border, transparent);
+    background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
+    box-shadow: var(--app-widget-shadow, none);
+    outline: 1px solid rgba(255, 255, 255, 0.04);
+    outline-offset: -1px;
+    align-content: start;
+}
+
+.channel-panel__header {
+    display: grid;
+    gap: 4px;
+}
+
+.channel-panel__header h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+}
+
+.channel-panel__eyebrow {
+    margin: 0;
+    color: var(--app-eyebrow-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+// ─── Detail rows ────────────────────────────────────────────────────────────
+.channel-detail-list {
+    display: grid;
+    gap: 0;
+    margin: 0;
+}
+
+.channel-detail-row {
+    display: grid;
+    grid-template-columns: minmax(100px, 130px) minmax(0, 1fr);
+    gap: 12px;
+    align-items: baseline;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--app-separator);
+}
+
+.channel-detail-row:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+}
+
+.channel-detail-row dt {
+    margin: 0;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.channel-detail-row dd {
+    margin: 0;
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+    font-size: 0.88rem;
+    font-weight: 500;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}
+
+.channel-detail-row__value--mono {
+    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
+    font-size: 0.82rem;
+}
+
+.channel-detail-row__value--empty {
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-style: italic;
+}
+
+// ─── Chip sections (sub-group headers) ──────────────────────────────────────
+.channel-chip-section {
+    display: grid;
+    gap: 10px;
+    padding-top: 4px;
+}
+
+.channel-chip-section__label {
+    margin: 0;
+    color: var(--app-eyebrow-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding-top: 4px;
+    border-top: 1px solid var(--app-separator);
+}
+
+// ─── Footer actions ─────────────────────────────────────────────────────────
+.channel-dialog__actions {
+    padding: 0 20px 20px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    border-top: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+    background: var(--app-widget-bg, var(--mat-sys-surface));
+}
+
+.channel-dialog__close {
+    min-width: 100px;
+    border-radius: 999px;
+}
+
+// ─── Responsive breakpoints ─────────────────────────────────────────────────
+@media (max-width: 720px) {
+    .channel-dialog__hero,
+    .channel-dialog__content,
+    .channel-dialog__actions {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    .channel-dialog__headline-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .channel-dialog__status-cluster {
+        justify-content: flex-start;
+    }
+
+    .channel-dialog__hero-stats,
+    .channel-dialog__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .channel-detail-row {
+        grid-template-columns: 1fr;
+        gap: 4px;
+    }
+}
+
+@media (max-width: 480px) {
+    .channel-dialog__hero-stats {
+        grid-template-columns: 1fr;
+    }
+
+    .channel-dialog__grid {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.spec.ts
new file mode 100644
index 0000000..61b5584
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.spec.ts
@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { Channel } from 'shared-interfaces';
+import { ChannelDetailsDialogComponent } from './channel-details-dialog.component';
+
+describe('ChannelDetailsDialogComponent', () => {
+    let fixture: ComponentFixture<ChannelDetailsDialogComponent>;
+    let component: ChannelDetailsDialogComponent;
+
+    const channel: Channel = {
+        epgParams: 'src=test-playlist',
+        group: {
+            title: 'News',
+        },
+        http: {
+            origin: 'https://provider.example.com',
+            referrer: 'https://provider.example.com/list',
+            'user-agent': 'IPTVnator Test',
+        },
+        id: 'channel-1',
+        name: 'News One',
+        radio: 'false',
+        tvg: {
+            id: 'news-one',
+            logo: 'https://provider.example.com/logo.png',
+            name: 'News One HD',
+            rec: '5',
+            url: 'https://provider.example.com/guide.xml',
+        },
+        url: 'https://provider.example.com/stream.m3u8',
+        catchup: {
+            days: '5',
+            source: 'https://provider.example.com/catchup.m3u8',
+            type: 'append',
+        },
+        timeshift: '5',
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                ChannelDetailsDialogComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: channel,
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ChannelDetailsDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('derives archive window and playback support from parsed catchup metadata', () => {
+        expect(component.archiveDays).toBe(5);
+        expect(component.catchupAvailable).toBe(true);
+        expect(component.catchupPlaybackSupported).toBe(true);
+        expect(component.heroStats).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    labelKey: 'CHANNELS.DETAILS_DIALOG.WINDOW',
+                    translateParams: { count: 5 },
+                    valueKey: 'CHANNELS.DETAILS_DIALOG.DAYS_OTHER',
+                }),
+            ])
+        );
+    });
+});
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.ts
new file mode 100644
index 0000000..99301f3
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.ts
@@ -0,0 +1,185 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import { getM3uArchiveDays, isM3uCatchupPlaybackSupported } from 'm3u-utils';
+import { Channel } from 'shared-interfaces';
+
+interface ChannelDetailField {
+    readonly empty?: boolean;
+    readonly labelKey: string;
+    readonly monospace?: boolean;
+    readonly translateParams?: Record<string, number>;
+    readonly value?: string;
+    readonly valueKey?: string;
+}
+
+interface HeroStat {
+    readonly empty?: boolean;
+    readonly icon: string;
+    readonly labelKey: string;
+    readonly mono?: boolean;
+    readonly translateParams?: Record<string, number>;
+    readonly value?: string;
+    readonly valueKey?: string;
+}
+
+@Component({
+    selector: 'app-channel-details-dialog',
+    templateUrl: './channel-details-dialog.component.html',
+    styleUrls: ['./channel-details-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ClipboardModule, MatButtonModule, MatDialogModule, MatIconModule, TranslatePipe],
+})
+export class ChannelDetailsDialogComponent {
+    readonly channel = inject<Channel>(MAT_DIALOG_DATA);
+
+    readonly archiveDays = getM3uArchiveDays(this.channel);
+    readonly catchupAvailable = this.archiveDays > 0;
+    readonly catchupPlaybackSupported = isM3uCatchupPlaybackSupported(
+        this.channel
+    );
+
+    logoError = false;
+
+    readonly hasTvgData = !!(
+        this.channel.tvg?.id ||
+        this.channel.tvg?.name ||
+        this.channel.tvg?.url ||
+        this.channel.tvg?.rec
+    );
+
+    readonly hasHttpData = !!(
+        this.channel.http?.origin ||
+        this.channel.http?.referrer ||
+        this.channel.http?.['user-agent']
+    );
+
+    readonly heroStats: HeroStat[] = [
+        {
+            icon: 'tag',
+            labelKey: 'CHANNELS.DETAILS_DIALOG.CHANNEL_ID',
+            value: this.channel.id?.trim() || undefined,
+            valueKey: this.channel.id?.trim()
+                ? undefined
+                : 'CHANNELS.DETAILS_DIALOG.EMPTY',
+            mono: true,
+            empty: !this.channel.id?.trim(),
+        },
+        {
+            icon: 'folder',
+            labelKey: 'CHANNELS.DETAILS_DIALOG.GROUP',
+            value: this.channel.group?.title?.trim() || undefined,
+            valueKey: this.channel.group?.title?.trim()
+                ? undefined
+                : 'CHANNELS.DETAILS_DIALOG.EMPTY',
+            empty: !this.channel.group?.title?.trim(),
+        },
+        this.createArchiveHeroStat(),
+        {
+            icon: 'schedule',
+            labelKey: 'CHANNELS.DETAILS_DIALOG.TIMESHIFT',
+            value: this.channel.timeshift?.trim() || undefined,
+            valueKey: this.channel.timeshift?.trim()
+                ? undefined
+                : 'CHANNELS.DETAILS_DIALOG.NOT_AVAILABLE',
+            empty: !this.channel.timeshift?.trim(),
+        },
+    ];
+
+    readonly streamFields: ChannelDetailField[] = [
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.EPG_PARAMS',
+            this.channel.epgParams,
+            true
+        ),
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.TVG_LOGO',
+            this.channel.tvg?.logo,
+            true
+        ),
+    ];
+
+    readonly tvgFields: ChannelDetailField[] = [
+        this.field('CHANNELS.DETAILS_DIALOG.TVG_ID', this.channel.tvg?.id, true),
+        this.field('CHANNELS.DETAILS_DIALOG.TVG_NAME', this.channel.tvg?.name),
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.TVG_URL',
+            this.channel.tvg?.url,
+            true
+        ),
+        this.field('CHANNELS.DETAILS_DIALOG.TVG_REC', this.channel.tvg?.rec),
+    ];
+
+    readonly catchupFields: ChannelDetailField[] = [
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.CATCHUP_SOURCE',
+            this.channel.catchup?.source,
+            true
+        ),
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.CATCHUP_DAYS',
+            this.channel.catchup?.days
+        ),
+    ];
+
+    readonly httpFields: ChannelDetailField[] = [
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.HTTP_ORIGIN',
+            this.channel.http?.origin,
+            true
+        ),
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.HTTP_REFERRER',
+            this.channel.http?.referrer,
+            true
+        ),
+        this.field(
+            'CHANNELS.DETAILS_DIALOG.HTTP_USER_AGENT',
+            this.channel.http?.['user-agent'],
+            true
+        ),
+    ];
+
+    private createArchiveHeroStat(): HeroStat {
+        if (!this.catchupAvailable) {
+            return {
+                empty: true,
+                icon: 'history',
+                labelKey: 'CHANNELS.DETAILS_DIALOG.WINDOW',
+                valueKey: 'CHANNELS.DETAILS_DIALOG.NOT_AVAILABLE',
+            };
+        }
+
+        return {
+            icon: 'history',
+            labelKey: 'CHANNELS.DETAILS_DIALOG.WINDOW',
+            translateParams: { count: this.archiveDays },
+            valueKey:
+                this.archiveDays === 1
+                    ? 'CHANNELS.DETAILS_DIALOG.DAYS_ONE'
+                    : 'CHANNELS.DETAILS_DIALOG.DAYS_OTHER',
+        };
+    }
+
+    private field(
+        labelKey: string,
+        value: string | null | undefined,
+        monospace = false
+    ): ChannelDetailField {
+        const normalized = value?.trim() ?? '';
+
+        if (!normalized) {
+            return {
+                empty: true,
+                labelKey,
+                monospace,
+                valueKey: 'CHANNELS.DETAILS_DIALOG.EMPTY',
+            };
+        }
+
+        return { labelKey, monospace, value: normalized };
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.html b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.html
new file mode 100644
index 0000000..a034e2e
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.html
@@ -0,0 +1,98 @@
+@if (channelsLoading()) {
+    <app-channel-list-loading-state [view]="activeView()" />
+} @else if (displayedChannels().length) {
+    @if (viewTitle() && activeView() !== 'groups') {
+        <header class="context-header">
+            <div class="context-header__top">
+                <h2>{{ viewTitle() | translate }}</h2>
+                @if (
+                    activeView() === 'recent' &&
+                    recentChannelItems().length > 0
+                ) {
+                    <button mat-button (click)="clearRecentChannels()">
+                        {{ 'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_SECTION' | translate }}
+                    </button>
+                }
+            </div>
+        </header>
+        <div class="context-divider"></div>
+    }
+
+    @switch (activeView()) {
+        @case ('all') {
+            <app-all-channels-view
+                [channels]="displayedChannels()"
+                [searchTerm]="workspaceSearchTerm()"
+                [channelEpgMap]="channelEpgMap()"
+                [channelIconMap]="channelIconMap()"
+                [progressTick]="progressTick()"
+                [shouldShowEpg]="shouldShowEpg()"
+                [itemSize]="itemSize()"
+                [activeChannelUrl]="activeChannelUrl()"
+                [favoriteIds]="favoriteIds()"
+                (channelSelected)="onChannelSelected($event)"
+                (favoriteToggled)="onFavoriteToggled($event)"
+            />
+        }
+        @case ('groups') {
+            <app-groups-view
+                [groupedChannels]="groupedChannels()"
+                [searchTerm]="workspaceSearchTerm()"
+                [channelEpgMap]="channelEpgMap()"
+                [channelIconMap]="channelIconMap()"
+                [progressTick]="progressTick()"
+                [shouldShowEpg]="shouldShowEpg()"
+                [activeChannelUrl]="activeChannelUrl()"
+                [favoriteIds]="favoriteIds()"
+                [hiddenGroupTitles]="hiddenGroupTitles()"
+                [sidebarWidth]="sidebarWidth()"
+                (channelSelected)="onChannelSelected($event)"
+                (favoriteToggled)="onFavoriteToggled($event)"
+                (hiddenGroupTitlesChanged)="
+                    onHiddenGroupTitlesChanged($event)
+                "
+                (sidebarWidthRequested)="onSidebarWidthRequested($event)"
+                (sidebarWidthRequestEnded)="onSidebarWidthRequestEnded($event)"
+            />
+        }
+        @case ('favorites') {
+            @let favorites = favorites$ | async;
+            @if (favorites) {
+                <app-favorites-view
+                    [favorites]="favorites"
+                    [searchTerm]="workspaceSearchTerm()"
+                    [channelEpgMap]="channelEpgMap()"
+                    [channelIconMap]="channelIconMap()"
+                    [progressTick]="progressTick()"
+                    [shouldShowEpg]="shouldShowEpg()"
+                    [activeChannelUrl]="activeChannelUrl()"
+                    (channelSelected)="onChannelSelected($event)"
+                    (favoriteToggled)="onFavoriteToggled($event)"
+                    (favoritesReordered)="onFavoritesReordered($event)"
+                />
+            }
+        }
+        @case ('recent') {
+            <app-recent-view
+                [recentItems]="recentChannelItems()"
+                [searchTerm]="workspaceSearchTerm()"
+                [channelEpgMap]="channelEpgMap()"
+                [channelIconMap]="channelIconMap()"
+                [progressTick]="progressTick()"
+                [shouldShowEpg]="shouldShowEpg()"
+                [activeChannelUrl]="activeChannelUrl()"
+                (channelSelected)="onChannelSelected($event)"
+                (removeRecent)="removeRecentChannel($event)"
+            />
+        }
+    }
+} @else {
+    <div class="empty-source-state">
+        <div class="empty-source-state__icon-wrapper">
+            <mat-icon class="empty-source-state__icon">folder_off</mat-icon>
+        </div>
+        <h3 class="empty-source-state__title">
+            {{ 'CHANNELS.NO_CHANNELS_FOUND' | translate }}
+        </h3>
+    </div>
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
new file mode 100644
index 0000000..bf3560d
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
@@ -0,0 +1,99 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    container-type: inline-size;
+}
+
+:host > app-channel-list-loading-state {
+    flex: 1;
+    min-height: 0;
+}
+
+::ng-deep {
+    .mat-mdc-tab.mdc-tab {
+        padding: 0 5px;
+    }
+}
+
+.empty-source-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 0;
+    padding: 32px 24px;
+    text-align: center;
+}
+
+.empty-source-state__icon-wrapper {
+    width: 64px;
+    height: 64px;
+    border-radius: 20px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    box-shadow:
+        0 8px 24px -8px rgba(0, 0, 0, 0.1),
+        inset 0 1px 1px rgba(255, 255, 255, 0.05);
+}
+
+.empty-source-state__icon {
+    width: 32px;
+    height: 32px;
+    font-size: 32px;
+    opacity: 0.8;
+}
+
+.empty-source-state__title {
+    font-size: 1.05rem;
+    font-weight: 520;
+    margin: 0;
+    letter-spacing: -0.01em;
+}
+
+@media only screen and (max-width: 599px) {
+    .tab-title {
+        display: none;
+    }
+
+    .tab-icon {
+        display: block;
+    }
+}
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+.context-header {
+    padding: 12px 16px 8px;
+    flex-shrink: 0;
+}
+
+.context-header__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    h2 {
+        margin: 0;
+        font-size: 0.94rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--mat-sys-on-surface);
+    }
+}
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+.context-divider {
+    height: 1px;
+    background: var(--mat-sys-outline-variant);
+    margin: 0 0 6px;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.spec.ts
new file mode 100644
index 0000000..44e2054
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.spec.ts
@@ -0,0 +1,141 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { convertToParamMap, ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { of, Subject } from 'rxjs';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { ChannelActions, PlaylistActions } from 'm3u-state';
+import { PlaylistsService } from 'services';
+import { PlaylistMeta } from 'shared-interfaces';
+import { ChannelListContainerComponent } from './channel-list-container.component';
+
+describe('ChannelListContainerComponent', () => {
+    let fixture: ComponentFixture<ChannelListContainerComponent>;
+    let dispatch: jest.Mock;
+    let activePlaylistSignal: ReturnType<typeof signal<PlaylistMeta | null>>;
+
+    beforeEach(async () => {
+        const routerEvents$ = new Subject<NavigationEnd>();
+        dispatch = jest.fn();
+        activePlaylistSignal = signal<PlaylistMeta | null>({
+            _id: 'playlist-1',
+            title: 'Playlist One',
+            count: 0,
+            importDate: '2026-04-11T00:00:00.000Z',
+            hiddenGroupTitles: ['News'],
+        } as PlaylistMeta);
+
+        const route = {
+            snapshot: {
+                data: { layout: 'workspace' },
+                paramMap: convertToParamMap({}),
+                queryParamMap: convertToParamMap({}),
+                params: {},
+                queryParams: {},
+            },
+            pathFromRoot: [
+                {
+                    snapshot: {
+                        data: { layout: 'workspace' },
+                        paramMap: convertToParamMap({}),
+                        params: {},
+                    },
+                    paramMap: of(convertToParamMap({})),
+                },
+            ],
+            paramMap: of(convertToParamMap({})),
+            queryParamMap: of(convertToParamMap({})),
+        } as unknown as ActivatedRoute;
+
+        await TestBed.configureTestingModule({
+            imports: [ChannelListContainerComponent],
+            providers: [
+                {
+                    provide: EpgService,
+                    useValue: {
+                        getChannelMetadataForChannels: jest
+                            .fn()
+                            .mockReturnValue(of(new Map())),
+                        getCurrentProgramsForChannels: jest
+                            .fn()
+                            .mockReturnValue(of(new Map())),
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: {},
+                },
+                {
+                    provide: StorageMap,
+                    useValue: {
+                        get: jest.fn().mockReturnValue(of({})),
+                    },
+                },
+                {
+                    provide: Store,
+                    useValue: {
+                        dispatch,
+                        select: jest.fn().mockReturnValue(of([])),
+                        selectSignal: jest.fn(() => signal(undefined)),
+                    },
+                },
+                {
+                    provide: Router,
+                    useValue: {
+                        url: '/workspace/playlists/demo/all',
+                        events: routerEvents$.asObservable(),
+                    },
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: route,
+                },
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: {
+                        activePlaylist: activePlaylistSignal,
+                        resolvedPlaylistId: signal(null),
+                    },
+                },
+            ],
+        })
+            .overrideComponent(ChannelListContainerComponent, {
+                set: {
+                    template: '',
+                    imports: [],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(ChannelListContainerComponent);
+    });
+
+    it('does not clear the shared channel list on destroy', () => {
+        fixture.detectChanges();
+
+        fixture.destroy();
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith(
+            ChannelActions.resetActiveChannel()
+        );
+    });
+
+    it('dispatches playlist meta updates when hidden group titles change', () => {
+        fixture.componentInstance.onHiddenGroupTitlesChanged([
+            'Movies',
+            'Sports',
+        ]);
+
+        expect(dispatch).toHaveBeenCalledWith(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    _id: 'playlist-1',
+                    hiddenGroupTitles: ['Movies', 'Sports'],
+                } as PlaylistMeta,
+            })
+        );
+    });
+});
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.ts
new file mode 100644
index 0000000..49f1454
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.ts
@@ -0,0 +1,439 @@
+import { CommonModule } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    Input,
+    input,
+    OnDestroy,
+    OnInit,
+    output,
+    signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    isWorkspaceLayoutRoute,
+    queryParamSignal,
+} from '@iptvnator/portal/shared/util';
+import {
+    ChannelActions,
+    FavoritesActions,
+    PlaylistActions,
+    resolveChannelEpgLookupKey,
+    selectActive,
+    selectFavorites,
+} from 'm3u-state';
+import {
+    BehaviorSubject,
+    combineLatest,
+    filter,
+    forkJoin,
+    firstValueFrom,
+    map,
+} from 'rxjs';
+import { PlaylistsService } from 'services';
+import {
+    Channel,
+    EpgProgram,
+    isM3uRecentlyViewedItem,
+    normalizeStalkerDate,
+    PlaylistMeta,
+    PlaylistRecentlyViewedItem,
+    Settings,
+    STORE_KEY,
+} from 'shared-interfaces';
+import { AllChannelsViewComponent } from './all-channels-view/all-channels-view.component';
+import { FavoritesViewComponent } from './favorites-view/favorites-view.component';
+import { GroupsViewComponent } from './groups-view/groups-view.component';
+import {
+    RecentViewComponent,
+    RecentViewItem,
+} from './recent-view/recent-view.component';
+import { ChannelListLoadingStateComponent } from '../channel-list-loading-state/channel-list-loading-state.component';
+
+function groupChannelsByTitle(channels: Channel[]): Record<string, Channel[]> {
+    return channels.reduce<Record<string, Channel[]>>((groups, channel) => {
+        const key = channel.group?.title ?? '';
+        if (!groups[key]) {
+            groups[key] = [];
+        }
+        groups[key].push(channel);
+        return groups;
+    }, {});
+}
+
+@Component({
+    selector: 'app-channel-list-container',
+    templateUrl: './channel-list-container.component.html',
+    styleUrls: ['./channel-list-container.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        AllChannelsViewComponent,
+        ChannelListLoadingStateComponent,
+        CommonModule,
+        FavoritesViewComponent,
+        GroupsViewComponent,
+        MatButtonModule,
+        MatIconModule,
+        RecentViewComponent,
+        TranslatePipe,
+    ],
+})
+export class ChannelListContainerComponent implements OnInit, OnDestroy {
+    private readonly epgService = inject(EpgService);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly storage = inject(StorageMap);
+    private readonly store = inject(Store);
+    private readonly router = inject(Router);
+    private readonly route = inject(ActivatedRoute);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+
+    /** Map of channel ID to current EPG program */
+    readonly channelEpgMap = signal(new Map<string, EpgProgram | null>());
+    readonly channelIconMap = signal(new Map<string, string>());
+
+    /** Interval for refreshing EPG data */
+    private epgRefreshInterval?: number;
+
+    /** Global progress tick signal - triggers re-computation of progress percentages */
+    readonly progressTick = signal(0);
+
+    /** Interval for global progress updates */
+    private progressInterval?: number;
+
+    /** Whether to show EPG data in channel items */
+    readonly shouldShowEpg = signal(false);
+
+    /** Item size for virtual scroll - compact when no EPG */
+    readonly itemSize = computed(() => (this.shouldShowEpg() ? 68 : 48));
+
+    /** Active view (all, groups, favorites, recent) */
+    readonly activeView = input<string>('all');
+    readonly channelsLoading = input(false);
+    readonly recentItems = input<PlaylistRecentlyViewedItem[]>([]);
+    readonly sidebarWidth = input<number | null>(null);
+    readonly sidebarWidthRequested = output<number>();
+    readonly sidebarWidthRequestEnded = output<number>();
+    readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.route);
+    private readonly routeSearchTerm = queryParamSignal(
+        this.route,
+        'q',
+        (value) => (value ?? '').trim().toLowerCase()
+    );
+    readonly workspaceSearchTerm = computed(() =>
+        this.isWorkspaceLayout ? this.routeSearchTerm() : ''
+    );
+
+    readonly currentUrl = toSignal(
+        this.router.events.pipe(
+            filter((event) => event instanceof NavigationEnd),
+            map((event) => (event as NavigationEnd).urlAfterRedirects)
+        ),
+        { initialValue: this.router.url }
+    );
+
+    readonly viewTitle = computed(() => {
+        const view = this.activeView();
+        const url = this.currentUrl();
+        if (view === 'all') return 'CHANNELS.ALL_CHANNELS';
+        if (view === 'groups') return 'CHANNELS.GROUPS';
+        if (view === 'recent') return 'PORTALS.SIDEBAR.RECENT';
+        if (view === 'favorites') {
+            return url.includes('/workspace/global-favorites')
+                ? 'HOME.PLAYLISTS.GLOBAL_FAVORITES'
+                : 'CHANNELS.FAVORITES';
+        }
+        return '';
+    });
+
+    /** Channels array */
+    _channelList: Channel[] = [];
+    private readonly channelListSignal = signal<Channel[]>([]);
+    private channelList$ = new BehaviorSubject<Channel[]>([]);
+
+    get channelList(): Channel[] {
+        return this._channelList;
+    }
+
+    @Input()
+    set channelList(value: Channel[]) {
+        const safeValue = value ?? [];
+        this._channelList = safeValue;
+        this.channelListSignal.set(safeValue);
+        this.channelList$.next(safeValue);
+        this.fetchEpgForChannels(safeValue);
+    }
+
+    /** Route-aware playlist ID for recent-item mutations */
+    private readonly resolvedPlaylistId = this.playlistContext.resolvedPlaylistId;
+    private readonly activePlaylist = this.playlistContext.activePlaylist;
+
+    readonly hiddenGroupTitles = computed(() => {
+        const playlist = this.activePlaylist();
+
+        if (!playlist || playlist.serverUrl || playlist.macAddress) {
+            return [];
+        }
+
+        return playlist.hiddenGroupTitles ?? [];
+    });
+
+    /** Displayed channels - filters out unfavorited channels in global favorites view */
+    readonly displayedChannels = computed(() => {
+        return this.channelListSignal();
+    });
+
+    /** Object with channels sorted by groups */
+    readonly groupedChannels = computed(() =>
+        groupChannelsByTitle(this.displayedChannels())
+    );
+
+    readonly recentChannelItems = computed<RecentViewItem[]>(() => {
+        const channels = this.channelListSignal();
+        const recentItems = this.recentItems();
+        const channelsByUrl = new Map(
+            channels.map((channel) => [channel.url, channel] as const)
+        );
+        const channelsById = new Map(
+            channels.map((channel) => [channel.id, channel] as const)
+        );
+        const seenUrls = new Set<string>();
+
+        return [...recentItems]
+            .filter(isM3uRecentlyViewedItem)
+            .sort(
+                (a, b) =>
+                    new Date(normalizeStalkerDate(b.added_at)).getTime() -
+                    new Date(normalizeStalkerDate(a.added_at)).getTime()
+            )
+            .reduce<RecentViewItem[]>((acc, item) => {
+                const channelUrl = item.url?.trim();
+                if (!channelUrl || seenUrls.has(channelUrl)) {
+                    return acc;
+                }
+
+                const channel =
+                    channelsByUrl.get(channelUrl) ||
+                    (item.channel_id
+                        ? channelsById.get(item.channel_id)
+                        : undefined);
+
+                if (!channel) {
+                    return acc;
+                }
+
+                seenUrls.add(channel.url);
+                acc.push({
+                    channel,
+                    viewedAt: normalizeStalkerDate(item.added_at),
+                });
+                return acc;
+            }, []);
+    });
+
+    /** Selected channel */
+    readonly activeChannel = this.store.selectSignal(selectActive);
+
+    /** Active channel URL for highlighting */
+    readonly activeChannelUrl = computed(() => this.activeChannel()?.url);
+
+    /** Set of favorite channel URLs for quick lookup */
+    private readonly _favorites = this.store.selectSignal(selectFavorites);
+    readonly favoriteIds = computed(() => new Set(this._favorites()));
+
+    /** List with favorites */
+    favorites$ = combineLatest([
+        this.store.select(selectFavorites),
+        this.channelList$,
+    ]).pipe(
+        map(([favoriteChannelIds, channelList]) => {
+            return favoriteChannelIds
+                .map((favoriteChannelId) =>
+                    channelList.find(
+                        (channel) => channel.url === favoriteChannelId
+                    )
+                )
+                .filter((channel): channel is Channel => channel !== undefined);
+        })
+    );
+
+    ngOnInit(): void {
+        // Check if EPG should be shown (only in Electron with configured EPG URL)
+        const isElectron = !!window['electron'];
+        if (isElectron) {
+            this.storage
+                .get(STORE_KEY.Settings)
+                .subscribe((settings: unknown) => {
+                    if (
+                        settings &&
+                        Object.keys(settings as Settings).length > 0
+                    ) {
+                        const epgUrl = (settings as Settings).epgUrl;
+                        this.shouldShowEpg.set(!!(epgUrl && epgUrl.length > 0));
+                    }
+                });
+        } else {
+            this.shouldShowEpg.set(false);
+        }
+
+        // Set up EPG refresh interval (every 60 seconds)
+        this.epgRefreshInterval = window.setInterval(() => {
+            this.fetchEpgForChannels(this._channelList);
+        }, 60000);
+
+        // Set up global progress update interval (every 30 seconds)
+        this.progressInterval = window.setInterval(() => {
+            this.progressTick.update((v) => v + 1);
+        }, 30000);
+    }
+
+    ngOnDestroy(): void {
+        this.store.dispatch(ChannelActions.resetActiveChannel());
+
+        if (this.epgRefreshInterval) {
+            clearInterval(this.epgRefreshInterval);
+        }
+
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval);
+        }
+
+        this.channelList$.complete();
+    }
+
+    /**
+     * Fetches EPG data for all channels
+     */
+    private fetchEpgForChannels(channels: Channel[]): void {
+        if (!channels || channels.length === 0) {
+            this.channelEpgMap.set(new Map());
+            this.channelIconMap.set(new Map());
+            return;
+        }
+
+        const channelIds = Array.from(
+            new Set(
+                channels
+                    .map((channel) => resolveChannelEpgLookupKey(channel))
+                    .filter((id) => !!id)
+            )
+        );
+
+        forkJoin({
+            epgMap: this.epgService.getCurrentProgramsForChannels(channelIds),
+            metadataMap:
+                this.epgService.getChannelMetadataForChannels(channelIds),
+        }).subscribe(({ epgMap, metadataMap }) => {
+            this.channelEpgMap.set(epgMap);
+            this.channelIconMap.set(
+                new Map(
+                    Array.from(metadataMap.entries(), ([channelId, metadata]) => [
+                        channelId,
+                        metadata?.iconUrl?.trim() || '',
+                    ])
+                )
+            );
+        });
+    }
+
+    /**
+     * Handles channel selection from any tab
+     */
+    onChannelSelected(channel: Channel): void {
+        this.store.dispatch(ChannelActions.setActiveChannel({ channel }));
+    }
+
+    /**
+     * Handles favorite toggle from favorites tab
+     */
+    onFavoriteToggled(event: { channel: Channel; event: MouseEvent }): void {
+        event.event.stopPropagation();
+        this.store.dispatch(
+            FavoritesActions.updateFavorites({ channel: event.channel })
+        );
+    }
+
+    onHiddenGroupTitlesChanged(hiddenGroupTitles: string[]): void {
+        const playlist = this.activePlaylist();
+
+        if (!playlist || playlist.serverUrl || playlist.macAddress) {
+            return;
+        }
+
+        this.store.dispatch(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    _id: playlist._id,
+                    hiddenGroupTitles,
+                } as PlaylistMeta,
+            })
+        );
+    }
+
+    /**
+     * Handles favorites reorder from drag-drop
+     */
+    onFavoritesReordered(channelIds: string[]): void {
+        this.store.dispatch(FavoritesActions.setFavorites({ channelIds }));
+    }
+
+    async removeRecentChannel(channelUrl: string): Promise<void> {
+        const playlistId = this.resolvedPlaylistId();
+        if (!playlistId) {
+            return;
+        }
+
+        const updatedPlaylist = await firstValueFrom(
+            this.playlistsService.removeFromM3uRecentlyViewed(
+                playlistId,
+                channelUrl
+            )
+        );
+
+        this.store.dispatch(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    _id: playlistId,
+                    recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                } as PlaylistMeta,
+            }) as any
+        );
+    }
+
+    async clearRecentChannels(): Promise<void> {
+        const playlistId = this.resolvedPlaylistId();
+        if (!playlistId) {
+            return;
+        }
+
+        const updatedPlaylist = await firstValueFrom(
+            this.playlistsService.clearM3uRecentlyViewed(playlistId)
+        );
+
+        this.store.dispatch(
+            PlaylistActions.updatePlaylistMeta({
+                playlist: {
+                    _id: playlistId,
+                    recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                } as PlaylistMeta,
+            }) as any
+        );
+    }
+
+    onSidebarWidthRequested(width: number): void {
+        this.sidebarWidthRequested.emit(width);
+    }
+
+    onSidebarWidthRequestEnded(width: number): void {
+        this.sidebarWidthRequestEnded.emit(width);
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
new file mode 100644
index 0000000..403df1b
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
@@ -0,0 +1,113 @@
+<div
+    class="channel-list-item"
+    [class.compact]="!showEpg()"
+    cdkDrag
+    [cdkDragDisabled]="!isDraggable()"
+    cdkDragPreviewContainer="parent"
+    [class.active]="selected()"
+    (click)="clicked.emit()"
+    (contextmenu)="onContextMenu($event)"
+    data-test-id="channel-item"
+>
+    @if (isDraggable()) {
+        <mat-icon cdkDragHandle class="drag-icon">drag_indicator</mat-icon>
+    }
+    <div class="channel-content">
+        <div class="channel-logo-shell" aria-hidden="true">
+            @if (showLogoFallback()) {
+                <mat-icon class="channel-logo-fallback">live_tv</mat-icon>
+            }
+            @if (logo()) {
+                <img
+                    class="channel-logo"
+                    [src]="logo()"
+                    (error)="onLogoError($event)"
+                    alt="Channel Logo"
+                />
+            }
+        </div>
+        <div class="channel-details">
+            <div class="channel-name">{{ name() }}</div>
+            @if (showEpg()) {
+                @if (epgProgram(); as program) {
+                    <div class="epg-title">
+                        {{ program.title }}
+                    </div>
+                    <div class="epg-timeline">
+                        <span class="epg-time">{{
+                            (program.startTimestamp
+                                ? program.startTimestamp * 1000
+                                : program.start
+                            ) | date: 'HH:mm'
+                        }}</span>
+                        <div class="epg-progress-track">
+                            <div
+                                class="epg-progress-fill"
+                                [ngStyle]="{
+                                    width: progressPercentage() + '%',
+                                }"
+                            ></div>
+                        </div>
+                        <span class="epg-time">{{
+                            (program.stopTimestamp
+                                ? program.stopTimestamp * 1000
+                                : program.stop
+                            ) | date: 'HH:mm'
+                        }}</span>
+                    </div>
+                } @else if (!isRadio()) {
+                    <div class="epg-placeholder">
+                        {{ 'EPG.NO_PROGRAM_INFO' | translate }}
+                    </div>
+                }
+            }
+        </div>
+    </div>
+    @if (
+        (showProgramInfoButton() && showEpg() && epgProgram()) ||
+        showFavoriteButton() ||
+        showAuxActionButton()
+    ) {
+        <div class="action-buttons">
+            @if (showProgramInfoButton() && showEpg() && epgProgram(); as program) {
+                <button
+                    mat-icon-button
+                    class="program-info-button"
+                    [matTooltip]="
+                        'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate
+                    "
+                    (click)="showProgramDescription(program, $event)"
+                >
+                    <mat-icon>info</mat-icon>
+                </button>
+            }
+            @if (showFavoriteButton()) {
+                <button
+                    mat-icon-button
+                    class="favorite-button"
+                    [matTooltip]="
+                        (isFavorite()
+                            ? 'CHANNELS.REMOVE_FAVORITE'
+                            : 'CHANNELS.ADD_FAVORITE'
+                        ) | translate
+                    "
+                    (click)="onFavoriteClick($event)"
+                >
+                    <mat-icon>{{
+                        isFavorite() ? 'star' : 'star_outline'
+                    }}</mat-icon>
+                </button>
+            }
+            @if (showAuxActionButton()) {
+                <button
+                    mat-icon-button
+                    class="favorite-button"
+                    [matTooltip]="auxActionTooltip()"
+                    (click)="onAuxActionClick($event)"
+                >
+                    <mat-icon>{{ auxActionIcon() }}</mat-icon>
+                </button>
+            }
+        </div>
+    }
+</div>
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
new file mode 100644
index 0000000..10d7db9
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
@@ -0,0 +1,301 @@
+:host {
+    display: block;
+    width: 100%;
+    container-type: inline-size;
+}
+
+.channel-list-item {
+    width: 100%;
+    min-height: 68px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 10px 8px 12px;
+    border: 1px solid transparent;
+    border-radius: 12px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease,
+        color 0.15s ease;
+
+    &:hover {
+        background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+
+    &.active {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        border-color: var(--app-selection-border);
+        color: var(--app-selection-color);
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+    }
+
+    &.compact {
+        min-height: 52px;
+        padding-block: 7px;
+    }
+}
+
+.drag-icon {
+    flex-shrink: 0;
+    cursor: move;
+    opacity: 0.46;
+}
+
+.channel-content {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.channel-logo-shell {
+    position: relative;
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.12);
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+        inset 0 1px 1px rgba(0, 0, 0, 0.15);
+
+    .compact & {
+        width: 38px;
+        height: 38px;
+    }
+}
+
+.channel-logo-fallback {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    opacity: 0.5;
+}
+
+.channel-logo {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 6px;
+    box-sizing: border-box;
+}
+
+.channel-details {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 3px;
+}
+
+.channel-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.96rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+}
+
+.epg-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.82rem;
+    line-height: 1.2;
+    opacity: 0.84;
+}
+
+.epg-timeline {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 10px;
+}
+
+.epg-time {
+    font-size: 0.75rem;
+    line-height: 1;
+    opacity: 0.72;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.epg-progress-track {
+    position: relative;
+    width: 100%;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background-color: rgba(127, 127, 127, 0.28);
+    background-image: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.12),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+        inset 0 1px 1px rgba(0, 0, 0, 0.18);
+}
+
+.epg-progress-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-radius: inherit;
+    background-color: var(--app-selection-color);
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.18),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--app-selection-border) 82%, transparent),
+        0 0 10px -2px var(--app-selection-glow);
+    transition: width 0.35s ease;
+}
+
+.epg-placeholder {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.78rem;
+    line-height: 1.2;
+    opacity: 0.52;
+}
+
+.action-buttons {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-inline-start: auto;
+
+    button {
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        color: inherit;
+        opacity: 0.76;
+        transition:
+            opacity 0.15s ease,
+            background-color 0.15s ease,
+            transform 0.15s ease;
+
+        &:hover {
+            opacity: 1;
+            background: color-mix(in srgb, currentColor 10%, transparent);
+            transform: translateY(-1px);
+        }
+    }
+
+    mat-icon {
+        width: 20px;
+        height: 20px;
+        font-size: 20px;
+    }
+}
+
+.channel-list-item.active {
+    .epg-title,
+    .epg-time,
+    .epg-placeholder,
+    .drag-icon,
+    .action-buttons button,
+    .action-buttons mat-icon {
+        color: inherit;
+    }
+}
+
+@container (max-width: 360px) {
+    .channel-list-item {
+        gap: 10px;
+        padding-inline: 10px 8px;
+    }
+
+    .channel-logo-shell {
+        width: 40px;
+        height: 40px;
+    }
+
+    .epg-timeline {
+        gap: 8px;
+    }
+
+    .action-buttons {
+        gap: 0;
+    }
+}
+
+@container (max-width: 310px) {
+    .epg-timeline {
+        grid-template-columns: 1fr;
+        gap: 5px;
+    }
+
+    .epg-time:last-child {
+        display: none;
+    }
+}
+
+@container (max-width: 270px) {
+    .channel-list-item {
+        min-height: 52px;
+        gap: 8px;
+        padding-inline: 8px 6px;
+    }
+
+    .channel-logo-shell {
+        width: 34px;
+        height: 34px;
+    }
+
+    .epg-title,
+    .epg-timeline,
+    .epg-placeholder,
+    .program-info-button {
+        display: none;
+    }
+}
+
+@container (max-width: 220px) {
+    .channel-logo-shell,
+    .action-buttons {
+        display: none;
+    }
+
+    .channel-content {
+        gap: 0;
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
new file mode 100644
index 0000000..7d23ccc
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
@@ -0,0 +1,121 @@
+import { DatePipe } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { EpgProgram } from 'shared-interfaces';
+import { ChannelListItemComponent } from './channel-list-item.component';
+
+describe('ChannelListItemComponent', () => {
+    let fixture: ComponentFixture<ChannelListItemComponent>;
+    let dialog: { open: jest.Mock };
+
+    beforeEach(async () => {
+        dialog = {
+            open: jest.fn(),
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [
+                ChannelListItemComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ChannelListItemComponent);
+    });
+
+    it('formats preview times from timestamp fields when raw strings are offset', () => {
+        const startTimestamp = Math.floor(
+            Date.parse('2026-04-05T05:30:00.000Z') / 1000
+        );
+        const stopTimestamp = Math.floor(
+            Date.parse('2026-04-05T06:00:00.000Z') / 1000
+        );
+        const program: EpgProgram = {
+            start: '2026-04-05 03:00:00',
+            stop: '2026-04-05 03:30:00',
+            channel: 'channel-1',
+            title: 'Current Show',
+            desc: 'Current description',
+            category: null,
+            startTimestamp,
+            stopTimestamp,
+        };
+
+        fixture.componentRef.setInput('name', 'Cartoon Network');
+        fixture.componentRef.setInput('epgProgram', program);
+        fixture.componentRef.setInput('showProgramInfoButton', false);
+        fixture.detectChanges();
+
+        const times = Array.from(
+            fixture.nativeElement.querySelectorAll('.epg-time'),
+            (element: Element) => element.textContent?.trim() ?? ''
+        );
+        const datePipe = new DatePipe('en-US');
+
+        expect(times).toEqual([
+            datePipe.transform(startTimestamp * 1000, 'HH:mm') ?? '',
+            datePipe.transform(stopTimestamp * 1000, 'HH:mm') ?? '',
+        ]);
+    });
+
+    it('hides the no-program placeholder for radio items without EPG data', () => {
+        fixture.componentRef.setInput('name', 'Radio One');
+        fixture.componentRef.setInput('showEpg', true);
+        fixture.componentRef.setInput('isRadio', true);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.epg-placeholder')
+        ).toBeNull();
+    });
+
+    it('shows the generic fallback icon when no logo is available', () => {
+        fixture.componentRef.setInput('name', 'Channel Without Logo');
+        fixture.componentRef.setInput('logo', '');
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.channel-logo-fallback')
+        ).not.toBeNull();
+        expect(fixture.nativeElement.querySelector('.channel-logo')).toBeNull();
+    });
+
+    it('emits a context menu request on right click when details are enabled', () => {
+        fixture.componentRef.setInput('name', 'News One');
+        fixture.componentRef.setInput('showDetailsContextMenu', true);
+        fixture.detectChanges();
+
+        const preventDefault = jest.fn();
+        const stopPropagation = jest.fn();
+        const contextMenuRequested = jest.fn();
+
+        fixture.componentInstance.contextMenuRequested.subscribe(
+            contextMenuRequested
+        );
+
+        fixture.componentInstance.onContextMenu({
+            clientX: 120,
+            clientY: 56,
+            preventDefault,
+            stopPropagation,
+        } as unknown as MouseEvent);
+
+        expect(preventDefault).toHaveBeenCalled();
+        expect(stopPropagation).toHaveBeenCalled();
+        expect(contextMenuRequested).toHaveBeenCalledWith(
+            expect.objectContaining({
+                clientX: 120,
+                clientY: 56,
+            })
+        );
+    });
+});
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
new file mode 100644
index 0000000..1c7b65f
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
@@ -0,0 +1,111 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DatePipe, NgStyle } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EpgItemDescriptionComponent } from '@iptvnator/ui/epg';
+import { EpgProgram } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-channel-list-item',
+    styleUrls: ['./channel-list-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './channel-list-item.component.html',
+    imports: [
+        DatePipe,
+        DragDropModule,
+        MatIcon,
+        MatIconButton,
+        MatTooltip,
+        NgStyle,
+        TranslatePipe,
+    ],
+})
+export class ChannelListItemComponent {
+    private readonly dialog = inject(MatDialog);
+    private readonly logoFailed = signal(false);
+
+    readonly isDraggable = input(false);
+    readonly logo = input<string | null | undefined>('');
+    readonly name = input('');
+    readonly showFavoriteButton = input(false);
+    readonly showAuxActionButton = input(false);
+    readonly showProgramInfoButton = input(true);
+    readonly showDetailsContextMenu = input(false);
+    readonly isFavorite = input(false);
+    readonly selected = input(false);
+    readonly showEpg = input(true);
+    readonly isRadio = input(false);
+    readonly epgProgram = input<EpgProgram | null | undefined>();
+    /** Progress percentage pre-computed by parent for performance */
+    readonly progressPercentage = input(0);
+    readonly auxActionIcon = input('delete');
+    readonly auxActionTooltip = input('');
+
+    readonly clicked = output<void>();
+    readonly favoriteToggled = output<MouseEvent>();
+    readonly auxActionClicked = output<MouseEvent>();
+    readonly contextMenuRequested = output<MouseEvent>();
+
+    constructor() {
+        effect(() => {
+            this.logo();
+            this.logoFailed.set(false);
+        });
+    }
+
+    /**
+     * Opens the dialog with details about the current EPG program
+     * @param program EPG program to show details for
+     * @param event Mouse event to stop propagation
+     */
+    showProgramDescription(program: EpgProgram, event: MouseEvent): void {
+        event.stopPropagation();
+        this.dialog.open(EpgItemDescriptionComponent, {
+            data: program,
+        });
+    }
+
+    onFavoriteClick(event: MouseEvent): void {
+        event.stopPropagation();
+        this.favoriteToggled.emit(event);
+    }
+
+    onAuxActionClick(event: MouseEvent): void {
+        event.stopPropagation();
+        this.auxActionClicked.emit(event);
+    }
+
+    onContextMenu(event: MouseEvent): void {
+        if (!this.showDetailsContextMenu()) {
+            return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        this.contextMenuRequested.emit(event);
+    }
+
+    showLogoFallback(): boolean {
+        return !this.logo() || this.logoFailed();
+    }
+
+    onLogoError(event: Event): void {
+        this.logoFailed.set(true);
+        (event.target as HTMLImageElement | null)?.style.setProperty(
+            'display',
+            'none'
+        );
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-logo-fallback.util.ts b/libs/ui/components/src/lib/channel-list-container/channel-logo-fallback.util.ts
new file mode 100644
index 0000000..5b375b7
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/channel-logo-fallback.util.ts
@@ -0,0 +1,17 @@
+import { resolveChannelEpgLookupKey } from 'm3u-state';
+import { Channel } from 'shared-interfaces';
+
+export function resolveChannelLogo(
+    channel: Channel | null | undefined,
+    channelIconMap: ReadonlyMap<string, string | null | undefined>
+): string {
+    const playlistLogo = channel?.tvg?.logo?.trim();
+    if (playlistLogo) {
+        return playlistLogo;
+    }
+
+    const channelId = resolveChannelEpgLookupKey(channel);
+    const epgIcon = channelId ? channelIconMap.get(channelId)?.trim() : '';
+
+    return epgIcon || '';
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.html b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.html
new file mode 100644
index 0000000..8d8c15a
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.html
@@ -0,0 +1,52 @@
+<div
+    class="channel-list"
+    cdkDropList
+    [cdkDropListDisabled]="hasSearchTerm()"
+    (cdkDropListDropped)="onDrop($event)"
+    id="favorites-list"
+>
+    @if (enrichedFavorites().length > 0) {
+        @for (
+            channel of enrichedFavorites();
+            track trackByFn($index, channel);
+            let i = $index
+        ) {
+            <app-channel-list-item
+                [name]="
+                    i +
+                    1 +
+                    '. ' +
+                    (channel?.name || 'CHANNELS.UNNAMED_CHANNEL' | translate)
+                "
+                [isDraggable]="!hasSearchTerm()"
+                [logo]="channel.logo"
+                [showEpg]="shouldShowEpg()"
+                [isRadio]="channel?.radio === 'true'"
+                [epgProgram]="channel.epgProgram"
+                [progressPercentage]="channel.progressPercentage"
+                (clicked)="onChannelClick(channel)"
+                [selected]="activeChannelUrl() === channel?.url"
+                [showFavoriteButton]="true"
+                [isFavorite]="true"
+                (favoriteToggled)="onFavoriteToggle(channel, $event)"
+            />
+        }
+    } @else {
+        <div class="empty-favorites">
+            <strong>
+                @if (hasSearchTerm()) {
+                    {{ 'CHANNELS.NO_SEARCH_RESULTS' | translate }}
+                } @else {
+                    {{ 'CHANNELS.NO_FAVORITES' | translate }}
+                }
+            </strong>
+        </div>
+        <div class="empty-favorites-hint">
+            @if (hasSearchTerm()) {
+                {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
+            } @else {
+                {{ 'CHANNELS.USE_STAR_TO_FAVORITE' | translate }}
+            }
+        </div>
+    }
+</div>
diff --git a/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss
new file mode 100644
index 0000000..70364be
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.scss
@@ -0,0 +1,35 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+#favorites-list {
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.channel-list {
+    overflow-x: hidden;
+}
+
+.empty-favorites,
+.empty-favorites-hint {
+    padding: 16px 24px;
+    text-align: center;
+}
+
+.empty-favorites {
+    margin-top: 40px;
+    font-size: 1.05rem;
+    font-weight: 520;
+    letter-spacing: -0.01em;
+}
+
+.empty-favorites-hint {
+    opacity: 0.65;
+    font-size: 0.85rem;
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.ts b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.ts
new file mode 100644
index 0000000..fe4b8c1
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/favorites-view/favorites-view.component.ts
@@ -0,0 +1,136 @@
+import {
+    CdkDragDrop,
+    DragDropModule,
+    moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    output,
+} from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { resolveChannelEpgLookupKey } from 'm3u-state';
+import { Channel, EpgProgram } from 'shared-interfaces';
+import { EnrichedChannel } from '../all-channels-view/all-channels-view.component';
+import { resolveChannelLogo } from '../channel-logo-fallback.util';
+import { ChannelListItemComponent } from '../channel-list-item/channel-list-item.component';
+
+@Component({
+    selector: 'app-favorites-view',
+    templateUrl: './favorites-view.component.html',
+    styleUrls: ['./favorites-view.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ChannelListItemComponent, DragDropModule, TranslatePipe],
+})
+export class FavoritesViewComponent {
+    /** Favorite channels */
+    readonly favorites = input.required<Channel[]>();
+    readonly searchTerm = input('');
+
+    /** EPG map for channel enrichment */
+    readonly channelEpgMap = input.required<Map<string, EpgProgram | null>>();
+    readonly channelIconMap = input.required<Map<string, string>>();
+
+    /** Progress tick to trigger progress recalculation */
+    readonly progressTick = input.required<number>();
+
+    /** Whether to show EPG data */
+    readonly shouldShowEpg = input.required<boolean>();
+
+    /** Currently active channel URL */
+    readonly activeChannelUrl = input<string | undefined>();
+
+    /** Emits when a channel is selected */
+    readonly channelSelected = output<Channel>();
+
+    /** Emits when favorite is toggled (removed) */
+    readonly favoriteToggled = output<{
+        channel: Channel;
+        event: MouseEvent;
+    }>();
+
+    /** Emits when favorites order changes via drag-drop */
+    readonly favoritesReordered = output<string[]>();
+
+    readonly hasSearchTerm = computed(() => this.searchTerm().trim().length > 0);
+    readonly filteredFavorites = computed(() => {
+        const favorites = this.favorites();
+        const term = this.searchTerm().trim().toLowerCase();
+
+        if (!term) {
+            return favorites;
+        }
+
+        return favorites.filter((channel) =>
+            `${channel.name ?? ''} ${channel.group?.title ?? ''}`
+                .toLowerCase()
+                .includes(term)
+        );
+    });
+
+    /**
+     * Computed signal for enriched favorites with EPG data
+     */
+    readonly enrichedFavorites = computed(() => {
+        const favorites = this.filteredFavorites();
+        const epgMap = this.channelEpgMap();
+        const iconMap = this.channelIconMap();
+        // Read progressTick to trigger recalculation
+        this.progressTick();
+
+        return favorites.map((channel) => {
+            const channelId = resolveChannelEpgLookupKey(channel);
+            const epgProgram = channelId ? epgMap.get(channelId) : null;
+            return {
+                ...channel,
+                epgProgram,
+                logo: resolveChannelLogo(channel, iconMap),
+                progressPercentage: this.calculateProgress(epgProgram),
+            } as EnrichedChannel;
+        });
+    });
+
+    /**
+     * Calculates progress percentage for an EPG program
+     */
+    private calculateProgress(
+        epgProgram: EpgProgram | null | undefined
+    ): number {
+        if (!epgProgram) {
+            return 0;
+        }
+
+        const now = new Date().getTime();
+        const start = new Date(epgProgram.start).getTime();
+        const stop = new Date(epgProgram.stop).getTime();
+
+        const total = stop - start;
+        const elapsed = now - start;
+
+        return Math.min(100, Math.max(0, (elapsed / total) * 100));
+    }
+
+    trackByFn(_: number, channel: Channel): string {
+        return channel?.id;
+    }
+
+    onChannelClick(channel: Channel): void {
+        this.channelSelected.emit(channel);
+    }
+
+    onFavoriteToggle(channel: Channel, event: MouseEvent): void {
+        this.favoriteToggled.emit({ channel, event });
+    }
+
+    onDrop(event: CdkDragDrop<Channel[]>): void {
+        if (this.hasSearchTerm()) {
+            return;
+        }
+
+        const favorites = [...this.favorites()];
+        moveItemInArray(favorites, event.previousIndex, event.currentIndex);
+        this.favoritesReordered.emit(favorites.map((item) => item.url));
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.html b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.html
new file mode 100644
index 0000000..3222ddd
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.html
@@ -0,0 +1,85 @@
+<h2 mat-dialog-title>{{ 'CHANNELS.GROUP_MANAGEMENT.TITLE' | translate }}</h2>
+
+<mat-dialog-content>
+    <div class="header-actions">
+        <div class="selection-info">
+            {{ 'CHANNELS.GROUP_MANAGEMENT.SELECTED' | translate }}:
+            <strong>{{ selectedCount() }}</strong> / {{ totalCount() }}
+        </div>
+        <div class="bulk-actions">
+            <button
+                mat-stroked-button
+                (click)="selectAll()"
+                [disabled]="allSelected()"
+            >
+                <mat-icon>check_box</mat-icon>
+                {{ 'CHANNELS.GROUP_MANAGEMENT.SELECT_ALL' | translate }}
+            </button>
+            <button
+                mat-stroked-button
+                (click)="deselectAll()"
+                [disabled]="selectedCount() === 0"
+            >
+                <mat-icon>check_box_outline_blank</mat-icon>
+                {{ 'CHANNELS.GROUP_MANAGEMENT.DESELECT_ALL' | translate }}
+            </button>
+        </div>
+    </div>
+
+    <label class="search-inline">
+        <mat-icon class="search-inline__icon">search</mat-icon>
+        <input
+            type="search"
+            spellcheck="false"
+            [value]="searchTerm()"
+            (input)="searchTerm.set($any($event.target).value)"
+            [placeholder]="
+                'CHANNELS.GROUP_MANAGEMENT.SEARCH_PLACEHOLDER' | translate
+            "
+        />
+        @if (searchTerm()) {
+            <button
+                type="button"
+                mat-icon-button
+                class="search-inline__clear"
+                (click)="clearSearch()"
+            >
+                <mat-icon>close</mat-icon>
+            </button>
+        }
+    </label>
+
+    <div class="groups-list">
+        @for (group of filteredGroups(); track group.key) {
+            <div class="group-item" (click)="toggleGroup(group)">
+                <mat-checkbox
+                    [checked]="group.selected"
+                    (click)="$event.stopPropagation()"
+                    (change)="toggleGroup(group)"
+                >
+                </mat-checkbox>
+                <span class="group-name">
+                    @if (group.key) {
+                        {{ group.key | titlecase }}
+                    } @else {
+                        {{ 'CHANNELS.UNGROUPED' | translate }}
+                    }
+                </span>
+                <span class="item-count">({{ group.count }})</span>
+            </div>
+        } @empty {
+            <div class="empty-message">
+                {{ 'CHANNELS.GROUP_MANAGEMENT.NO_RESULTS' | translate }}
+            </div>
+        }
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="cancel()">
+        {{ 'CLOSE' | translate }}
+    </button>
+    <button mat-flat-button color="primary" (click)="save()">
+        {{ 'CHANNELS.GROUP_MANAGEMENT.SAVE' | translate }}
+    </button>
+</mat-dialog-actions>
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
new file mode 100644
index 0000000..e4bfd5b
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
@@ -0,0 +1,150 @@
+.mat-mdc-dialog-content {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+    overflow: hidden !important;
+    min-width: 480px;
+    max-width: 600px;
+    max-height: 85vh !important;
+}
+
+.header-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.selection-info {
+    font-size: 0.8125rem;
+    color: var(--mat-sys-on-surface-variant);
+
+    strong {
+        color: var(--mat-sys-primary);
+    }
+}
+
+.bulk-actions {
+    display: flex;
+    gap: 8px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.search-inline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    min-height: 36px;
+    border-radius: 10px;
+    border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+    background: var(--app-search-bg, var(--mat-sys-surface-container));
+    cursor: text;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--mat-sys-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    }
+}
+
+.search-inline__icon {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    color: var(--mat-sys-on-surface-variant);
+    flex-shrink: 0;
+}
+
+.search-inline input {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--mat-sys-on-surface);
+    font: inherit;
+    font-size: 0.84rem;
+
+    &::placeholder {
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.6;
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}
+
+.search-inline__clear {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    padding: 0;
+    line-height: 24px;
+    flex-shrink: 0;
+
+    mat-icon {
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+    }
+}
+
+.groups-list {
+    flex: 1;
+    min-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--mat-sys-outline-variant);
+    border-radius: 8px;
+}
+
+.group-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    padding: 0 10px;
+    cursor: pointer;
+    transition: background-color 0.12s ease;
+
+    &:hover {
+        background-color: var(--mat-sys-surface-container);
+    }
+
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--mat-sys-surface-container);
+    }
+
+    mat-checkbox {
+        --mdc-checkbox-state-layer-size: 28px;
+    }
+}
+
+.group-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.8125rem;
+}
+
+.item-count {
+    font-size: 0.8rem;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.empty-message {
+    padding: 24px;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.8125rem;
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.ts b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.ts
new file mode 100644
index 0000000..65d577f
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.ts
@@ -0,0 +1,120 @@
+import { TitleCasePipe } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogModule,
+    MatDialogRef,
+} from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+
+export interface GroupManagementDialogGroup {
+    readonly count: number;
+    readonly key: string;
+}
+
+export interface GroupManagementDialogData {
+    readonly groups: GroupManagementDialogGroup[];
+    readonly hiddenGroupTitles: string[];
+}
+
+interface GroupWithSelection extends GroupManagementDialogGroup {
+    readonly selected: boolean;
+}
+
+@Component({
+    selector: 'app-group-management-dialog',
+    imports: [
+        MatDialogModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        TitleCasePipe,
+        TranslatePipe,
+    ],
+    templateUrl: './group-management-dialog.component.html',
+    styleUrl: './group-management-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GroupManagementDialogComponent {
+    private readonly dialogRef = inject(
+        MatDialogRef<GroupManagementDialogComponent, string[] | undefined>
+    );
+    readonly data = inject<GroupManagementDialogData>(MAT_DIALOG_DATA);
+
+    readonly searchTerm = signal('');
+    readonly groups = signal<GroupWithSelection[]>(
+        this.data.groups.map((group) => ({
+            ...group,
+            selected: !this.data.hiddenGroupTitles.includes(group.key),
+        }))
+    );
+
+    readonly filteredGroups = computed(() => {
+        const term = this.searchTerm().trim().toLowerCase();
+
+        if (!term) {
+            return this.groups();
+        }
+
+        return this.groups().filter((group) =>
+            group.key.toLowerCase().includes(term)
+        );
+    });
+
+    readonly selectedCount = computed(
+        () => this.groups().filter((group) => group.selected).length
+    );
+    readonly totalCount = computed(() => this.groups().length);
+    readonly allSelected = computed(
+        () =>
+            this.groups().length > 0 &&
+            this.groups().every((group) => group.selected)
+    );
+
+    clearSearch(): void {
+        this.searchTerm.set('');
+    }
+
+    toggleGroup(group: GroupWithSelection): void {
+        this.groups.update((groups) =>
+            groups.map((current) =>
+                current.key === group.key
+                    ? { ...current, selected: !current.selected }
+                    : current
+            )
+        );
+    }
+
+    selectAll(): void {
+        this.groups.update((groups) =>
+            groups.map((group) => ({ ...group, selected: true }))
+        );
+    }
+
+    deselectAll(): void {
+        this.groups.update((groups) =>
+            groups.map((group) => ({ ...group, selected: false }))
+        );
+    }
+
+    save(): void {
+        const hiddenGroupTitles = this.groups()
+            .filter((group) => !group.selected)
+            .map((group) => group.key);
+
+        this.dialogRef.close(hiddenGroupTitles);
+    }
+
+    cancel(): void {
+        this.dialogRef.close(undefined);
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
new file mode 100644
index 0000000..ea0971f
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
@@ -0,0 +1,295 @@
+@if (!hasAnyGroups()) {
+    <div class="groups-view-empty-state">
+        <mat-icon class="empty-state-icon">{{
+            searchTerm() ? 'search_off' : 'folder_off'
+        }}</mat-icon>
+        <div class="empty-state-title">
+            {{
+                (searchTerm()
+                    ? 'CHANNELS.NO_SEARCH_RESULTS'
+                    : 'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE'
+                ) | translate
+            }}
+        </div>
+        <div class="empty-state-hint">
+            {{
+                (searchTerm()
+                    ? 'CHANNELS.TRY_DIFFERENT_SEARCH'
+                    : 'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION'
+                ) | translate
+            }}
+        </div>
+    </div>
+} @else {
+    <div class="groups-view-layout">
+        <aside
+            class="groups-nav-panel"
+            appResizable
+            [minWidth]="164"
+            [maxWidth]="320"
+            [defaultWidth]="208"
+            storageKey="m3u-groups-nav-width"
+            (resizeStart)="onGroupsNavResizeStart()"
+            (widthChange)="onGroupsNavWidthChange($event)"
+            (resizeEnd)="onGroupsNavResizeEnd($event)"
+        >
+            <div class="groups-nav-shell">
+                <header class="groups-nav-header">
+                    <div class="groups-nav-header__content">
+                        <h2 class="groups-nav-title">
+                            {{ 'CHANNELS.GROUPS' | translate }}
+                        </h2>
+                        <div class="groups-nav-actions">
+                            <button
+                                type="button"
+                                mat-icon-button
+                                class="groups-nav-action groups-nav-action--search"
+                                [matTooltip]="'CHANNELS.SEARCH_GROUPS' | translate"
+                                [attr.aria-pressed]="
+                                    isGroupSearchOpen() ? 'true' : 'false'
+                                "
+                                [attr.aria-label]="
+                                    'CHANNELS.SEARCH_GROUPS' | translate
+                                "
+                                (click)="toggleGroupSearch()"
+                            >
+                                <mat-icon>search</mat-icon>
+                            </button>
+                            <button
+                                type="button"
+                                mat-icon-button
+                                class="groups-nav-action groups-nav-action--manage"
+                                [matTooltip]="'CHANNELS.MANAGE_GROUPS' | translate"
+                                [attr.aria-label]="
+                                    'CHANNELS.MANAGE_GROUPS' | translate
+                                "
+                                (click)="openGroupManagement()"
+                            >
+                                <mat-icon>tune</mat-icon>
+                            </button>
+                        </div>
+                    </div>
+
+                    @if (isGroupSearchOpen()) {
+                        <label class="groups-nav-search">
+                            <mat-icon class="groups-nav-search__icon">
+                                search
+                            </mat-icon>
+                            <input
+                                #groupSearchInput
+                                type="search"
+                                spellcheck="false"
+                                [value]="localGroupSearchTerm()"
+                                [placeholder]="
+                                    'CHANNELS.SEARCH_GROUPS' | translate
+                                "
+                                (input)="
+                                    updateGroupSearchTerm(
+                                        $any($event.target).value
+                                    )
+                                "
+                                (keydown.escape)="closeGroupSearch()"
+                            />
+                            <button
+                                type="button"
+                                mat-icon-button
+                                class="groups-nav-search__close"
+                                [attr.aria-label]="'CLOSE' | translate"
+                                (click)="closeGroupSearch()"
+                            >
+                                <mat-icon>close</mat-icon>
+                            </button>
+                        </label>
+                    }
+                </header>
+
+                <div class="groups-nav-list nav-list">
+                    @if (filteredGroups().length > 0) {
+                        @for (
+                            group of filteredGroups();
+                            track trackByGroupKey($index, group)
+                        ) {
+                            <button
+                                type="button"
+                                class="nav-item group-nav-item"
+                                [attr.data-group-key]="group.key"
+                                [class.selected]="
+                                    selectedGroupKey() === group.key
+                                "
+                                [attr.aria-current]="
+                                    selectedGroupKey() === group.key
+                                        ? 'true'
+                                        : null
+                                "
+                                (click)="selectGroup(group.key)"
+                            >
+                                <span class="nav-item-label">
+                                    @if (group.key) {
+                                        {{ group.key | titlecase }}
+                                    } @else {
+                                        {{ 'CHANNELS.UNGROUPED' | translate }}
+                                    }
+                                </span>
+                                <span class="nav-item-meta">
+                                    {{ group.count }}
+                                </span>
+                            </button>
+                        }
+                    } @else {
+                        <div class="groups-nav-empty">
+                            {{
+                                (hasSearchQuery()
+                                    ? 'CHANNELS.NO_SEARCH_RESULTS'
+                                    : 'CHANNELS.NO_VISIBLE_GROUPS'
+                                ) | translate
+                            }}
+                        </div>
+                    }
+                </div>
+            </div>
+        </aside>
+
+        <section class="sidebar groups-content-panel">
+            @if (selectedGroup(); as group) {
+                <header class="sidebar-header groups-content-header">
+                    <div class="category-meta">
+                        <h2 class="category-title">
+                            @if (group.key) {
+                                {{ group.key | titlecase }}
+                            } @else {
+                                {{ 'CHANNELS.UNGROUPED' | translate }}
+                            }
+                        </h2>
+                        <span class="category-subtitle">
+                            {{ group.count }}
+                            {{ group.count === 1 ? 'item' : 'items' }}
+                        </span>
+                    </div>
+                    <button
+                        mat-icon-button
+                        [matMenuTriggerFor]="channelSortMenu"
+                        [matTooltip]="'Sort: ' + groupChannelSortLabel()"
+                        aria-label="Sort channels"
+                    >
+                        <mat-icon>sort_by_alpha</mat-icon>
+                    </button>
+                    <mat-menu #channelSortMenu="matMenu">
+                        <button
+                            mat-menu-item
+                            (click)="setGroupChannelSortMode('server')"
+                        >
+                            <span>Server Order</span>
+                            @if (groupChannelSortMode() === 'server') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                        <button
+                            mat-menu-item
+                            (click)="setGroupChannelSortMode('name-asc')"
+                        >
+                            <span>Name A-Z</span>
+                            @if (groupChannelSortMode() === 'name-asc') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                        <button
+                            mat-menu-item
+                            (click)="setGroupChannelSortMode('name-desc')"
+                        >
+                            <span>Name Z-A</span>
+                            @if (groupChannelSortMode() === 'name-desc') {
+                                <mat-icon>check</mat-icon>
+                            }
+                        </button>
+                    </mat-menu>
+                </header>
+
+                <cdk-virtual-scroll-viewport
+                    [itemSize]="itemSize()"
+                    class="groups-channels-viewport"
+                >
+                    <app-channel-list-item
+                        *cdkVirtualFor="
+                            let channel of selectedGroupChannels();
+                            index as i;
+                            trackBy: trackByChannel
+                        "
+                        [name]="
+                            i +
+                            1 +
+                            '. ' +
+                            (channel?.name ||
+                                ('CHANNELS.UNNAMED_CHANNEL' | translate))
+                        "
+                        [logo]="channel.logo"
+                        [showEpg]="shouldShowEpg()"
+                        [showDetailsContextMenu]="true"
+                        [isRadio]="channel?.radio === 'true'"
+                        [epgProgram]="channel.epgProgram"
+                        [progressPercentage]="channel.progressPercentage"
+                        [selected]="activeChannelUrl() === channel?.url"
+                        [showFavoriteButton]="true"
+                        [isFavorite]="
+                            channel?.url
+                                ? favoriteIds().has(channel.url)
+                                : false
+                        "
+                        (clicked)="onChannelClick(channel)"
+                        (contextMenuRequested)="
+                            onChannelContextMenu(channel, $event)
+                        "
+                        (favoriteToggled)="onFavoriteToggle(channel, $event)"
+                    />
+                </cdk-virtual-scroll-viewport>
+            } @else {
+                <header class="sidebar-header groups-content-header">
+                    <div class="category-meta">
+                        <h2 class="category-title">
+                            {{ 'CHANNELS.GROUPS' | translate }}
+                        </h2>
+                    </div>
+                </header>
+
+                <div class="groups-content-empty-state">
+                    <mat-icon class="empty-state-icon">
+                        {{
+                            hasSearchQuery() ? 'search_off' : 'visibility_off'
+                        }}
+                    </mat-icon>
+                    <div class="empty-state-title">
+                        {{
+                            (hasSearchQuery()
+                                ? 'CHANNELS.NO_SEARCH_RESULTS'
+                                : 'CHANNELS.NO_VISIBLE_GROUPS'
+                            ) | translate
+                        }}
+                    </div>
+                    <div class="empty-state-hint">
+                        {{
+                            (hasSearchQuery()
+                                ? 'CHANNELS.TRY_DIFFERENT_SEARCH'
+                                : 'CHANNELS.MANAGE_GROUPS_HINT'
+                            ) | translate
+                        }}
+                    </div>
+                </div>
+            }
+        </section>
+    </div>
+}
+
+<div
+    aria-hidden="true"
+    class="channel-context-menu-anchor"
+    [style.left]="contextMenuPosition().x"
+    [style.top]="contextMenuPosition().y"
+    [matMenuTriggerFor]="channelContextMenu"
+    #contextMenuTrigger="matMenuTrigger"
+></div>
+
+<mat-menu #channelContextMenu="matMenu">
+    <button mat-menu-item (click)="openChannelDetails()">
+        <mat-icon>info</mat-icon>
+        <span>{{ 'CHANNELS.SHOW_DETAILS' | translate }}</span>
+    </button>
+</mat-menu>
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
new file mode 100644
index 0000000..4c4623c
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
@@ -0,0 +1,284 @@
+@use '@angular/material' as mat;
+@use '../../../../../styles/portal-sidebar';
+@use '../../../../../styles/panel-header' as panel;
+@use '../../../../../../../apps/web/src/nav-list.scss';
+
+:host {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.groups-view-layout {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--app-content-bg, var(--mat-sys-surface));
+}
+
+.groups-nav-panel {
+    width: 208px;
+    min-width: 164px;
+    max-width: 320px;
+    flex-shrink: 0;
+    min-height: 0;
+    display: flex;
+    overflow: hidden;
+    background: var(--app-rail-bg, var(--mat-sys-surface-container-low));
+    padding: 12px 10px 10px 12px;
+    box-sizing: border-box;
+    container-type: inline-size;
+}
+
+.groups-nav-shell {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.groups-nav-header {
+    padding: 4px 6px 12px;
+    flex-shrink: 0;
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
+.groups-nav-header__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.groups-nav-title {
+    margin: 0;
+    font-size: 0.94rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--mat-sys-on-surface);
+}
+
+.groups-nav-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.groups-nav-action,
+.groups-nav-search {
+    @include mat.form-field-density(-5);
+}
+
+.groups-nav-action {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    padding: 0;
+    line-height: 28px;
+
+    mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+    }
+}
+
+.groups-nav-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    min-height: 36px;
+    border-radius: 10px;
+    border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+    background: var(--app-search-bg, var(--mat-sys-surface-container));
+    cursor: text;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--mat-sys-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    }
+}
+
+.groups-nav-search__icon {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+    color: var(--mat-sys-on-surface-variant);
+    flex-shrink: 0;
+}
+
+.groups-nav-search input {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--mat-sys-on-surface);
+    font: inherit;
+    font-size: 0.84rem;
+
+    &::placeholder {
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.6;
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}
+
+.groups-nav-search__close {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    line-height: 24px;
+    flex-shrink: 0;
+    padding: 0;
+
+    mat-icon {
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+    }
+}
+
+.groups-content-header {
+    @include panel.standard-panel-header();
+    border-top-left-radius: inherit;
+}
+
+.groups-content-header button {
+    @include mat.form-field-density(-5);
+}
+
+.category-meta {
+    @include panel.standard-panel-meta();
+}
+
+.category-title {
+    @include panel.standard-panel-title(0.94rem);
+}
+
+.category-subtitle {
+    @include panel.standard-panel-subtitle();
+}
+
+.groups-nav-list {
+    height: 100%;
+    min-height: 0;
+    padding-top: 0;
+    padding-inline: 0 2px;
+}
+
+.groups-nav-empty {
+    padding: 16px 12px;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    font-size: 0.82rem;
+    line-height: 1.4;
+}
+
+.group-nav-item {
+    background: transparent;
+}
+
+.channel-context-menu-anchor {
+    position: fixed;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.groups-content-panel {
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-right: none;
+    background: var(--app-content-bg, var(--mat-sys-surface));
+    border-top-left-radius: 16px;
+}
+
+.groups-content-panel > .groups-content-header {
+    border-top-left-radius: inherit;
+}
+
+.groups-channels-viewport {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    padding: 4px 8px 12px;
+    box-sizing: border-box;
+
+    ::ng-deep .cdk-virtual-scroll-content-wrapper {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+}
+
+.groups-content-empty-state {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 24px;
+    text-align: center;
+}
+
+.groups-view-empty-state {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 24px;
+    text-align: center;
+}
+
+.empty-state-icon {
+    width: 48px;
+    height: 48px;
+    font-size: 48px;
+    opacity: 0.5;
+    margin-bottom: 16px;
+}
+
+.empty-state-title {
+    font-size: 1.05rem;
+    font-weight: 520;
+    letter-spacing: -0.01em;
+    margin-bottom: 8px;
+}
+
+.empty-state-hint {
+    opacity: 0.65;
+    font-size: 0.85rem;
+    max-width: 240px;
+    line-height: 1.4;
+}
+
+@container (max-width: 220px) {
+    .groups-nav-list {
+        padding-inline-end: 0;
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts
new file mode 100644
index 0000000..78a3cf7
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts
@@ -0,0 +1,609 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { Channel } from 'shared-interfaces';
+import { ChannelDetailsDialogComponent } from '../channel-details-dialog/channel-details-dialog.component';
+import { GroupManagementDialogComponent } from './group-management-dialog/group-management-dialog.component';
+import { GroupsViewComponent } from './groups-view.component';
+
+const GROUP_CHANNEL_SORT_STORAGE_KEY = 'm3u-groups-channel-sort-mode';
+
+function createChannel(
+    id: string,
+    name: string,
+    url: string,
+    groupTitle: string
+): Channel {
+    return {
+        epgParams: '',
+        group: {
+            title: groupTitle,
+        },
+        http: {
+            origin: '',
+            referrer: '',
+            'user-agent': '',
+        },
+        id,
+        name,
+        radio: 'false',
+        tvg: {
+            id: `${id}-tvg`,
+            logo: '',
+            name,
+            rec: '',
+            url: '',
+        },
+        url,
+    } as Channel;
+}
+
+describe('GroupsViewComponent', () => {
+    let fixture: ComponentFixture<GroupsViewComponent>;
+    let component: GroupsViewComponent;
+    let dialog: { open: jest.Mock };
+
+    const sportsCenter = createChannel(
+        'sports-1',
+        'Sports Center',
+        'http://example.com/sports-center.m3u8',
+        'Sports'
+    );
+    const matchNight = createChannel(
+        'sports-2',
+        'Match Night',
+        'http://example.com/match-night.m3u8',
+        'Sports'
+    );
+    const worldUpdate = createChannel(
+        'news-1',
+        'World Update',
+        'http://example.com/world-update.m3u8',
+        'News'
+    );
+    const dailyBulletin = createChannel(
+        'news-2',
+        'Daily Bulletin',
+        'http://example.com/daily-bulletin.m3u8',
+        'News'
+    );
+    const movieClassic = createChannel(
+        'movies-1',
+        'Movie Classic',
+        'http://example.com/movie-classic.m3u8',
+        'Movies'
+    );
+    const scienceNow = createChannel(
+        'science-1',
+        'Science Now',
+        'http://example.com/science-now.m3u8',
+        'Series'
+    );
+
+    const groupedChannels: Record<string, Channel[]> = {
+        Movies: [movieClassic],
+        News: [worldUpdate, dailyBulletin],
+        Series: [scienceNow],
+        Sports: [sportsCenter, matchNight],
+    };
+
+    beforeAll(() => {
+        Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+            configurable: true,
+            value: jest.fn(),
+            writable: true,
+        });
+    });
+
+    beforeEach(async () => {
+        localStorage.removeItem(GROUP_CHANNEL_SORT_STORAGE_KEY);
+
+        dialog = {
+            open: jest.fn(),
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [
+                GroupsViewComponent,
+                NoopAnimationsModule,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+            ],
+        }).compileComponents();
+
+        createComponent();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        localStorage.removeItem(GROUP_CHANNEL_SORT_STORAGE_KEY);
+    });
+
+    function createComponent(
+        overrides: Partial<{
+            activeChannelUrl: string | undefined;
+            favoriteIds: Set<string>;
+            groupedChannels: Record<string, Channel[]>;
+            hiddenGroupTitles: string[];
+            progressTick: number;
+            searchTerm: string;
+            sidebarWidth: number | null;
+            shouldShowEpg: boolean;
+        }> = {}
+    ): void {
+        fixture = TestBed.createComponent(GroupsViewComponent);
+        component = fixture.componentInstance;
+        setInputs(overrides);
+    }
+
+    function setInputs(
+        overrides: Partial<{
+            activeChannelUrl: string | undefined;
+            favoriteIds: Set<string>;
+            groupedChannels: Record<string, Channel[]>;
+            hiddenGroupTitles: string[];
+            progressTick: number;
+            searchTerm: string;
+            sidebarWidth: number | null;
+            shouldShowEpg: boolean;
+        }> = {}
+    ): void {
+        fixture.componentRef.setInput(
+            'groupedChannels',
+            overrides.groupedChannels ?? groupedChannels
+        );
+        fixture.componentRef.setInput('searchTerm', overrides.searchTerm ?? '');
+        fixture.componentRef.setInput('channelEpgMap', new Map<string, null>());
+        fixture.componentRef.setInput(
+            'channelIconMap',
+            new Map<string, string>()
+        );
+        fixture.componentRef.setInput(
+            'progressTick',
+            overrides.progressTick ?? 0
+        );
+        fixture.componentRef.setInput(
+            'shouldShowEpg',
+            overrides.shouldShowEpg ?? true
+        );
+        fixture.componentRef.setInput(
+            'activeChannelUrl',
+            overrides.activeChannelUrl
+        );
+        fixture.componentRef.setInput(
+            'favoriteIds',
+            overrides.favoriteIds ?? new Set<string>()
+        );
+        fixture.componentRef.setInput(
+            'hiddenGroupTitles',
+            overrides.hiddenGroupTitles ?? []
+        );
+        fixture.componentRef.setInput(
+            'sidebarWidth',
+            overrides.sidebarWidth ?? 460
+        );
+        fixture.detectChanges();
+    }
+
+    it('sorts groups with numeric buckets before alphabetic buckets', () => {
+        setInputs({
+            groupedChannels: {
+                'Group 10': [sportsCenter],
+                'Group 2': [movieClassic],
+                Alpha: [scienceNow],
+            },
+        });
+
+        expect(component.filteredGroups().map((group) => group.key)).toEqual([
+            'Group 2',
+            'Group 10',
+            'Alpha',
+        ]);
+    });
+
+    it('defaults to server order when no saved sort mode exists', () => {
+        expect(component.groupChannelSortMode()).toBe('server');
+        expect(component.groupChannelSortLabel()).toBe('Server Order');
+    });
+
+    it('restores a saved valid sort mode and ignores invalid stored values', () => {
+        fixture.destroy();
+        localStorage.setItem(GROUP_CHANNEL_SORT_STORAGE_KEY, 'name-asc');
+        createComponent();
+
+        expect(component.groupChannelSortMode()).toBe('name-asc');
+        expect(component.groupChannelSortLabel()).toBe('Name A-Z');
+
+        fixture.destroy();
+        localStorage.setItem(GROUP_CHANNEL_SORT_STORAGE_KEY, 'invalid');
+        createComponent();
+
+        expect(component.groupChannelSortMode()).toBe('server');
+    });
+
+    it('falls back to an EPG icon for grouped channels without a playlist logo', () => {
+        const channelWithoutLogo = {
+            ...sportsCenter,
+            tvg: {
+                ...sportsCenter.tvg,
+                logo: '',
+            },
+        };
+
+        setInputs({
+            groupedChannels: {
+                Sports: [channelWithoutLogo],
+            },
+        });
+        fixture.componentRef.setInput(
+            'channelIconMap',
+            new Map([
+                [channelWithoutLogo.tvg.id, 'https://example.com/sports.png'],
+            ])
+        );
+        fixture.detectChanges();
+
+        expect(component.selectedGroupChannels()[0].logo).toBe(
+            'https://example.com/sports.png'
+        );
+    });
+
+    it('persists sort mode changes', () => {
+        component.setGroupChannelSortMode('name-desc');
+
+        expect(component.groupChannelSortMode()).toBe('name-desc');
+        expect(localStorage.getItem(GROUP_CHANNEL_SORT_STORAGE_KEY)).toBe(
+            'name-desc'
+        );
+    });
+
+    it('sorts selected group channels by server order, name ascending, and name descending', () => {
+        const alphaSignal = createChannel(
+            'sort-1',
+            'Alpha Signal',
+            'http://example.com/alpha-signal.m3u8',
+            'Sorted'
+        );
+        const zuluVision = createChannel(
+            'sort-2',
+            'Zulu Vision',
+            'http://example.com/zulu-vision.m3u8',
+            'Sorted'
+        );
+        const middleNews = createChannel(
+            'sort-3',
+            'Middle News',
+            'http://example.com/middle-news.m3u8',
+            'Sorted'
+        );
+
+        setInputs({
+            groupedChannels: {
+                Sorted: [zuluVision, alphaSignal, middleNews],
+            },
+        });
+
+        expect(
+            component.selectedGroupChannels().map((channel) => channel.name)
+        ).toEqual(['Zulu Vision', 'Alpha Signal', 'Middle News']);
+
+        component.setGroupChannelSortMode('name-asc');
+        fixture.detectChanges();
+        expect(
+            component.selectedGroupChannels().map((channel) => channel.name)
+        ).toEqual(['Alpha Signal', 'Middle News', 'Zulu Vision']);
+
+        component.setGroupChannelSortMode('name-desc');
+        fixture.detectChanges();
+        expect(
+            component.selectedGroupChannels().map((channel) => channel.name)
+        ).toEqual(['Zulu Vision', 'Middle News', 'Alpha Signal']);
+    });
+
+    it('prefers the active channel group for initial selection', () => {
+        setInputs({ activeChannelUrl: worldUpdate.url });
+
+        expect(component.selectedGroupKey()).toBe('News');
+        expect(component.selectedGroup()?.key).toBe('News');
+    });
+
+    it('retains a visible manual selection and falls back to the first visible group', () => {
+        component.selectGroup('Movies');
+        fixture.detectChanges();
+
+        setInputs({
+            activeChannelUrl: sportsCenter.url,
+            searchTerm: 'movie',
+        });
+        expect(component.selectedGroupKey()).toBe('Movies');
+
+        setInputs({
+            activeChannelUrl: sportsCenter.url,
+            searchTerm: 'science',
+        });
+        expect(component.selectedGroupKey()).toBe('Series');
+    });
+
+    it('switches selection to the active channel group when playback changes', () => {
+        component.selectGroup('Movies');
+        fixture.detectChanges();
+
+        setInputs({ activeChannelUrl: sportsCenter.url });
+        expect(component.selectedGroupKey()).toBe('Sports');
+
+        setInputs({ activeChannelUrl: scienceNow.url });
+        expect(component.selectedGroupKey()).toBe('Series');
+    });
+
+    it('keeps group selection behavior unchanged when channel sort mode changes', () => {
+        component.setGroupChannelSortMode('name-asc');
+        component.selectGroup('Movies');
+        fixture.detectChanges();
+
+        setInputs({ activeChannelUrl: sportsCenter.url });
+
+        expect(component.selectedGroupKey()).toBe('Sports');
+        expect(component.filteredGroups().map((group) => group.key)).toEqual([
+            'Movies',
+            'News',
+            'Series',
+            'Sports',
+        ]);
+    });
+
+    it('matches group titles as full-group results and channel names as filtered results', () => {
+        setInputs({ searchTerm: 'news' });
+
+        expect(component.filteredGroups()).toEqual([
+            expect.objectContaining({
+                count: 2,
+                key: 'News',
+                titleMatches: true,
+            }),
+        ]);
+        expect(
+            component.selectedGroupChannels().map((channel) => channel.name)
+        ).toEqual(['World Update', 'Daily Bulletin']);
+
+        setInputs({ searchTerm: 'update' });
+
+        expect(component.filteredGroups()).toEqual([
+            expect.objectContaining({
+                count: 1,
+                key: 'News',
+                titleMatches: false,
+            }),
+        ]);
+        expect(
+            component.selectedGroupChannels().map((channel) => channel.name)
+        ).toEqual(['World Update']);
+    });
+
+    it('filters hidden groups from the rail and selected pane', () => {
+        setInputs({
+            activeChannelUrl: worldUpdate.url,
+            hiddenGroupTitles: ['News', 'Sports'],
+        });
+
+        expect(component.filteredGroups().map((group) => group.key)).toEqual([
+            'Movies',
+            'Series',
+        ]);
+        expect(component.selectedGroupKey()).toBe('Movies');
+        expect(
+            component.selectedGroupChannels().map((channel) => channel.name)
+        ).toEqual(['Movie Classic']);
+    });
+
+    it('opens the manage-groups dialog with all groups and emits updated hidden titles on save', () => {
+        const hiddenGroupTitlesChanged = jest.fn();
+        component.hiddenGroupTitlesChanged.subscribe(hiddenGroupTitlesChanged);
+        dialog.open.mockReturnValue({
+            afterClosed: () => of(['News', 'Sports']),
+        });
+
+        component.openGroupManagement();
+
+        expect(dialog.open).toHaveBeenCalledWith(
+            GroupManagementDialogComponent,
+            expect.objectContaining({
+                data: expect.objectContaining({
+                    hiddenGroupTitles: [],
+                    groups: expect.arrayContaining([
+                        { key: 'Movies', count: 1 },
+                        { key: 'News', count: 2 },
+                        { key: 'Series', count: 1 },
+                        { key: 'Sports', count: 2 },
+                    ]),
+                }),
+                maxHeight: '90vh',
+                width: '500px',
+            })
+        );
+        expect(hiddenGroupTitlesChanged).toHaveBeenCalledWith([
+            'News',
+            'Sports',
+        ]);
+    });
+
+    it('toggles the inline group search from the header action and filters the visible groups', () => {
+        const searchButton = fixture.nativeElement.querySelector(
+            '.groups-nav-action--search'
+        ) as HTMLButtonElement;
+
+        searchButton.click();
+        fixture.detectChanges();
+
+        const searchInput = fixture.nativeElement.querySelector(
+            '.groups-nav-search input'
+        ) as HTMLInputElement | null;
+
+        expect(searchInput).not.toBeNull();
+
+        searchInput!.value = 'spo';
+        searchInput!.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+
+        expect(component.filteredGroups().map((group) => group.key)).toEqual([
+            'Sports',
+        ]);
+        expect(component.selectedGroupKey()).toBe('Sports');
+
+        searchButton.click();
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.groups-nav-search input')
+        ).toBeNull();
+        expect(component.filteredGroups().map((group) => group.key)).toEqual([
+            'Movies',
+            'News',
+            'Series',
+            'Sports',
+        ]);
+    });
+
+    it('emits channel and favorite events from the selected group pane', () => {
+        const channelSelected = jest.fn();
+        const favoriteToggled = jest.fn();
+        const clickEvent = new MouseEvent('click');
+
+        component.channelSelected.subscribe(channelSelected);
+        component.favoriteToggled.subscribe(favoriteToggled);
+
+        component.onChannelClick(movieClassic);
+        component.onFavoriteToggle(movieClassic, clickEvent);
+
+        expect(channelSelected).toHaveBeenCalledWith(movieClassic);
+        expect(favoriteToggled).toHaveBeenCalledWith({
+            channel: movieClassic,
+            event: clickEvent,
+        });
+    });
+
+    it('positions the context menu at the viewport click and opens channel details from the selected group pane', async () => {
+        const openMenuSpy = jest
+            .spyOn(component.contextMenuTrigger(), 'openMenu')
+            .mockImplementation();
+
+        component.onChannelContextMenu(movieClassic, {
+            clientX: 212,
+            clientY: 264,
+        } as MouseEvent);
+        await Promise.resolve();
+
+        expect(component.contextMenuChannel()).toBe(movieClassic);
+        expect(component.contextMenuPosition()).toEqual({
+            x: '212px',
+            y: '264px',
+        });
+        expect(openMenuSpy).toHaveBeenCalled();
+
+        component.openChannelDetails();
+
+        expect(dialog.open).toHaveBeenCalledWith(
+            ChannelDetailsDialogComponent,
+            expect.objectContaining({
+                data: movieClassic,
+                maxWidth: '720px',
+                width: 'calc(100vw - 32px)',
+            })
+        );
+    });
+
+    it('emits total sidebar width requests while resizing the groups rail', () => {
+        const requested = jest.fn();
+        const committed = jest.fn();
+        let contentWidth = 252;
+
+        component.sidebarWidthRequested.subscribe(requested);
+        component.sidebarWidthRequestEnded.subscribe(committed);
+
+        const contentPanel = fixture.nativeElement.querySelector(
+            '.groups-content-panel'
+        ) as HTMLElement;
+
+        jest.spyOn(contentPanel, 'getBoundingClientRect').mockImplementation(
+            () =>
+                ({
+                    bottom: 0,
+                    height: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    width: contentWidth,
+                    x: 0,
+                    y: 0,
+                    toJSON: () => ({}),
+                }) as DOMRect
+        );
+
+        component.onGroupsNavResizeStart();
+        contentWidth = 120;
+
+        component.onGroupsNavWidthChange(260);
+        component.onGroupsNavResizeEnd(260);
+
+        expect(requested).toHaveBeenCalledWith(512);
+        expect(committed).toHaveBeenCalledWith(512);
+    });
+
+    it('keeps the layout visible for searches without matches', () => {
+        setInputs({ searchTerm: 'zzz' });
+
+        const layout = fixture.nativeElement.querySelector(
+            '.groups-view-layout'
+        ) as HTMLElement | null;
+        const emptyState = fixture.nativeElement.querySelector(
+            '.groups-content-empty-state'
+        ) as HTMLElement | null;
+        const manageButton = fixture.nativeElement.querySelector(
+            '.groups-nav-action--manage'
+        ) as HTMLButtonElement | null;
+
+        expect(layout).not.toBeNull();
+        expect(emptyState).not.toBeNull();
+        expect(emptyState?.textContent).toContain('CHANNELS.NO_SEARCH_RESULTS');
+        expect(manageButton).not.toBeNull();
+    });
+
+    it('renders the empty-category state when no grouped channels exist', () => {
+        setInputs({ groupedChannels: {} });
+
+        const emptyState = fixture.nativeElement.querySelector(
+            '.groups-view-empty-state'
+        ) as HTMLElement | null;
+
+        expect(emptyState).not.toBeNull();
+        expect(emptyState?.textContent).toContain(
+            'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE'
+        );
+    });
+
+    it('keeps the manage action visible when all groups are hidden', () => {
+        setInputs({
+            hiddenGroupTitles: ['Movies', 'News', 'Series', 'Sports'],
+        });
+
+        const layout = fixture.nativeElement.querySelector(
+            '.groups-view-layout'
+        ) as HTMLElement | null;
+        const emptyState = fixture.nativeElement.querySelector(
+            '.groups-content-empty-state'
+        ) as HTMLElement | null;
+        const manageButton = fixture.nativeElement.querySelector(
+            '.groups-nav-action--manage'
+        ) as HTMLButtonElement | null;
+
+        expect(layout).not.toBeNull();
+        expect(emptyState?.textContent).toContain('CHANNELS.NO_VISIBLE_GROUPS');
+        expect(manageButton).not.toBeNull();
+    });
+});
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts
new file mode 100644
index 0000000..5b58203
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts
@@ -0,0 +1,590 @@
+import { KeyValue, TitleCasePipe } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    OutputEmitterRef,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import { resolveChannelEpgLookupKey } from 'm3u-state';
+import { Channel, EpgProgram } from 'shared-interfaces';
+import {
+    PortalChannelSortMode,
+    getPortalChannelSortModeLabel,
+    persistPortalChannelSortMode,
+    restorePortalChannelSortMode,
+    sortPortalChannelItems,
+} from '@iptvnator/portal/shared/util';
+import { EnrichedChannel } from '../all-channels-view/all-channels-view.component';
+import { resolveChannelLogo } from '../channel-logo-fallback.util';
+import { ChannelDetailsDialogComponent } from '../channel-details-dialog/channel-details-dialog.component';
+import { ChannelListItemComponent } from '../channel-list-item/channel-list-item.component';
+import { ResizableDirective } from '../../resizable/resizable.directive';
+import {
+    GroupManagementDialogComponent,
+    GroupManagementDialogGroup,
+} from './group-management-dialog/group-management-dialog.component';
+
+const GROUP_CHANNEL_SORT_STORAGE_KEY = 'm3u-groups-channel-sort-mode';
+
+interface GroupView {
+    readonly channels: Channel[];
+    readonly count: number;
+    readonly key: string;
+}
+
+interface FilteredGroupView {
+    readonly channels: Channel[];
+    readonly count: number;
+    readonly key: string;
+    readonly titleMatches: boolean;
+}
+
+@Component({
+    selector: 'app-groups-view',
+    templateUrl: './groups-view.component.html',
+    styleUrls: ['./groups-view.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        ChannelListItemComponent,
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatTooltipModule,
+        ResizableDirective,
+        ScrollingModule,
+        TitleCasePipe,
+        TranslatePipe,
+    ],
+})
+export class GroupsViewComponent {
+    private readonly dialog = inject(MatDialog);
+    private readonly hostEl = inject(ElementRef<HTMLElement>);
+
+    readonly contextMenuTrigger =
+        viewChild.required<MatMenuTrigger>('contextMenuTrigger');
+    readonly groupSearchInput =
+        viewChild<ElementRef<HTMLInputElement>>('groupSearchInput');
+
+    /** Grouped channels object */
+    readonly groupedChannels = input.required<{ [key: string]: Channel[] }>();
+    readonly searchTerm = input('');
+
+    /** EPG map for channel enrichment */
+    readonly channelEpgMap = input.required<Map<string, EpgProgram | null>>();
+    readonly channelIconMap = input.required<Map<string, string>>();
+
+    /** Progress tick to trigger progress recalculation */
+    readonly progressTick = input.required<number>();
+
+    /** Whether to show EPG data */
+    readonly shouldShowEpg = input.required<boolean>();
+
+    /** Currently active channel URL */
+    readonly activeChannelUrl = input<string | undefined>();
+
+    /** Set of favorite channel URLs */
+    readonly favoriteIds = input<Set<string>>(new Set());
+    readonly hiddenGroupTitles = input<string[]>([]);
+
+    /** Current outer sidebar width */
+    readonly sidebarWidth = input<number | null>(null);
+
+    /** Emits when a channel is selected */
+    readonly channelSelected = output<Channel>();
+
+    /** Emits when favorite is toggled */
+    readonly favoriteToggled = output<{
+        channel: Channel;
+        event: MouseEvent;
+    }>();
+
+    /** Emits while the groups rail requests a larger total sidebar width */
+    readonly sidebarWidthRequested = output<number>();
+
+    /** Emits when the groups rail resize ends */
+    readonly sidebarWidthRequestEnded = output<number>();
+    readonly hiddenGroupTitlesChanged = output<string[]>();
+
+    readonly isGroupSearchOpen = signal(false);
+    readonly localGroupSearchTerm = signal('');
+    readonly selectedGroupKey = signal<string | null>(null);
+    readonly groupChannelSortMode = signal<PortalChannelSortMode>(
+        restorePortalChannelSortMode(GROUP_CHANNEL_SORT_STORAGE_KEY)
+    );
+    readonly groupChannelSortLabel = computed(() =>
+        getPortalChannelSortModeLabel(this.groupChannelSortMode())
+    );
+    readonly hasSearchQuery = computed(
+        () =>
+            this.searchTerm().trim().length > 0 ||
+            this.localGroupSearchTerm().trim().length > 0
+    );
+    readonly itemSize = computed(() => (this.shouldShowEpg() ? 68 : 48));
+    readonly contextMenuChannel = signal<Channel | null>(null);
+    readonly contextMenuPosition = signal({
+        x: '0px',
+        y: '0px',
+    });
+
+    private previousActiveChannelUrl: string | undefined;
+    private preservedContentWidth = 0;
+
+    constructor() {
+        effect(() => {
+            const filteredGroups = this.filteredGroups();
+            const visibleGroupKeys = new Set(
+                filteredGroups.map((group) => group.key)
+            );
+            const currentSelection = this.selectedGroupKey();
+            const activeGroupKey = this.activeChannelGroupKey();
+            const activeChannelUrl = this.activeChannelUrl();
+            const activeChannelChanged =
+                activeChannelUrl !== this.previousActiveChannelUrl;
+
+            this.previousActiveChannelUrl = activeChannelUrl;
+
+            let nextSelection: string | null = null;
+
+            if (
+                activeChannelChanged &&
+                activeGroupKey &&
+                visibleGroupKeys.has(activeGroupKey)
+            ) {
+                nextSelection = activeGroupKey;
+            } else if (
+                currentSelection &&
+                visibleGroupKeys.has(currentSelection)
+            ) {
+                nextSelection = currentSelection;
+            } else if (activeGroupKey && visibleGroupKeys.has(activeGroupKey)) {
+                nextSelection = activeGroupKey;
+            } else {
+                nextSelection = filteredGroups[0]?.key ?? null;
+            }
+
+            if (nextSelection !== currentSelection) {
+                this.selectedGroupKey.set(nextSelection);
+            }
+        });
+
+        effect(() => {
+            const selectedGroupKey = this.selectedGroupKey();
+            if (selectedGroupKey == null) {
+                return;
+            }
+
+            queueMicrotask(() => {
+                const container = this.hostEl.nativeElement.querySelector(
+                    '.groups-nav-list'
+                ) as HTMLElement | null;
+                const candidates = Array.from(
+                    this.hostEl.nativeElement.querySelectorAll(
+                        '[data-group-key]'
+                    )
+                ) as HTMLElement[];
+                const selected =
+                    candidates.find(
+                        (candidate) =>
+                            candidate.dataset['groupKey'] === selectedGroupKey
+                    ) ?? null;
+
+                if (!container || !selected) {
+                    return;
+                }
+
+                const containerRect = container.getBoundingClientRect();
+                const selectedRect = selected.getBoundingClientRect();
+                const targetTop =
+                    container.scrollTop +
+                    (selectedRect.top - containerRect.top) -
+                    container.clientHeight / 2 +
+                    selectedRect.height / 2;
+                const maxScrollTop = Math.max(
+                    0,
+                    container.scrollHeight - container.clientHeight
+                );
+
+                container.scrollTo({
+                    behavior: 'smooth',
+                    top: Math.min(maxScrollTop, Math.max(0, targetTop)),
+                });
+            });
+        });
+
+        effect(() => {
+            if (!this.isGroupSearchOpen()) {
+                return;
+            }
+
+            queueMicrotask(() => {
+                this.groupSearchInput()?.nativeElement.focus();
+            });
+        });
+    }
+
+    readonly allGroups = computed<GroupView[]>(() => {
+        const grouped = this.groupedChannels();
+        const groups = Object.entries(grouped).map(([key, channels]) => ({
+            channels,
+            count: channels.length,
+            key,
+        }));
+
+        return groups.sort(this.groupsComparator);
+    });
+
+    readonly visibleGroups = computed(() => {
+        const hiddenGroupTitles = new Set(this.hiddenGroupTitles());
+
+        return this.allGroups().filter(
+            (group) =>
+                !hiddenGroupTitles.has(group.key) && group.channels.length > 0
+        );
+    });
+
+    readonly workspaceFilteredGroups = computed<FilteredGroupView[]>(() => {
+        const term = this.searchTerm().trim().toLowerCase();
+        const groups = this.visibleGroups();
+
+        if (!term) {
+            return groups
+                .map((group) => ({
+                    channels: group.channels,
+                    count: group.count,
+                    key: group.key,
+                    titleMatches: false,
+                }));
+        }
+
+        return groups.reduce<FilteredGroupView[]>((acc, group) => {
+            const titleMatches = group.key.toLowerCase().includes(term);
+            const channels = titleMatches
+                ? group.channels
+                : group.channels.filter((channel) =>
+                      `${channel.name ?? ''}`.toLowerCase().includes(term)
+                  );
+
+            if (channels.length === 0) {
+                return acc;
+            }
+
+            acc.push({
+                channels,
+                count: channels.length,
+                key: group.key,
+                titleMatches,
+            });
+            return acc;
+        }, []);
+    });
+
+    readonly filteredGroups = computed<FilteredGroupView[]>(() => {
+        const term = this.localGroupSearchTerm().trim().toLowerCase();
+        const groups = this.workspaceFilteredGroups();
+
+        if (!term) {
+            return groups;
+        }
+
+        return groups.filter((group) => group.key.toLowerCase().includes(term));
+    });
+
+    readonly hasAnyGroups = computed(() => this.allGroups().length > 0);
+
+    readonly selectedGroup = computed(() => {
+        const selectedGroupKey = this.selectedGroupKey();
+        return (
+            this.filteredGroups().find(
+                (group) => group.key === selectedGroupKey
+            ) ?? null
+        );
+    });
+
+    readonly selectedGroupChannels = computed<EnrichedChannel[]>(() => {
+        const group = this.selectedGroup();
+        const sortMode = this.groupChannelSortMode();
+        const epgMap = this.channelEpgMap();
+        const iconMap = this.channelIconMap();
+        this.progressTick();
+
+        if (!group) {
+            return [];
+        }
+
+        return sortPortalChannelItems(
+            group.channels,
+            sortMode,
+            (channel) => channel?.name
+        ).map((channel) => {
+            const channelId = resolveChannelEpgLookupKey(channel);
+            const epgProgram = channelId ? epgMap.get(channelId) : null;
+            return {
+                ...channel,
+                epgProgram,
+                logo: resolveChannelLogo(channel, iconMap),
+                progressPercentage: this.calculateProgress(epgProgram),
+            } as EnrichedChannel;
+        });
+    });
+
+    readonly activeChannelGroupKey = computed(() => {
+        const activeChannelUrl = this.activeChannelUrl();
+        if (!activeChannelUrl) {
+            return null;
+        }
+
+        const grouped = this.groupedChannels();
+        for (const [groupKey, channels] of Object.entries(grouped)) {
+            if (channels.some((channel) => channel.url === activeChannelUrl)) {
+                return groupKey;
+            }
+        }
+
+        return null;
+    });
+
+    selectGroup(groupKey: string): void {
+        this.selectedGroupKey.set(groupKey);
+    }
+
+    closeGroupSearch(): void {
+        this.localGroupSearchTerm.set('');
+        this.isGroupSearchOpen.set(false);
+    }
+
+    toggleGroupSearch(): void {
+        if (this.isGroupSearchOpen()) {
+            this.closeGroupSearch();
+            return;
+        }
+
+        this.isGroupSearchOpen.set(true);
+    }
+
+    updateGroupSearchTerm(value: string): void {
+        this.localGroupSearchTerm.set(value);
+    }
+
+    openGroupManagement(): void {
+        const groups = this.allGroups().map<GroupManagementDialogGroup>(
+            ({ key, count }) => ({
+                key,
+                count,
+            })
+        );
+        const dialogRef = this.dialog.open(GroupManagementDialogComponent, {
+            data: {
+                groups,
+                hiddenGroupTitles: this.hiddenGroupTitles(),
+            },
+            width: '500px',
+            maxHeight: '90vh',
+        });
+
+        dialogRef.afterClosed().subscribe((hiddenGroupTitles) => {
+            if (hiddenGroupTitles === undefined) {
+                return;
+            }
+
+            this.hiddenGroupTitlesChanged.emit(hiddenGroupTitles);
+        });
+    }
+
+    setGroupChannelSortMode(mode: PortalChannelSortMode): void {
+        this.groupChannelSortMode.set(mode);
+        persistPortalChannelSortMode(GROUP_CHANNEL_SORT_STORAGE_KEY, mode);
+    }
+
+    onGroupsNavResizeStart(): void {
+        this.preservedContentWidth = this.measureContentPanelWidth();
+    }
+
+    onGroupsNavWidthChange(width: number): void {
+        this.emitSidebarWidthRequest(width, this.sidebarWidthRequested);
+    }
+
+    onGroupsNavResizeEnd(width: number): void {
+        this.emitSidebarWidthRequest(width, this.sidebarWidthRequestEnded);
+        this.preservedContentWidth = 0;
+    }
+
+    trackByChannel(_: number, channel: Channel): string {
+        return channel?.id;
+    }
+
+    trackByGroupKey(_: number, group: FilteredGroupView): string {
+        return group.key;
+    }
+
+    onChannelClick(channel: Channel): void {
+        this.channelSelected.emit(channel);
+    }
+
+    onFavoriteToggle(channel: Channel, event: MouseEvent): void {
+        this.favoriteToggled.emit({ channel, event });
+    }
+
+    onChannelContextMenu(channel: Channel, event: MouseEvent): void {
+        this.contextMenuChannel.set(channel);
+        this.contextMenuPosition.set({
+            x: `${event.clientX}px`,
+            y: `${event.clientY}px`,
+        });
+
+        const trigger = this.contextMenuTrigger();
+        if (trigger.menuOpen) {
+            trigger.closeMenu();
+        }
+
+        queueMicrotask(() => {
+            this.contextMenuTrigger().openMenu();
+        });
+    }
+
+    openChannelDetails(): void {
+        const channel = this.contextMenuChannel();
+        if (!channel) {
+            return;
+        }
+
+        this.contextMenuTrigger().closeMenu();
+        this.dialog.open(ChannelDetailsDialogComponent, {
+            data: channel,
+            maxWidth: '720px',
+            width: 'calc(100vw - 32px)',
+        });
+    }
+
+    /**
+     * Comparator for sorting groups - numeric groups first, then alphabetical
+     */
+    readonly groupsComparator = (
+        a: KeyValue<string, Channel[]> | { key: string },
+        b: KeyValue<string, Channel[]> | { key: string }
+    ): number => {
+        const numA = parseInt(a.key.replace(/\D/g, ''), 10);
+        const numB = parseInt(b.key.replace(/\D/g, ''), 10);
+
+        if (!Number.isNaN(numA) && !Number.isNaN(numB) && numA !== numB) {
+            return numA - numB;
+        }
+
+        if (!Number.isNaN(numA) && Number.isNaN(numB)) {
+            return -1;
+        }
+
+        if (Number.isNaN(numA) && !Number.isNaN(numB)) {
+            return 1;
+        }
+
+        return a.key.localeCompare(b.key);
+    };
+
+    private calculateProgress(
+        epgProgram: EpgProgram | null | undefined
+    ): number {
+        if (!epgProgram) {
+            return 0;
+        }
+
+        const now = Date.now();
+        const start = new Date(epgProgram.start).getTime();
+        const stop = new Date(epgProgram.stop).getTime();
+
+        if (!Number.isFinite(start) || !Number.isFinite(stop)) {
+            return 0;
+        }
+
+        const total = stop - start;
+        if (total <= 0) {
+            return 0;
+        }
+
+        const elapsed = Math.min(total, Math.max(0, now - start));
+        return Math.round((elapsed / total) * 100);
+    }
+
+    private emitSidebarWidthRequest(
+        navWidth: number,
+        emitter: OutputEmitterRef<number>
+    ): void {
+        const preservedContentWidth =
+            this.preservedContentWidth ||
+            this.measureContentPanelWidth(navWidth);
+        const requestedWidth = Math.round(navWidth + preservedContentWidth);
+
+        if (requestedWidth > 0) {
+            emitter.emit(requestedWidth);
+        }
+    }
+
+    private measureContentPanelWidth(currentNavWidth?: number): number {
+        const contentPanel = this.hostEl.nativeElement.querySelector(
+            '.groups-content-panel'
+        );
+        const measuredContentWidth = this.readWidth(contentPanel);
+        if (measuredContentWidth > 0) {
+            return measuredContentWidth;
+        }
+
+        const hostWidth = this.readWidth(this.hostEl.nativeElement);
+        const totalWidth =
+            hostWidth > 0 ? hostWidth : Math.max(0, this.sidebarWidth() ?? 0);
+        const navPanel =
+            this.hostEl.nativeElement.querySelector('.groups-nav-panel');
+        const navWidth = currentNavWidth ?? this.readWidth(navPanel);
+
+        if (totalWidth > 0 && navWidth > 0) {
+            return Math.max(0, totalWidth - navWidth);
+        }
+
+        return 0;
+    }
+
+    private readWidth(element: Element | null): number {
+        if (!element) {
+            return 0;
+        }
+
+        const rectWidth = element.getBoundingClientRect().width;
+        if (rectWidth > 0) {
+            return rectWidth;
+        }
+
+        if (!(element instanceof HTMLElement)) {
+            return 0;
+        }
+
+        if (element.offsetWidth > 0) {
+            return element.offsetWidth;
+        }
+
+        const inlineWidth = Number.parseFloat(element.style.width);
+        if (Number.isFinite(inlineWidth) && inlineWidth > 0) {
+            return inlineWidth;
+        }
+
+        const computedWidth = Number.parseFloat(
+            window.getComputedStyle(element).width
+        );
+        if (Number.isFinite(computedWidth) && computedWidth > 0) {
+            return computedWidth;
+        }
+
+        return 0;
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.html b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.html
new file mode 100644
index 0000000..80ca6ce
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.html
@@ -0,0 +1,48 @@
+<div class="channel-list" id="recent-list">
+    @if (enrichedRecentItems().length > 0) {
+        @for (
+            item of enrichedRecentItems();
+            track item.channel.url;
+            let i = $index
+        ) {
+            <app-channel-list-item
+                [name]="
+                    i +
+                    1 +
+                    '. ' +
+                    (item.channel?.name || 'CHANNELS.UNNAMED_CHANNEL' | translate)
+                "
+                [logo]="item.logo"
+                [showEpg]="shouldShowEpg()"
+                [isRadio]="item.channel?.radio === 'true'"
+                [epgProgram]="item.epgProgram"
+                [progressPercentage]="item.progressPercentage"
+                [selected]="activeChannelUrl() === item.channel?.url"
+                [showAuxActionButton]="true"
+                [auxActionIcon]="'delete'"
+                [auxActionTooltip]="
+                    'WORKSPACE.DASHBOARD.REMOVE_FROM_HISTORY' | translate
+                "
+                (clicked)="onChannelClick(item.channel)"
+                (auxActionClicked)="onRemoveRecent(item.channel, $event)"
+            />
+        }
+    } @else {
+        <div class="empty-recent">
+            <strong>
+                @if (searchTerm()) {
+                    {{ 'CHANNELS.NO_SEARCH_RESULTS' | translate }}
+                } @else {
+                    {{ 'WORKSPACE.DASHBOARD.NO_HISTORY' | translate }}
+                }
+            </strong>
+        </div>
+        <div class="empty-recent-hint">
+            @if (searchTerm()) {
+                {{ 'CHANNELS.TRY_DIFFERENT_SEARCH' | translate }}
+            } @else {
+                {{ 'WORKSPACE.DASHBOARD.NO_HISTORY_HINT' | translate }}
+            }
+        </div>
+    }
+</div>
diff --git a/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss
new file mode 100644
index 0000000..a0fe319
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.scss
@@ -0,0 +1,35 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+#recent-list {
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.channel-list {
+    overflow-x: hidden;
+}
+
+.empty-recent,
+.empty-recent-hint {
+    padding: 16px 24px;
+    text-align: center;
+}
+
+.empty-recent {
+    margin-top: 40px;
+    font-size: 1.05rem;
+    font-weight: 520;
+    letter-spacing: -0.01em;
+}
+
+.empty-recent-hint {
+    opacity: 0.65;
+    font-size: 0.85rem;
+}
diff --git a/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.ts b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.ts
new file mode 100644
index 0000000..09182a1
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-container/recent-view/recent-view.component.ts
@@ -0,0 +1,101 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    output,
+} from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { resolveChannelEpgLookupKey } from 'm3u-state';
+import { Channel, EpgProgram } from 'shared-interfaces';
+import { resolveChannelLogo } from '../channel-logo-fallback.util';
+import { ChannelListItemComponent } from '../channel-list-item/channel-list-item.component';
+
+export interface RecentViewItem {
+    channel: Channel;
+    viewedAt: string;
+}
+
+@Component({
+    selector: 'app-recent-view',
+    templateUrl: './recent-view.component.html',
+    styleUrls: ['./recent-view.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ChannelListItemComponent, TranslatePipe],
+})
+export class RecentViewComponent {
+    readonly recentItems = input.required<RecentViewItem[]>();
+    readonly searchTerm = input('');
+    readonly channelEpgMap = input.required<Map<string, EpgProgram | null>>();
+    readonly channelIconMap = input.required<Map<string, string>>();
+    readonly progressTick = input.required<number>();
+    readonly shouldShowEpg = input.required<boolean>();
+    readonly activeChannelUrl = input<string | undefined>();
+
+    readonly channelSelected = output<Channel>();
+    readonly removeRecent = output<string>();
+
+    readonly filteredRecentItems = computed(() => {
+        const recentItems = this.recentItems();
+        const term = this.searchTerm().trim().toLowerCase();
+
+        if (!term) {
+            return recentItems;
+        }
+
+        return recentItems.filter(({ channel }) =>
+            `${channel.name ?? ''} ${channel.group?.title ?? ''}`
+                .toLowerCase()
+                .includes(term)
+        );
+    });
+
+    readonly enrichedRecentItems = computed(() => {
+        const recentItems = this.filteredRecentItems();
+        const epgMap = this.channelEpgMap();
+        const iconMap = this.channelIconMap();
+        this.progressTick();
+
+        return recentItems.map(({ channel, viewedAt }) => {
+            const channelId = resolveChannelEpgLookupKey(channel);
+            const epgProgram = channelId ? epgMap.get(channelId) : null;
+
+            return {
+                channel,
+                viewedAt,
+                epgProgram,
+                logo: resolveChannelLogo(channel, iconMap),
+                progressPercentage: this.calculateProgress(epgProgram),
+            };
+        });
+    });
+
+    private calculateProgress(
+        epgProgram: EpgProgram | null | undefined
+    ): number {
+        if (!epgProgram) {
+            return 0;
+        }
+
+        const now = new Date().getTime();
+        const start = new Date(epgProgram.start).getTime();
+        const stop = new Date(epgProgram.stop).getTime();
+        const total = stop - start;
+        const elapsed = now - start;
+
+        return Math.min(100, Math.max(0, (elapsed / total) * 100));
+    }
+
+    trackByFn(_: number, item: RecentViewItem): string {
+        return item.channel?.url;
+    }
+
+    onChannelClick(channel: Channel): void {
+        this.channelSelected.emit(channel);
+    }
+
+    onRemoveRecent(channel: Channel, event: MouseEvent): void {
+        event.stopPropagation();
+        this.removeRecent.emit(channel.url);
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.html b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.html
new file mode 100644
index 0000000..54defc1
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.html
@@ -0,0 +1,98 @@
+<div class="channel-list-loading-state" aria-live="polite" role="status">
+    <span class="visually-hidden">
+        {{ 'CHANNELS.LOADING' | translate }}
+    </span>
+
+    @if (isGroupsView()) {
+        <div class="groups-loading-layout" aria-hidden="true">
+            <aside class="groups-loading-nav">
+                <header class="groups-loading-nav__header">
+                    <h2 class="groups-loading-nav__title">
+                        {{ 'CHANNELS.GROUPS' | translate }}
+                    </h2>
+                </header>
+
+                <div class="groups-loading-nav__list">
+                    @for (row of groupRows; track row) {
+                        <div class="groups-loading-nav__item">
+                            <span
+                                class="grid-skeleton-line groups-loading-nav__label"
+                                [style.width.%]="groupLabelWidths[row]"
+                            ></span>
+                            <span
+                                class="grid-skeleton-line groups-loading-nav__count"
+                            ></span>
+                        </div>
+                    }
+                </div>
+            </aside>
+
+            <section class="groups-loading-content">
+                <header class="groups-loading-content__header">
+                    <div class="groups-loading-content__meta">
+                        <span
+                            class="grid-skeleton-line groups-loading-content__title"
+                        ></span>
+                        <span
+                            class="grid-skeleton-line groups-loading-content__subtitle"
+                        ></span>
+                    </div>
+                </header>
+
+                <div class="groups-loading-content__list">
+                    @for (row of channelRows; track row) {
+                        <div class="channel-loading-row">
+                            <span
+                                class="list-skeleton-avatar channel-loading-row__logo"
+                            ></span>
+                            <span class="channel-loading-row__text">
+                                <span
+                                    class="grid-skeleton-line channel-loading-row__title"
+                                    [style.width.%]="channelTitleWidths[row]"
+                                ></span>
+                                <span
+                                    class="grid-skeleton-line channel-loading-row__meta"
+                                    [style.width.%]="channelMetaWidths[row]"
+                                ></span>
+                            </span>
+                            <span
+                                class="list-skeleton-star channel-loading-row__favorite"
+                            ></span>
+                        </div>
+                    }
+                </div>
+            </section>
+        </div>
+    } @else {
+        <div class="channels-loading-state">
+            <div class="channels-loading-state__copy">
+                <div class="channels-loading-state__title">
+                    {{ 'CHANNELS.LOADING' | translate }}
+                </div>
+            </div>
+
+            <div class="channels-loading-state__list" aria-hidden="true">
+                @for (row of channelRows; track row) {
+                    <div class="channel-loading-row">
+                        <span
+                            class="list-skeleton-avatar channel-loading-row__logo"
+                        ></span>
+                        <span class="channel-loading-row__text">
+                            <span
+                                class="grid-skeleton-line channel-loading-row__title"
+                                [style.width.%]="channelTitleWidths[row]"
+                            ></span>
+                            <span
+                                class="grid-skeleton-line channel-loading-row__meta"
+                                [style.width.%]="channelMetaWidths[row]"
+                            ></span>
+                        </span>
+                        <span
+                            class="list-skeleton-star channel-loading-row__favorite"
+                        ></span>
+                    </div>
+                }
+            </div>
+        </div>
+    }
+</div>
diff --git a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
new file mode 100644
index 0000000..a1732a8
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
@@ -0,0 +1,253 @@
+@use '../../../../../portal/shared/ui/src/lib/styles/skeleton';
+
+:host {
+    display: block;
+    height: 100%;
+    width: 100%;
+    min-height: 0;
+    container-type: inline-size;
+}
+
+.channel-list-loading-state {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.channels-loading-state {
+    display: grid;
+    gap: 14px;
+    height: 100%;
+    min-height: 0;
+    padding: 16px 12px 18px;
+}
+
+.channels-loading-state__copy {
+    padding: 0 4px;
+}
+
+.channels-loading-state__title,
+.groups-loading-nav__title {
+    margin: 0;
+    font-size: 0.86rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--mat-sys-on-surface);
+}
+
+.channels-loading-state__list,
+.groups-loading-content__list {
+    display: grid;
+    gap: 8px;
+    overflow: hidden;
+}
+
+.channel-loading-row {
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr) 18px;
+    align-items: center;
+    gap: 12px;
+    min-height: 68px;
+    padding: 10px 12px;
+    border-radius: 14px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 12%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 96%,
+            transparent
+        );
+}
+
+.channel-loading-row__logo {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+}
+
+.channel-loading-row__text {
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+}
+
+.channel-loading-row__title {
+    height: 11px;
+    border-radius: 999px;
+}
+
+.channel-loading-row__meta {
+    height: 9px;
+    border-radius: 999px;
+}
+
+.channel-loading-row__favorite {
+    justify-self: end;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+}
+
+.groups-loading-layout {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--app-content-bg, var(--mat-sys-surface));
+}
+
+.groups-loading-nav {
+    width: 208px;
+    min-width: 164px;
+    max-width: 320px;
+    flex-shrink: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--app-rail-bg, var(--mat-sys-surface-container-low));
+    padding: 12px 10px 10px 12px;
+    box-sizing: border-box;
+}
+
+.groups-loading-nav__header {
+    padding: 4px 6px 12px;
+    flex-shrink: 0;
+}
+
+.groups-loading-nav__list {
+    display: grid;
+    gap: 8px;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.groups-loading-nav__item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 24px;
+    align-items: center;
+    gap: 10px;
+    min-height: 36px;
+    padding: 0 10px;
+    border-radius: 12px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 12%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 96%,
+            transparent
+        );
+}
+
+.groups-loading-nav__label,
+.groups-loading-nav__count,
+.groups-loading-content__title,
+.groups-loading-content__subtitle {
+    border-radius: 999px;
+}
+
+.groups-loading-nav__label {
+    height: 9px;
+}
+
+.groups-loading-nav__count {
+    width: 22px;
+    height: 9px;
+    justify-self: end;
+}
+
+.groups-loading-content {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--app-content-bg, var(--mat-sys-surface));
+    border-top-left-radius: 16px;
+}
+
+.groups-loading-content__header {
+    flex-shrink: 0;
+    min-height: 56px;
+    padding: 12px 16px 10px;
+    border-bottom: 1px solid var(--app-separator);
+}
+
+.groups-loading-content__meta {
+    max-width: 180px;
+    display: grid;
+    gap: 8px;
+}
+
+.groups-loading-content__title {
+    width: 100%;
+    max-width: 156px;
+    height: 12px;
+}
+
+.groups-loading-content__subtitle {
+    width: 82px;
+    height: 9px;
+}
+
+.groups-loading-content__list {
+    flex: 1;
+    min-height: 0;
+    align-content: start;
+    padding: 12px 8px 12px;
+}
+
+@container (max-width: 380px) {
+    .channels-loading-state {
+        padding-inline: 8px;
+    }
+
+    .channel-loading-row {
+        grid-template-columns: 40px minmax(0, 1fr) 16px;
+        gap: 10px;
+        padding-inline: 10px;
+    }
+
+    .channel-loading-row__logo {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+    }
+
+    .groups-loading-nav {
+        min-width: 136px;
+        width: 42%;
+        padding-inline: 8px;
+    }
+
+    .groups-loading-content__header {
+        padding-inline: 12px;
+    }
+
+    .groups-loading-content__list {
+        padding-inline: 6px;
+    }
+}
diff --git a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.spec.ts b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.spec.ts
new file mode 100644
index 0000000..1e08868
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.spec.ts
@@ -0,0 +1,48 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { ChannelListLoadingStateComponent } from './channel-list-loading-state.component';
+
+describe('ChannelListLoadingStateComponent', () => {
+    let fixture: ComponentFixture<ChannelListLoadingStateComponent>;
+    let component: ChannelListLoadingStateComponent;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                ChannelListLoadingStateComponent,
+                TranslateModule.forRoot(),
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ChannelListLoadingStateComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('renders channel rows for non-group views', () => {
+        fixture.componentRef.setInput('view', 'all');
+        fixture.detectChanges();
+
+        expect(component.isGroupsView()).toBe(false);
+        expect(
+            fixture.nativeElement.querySelectorAll('.channel-loading-row')
+                .length
+        ).toBe(component.channelRows.length);
+        expect(
+            fixture.nativeElement.querySelector('.groups-loading-layout')
+        ).toBeNull();
+    });
+
+    it('renders a two-column group loading layout for the groups view', () => {
+        fixture.componentRef.setInput('view', 'groups');
+        fixture.detectChanges();
+
+        expect(component.isGroupsView()).toBe(true);
+        expect(
+            fixture.nativeElement.querySelectorAll('.groups-loading-nav__item')
+                .length
+        ).toBe(component.groupRows.length);
+        expect(
+            fixture.nativeElement.querySelector('.groups-loading-content')
+        ).not.toBeNull();
+    });
+});
diff --git a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.ts b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.ts
new file mode 100644
index 0000000..0750d23
--- /dev/null
+++ b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.ts
@@ -0,0 +1,25 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-channel-list-loading-state',
+    templateUrl: './channel-list-loading-state.component.html',
+    styleUrl: './channel-list-loading-state.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [TranslatePipe],
+})
+export class ChannelListLoadingStateComponent {
+    readonly view = input<string>('all');
+
+    readonly isGroupsView = computed(() => this.view() === 'groups');
+    readonly channelRows = Array.from({ length: 9 }, (_, index) => index);
+    readonly groupRows = Array.from({ length: 10 }, (_, index) => index);
+    readonly channelMetaWidths = [38, 34, 42, 36, 44, 35, 40, 32, 39];
+    readonly channelTitleWidths = [72, 61, 68, 54, 78, 64, 70, 57, 75];
+    readonly groupLabelWidths = [78, 66, 84, 58, 73, 69, 81, 62, 76, 71];
+}
diff --git a/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts b/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts
new file mode 100644
index 0000000..c23fe6d
--- /dev/null
+++ b/libs/ui/components/src/lib/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,40 @@
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+
+export interface ConfirmDialogData {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+}
+
+@Component({
+    imports: [MatButtonModule, MatDialogModule, TranslateModule],
+    template: `
+        <h2 mat-dialog-title>
+            {{ dialogData.title }}
+        </h2>
+        <mat-dialog-content class="mat-typography">
+            {{ dialogData.message }}
+        </mat-dialog-content>
+        <mat-dialog-actions align="end">
+            <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+                {{ dialogData.cancelLabel || 'NO' | translate }}
+            </button>
+            <button mat-flat-button [mat-dialog-close]="true" color="accent">
+                {{ dialogData.confirmLabel || 'YES' | translate }}
+            </button>
+        </mat-dialog-actions>
+    `,
+})
+export class ConfirmDialogComponent {
+    readonly dialogData!: ConfirmDialogData;
+    readonly data = inject<ConfirmDialogData>(MAT_DIALOG_DATA);
+
+    constructor() {
+        this.dialogData = this.data;
+    }
+}
diff --git a/libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts b/libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts
new file mode 100644
index 0000000..9cf6198
--- /dev/null
+++ b/libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts
@@ -0,0 +1,65 @@
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { DialogService } from './dialog.service';
+
+describe('DialogService', () => {
+    let service: DialogService;
+    let dialog: { open: jest.Mock };
+
+    beforeEach(() => {
+        dialog = {
+            open: jest.fn(),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                DialogService,
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+            ],
+        });
+
+        service = TestBed.inject(DialogService);
+    });
+
+    it('opens the confirm dialog with the expected config', () => {
+        dialog.open.mockReturnValue({
+            afterClosed: () => of(false),
+        });
+
+        service.openConfirmDialog({
+            title: 'Remove',
+            message: 'Confirm removal?',
+            onConfirm: jest.fn(),
+        });
+
+        expect(dialog.open).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                data: expect.objectContaining({
+                    title: 'Remove',
+                    message: 'Confirm removal?',
+                }),
+                width: '300px',
+            })
+        );
+    });
+
+    it('invokes onConfirm only after the dialog resolves truthy', () => {
+        const onConfirm = jest.fn();
+        dialog.open.mockReturnValue({
+            afterClosed: () => of(true),
+        });
+
+        service.openConfirmDialog({
+            title: 'Remove',
+            message: 'Confirm removal?',
+            onConfirm,
+        });
+
+        expect(onConfirm).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/libs/ui/components/src/lib/confirm-dialog/dialog.service.ts b/libs/ui/components/src/lib/confirm-dialog/dialog.service.ts
new file mode 100644
index 0000000..382a852
--- /dev/null
+++ b/libs/ui/components/src/lib/confirm-dialog/dialog.service.ts
@@ -0,0 +1,30 @@
+import { inject, Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import {
+    ConfirmDialogComponent,
+    ConfirmDialogData,
+} from './confirm-dialog.component';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DialogService {
+    private dialog = inject(MatDialog);
+
+    /**
+     * Opens the confirm dialog with provided data
+     * @param data dialog meta info
+     */
+    openConfirmDialog(data: ConfirmDialogData): void {
+        const dialogRef = this.dialog.open<
+            ConfirmDialogComponent,
+            ConfirmDialogData
+        >(ConfirmDialogComponent, {
+            data,
+            width: '300px',
+        });
+        dialogRef
+            .afterClosed()
+            .subscribe((result) => (result ? data.onConfirm() : null));
+    }
+}
diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.html b/libs/ui/components/src/lib/content-hero/content-hero.component.html
new file mode 100644
index 0000000..3ac4151
--- /dev/null
+++ b/libs/ui/components/src/lib/content-hero/content-hero.component.html
@@ -0,0 +1,193 @@
+<!-- Hero Section with Backdrop -->
+<section class="hero">
+    <!-- Back Button -->
+    <button class="hero__back-button" (click)="onBack()">
+        <mat-icon>arrow_back</mat-icon>
+    </button>
+    @if (errorMessage()) {
+        <div class="hero__content hero__error">
+            <mat-icon class="error-icon">cloud_off</mat-icon>
+            <h2 class="error-title">{{ errorMessage() }}</h2>
+            <ng-content select="[hero-error-actions]"></ng-content>
+        </div>
+    } @else if (isLoading()) {
+        <div class="hero__content">
+            <!-- Skeleton Poster -->
+            <div class="poster">
+                <ngx-skeleton-loader
+                    count="1"
+                    [theme]="{
+                        height: '100%',
+                        width: '100%',
+                        'border-radius': '8px',
+                        'aspect-ratio': '2/3',
+                        display: 'block',
+                    }"
+                />
+            </div>
+
+            <!-- Skeleton Details -->
+            <div class="details">
+                <!-- Title -->
+                <ngx-skeleton-loader
+                    count="1"
+                    [theme]="{
+                        height: '40px',
+                        width: '60%',
+                        'margin-bottom': '16px',
+                        display: 'block',
+                    }"
+                />
+
+                <!-- Tags -->
+                <div style="display: flex; gap: 8px; margin-bottom: 16px">
+                    <ngx-skeleton-loader
+                        count="3"
+                        [theme]="{
+                            height: '24px',
+                            width: '60px',
+                            display: 'block',
+                        }"
+                    />
+                </div>
+
+                <!-- Description -->
+                <ngx-skeleton-loader
+                    count="3"
+                    [theme]="{
+                        height: '16px',
+                        'margin-bottom': '8px',
+                        width: '100%',
+                        display: 'block',
+                    }"
+                />
+
+                <!-- Meta -->
+                <div style="margin-top: 20px; display: flex; gap: 32px">
+                    <ngx-skeleton-loader
+                        count="2"
+                        [theme]="{
+                            height: '40px',
+                            width: '100px',
+                            display: 'block',
+                        }"
+                    />
+                </div>
+
+                <!-- Buttons -->
+                <div style="margin-top: 24px; display: flex; gap: 12px">
+                    <ngx-skeleton-loader
+                        count="2"
+                        [theme]="{
+                            height: '48px',
+                            width: '140px',
+                            display: 'block',
+                        }"
+                    />
+                </div>
+            </div>
+        </div>
+    } @else {
+        <!-- Backdrop Image -->
+        <div
+            class="hero__backdrop"
+            [class.hero__backdrop--blurred]="
+                !backdropUrl() && posterUrl() && !posterError()
+            "
+            [style.backgroundImage]="
+                backdropUrl() && !posterError()
+                    ? 'url(' + backdropUrl() + ')'
+                    : posterUrl() && !posterError()
+                      ? 'url(' + posterUrl() + ')'
+                      : fallbackBackdropBackground()
+            "
+        ></div>
+
+        <!-- Gradient Vignette Overlay -->
+        <div class="hero__vignette"></div>
+
+        <!-- Hero Content -->
+        <div class="hero__content">
+            <!-- Poster Card -->
+            <div class="poster">
+                @if (posterUrl() && !posterError()) {
+                    <img
+                        class="poster__image"
+                        [src]="posterUrl()"
+                        (error)="onPosterError()"
+                        alt="Poster"
+                    />
+                } @else {
+                    <div
+                        class="poster__placeholder"
+                        [style.backgroundImage]="fallbackPosterBackground()"
+                    >
+                        <mat-icon class="poster__placeholder-icon"
+                            >movie</mat-icon
+                        >
+                        <span class="poster__placeholder-text">{{
+                            formattedTitle()
+                        }}</span>
+                    </div>
+                }
+            </div>
+
+            <div class="details">
+                <h1 class="details__title">{{ formattedTitle() }}</h1>
+
+                <!-- Tags Slot -->
+                <div class="details__tags">
+                    <ng-content select="[hero-tags]"></ng-content>
+                </div>
+
+                <!-- Description -->
+                @if (description()) {
+                    <p
+                        #descriptionEl
+                        class="details__description"
+                        [class.details__description--expanded]="
+                            isDescriptionExpanded()
+                        "
+                    >
+                        {{ description() }}
+                    </p>
+                    @if (hasDescriptionOverflow() || isDescriptionExpanded()) {
+                        <button
+                            type="button"
+                            class="details__description-toggle"
+                            (click)="toggleDescription()"
+                            [attr.aria-expanded]="isDescriptionExpanded()"
+                        >
+                            <span>{{
+                                (isDescriptionExpanded()
+                                    ? 'SHOW_LESS'
+                                    : 'SHOW_MORE'
+                                ) | translate
+                            }}</span>
+                            <mat-icon aria-hidden="true">
+                                {{
+                                    isDescriptionExpanded()
+                                        ? 'expand_less'
+                                        : 'expand_more'
+                                }}
+                            </mat-icon>
+                        </button>
+                    }
+                }
+
+                <!-- Metadata Grid Slot -->
+                <div class="details__meta">
+                    <ng-content select="[hero-meta]"></ng-content>
+                </div>
+
+                <!-- Action Buttons Slot -->
+                <div class="action-buttons">
+                    <ng-content select="[hero-actions]"></ng-content>
+                </div>
+
+                <!-- Additional Content (Seasons, Trailers, etc.) -->
+                <ng-content></ng-content>
+            </div>
+        </div>
+    }
+</section>
diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.scss b/libs/ui/components/src/lib/content-hero/content-hero.component.scss
new file mode 100644
index 0000000..ecfa08d
--- /dev/null
+++ b/libs/ui/components/src/lib/content-hero/content-hero.component.scss
@@ -0,0 +1,606 @@
+// ============================================================================
+// Netflix-style Detail View - Cinematic Streaming Design
+// ============================================================================
+
+:host {
+    --poster-width: 220px;
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
+    --content-max-width: 1400px;
+
+    // Light theme colors (default - no .dark-theme class on body)
+    --hero-gradient-start: rgba(255, 250, 245, 0);
+    --hero-gradient-mid: rgba(255, 250, 245, 0.75);
+    --hero-gradient-end: rgba(255, 250, 245, 1);
+    --surface-bg: #fffaf5;
+    --text-primary: #1a1a1a;
+    --text-secondary: rgba(26, 26, 26, 0.75);
+    --text-muted: rgba(26, 26, 26, 0.5);
+    --accent-color: #b81d24;
+    --tag-bg: rgba(0, 0, 0, 0.06);
+    --tag-border: rgba(0, 0, 0, 0.12);
+
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+    background: var(--surface-bg);
+    color: var(--text-primary);
+}
+
+// Dark theme overrides - cinematic dark mode
+:host-context(.dark-theme) {
+    --hero-gradient-start: rgba(20, 20, 20, 0);
+    --hero-gradient-mid: rgba(20, 20, 20, 0.7);
+    --hero-gradient-end: rgba(20, 20, 20, 1);
+    --surface-bg: #141414;
+    --text-primary: #fff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --accent-color: #e50914;
+    --tag-bg: rgba(255, 255, 255, 0.1);
+    --tag-border: rgba(255, 255, 255, 0.2);
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+}
+
+// ============================================================================
+// Hero Section - Full container with backdrop
+// ============================================================================
+
+.hero {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(
+        --surface-bg
+    ); // Solid background prevents any bleed-through
+
+    // Floating back button over backdrop
+    &__back-button {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        z-index: 10;
+        app-region: no-drag;
+        -webkit-app-region: no-drag;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(8px);
+        border: none;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: #fff;
+
+        &:hover {
+            background: rgba(0, 0, 0, 0.7);
+            transform: scale(1.05);
+        }
+
+        mat-icon {
+            font-size: 24px;
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    // Backdrop image layer - fixed at top, never repeats
+    &__backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: auto; // Only use height, not bottom
+        height: 60%;
+        background-size: cover;
+        background-position: center 20%;
+        background-repeat: no-repeat;
+        z-index: 0;
+        overflow: hidden;
+
+        // Fallback blur effect when using poster as backdrop
+        &--blurred {
+            filter: blur(40px) saturate(1.3);
+            transform: scale(1.4);
+            height: 65%;
+        }
+    }
+
+    // Gradient overlays for text legibility
+    &__vignette {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; // Full height to cover everything
+        z-index: 1;
+        pointer-events: none;
+        background: linear-gradient(
+            to bottom,
+            transparent 0%,
+            transparent 35%,
+            var(--surface-bg) 55%,
+            var(--surface-bg) 100%
+        );
+
+        // Top area gradient for text legibility over backdrop
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 60%;
+            background: linear-gradient(
+                to top,
+                var(--hero-gradient-end) 0%,
+                var(--hero-gradient-mid) 50%,
+                var(--hero-gradient-start) 100%
+            );
+        }
+
+        // Side fade for poster area
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 50%;
+            width: 40%;
+            background: linear-gradient(
+                to right,
+                var(--hero-gradient-mid) 0%,
+                var(--hero-gradient-start) 100%
+            );
+        }
+    }
+
+    // Scrollable content area
+    &__content {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        display: flex;
+        gap: 32px;
+        align-items: flex-start;
+        padding: 140px 40px 60px;
+        max-width: var(--content-max-width);
+        margin: 0 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        box-sizing: border-box;
+
+        // Hide scrollbar but keep functionality
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    // Error state
+    &__error {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 16px;
+
+        .error-icon {
+            font-size: 64px;
+            width: 64px;
+            height: 64px;
+            color: var(--text-muted);
+        }
+
+        .error-title {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin: 0;
+        }
+    }
+}
+
+// ============================================================================
+// Poster Card - Floating with shadow
+// ============================================================================
+
+.poster {
+    flex-shrink: 0;
+    width: var(--poster-width);
+    align-self: flex-start;
+
+    &:hover .poster__image {
+        transform: scale(1.02);
+    }
+
+    &__image {
+        width: 100%;
+        aspect-ratio: 2 / 3;
+        object-fit: cover;
+        border-radius: 8px;
+        box-shadow: var(--poster-shadow);
+        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+        transition: transform 0.3s ease;
+    }
+
+    &__placeholder {
+        width: 100%;
+        aspect-ratio: 2 / 3;
+        border-radius: 8px;
+        background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: rgba(255, 255, 255, 0.8);
+        box-shadow: var(--poster-shadow);
+        overflow: hidden;
+
+        &-icon {
+            font-size: 48px;
+            width: 48px;
+            height: 48px;
+            opacity: 0.5;
+            margin-bottom: 12px;
+        }
+
+        &-text {
+            font-size: 1rem;
+            font-weight: 500;
+            text-align: center;
+            display: -webkit-box;
+            -webkit-line-clamp: 4;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            overflow-wrap: anywhere;
+            padding: 16px;
+        }
+    }
+}
+
+// ============================================================================
+// Details Section - Title, metadata, description
+// ============================================================================
+
+.details {
+    flex: 1;
+    min-width: 0;
+    padding-bottom: 24px;
+
+    &__title {
+        font-size: clamp(1.75rem, 4vw, 3rem);
+        font-weight: 700;
+        line-height: 1.1;
+        margin: 0 0 16px 0;
+        letter-spacing: -0.02em;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        overflow-wrap: anywhere;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    &__tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 16px;
+    }
+
+    // These styles are for Projected Content, we need to ensure they apply
+    // using ::ng-deep or just assume the global styles will handle them?
+    // Actually, since we project content, the styles defined here might NOT apply to the projected content
+    // unless we use ::ng-deep or the content itself has these styles.
+    // However, since we are moving the "shell", the container classes (.details__tags) are here.
+    // The inner items (.details__tag) will be in the projected content.
+    // So we need ::ng-deep here for .details__tag.
+
+    ::ng-deep .details__tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 12px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        background: var(--tag-bg);
+        border: 1px solid var(--tag-border);
+        border-radius: 4px;
+        backdrop-filter: blur(8px);
+
+        &--rating {
+            color: #ffd700;
+            border-color: rgba(255, 215, 0, 0.3);
+        }
+    }
+
+    &__description {
+        font-size: 0.9375rem;
+        line-height: 1.6;
+        color: var(--text-secondary);
+        margin-bottom: 6px;
+        max-width: 600px;
+
+        // Truncate long descriptions
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        &--expanded {
+            display: block;
+            -webkit-line-clamp: unset;
+            overflow: visible;
+        }
+    }
+
+    &__description-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin: 0 0 20px 0;
+        padding: 4px 0;
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        color: var(--text-secondary);
+        font: inherit;
+        font-size: 0.8125rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        transition:
+            color 180ms ease,
+            transform 180ms ease;
+
+        mat-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            line-height: 16px;
+            transition: transform 180ms ease;
+        }
+
+        &:hover {
+            color: var(--text-primary);
+
+            mat-icon {
+                transform: translateY(2px);
+            }
+        }
+
+        &[aria-expanded='true']:hover mat-icon {
+            transform: translateY(-2px);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: 2px;
+            border-radius: 2px;
+        }
+    }
+
+    &__meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px 32px;
+        margin-bottom: 24px;
+    }
+
+    // Similar issue for meta items
+    ::ng-deep .details__meta-item {
+        font-size: 0.875rem;
+
+        .label {
+            color: var(--text-muted);
+            font-weight: 400;
+            margin-bottom: 2px;
+            text-decoration: none;
+            display: block;
+        }
+
+        .value {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+    }
+}
+
+// ============================================================================
+// Action Buttons - Play, Favorite
+// ============================================================================
+
+.action-buttons {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-top: 0;
+
+    // Use ::ng-deep to style the projected buttons
+    ::ng-deep .play-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 28px;
+        font-size: 1rem;
+        font-weight: 600;
+        background: #fff;
+        color: #141414;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.85);
+            transform: scale(1.02);
+        }
+
+        mat-icon {
+            font-size: 24px;
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    ::ng-deep .favorite-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 20px;
+        font-size: 0.9375rem;
+        font-weight: 500;
+        background: rgba(109, 109, 110, 0.7);
+        color: #fff;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba(109, 109, 110, 0.5);
+        }
+
+        &--active {
+            background: rgba(229, 9, 20, 0.8);
+
+            &:hover {
+                background: rgba(229, 9, 20, 0.6);
+            }
+        }
+
+        mat-icon {
+            font-size: 20px;
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+
+// ============================================================================
+// Mobile Responsive - Option A: Keep poster grid layout
+// ============================================================================
+
+@media (max-width: 800px) {
+    :host {
+        --poster-width: 120px;
+    }
+
+    .hero {
+        &__backdrop {
+            height: 45%;
+
+            &--blurred {
+                height: 50%;
+            }
+        }
+
+        &__vignette {
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                transparent 25%,
+                var(--surface-bg) 45%,
+                var(--surface-bg) 100%
+            );
+
+            &::before {
+                height: 50%;
+            }
+
+            &::after {
+                display: none;
+            }
+        }
+
+        &__content {
+            padding: 60px 20px 40px;
+            gap: 16px;
+        }
+    }
+
+    .poster {
+        // Mobile poster adjustments - none needed
+    }
+
+    .details {
+        &__title {
+            font-size: 1.5rem;
+        }
+
+        &__description {
+            -webkit-line-clamp: 3;
+
+            &--expanded {
+                -webkit-line-clamp: unset;
+            }
+        }
+
+        &__meta {
+            gap: 12px 20px;
+        }
+    }
+
+    .action-buttons {
+        width: 100%;
+
+        ::ng-deep .play-btn,
+        ::ng-deep .favorite-btn {
+            flex: 1;
+            justify-content: center;
+            padding: 10px 16px;
+        }
+    }
+}
+
+// ============================================================================
+// Animations
+// ============================================================================
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.hero__content {
+    animation: fadeInUp 0.6s ease-out 0.2s both;
+}
+
+// Skeleton Loader Overrides
+ngx-skeleton-loader {
+    display: block;
+    width: 100%;
+
+    // Ensure the loader inside poster takes up the correct aspect ratio space
+    ::ng-deep .loader {
+        display: block;
+        height: 100%;
+    }
+}
+
+:host-context(.dark-theme) {
+    ngx-skeleton-loader {
+        ::ng-deep .loader {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+}
+
+.poster {
+    // ... existing styles ...
+    // Ensure poster container has height/ratio for skeleton
+    min-height: 330px; // Fallback
+    aspect-ratio: 2 / 3;
+}
diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.spec.ts b/libs/ui/components/src/lib/content-hero/content-hero.component.spec.ts
new file mode 100644
index 0000000..eee8538
--- /dev/null
+++ b/libs/ui/components/src/lib/content-hero/content-hero.component.spec.ts
@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContentHeroComponent } from './content-hero.component';
+
+describe('ContentHeroComponent', () => {
+    let fixture: ComponentFixture<ContentHeroComponent>;
+    const originalResizeObserver = globalThis.ResizeObserver;
+
+    afterEach(() => {
+        Object.defineProperty(globalThis, 'ResizeObserver', {
+            configurable: true,
+            writable: true,
+            value: originalResizeObserver,
+        });
+    });
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ContentHeroComponent, TranslateModule.forRoot()],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContentHeroComponent);
+    });
+
+    it('renders description content when ResizeObserver is unavailable', () => {
+        Object.defineProperty(globalThis, 'ResizeObserver', {
+            configurable: true,
+            writable: true,
+            value: undefined,
+        });
+
+        fixture.componentRef.setInput('title', 'Fallback_Title');
+        fixture.componentRef.setInput('description', 'Plain description');
+
+        expect(() => fixture.detectChanges()).not.toThrow();
+
+        const host = fixture.nativeElement as HTMLElement;
+        expect(host.textContent).toContain('Fallback Title');
+        expect(host.textContent).toContain('Plain description');
+    });
+});
diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.ts b/libs/ui/components/src/lib/content-hero/content-hero.component.ts
new file mode 100644
index 0000000..091398f
--- /dev/null
+++ b/libs/ui/components/src/lib/content-hero/content-hero.component.ts
@@ -0,0 +1,120 @@
+import {
+    Component,
+    DestroyRef,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+    viewChild,
+    ElementRef,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+
+@Component({
+    selector: 'app-content-hero',
+    standalone: true,
+    imports: [
+        MatIconModule,
+        MatButtonModule,
+        NgxSkeletonLoaderComponent,
+        TranslateModule,
+    ],
+    templateUrl: './content-hero.component.html',
+    styleUrls: ['./content-hero.component.scss'],
+})
+export class ContentHeroComponent {
+    private readonly destroyRef = inject(DestroyRef);
+
+    readonly title = input<string>();
+    readonly description = input<string>();
+    readonly posterUrl = input<string>();
+    readonly backdropUrl = input<string>();
+    readonly isLoading = input(false);
+    readonly errorMessage = input<string>();
+
+    readonly backClicked = output<void>();
+    readonly posterError = signal(false);
+
+    readonly descriptionEl = viewChild<ElementRef<HTMLElement>>('descriptionEl');
+    readonly isDescriptionExpanded = signal(false);
+    readonly hasDescriptionOverflow = signal(false);
+
+    private resizeObserver?: ResizeObserver;
+
+    constructor() {
+        effect(() => {
+            // Re-measure whenever description content or the element changes.
+            this.description();
+            const el = this.descriptionEl()?.nativeElement;
+            if (!el) return;
+
+            this.measureOverflow(el);
+            this.observeOverflow(el);
+        });
+
+        this.destroyRef.onDestroy(() => this.resizeObserver?.disconnect());
+    }
+
+    onPosterError(): void {
+        this.posterError.set(true);
+    }
+
+    readonly formattedTitle = computed(() => {
+        const t = this.title();
+        if (!t) return '';
+        // Replace underscores with spaces for cleaner UX on slug/filename style titles
+        return t.replace(/_/g, ' ').replace(/\s+/g, ' ').trim();
+    });
+
+    private calculateHue(text: string): number {
+        if (!text) return 0;
+        let hash = 0;
+        for (let i = 0; i < text.length; i++) {
+            hash = text.charCodeAt(i) + ((hash << 5) - hash);
+            hash = hash & hash;
+        }
+        return Math.abs(hash) % 360;
+    }
+
+    readonly fallbackPosterBackground = computed(() => {
+        const hue = this.calculateHue(this.title() || 'placeholder');
+        const h2 = (hue + 40) % 360;
+        return `linear-gradient(135deg, hsl(${hue}, 40%, 25%) 0%, hsl(${h2}, 50%, 15%) 100%)`;
+    });
+
+    readonly fallbackBackdropBackground = computed(() => {
+        const hue = this.calculateHue(this.title() || 'placeholder');
+        const h2 = (hue + 60) % 360;
+        return `linear-gradient(135deg, hsl(${hue}, 50%, 15%) 0%, hsl(${h2}, 80%, 5%) 100%)`;
+    });
+
+    onBack(): void {
+        this.backClicked.emit();
+    }
+
+    toggleDescription(): void {
+        this.isDescriptionExpanded.update((v) => !v);
+    }
+
+    private measureOverflow(el: HTMLElement): void {
+        // Measure only in the clamped state; if already expanded, clamped overflow
+        // is implied when the element previously overflowed.
+        if (this.isDescriptionExpanded()) return;
+        this.hasDescriptionOverflow.set(el.scrollHeight > el.clientHeight + 1);
+    }
+
+    private observeOverflow(el: HTMLElement): void {
+        this.resizeObserver?.disconnect();
+        if (typeof ResizeObserver === 'undefined') {
+            this.measureOverflow(el);
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.measureOverflow(el));
+        this.resizeObserver.observe(el);
+    }
+}
diff --git a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.html b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.html
new file mode 100644
index 0000000..9998539
--- /dev/null
+++ b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.html
@@ -0,0 +1,71 @@
+<section
+    class="external-playback-dock"
+    [class.external-playback-dock--compact]="compact()"
+    [class.external-playback-dock--error]="session().status === 'error'"
+>
+    <button
+        type="button"
+        class="external-playback-dock__artwork"
+        [class.external-playback-dock__artwork--interactive]="
+            artworkInteractive()
+        "
+        [disabled]="!artworkInteractive()"
+        [attr.aria-label]="
+            artworkInteractive() ? 'Open in playlist' : null
+        "
+        (click)="onArtworkClick()"
+    >
+        @if (showArtwork()) {
+            <img
+                [src]="artworkUrl()"
+                [alt]="session().title"
+                loading="lazy"
+                (error)="onArtworkError()"
+            />
+        } @else {
+            <div class="external-playback-dock__placeholder">
+                <mat-icon>{{ artworkPlaceholderIcon() }}</mat-icon>
+            </div>
+        }
+    </button>
+
+    <div class="external-playback-dock__meta">
+        <div class="external-playback-dock__title">{{ session().title }}</div>
+        <div class="external-playback-dock__status">
+            <span class="external-playback-dock__chip">{{ playerLabel() }}</span>
+            <span
+                class="external-playback-dock__status-separator"
+                aria-hidden="true"
+                >·</span
+            >
+            @if (showSpinner()) {
+                <mat-spinner diameter="12" strokeWidth="2"></mat-spinner>
+            } @else if (showStatusIcon()) {
+                <mat-icon class="external-playback-dock__status-icon">{{
+                    statusIcon()
+                }}</mat-icon>
+            }
+            <span class="external-playback-dock__status-text">{{
+                statusLabel()
+            }}</span>
+        </div>
+    </div>
+
+    <div class="external-playback-dock__actions">
+        @if (showCloseButton()) {
+            <button
+                type="button"
+                mat-button
+                class="external-playback-dock__button"
+                (click)="closeClicked.emit()"
+            >
+                <mat-icon>stop_circle</mat-icon>
+                @if (!compact()) {
+                    <span>{{
+                        'WORKSPACE.SHELL.EXTERNAL_PLAYBACK_CLOSE' | translate
+                    }}</span>
+                }
+            </button>
+        }
+    </div>
+</section>
diff --git a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
new file mode 100644
index 0000000..29158fd
--- /dev/null
+++ b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
@@ -0,0 +1,192 @@
+:host {
+    display: block;
+}
+
+.external-playback-dock {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 14px;
+    min-height: 72px;
+    padding: 2px 14px;
+    border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent);
+    border-radius: 15px 15px 0 0;
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--mat-sys-surface-container-high) 88%, white 12%),
+            color-mix(in srgb, var(--mat-sys-surface-container) 92%, transparent)
+        );
+    box-shadow:
+        0 18px 42px rgba(15, 23, 42, 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.28);
+}
+
+.external-playback-dock--error {
+    border-color: color-mix(in srgb, var(--mat-sys-error) 50%, transparent);
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--mat-sys-error-container) 72%, transparent),
+            color-mix(in srgb, var(--mat-sys-surface-container) 90%, transparent)
+        );
+}
+
+.external-playback-dock--compact {
+    min-height: 48px;
+    padding: 8px 10px;
+    gap: 10px;
+    border-radius: 16px;
+    box-shadow:
+        0 12px 28px rgba(15, 23, 42, 0.16),
+        inset 0 1px 0 rgba(255, 255, 255, 0.18);
+
+    .external-playback-dock__artwork {
+        width: 38px;
+        height: 38px;
+        border-radius: 12px;
+    }
+
+    .external-playback-dock__title {
+        font-size: 0.86rem;
+    }
+
+    .external-playback-dock__status {
+        font-size: 0.72rem;
+    }
+}
+
+.external-playback-dock__artwork {
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border: 0;
+    border-radius: 14px;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--mat-sys-surface-container-highest) 92%, transparent);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+    color: inherit;
+    cursor: default;
+    transition:
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+
+    img,
+    .external-playback-dock__placeholder {
+        width: 100%;
+        height: 100%;
+    }
+
+    img {
+        object-fit: cover;
+        display: block;
+    }
+
+    &--interactive {
+        cursor: pointer;
+
+        &:hover {
+            transform: scale(1.04);
+            box-shadow:
+                inset 0 0 0 1px rgba(255, 255, 255, 0.32),
+                0 6px 16px rgba(0, 0, 0, 0.28);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--mat-sys-primary);
+            outline-offset: 2px;
+        }
+    }
+}
+
+.external-playback-dock__placeholder {
+    display: grid;
+    place-items: center;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+.external-playback-dock__meta {
+    min-width: 0;
+}
+
+.external-playback-dock__chip {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-highest) 80%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface-variant);
+    border: 1px solid
+        color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+.external-playback-dock__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--mat-sys-on-surface);
+    margin-bottom: 2px;
+}
+
+.external-playback-dock__status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.78rem;
+    min-width: 0;
+
+    .external-playback-dock__status-separator {
+        opacity: 0.55;
+        font-weight: 700;
+        line-height: 1;
+    }
+
+    .external-playback-dock__status-icon {
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
+    }
+
+    .external-playback-dock__status-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    mat-spinner {
+        flex-shrink: 0;
+    }
+}
+
+.external-playback-dock__actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.external-playback-dock__button {
+    border-radius: 999px;
+    white-space: nowrap;
+}
+
+@media (max-width: 720px) {
+    .external-playback-dock {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+
+    .external-playback-dock:not(.external-playback-dock--compact) {
+        .external-playback-dock__button span {
+            display: none;
+        }
+    }
+}
diff --git a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.spec.ts b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.spec.ts
new file mode 100644
index 0000000..210ab28
--- /dev/null
+++ b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.spec.ts
@@ -0,0 +1,149 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+    TranslateLoader,
+    TranslateModule,
+    TranslateService,
+} from '@ngx-translate/core';
+import { Observable, of } from 'rxjs';
+import { ExternalPlayerSession } from 'shared-interfaces';
+import { ExternalPlaybackDockComponent } from './external-playback-dock.component';
+
+class FakeTranslateLoader implements TranslateLoader {
+    getTranslation(): Observable<Record<string, unknown>> {
+        return of({
+            WORKSPACE: {
+                SHELL: {
+                    EXTERNAL_PLAYBACK_CLOSE: 'Close player',
+                },
+            },
+        });
+    }
+}
+
+describe('ExternalPlaybackDockComponent', () => {
+    let fixture: ComponentFixture<ExternalPlaybackDockComponent>;
+    let component: ExternalPlaybackDockComponent;
+
+    const session: ExternalPlayerSession = {
+        id: 'session-1',
+        player: 'mpv',
+        status: 'launching',
+        title: 'Example Video',
+        streamUrl: 'https://example.com/video.mp4',
+        startedAt: '2026-03-07T10:00:00.000Z',
+        updatedAt: '2026-03-07T10:00:00.000Z',
+        canClose: true,
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                ExternalPlaybackDockComponent,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: FakeTranslateLoader,
+                    },
+                }),
+            ],
+        }).compileComponents();
+
+        const translate = TestBed.inject(TranslateService);
+        translate.setDefaultLang('en');
+        translate.use('en');
+
+        fixture = TestBed.createComponent(ExternalPlaybackDockComponent);
+        component = fixture.componentInstance;
+        fixture.componentRef.setInput('session', session);
+        fixture.detectChanges();
+    });
+
+    it('renders launch state copy for the active session', () => {
+        const text = fixture.nativeElement.textContent;
+        expect(text).toContain('Example Video');
+        expect(text).toContain('MPV');
+        expect(text).toContain('Launching');
+        expect(text).toContain('Close player');
+    });
+
+    it('emits a single close action when the close button is clicked', () => {
+        const closeSpy = jest.fn();
+        component.closeClicked.subscribe(closeSpy);
+
+        const closeButton = fixture.debugElement.query(
+            By.css('.external-playback-dock__button')
+        );
+        closeButton.nativeElement.click();
+
+        expect(closeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders both artwork and close as buttons', () => {
+        const buttons = fixture.debugElement.queryAll(By.css('button'));
+        expect(buttons).toHaveLength(2);
+        expect(
+            buttons[0].nativeElement.classList.contains(
+                'external-playback-dock__artwork'
+            )
+        ).toBe(true);
+        expect(
+            buttons[1].nativeElement.classList.contains(
+                'external-playback-dock__button'
+            )
+        ).toBe(true);
+    });
+
+    it('disables the artwork button when the session has no playlist target', () => {
+        const artwork = fixture.debugElement.query(
+            By.css('.external-playback-dock__artwork')
+        );
+        expect(artwork.nativeElement.disabled).toBe(true);
+    });
+
+    it('enables the artwork and emits when the session has a playlist target', () => {
+        fixture.componentRef.setInput('session', {
+            ...session,
+            contentInfo: {
+                playlistId: 'playlist-1',
+                contentXtreamId: 42,
+                contentType: 'vod',
+            },
+        });
+        fixture.detectChanges();
+
+        const artworkSpy = jest.fn();
+        component.artworkClicked.subscribe(artworkSpy);
+
+        const artwork = fixture.debugElement.query(
+            By.css('.external-playback-dock__artwork')
+        );
+        expect(artwork.nativeElement.disabled).toBe(false);
+        artwork.nativeElement.click();
+        expect(artworkSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('falls back to a placeholder icon when artwork fails to load', () => {
+        fixture.componentRef.setInput('session', {
+            ...session,
+            thumbnail: 'https://example.com/broken.png',
+            contentInfo: {
+                playlistId: 'playlist-1',
+                contentXtreamId: 42,
+                contentType: 'vod',
+            },
+        });
+        fixture.detectChanges();
+
+        const image = fixture.debugElement.query(By.css('img'));
+        image.triggerEventHandler('error');
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('img'))).toBeNull();
+        expect(
+            fixture.debugElement
+                .query(By.css('.external-playback-dock__placeholder mat-icon'))
+                .nativeElement.textContent.trim()
+        ).toBe('movie');
+    });
+});
diff --git a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.ts b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.ts
new file mode 100644
index 0000000..4d4e6e6
--- /dev/null
+++ b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.ts
@@ -0,0 +1,105 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ExternalPlayerSession } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-external-playback-dock',
+    imports: [
+        MatButtonModule,
+        MatIcon,
+        MatProgressSpinnerModule,
+        TranslatePipe,
+    ],
+    templateUrl: './external-playback-dock.component.html',
+    styleUrl: './external-playback-dock.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExternalPlaybackDockComponent {
+    readonly session = input.required<ExternalPlayerSession>();
+    readonly compact = input(false);
+
+    readonly closeClicked = output<void>();
+    readonly artworkClicked = output<void>();
+    private readonly artworkFailed = signal(false);
+
+    readonly playerLabel = computed(() => this.session().player.toUpperCase());
+    readonly artworkUrl = computed(
+        () => this.session().thumbnail?.trim() ?? ''
+    );
+    readonly statusLabel = computed(() => {
+        const session = this.session();
+
+        switch (session.status) {
+            case 'launching':
+                return 'Launching…';
+            case 'opened':
+            case 'playing':
+                return 'Opened';
+            case 'error':
+                return session.error || 'Playback failed';
+            default:
+                return 'Closed';
+        }
+    });
+
+    readonly statusIcon = computed(() => {
+        const status = this.session().status;
+        if (status === 'error') return 'error_outline';
+        return 'open_in_new';
+    });
+
+    readonly showSpinner = computed(
+        () => this.session().status === 'launching'
+    );
+    readonly showStatusIcon = computed(
+        () => this.session().status !== 'launching'
+    );
+    readonly showArtwork = computed(
+        () => !!this.artworkUrl() && !this.artworkFailed()
+    );
+    readonly artworkPlaceholderIcon = computed(() => {
+        const contentType = this.session().contentInfo?.contentType;
+
+        switch (contentType) {
+            case 'vod':
+                return 'movie';
+            case 'episode':
+                return 'video_library';
+            default:
+                return 'live_tv';
+        }
+    });
+    readonly artworkInteractive = computed(
+        () => !!this.session().contentInfo?.playlistId
+    );
+    readonly showCloseButton = computed(
+        () => this.session().canClose && this.session().status !== 'error'
+    );
+
+    constructor() {
+        effect(() => {
+            this.artworkUrl();
+            this.artworkFailed.set(false);
+        });
+    }
+
+    onArtworkError(): void {
+        this.artworkFailed.set(true);
+    }
+
+    onArtworkClick(): void {
+        if (!this.artworkInteractive()) return;
+        this.artworkClicked.emit();
+    }
+}
diff --git a/libs/ui/components/src/lib/progress-capsule/progress-capsule.component.ts b/libs/ui/components/src/lib/progress-capsule/progress-capsule.component.ts
new file mode 100644
index 0000000..f921028
--- /dev/null
+++ b/libs/ui/components/src/lib/progress-capsule/progress-capsule.component.ts
@@ -0,0 +1,55 @@
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+    selector: 'app-progress-capsule',
+    standalone: true,
+    template: `
+        <div
+            class="progress-capsule"
+            [class.progress-capsule--watched]="isWatched()"
+        >
+            <div
+                class="progress-capsule__fill"
+                [style.width.%]="progress()"
+            ></div>
+        </div>
+    `,
+    styles: [
+        `
+            .progress-capsule {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 5px;
+                background: rgba(255, 255, 255, 0.2);
+                overflow: hidden;
+
+                &__fill {
+                    height: 100%;
+                    background: linear-gradient(
+                        90deg,
+                        #e50914 0%,
+                        #ff4d4d 100%
+                    );
+                    transition: width 0.3s ease-out;
+                    border-radius: 0 2px 2px 0;
+                }
+
+                &--watched {
+                    .progress-capsule__fill {
+                        background: linear-gradient(
+                            90deg,
+                            #46d369 0%,
+                            #2ecc71 100%
+                        );
+                    }
+                }
+            }
+        `,
+    ],
+})
+export class ProgressCapsuleComponent {
+    readonly progress = input.required<number>();
+    readonly isWatched = computed(() => this.progress() >= 90);
+}
diff --git a/libs/ui/components/src/lib/resizable/resizable.directive.ts b/libs/ui/components/src/lib/resizable/resizable.directive.ts
new file mode 100644
index 0000000..13003dc
--- /dev/null
+++ b/libs/ui/components/src/lib/resizable/resizable.directive.ts
@@ -0,0 +1,341 @@
+import {
+    Directive,
+    ElementRef,
+    Renderer2,
+    inject,
+    input,
+    output,
+    OnInit,
+    OnDestroy,
+    effect,
+    signal,
+    AfterViewInit,
+} from '@angular/core';
+
+const SHARED_SIDEBAR_WIDTH_KEY = 'sidebar-width';
+const SIDEBAR_WIDTH_KEY_ALIASES = new Set([
+    SHARED_SIDEBAR_WIDTH_KEY,
+    'downloads-sidebar-width',
+    'workspace-sources-panel-width',
+    'workspace-context-panel-width',
+    'workspace-settings-panel-width',
+    'workspace-favorites-panel-width',
+    'iptvnator_video_sidebar_width',
+]);
+
+/**
+ * ResizableDirective - Makes an element horizontally resizable by dragging its edge.
+ *
+ * Usage:
+ * ```html
+ * <div appResizable [minWidth]="200" [maxWidth]="600" [storageKey]="'sidebar-width'">
+ *   Content here
+ * </div>
+ * ```
+ *
+ * Features:
+ * - Smooth drag handle with visual feedback
+ * - Persists width to localStorage
+ * - Respects min/max width constraints
+ * - Emits width changes for reactive updates
+ */
+@Directive({
+    selector: '[appResizable]',
+    standalone: true,
+})
+export class ResizableDirective implements OnInit, AfterViewInit, OnDestroy {
+    /** Minimum width in pixels */
+    readonly minWidth = input<number>(200);
+
+    /** Maximum width in pixels */
+    readonly maxWidth = input<number>(600);
+
+    /** LocalStorage key for persisting width. Defaults to shared sidebar key when omitted. */
+    readonly storageKey = input<string>('');
+
+    /** Default width to use when no stored value exists */
+    readonly defaultWidth = input<number>(400);
+
+    /** Position of the resize handle: 'right' or 'left' */
+    readonly handlePosition = input<'right' | 'left'>('right');
+
+    /** Emits when width changes during resize */
+    readonly widthChange = output<number>();
+
+    /** Emits when resize starts */
+    readonly resizeStart = output<void>();
+
+    /** Emits when resize ends */
+    readonly resizeEnd = output<number>();
+
+    private handleElement: HTMLElement | null = null;
+    private isResizing = signal(false);
+    private startX = 0;
+    private startWidth = 0;
+    private currentWidth = signal(0);
+
+    // Event listener references for cleanup
+    private boundMouseMove: ((e: MouseEvent) => void) | null = null;
+    private boundMouseUp: ((e: MouseEvent) => void) | null = null;
+    private boundTouchMove: ((e: TouchEvent) => void) | null = null;
+    private boundTouchEnd: ((e: TouchEvent) => void) | null = null;
+    private readonly el = inject(ElementRef<HTMLElement>);
+    private readonly renderer = inject(Renderer2);
+
+    constructor() {
+        // Apply resizing class when dragging
+        effect(() => {
+            if (this.isResizing()) {
+                this.renderer.addClass(document.body, 'resizing-active');
+                this.renderer.addClass(this.el.nativeElement, 'is-resizing');
+            } else {
+                this.renderer.removeClass(document.body, 'resizing-active');
+                this.renderer.removeClass(this.el.nativeElement, 'is-resizing');
+            }
+        });
+    }
+
+    ngOnInit(): void {
+        // Load persisted width FIRST to avoid flash of default width
+        this.loadPersistedWidth();
+        this.setupStyles();
+    }
+
+    ngAfterViewInit(): void {
+        this.createResizeHandle();
+    }
+
+    ngOnDestroy(): void {
+        this.removeGlobalListeners();
+        if (this.handleElement) {
+            this.handleElement.remove();
+        }
+    }
+
+    private setupStyles(): void {
+        const el = this.el.nativeElement;
+
+        // Ensure the element has position relative for handle positioning
+        const computedStyle = window.getComputedStyle(el);
+        if (computedStyle.position === 'static') {
+            this.renderer.setStyle(el, 'position', 'relative');
+        }
+
+        // Add transition for smooth width changes (only when not dragging)
+        this.renderer.addClass(el, 'resizable-element');
+    }
+
+    private createResizeHandle(): void {
+        const handle = this.renderer.createElement('div');
+        this.handleElement = handle;
+
+        // Set up handle classes based on position
+        this.renderer.addClass(handle, 'resize-handle');
+        this.renderer.addClass(
+            handle,
+            `resize-handle--${this.handlePosition()}`
+        );
+
+        // Create inner visual elements for the handle
+        const handleLine = this.renderer.createElement('div');
+        this.renderer.addClass(handleLine, 'resize-handle__line');
+        this.renderer.appendChild(handle, handleLine);
+
+        // Create grip dots
+        const gripDots = this.renderer.createElement('div');
+        this.renderer.addClass(gripDots, 'resize-handle__grip');
+        for (let i = 0; i < 3; i++) {
+            const dot = this.renderer.createElement('span');
+            this.renderer.appendChild(gripDots, dot);
+        }
+        this.renderer.appendChild(handle, gripDots);
+
+        // Mouse events
+        this.renderer.listen(handle, 'mousedown', (e: MouseEvent) =>
+            this.onMouseDown(e)
+        );
+
+        // Touch events for mobile support
+        this.renderer.listen(handle, 'touchstart', (e: TouchEvent) =>
+            this.onTouchStart(e)
+        );
+
+        // Append handle to element
+        this.renderer.appendChild(this.el.nativeElement, handle);
+    }
+
+    private loadPersistedWidth(): void {
+        const { key, legacyKeys } = this.resolveStorageKey();
+        let widthToApply = this.defaultWidth();
+
+        if (key) {
+            let stored = localStorage.getItem(key);
+            let sourceLegacyKey: string | null = null;
+
+            if (!stored) {
+                for (const legacyKey of legacyKeys) {
+                    const legacyValue = localStorage.getItem(legacyKey);
+                    if (legacyValue) {
+                        stored = legacyValue;
+                        sourceLegacyKey = legacyKey;
+                        break;
+                    }
+                }
+            }
+
+            if (stored) {
+                const width = parseInt(stored, 10);
+                if (!isNaN(width)) {
+                    widthToApply = this.clampWidth(width);
+                    localStorage.setItem(key, widthToApply.toString());
+                    if (sourceLegacyKey && sourceLegacyKey !== key) {
+                        localStorage.removeItem(sourceLegacyKey);
+                    }
+                }
+            }
+        }
+
+        // Apply width immediately without transition to avoid flash
+        this.setWidthImmediate(widthToApply);
+    }
+
+    /** Set width immediately without CSS transition */
+    private setWidthImmediate(width: number): void {
+        this.currentWidth.set(width);
+        // Temporarily disable transition for immediate application
+        this.renderer.setStyle(this.el.nativeElement, 'transition', 'none');
+        this.renderer.setStyle(this.el.nativeElement, 'width', `${width}px`);
+
+        // Re-enable transition after a frame
+        requestAnimationFrame(() => {
+            this.renderer.removeStyle(this.el.nativeElement, 'transition');
+        });
+    }
+
+    private onMouseDown(e: MouseEvent): void {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.startResize(e.clientX);
+
+        this.boundMouseMove = (event: MouseEvent) => this.onMouseMove(event);
+        this.boundMouseUp = () => this.onMouseUp();
+
+        document.addEventListener('mousemove', this.boundMouseMove);
+        document.addEventListener('mouseup', this.boundMouseUp);
+    }
+
+    private onTouchStart(e: TouchEvent): void {
+        if (e.touches.length !== 1) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.startResize(e.touches[0].clientX);
+
+        this.boundTouchMove = (event: TouchEvent) => this.onTouchMove(event);
+        this.boundTouchEnd = () => this.onTouchEnd();
+
+        document.addEventListener('touchmove', this.boundTouchMove, {
+            passive: false,
+        });
+        document.addEventListener('touchend', this.boundTouchEnd);
+    }
+
+    private startResize(clientX: number): void {
+        this.isResizing.set(true);
+        this.startX = clientX;
+        this.startWidth = this.el.nativeElement.offsetWidth;
+        this.resizeStart.emit();
+    }
+
+    private onMouseMove(e: MouseEvent): void {
+        if (!this.isResizing()) return;
+        this.resize(e.clientX);
+    }
+
+    private onTouchMove(e: TouchEvent): void {
+        if (!this.isResizing() || e.touches.length !== 1) return;
+        e.preventDefault();
+        this.resize(e.touches[0].clientX);
+    }
+
+    private resize(clientX: number): void {
+        const delta =
+            this.handlePosition() === 'right'
+                ? clientX - this.startX
+                : this.startX - clientX;
+
+        const newWidth = this.clampWidth(this.startWidth + delta);
+        this.setWidth(newWidth);
+        this.widthChange.emit(newWidth);
+    }
+
+    private onMouseUp(): void {
+        this.endResize();
+    }
+
+    private onTouchEnd(): void {
+        this.endResize();
+    }
+
+    private endResize(): void {
+        if (!this.isResizing()) return;
+
+        this.isResizing.set(false);
+        this.removeGlobalListeners();
+        this.persistWidth();
+        this.resizeEnd.emit(this.currentWidth());
+    }
+
+    private removeGlobalListeners(): void {
+        if (this.boundMouseMove) {
+            document.removeEventListener('mousemove', this.boundMouseMove);
+            this.boundMouseMove = null;
+        }
+        if (this.boundMouseUp) {
+            document.removeEventListener('mouseup', this.boundMouseUp);
+            this.boundMouseUp = null;
+        }
+        if (this.boundTouchMove) {
+            document.removeEventListener('touchmove', this.boundTouchMove);
+            this.boundTouchMove = null;
+        }
+        if (this.boundTouchEnd) {
+            document.removeEventListener('touchend', this.boundTouchEnd);
+            this.boundTouchEnd = null;
+        }
+    }
+
+    private clampWidth(width: number): number {
+        return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
+    }
+
+    private setWidth(width: number): void {
+        this.currentWidth.set(width);
+        this.renderer.setStyle(this.el.nativeElement, 'width', `${width}px`);
+    }
+
+    private persistWidth(): void {
+        const { key } = this.resolveStorageKey();
+        if (key) {
+            localStorage.setItem(key, this.currentWidth().toString());
+        }
+    }
+
+    private resolveStorageKey(): { key: string; legacyKeys: string[] } {
+        const rawKey = this.storageKey().trim();
+        if (!rawKey) {
+            return { key: SHARED_SIDEBAR_WIDTH_KEY, legacyKeys: [] };
+        }
+
+        if (SIDEBAR_WIDTH_KEY_ALIASES.has(rawKey)) {
+            return {
+                key: SHARED_SIDEBAR_WIDTH_KEY,
+                legacyKeys: rawKey === SHARED_SIDEBAR_WIDTH_KEY ? [] : [rawKey],
+            };
+        }
+
+        return { key: rawKey, legacyKeys: [] };
+    }
+}
diff --git a/libs/ui/components/src/lib/resizable/resizable.scss b/libs/ui/components/src/lib/resizable/resizable.scss
new file mode 100644
index 0000000..8c39ee0
--- /dev/null
+++ b/libs/ui/components/src/lib/resizable/resizable.scss
@@ -0,0 +1,179 @@
+/**
+ * Resizable Directive Styles
+ *
+ * A refined, subtle resize handle that provides clear affordance
+ * without being visually intrusive. Uses a vertical grip pattern
+ * that becomes more prominent on hover/active states.
+ */
+
+// Prevent text selection during resize
+body.resizing-active {
+    user-select: none !important;
+    cursor: col-resize !important;
+
+    * {
+        cursor: col-resize !important;
+    }
+}
+
+// Base element styles
+.resizable-element {
+    // Smooth transition when not actively resizing
+    &:not(.is-resizing) {
+        transition: width 0.15s ease-out;
+    }
+
+    &.is-resizing {
+        transition: none;
+    }
+}
+
+// Resize handle base styles
+.resize-handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 12px;
+    z-index: 100;
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // Visual feedback on hover/active
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background: transparent;
+        transition: background-color 0.2s ease;
+        border-radius: 2px;
+    }
+
+    &:hover::before,
+    &:active::before {
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    // Position variants
+    &--right {
+        right: -6px;
+
+        &::before {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    &--left {
+        left: -6px;
+
+        &::before {
+            right: 50%;
+            transform: translateX(50%);
+        }
+    }
+
+    // The main visible line
+    &__line {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        transition: all 0.2s ease;
+    }
+
+    &:hover &__line {
+        width: 2px;
+        background: rgba(255, 255, 255, 0.25);
+        box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
+    }
+
+    &:active &__line {
+        width: 2px;
+        background: var(--mdc-theme-primary, #6366f1);
+        box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
+    }
+
+    // Grip dots indicator
+    &__grip {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 1;
+
+        span {
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.4);
+            transition: all 0.15s ease;
+        }
+    }
+
+    &:hover &__grip {
+        opacity: 1;
+
+        span {
+            background: rgba(255, 255, 255, 0.6);
+        }
+    }
+
+    &:active &__grip {
+        opacity: 1;
+
+        span {
+            background: var(--mdc-theme-primary, #6366f1);
+            transform: scale(1.2);
+        }
+    }
+}
+
+// Light theme adjustments (if needed)
+.light-theme {
+    .resize-handle {
+        &::before {
+            background: transparent;
+        }
+
+        &:hover::before,
+        &:active::before {
+            background: rgba(0, 0, 0, 0.04);
+        }
+
+        &:active::before {
+            background: rgba(0, 0, 0, 0.08);
+        }
+
+        &__line {
+            background: rgba(0, 0, 0, 0.12);
+        }
+
+        &:hover &__line {
+            background: rgba(0, 0, 0, 0.25);
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
+        }
+
+        &:active &__line {
+            background: var(--mdc-theme-primary, #6366f1);
+            box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
+        }
+
+        &__grip {
+            span {
+                background: rgba(0, 0, 0, 0.3);
+            }
+        }
+
+        &:hover &__grip {
+            span {
+                background: rgba(0, 0, 0, 0.5);
+            }
+        }
+    }
+}
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.html b/libs/ui/components/src/lib/season-container/season-container.component.html
new file mode 100644
index 0000000..e93d8f2
--- /dev/null
+++ b/libs/ui/components/src/lib/season-container/season-container.component.html
@@ -0,0 +1,344 @@
+<section class="seasons-section">
+    <div class="section-header">
+        <div class="section-header__left">
+            <h3 class="section-title">Seasons and Episodes</h3>
+            @if (selectedSeason) {
+                <button class="back-btn" (click)="selectedSeason = undefined">
+                    <mat-icon>arrow_back</mat-icon>
+                    <span>Back to seasons</span>
+                </button>
+            }
+        </div>
+        @if (selectedSeason && !showSeasonEmptyState()) {
+            <div class="view-toggle">
+                <mat-button-toggle-group
+                    [value]="viewMode()"
+                    (change)="setViewMode($event.value)"
+                    hideSingleSelectionIndicator
+                >
+                    <mat-button-toggle value="grid" [matTooltip]="'Grid view'">
+                        <mat-icon>grid_view</mat-icon>
+                    </mat-button-toggle>
+                    <mat-button-toggle value="list" [matTooltip]="'List view'">
+                        <mat-icon>view_list</mat-icon>
+                    </mat-button-toggle>
+                </mat-button-toggle-group>
+            </div>
+        }
+    </div>
+
+    <div class="content-container">
+        @if (isLoading()) {
+            <div class="loading-container">
+                <mat-spinner diameter="40"></mat-spinner>
+            </div>
+        } @else if (showSeriesEmptyState()) {
+            <div class="empty-state-panel" role="status">
+                <div class="empty-state-panel__icon" aria-hidden="true">
+                    <mat-icon>video_library</mat-icon>
+                </div>
+                <h4 class="empty-state-panel__title">No episodes available</h4>
+                <p class="empty-state-panel__message">
+                    This series is listed by your provider, but no seasons or
+                    episodes are available to play.
+                </p>
+            </div>
+        } @else if (!selectedSeason) {
+            <!-- Seasons Grid -->
+            <div class="seasons-grid">
+                @for (
+                    season of seasons() | keyvalue: compareSeasons;
+                    track $index
+                ) {
+                    <button
+                        class="season-card"
+                        (click)="selectSeason(season.key)"
+                        [class.season-card--has-episodes]="season.value?.length"
+                    >
+                        <div class="season-card__number">{{ season.key }}</div>
+                        <div class="season-card__label">Season</div>
+                        @if (season.value?.length) {
+                            <div class="season-card__episodes">
+                                {{ season.value.length }}
+                                {{
+                                    season.value.length === 1
+                                        ? 'Episode'
+                                        : 'Episodes'
+                                }}
+                            </div>
+                        }
+                        <div class="season-card__arrow">
+                            <mat-icon>chevron_right</mat-icon>
+                        </div>
+                    </button>
+                }
+            </div>
+        } @else if (showSeasonEmptyState()) {
+            <div class="empty-state-panel empty-state-panel--season" role="status">
+                <div class="empty-state-panel__icon" aria-hidden="true">
+                    <mat-icon>video_library</mat-icon>
+                </div>
+                <h4 class="empty-state-panel__title">This season is empty</h4>
+                <p class="empty-state-panel__message">
+                    This season is listed by your provider, but no playable
+                    episodes are available.
+                </p>
+            </div>
+        } @else {
+            @if (viewMode() === 'grid') {
+                <!-- Episodes Grid View -->
+                <div class="episodes-grid">
+                    @for (episode of seasons()[selectedSeason]; track $index) {
+                        @let episodeInfo = getEpisodeInfo(episode);
+                        <article
+                            class="episode-card"
+                            (click)="selectEpisode(episode)"
+                            [class.episode-card--watched]="
+                                isEpisodeWatched(episode)
+                            "
+                            [class.episode-card--in-progress]="
+                                isEpisodeInProgress(episode)
+                            "
+                            [class.episode-card--launching]="
+                                isEpisodeLaunching(episode)
+                            "
+                            [class.episode-card--active-external]="
+                                isEpisodeActiveExternal(episode)
+                            "
+                        >
+                            <div class="episode-card__thumbnail">
+                                @if (episodeInfo?.movie_image) {
+                                    <img
+                                        [src]="episodeInfo.movie_image"
+                                        (error)="
+                                            $event.target.src =
+                                                './assets/images/default-episode.png'
+                                        "
+                                        alt="Episode thumbnail"
+                                        loading="lazy"
+                                    />
+                                } @else {
+                                    <div class="episode-card__placeholder">
+                                        <mat-icon>play_circle_outline</mat-icon>
+                                    </div>
+                                }
+                                @if (getEpisodeProgress(episode) > 0) {
+                                    <app-progress-capsule
+                                        [progress]="getEpisodeProgress(episode)"
+                                    />
+                                    @if (getEpisodePositionText(episode); as time) {
+                                        <div class="episode-card__position-text">
+                                            {{ time }}
+                                        </div>
+                                    }
+                                }
+                                <app-watched-badge
+                                    [isWatched]="isEpisodeWatched(episode)"
+                                />
+                                <div class="episode-card__actions">
+                                    @if (isElectron()) {
+                                        @if (isEpisodeDownloaded(episode)) {
+                                            <button
+                                                mat-icon-button
+                                                class="download-btn download-btn--completed"
+                                                (click)="playFromLocal($event, episode)"
+                                                [matTooltip]="'DOWNLOADS.PLAY_LOCAL' | translate"
+                                            >
+                                                <mat-icon>play_circle</mat-icon>
+                                            </button>
+                                        } @else if (isEpisodeDownloading(episode)) {
+                                            <button
+                                                mat-icon-button
+                                                class="download-btn download-btn--downloading"
+                                                disabled
+                                                [matTooltip]="'DOWNLOADS.STATUS.DOWNLOADING' | translate"
+                                            >
+                                                <mat-icon>downloading</mat-icon>
+                                            </button>
+                                        } @else {
+                                            <button
+                                                mat-icon-button
+                                                class="download-btn"
+                                                (click)="downloadEpisode($event, episode)"
+                                                [matTooltip]="'DOWNLOADS.DOWNLOAD' | translate"
+                                            >
+                                                <mat-icon>download</mat-icon>
+                                            </button>
+                                        }
+                                    }
+                                    <button
+                                        mat-icon-button
+                                        class="toggle-watched-btn"
+                                        (click)="toggleWatched($event, episode)"
+                                        [matTooltip]="
+                                            (isEpisodeWatched(episode)
+                                                ? 'XTREAM.MARK_UNWATCHED'
+                                                : 'XTREAM.MARK_WATCHED') | translate
+                                        "
+                                    >
+                                        <mat-icon>{{
+                                            isEpisodeWatched(episode)
+                                                ? 'check_circle'
+                                                : 'radio_button_unchecked'
+                                        }}</mat-icon>
+                                    </button>
+                                </div>
+                                <div class="episode-card__overlay">
+                                    <div class="episode-card__play">
+                                        @if (isEpisodeLaunching(episode)) {
+                                            <mat-spinner diameter="26"></mat-spinner>
+                                        } @else {
+                                            <mat-icon>{{
+                                                isEpisodeActiveExternal(episode)
+                                                    ? 'equalizer'
+                                                    : 'play_arrow'
+                                            }}</mat-icon>
+                                        }
+                                    </div>
+                                </div>
+                                <div class="episode-card__number">
+                                    {{ episode.episode_num }}
+                                </div>
+                            </div>
+                            <div class="episode-card__info">
+                                <h4 class="episode-card__title">
+                                    {{ episode.episode_num }}. {{ episode.title }}
+                                </h4>
+                                @if (episodeInfo?.plot) {
+                                    <p class="episode-card__plot">
+                                        {{ episodeInfo.plot }}
+                                    </p>
+                                }
+                                @if (episodeInfo?.duration) {
+                                    <span class="episode-card__duration">
+                                        {{ episodeInfo.duration }}
+                                    </span>
+                                }
+                            </div>
+                        </article>
+                    }
+                </div>
+            } @else {
+                <!-- Episodes List View -->
+                <div class="episodes-list">
+                    @for (episode of seasons()[selectedSeason]; track $index) {
+                        @let episodeInfo = getEpisodeInfo(episode);
+                        <article
+                            class="episode-list-item"
+                            (click)="selectEpisode(episode)"
+                            [class.episode-list-item--watched]="isEpisodeWatched(episode)"
+                            [class.episode-list-item--in-progress]="isEpisodeInProgress(episode)"
+                            [class.episode-list-item--launching]="isEpisodeLaunching(episode)"
+                            [class.episode-list-item--active-external]="isEpisodeActiveExternal(episode)"
+                        >
+                            <div class="episode-list-item__number">
+                                {{ episode.episode_num }}
+                            </div>
+                            <div class="episode-list-item__content">
+                                <div class="episode-list-item__header">
+                                    <h4 class="episode-list-item__title">
+                                        {{ episode.title }}
+                                        @if (isEpisodeWatched(episode)) {
+                                            <mat-icon class="watched-icon">check_circle</mat-icon>
+                                        }
+                                    </h4>
+                                    <div class="episode-list-item__meta">
+                                        @if (episodeInfo?.duration) {
+                                            <span class="episode-list-item__duration">
+                                                {{ episodeInfo.duration }}
+                                            </span>
+                                        }
+                                        @if (getEpisodePositionText(episode); as time) {
+                                            <span class="episode-list-item__progress-text">
+                                                {{ time }}
+                                            </span>
+                                        }
+                                    </div>
+                                </div>
+                                @if (episodeInfo?.plot) {
+                                    <p class="episode-list-item__description">
+                                        {{ episodeInfo.plot }}
+                                    </p>
+                                }
+                                @if (getEpisodeProgress(episode) > 0) {
+                                    <div class="episode-list-item__progress-bar">
+                                        <div
+                                            class="episode-list-item__progress-fill"
+                                            [style.width.%]="getEpisodeProgress(episode)"
+                                        ></div>
+                                    </div>
+                                }
+                            </div>
+                            <div class="episode-list-item__actions">
+                                <button
+                                    mat-icon-button
+                                    class="action-btn play-btn"
+                                    (click)="selectEpisode(episode); $event.stopPropagation()"
+                                    [matTooltip]="'Play'"
+                                    [disabled]="isEpisodeLaunching(episode)"
+                                >
+                                    @if (isEpisodeLaunching(episode)) {
+                                        <mat-spinner diameter="18"></mat-spinner>
+                                    } @else {
+                                        <mat-icon>{{
+                                            isEpisodeActiveExternal(episode)
+                                                ? 'equalizer'
+                                                : 'play_arrow'
+                                        }}</mat-icon>
+                                    }
+                                </button>
+                                @if (isElectron()) {
+                                    @if (isEpisodeDownloaded(episode)) {
+                                        <button
+                                            mat-icon-button
+                                            class="action-btn action-btn--success"
+                                            (click)="playFromLocal($event, episode)"
+                                            [matTooltip]="'DOWNLOADS.PLAY_LOCAL' | translate"
+                                        >
+                                            <mat-icon>folder_open</mat-icon>
+                                        </button>
+                                    } @else if (isEpisodeDownloading(episode)) {
+                                        <button
+                                            mat-icon-button
+                                            class="action-btn"
+                                            disabled
+                                            [matTooltip]="'DOWNLOADS.STATUS.DOWNLOADING' | translate"
+                                        >
+                                            <mat-icon>downloading</mat-icon>
+                                        </button>
+                                    } @else {
+                                        <button
+                                            mat-icon-button
+                                            class="action-btn"
+                                            (click)="downloadEpisode($event, episode)"
+                                            [matTooltip]="'DOWNLOADS.DOWNLOAD' | translate"
+                                        >
+                                            <mat-icon>download</mat-icon>
+                                        </button>
+                                    }
+                                }
+                                <button
+                                    mat-icon-button
+                                    class="action-btn"
+                                    (click)="toggleWatched($event, episode)"
+                                    [matTooltip]="
+                                        (isEpisodeWatched(episode)
+                                            ? 'XTREAM.MARK_UNWATCHED'
+                                            : 'XTREAM.MARK_WATCHED') | translate
+                                    "
+                                    [class.action-btn--success]="isEpisodeWatched(episode)"
+                                >
+                                    <mat-icon>{{
+                                        isEpisodeWatched(episode)
+                                            ? 'check_circle'
+                                            : 'radio_button_unchecked'
+                                    }}</mat-icon>
+                                </button>
+                            </div>
+                        </article>
+                    }
+                </div>
+            }
+        }
+    </div>
+</section>
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.scss b/libs/ui/components/src/lib/season-container/season-container.component.scss
new file mode 100644
index 0000000..ae3cf44
--- /dev/null
+++ b/libs/ui/components/src/lib/season-container/season-container.component.scss
@@ -0,0 +1,766 @@
+.seasons-section {
+    width: 100%;
+    margin-top: 24px;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    min-height: 32px;
+    gap: 16px;
+
+    &__left {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex: 1;
+    }
+
+    .section-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0;
+        color: var(--text-primary);
+        letter-spacing: -0.01em;
+    }
+
+    .back-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: var(--text-secondary);
+        font-size: 0.8125rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        padding: 6px 12px;
+        border-radius: 4px;
+
+        &:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    .view-toggle {
+        mat-button-toggle-group {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 6px;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.03);
+
+            ::ng-deep {
+                .mat-button-toggle {
+                    background: transparent;
+
+                    .mat-button-toggle-button {
+                        padding: 0 8px;
+                        height: 32px;
+                    }
+
+                    mat-icon {
+                        font-size: 18px;
+                        width: 18px;
+                        height: 18px;
+                        color: var(--text-secondary);
+                    }
+
+                    &.mat-button-toggle-checked {
+                        background: rgba(255, 255, 255, 0.1);
+
+                        mat-icon {
+                            color: var(--accent-color);
+                        }
+                    }
+
+                    &:hover:not(.mat-button-toggle-checked) {
+                        background: rgba(255, 255, 255, 0.05);
+                    }
+                }
+
+                .mat-button-toggle-appearance-standard {
+                    .mat-button-toggle-label-content {
+                        line-height: 32px;
+                        padding: 0;
+                    }
+                }
+
+                .mat-button-toggle + .mat-button-toggle {
+                    border-left: 1px solid rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
+    }
+}
+
+.loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30px 0;
+    width: 100%;
+}
+
+.empty-state-panel {
+    display: grid;
+    justify-items: center;
+    gap: 14px;
+    width: min(100%, 520px);
+    margin: 0 auto;
+    padding: 32px 28px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
+        radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 60%);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 18px 40px rgba(0, 0, 0, 0.22);
+    text-align: center;
+
+    &__icon {
+        display: grid;
+        place-items: center;
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        color: rgba(255, 255, 255, 0.52);
+
+        mat-icon {
+            font-size: 30px;
+            width: 30px;
+            height: 30px;
+        }
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--text-primary);
+        font-size: 1.125rem;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+    }
+
+    &__message {
+        max-width: 40ch;
+        margin: 0;
+        color: var(--text-secondary);
+        font-size: 0.9375rem;
+        line-height: 1.6;
+    }
+
+    &--season {
+        border-color: rgba(255, 255, 255, 0.1);
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04)),
+            radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 65%);
+    }
+}
+
+// Grid Layouts
+.seasons-grid,
+.episodes-grid {
+    display: grid;
+    gap: 12px;
+    width: 100%;
+}
+
+.seasons-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+.episodes-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+// Season Card
+.season-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-family: inherit;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.1);
+        transform: translateY(-2px);
+        border-color: rgba(255, 255, 255, 0.15);
+
+        .season-card__arrow {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    &__progress-ring {
+        position: relative;
+        width: 42px;
+        height: 42px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+        }
+
+        .progress-ring__bg {
+            fill: none;
+            stroke: rgba(255, 255, 255, 0.1);
+            stroke-width: 3;
+        }
+
+        .progress-ring__fill {
+            fill: none;
+            stroke: var(--accent-color);
+            stroke-width: 3;
+            stroke-linecap: round;
+            transition: stroke-dasharray 0.5s ease-out;
+        }
+
+        .season-card__number {
+            position: absolute;
+            font-size: 1rem !important;
+            color: var(--text-primary);
+            font-weight: 700;
+            opacity: 1;
+            margin: 0;
+            padding: 0;
+            background: transparent;
+        }
+    }
+
+    &__info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    &__label {
+        font-size: 0.9375rem !important;
+        font-weight: 600;
+        color: var(--text-primary);
+    }
+
+    &__progress-text {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+    }
+
+    &__episodes {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+    }
+
+    &__arrow {
+        opacity: 0;
+        transform: translateX(-5px);
+        transition: all 0.2s ease;
+        color: var(--text-muted);
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    &--has-episodes {
+        /* background: rgba(var(--accent-color-rgb), 0.1);
+        border-color: rgba(var(--accent-color-rgb), 0.3); */
+
+        .season-card__number {
+            color: var(--text-primary);
+        }
+
+        /* .season-card__label {
+            color: var(--accent-color);
+        } */
+    }
+}
+
+// Episode Card
+.episode-card {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    position: relative;
+
+    // In-progress state
+    &--in-progress {
+        border-color: color-mix(in srgb, var(--mat-sys-primary) 60%, transparent);
+        background: color-mix(in srgb, var(--mat-sys-primary) 5%, transparent);
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(
+                135deg,
+                color-mix(in srgb, var(--mat-sys-primary) 10%, transparent) 0%,
+                transparent 50%
+            );
+            pointer-events: none;
+            z-index: 1;
+        }
+    }
+
+    &--launching,
+    &--active-external {
+        border-color: color-mix(in srgb, var(--mat-sys-tertiary) 56%, transparent);
+        box-shadow: 0 0 0 1px color-mix(in srgb, var(--mat-sys-tertiary) 28%, transparent);
+    }
+
+    &--launching {
+        .episode-card__overlay {
+            opacity: 1;
+            background: rgba(0, 0, 0, 0.56);
+        }
+    }
+
+    &--active-external {
+        background: color-mix(in srgb, var(--mat-sys-tertiary-container) 18%, transparent);
+    }
+
+    // Watched state
+    &--watched {
+        opacity: 0.7;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        .episode-card__title::after {
+            content: ' ✓';
+            color: var(--mat-sys-tertiary);
+            font-weight: bold;
+            margin-left: 4px;
+        }
+    }
+
+    &:hover {
+        transform: translateY(-2px);
+        background: rgba(255, 255, 255, 0.07);
+        border-color: rgba(255, 255, 255, 0.1);
+
+        .episode-card__overlay {
+            opacity: 1;
+        }
+
+        .episode-card__play {
+            transform: scale(1);
+        }
+    }
+
+    &__thumbnail {
+        position: relative;
+        aspect-ratio: 16 / 9;
+        background: #000;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__position-text {
+        position: absolute;
+        bottom: 8px;
+        left: 8px;
+        background: rgba(0, 0, 0, 0.85);
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 0.7rem;
+        font-weight: 600;
+        color: white;
+        z-index: 2;
+    }
+
+    &__placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+        color: var(--text-muted);
+
+        mat-icon {
+            font-size: 32px;
+            width: 32px;
+            height: 32px;
+            opacity: 0.3;
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 1;
+    }
+
+    &__actions {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        z-index: 2;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        display: flex;
+        gap: 4px;
+
+        .download-btn,
+        .toggle-watched-btn {
+            color: rgba(255, 255, 255, 0.7);
+            background: rgba(0, 0, 0, 0.5);
+            width: 32px;
+            height: 32px;
+            padding: 4px;
+
+            &:hover {
+                color: white;
+                background: rgba(0, 0, 0, 0.8);
+            }
+
+            mat-icon {
+                font-size: 20px;
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .download-btn:hover {
+            background: rgba(25, 118, 210, 0.8);
+        }
+
+        .download-btn--completed {
+            color: var(--mat-sys-tertiary) !important;
+
+            &:hover {
+                background: color-mix(in srgb, var(--mat-sys-tertiary) 80%, transparent);
+            }
+        }
+
+        .download-btn--downloading {
+            color: rgba(255, 255, 255, 0.5) !important;
+            cursor: not-allowed;
+        }
+    }
+
+    &:hover {
+        .episode-card__actions {
+            opacity: 1;
+        }
+    }
+
+    &__play {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: var(--accent-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        transform: scale(0.8);
+        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+        mat-icon {
+            font-size: 24px;
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    &__number {
+        position: absolute;
+        bottom: 6px;
+        right: 6px;
+        background: rgba(0, 0, 0, 0.85);
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 0.7rem;
+        font-weight: 600;
+        color: white;
+    }
+
+    &__info {
+        padding: 12px;
+    }
+
+    &__title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        margin: 0 0 4px 0;
+        color: var(--text-primary);
+        line-height: 1.4;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__plot {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        margin: 0 0 8px 0;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    &__duration {
+        font-size: 0.6875rem;
+        color: var(--text-muted);
+        display: inline-block;
+        padding: 1px 6px;
+        background: rgba(255, 255, 255, 0.08);
+        border-radius: 10px;
+    }
+}
+
+// Episodes List View
+.episodes-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+}
+
+.episode-list-item {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.06);
+        border-color: rgba(255, 255, 255, 0.08);
+
+        .episode-list-item__actions {
+            opacity: 1;
+        }
+    }
+
+    &--watched {
+        opacity: 0.6;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &--in-progress {
+        border-color: color-mix(in srgb, var(--mat-sys-primary) 40%, transparent);
+        background: color-mix(in srgb, var(--mat-sys-primary) 5%, transparent);
+
+        &:hover {
+            border-color: color-mix(in srgb, var(--mat-sys-primary) 60%, transparent);
+            background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
+        }
+    }
+
+    &__number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 0.06);
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        flex-shrink: 0;
+    }
+
+    &__content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+    }
+
+    &__title {
+        margin: 0;
+        font-size: 0.9375rem;
+        font-weight: 500;
+        color: var(--text-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .watched-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            color: var(--mat-sys-tertiary);
+        }
+    }
+
+    &__meta {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+    }
+
+    &__duration {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        padding: 2px 8px;
+        background: rgba(255, 255, 255, 0.06);
+        border-radius: 10px;
+    }
+
+    &__progress-text {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--mat-sys-primary);
+        padding: 2px 8px;
+        background: color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);
+        border-radius: 10px;
+    }
+
+    &__description {
+        margin: 0;
+        font-size: 0.8125rem;
+        color: var(--text-secondary);
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    &__progress-bar {
+        height: 3px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 2px;
+        overflow: hidden;
+        margin-top: 4px;
+    }
+
+    &__progress-fill {
+        height: 100%;
+        background: var(--mat-sys-primary);
+        border-radius: 2px;
+        transition: width 0.3s ease;
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+
+        .action-btn {
+            width: 36px;
+            height: 36px;
+            color: var(--text-secondary);
+            transition: all 0.15s ease;
+
+            mat-icon {
+                font-size: 20px;
+                width: 20px;
+                height: 20px;
+            }
+
+            &:hover {
+                color: var(--text-primary);
+                background: rgba(255, 255, 255, 0.1);
+            }
+
+            &.play-btn {
+                color: var(--accent-color);
+
+                &:hover {
+                    background: rgba(var(--accent-color-rgb), 0.15);
+                }
+            }
+
+            &--success {
+                color: var(--mat-sys-tertiary);
+
+                &:hover {
+                    background: color-mix(in srgb, var(--mat-sys-tertiary) 15%, transparent);
+                }
+            }
+
+            &:disabled {
+                color: var(--text-muted);
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+        }
+    }
+
+    &--launching,
+    &--active-external {
+        border-color: color-mix(in srgb, var(--mat-sys-tertiary) 46%, transparent);
+        background: color-mix(in srgb, var(--mat-sys-tertiary-container) 12%, transparent);
+    }
+
+    // Always show actions on touch devices
+    @media (hover: none) {
+        .episode-list-item__actions {
+            opacity: 1;
+        }
+    }
+}
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.spec.ts b/libs/ui/components/src/lib/season-container/season-container.component.spec.ts
new file mode 100644
index 0000000..5f5e8d6
--- /dev/null
+++ b/libs/ui/components/src/lib/season-container/season-container.component.spec.ts
@@ -0,0 +1,162 @@
+import { signal } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { XtreamSerieEpisode } from 'shared-interfaces';
+import { DownloadsService } from 'services';
+import { SeasonContainerComponent } from './season-container.component';
+
+const downloadsServiceStub = {
+    isAvailable: signal(false),
+    downloads: () => [],
+    startDownload: async () => undefined,
+    isDownloaded: () => false,
+    isDownloading: () => false,
+    getDownloadedFilePath: () => '',
+    playDownload: async () => undefined,
+};
+
+function createEpisode(
+    overrides: Partial<XtreamSerieEpisode> = {}
+): XtreamSerieEpisode {
+    return {
+        id: '101',
+        episode_num: 1,
+        title: 'Pilot',
+        container_extension: 'mp4',
+        info: {
+            duration: '45 min',
+            plot: 'Pilot episode',
+            movie_image: 'https://example.com/poster.jpg',
+        },
+        custom_sid: '',
+        added: '',
+        season: 1,
+        direct_source: '',
+        ...overrides,
+    };
+}
+
+describe('SeasonContainerComponent', () => {
+    let fixture: ComponentFixture<SeasonContainerComponent>;
+    let component: SeasonContainerComponent;
+
+    const setRequiredInputs = (
+        seasons: Record<string, XtreamSerieEpisode[]>,
+        isLoading = false
+    ) => {
+        fixture.componentRef.setInput('seasons', seasons);
+        fixture.componentRef.setInput('seriesId', 1);
+        fixture.componentRef.setInput('playlistId', 'playlist-1');
+        fixture.componentRef.setInput('isLoading', isLoading);
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                NoopAnimationsModule,
+                SeasonContainerComponent,
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: DownloadsService,
+                    useValue: downloadsServiceStub,
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(SeasonContainerComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('renders the series-level placeholder when no seasons are available', () => {
+        setRequiredInputs({});
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.empty-state-panel')
+        ).not.toBeNull();
+        expect(fixture.nativeElement.textContent).toContain(
+            'No episodes available'
+        );
+        expect(fixture.nativeElement.textContent).toContain(
+            'This series is listed by your provider, but no seasons or episodes are available to play.'
+        );
+        expect(fixture.nativeElement.querySelector('.season-card')).toBeNull();
+    });
+
+    it('renders the loading state instead of the placeholder while seasons are loading', () => {
+        setRequiredInputs({}, true);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.loading-container mat-spinner')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('.empty-state-panel')
+        ).toBeNull();
+    });
+
+    it('renders the season-level placeholder when the selected season has no episodes', () => {
+        setRequiredInputs({ '1': [] });
+        fixture.detectChanges();
+
+        fixture.nativeElement.querySelector('.season-card').click();
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.textContent).toContain(
+            'This season is empty'
+        );
+        expect(fixture.nativeElement.textContent).toContain(
+            'This season is listed by your provider, but no playable episodes are available.'
+        );
+        expect(fixture.nativeElement.querySelector('.view-toggle')).toBeNull();
+    });
+
+    it('renders season cards and episode cards when episodes exist', () => {
+        const episode = createEpisode();
+
+        setRequiredInputs({
+            '1': [episode],
+            '2': [],
+        });
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelectorAll('.season-card').length
+        ).toBe(2);
+        expect(
+            fixture.nativeElement.querySelector('.empty-state-panel')
+        ).toBeNull();
+
+        fixture.nativeElement.querySelector('.season-card').click();
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelectorAll('.episode-card').length
+        ).toBe(1);
+        expect(
+            fixture.nativeElement.querySelector('.empty-state-panel')
+        ).toBeNull();
+    });
+
+    it('clears a stale selected season when the input seasons change', () => {
+        const episode = createEpisode();
+
+        setRequiredInputs({ '1': [episode] });
+        fixture.detectChanges();
+
+        fixture.nativeElement.querySelector('.season-card').click();
+        fixture.detectChanges();
+
+        fixture.componentRef.setInput('seasons', { '2': [episode] });
+        fixture.detectChanges();
+
+        expect(component.selectedSeason).toBeUndefined();
+        expect(
+            fixture.nativeElement.querySelector('.season-card__number')
+                ?.textContent
+        ).toContain('2');
+    });
+});
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.ts b/libs/ui/components/src/lib/season-container/season-container.component.ts
new file mode 100644
index 0000000..57eef87
--- /dev/null
+++ b/libs/ui/components/src/lib/season-container/season-container.component.ts
@@ -0,0 +1,444 @@
+import { KeyValuePipe } from '@angular/common';
+import {
+    Component,
+    DoCheck,
+    OnInit,
+    inject,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+    createLogger,
+    getPortalPlaybackProgressPercent,
+    isPortalPlaybackInProgress,
+    isPortalPlaybackWatched,
+} from '@iptvnator/portal/shared/util';
+import {
+    PlaybackPositionData,
+    XtreamSerieEpisode,
+    XtreamSerieEpisodeInfo,
+} from 'shared-interfaces';
+import { DownloadsService } from 'services';
+import { ProgressCapsuleComponent } from '../progress-capsule/progress-capsule.component';
+import { WatchedBadgeComponent } from '../watched-badge/watched-badge.component';
+
+type EpisodeViewMode = 'grid' | 'list';
+const EPISODE_VIEW_MODE_KEY = 'iptvnator_episode_view_mode';
+
+export interface SeasonContainerXtreamDownloadContext {
+    serverUrl?: string;
+    username?: string;
+    password?: string;
+}
+
+export interface SeasonContainerPlaybackToggleRequest {
+    contentXtreamId: number;
+    nextPosition: PlaybackPositionData | null;
+}
+
+function parseDuration(duration: string | number | undefined): number {
+    if (!duration) {
+        return 0;
+    }
+
+    if (typeof duration === 'number') {
+        return duration;
+    }
+
+    const parts = duration.split(':').map(Number);
+    if (parts.length === 3) {
+        return parts[0] * 3600 + parts[1] * 60 + parts[2];
+    }
+    if (parts.length === 2) {
+        return parts[0] * 60 + parts[1];
+    }
+
+    return Number(duration) || 0;
+}
+
+@Component({
+    selector: 'app-season-container',
+    templateUrl: './season-container.component.html',
+    styleUrls: ['./season-container.component.scss'],
+    imports: [
+        KeyValuePipe,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatIcon,
+        MatProgressSpinnerModule,
+        MatTooltipModule,
+        ProgressCapsuleComponent,
+        TranslateModule,
+        WatchedBadgeComponent,
+    ],
+})
+export class SeasonContainerComponent implements OnInit, DoCheck {
+    private readonly downloadsService = inject(DownloadsService);
+    private readonly logger = createLogger('SeasonContainer');
+    private previousSeasonKeysSignature = '';
+
+    readonly seasons = input.required<Record<string, XtreamSerieEpisode[]>>();
+    readonly seriesId = input.required<number>();
+    readonly playlistId = input.required<string>();
+    readonly seriesTitle = input<string>('');
+    readonly isLoading = input<boolean>(false);
+    readonly playbackPositions = input<Map<number, PlaybackPositionData>>(
+        new Map()
+    );
+    readonly xtreamDownloadContext =
+        input<SeasonContainerXtreamDownloadContext | null>(null);
+    readonly openingEpisodeId = input<number | null>(null);
+    readonly activeEpisodeId = input<number | null>(null);
+
+    readonly episodeClicked = output<XtreamSerieEpisode>();
+    readonly episodeDownloadRequested = output<XtreamSerieEpisode>();
+    readonly playbackToggleRequested =
+        output<SeasonContainerPlaybackToggleRequest>();
+    readonly seasonSelected = output<string>();
+    readonly isElectron = this.downloadsService.isAvailable;
+    readonly viewMode = signal<EpisodeViewMode>('grid');
+
+    selectedSeason: string | undefined;
+
+    ngOnInit() {
+        const savedMode = localStorage.getItem(
+            EPISODE_VIEW_MODE_KEY
+        ) as EpisodeViewMode;
+        if (savedMode === 'grid' || savedMode === 'list') {
+            this.viewMode.set(savedMode);
+        }
+        this.previousSeasonKeysSignature = this.getSeasonKeys().join('|');
+    }
+
+    ngDoCheck(): void {
+        this.syncSelectedSeason();
+    }
+
+    setViewMode(mode: EpisodeViewMode) {
+        this.viewMode.set(mode);
+        localStorage.setItem(EPISODE_VIEW_MODE_KEY, mode);
+    }
+
+    compareSeasons(a: { key: string }, b: { key: string }): number {
+        return Number(a.key) - Number(b.key);
+    }
+
+    hasSeasons(): boolean {
+        return this.getSeasonKeys().length > 0;
+    }
+
+    showSeriesEmptyState(): boolean {
+        return !this.selectedSeason && !this.hasSeasons();
+    }
+
+    showSeasonEmptyState(): boolean {
+        return Boolean(this.selectedSeason) && !this.selectedSeasonHasEpisodes();
+    }
+
+    selectSeason(seasonKey: string) {
+        this.selectedSeason = seasonKey;
+        this.seasonSelected.emit(seasonKey);
+    }
+
+    selectEpisode(episode: XtreamSerieEpisode) {
+        this.episodeClicked.emit(episode);
+    }
+
+    toggleWatched(event: Event, episode: XtreamSerieEpisode) {
+        event.stopPropagation();
+        if (!this.playlistId()) {
+            this.logger.warn('Cannot toggle watched: no playlist ID');
+            return;
+        }
+
+        const contentXtreamId = this.getEpisodeContentId(episode);
+        const currentPosition = this.getEpisodePosition(episode);
+
+        if (isPortalPlaybackWatched(currentPosition)) {
+            this.playbackToggleRequested.emit({
+                contentXtreamId,
+                nextPosition: null,
+            });
+            return;
+        }
+
+        const info = this.getEpisodeInfo(episode);
+        const duration =
+            info?.duration_secs || parseDuration(info?.duration) || 1;
+
+        this.playbackToggleRequested.emit({
+            contentXtreamId,
+            nextPosition: {
+                contentXtreamId,
+                contentType: 'episode',
+                seriesXtreamId: this.seriesId(),
+                seasonNumber: Number(episode.season || this.selectedSeason || 1),
+                episodeNumber: Number(episode.episode_num || 1),
+                positionSeconds: duration,
+                durationSeconds: duration,
+                playlistId: this.playlistId(),
+                updatedAt: new Date().toISOString(),
+            },
+        });
+    }
+
+    getEpisodeInfo(
+        episode: XtreamSerieEpisode
+    ): XtreamSerieEpisodeInfo | undefined {
+        if (Array.isArray(episode.info) || !episode.info) {
+            return undefined;
+        }
+        return episode.info;
+    }
+
+    isEpisodeWatched(episode: XtreamSerieEpisode): boolean {
+        return isPortalPlaybackWatched(this.getEpisodePosition(episode));
+    }
+
+    isEpisodeInProgress(episode: XtreamSerieEpisode): boolean {
+        return isPortalPlaybackInProgress(this.getEpisodePosition(episode));
+    }
+
+    isEpisodeLaunching(episode: XtreamSerieEpisode): boolean {
+        return this.openingEpisodeId() === this.getEpisodeContentId(episode);
+    }
+
+    isEpisodeActiveExternal(episode: XtreamSerieEpisode): boolean {
+        return this.activeEpisodeId() === this.getEpisodeContentId(episode);
+    }
+
+    getEpisodeProgress(episode: XtreamSerieEpisode): number {
+        return getPortalPlaybackProgressPercent(this.getEpisodePosition(episode));
+    }
+
+    getEpisodePositionText(episode: XtreamSerieEpisode): string | null {
+        if (this.isEpisodeWatched(episode)) {
+            return null;
+        }
+
+        const position = this.getEpisodePosition(episode);
+        if (!position || !position.positionSeconds) {
+            return null;
+        }
+
+        let seconds = position.positionSeconds;
+        let suffix = '';
+
+        if (position.durationSeconds && position.durationSeconds > 0) {
+            const remaining = Math.max(
+                0,
+                position.durationSeconds - position.positionSeconds
+            );
+
+            if (remaining <= 0) {
+                return null;
+            }
+
+            seconds = remaining;
+            suffix = ' left';
+        }
+
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        const formatted = [hours, minutes, secs]
+            .map((value) => String(value).padStart(2, '0'))
+            .filter((value, index) => (index === 0 ? value !== '00' : true))
+            .join(':');
+        return `${formatted}${suffix}`;
+    }
+
+    getSeasonWatchedCount(seasonKey: string): number {
+        const episodes = this.seasons()[seasonKey];
+        if (!episodes) {
+            return 0;
+        }
+        return episodes.filter((episode) => this.isEpisodeWatched(episode)).length;
+    }
+
+    getSeasonProgressDash(seasonKey: string): string {
+        const episodes = this.seasons()[seasonKey];
+        if (!episodes || episodes.length === 0) {
+            return '0, 100';
+        }
+
+        const watched = this.getSeasonWatchedCount(seasonKey);
+        const percent = (watched / episodes.length) * 100;
+        return `${percent}, 100`;
+    }
+
+    async downloadEpisode(event: Event, episode: XtreamSerieEpisode) {
+        event.stopPropagation();
+
+        if (this.isStalkerEpisode(episode)) {
+            this.episodeDownloadRequested.emit(episode);
+            return;
+        }
+
+        const xtreamDownload = this.xtreamDownloadContext();
+        if (!this.playlistId() || !xtreamDownload) {
+            return;
+        }
+
+        const serverUrl = xtreamDownload.serverUrl?.replace(/\/$/, '') || '';
+        const username = xtreamDownload.username || '';
+        const password = xtreamDownload.password || '';
+        const extension = episode.container_extension || 'mp4';
+        const url = `${serverUrl}/series/${username}/${password}/${episode.id}.${extension}`;
+        const episodeInfo = this.getEpisodeInfo(episode);
+        const posterUrl = episodeInfo?.movie_image;
+        const seasonNum = episode.season || Number(this.selectedSeason) || 1;
+        const episodeNum = episode.episode_num || 1;
+        const episodeTitle = `${this.seriesTitle() || 'Series'} - S${String(
+            seasonNum
+        ).padStart(2, '0')}E${String(episodeNum).padStart(2, '0')} - ${episode.title}`;
+
+        await this.downloadsService.startDownload({
+            playlistId: this.playlistId(),
+            xtreamId: Number(episode.id),
+            contentType: 'episode',
+            title: episodeTitle,
+            url,
+            posterUrl,
+            seriesXtreamId: this.seriesId(),
+            seasonNumber: seasonNum,
+            episodeNumber: episodeNum,
+        });
+    }
+
+    isEpisodeDownloaded(episode: XtreamSerieEpisode): boolean {
+        if (!this.playlistId()) {
+            return false;
+        }
+
+        this.downloadsService.downloads();
+        return this.downloadsService.isDownloaded(
+            this.getEpisodeDownloadId(episode),
+            this.playlistId(),
+            'episode'
+        );
+    }
+
+    isEpisodeDownloading(episode: XtreamSerieEpisode): boolean {
+        if (!this.playlistId()) {
+            return false;
+        }
+
+        this.downloadsService.downloads();
+        return this.downloadsService.isDownloading(
+            this.getEpisodeDownloadId(episode),
+            this.playlistId(),
+            'episode'
+        );
+    }
+
+    async playFromLocal(event: Event, episode: XtreamSerieEpisode) {
+        event.stopPropagation();
+        if (!this.playlistId()) {
+            return;
+        }
+
+        const filePath = this.downloadsService.getDownloadedFilePath(
+            this.getEpisodeDownloadId(episode),
+            this.playlistId(),
+            'episode'
+        );
+
+        if (filePath) {
+            await this.downloadsService.playDownload(filePath);
+        }
+    }
+
+    private isStalkerEpisode(episode: XtreamSerieEpisode): boolean {
+        return (
+            (episode as { custom_sid?: string }).custom_sid === 'vod-series' ||
+            (episode as { custom_sid?: string }).custom_sid === 'regular-series'
+        );
+    }
+
+    private getEpisodeContentId(episode: XtreamSerieEpisode): number {
+        return Number(episode.id);
+    }
+
+    private getEpisodeDownloadId(episode: XtreamSerieEpisode): number {
+        const customSid = (episode as { custom_sid?: string }).custom_sid;
+
+        if (customSid === 'regular-series') {
+            const cmd = (episode as { originalCmd?: string }).originalCmd;
+            if (cmd) {
+                const match = cmd.match(/file_(\d+)/);
+                if (match) {
+                    return Number(match[1]);
+                }
+                return this.hashString(cmd);
+            }
+            return Number(episode.id);
+        }
+
+        if (customSid === 'vod-series') {
+            const originalId = (episode as { originalId?: string | number })
+                .originalId;
+            const numericId = Number(originalId);
+            return Number.isNaN(numericId)
+                ? this.hashString(String(originalId))
+                : numericId;
+        }
+
+        const numericId = Number(episode.id);
+        return Number.isNaN(numericId)
+            ? this.hashString(String(episode.id))
+            : numericId;
+    }
+
+    private getEpisodePosition(
+        episode: XtreamSerieEpisode
+    ): PlaybackPositionData | undefined {
+        return this.playbackPositions().get(this.getEpisodeContentId(episode));
+    }
+
+    private selectedSeasonHasEpisodes(): boolean {
+        if (!this.selectedSeason) {
+            return false;
+        }
+
+        return (this.seasons()[this.selectedSeason]?.length ?? 0) > 0;
+    }
+
+    private getSeasonKeys(): string[] {
+        return Object.keys(this.seasons());
+    }
+
+    private hasSeasonKey(seasonKey: string): boolean {
+        return Object.prototype.hasOwnProperty.call(this.seasons(), seasonKey);
+    }
+
+    private syncSelectedSeason(): void {
+        const seasonKeysSignature = this.getSeasonKeys().join('|');
+        if (seasonKeysSignature === this.previousSeasonKeysSignature) {
+            return;
+        }
+
+        this.previousSeasonKeysSignature = seasonKeysSignature;
+
+        if (this.selectedSeason && !this.hasSeasonKey(this.selectedSeason)) {
+            this.selectedSeason = undefined;
+        }
+    }
+
+    private hashString(str: string): number {
+        let hash = 0;
+        for (let index = 0; index < str.length; index++) {
+            const char = str.charCodeAt(index);
+            hash = (hash << 5) - hash + char;
+            hash &= hash;
+        }
+        return Math.abs(hash);
+    }
+}
diff --git a/libs/ui/components/src/lib/styles/detail-view.scss b/libs/ui/components/src/lib/styles/detail-view.scss
new file mode 100644
index 0000000..a3fda85
--- /dev/null
+++ b/libs/ui/components/src/lib/styles/detail-view.scss
@@ -0,0 +1,588 @@
+// ============================================================================
+// Netflix-style Detail View - Cinematic Streaming Design
+// ============================================================================
+
+:host {
+    --poster-width: 220px;
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
+    --content-max-width: 1400px;
+
+    // Light theme colors (default - no .dark-theme class on body)
+    --hero-gradient-start: rgba(255, 250, 245, 0);
+    --hero-gradient-mid: rgba(255, 250, 245, 0.75);
+    --hero-gradient-end: rgba(255, 250, 245, 1);
+    --surface-bg: #fffaf5;
+    --text-primary: #1a1a1a;
+    --text-secondary: rgba(26, 26, 26, 0.75);
+    --text-muted: rgba(26, 26, 26, 0.5);
+    --accent-color: #b81d24;
+    --tag-bg: rgba(0, 0, 0, 0.06);
+    --tag-border: rgba(0, 0, 0, 0.12);
+    --play-idle-bg: linear-gradient(135deg, #fffaf2 0%, #ffffff 52%, #f7ecdf 100%);
+    --play-idle-fg: #161310;
+    --play-idle-border: rgba(88, 48, 18, 0.12);
+    --play-idle-shadow: 0 18px 38px rgba(91, 56, 24, 0.14);
+    --play-launching-bg: linear-gradient(135deg, #ffd36f 0%, #ffb14c 46%, #f57d35 100%);
+    --play-launching-fg: #241103;
+    --play-launching-border: rgba(142, 66, 0, 0.2);
+    --play-launching-shadow: 0 22px 44px rgba(244, 136, 55, 0.32);
+    --play-stop-bg: linear-gradient(135deg, #ffd1c8 0%, #ff9f8d 42%, #ef5e64 100%);
+    --play-stop-fg: #321012;
+    --play-stop-border: rgba(162, 38, 45, 0.18);
+    --play-stop-shadow: 0 22px 46px rgba(214, 74, 86, 0.26);
+    --play-icon-shell-bg: rgba(255, 255, 255, 0.32);
+    --play-icon-shell-border: rgba(255, 255, 255, 0.3);
+
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+    background: var(--surface-bg);
+    color: var(--text-primary);
+}
+
+// Dark theme overrides - cinematic dark mode
+:host-context(.dark-theme) {
+    --hero-gradient-start: rgba(20, 20, 20, 0);
+    --hero-gradient-mid: rgba(20, 20, 20, 0.7);
+    --hero-gradient-end: rgba(20, 20, 20, 1);
+    --surface-bg: #141414;
+    --text-primary: #fff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --accent-color: #e50914;
+    --tag-bg: rgba(255, 255, 255, 0.1);
+    --tag-border: rgba(255, 255, 255, 0.2);
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+    --play-idle-bg: linear-gradient(135deg, #fff5e6 0%, #f6efe5 58%, #e7dac9 100%);
+    --play-idle-fg: #15110d;
+    --play-idle-border: rgba(255, 255, 255, 0.18);
+    --play-idle-shadow: 0 20px 42px rgba(0, 0, 0, 0.36);
+    --play-launching-bg: linear-gradient(135deg, #ffdd79 0%, #ffb347 42%, #ef6a3a 100%);
+    --play-launching-fg: #1f1105;
+    --play-launching-border: rgba(255, 223, 136, 0.26);
+    --play-launching-shadow: 0 24px 50px rgba(255, 153, 71, 0.3);
+    --play-stop-bg: linear-gradient(135deg, #ffd7cf 0%, #ff9b8b 40%, #eb5961 100%);
+    --play-stop-fg: #2d1012;
+    --play-stop-border: rgba(255, 205, 205, 0.24);
+    --play-stop-shadow: 0 24px 50px rgba(235, 89, 97, 0.24);
+    --play-icon-shell-bg: rgba(255, 255, 255, 0.28);
+    --play-icon-shell-border: rgba(255, 255, 255, 0.24);
+}
+
+// ============================================================================
+// Details Section - Content Elements
+// ============================================================================
+
+.details {
+    // Styles for projected content elements
+
+    &__tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 12px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        background: var(--tag-bg);
+        border: 1px solid var(--tag-border);
+        border-radius: 4px;
+        backdrop-filter: blur(8px);
+
+        &--rating {
+            color: #ffd700;
+            border-color: rgba(255, 215, 0, 0.3);
+        }
+    }
+
+    &__meta-item {
+        font-size: 0.875rem;
+
+        .label {
+            color: var(--text-muted);
+            font-weight: 400;
+            margin-bottom: 2px;
+            text-decoration: none;
+            display: block;
+        }
+
+        .value {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+    }
+}
+
+// ============================================================================
+// Action Buttons - Play, Favorite
+// ============================================================================
+
+.play-btn {
+    --play-btn-bg: var(--play-idle-bg);
+    --play-btn-fg: var(--play-idle-fg);
+    --play-btn-border: var(--play-idle-border);
+    --play-btn-shadow: var(--play-idle-shadow);
+
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 26px;
+    min-height: 54px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: var(--play-btn-bg);
+    background-size: 140% 140%;
+    background-position: 0% 50%;
+    color: var(--play-btn-fg);
+    border: 1px solid var(--play-btn-border);
+    border-radius: 16px;
+    box-shadow: var(--play-btn-shadow);
+    cursor: pointer;
+    transition:
+        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+        background-position 280ms ease,
+        box-shadow 260ms ease,
+        border-color 220ms ease,
+        color 220ms ease,
+        filter 220ms ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        background:
+            linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 36%),
+            linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 62%);
+        opacity: 0.7;
+        transition: opacity 220ms ease;
+        z-index: -1;
+    }
+
+    &:hover:not(:disabled) {
+        transform: translateY(-2px);
+        background-position: 100% 50%;
+        box-shadow:
+            var(--play-btn-shadow),
+            0 10px 20px rgba(255, 255, 255, 0.16) inset;
+    }
+
+    &:hover:not(:disabled)::before {
+        opacity: 0.95;
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: var(--play-btn-shadow);
+    }
+
+    &:disabled {
+        cursor: progress;
+        opacity: 1;
+        filter: saturate(1.05);
+    }
+
+    mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+        transition:
+            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+            color 220ms ease,
+            filter 220ms ease;
+    }
+
+    &:hover:not(:disabled) .play-btn__icon {
+        transform: scale(1.08);
+    }
+
+    &__icon-shell {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 999px;
+        background: var(--play-icon-shell-bg);
+        border: 1px solid var(--play-icon-shell-border);
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.38),
+            0 6px 14px rgba(0, 0, 0, 0.08);
+        backdrop-filter: blur(10px);
+        transition:
+            transform 220ms ease,
+            background-color 220ms ease,
+            border-color 220ms ease,
+            box-shadow 220ms ease;
+    }
+
+    &__label {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    &--state-launching,
+    &--state-stop {
+        color: var(--play-btn-fg);
+    }
+
+    &--state-launching {
+        --play-btn-bg: var(--play-launching-bg);
+        --play-btn-fg: var(--play-launching-fg);
+        --play-btn-border: var(--play-launching-border);
+        --play-btn-shadow: var(--play-launching-shadow);
+        animation: playButtonPulse 1.8s ease-in-out infinite;
+
+        .play-btn__icon-shell {
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.42),
+                0 10px 22px rgba(184, 89, 26, 0.2);
+        }
+
+        .play-btn__icon {
+            animation: playIconLaunch 1.15s cubic-bezier(0.55, 0, 0.45, 1) infinite;
+        }
+    }
+
+    &--state-stop {
+        --play-btn-bg: var(--play-stop-bg);
+        --play-btn-fg: var(--play-stop-fg);
+        --play-btn-border: var(--play-stop-border);
+        --play-btn-shadow: var(--play-stop-shadow);
+
+        .play-btn__icon-shell {
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                0 12px 24px rgba(145, 38, 53, 0.18);
+        }
+
+        .play-btn__icon {
+            animation: playIconStop 1.2s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes playButtonPulse {
+    0%,
+    100% {
+        box-shadow: var(--play-btn-shadow);
+    }
+
+    50% {
+        box-shadow:
+            var(--play-btn-shadow),
+            0 0 0 6px rgba(255, 190, 92, 0.14);
+    }
+}
+
+@keyframes playIconLaunch {
+    0%,
+    100% {
+        transform: rotate(0deg) scale(1);
+    }
+
+    50% {
+        transform: rotate(18deg) scale(1.1);
+    }
+}
+
+@keyframes playIconStop {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.08);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .play-btn,
+    .play-btn::before,
+    .play-btn mat-icon,
+    .play-btn__icon-shell {
+        animation: none !important;
+        transition-duration: 1ms !important;
+    }
+}
+
+.favorite-btn,
+.download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    background: rgba(109, 109, 110, 0.7);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(109, 109, 110, 0.5);
+    }
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.favorite-btn {
+    &--active {
+        background: rgba(229, 9, 20, 0.8);
+
+        &:hover {
+            background: rgba(229, 9, 20, 0.6);
+        }
+    }
+}
+
+.download-btn {
+    background: rgba(33, 150, 243, 0.8);
+
+    &:hover {
+        background: rgba(33, 150, 243, 0.6);
+    }
+
+    &--completed {
+        background: rgba(76, 175, 80, 0.8);
+
+        &:hover {
+            background: rgba(76, 175, 80, 0.6);
+        }
+    }
+
+    &--downloading {
+        background: rgba(109, 109, 110, 0.5);
+        cursor: not-allowed;
+        opacity: 0.7;
+
+        &:hover {
+            background: rgba(109, 109, 110, 0.5);
+        }
+    }
+}
+
+// ============================================================================
+// Content Sections - Below the hero fold
+// ============================================================================
+
+.content-section {
+    padding: 20px 0;
+    width: 100%;
+    box-sizing: border-box;
+
+    &__title {
+        font-size: 1.375rem;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: var(--text-primary);
+    }
+}
+
+// ============================================================================
+// Seasons & Episodes - Inside details section
+// ============================================================================
+
+.seasons {
+    margin-top: 24px;
+    width: 100%;
+
+    .season-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 0;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        h4 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+        }
+
+        .expand-icon {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+    }
+
+    .episodes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 8px 0 16px;
+
+        button {
+            margin: 0;
+            font-weight: 500;
+        }
+    }
+
+    .episodes-loading,
+    .seasons-loading {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 20px 0;
+        color: var(--text-secondary);
+    }
+
+    .no-episodes {
+        color: var(--text-muted);
+        font-style: italic;
+        padding: 8px 0;
+    }
+}
+
+// Seasons loading when inside details
+.details .seasons-loading {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 0;
+    color: var(--text-secondary);
+    margin-top: 24px;
+}
+
+// Season container when inside details section
+.details app-season-container {
+    display: block;
+    width: 100%;
+    margin-top: 24px;
+    box-sizing: border-box;
+}
+
+// ============================================================================
+// YouTube Trailer Section - Inside details
+// ============================================================================
+
+.youtube-trailer {
+    margin-top: 24px;
+    width: 100%;
+
+    h3 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0 0 12px 0;
+        color: var(--text-primary);
+    }
+
+    .trailer-wrapper {
+        position: relative;
+        width: 100%;
+        max-width: 560px;
+        aspect-ratio: 16 / 9;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    }
+}
+
+// ============================================================================
+// Legacy container support (for gradual migration)
+// ============================================================================
+
+.container {
+    display: contents;
+}
+
+.image {
+    display: none; // Hidden - now using .poster in hero
+}
+
+// ============================================================================
+// Mobile Responsive - Option A: Keep poster grid layout
+// ============================================================================
+
+@media (max-width: 800px) {
+    :host {
+        --poster-width: 120px;
+    }
+
+    .action-buttons {
+        width: 100%;
+        // This class is in ContentHeroComponent now, but these rules apply to children?
+        // No, .play-btn is a child of the PROJECTED content.
+        // So we should target the buttons directly for mobile
+    }
+
+    .play-btn,
+    .favorite-btn,
+    .download-btn {
+        flex: 1;
+        justify-content: center;
+        padding: 10px 16px;
+    }
+
+    .youtube-trailer {
+        margin-top: 16px;
+
+        .trailer-wrapper {
+            max-width: 100%;
+            border-radius: 4px;
+        }
+    }
+
+    .seasons {
+        padding: 16px 0 0;
+    }
+}
+
+// ============================================================================
+// Animations
+// ============================================================================
+
+.youtube-trailer {
+    animation: fadeInUp 0.5s ease-out 0.4s both;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// ============================================================================
+// Utility - keep .label for backwards compatibility
+// ============================================================================
+
+.label {
+    font-weight: 400;
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 0;
+    opacity: 1;
+}
diff --git a/libs/ui/components/src/lib/watched-badge/watched-badge.component.ts b/libs/ui/components/src/lib/watched-badge/watched-badge.component.ts
new file mode 100644
index 0000000..91f1806
--- /dev/null
+++ b/libs/ui/components/src/lib/watched-badge/watched-badge.component.ts
@@ -0,0 +1,44 @@
+import { Component, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-watched-badge',
+    standalone: true,
+    imports: [MatIcon],
+    template: `
+        @if (isWatched()) {
+            <div class="watched-badge">
+                <mat-icon>{{ icon() }}</mat-icon>
+            </div>
+        }
+    `,
+    styles: [
+        `
+            .watched-badge {
+                position: absolute;
+                top: 8px;
+                left: 8px;
+                width: 24px;
+                height: 24px;
+                background: rgba(70, 211, 105, 0.9);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                backdrop-filter: blur(4px);
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+                mat-icon {
+                    font-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    color: white;
+                }
+            }
+        `,
+    ],
+})
+export class WatchedBadgeComponent {
+    readonly isWatched = input.required<boolean>();
+    readonly icon = input<string>('check_circle');
+}
diff --git a/libs/ui/components/src/test-setup.ts b/libs/ui/components/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/ui/components/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/ui/components/tsconfig.json b/libs/ui/components/tsconfig.json
new file mode 100644
index 0000000..e05028a
--- /dev/null
+++ b/libs/ui/components/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/ui/components/tsconfig.lib.json b/libs/ui/components/tsconfig.lib.json
new file mode 100644
index 0000000..869968a
--- /dev/null
+++ b/libs/ui/components/tsconfig.lib.json
@@ -0,0 +1,18 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "files": ["../../../global.d.ts"],
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": ["src/**/*.ts"]
+}
diff --git a/libs/ui/components/tsconfig.spec.json b/libs/ui/components/tsconfig.spec.json
new file mode 100644
index 0000000..7b3e56b
--- /dev/null
+++ b/libs/ui/components/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/ui/epg/project.json b/libs/ui/epg/project.json
new file mode 100644
index 0000000..5dcfa87
--- /dev/null
+++ b/libs/ui/epg/project.json
@@ -0,0 +1,28 @@
+{
+    "name": "ui-epg",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/ui/epg/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:playback", "type:ui"],
+    "targets": {
+        "test": {
+            "executor": "nx:run-commands",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "command": [
+                    "node",
+                    "./tools/testing/run-web-esm-lib-tests.mjs",
+                    "libs/ui/epg/src"
+                ],
+                "env": {
+                    "NODE_OPTIONS": "--experimental-vm-modules"
+                },
+                "forwardAllArgs": true
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/ui/epg/src/index.ts b/libs/ui/epg/src/index.ts
new file mode 100644
index 0000000..1020292
--- /dev/null
+++ b/libs/ui/epg/src/index.ts
@@ -0,0 +1,6 @@
+export * from './lib/epg-list/epg-list.component';
+export * from './lib/epg-list/epg-item-description/epg-item-description.component';
+export * from './lib/epg-progress-panel/epg-progress-panel.component';
+export * from './lib/epg-source-status/epg-source-status.component';
+export * from './lib/multi-epg/multi-epg-container.component';
+export * from './lib/multi-epg/overlay-ref.token';
diff --git a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.html b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.html
new file mode 100644
index 0000000..f0f9240
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.html
@@ -0,0 +1,78 @@
+<div class="program-dialog">
+    <!-- Header with channel and time -->
+    <header class="program-header">
+        <div class="time-block">
+            <div class="time-display">
+                <span class="time-start">{{
+                    (epgProgram.startTimestamp
+                        ? epgProgram.startTimestamp * 1000
+                        : epgProgram.start
+                    ) | date: 'HH:mm'
+                }}</span>
+                <span class="time-separator">—</span>
+                <span class="time-end">{{
+                    (epgProgram.stopTimestamp
+                        ? epgProgram.stopTimestamp * 1000
+                        : epgProgram.stop
+                    ) | date: 'HH:mm'
+                }}</span>
+            </div>
+            <div class="date-display">{{
+                (epgProgram.startTimestamp
+                    ? epgProgram.startTimestamp * 1000
+                    : epgProgram.start
+                ) | date: 'EEEE, MMMM d' : undefined : currentLocale()
+            }}</div>
+        </div>
+        @if (channelName) {
+            <div class="channel-badge">
+                <span class="channel-icon">📺</span>
+                <span class="channel-name">{{ channelName }}</span>
+            </div>
+        }
+    </header>
+
+    <!-- Title section -->
+    <div class="program-title-section">
+        <h1 class="program-title">{{ epgProgram.title }}</h1>
+        @if (epgProgram.category) {
+            <span class="category-tag">{{ epgProgram.category }}</span>
+        }
+    </div>
+
+    <!-- Content -->
+    <div class="program-content">
+        @if (epgProgram.desc) {
+            <p class="program-description">{{ epgProgram.desc }}</p>
+        }
+
+        <!-- Meta info grid -->
+        <div class="meta-grid">
+            @if (epgProgram.episodeNum) {
+                <div class="meta-item">
+                    <span class="meta-label">{{ 'EPG.PROGRAM_DIALOG.EPISODE' | translate }}</span>
+                    <span class="meta-value">{{ epgProgram.episodeNum }}</span>
+                </div>
+            }
+            @if (epgProgram.rating) {
+                <div class="meta-item">
+                    <span class="meta-label">{{ 'EPG.PROGRAM_DIALOG.PARENTAL_RATING_SYSTEM' | translate }}</span>
+                    <span class="meta-value rating">{{ epgProgram.rating }}</span>
+                </div>
+            }
+            @if (duration) {
+                <div class="meta-item">
+                    <span class="meta-label">{{ 'EPG.PROGRAM_DIALOG.DURATION' | translate }}</span>
+                    <span class="meta-value">{{ duration }}</span>
+                </div>
+            }
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="program-footer">
+        <button class="close-button" mat-dialog-close>
+            {{ 'HOME.PLAYLISTS.INFO_DIALOG.CLOSE' | translate }}
+        </button>
+    </footer>
+</div>
diff --git a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
new file mode 100644
index 0000000..1fbdcf5
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
@@ -0,0 +1,300 @@
+// Broadcast control room palette
+$bg-deep: #0a0a0f;
+$bg-surface: #12121a;
+$bg-elevated: #1a1a24;
+$accent-cyan: #00d4aa;
+$accent-purple: #8b5cf6;
+$text-primary: #f8fafc;
+$text-secondary: rgba(248, 250, 252, 0.7);
+$text-muted: rgba(248, 250, 252, 0.4);
+$border-subtle: rgba(255, 255, 255, 0.08);
+
+.program-dialog {
+    background: linear-gradient(180deg, $bg-surface 0%, $bg-deep 100%);
+    color: $text-primary;
+    min-width: 380px;
+    max-width: 800px;
+    border-radius: 16px;
+    overflow: hidden;
+    position: relative;
+
+    // Ambient glow effect
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 120px;
+        background: radial-gradient(
+            ellipse at top center,
+            rgba($accent-cyan, 0.12) 0%,
+            transparent 70%
+        );
+        pointer-events: none;
+    }
+}
+
+// Header with time and channel
+.program-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 24px 24px 16px;
+    position: relative;
+    z-index: 1;
+}
+
+.time-block {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.time-display {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+
+    .time-start {
+        color: $accent-cyan;
+        text-shadow: 0 0 20px rgba($accent-cyan, 0.4);
+    }
+
+    .time-separator {
+        color: $text-muted;
+        font-weight: 300;
+    }
+
+    .time-end {
+        color: $text-secondary;
+    }
+}
+
+.date-display {
+    font-size: 13px;
+    color: $text-muted;
+    letter-spacing: 0.02em;
+}
+
+.channel-badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background: rgba($accent-purple, 0.15);
+    border: 1px solid rgba($accent-purple, 0.3);
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: $text-primary;
+
+    .channel-icon {
+        font-size: 14px;
+    }
+
+    .channel-name {
+        max-width: 140px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+// Title section
+.program-title-section {
+    padding: 0 24px 20px;
+    border-bottom: 1px solid $border-subtle;
+}
+
+.program-title {
+    margin: 0 0 12px;
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: $text-primary;
+    letter-spacing: -0.01em;
+}
+
+.category-tag {
+    display: inline-block;
+    padding: 6px 12px;
+    background: rgba($accent-cyan, 0.1);
+    border: 1px solid rgba($accent-cyan, 0.25);
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: $accent-cyan;
+}
+
+// Content section
+.program-content {
+    padding: 20px 24px;
+}
+
+.program-description {
+    margin: 0 0 24px;
+    font-size: 14px;
+    line-height: 1.7;
+    color: $text-secondary;
+}
+
+// Meta grid
+.meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 16px;
+}
+
+.meta-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    border: 1px solid $border-subtle;
+}
+
+.meta-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: $text-muted;
+}
+
+.meta-value {
+    font-size: 14px;
+    font-weight: 500;
+    color: $text-primary;
+
+    &.rating {
+        color: $accent-purple;
+    }
+}
+
+// Footer
+.program-footer {
+    padding: 16px 24px 24px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.close-button {
+    padding: 10px 24px;
+    background: transparent;
+    border: 1px solid rgba($accent-cyan, 0.4);
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: $accent-cyan;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba($accent-cyan, 0.1);
+        border-color: $accent-cyan;
+        box-shadow: 0 0 20px rgba($accent-cyan, 0.2);
+    }
+}
+
+// Override Material dialog styling
+::ng-deep .mat-mdc-dialog-container {
+    --mdc-dialog-container-color: transparent;
+    --mdc-dialog-container-shape: 16px;
+
+    .mdc-dialog__surface {
+        background: transparent !important;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),
+                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
+    }
+}
+
+// Light theme adjustments
+::ng-deep .light-theme {
+    .program-dialog {
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+        color: #1e293b;
+
+        &::before {
+            background: radial-gradient(
+                ellipse at top center,
+                rgba(#059669, 0.08) 0%,
+                transparent 70%
+            );
+        }
+    }
+
+    .time-display {
+        .time-start {
+            color: #059669;
+            text-shadow: none;
+        }
+        .time-end {
+            color: #64748b;
+        }
+    }
+
+    .date-display {
+        color: #94a3b8;
+    }
+
+    .channel-badge {
+        background: rgba(#7c3aed, 0.08);
+        border-color: rgba(#7c3aed, 0.2);
+        color: #1e293b;
+    }
+
+    .program-title {
+        color: #0f172a;
+    }
+
+    .program-title-section {
+        border-bottom-color: rgba(0, 0, 0, 0.06);
+    }
+
+    .category-tag {
+        background: rgba(#059669, 0.08);
+        border-color: rgba(#059669, 0.2);
+        color: #059669;
+    }
+
+    .program-description {
+        color: #475569;
+    }
+
+    .meta-item {
+        background: rgba(0, 0, 0, 0.02);
+        border-color: rgba(0, 0, 0, 0.06);
+    }
+
+    .meta-label {
+        color: #94a3b8;
+    }
+
+    .meta-value {
+        color: #1e293b;
+
+        &.rating {
+            color: #7c3aed;
+        }
+    }
+
+    .close-button {
+        border-color: rgba(#059669, 0.4);
+        color: #059669;
+
+        &:hover {
+            background: rgba(#059669, 0.08);
+            border-color: #059669;
+            box-shadow: none;
+        }
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.spec.ts b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.spec.ts
new file mode 100644
index 0000000..3c97f15
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.spec.ts
@@ -0,0 +1,69 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { By } from '@angular/platform-browser';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockModule } from 'ng-mocks';
+import { EpgProgram } from 'shared-interfaces';
+import { EpgItemDescriptionComponent } from './epg-item-description.component';
+
+describe('EpgItemDescriptionComponent', () => {
+    let component: EpgItemDescriptionComponent;
+    let fixture: ComponentFixture<EpgItemDescriptionComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                EpgItemDescriptionComponent,
+                MockModule(MatDialogModule),
+                TranslateModule.forRoot(),
+            ],
+            providers: [
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {
+                        start: '2026-04-05T11:30:00.000Z',
+                        stop: '2026-04-05T12:30:00.000Z',
+                        title: 'TV Show 1',
+                        desc: 'Highly interesting show about pets',
+                        category: 'Fun',
+                    } as unknown as EpgProgram,
+                },
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EpgItemDescriptionComponent);
+        component = fixture.componentInstance;
+        component.epgProgram = TestBed.inject(MAT_DIALOG_DATA);
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should render epg details in the dialog', () => {
+        fixture.detectChanges();
+        const titleElement = fixture.debugElement.query(
+            By.css('.program-title')
+        );
+        expect(titleElement.nativeElement.textContent.trim()).toContain(
+            'TV Show 1'
+        );
+
+        const categoryElement = fixture.debugElement.query(
+            By.css('.category-tag')
+        );
+        expect(categoryElement.nativeElement.textContent.trim()).toContain(
+            'Fun'
+        );
+
+        const descElement = fixture.debugElement.query(
+            By.css('.program-description')
+        );
+        expect(descElement.nativeElement.textContent.trim()).toContain(
+            'Highly interesting show about pets'
+        );
+    });
+});
diff --git a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.ts b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.ts
new file mode 100644
index 0000000..1bdfa1c
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.ts
@@ -0,0 +1,68 @@
+import { DatePipe } from '@angular/common';
+import { Component, computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { normalizeDateLocale } from '@iptvnator/pipes';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { differenceInMinutes } from 'date-fns';
+import { startWith } from 'rxjs';
+import { EpgProgram } from 'shared-interfaces';
+
+type EpgItemDialogData = EpgProgram & {
+    channelName?: string | null;
+    channel_name?: string | null;
+    display_name?: string | null;
+};
+
+@Component({
+    selector: 'app-epg-item-description',
+    templateUrl: './epg-item-description.component.html',
+    styleUrls: ['./epg-item-description.component.scss'],
+    imports: [DatePipe, MatButtonModule, MatDialogModule, TranslatePipe],
+})
+export class EpgItemDescriptionComponent {
+    dialogData = inject<EpgItemDialogData>(MAT_DIALOG_DATA);
+    private readonly translate = inject(TranslateService);
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    epgProgram: EpgProgram;
+    channelName: string | null = null;
+    duration: string | null = null;
+    readonly currentLocale = computed(() => {
+        this.languageTick();
+        return normalizeDateLocale(
+            this.translate.currentLang || this.translate.defaultLang
+        );
+    });
+
+    constructor() {
+        this.epgProgram = this.dialogData;
+        // Check multiple possible field names for channel name
+        this.channelName = this.dialogData.channelName
+            || this.dialogData.channel_name
+            || this.dialogData.display_name
+            || null;
+        this.duration = this.calculateDuration();
+    }
+
+    private calculateDuration(): string | null {
+        if (!this.epgProgram.start || !this.epgProgram.stop) return null;
+        try {
+            const start = new Date(this.epgProgram.start);
+            const stop = new Date(this.epgProgram.stop);
+            const mins = differenceInMinutes(stop, start);
+            if (mins < 60) {
+                return `${mins} min`;
+            }
+            const hours = Math.floor(mins / 60);
+            const remainingMins = mins % 60;
+            return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`;
+        } catch {
+            return null;
+        }
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html
new file mode 100644
index 0000000..0da51f9
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.html
@@ -0,0 +1,34 @@
+<span class="time"
+    >{{ (item.startTimestamp ? item.startTimestamp * 1000 : item.start) | date: 'HH:mm' }}
+    -
+    {{ (item.stopTimestamp ? item.stopTimestamp * 1000 : item.stop) | date: 'HH:mm' }}</span
+>
+@if (isLive) {
+    <span class="live badge" [matTooltip]="'EPG.LIVE_NOW' | translate"
+        >live</span
+    >
+}
+
+@if (showArchiveBadge) {
+    <span
+        class="archive-playback badge"
+        [matTooltip]="'EPG.TIMESHIFT_AVAILABLE' | translate"
+    >
+        <mat-icon class="archive-playback__icon" aria-hidden="true"
+            >replay</mat-icon
+        >
+        <span class="archive-playback__label"
+            >{{ 'XTREAM.PLAY' | translate }}</span
+        >
+    </span>
+}
+
+@if (item?.desc) {
+    <span
+        (click)="$event.stopPropagation(); showDescription(item)"
+        matListItemMeta
+        class="description-icon"
+        [matTooltip]="'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate"
+        ><mat-icon>info</mat-icon></span
+    >
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
new file mode 100644
index 0000000..32015d2
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
@@ -0,0 +1,103 @@
+:host {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+}
+
+.time {
+    font-size: 0.76rem;
+    line-height: 1;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    opacity: 0.76;
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 42px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    border: 1px solid transparent;
+    white-space: nowrap;
+}
+
+.live {
+    color: #ff8f8f;
+    background: rgba(255, 95, 95, 0.12);
+    border-color: rgba(255, 95, 95, 0.28);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.archive-playback {
+    color: color-mix(in srgb, var(--app-selection-color) 92%, white);
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--app-selection-color) 16%, transparent),
+            color-mix(in srgb, var(--app-selection-color) 9%, transparent)
+        ),
+        color-mix(in srgb, var(--app-selection-surface) 42%, transparent);
+    border-color: color-mix(
+        in srgb,
+        var(--app-selection-border) 78%,
+        transparent
+    );
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.08),
+        0 6px 14px -12px var(--app-selection-glow);
+    padding-inline: 7px 10px;
+}
+
+.archive-playback__icon {
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    color: inherit;
+    opacity: 0.92;
+}
+
+.archive-playback__label {
+    font-size: 0.69rem;
+    line-height: 1;
+    font-weight: 700;
+}
+
+.description-icon {
+    margin-inline-start: auto;
+    width: 30px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition:
+        opacity 0.15s ease,
+        background-color 0.15s ease,
+        transform 0.15s ease;
+
+    mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+    }
+
+    &:hover {
+        opacity: 1;
+        background: color-mix(in srgb, currentColor 10%, transparent);
+        transform: translateY(-1px);
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.spec.ts b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.spec.ts
new file mode 100644
index 0000000..50b3d55
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.spec.ts
@@ -0,0 +1,96 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MockModule } from 'ng-mocks';
+import { EpgProgram } from 'shared-interfaces';
+import { EpgItemDescriptionComponent } from '../epg-item-description/epg-item-description.component';
+import { EpgListItemComponent } from './epg-list-item.component';
+
+const EPG_PROGRAM_ITEM: EpgProgram = {
+    start: '2026-04-05T11:30:00.000Z',
+    stop: '2026-04-05T12:30:00.000Z',
+    channel: '12345',
+    title: 'NOW on PBS',
+    desc: "Jordan's Queen Rania has made job creation a priority to help curb the staggering unemployment rates among youths in the Middle East.",
+    category: 'Newsmagazine',
+    episodeNum: '427',
+    rating: 'TV-G',
+    iconUrl:
+        'http://imageswoapi.whatsonindia.com/WhatsOnTV/images/ProgramImages/xlarge/38B4DE4E9A7132257749051B6C8B4F699DB264F4V.jpg',
+};
+
+describe('EpgListItemComponent', () => {
+    let component: EpgListItemComponent;
+    let fixture: ComponentFixture<EpgListItemComponent>;
+    let dialog: MatDialog;
+    let translate: TranslateService;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                EpgListItemComponent,
+                MockModule(MatDialogModule),
+                MockModule(MatListModule),
+                MockModule(MatIconModule),
+                MockModule(MatTooltipModule),
+                TranslateModule.forRoot(),
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EpgListItemComponent);
+        dialog = TestBed.inject(MatDialog);
+        translate = TestBed.inject(TranslateService);
+        translate.setTranslation(
+            'en',
+            {
+                EPG: {
+                    TIMESHIFT_AVAILABLE: 'Archive playback is available',
+                },
+                XTREAM: {
+                    PLAY: 'Play',
+                },
+            },
+            true
+        );
+        translate.use('en');
+        component = fixture.componentInstance;
+        component.item = EPG_PROGRAM_ITEM;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should trigger the function to open the details dialog', () => {
+        jest.spyOn(dialog, 'open');
+        component.showDescription({} as EpgProgram);
+        expect(dialog.open).toHaveBeenCalledTimes(1);
+        expect(dialog.open).toHaveBeenCalledWith(EpgItemDescriptionComponent, {
+            data: {},
+            width: '800px',
+        });
+    });
+
+    it('renders an archive playback chip with replay icon and label', () => {
+        fixture = TestBed.createComponent(EpgListItemComponent);
+        component = fixture.componentInstance;
+        component.item = EPG_PROGRAM_ITEM;
+        component.showArchiveBadge = true;
+        fixture.detectChanges();
+
+        const chip = fixture.nativeElement.querySelector('.archive-playback');
+        const icon = fixture.nativeElement.querySelector(
+            '.archive-playback__icon'
+        );
+
+        expect(chip).not.toBeNull();
+        expect(chip.textContent).toContain('Play');
+        expect(icon.textContent.trim()).toBe('replay');
+    });
+});
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.ts b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.ts
new file mode 100644
index 0000000..eb83149
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.ts
@@ -0,0 +1,38 @@
+import { DatePipe } from '@angular/common';
+import { Component, inject, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EpgProgram } from 'shared-interfaces';
+import { EpgItemDescriptionComponent } from '../epg-item-description/epg-item-description.component';
+
+@Component({
+    imports: [DatePipe, MatIcon, MatTooltip, TranslatePipe],
+    selector: 'app-epg-list-item',
+    templateUrl: './epg-list-item.component.html',
+    styleUrls: ['./epg-list-item.component.scss'],
+})
+export class EpgListItemComponent {
+    private dialog = inject(MatDialog);
+
+    /** EPG Program to render */
+    @Input() item!: EpgProgram;
+
+    /** Whether the program is currently live */
+    @Input() isLive = false;
+
+    /** Whether archive playback is available for the program */
+    @Input() showArchiveBadge = false;
+
+    /**
+     * Opens the dialog with details about the selected program
+     * @param program selected epg program
+     */
+    showDescription(program: EpgProgram): void {
+        this.dialog.open(EpgItemDescriptionComponent, {
+            width: '800px',
+            data: program,
+        });
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.html b/libs/ui/epg/src/lib/epg-list/epg-list.component.html
new file mode 100644
index 0000000..1b27b84
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.html
@@ -0,0 +1,111 @@
+@let items = filteredItems();
+@let timeshiftLimit = timeshiftUntil();
+
+<!-- channel info panel -->
+<div id="channel-header" color="primary">
+    <div id="date-navigator">
+        <button
+            class="previous-day"
+            mat-icon-button
+            (click)="changeDate('prev')"
+            [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
+        >
+            <mat-icon>chevron_left</mat-icon>
+        </button>
+        <span class="selected-date">
+            {{
+                selectedDate()
+                    | date: 'MMMM d, EEEE' : undefined : currentLocale()
+            }}</span
+        >
+        <button
+            class="next-day"
+            mat-icon-button
+            (click)="changeDate('next')"
+            [matTooltip]="'EPG.NEXT_DAY' | translate"
+        >
+            <mat-icon>chevron_right</mat-icon>
+        </button>
+    </div>
+</div>
+
+@if (timeshiftLimit) {
+    <!-- program list -->
+    <div id="program-list" #programList>
+        @if (items.length > 0) {
+            @for (program of items; track $index) {
+                @if (!canActivateProgram(program)) {
+                    <div
+                        class="program-item"
+                        [class.current-program]="isProgramPlaying(program)"
+                    >
+                        <div class="program-meta">
+                            <app-epg-list-item
+                                [item]="program"
+                                [isLive]="isProgramPlaying(program)"
+                                [showArchiveBadge]="
+                                    canPlayArchivedProgram(program)
+                                "
+                            />
+                        </div>
+                        <div class="program-title">
+                            {{ program?.title }}
+                        </div>
+                        <div class="epg-item__description">
+                            {{ program?.desc }}
+                        </div>
+                        @if (isProgramPlaying(program)) {
+                            <div class="program-progress">
+                                <div class="epg-progress-track">
+                                    <div
+                                        class="epg-progress-fill"
+                                        [style.width.%]="
+                                            calculateProgress(program)
+                                        "
+                                    ></div>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                } @else {
+                    <div
+                        class="program-item clickable"
+                        [class.current-program]="isProgramPlaying(program)"
+                        [class.active]="isProgramPlaying(program)"
+                        (click)="activateProgram(program)"
+                    >
+                        <div class="program-meta">
+                            <app-epg-list-item
+                                [item]="program"
+                                [isLive]="isProgramPlaying(program)"
+                                [showArchiveBadge]="
+                                    canPlayArchivedProgram(program)
+                                "
+                            />
+                        </div>
+                        <div
+                            class="program-title"
+                            [innerHTML]="program.title"
+                        ></div>
+                        @if (isProgramPlaying(program)) {
+                            <div class="program-progress">
+                                <div class="epg-progress-track">
+                                    <div
+                                        class="epg-progress-fill"
+                                        [style.width.%]="
+                                            calculateProgress(program)
+                                        "
+                                    ></div>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                }
+            }
+        } @else {
+            <div class="epg-not-available">
+                {{ 'EPG.EPG_NOT_AVAILABLE_DATE' | translate }}
+            </div>
+        }
+    </div>
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
new file mode 100644
index 0000000..4ba1c56
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
@@ -0,0 +1,180 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow-x: hidden;
+    background: transparent;
+}
+
+#date-navigator {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 10px 10px;
+    gap: 8px;
+
+    button {
+        border-radius: 10px;
+        opacity: 0.84;
+        transition:
+            opacity 0.15s ease,
+            background-color 0.15s ease,
+            transform 0.15s ease;
+
+        &:hover:not([disabled]) {
+            opacity: 1;
+            background: color-mix(in srgb, currentColor 10%, transparent);
+            transform: translateY(-1px);
+        }
+
+        &[disabled] {
+            opacity: 0.3;
+        }
+    }
+}
+
+.selected-date {
+    flex: 1;
+    text-align: center;
+    font-size: 0.83rem;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    opacity: 0.8;
+}
+
+#program-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 10px 10px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.program-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 14px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.045);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 10px 20px -20px rgba(0, 0, 0, 0.35);
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
+    cursor: default;
+
+    &.clickable {
+        cursor: pointer;
+
+        &:hover {
+            background:
+                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
+                rgba(127, 127, 127, 0.065);
+            transform: translateY(-1px);
+        }
+    }
+
+    &.active {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        border-color: var(--app-selection-border);
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+
+        .program-title {
+            color: var(--app-selection-color);
+        }
+    }
+}
+
+.program-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.program-title {
+    font-size: 0.94rem;
+    line-height: 1.4;
+    font-weight: 560;
+    letter-spacing: 0.005em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.epg-item__description {
+    font-size: 0.82rem;
+    line-height: 1.4;
+    opacity: 0.74;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.program-progress {
+    padding-top: 2px;
+}
+
+.epg-progress-track {
+    position: relative;
+    width: 100%;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background-color: rgba(127, 127, 127, 0.28);
+    background-image: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.12),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+        inset 0 1px 1px rgba(0, 0, 0, 0.18);
+}
+
+.epg-progress-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-radius: inherit;
+    background-color: var(--app-selection-color);
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.18),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--app-selection-border) 82%, transparent),
+        0 0 10px -2px var(--app-selection-glow);
+    transition: width 0.35s ease;
+}
+
+.epg-not-available {
+    margin: auto 10px;
+    padding: 22px;
+    border: 1px dashed rgba(255, 255, 255, 0.12);
+    border-radius: 14px;
+    text-align: center;
+    font-size: 0.88rem;
+    opacity: 0.66;
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.spec.ts b/libs/ui/epg/src/lib/epg-list/epg-list.component.spec.ts
new file mode 100644
index 0000000..801d758
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.spec.ts
@@ -0,0 +1,332 @@
+import { registerLocaleData } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import localeDe from '@angular/common/locales/de';
+import { MockPipe } from 'ng-mocks';
+import { BehaviorSubject, of } from 'rxjs';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { Store } from '@ngrx/store';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { Channel, EpgProgram } from 'shared-interfaces';
+import { EpgListItemComponent } from './epg-list-item/epg-list-item.component';
+import { EpgListComponent } from './epg-list.component';
+
+let requestAnimationFrameQueue: FrameRequestCallback[] = [];
+
+registerLocaleData(localeDe, 'de');
+
+@Component({
+    selector: 'app-epg-list-item',
+    standalone: true,
+    template: '',
+})
+class StubEpgListItemComponent {
+    readonly item = input<EpgProgram>();
+    readonly isLive = input(false);
+    readonly showArchiveBadge = input(false);
+}
+
+describe('EpgListComponent', () => {
+    let fixture: ComponentFixture<EpgListComponent>;
+    let component: EpgListComponent;
+    let store: { select: jest.Mock; dispatch: jest.Mock };
+    let epgService: { currentEpgPrograms$: BehaviorSubject<EpgProgram[]> };
+    let translateService: {
+        currentLang: string;
+        defaultLang: string;
+        onLangChange: BehaviorSubject<unknown>;
+    };
+    let originalRequestAnimationFrame: typeof window.requestAnimationFrame;
+
+    const fixedNow = new Date('2026-04-05T12:00:00.000Z');
+    const controlledChannel: Channel = {
+        id: 'channel-101',
+        name: 'Channel 101',
+        url: 'https://example.com/live.m3u8',
+        group: { title: 'News' },
+        tvg: {
+            id: 'channel-101',
+            name: 'Channel 101',
+            url: '',
+            logo: 'channel-101.png',
+            rec: '3',
+        },
+        http: { referrer: '', 'user-agent': '', origin: '' },
+        radio: 'false',
+        epgParams: '',
+    };
+
+    beforeEach(async () => {
+        jest.useFakeTimers();
+        jest.setSystemTime(fixedNow);
+
+        originalRequestAnimationFrame = window.requestAnimationFrame;
+        requestAnimationFrameQueue = [];
+        window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+            requestAnimationFrameQueue.push(callback);
+            return requestAnimationFrameQueue.length;
+        }) as typeof window.requestAnimationFrame;
+
+        store = {
+            select: jest.fn().mockReturnValue(of(null)),
+            dispatch: jest.fn(),
+        };
+        epgService = {
+            currentEpgPrograms$: new BehaviorSubject<EpgProgram[]>([]),
+        };
+        translateService = {
+            currentLang: 'en',
+            defaultLang: 'en',
+            onLangChange: new BehaviorSubject<unknown>(null),
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [EpgListComponent, NoopAnimationsModule],
+            providers: [
+                { provide: Store, useValue: store },
+                { provide: EpgService, useValue: epgService },
+                { provide: TranslateService, useValue: translateService },
+            ],
+        })
+            .overrideComponent(EpgListComponent, {
+                remove: {
+                    imports: [EpgListItemComponent, TranslatePipe],
+                },
+                add: {
+                    imports: [
+                        StubEpgListItemComponent,
+                        MockPipe(
+                            TranslatePipe,
+                            (value: string | null | undefined) => value ?? ''
+                        ),
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(EpgListComponent);
+        component = fixture.componentInstance;
+        fixture.componentRef.setInput('controlledChannel', controlledChannel);
+        fixture.componentRef.setInput('controlledArchiveDays', 3);
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        window.requestAnimationFrame = originalRequestAnimationFrame;
+        jest.useRealTimers();
+    });
+
+    it('auto-scrolls once on the initial current-day load', () => {
+        fixture.componentRef.setInput('controlledPrograms', buildPrograms());
+
+        fixture.detectChanges();
+        const scrollToSpy = configureScrollableProgramList(fixture);
+
+        flushAnimationFrames();
+
+        expect(scrollToSpy).toHaveBeenCalledTimes(1);
+        expect(scrollToSpy).toHaveBeenCalledWith({ top: 172 });
+    });
+
+    it('does not re-trigger auto-scroll on timer-driven updates', () => {
+        fixture.componentRef.setInput('controlledPrograms', buildPrograms());
+
+        fixture.detectChanges();
+        const scrollToSpy = configureScrollableProgramList(fixture);
+        flushAnimationFrames();
+
+        scrollToSpy.mockClear();
+        jest.advanceTimersByTime(30_000);
+        fixture.detectChanges();
+        flushAnimationFrames();
+
+        expect(scrollToSpy).not.toHaveBeenCalled();
+    });
+
+    it('keeps older same-day rows reachable after the initial scroll', () => {
+        fixture.componentRef.setInput('controlledPrograms', buildPrograms());
+
+        fixture.detectChanges();
+        const scrollToSpy = configureScrollableProgramList(fixture);
+        const programList = fixture.nativeElement.querySelector(
+            '#program-list'
+        ) as HTMLElement;
+        flushAnimationFrames();
+
+        scrollToSpy.mockClear();
+        programList.scrollTop = 0;
+        jest.advanceTimersByTime(30_000);
+        fixture.detectChanges();
+        flushAnimationFrames();
+
+        expect(programList.scrollTop).toBe(0);
+        expect(scrollToSpy).not.toHaveBeenCalled();
+    });
+
+    it('does not re-arm auto-scroll when changing dates for the same selection', () => {
+        fixture.componentRef.setInput('controlledPrograms', buildPrograms());
+
+        fixture.detectChanges();
+        const scrollToSpy = configureScrollableProgramList(fixture);
+        flushAnimationFrames();
+
+        scrollToSpy.mockClear();
+        component.changeDate('prev');
+        fixture.detectChanges();
+        component.changeDate('next');
+        fixture.detectChanges();
+        flushAnimationFrames();
+
+        expect(scrollToSpy).not.toHaveBeenCalled();
+    });
+
+    it('re-arms auto-scroll when the effective selection changes', () => {
+        fixture.componentRef.setInput('controlledPrograms', buildPrograms());
+
+        fixture.detectChanges();
+        let scrollToSpy = configureScrollableProgramList(fixture);
+        flushAnimationFrames();
+        scrollToSpy.mockClear();
+
+        fixture.componentRef.setInput(
+            'controlledPrograms',
+            buildPrograms({
+                currentStart: '2026-04-05T11:45:00.000Z',
+                currentStop: '2026-04-05T12:45:00.000Z',
+                futureStart: '2026-04-05T12:45:00.000Z',
+                futureStop: '2026-04-05T13:45:00.000Z',
+            })
+        );
+        fixture.detectChanges();
+        scrollToSpy = configureScrollableProgramList(fixture);
+        flushAnimationFrames();
+
+        expect(scrollToSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows archived rows as clickable only when archive playback is supported', () => {
+        const programs = buildPrograms();
+        fixture.componentRef.setInput('controlledPrograms', programs);
+        fixture.componentRef.setInput('archivePlaybackAvailable', false);
+
+        fixture.detectChanges();
+
+        expect(component.canActivateProgram(programs[0])).toBe(false);
+        expect(component.canActivateProgram(programs[1])).toBe(true);
+        expect(
+            fixture.nativeElement.querySelectorAll('.program-item.clickable')
+                .length
+        ).toBe(1);
+
+        fixture.componentRef.setInput('archivePlaybackAvailable', true);
+        fixture.detectChanges();
+
+        expect(component.canActivateProgram(programs[0])).toBe(true);
+        expect(
+            fixture.nativeElement.querySelectorAll('.program-item.clickable')
+                .length
+        ).toBe(2);
+    });
+
+    it('updates the selected-day header when the app language changes', () => {
+        fixture.componentRef.setInput('controlledPrograms', buildPrograms());
+        fixture.detectChanges();
+
+        translateService.currentLang = 'de';
+        translateService.onLangChange.next({ lang: 'de' });
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement
+                .querySelector('.selected-date')
+                .textContent.trim()
+        ).toContain('Sonntag');
+    });
+});
+
+function buildPrograms(overrides?: {
+    currentStart?: string;
+    currentStop?: string;
+    futureStart?: string;
+    futureStop?: string;
+}): EpgProgram[] {
+    const pastStart = '2026-04-05T09:00:00.000Z';
+    const pastStop = '2026-04-05T10:00:00.000Z';
+    const currentStart =
+        overrides?.currentStart ?? '2026-04-05T11:30:00.000Z';
+    const currentStop = overrides?.currentStop ?? '2026-04-05T12:30:00.000Z';
+    const futureStart =
+        overrides?.futureStart ?? '2026-04-05T12:30:00.000Z';
+    const futureStop = overrides?.futureStop ?? '2026-04-05T13:30:00.000Z';
+
+    return [
+        buildProgram('past', 'Past Show', pastStart, pastStop),
+        buildProgram('current', 'Current Show', currentStart, currentStop),
+        buildProgram('future', 'Future Show', futureStart, futureStop),
+    ];
+}
+
+function buildProgram(
+    channelSuffix: string,
+    title: string,
+    start: string,
+    stop: string
+): EpgProgram {
+    return {
+        start,
+        stop,
+        channel: `channel-${channelSuffix}`,
+        title,
+        desc: null,
+        category: null,
+        startTimestamp: Math.floor(Date.parse(start) / 1000),
+        stopTimestamp: Math.floor(Date.parse(stop) / 1000),
+    };
+}
+
+function configureScrollableProgramList(
+    fixture: ComponentFixture<EpgListComponent>
+): jest.Mock {
+    const programList = fixture.nativeElement.querySelector(
+        '#program-list'
+    ) as HTMLElement;
+    const currentProgram = fixture.nativeElement.querySelector(
+        '.program-item.current-program'
+    ) as HTMLElement;
+
+    let scrollTop = 0;
+    Object.defineProperty(programList, 'scrollTop', {
+        configurable: true,
+        get: () => scrollTop,
+        set: (value: number) => {
+            scrollTop = value;
+        },
+    });
+    Object.defineProperty(programList, 'clientHeight', {
+        configurable: true,
+        value: 120,
+    });
+    Object.defineProperty(currentProgram, 'offsetTop', {
+        configurable: true,
+        value: 240,
+    });
+    Object.defineProperty(currentProgram, 'offsetHeight', {
+        configurable: true,
+        value: 36,
+    });
+
+    const scrollToSpy = jest.fn(({ top }: { top: number }) => {
+        scrollTop = top;
+    });
+    programList.scrollTo = scrollToSpy as typeof programList.scrollTo;
+
+    return scrollToSpy;
+}
+
+function flushAnimationFrames(): void {
+    while (requestAnimationFrameQueue.length > 0) {
+        const callback = requestAnimationFrameQueue.shift();
+        callback?.(0);
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.ts b/libs/ui/epg/src/lib/epg-list/epg-list.component.ts
new file mode 100644
index 0000000..0979fb2
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.ts
@@ -0,0 +1,389 @@
+import { DatePipe } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    computed,
+    effect,
+    inject,
+    input,
+    output,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { EpgService } from '@iptvnator/epg/data-access';
+import { normalizeDateLocale } from '@iptvnator/pipes';
+import { Store } from '@ngrx/store';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { EpgActions, selectActive } from 'm3u-state';
+import { addDays, format, subDays } from 'date-fns';
+import { startWith } from 'rxjs';
+import { Channel, EpgChannel, EpgProgram } from 'shared-interfaces';
+import { EpgListItemComponent } from './epg-list-item/epg-list-item.component';
+
+const DATE_FORMAT = 'yyyy-MM-dd';
+
+export interface EpgProgramActivationEvent {
+    program: EpgProgram;
+    type: 'live' | 'timeshift';
+}
+
+@Component({
+    imports: [
+        DatePipe,
+        EpgListItemComponent,
+        MatIcon,
+        MatIconButton,
+        MatTooltip,
+        TranslatePipe,
+    ],
+    selector: 'app-epg-list',
+    templateUrl: './epg-list.component.html',
+    styleUrls: ['./epg-list.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EpgListComponent {
+    readonly controlledChannel = input<Channel | null>(null);
+    readonly controlledPrograms = input<EpgProgram[] | null>(null);
+    readonly controlledArchiveDays = input<number | null>(null);
+    readonly archivePlaybackAvailable = input<boolean | null>(null);
+    readonly programActivated = output<EpgProgramActivationEvent>();
+
+    private readonly store = inject(Store);
+    private readonly epgService = inject(EpgService);
+    private readonly translate = inject(TranslateService);
+
+    private readonly activeChannel = toSignal(this.store.select(selectActive), {
+        initialValue: null,
+    });
+    private readonly servicePrograms = toSignal(
+        this.epgService.currentEpgPrograms$,
+        { initialValue: [] as EpgProgram[] }
+    );
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    readonly programList = viewChild<ElementRef<HTMLElement>>('programList');
+    readonly selectedDate = signal(format(new Date(), DATE_FORMAT));
+    readonly timeNow = signal(new Date().toISOString());
+    readonly currentTimeMs = computed(() => Date.parse(this.timeNow()));
+    readonly currentLocale = computed(() => {
+        this.languageTick();
+        return normalizeDateLocale(
+            this.translate.currentLang || this.translate.defaultLang
+        );
+    });
+
+    readonly isControlled = computed(
+        () =>
+            this.controlledChannel() !== null ||
+            this.controlledPrograms() !== null
+    );
+    readonly displayChannel = computed(
+        () => this.controlledChannel() ?? this.activeChannel()
+    );
+    readonly channel = computed<EpgChannel | null>(() => {
+        const channel = this.displayChannel();
+        if (!channel) {
+            return null;
+        }
+
+        return {
+            id: channel.tvg?.id || '',
+            displayName: channel.name ? [{ lang: '', value: channel.name }] : [],
+            url: channel.url ? [channel.url] : [],
+            icon: channel.tvg?.logo ? [{ src: channel.tvg.logo }] : [],
+        };
+    });
+    readonly items = computed(
+        () => this.controlledPrograms() ?? this.servicePrograms() ?? []
+    );
+    readonly archiveDays = computed(() => {
+        const controlledArchiveDays = this.controlledArchiveDays();
+        if (controlledArchiveDays !== null) {
+            return Math.max(0, controlledArchiveDays);
+        }
+
+        const channel = this.displayChannel();
+        const value =
+            channel?.tvg?.rec || channel?.timeshift || channel?.catchup?.days;
+        return Math.max(0, Number(value ?? 0) || 0);
+    });
+    readonly timeshiftUntil = computed(() =>
+        subDays(new Date(), this.archiveDays()).toISOString()
+    );
+    readonly archivePlaybackEnabled = computed(
+        () => this.archivePlaybackAvailable() ?? (this.archiveDays() > 0)
+    );
+    readonly filteredItems = computed(() =>
+        [...this.items()]
+            .filter(
+                (item) =>
+                    getProgramDateKey(item.start, item.startTimestamp) ===
+                    this.selectedDate()
+            )
+            .sort(
+                (left, right) =>
+                    getProgramTimeMs(left.start, left.startTimestamp) -
+                    getProgramTimeMs(right.start, right.startTimestamp)
+            )
+    );
+
+    private scrollScheduled = false;
+    private activeScrollContextKey: string | null = null;
+    private lastAutoScrolledContextKey: string | null = null;
+
+    constructor() {
+        effect((onCleanup) => {
+            const intervalId = window.setInterval(() => {
+                this.timeNow.set(new Date().toISOString());
+            }, 30_000);
+
+            onCleanup(() => clearInterval(intervalId));
+        });
+
+        effect(() => {
+            const programs = this.items();
+            const channel = this.displayChannel();
+            this.currentTimeMs();
+
+            if (!this.isControlled()) {
+                this.store.dispatch(
+                    EpgActions.setEpgAvailableFlag({
+                        value: programs.length > 0,
+                    })
+                );
+
+                if (programs.length > 0) {
+                    const currentProgram = this.findCurrentProgram(programs);
+                    if (currentProgram) {
+                        this.store.dispatch(
+                            EpgActions.setCurrentEpgProgram({
+                                program: currentProgram,
+                            })
+                        );
+                    } else {
+                        this.store.dispatch(EpgActions.resetActiveEpgProgram());
+                    }
+                } else {
+                    this.store.dispatch(EpgActions.resetActiveEpgProgram());
+                }
+            }
+
+            if (!channel && !this.isControlled()) {
+                this.store.dispatch(EpgActions.resetActiveEpgProgram());
+            }
+
+            this.updateScrollContext(channel, programs);
+            this.scheduleScrollToCurrentProgram();
+        });
+    }
+
+    changeDate(direction: 'next' | 'prev'): void {
+        const selectedDate = new Date(`${this.selectedDate()}T00:00:00`);
+        this.selectedDate.set(
+            format(
+                direction === 'next'
+                    ? addDays(selectedDate, 1)
+                    : subDays(selectedDate, 1),
+                DATE_FORMAT
+            )
+        );
+    }
+
+    activateProgram(program: EpgProgram): void {
+        const isLive = this.isProgramPlaying(program);
+        const isTimeshift = this.canPlayArchivedProgram(program);
+
+        if (!isLive && !isTimeshift) {
+            return;
+        }
+
+        if (this.isControlled()) {
+            this.programActivated.emit({
+                program,
+                type: isLive ? 'live' : 'timeshift',
+            });
+            this.timeNow.set(new Date().toISOString());
+            return;
+        }
+
+        if (isLive) {
+            this.store.dispatch(EpgActions.returnToLivePlayback());
+        } else {
+            this.store.dispatch(EpgActions.setActiveEpgProgram({ program }));
+        }
+
+        this.timeNow.set(new Date().toISOString());
+    }
+
+    canActivateProgram(program: EpgProgram): boolean {
+        return (
+            this.isProgramPlaying(program) || this.canPlayArchivedProgram(program)
+        );
+    }
+
+    canPlayArchivedProgram(program: EpgProgram): boolean {
+        return this.archivePlaybackEnabled() && this.isProgramArchived(program);
+    }
+
+    calculateProgress(program: EpgProgram): number {
+        const now = this.currentTimeMs();
+        const start = getProgramTimeMs(program.start, program.startTimestamp);
+        const stop = getProgramTimeMs(program.stop, program.stopTimestamp);
+        const total = stop - start;
+        const elapsed = now - start;
+
+        return total > 0 ? Math.min(100, Math.max(0, (elapsed / total) * 100)) : 0;
+    }
+
+    isProgramPlaying(program: EpgProgram): boolean {
+        const now = this.currentTimeMs();
+        const start = getProgramTimeMs(program.start, program.startTimestamp);
+        const stop = getProgramTimeMs(program.stop, program.stopTimestamp);
+        return now >= start && now <= stop;
+    }
+
+    isProgramArchived(program: EpgProgram): boolean {
+        if (this.archiveDays() <= 0) {
+            return false;
+        }
+
+        const now = this.currentTimeMs();
+        const start = getProgramTimeMs(program.start, program.startTimestamp);
+        const stop = getProgramTimeMs(program.stop, program.stopTimestamp);
+        const archiveLimit = Date.parse(this.timeshiftUntil());
+
+        return stop < now && start >= archiveLimit;
+    }
+
+    private findCurrentProgram(programs: EpgProgram[]): EpgProgram | undefined {
+        const now = this.currentTimeMs();
+        return programs.find((program) => {
+            const start = getProgramTimeMs(
+                program.start,
+                program.startTimestamp
+            );
+            const stop = getProgramTimeMs(program.stop, program.stopTimestamp);
+            return now >= start && now <= stop;
+        });
+    }
+
+    private updateScrollContext(
+        channel: Channel | null,
+        programs: EpgProgram[]
+    ): void {
+        const nextContextKey = buildScrollContextKey(channel, programs);
+        if (nextContextKey === this.activeScrollContextKey) {
+            return;
+        }
+
+        this.activeScrollContextKey = nextContextKey;
+        this.scrollScheduled = false;
+    }
+
+    private scheduleScrollToCurrentProgram(): void {
+        if (this.selectedDate() !== format(new Date(), DATE_FORMAT)) {
+            return;
+        }
+
+        const scrollContextKey = this.activeScrollContextKey;
+        if (
+            !scrollContextKey ||
+            this.lastAutoScrolledContextKey === scrollContextKey
+        ) {
+            return;
+        }
+
+        if (this.scrollScheduled) {
+            return;
+        }
+
+        this.scrollScheduled = true;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.scrollScheduled = false;
+                this.scrollCurrentProgramIntoView(scrollContextKey);
+            });
+        });
+    }
+
+    private scrollCurrentProgramIntoView(scrollContextKey: string): void {
+        const container = this.programList()?.nativeElement;
+        const currentProgram = container?.querySelector<HTMLElement>(
+            '.program-item.current-program'
+        );
+
+        if (!container || !currentProgram) {
+            return;
+        }
+
+        this.lastAutoScrolledContextKey = scrollContextKey;
+
+        const viewTop = container.scrollTop;
+        const viewBottom = viewTop + container.clientHeight;
+        const elementTop = currentProgram.offsetTop;
+        const elementBottom = elementTop + currentProgram.offsetHeight;
+
+        if (elementTop < viewTop) {
+            container.scrollTo({ top: Math.max(elementTop - 16, 0) });
+            return;
+        }
+
+        if (elementBottom > viewBottom) {
+            container.scrollTo({
+                top: elementBottom - container.clientHeight + 16,
+            });
+        }
+    }
+}
+
+function buildScrollContextKey(
+    channel: Channel | null,
+    programs: EpgProgram[]
+): string | null {
+    if (!channel && programs.length === 0) {
+        return null;
+    }
+
+    const channelKey =
+        channel?.tvg?.id || channel?.name || channel?.url || 'unknown-channel';
+    const programKey = programs
+        .map(
+            (program) =>
+                `${getProgramTimeMs(program.start, program.startTimestamp)}-${getProgramTimeMs(program.stop, program.stopTimestamp)}`
+        )
+        .join('|');
+
+    return `${channelKey}:${programKey}`;
+}
+
+function getProgramTimeMs(
+    isoValue: string,
+    timestampValue?: number | null
+): number {
+    if (Number.isFinite(timestampValue) && Number(timestampValue) > 0) {
+        return Number(timestampValue) * 1000;
+    }
+
+    return Date.parse(isoValue);
+}
+
+function getProgramDateKey(
+    isoValue: string,
+    timestampValue?: number | null
+): string {
+    const programTimeMs = getProgramTimeMs(isoValue, timestampValue);
+
+    if (!Number.isFinite(programTimeMs)) {
+        return '';
+    }
+
+    return format(new Date(programTimeMs), DATE_FORMAT);
+}
diff --git a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.html b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.html
new file mode 100644
index 0000000..cc22a76
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.html
@@ -0,0 +1,164 @@
+@if (isVisible()) {
+    <div
+        class="epg-progress-panel"
+        [class.epg-progress-panel--minimized]="minimized()"
+    >
+        <div class="panel-header">
+            <span class="header-title">
+                <mat-icon>live_tv</mat-icon>
+                @if (!minimized()) {
+                    {{ 'EPG.IMPORT_PROGRESS' | translate }}
+                } @else {
+                    <span class="minimized-summary">
+                        {{ loadingCount() }} loading
+                        @if (queuedCount() > 0) {
+                            , {{ queuedCount() }} queued
+                        }
+                    </span>
+                }
+            </span>
+            <div class="header-actions">
+                <button
+                    mat-icon-button
+                    class="minimize-btn"
+                    (click)="toggleMinimize()"
+                    [attr.aria-label]="
+                        minimized() ? 'Expand' : 'Minimize'
+                    "
+                >
+                    <mat-icon>
+                        {{ minimized() ? 'unfold_more' : 'unfold_less' }}
+                    </mat-icon>
+                </button>
+                <button
+                    mat-icon-button
+                    class="dismiss-all-btn"
+                    (click)="dismissAll()"
+                    [attr.aria-label]="'CLOSE' | translate"
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            </div>
+        </div>
+
+        @if (!minimized()) {
+            <div class="imports-list">
+                @for (item of activeImports; track item.url) {
+                    <div
+                        class="import-item"
+                        [class]="getStatusClass(item.status)"
+                    >
+                        <div class="item-header">
+                            <mat-icon
+                                [class.spinning]="
+                                    item.status === 'loading'
+                                "
+                            >
+                                {{ getStatusIcon(item.status) }}
+                            </mat-icon>
+                            <span class="item-url" [title]="item.url">
+                                {{ getDisplayUrl(item.url) }}
+                            </span>
+                            @if (item.status === 'error') {
+                                <button
+                                    mat-icon-button
+                                    class="retry-btn"
+                                    (click)="retry(item.url)"
+                                    [attr.aria-label]="'EPG.RETRY' | translate"
+                                    [matTooltip]="'EPG.RETRY' | translate"
+                                >
+                                    <mat-icon>refresh</mat-icon>
+                                </button>
+                            }
+                            <button
+                                mat-icon-button
+                                class="dismiss-btn"
+                                (click)="dismiss(item.url)"
+                                [attr.aria-label]="'CLOSE' | translate"
+                            >
+                                <mat-icon>close</mat-icon>
+                            </button>
+                        </div>
+
+                        @if (item.status === 'loading') {
+                            <mat-progress-bar mode="indeterminate" />
+                        }
+
+                        <div class="item-stats">
+                            @if (item.stats) {
+                                <span
+                                    class="stat-badge"
+                                    matTooltip="{{
+                                        'EPG.TOTAL_CHANNELS' | translate
+                                    }}"
+                                >
+                                    <mat-icon>tv</mat-icon>
+                                    {{ item.stats.totalChannels }}
+                                </span>
+                                <span
+                                    class="stat-badge"
+                                    matTooltip="{{
+                                        'EPG.TOTAL_PROGRAMS' | translate
+                                    }}"
+                                >
+                                    <mat-icon>event</mat-icon>
+                                    {{ item.stats.totalPrograms }}
+                                </span>
+                            } @else if (item.error) {
+                                <span class="error-text">{{
+                                    item.error
+                                }}</span>
+                            } @else if (item.status === 'loading') {
+                                <span
+                                    >{{ 'EPG.LOADING' | translate }}...</span
+                                >
+                            }
+                        </div>
+                    </div>
+                }
+
+                @if (queuedImports.length > 0) {
+                    <div class="queue-section">
+                        <div class="queue-header">
+                            <mat-icon>queue</mat-icon>
+                            <span
+                                >{{ 'EPG.QUEUED' | translate }} ({{
+                                    queuedImports.length
+                                }})</span
+                            >
+                        </div>
+                        <div class="queue-list">
+                            @for (
+                                item of queuedImports;
+                                track item.url;
+                                let i = $index
+                            ) {
+                                <div class="queue-item">
+                                    <span class="queue-position">{{
+                                        i + 1
+                                    }}</span>
+                                    <span
+                                        class="queue-url"
+                                        [title]="item.url"
+                                    >
+                                        {{ getDisplayUrl(item.url) }}
+                                    </span>
+                                    <button
+                                        mat-icon-button
+                                        class="dismiss-btn"
+                                        (click)="dismiss(item.url)"
+                                        [attr.aria-label]="
+                                            'CLOSE' | translate
+                                        "
+                                    >
+                                        <mat-icon>close</mat-icon>
+                                    </button>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+    </div>
+}
diff --git a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
new file mode 100644
index 0000000..c032d61
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
@@ -0,0 +1,347 @@
+:host {
+    // Theme-aware tokens — map to app design tokens
+    --epg-panel-bg: var(--app-widget-bg);
+    --epg-shadow: var(--app-widget-shadow);
+    --epg-text-primary: var(--app-heading-color);
+    --epg-text-secondary: var(--app-body-color);
+    --epg-text-tertiary: var(--app-muted-color);
+    --epg-accent: var(--app-selection-color);
+    --epg-accent-glow: color-mix(
+        in srgb,
+        var(--app-selection-color) 40%,
+        transparent
+    );
+    --epg-item-hover: var(--app-hover-overlay);
+    --epg-separator: var(--app-separator);
+
+    // Status colors — semantic, not theme-dependent
+    --epg-success: #22c55e;
+    --epg-error: #ef4444;
+    --epg-queued: #a78bfa;
+}
+
+.epg-progress-panel {
+    position: fixed;
+    bottom: 20px;
+    left: 76px;
+    width: 300px;
+    max-width: calc(100vw - 96px);
+    background: var(--epg-panel-bg);
+    border-radius: 12px;
+    border: 1px solid var(--epg-separator);
+    box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.08),
+        0 8px 24px rgba(0, 0, 0, 0.18),
+        0 16px 48px rgba(0, 0, 0, 0.12);
+    z-index: 900;
+    overflow: hidden;
+    animation: slideInFromLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes slideInFromLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-16px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 8px 8px 12px;
+    border-bottom: 1px solid var(--epg-separator);
+
+    .header-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        font-size: 0.78rem;
+        letter-spacing: 0.04em;
+        color: var(--epg-text-primary);
+        text-transform: uppercase;
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+            color: var(--epg-accent);
+        }
+
+        .minimized-summary {
+            font-size: 0.78rem;
+            font-weight: 500;
+            text-transform: none;
+            letter-spacing: normal;
+            color: var(--epg-text-secondary);
+        }
+    }
+
+    .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0;
+    }
+
+    .minimize-btn,
+    .dismiss-all-btn {
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        line-height: 28px;
+        border-radius: 8px;
+        color: var(--epg-text-tertiary);
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+}
+
+.epg-progress-panel--minimized {
+    width: auto;
+    min-width: 180px;
+    max-width: 300px;
+
+    .panel-header {
+        border-bottom: none;
+    }
+}
+
+.imports-list {
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 4px 0;
+    scrollbar-width: thin;
+}
+
+.import-item {
+    padding: 6px 10px;
+    transition: background 0.15s ease;
+    position: relative;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--epg-separator);
+    }
+
+    &:hover {
+        background: var(--epg-item-hover);
+    }
+
+    .item-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 4px;
+
+        mat-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            flex-shrink: 0;
+        }
+
+        .item-url {
+            flex: 1;
+            font-size: 0.78rem;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: var(--epg-text-secondary);
+        }
+
+        .dismiss-btn,
+        .retry-btn {
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            line-height: 24px;
+            border-radius: 6px;
+            opacity: 0;
+            transition:
+                opacity 0.15s ease,
+                color 0.15s ease;
+            color: var(--epg-text-tertiary);
+
+            mat-icon {
+                font-size: 16px;
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        // Retry is a deliberate action — keep it discoverable, not hover-only,
+        // and use the accent color so it reads as primary.
+        .retry-btn {
+            opacity: 1;
+            color: var(--epg-accent);
+
+            &:hover {
+                color: color-mix(
+                    in srgb,
+                    var(--epg-accent) 80%,
+                    var(--epg-text-primary)
+                );
+            }
+        }
+    }
+
+    &:hover .dismiss-btn {
+        opacity: 1;
+    }
+
+    &.status-loading .item-header mat-icon {
+        color: var(--epg-accent);
+    }
+
+    &.status-complete .item-header mat-icon {
+        color: var(--epg-success);
+    }
+
+    &.status-error .item-header mat-icon {
+        color: var(--epg-error);
+    }
+}
+
+.spinning {
+    animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.item-stats {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding-left: 24px;
+    min-height: 20px;
+
+    .stat-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        font-size: 0.7rem;
+        font-weight: 500;
+        color: var(--epg-text-tertiary);
+
+        mat-icon {
+            font-size: 12px;
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    .error-text {
+        font-size: 0.72rem;
+        color: var(--epg-error);
+    }
+}
+
+.queue-section {
+    margin: 2px 0 0;
+    padding: 6px 10px 8px;
+    border-top: 1px solid var(--epg-separator);
+
+    // When queue is the only content (no active imports above),
+    // the panel-header border-bottom already provides separation —
+    // suppress this border to avoid a visible double rule.
+    &:first-child {
+        margin-top: 0;
+        border-top: none;
+    }
+}
+
+.queue-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--epg-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+
+    mat-icon {
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
+        color: var(--epg-queued);
+    }
+}
+
+.queue-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.queue-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 3px 6px;
+    border-radius: 6px;
+    color: var(--epg-text-tertiary);
+
+    .queue-position {
+        width: 16px;
+        text-align: center;
+        font-size: 0.68rem;
+        font-weight: 700;
+        color: var(--epg-queued);
+    }
+
+    .queue-url {
+        flex: 1;
+        font-size: 0.72rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .dismiss-btn {
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        line-height: 22px;
+        color: var(--epg-text-tertiary);
+
+        mat-icon {
+            font-size: 14px;
+            width: 14px;
+            height: 14px;
+        }
+    }
+}
+
+@media (max-width: 700px) {
+    .epg-progress-panel {
+        left: 76px;
+        right: 12px;
+        bottom: 12px;
+        width: auto;
+        max-width: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .epg-progress-panel {
+        left: 12px;
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.ts b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.ts
new file mode 100644
index 0000000..24b9141
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.ts
@@ -0,0 +1,91 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    EpgImportProgress,
+    EpgProgressService,
+} from '@iptvnator/epg/data-access';
+
+@Component({
+    selector: 'app-epg-progress-panel',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatTooltip,
+        MatProgressBar,
+        TranslatePipe,
+    ],
+    templateUrl: './epg-progress-panel.component.html',
+    styleUrl: './epg-progress-panel.component.scss',
+})
+export class EpgProgressPanelComponent {
+    private readonly epgProgress = inject(EpgProgressService);
+
+    readonly imports = this.epgProgress.imports;
+    readonly isVisible = this.epgProgress.isVisible;
+    readonly queuedCount = this.epgProgress.queuedCount;
+    readonly activeCount = this.epgProgress.activeCount;
+    readonly minimized = signal(false);
+
+    readonly loadingCount = computed(
+        () => this.imports().filter((i) => i.status === 'loading').length
+    );
+
+    toggleMinimize(): void {
+        this.minimized.update((v) => !v);
+    }
+
+    get activeImports() {
+        return this.imports().filter((item) => item.status !== 'queued');
+    }
+
+    get queuedImports() {
+        return this.imports()
+            .filter((item) => item.status === 'queued')
+            .sort(
+                (a, b) => (a.queuePosition ?? 0) - (b.queuePosition ?? 0)
+            );
+    }
+
+    getStatusIcon(status: EpgImportProgress['status']): string {
+        switch (status) {
+            case 'queued':
+                return 'schedule';
+            case 'loading':
+                return 'sync';
+            case 'complete':
+                return 'check_circle';
+            case 'error':
+                return 'error';
+        }
+    }
+
+    getStatusClass(status: EpgImportProgress['status']): string {
+        return `status-${status}`;
+    }
+
+    getDisplayUrl(url: string): string {
+        try {
+            const urlObject = new URL(url);
+            return urlObject.hostname + urlObject.pathname.split('/').pop();
+        } catch {
+            return url.length > 40 ? `${url.substring(0, 40)}...` : url;
+        }
+    }
+
+    dismiss(url: string): void {
+        this.epgProgress.dismiss(url);
+    }
+
+    dismissAll(): void {
+        this.epgProgress.dismissAll();
+    }
+
+    retry(url: string): void {
+        this.epgProgress.retry(url);
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.html b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.html
new file mode 100644
index 0000000..fc0ea2e
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.html
@@ -0,0 +1,41 @@
+@switch (status()) {
+    @case ('loading') {
+        <span class="status status--loading">
+            <mat-progress-spinner diameter="14" mode="indeterminate" />
+            <span class="status__label">{{ 'EPG.LOADING' | translate }}</span>
+        </span>
+    }
+    @case ('queued') {
+        <span class="status status--queued">
+            <mat-icon>schedule</mat-icon>
+            <span class="status__label">{{ 'EPG.QUEUED' | translate }}</span>
+        </span>
+    }
+    @case ('fresh') {
+        <span class="status status--fresh">
+            <mat-icon>check_circle</mat-icon>
+            <span class="status__label">{{
+                'SETTINGS.EPG_STATUS_FRESH' | translate
+            }}</span>
+        </span>
+    }
+    @case ('stale') {
+        <span class="status status--stale">
+            <mat-icon>schedule</mat-icon>
+            <span class="status__label">{{
+                'SETTINGS.EPG_STATUS_STALE' | translate
+            }}</span>
+        </span>
+    }
+    @case ('error') {
+        <span
+            class="status status--error"
+            [matTooltip]="errorMessage() ?? ''"
+        >
+            <mat-icon>error</mat-icon>
+            <span class="status__label">{{
+                'SETTINGS.EPG_STATUS_ERROR' | translate
+            }}</span>
+        </span>
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
new file mode 100644
index 0000000..c18a197
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
@@ -0,0 +1,73 @@
+:host {
+    // Theme-aware tokens
+    --badge-fresh: #22c55e;
+    --badge-stale: #f59e0b;
+    --badge-error: #ef4444;
+    --badge-queued: #a78bfa;
+    --badge-accent: var(--app-selection-color);
+
+    display: inline-flex;
+    align-items: center;
+    min-height: 22px;
+}
+
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    white-space: nowrap;
+    background: color-mix(
+        in srgb,
+        var(--badge-color, var(--app-body-color)) 14%,
+        transparent
+    );
+    color: var(--badge-color, var(--app-body-color));
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--badge-color, var(--app-body-color)) 28%,
+            transparent
+        );
+
+    mat-icon {
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
+    }
+
+    mat-progress-spinner {
+        flex-shrink: 0;
+    }
+
+    &__label {
+        line-height: 1.2;
+    }
+
+    &--loading {
+        --badge-color: var(--badge-accent);
+    }
+
+    &--queued {
+        --badge-color: var(--badge-queued);
+    }
+
+    &--fresh {
+        --badge-color: var(--badge-fresh);
+    }
+
+    &--stale {
+        --badge-color: var(--badge-stale);
+    }
+
+    &--error {
+        --badge-color: var(--badge-error);
+        cursor: help;
+    }
+}
diff --git a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.ts b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.ts
new file mode 100644
index 0000000..7356a55
--- /dev/null
+++ b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.ts
@@ -0,0 +1,91 @@
+import {
+    Component,
+    OnInit,
+    computed,
+    effect,
+    inject,
+    input,
+    signal,
+} from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EpgProgressService } from '@iptvnator/epg/data-access';
+
+type BadgeStatus =
+    | 'loading'
+    | 'queued'
+    | 'fresh'
+    | 'stale'
+    | 'error'
+    | 'unknown';
+
+@Component({
+    selector: 'app-epg-source-status',
+    standalone: true,
+    imports: [
+        MatIconModule,
+        MatProgressSpinnerModule,
+        MatTooltipModule,
+        TranslatePipe,
+    ],
+    templateUrl: './epg-source-status.component.html',
+    styleUrl: './epg-source-status.component.scss',
+})
+export class EpgSourceStatusComponent implements OnInit {
+    readonly url = input.required<string>();
+
+    private readonly epgProgress = inject(EpgProgressService);
+
+    private readonly freshnessLoaded = signal(false);
+    private readonly isFresh = signal(false);
+
+    readonly status = computed<BadgeStatus>(() => {
+        const progress = this.epgProgress
+            .imports()
+            .find((item) => item.url === this.url());
+
+        if (progress) {
+            if (progress.status === 'loading') return 'loading';
+            if (progress.status === 'queued') return 'queued';
+            if (progress.status === 'error') return 'error';
+            if (progress.status === 'complete') return 'fresh';
+        }
+
+        if (!this.freshnessLoaded()) return 'unknown';
+        return this.isFresh() ? 'fresh' : 'stale';
+    });
+
+    readonly errorMessage = computed(() =>
+        this.epgProgress
+            .imports()
+            .find((item) => item.url === this.url())?.error
+    );
+
+    constructor() {
+        // Optimistically mark as fresh when a live fetch completes for our URL,
+        // so the badge updates without waiting for another IPC round-trip.
+        effect(() => {
+            const progress = this.epgProgress
+                .imports()
+                .find((item) => item.url === this.url());
+            if (progress?.status === 'complete') {
+                this.freshnessLoaded.set(true);
+                this.isFresh.set(true);
+            }
+        });
+    }
+
+    async ngOnInit(): Promise<void> {
+        if (!window.electron?.checkEpgFreshness) {
+            return;
+        }
+        const url = this.url();
+        if (!url) return;
+
+        const result = await window.electron.checkEpgFreshness([url], 12);
+        this.isFresh.set(result.freshUrls.includes(url));
+        this.freshnessLoaded.set(true);
+    }
+}
diff --git a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.html b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.html
new file mode 100644
index 0000000..bfb9445
--- /dev/null
+++ b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.html
@@ -0,0 +1,232 @@
+<div id="epg-navigation">
+  <button
+    [matTooltip]="'CLOSE' | translate"
+    mat-icon-button
+    (click)="close()"
+    >
+    <mat-icon>close</mat-icon>
+  </button>
+  <button
+    [matTooltip]="'EPG.PREVIOUS_DAY' | translate"
+    mat-icon-button
+    (click)="switchDay('prev')"
+    >
+    <mat-icon>chevron_left</mat-icon>
+  </button>
+  <div class="today-date">
+    {{ selectedDayDate() | date: 'MMMM d, EEEE' : undefined : currentLocale() }}
+  </div>
+  <button
+    [matTooltip]="'EPG.NEXT_DAY' | translate"
+    mat-icon-button
+    (click)="switchDay('next')"
+    >
+    <mat-icon>chevron_right</mat-icon>
+  </button>
+  <button mat-icon-button (click)="zoomOut()" [disabled]="hourWidth() <= 50" matTooltip="Zoom out">
+    <mat-icon>remove</mat-icon>
+  </button>
+  <button mat-icon-button (click)="zoomIn()" [disabled]="hourWidth() >= 800" matTooltip="Zoom in">
+    <mat-icon>add</mat-icon>
+  </button>
+
+  <div class="search-container" [class.expanded]="isSearchExpanded()">
+    @if (isSearchExpanded()) {
+      <div class="channel-search">
+        <mat-icon class="search-icon">search</mat-icon>
+        <input
+          type="text"
+          [value]="channelFilter()"
+          (input)="onFilterInput($event)"
+          placeholder="Filter channels..."
+          autocomplete="off"
+          #searchInput
+        />
+        @if (channelFilter()) {
+          <button class="clear-btn" (click)="clearFilter()">
+            <mat-icon>clear</mat-icon>
+          </button>
+        }
+      </div>
+      <span class="filter-count">{{ filteredChannels().length }} / {{ channels().length }}</span>
+    }
+    <button
+      mat-icon-button
+      (click)="toggleSearch()"
+      [matTooltip]="isSearchExpanded() ? 'Close filter' : 'Filter channels'"
+      >
+      <mat-icon>{{ isSearchExpanded() ? 'filter_list_off' : 'filter_list' }}</mat-icon>
+    </button>
+  </div>
+
+  <!-- Program Search -->
+  <div class="program-search-container" [class.open]="isProgramSearchOpen()">
+    @if (isProgramSearchOpen()) {
+      <div class="program-search-input">
+        <mat-icon class="search-icon">manage_search</mat-icon>
+        <input
+          type="text"
+          [value]="programSearchQuery()"
+          (input)="onProgramSearchInput($event)"
+          placeholder="Search programs..."
+          autocomplete="off"
+          #programSearchInput
+        />
+        @if (programSearchQuery()) {
+          <button class="clear-btn" (click)="clearProgramSearch()">
+            <mat-icon>clear</mat-icon>
+          </button>
+        }
+        @if (isSearchingPrograms()) {
+          <div class="search-spinner"></div>
+        }
+      </div>
+      @if (programSearchResults().length > 0) {
+        <div class="program-search-results">
+          @for (program of programSearchResults(); track $index) {
+            <button class="search-result-item" (click)="showProgramDetails(program)">
+              <div class="result-info">
+                <span class="result-title">{{ program.title }}</span>
+                <span class="result-meta">
+                  <span class="result-time">
+                    {{ (program.startTimestamp ? program.startTimestamp * 1000 : program.start) | date: 'HH:mm' }}
+                    -
+                    {{ (program.stopTimestamp ? program.stopTimestamp * 1000 : program.stop) | date: 'HH:mm' }}
+                  </span>
+                  <span class="result-date">
+                    {{ (program.startTimestamp ? program.startTimestamp * 1000 : program.start) | date: 'MMM d' : undefined : currentLocale() }}
+                  </span>
+                </span>
+              </div>
+              <mat-icon class="result-arrow">arrow_forward</mat-icon>
+            </button>
+          }
+        </div>
+      }
+      @if (programSearchQuery().length >= 2 && programSearchResults().length === 0 && !isSearchingPrograms()) {
+        <div class="program-search-empty">
+          <mat-icon>search_off</mat-icon>
+          <span>No programs found</span>
+        </div>
+      }
+    }
+    <button
+      mat-icon-button
+      (click)="toggleProgramSearch()"
+      [matTooltip]="isProgramSearchOpen() ? 'Close program search' : 'Search programs'"
+      >
+      <mat-icon>{{ isProgramSearchOpen() ? 'close' : 'manage_search' }}</mat-icon>
+    </button>
+  </div>
+</div>
+<div class="parent" #epgContainer (scroll)="onScroll($event)">
+  <svg id="channels-column" [attr.height]="filteredChannels().length * barHeight + barHeight + 50">
+    @for (item of filteredChannels(); track item.id; let i = $index) {
+      <g>
+        <!-- channel name -->
+        <g class="channel" [class.active]="item.id === activeChannelId">
+          <rect
+            width="100"
+            [attr.height]="barHeight"
+            [attr.y]="barHeight * i + barHeight"
+            stroke="black"
+            />
+          <foreignObject
+            width="100"
+            [attr.height]="barHeight"
+            [attr.y]="barHeight * i + barHeight"
+            >
+            <div class="channel-name">
+              @if (getChannelIcon(item)) {
+                <img
+                  [src]="getChannelIcon(item)"
+                  [alt]="getChannelName(item)"
+                  style="height: 20px; width: 20px; margin-right: 8px;"
+                  >
+              }
+              <span>{{ getChannelName(item) }}</span>
+            </div>
+          </foreignObject>
+        </g>
+      </g>
+    }
+  </svg>
+  <div id="epg-container" [style.height.px]="filteredChannels().length * barHeight + barHeight + 50">
+    <svg [attr.width]="hourWidth() * 24" [attr.height]="filteredChannels().length * barHeight + barHeight + 50" id="epg-svg">
+      <!-- time headline -->
+      @for (hour of timeHeader; track hour) {
+        <g>
+          <rect
+            [matTooltip]="hour + ':00'"
+            [attr.width]="hourWidth()"
+            [attr.height]="barHeight"
+            [attr.x]="hour * hourWidth()"
+            fill="#000"
+          ></rect>
+          <text
+            [attr.x]="hour * hourWidth()"
+            y="10"
+            font-size="14"
+            fill="white"
+            transform="translate(20,20)"
+            >
+            {{ hour }}:00
+          </text>
+          <!-- vertical hour separator line -->
+          <line
+            [attr.x1]="hour * hourWidth()"
+            [attr.y1]="barHeight"
+            [attr.x2]="hour * hourWidth()"
+            [attr.y2]="filteredChannels().length * barHeight + barHeight"
+            class="hour-separator"
+          ></line>
+        </g>
+      }
+
+      <!-- epg channels with programs -->
+      @for (item of filteredChannels(); track item.id; let i = $index) {
+        <g [class.active-row]="item.id === activeChannelId">
+          @for (program of item.programs; track trackByProgram($index, program)) {
+            <g
+              [attr.transform]="'translate(' + program.startPosition + ',' + (barHeight * i + barHeight) + ')'"
+              class="program"
+              [class.highlighted]="highlightedProgramKey() === getProgramKey(program)"
+              (click)="showDescription(program)"
+              >
+              <rect
+                [attr.width]="program.width"
+                [attr.height]="barHeight"
+                [matTooltip]="program.title"
+              ></rect>
+              <foreignObject
+                [attr.width]="program.width"
+                [attr.height]="barHeight"
+                >
+                <div class="program-title">{{ program.title }}</div>
+              </foreignObject>
+            </g>
+          }
+        </g>
+      }
+
+      <!-- current time line -->
+      <line
+        [attr.x1]="currentTimeLine()"
+        y1="0"
+        [attr.x2]="currentTimeLine()"
+        [attr.y2]="filteredChannels().length * barHeight + barHeight"
+        stroke="red"
+        stroke-width="2"
+      ></line>
+    </svg>
+  </div>
+</div>
+
+<!-- Empty state when no channels match filter -->
+@if (filteredChannels().length === 0 && channelFilter()) {
+  <div class="no-results">
+    <mat-icon>search_off</mat-icon>
+    <p>No channels match "{{ channelFilter() }}"</p>
+    <button mat-button (click)="clearFilter()">Clear filter</button>
+  </div>
+}
diff --git a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
new file mode 100644
index 0000000..6b4724f
--- /dev/null
+++ b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
@@ -0,0 +1,850 @@
+// Color palette - Broadcast control room aesthetic
+$bg-deep: #0a0a0f;
+$bg-surface: #12121a;
+$bg-elevated: #1a1a24;
+$bg-hover: #24243a;
+$border-subtle: rgba(255, 255, 255, 0.06);
+$border-medium: rgba(255, 255, 255, 0.12);
+
+// Accent colors - TV broadcast vibes
+$accent-primary: #00d4aa; // Cyan/teal for time
+$accent-secondary: #8b5cf6; // Purple for programs
+$accent-tertiary: #f472b6; // Pink for highlights
+$accent-warning: #fbbf24;
+
+// Text colors
+$text-primary: #f8fafc;
+$text-secondary: rgba(248, 250, 252, 0.7);
+$text-muted: rgba(248, 250, 252, 0.4);
+
+// Gradients
+$gradient-program: linear-gradient(
+    135deg,
+    rgba(139, 92, 246, 0.15) 0%,
+    rgba(139, 92, 246, 0.05) 100%
+);
+$gradient-program-hover: linear-gradient(
+    135deg,
+    rgba(139, 92, 246, 0.3) 0%,
+    rgba(139, 92, 246, 0.15) 100%
+);
+$gradient-header: linear-gradient(
+    180deg,
+    rgba(0, 212, 170, 0.08) 0%,
+    transparent 100%
+);
+
+// Base container
+.parent {
+    display: flex;
+    background: $bg-deep;
+    color: $text-primary;
+    font-family: Roboto, 'Helvetica Neue', sans-serif;
+    position: relative;
+    overflow-y: auto;
+    height: calc(100vh - 56px);
+
+    // Custom scrollbar for vertical scroll
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $bg-surface;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(139, 92, 246, 0.4);
+        border-radius: 4px;
+
+        &:hover {
+            background: rgba(139, 92, 246, 0.6);
+        }
+    }
+}
+
+// Navigation toolbar - Frosted glass effect
+#epg-navigation {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px 12px 80px; // Left padding for macOS traffic lights
+    background: rgba(18, 18, 26, 0.85);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid $border-medium;
+    gap: 8px;
+    position: relative;
+    z-index: 100;
+    -webkit-app-region: drag;
+
+    // Subtle glow at bottom
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: linear-gradient(
+            90deg,
+            transparent 0%,
+            rgba(0, 212, 170, 0.3) 20%,
+            rgba(139, 92, 246, 0.3) 80%,
+            transparent 100%
+        );
+    }
+
+    // Button styling - exclude from drag region
+    button {
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+        transition: all 0.2s ease;
+        -webkit-app-region: no-drag;
+
+        &:not([disabled]):hover {
+            background: rgba(139, 92, 246, 0.15);
+        }
+
+        &[disabled] {
+            opacity: 0.3;
+        }
+
+        mat-icon {
+            font-size: 20px;
+        }
+    }
+}
+
+// Search container - exclude from drag region
+.search-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    -webkit-app-region: no-drag;
+
+    .channel-search {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 200px;
+        height: 36px;
+        padding: 0 12px;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid $border-subtle;
+        border-radius: 8px;
+        transition: all 0.2s ease;
+
+        &:focus-within {
+            border-color: rgba(139, 92, 246, 0.5);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        .search-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+            color: $text-muted;
+            flex-shrink: 0;
+        }
+
+        input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            outline: none;
+            font-size: 13px;
+            font-family: Roboto, 'Helvetica Neue', sans-serif;
+            color: $text-primary;
+            min-width: 0;
+
+            &::placeholder {
+                color: $text-muted;
+            }
+        }
+
+        .clear-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            background: transparent;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            color: $text-muted;
+            transition: all 0.15s ease;
+            flex-shrink: 0;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.1);
+                color: $text-primary;
+            }
+
+            mat-icon {
+                font-size: 16px;
+                width: 16px;
+                height: 16px;
+            }
+        }
+    }
+
+    .filter-count {
+        font-size: 11px;
+        color: $text-muted;
+        font-family: 'JetBrains Mono', monospace;
+        white-space: nowrap;
+    }
+
+    &.expanded {
+        .channel-search {
+            animation: slideIn 0.2s ease-out;
+        }
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        width: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        width: 200px;
+        transform: translateX(0);
+    }
+}
+
+// Program search container
+.program-search-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    -webkit-app-region: no-drag;
+
+    .program-search-input {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 220px;
+        height: 36px;
+        padding: 0 12px;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid $border-subtle;
+        border-radius: 8px;
+        transition: all 0.2s ease;
+
+        &:focus-within {
+            border-color: rgba(139, 92, 246, 0.5);
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        .search-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+            color: $accent-secondary;
+            flex-shrink: 0;
+        }
+
+        input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            outline: none;
+            font-size: 13px;
+            font-family: Roboto, 'Helvetica Neue', sans-serif;
+            color: $text-primary;
+            min-width: 0;
+
+            &::placeholder {
+                color: $text-muted;
+            }
+        }
+
+        .clear-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            background: transparent;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            color: $text-muted;
+            transition: all 0.15s ease;
+            flex-shrink: 0;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.1);
+                color: $text-primary;
+            }
+
+            mat-icon {
+                font-size: 16px;
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .search-spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid $border-subtle;
+            border-top-color: $accent-secondary;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            flex-shrink: 0;
+        }
+    }
+
+    .program-search-results {
+        position: fixed;
+        top: 60px;
+        right: 16px;
+        width: 320px;
+        max-height: 400px;
+        overflow-y: auto;
+        background: $bg-elevated;
+        border: 1px solid $border-medium;
+        border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 10000;
+
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: rgba(139, 92, 246, 0.3);
+            border-radius: 3px;
+        }
+
+        .search-result-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            border-bottom: 1px solid $border-subtle;
+            cursor: pointer;
+            text-align: left;
+            transition: background 0.15s ease;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:hover {
+                background: $bg-hover;
+
+                .result-arrow {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+
+            .result-info {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                overflow: hidden;
+            }
+
+            .result-title {
+                font-size: 13px;
+                font-weight: 500;
+                color: $text-primary;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .result-meta {
+                display: flex;
+                gap: 8px;
+                font-size: 11px;
+                color: $text-muted;
+            }
+
+            .result-time {
+                color: $accent-primary;
+                font-family: 'JetBrains Mono', monospace;
+            }
+
+            .result-date {
+                color: $text-muted;
+            }
+
+            .result-arrow {
+                font-size: 18px;
+                width: 18px;
+                height: 18px;
+                color: $accent-secondary;
+                opacity: 0;
+                transform: translateX(-4px);
+                transition: all 0.15s ease;
+            }
+        }
+    }
+
+    .program-search-empty {
+        position: fixed;
+        top: 60px;
+        right: 16px;
+        width: 220px;
+        padding: 24px 16px;
+        background: $bg-elevated;
+        border: 1px solid $border-medium;
+        border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        z-index: 10000;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        color: $text-muted;
+
+        mat-icon {
+            font-size: 24px;
+            width: 24px;
+            height: 24px;
+            opacity: 0.5;
+        }
+
+        span {
+            font-size: 12px;
+        }
+    }
+
+    &.open {
+        .program-search-input {
+            animation: slideIn 0.2s ease-out;
+        }
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes highlightPulse {
+    0%, 100% {
+        filter: drop-shadow(0 0 8px rgba(0, 212, 170, 0.6));
+    }
+    50% {
+        filter: drop-shadow(0 0 20px rgba(0, 212, 170, 0.9))
+                drop-shadow(0 0 40px rgba(0, 212, 170, 0.4));
+    }
+}
+
+// No results state
+.no-results {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: $text-muted;
+    text-align: center;
+    z-index: 100;
+
+    mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+        opacity: 0.5;
+    }
+
+    p {
+        margin: 0;
+        font-size: 14px;
+    }
+
+    button {
+        color: $accent-primary;
+    }
+}
+
+// Today's date display
+.today-date {
+    flex: 1;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    font-weight: 500;
+    color: $accent-primary;
+    text-align: center;
+    padding: 0 24px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+
+    // Glowing text effect
+    text-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
+}
+
+// Channel column
+#channels-column {
+    width: 140px;
+    flex: none;
+    border-right: 1px solid $border-medium;
+    background: $bg-surface;
+    position: relative;
+    z-index: 10;
+    min-height: calc(100vh - 6px);
+
+    // Subtle shadow for depth
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
+
+    .channel {
+        cursor: pointer;
+        transition: all 0.15s ease;
+
+        rect {
+            fill: $bg-surface;
+            stroke: $border-subtle;
+            transition: fill 0.15s ease;
+        }
+
+        &:hover rect {
+            fill: $bg-elevated;
+        }
+
+        &.active rect {
+            fill: rgba(139, 92, 246, 0.2);
+            stroke: rgba(139, 92, 246, 0.4);
+        }
+
+        &.active .channel-name {
+            color: $accent-secondary;
+            font-weight: 600;
+        }
+    }
+
+    .channel-name {
+        color: $text-primary;
+        padding: 8px 12px;
+        font-size: 11px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        letter-spacing: 0.02em;
+
+        img {
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.05);
+            padding: 2px;
+        }
+
+        span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    image {
+        object-fit: contain;
+        background: $bg-elevated;
+    }
+}
+
+// EPG container
+#epg-container {
+    width: calc(100vw - 140px);
+    overflow-x: scroll;
+    overflow-y: clip;
+    background: $bg-deep;
+    min-height: calc(100vh - 6px);
+
+    // Custom scrollbar
+    &::-webkit-scrollbar {
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $bg-surface;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(139, 92, 246, 0.4);
+        border-radius: 4px;
+
+        &:hover {
+            background: rgba(139, 92, 246, 0.6);
+        }
+    }
+}
+
+// EPG SVG container
+#epg-svg {
+    // Time header styling
+    g > rect[fill='#000'] {
+        fill: $bg-surface !important;
+    }
+
+    g > text {
+        font-family: 'JetBrains Mono', monospace !important;
+        font-size: 11px !important;
+        font-weight: 500;
+        fill: $text-secondary !important;
+        letter-spacing: 0.1em;
+    }
+
+    // Hour separator vertical lines
+    .hour-separator {
+        stroke: $border-subtle;
+        stroke-width: 1px;
+        pointer-events: none;
+    }
+
+    // Program blocks
+    .program {
+        cursor: pointer;
+
+        rect {
+            fill: $bg-elevated;
+            stroke: $border-subtle;
+            rx: 4;
+            ry: 4;
+            transition: all 0.15s ease;
+        }
+
+        &:hover rect {
+            fill: $bg-hover;
+            stroke: rgba(139, 92, 246, 0.4);
+            filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.2));
+        }
+
+        // Highlighted program (from search)
+        &.highlighted rect {
+            fill: rgba(0, 212, 170, 0.25);
+            stroke: $accent-primary;
+            stroke-width: 2px;
+            animation: highlightPulse 1s ease-in-out 3;
+        }
+
+        &.highlighted .program-title {
+            color: $accent-primary;
+            font-weight: 600;
+        }
+    }
+
+    // Active channel row highlighting
+    .active-row .program rect {
+        fill: rgba(139, 92, 246, 0.15);
+        stroke: rgba(139, 92, 246, 0.3);
+    }
+
+    .active-row .program:hover rect {
+        fill: rgba(139, 92, 246, 0.25);
+    }
+
+    .program-title {
+        color: $text-primary;
+        padding: 6px 10px;
+        font-size: 11px;
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: none;
+        letter-spacing: 0.01em;
+        line-height: 1.4;
+
+        // Subtle gradient text for depth
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    // Current time line - glowing effect
+    line[stroke='red'] {
+        stroke: $accent-primary !important;
+        stroke-width: 2px;
+        filter: drop-shadow(0 0 8px rgba(0, 212, 170, 0.6))
+            drop-shadow(0 0 16px rgba(0, 212, 170, 0.3));
+
+        // Animated pulse
+        animation: timePulse 2s ease-in-out infinite;
+    }
+}
+
+// Pulse animation for time line
+@keyframes timePulse {
+    0%,
+    100% {
+        opacity: 1;
+        filter: drop-shadow(0 0 8px rgba(0, 212, 170, 0.6))
+            drop-shadow(0 0 16px rgba(0, 212, 170, 0.3));
+    }
+    50% {
+        opacity: 0.8;
+        filter: drop-shadow(0 0 12px rgba(0, 212, 170, 0.8))
+            drop-shadow(0 0 24px rgba(0, 212, 170, 0.4));
+    }
+}
+
+// Legacy classes cleanup
+.program-item {
+    cursor: pointer;
+}
+
+rect {
+    stroke: $border-subtle;
+    cursor: pointer;
+}
+
+.channel > rect {
+    stroke: $border-subtle;
+}
+
+.program-name,
+.channel-name {
+    -webkit-line-clamp: 2;
+    height: 32px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    padding: 6px 8px;
+}
+
+#current-time-line {
+    stroke-width: 2px;
+    stroke: $accent-primary;
+}
+
+// Dark theme override (already dark, but ensure consistency)
+::ng-deep {
+    .dark-theme {
+        #epg-navigation {
+            background: rgba(18, 18, 26, 0.85);
+        }
+    }
+
+    // Light theme adjustments
+    .light-theme {
+        #epg-navigation {
+            background: rgba(255, 255, 255, 0.9);
+            border-bottom-color: rgba(0, 0, 0, 0.1);
+
+            .today-date {
+                color: #059669;
+                text-shadow: none;
+            }
+        }
+
+        .parent {
+            background: #f8fafc;
+
+            &::before {
+                background-image:
+                    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+                    linear-gradient(
+                        90deg,
+                        rgba(0, 0, 0, 0.03) 1px,
+                        transparent 1px
+                    );
+            }
+        }
+
+        #channels-column {
+            background: #ffffff;
+            border-right-color: rgba(0, 0, 0, 0.1);
+            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
+
+            .channel rect {
+                fill: #ffffff;
+                stroke: rgba(0, 0, 0, 0.08);
+            }
+
+            .channel:hover rect {
+                fill: #f1f5f9;
+            }
+
+            .channel-name {
+                color: #1e293b;
+            }
+        }
+
+        #epg-container {
+            background: #f8fafc;
+        }
+
+        #epg-svg {
+            g > rect[fill='#000'] {
+                fill: #e2e8f0 !important;
+            }
+
+            g > text {
+                fill: #64748b !important;
+            }
+
+            .program {
+                rect {
+                    fill: #ffffff;
+                    stroke: rgba(0, 0, 0, 0.08);
+                }
+
+                &:hover rect {
+                    fill: #f1f5f9;
+                    stroke: rgba(139, 92, 246, 0.4);
+                }
+            }
+
+            .program-title {
+                color: #1e293b;
+            }
+
+            line[stroke='red'] {
+                stroke: #059669 !important;
+                filter: drop-shadow(0 0 6px rgba(5, 150, 105, 0.4));
+            }
+        }
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+    #epg-navigation {
+        padding-left: 70px; // Slightly reduced for smaller screens
+    }
+
+    #channels-column {
+        width: 100px;
+
+        .channel-name {
+            font-size: 10px;
+            padding: 6px 8px;
+        }
+    }
+
+    #epg-container {
+        width: calc(100vw - 100px);
+    }
+
+    .today-date {
+        font-size: 12px;
+        padding: 0 12px;
+    }
+}
diff --git a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.ts b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.ts
new file mode 100644
index 0000000..82a69a2
--- /dev/null
+++ b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.ts
@@ -0,0 +1,473 @@
+import { DatePipe } from '@angular/common';
+import { OverlayRef } from '@angular/cdk/overlay';
+
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    ElementRef,
+    inject,
+    Input,
+    OnDestroy,
+    OnInit,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { normalizeDateLocale } from '@iptvnator/pipes';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { addDays, differenceInMinutes, format, parse, subDays } from 'date-fns';
+import { Observable, Subscription, startWith } from 'rxjs';
+import {
+    Channel,
+    EpgChannel,
+    EpgChannelWithPrograms,
+    EpgProgram,
+} from 'shared-interfaces';
+import { EpgItemDescriptionComponent } from '../epg-list/epg-item-description/epg-item-description.component';
+import { COMPONENT_OVERLAY_REF } from './overlay-ref.token';
+
+interface MultiEpgChannel extends EpgChannelWithPrograms {
+    iconUrl?: string | null;
+}
+
+interface EnrichedProgram extends EpgProgram {
+    startDate: Date;
+    stopDate: Date;
+    startPosition: number;
+    width: number;
+}
+
+interface EnrichedChannel extends MultiEpgChannel {
+    programs: EnrichedProgram[];
+}
+
+interface ProgramSearchResult extends EpgProgram {
+    channel_id?: string;
+    channelName?: string | null;
+    channel_name?: string | null;
+    display_name?: string | null;
+}
+
+@Component({
+    imports: [
+        DatePipe,
+        MatButtonModule,
+        MatIcon,
+        MatTooltip,
+        TranslatePipe,
+    ],
+    selector: 'app-multi-epg-container',
+    templateUrl: './multi-epg-container.component.html',
+    styleUrls: ['./multi-epg-container.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultiEpgContainerComponent
+    implements OnInit, AfterViewInit, OnDestroy
+{
+    readonly epgContainer = viewChild.required<ElementRef>('epgContainer');
+
+    @Input() set playlistChannels(value: Observable<Channel[]>) {
+        if (this.playlistChannelsSubscription) {
+            this.playlistChannelsSubscription.unsubscribe();
+        }
+
+        if (value) {
+            this.playlistChannelsSubscription = value.subscribe(() => {
+                this.channelsLowerRange = 0;
+                this.originalEpgData.set([]);
+                this.isLastPage.set(false);
+                this.initializeVisibleChannels();
+                this.requestPrograms();
+            });
+        }
+    }
+
+    @Input() activeChannelId: string | null = null;
+
+    // Signals
+    readonly hourWidth = signal(150);
+    readonly today = signal(format(new Date(), 'yyyyMMdd'));
+    readonly originalEpgData = signal<MultiEpgChannel[]>([]);
+    readonly isLoading = signal(false);
+    readonly isLastPage = signal(false);
+    readonly channelFilter = signal('');
+    readonly isSearchExpanded = signal(false);
+
+    // Program search signals
+    readonly isProgramSearchOpen = signal(false);
+    readonly programSearchQuery = signal('');
+    readonly programSearchResults = signal<ProgramSearchResult[]>([]);
+    readonly isSearchingPrograms = signal(false);
+    readonly highlightedProgramKey = signal<string | null>(null);
+    private searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+    private readonly translate = inject(TranslateService);
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+    readonly currentLocale = computed(() => {
+        this.languageTick();
+        return normalizeDateLocale(
+            this.translate.currentLang || this.translate.defaultLang
+        );
+    });
+    readonly selectedDayDate = computed(() =>
+        parse(this.today(), 'yyyyMMdd', new Date())
+    );
+
+    // Computed signal for enriched channels - automatically updates when dependencies change
+    readonly channels = computed(() => this.enrichProgramData());
+
+    // Computed signal for filtered channels based on search term
+    readonly filteredChannels = computed(() => {
+        const filter = this.channelFilter().toLowerCase().trim();
+        const allChannels = this.channels();
+
+        if (!filter) {
+            return allChannels;
+        }
+
+        return allChannels.filter((channel) => {
+            const name = this.getChannelName(channel).toLowerCase();
+            return name.includes(filter);
+        });
+    });
+
+    // Computed signal for current time line position
+    readonly currentTimeLine = computed(() => {
+        const now = new Date();
+        return (now.getHours() + now.getMinutes() / 60) * this.hourWidth();
+    });
+
+    // Constants
+    readonly timeHeader = Array.from({ length: 24 }, (_, i) => i);
+    readonly barHeight = 50;
+
+    // Pagination state
+    visibleChannels = 20;
+    channelsLowerRange = 0;
+    channelsUpperRange = this.visibleChannels;
+    totalChannels = 0;
+
+    private dateCache = new Map<string, Date>();
+    private interval!: ReturnType<typeof setInterval>;
+    private playlistChannelsSubscription?: Subscription;
+
+    private readonly dialog = inject(MatDialog);
+    private readonly overlayRef = inject<OverlayRef>(COMPONENT_OVERLAY_REF);
+
+    ngOnInit() {
+        // Update current time line every minute
+        this.interval = setInterval(() => {
+            // Force recomputation by updating hourWidth to same value
+            // This triggers the computed signal to recalculate
+            this.hourWidth.update((v) => v);
+        }, 60000);
+    }
+
+    ngAfterViewInit(): void {
+        this.initializeVisibleChannels();
+        this.scrollToCurrentTime();
+    }
+
+    private scrollToCurrentTime(): void {
+        const timeNow = new Date();
+        const scrollPosition =
+            (timeNow.getHours() + timeNow.getMinutes() / 60) * this.hourWidth();
+
+        requestAnimationFrame(() => {
+            const container = document.getElementById('epg-container');
+            if (container) {
+                container.scrollTo(
+                    scrollPosition < 1000 ? 0 : scrollPosition - 150,
+                    0
+                );
+            }
+        });
+    }
+
+    private initializeVisibleChannels(): void {
+        const epgContainer = this.epgContainer();
+        if (epgContainer) {
+            const containerHeight = epgContainer.nativeElement.offsetHeight;
+            const calculatedVisibleChannels = Math.floor(
+                (containerHeight - this.barHeight) / this.barHeight
+            );
+
+            this.visibleChannels = Math.max(
+                10,
+                Math.min(calculatedVisibleChannels, 20)
+            );
+            this.channelsUpperRange = this.visibleChannels;
+        }
+    }
+
+    ngOnDestroy(): void {
+        clearInterval(this.interval);
+
+        if (this.playlistChannelsSubscription) {
+            this.playlistChannelsSubscription.unsubscribe();
+        }
+
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+    }
+
+    trackByIndex(index: number): number {
+        return index;
+    }
+
+    trackByProgram(_: number, program: EnrichedProgram): string {
+        return `${program.start}|${program?.title?.toString() ?? ''}`;
+    }
+
+    async requestPrograms(): Promise<void> {
+        if (!window.electron) {
+            console.warn('Multi-EPG not available: Electron not detected');
+            return;
+        }
+
+        if (this.isLoading() || this.isLastPage()) {
+            return;
+        }
+
+        this.isLoading.set(true);
+
+        try {
+            const response = await window.electron.getEpgChannelsByRange(
+                this.channelsLowerRange,
+                this.visibleChannels
+            );
+
+            if (response && Array.isArray(response)) {
+                // Append new data to existing data
+                this.originalEpgData.update((data) => [
+                    ...data,
+                    ...(response as MultiEpgChannel[]),
+                ]);
+
+                // Update isLastPage based on the number of channels received
+                this.isLastPage.set(response.length < this.visibleChannels);
+
+                // Update range for next fetch
+                this.channelsLowerRange += response.length;
+            }
+        } catch (error) {
+            console.error('Error fetching EPG data:', error);
+        } finally {
+            this.isLoading.set(false);
+        }
+    }
+
+    onScroll(event: Event): void {
+        const target = event.target as HTMLElement;
+        const scrollTop = target.scrollTop;
+        const scrollHeight = target.scrollHeight;
+        const clientHeight = target.clientHeight;
+
+        // Load more when user scrolls to within 200px of the bottom
+        if (scrollHeight - scrollTop - clientHeight < 200) {
+            this.requestPrograms();
+        }
+    }
+
+    private getCachedDate(dateStr: string): Date {
+        let date = this.dateCache.get(dateStr);
+        if (!date) {
+            date = new Date(dateStr);
+            this.dateCache.set(dateStr, date);
+        }
+        return date;
+    }
+
+    private enrichProgramData(): EnrichedChannel[] {
+        const hourWidthValue = this.hourWidth();
+        const todayValue = this.today();
+        const data = this.originalEpgData();
+
+        return data.map((channel) => {
+            const filteredPrograms = (channel.programs || [])
+                .filter((item: EpgProgram) => {
+                    const itemDate = format(
+                        this.getCachedDate(item.start),
+                        'yyyyMMdd'
+                    );
+                    return itemDate === todayValue;
+                })
+                .map((program: EpgProgram) => {
+                    const startDate = this.getCachedDate(program.start);
+                    const stopDate = this.getCachedDate(program.stop);
+                    const startPosition =
+                        (startDate.getHours() + startDate.getMinutes() / 60) *
+                        hourWidthValue;
+                    const duration = differenceInMinutes(stopDate, startDate);
+                    const width = (duration * hourWidthValue) / 60;
+
+                    return {
+                        ...program,
+                        startDate,
+                        stopDate,
+                        startPosition,
+                        width,
+                    };
+                });
+
+            return {
+                ...channel,
+                programs: filteredPrograms,
+            };
+        });
+    }
+
+    /**
+     * Get display name from EpgChannel
+     */
+    getChannelName(channel: EpgChannel): string {
+        if (typeof channel.displayName === 'string') {
+            return channel.displayName;
+        }
+        if (
+            Array.isArray(channel.displayName) &&
+            channel.displayName.length > 0
+        ) {
+            return channel.displayName[0].value;
+        }
+        return '';
+    }
+
+    /**
+     * Get icon from EpgChannel
+     */
+    getChannelIcon(channel: EpgChannel | MultiEpgChannel): string {
+        if ('iconUrl' in channel && channel.iconUrl) {
+            return channel.iconUrl;
+        }
+        if (channel.icon && channel.icon.length > 0) {
+            return channel.icon[0].src;
+        }
+        return '';
+    }
+
+    zoomIn(): void {
+        if (this.hourWidth() >= 800) return;
+        this.hourWidth.update((v) => v + 50);
+    }
+
+    zoomOut(): void {
+        if (this.hourWidth() <= 50) return;
+        this.hourWidth.update((v) => v - 50);
+    }
+
+    toggleSearch(): void {
+        this.isSearchExpanded.update((v) => !v);
+        if (!this.isSearchExpanded()) {
+            this.channelFilter.set('');
+        }
+    }
+
+    clearFilter(): void {
+        this.channelFilter.set('');
+    }
+
+    onFilterInput(event: Event): void {
+        const input = event.target as HTMLInputElement;
+        this.channelFilter.set(input.value);
+    }
+
+    switchDay(direction: 'prev' | 'next'): void {
+        const currentDate = parse(this.today(), 'yyyyMMdd', new Date());
+        this.today.set(
+            direction === 'prev'
+                ? format(subDays(currentDate, 1), 'yyyyMMdd')
+                : format(addDays(currentDate, 1), 'yyyyMMdd')
+        );
+    }
+
+    showDescription(program: EpgProgram): void {
+        this.dialog.open(EpgItemDescriptionComponent, {
+            width: '600px',
+            data: program,
+        });
+    }
+
+    // Program search methods
+    toggleProgramSearch(): void {
+        this.isProgramSearchOpen.update((v) => !v);
+        if (!this.isProgramSearchOpen()) {
+            this.programSearchQuery.set('');
+            this.programSearchResults.set([]);
+        }
+    }
+
+    onProgramSearchInput(event: Event): void {
+        const input = event.target as HTMLInputElement;
+        const query = input.value.trim();
+        this.programSearchQuery.set(query);
+
+        // Clear previous debounce timer
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+
+        if (query.length < 2) {
+            this.programSearchResults.set([]);
+            this.isSearchingPrograms.set(false);
+            return;
+        }
+
+        // Debounce search by 500ms - show spinner only when search actually starts
+        this.searchDebounceTimer = setTimeout(async () => {
+            this.isSearchingPrograms.set(true);
+            try {
+                const results = await window.electron.searchEpgPrograms(
+                    query,
+                    20
+                );
+                this.programSearchResults.set(
+                    (results as ProgramSearchResult[]) || []
+                );
+            } catch (error) {
+                console.error('Error searching programs:', error);
+                this.programSearchResults.set([]);
+            } finally {
+                this.isSearchingPrograms.set(false);
+            }
+        }, 500);
+    }
+
+    clearProgramSearch(): void {
+        this.programSearchQuery.set('');
+        this.programSearchResults.set([]);
+    }
+
+    showProgramDetails(program: ProgramSearchResult): void {
+        // Get channel id (DB returns channel_id, EPG uses channel)
+        const channelId = program.channel_id || program.channel;
+
+        // Find channel name
+        const channel = this.channels().find((ch) => ch.id === channelId);
+        const channelName = channel ? this.getChannelName(channel) : null;
+
+        // Open the program details dialog with channel name
+        this.dialog.open(EpgItemDescriptionComponent, {
+            width: '800px',
+            data: { ...program, channelName },
+        });
+    }
+
+    getProgramKey(program: ProgramSearchResult): string {
+        const channelId = program.channel_id || program.channel;
+        return `${channelId}|${program.start}`;
+    }
+
+    close() {
+        this.overlayRef.detach();
+    }
+}
diff --git a/libs/ui/epg/src/lib/multi-epg/overlay-ref.token.ts b/libs/ui/epg/src/lib/multi-epg/overlay-ref.token.ts
new file mode 100644
index 0000000..db768fe
--- /dev/null
+++ b/libs/ui/epg/src/lib/multi-epg/overlay-ref.token.ts
@@ -0,0 +1,9 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Injection token for providing OverlayRef to dynamically created overlay components
+ */
+export const COMPONENT_OVERLAY_REF = new InjectionToken<OverlayRef>(
+    'COMPONENT_OVERLAY_REF'
+);
diff --git a/libs/ui/epg/tsconfig.json b/libs/ui/epg/tsconfig.json
new file mode 100644
index 0000000..f7fcb0d
--- /dev/null
+++ b/libs/ui/epg/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/ui/epg/tsconfig.lib.json b/libs/ui/epg/tsconfig.lib.json
new file mode 100644
index 0000000..03dbd18
--- /dev/null
+++ b/libs/ui/epg/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/ui/pipes/README.md b/libs/ui/pipes/README.md
new file mode 100644
index 0000000..3c4b4bb
--- /dev/null
+++ b/libs/ui/pipes/README.md
@@ -0,0 +1,7 @@
+# @iptvnator/pipes
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @iptvnator/pipes` to execute the unit tests.
diff --git a/libs/ui/pipes/eslint.config.mjs b/libs/ui/pipes/eslint.config.mjs
new file mode 100644
index 0000000..937c5f4
--- /dev/null
+++ b/libs/ui/pipes/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'lib',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'lib',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/ui/pipes/jest.config.ts b/libs/ui/pipes/jest.config.ts
new file mode 100644
index 0000000..e0da613
--- /dev/null
+++ b/libs/ui/pipes/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: '@iptvnator/pipes',
+    preset: '../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../coverage/libs/ui/pipes',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/ui/pipes/project.json b/libs/ui/pipes/project.json
new file mode 100644
index 0000000..ef437be
--- /dev/null
+++ b/libs/ui/pipes/project.json
@@ -0,0 +1,28 @@
+{
+    "name": "@iptvnator/pipes",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/ui/pipes/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:shared-ui", "type:util"],
+    "targets": {
+        "test": {
+            "executor": "nx:run-commands",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "command": [
+                    "node",
+                    "./tools/testing/run-web-esm-lib-tests.mjs",
+                    "libs/ui/pipes/src"
+                ],
+                "env": {
+                    "NODE_OPTIONS": "--experimental-vm-modules"
+                },
+                "forwardAllArgs": true
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/ui/pipes/src/index.ts b/libs/ui/pipes/src/index.ts
new file mode 100644
index 0000000..627599f
--- /dev/null
+++ b/libs/ui/pipes/src/index.ts
@@ -0,0 +1,4 @@
+export * from './lib/filter.pipe';
+export * from './lib/date-format.util';
+export * from './lib/safe.pipe';
+export * from './lib/sort.pipe';
diff --git a/libs/ui/pipes/src/lib/date-format.util.spec.ts b/libs/ui/pipes/src/lib/date-format.util.spec.ts
new file mode 100644
index 0000000..98fa499
--- /dev/null
+++ b/libs/ui/pipes/src/lib/date-format.util.spec.ts
@@ -0,0 +1,24 @@
+import { formatWithIntl, normalizeDateLocale } from './date-format.util';
+
+describe('date-format.util', () => {
+    it('normalizes app locale aliases to Angular/Intl locale ids', () => {
+        expect(normalizeDateLocale('ary')).toBe('ar-MA');
+        expect(normalizeDateLocale('by')).toBe('be');
+        expect(normalizeDateLocale('zhtw')).toBe('zh-Hant');
+        expect(normalizeDateLocale('de')).toBe('de');
+        expect(normalizeDateLocale()).toBe('en');
+    });
+
+    it('formats dates with cached Intl formatters', () => {
+        expect(
+            formatWithIntl('2026-04-05T12:30:00.000Z', {
+                locale: 'de',
+                timeZone: 'UTC',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            })
+        ).toContain('12:30');
+    });
+});
diff --git a/libs/ui/pipes/src/lib/date-format.util.ts b/libs/ui/pipes/src/lib/date-format.util.ts
new file mode 100644
index 0000000..5017b72
--- /dev/null
+++ b/libs/ui/pipes/src/lib/date-format.util.ts
@@ -0,0 +1,52 @@
+const DEFAULT_DATE_LOCALE = 'en';
+
+const DATE_LOCALE_ALIASES: Record<string, string> = {
+    ary: 'ar-MA',
+    by: 'be',
+    zhtw: 'zh-Hant',
+};
+
+const formatterCache = new Map<string, Intl.DateTimeFormat>();
+
+export function normalizeDateLocale(locale?: string | null): string {
+    const normalizedLocale = String(locale ?? '').trim();
+
+    if (!normalizedLocale) {
+        return DEFAULT_DATE_LOCALE;
+    }
+
+    return (
+        DATE_LOCALE_ALIASES[normalizedLocale.toLowerCase()] ?? normalizedLocale
+    );
+}
+
+export function formatWithIntl(
+    value: Date | number | string,
+    options: Intl.DateTimeFormatOptions & {
+        locale?: string | null;
+        timeZone?: string;
+    } = {}
+): string {
+    const date =
+        value instanceof Date
+            ? value
+            : typeof value === 'number'
+              ? new Date(value)
+              : new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+
+    const { locale, ...formatOptions } = options;
+    const resolvedLocale = normalizeDateLocale(locale);
+    const cacheKey = JSON.stringify([resolvedLocale, formatOptions]);
+
+    let formatter = formatterCache.get(cacheKey);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat(resolvedLocale, formatOptions);
+        formatterCache.set(cacheKey, formatter);
+    }
+
+    return formatter.format(date);
+}
diff --git a/libs/ui/pipes/src/lib/filter.pipe.ts b/libs/ui/pipes/src/lib/filter.pipe.ts
new file mode 100644
index 0000000..0f6fc1f
--- /dev/null
+++ b/libs/ui/pipes/src/lib/filter.pipe.ts
@@ -0,0 +1,17 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filterBy',
+    standalone: true,
+})
+@Injectable()
+export class FilterPipe implements PipeTransform {
+    transform(array: any[], filter: string, property: string): any {
+        if (!array || !filter) {
+            return array;
+        }
+        return array.filter((item) =>
+            item[property].toLowerCase().includes(filter.toLowerCase())
+        );
+    }
+}
diff --git a/libs/ui/pipes/src/lib/safe.pipe.ts b/libs/ui/pipes/src/lib/safe.pipe.ts
new file mode 100644
index 0000000..d91d2fc
--- /dev/null
+++ b/libs/ui/pipes/src/lib/safe.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'safe', standalone: true })
+export class SafePipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) {}
+
+    transform(url: string) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}
diff --git a/libs/ui/pipes/src/lib/sort.pipe.ts b/libs/ui/pipes/src/lib/sort.pipe.ts
new file mode 100644
index 0000000..7cd5a73
--- /dev/null
+++ b/libs/ui/pipes/src/lib/sort.pipe.ts
@@ -0,0 +1,27 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'sortBy',
+    standalone: true,
+})
+@Injectable()
+export class SortPipe implements PipeTransform {
+    transform(array: any[], sortType: string): any {
+        if (!array || !sortType) {
+            return array;
+        }
+        return array.sort((a, b) => {
+            if (sortType === 'date') {
+              return parseInt(b.added) - parseInt(a.added);
+            } else if (sortType === 'rating') {
+              const ratingA = isNaN(parseFloat(a.rating)) ? 0 : parseFloat(a.rating);
+              const ratingB = isNaN(parseFloat(b.rating)) ? 0 : parseFloat(b.rating);
+              return ratingB - ratingA;
+            } else if (sortType === 'alpha') {
+              return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+            } else {
+              return 0;
+            }
+        });
+    }
+}
diff --git a/libs/ui/pipes/src/test-setup.ts b/libs/ui/pipes/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/ui/pipes/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/ui/pipes/tsconfig.json b/libs/ui/pipes/tsconfig.json
new file mode 100644
index 0000000..e05028a
--- /dev/null
+++ b/libs/ui/pipes/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/ui/pipes/tsconfig.lib.json b/libs/ui/pipes/tsconfig.lib.json
new file mode 100644
index 0000000..8eb88c6
--- /dev/null
+++ b/libs/ui/pipes/tsconfig.lib.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": ["src/**/*.ts"]
+}
diff --git a/libs/ui/pipes/tsconfig.spec.json b/libs/ui/pipes/tsconfig.spec.json
new file mode 100644
index 0000000..7b3e56b
--- /dev/null
+++ b/libs/ui/pipes/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/ui/playback/project.json b/libs/ui/playback/project.json
new file mode 100644
index 0000000..36936ed
--- /dev/null
+++ b/libs/ui/playback/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "ui-playback",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/ui/playback/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:playback", "type:ui"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/ui/playback/src/index.ts b/libs/ui/playback/src/index.ts
new file mode 100644
index 0000000..3865bca
--- /dev/null
+++ b/libs/ui/playback/src/index.ts
@@ -0,0 +1,10 @@
+export * from './lib/art-player/art-player.component';
+export * from './lib/audio-player/audio-player.component';
+export * from './lib/external-player-info-dialog/external-player-info-dialog.component';
+export * from './lib/html-video-player/html-video-player.component';
+export * from './lib/portal-inline-player/portal-inline-player.component';
+export * from './lib/vjs-player/vjs-player.component';
+export * from './lib/video-player/sidebar/sidebar.component';
+export * from './lib/video-player/toolbar/toolbar.component';
+export * from './lib/vod-details/vod-details.component';
+export * from './lib/web-player-view/web-player-view.component';
diff --git a/libs/ui/playback/src/lib/art-player/art-player.component.ts b/libs/ui/playback/src/lib/art-player/art-player.component.ts
new file mode 100644
index 0000000..0a588e7
--- /dev/null
+++ b/libs/ui/playback/src/lib/art-player/art-player.component.ts
@@ -0,0 +1,235 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    inject,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    SimpleChanges,
+} from '@angular/core';
+import Artplayer from 'artplayer';
+import Hls from 'hls.js';
+import { getExtensionFromUrl } from 'm3u-utils';
+import mpegts from 'mpegts.js';
+import { Channel } from 'shared-interfaces';
+
+type AudioTrackSelector = {
+    html: string | HTMLElement;
+    default?: boolean;
+};
+
+Artplayer.AUTO_PLAYBACK_TIMEOUT = 10000;
+
+@Component({
+    selector: 'app-art-player',
+    imports: [],
+    template: `<div #artplayer class="artplayer-container"></div>`,
+    styles: [
+        `
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+            .artplayer-container {
+                width: 100%;
+                height: 100%;
+            }
+        `,
+    ],
+})
+export class ArtPlayerComponent implements OnInit, OnDestroy, OnChanges {
+    @Input() channel!: Channel;
+    @Input() volume = 1;
+    @Input() showCaptions = false;
+    @Input() startTime = 0;
+    @Output() timeUpdate = new EventEmitter<{
+        currentTime: number;
+        duration: number;
+    }>();
+
+    private player!: Artplayer;
+    private hls: Hls | null = null;
+    private mpegtsPlayer: mpegts.Player | null = null;
+
+    private readonly elementRef = inject(ElementRef);
+
+    ngOnInit(): void {
+        this.initPlayer();
+    }
+
+    ngOnDestroy(): void {
+        this.destroyPlayer();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['channel'] && !changes['channel'].firstChange) {
+            this.destroyPlayer();
+            this.initPlayer();
+        }
+    }
+
+    private destroyPlayer(): void {
+        if (this.mpegtsPlayer) {
+            this.mpegtsPlayer.pause();
+            this.mpegtsPlayer.unload();
+            this.mpegtsPlayer.detachMediaElement();
+            this.mpegtsPlayer.destroy();
+            this.mpegtsPlayer = null;
+        }
+        if (this.hls) {
+            this.hls.destroy();
+            this.hls = null;
+        }
+        if (this.player) {
+            this.player.destroy();
+        }
+    }
+
+    private initPlayer(): void {
+        const el = this.elementRef.nativeElement.querySelector(
+            '.artplayer-container'
+        );
+        const extension = getExtensionFromUrl(this.channel?.url ?? '');
+        const isLive = extension === 'm3u8' || extension === 'ts';
+
+        this.player = new Artplayer({
+            container: el,
+            url: this.channel.url + (this.channel.epgParams || ''),
+            volume: this.volume,
+            isLive: isLive,
+            autoplay: true,
+            type: this.getVideoType(this.channel.url),
+            pip: true,
+            autoPlayback: true,
+            autoSize: true,
+            autoMini: true,
+            screenshot: true,
+            setting: true,
+            playbackRate: true,
+            aspectRatio: true,
+            fullscreen: true,
+            fullscreenWeb: true,
+            playsInline: true,
+            airplay: true,
+            backdrop: true,
+            mutex: true,
+            theme: '#6366f1',
+            customType: {
+                m3u8: (video: HTMLVideoElement, url: string) => {
+                    if (Hls.isSupported()) {
+                        if (this.hls) {
+                            this.hls.destroy();
+                        }
+                        this.hls = new Hls();
+                        this.hls.loadSource(url);
+                        this.hls.attachMedia(video);
+                        this.setupHlsAudioTracks();
+                    } else if (
+                        video.canPlayType('application/vnd.apple.mpegurl')
+                    ) {
+                        video.src = url;
+                    }
+                },
+                ts: (video: HTMLVideoElement, url: string) => {
+                    if (mpegts.isSupported()) {
+                        if (this.mpegtsPlayer) {
+                            this.mpegtsPlayer.destroy();
+                        }
+                        this.mpegtsPlayer = mpegts.createPlayer({
+                            type: 'mpegts',
+                            isLive: true,
+                            url: url,
+                        });
+                        this.mpegtsPlayer.attachMediaElement(video);
+                        this.mpegtsPlayer.load();
+                        this.mpegtsPlayer.play();
+                    }
+                },
+                mkv: function (video: HTMLVideoElement, url: string) {
+                    video.src = url;
+                    video.onerror = () => {
+                        console.error('Error loading MKV file:', video.error);
+                        video.src = url;
+                    };
+                },
+            },
+        });
+
+        if (this.startTime > 0) {
+            this.player.on('ready', () => {
+                this.player.seek = this.startTime;
+            });
+        }
+
+        this.player.on('video:timeupdate', () => {
+            this.timeUpdate.emit({
+                currentTime: this.player.currentTime,
+                duration: this.player.duration,
+            });
+        });
+    }
+
+    /**
+     * Listens for HLS.js audio tracks and adds a settings menu entry
+     * to ArtPlayer for switching between available audio tracks.
+     */
+    private setupHlsAudioTracks(): void {
+        if (!this.hls) return;
+
+        const hls = this.hls;
+
+        hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, () => {
+            const tracks = hls.audioTracks;
+            if (!tracks || tracks.length <= 1) return;
+
+            const audioTrackSetting = {
+                html: 'Audio',
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="white">
+                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+                </svg>`,
+                width: 220,
+                tooltip: tracks[hls.audioTrack]?.name || '',
+                selector: tracks.map((track, index) => ({
+                    html: track.name || track.lang || `Track ${index + 1}`,
+                    default: index === hls.audioTrack,
+                })),
+                onSelect: function (this: Artplayer, item: AudioTrackSelector) {
+                    const selectedLabel =
+                        typeof item.html === 'string'
+                            ? item.html
+                            : item.html.textContent ?? '';
+                    const selectedIndex = tracks.findIndex(
+                        (t, i) =>
+                            (t.name || t.lang || `Track ${i + 1}`) ===
+                            selectedLabel
+                    );
+                    if (selectedIndex >= 0) {
+                        hls.audioTrack = selectedIndex;
+                    }
+                },
+            };
+
+            this.player.setting.add(audioTrackSetting);
+        });
+    }
+
+    private getVideoType(url: string): string {
+        const extension = getExtensionFromUrl(url);
+        switch (extension) {
+            case 'mkv':
+                return 'video/matroska';
+            case 'm3u8':
+                return 'm3u8';
+            case 'mp4':
+                return 'mp4';
+            case 'ts':
+                return 'ts';
+            default:
+                return 'auto';
+        }
+    }
+}
diff --git a/libs/ui/playback/src/lib/audio-player/audio-player.component.scss b/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
new file mode 100644
index 0000000..b1618fa
--- /dev/null
+++ b/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
@@ -0,0 +1,299 @@
+// ─── Radio Player — cinematic hero layout ────────────────────────────────────
+// Mirrors the content-hero/vod-details pattern: blurred backdrop, vignette,
+// floating artwork + controls centred in the available space.
+
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+// ─── Hero container ──────────────────────────────────────────────────────────
+.radio-hero {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--mat-sys-surface);
+}
+
+// ─── Blurred backdrop (station logo, blown up) ──────────────────────────────
+.backdrop {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(60px) saturate(1.4) brightness(0.7);
+    transform: scale(1.6);
+    opacity: 0.55;
+    z-index: 0;
+}
+
+// ─── Vignette overlay (matches content-hero pattern) ─────────────────────────
+.vignette {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    background:
+        radial-gradient(
+            ellipse 80% 70% at 50% 40%,
+            transparent 0%,
+            var(--mat-sys-surface) 100%
+        );
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            to bottom,
+            transparent 0%,
+            color-mix(in srgb, var(--mat-sys-surface) 40%, transparent) 50%,
+            var(--mat-sys-surface) 85%
+        );
+    }
+}
+
+// ─── Floating content stage ──────────────────────────────────────────────────
+.stage {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 20px;
+    padding: 32px 24px;
+    box-sizing: border-box;
+    animation: fadeUp 0.5s ease-out both;
+}
+
+// ─── Artwork card ────────────────────────────────────────────────────────────
+.artwork {
+    max-width: 220px;
+    max-height: 220px;
+    border-radius: 18px;
+    overflow: hidden;
+    background: var(--mat-sys-surface-container);
+    box-shadow:
+        0 8px 40px rgba(0, 0, 0, 0.22),
+        0 2px 8px rgba(0, 0, 0, 0.12);
+    transition: box-shadow 0.4s ease, transform 0.4s ease;
+    flex-shrink: 0;
+
+    &.is-playing {
+        animation: artwork-pulse 3s ease-in-out infinite;
+        transform: translateY(-2px);
+    }
+
+    img {
+        display: block;
+        max-width: 220px;
+        max-height: 220px;
+        width: auto;
+        height: auto;
+    }
+}
+
+// Fallback keeps a fixed square since there's no image to dictate size
+.artwork-fallback {
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(
+        145deg,
+        var(--mat-sys-surface-container) 0%,
+        var(--app-selection-surface) 100%
+    );
+
+    mat-icon {
+        font-size: 64px;
+        width: 64px;
+        height: 64px;
+        color: var(--app-selection-color, var(--mat-sys-primary));
+        opacity: 0.5;
+    }
+}
+
+// ─── Station name ────────────────────────────────────────────────────────────
+.station-name {
+    margin: 4px 0 0;
+    font-family: 'DM Sans', sans-serif;
+    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    line-height: 1.2;
+    color: var(--mat-sys-on-surface);
+    text-align: center;
+    max-width: 380px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
+}
+
+// ─── Live / Paused badge ─────────────────────────────────────────────────────
+.station-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--mat-sys-on-surface-variant);
+    padding: 3px 12px;
+    border-radius: 999px;
+    border: 1px solid var(--mat-sys-outline-variant);
+    background: color-mix(in srgb, var(--mat-sys-surface-container) 60%, transparent);
+    backdrop-filter: blur(6px);
+
+    &.live {
+        color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+        border-color: color-mix(in srgb, var(--radio-accent, var(--app-selection-color)) 52%, transparent);
+        background: color-mix(in srgb, var(--radio-accent, var(--app-selection-color)) 14%, transparent);
+    }
+}
+
+.pulse {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    animation: pulse-ring 1.8s ease-in-out infinite;
+}
+
+@keyframes pulse-ring {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50%      { opacity: 0.5; transform: scale(1.6); }
+}
+
+// ─── Transport controls ──────────────────────────────────────────────────────
+.transport {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-top: 4px;
+}
+
+.skip-btn {
+    color: var(--mat-sys-on-surface-variant);
+    transition: color 0.15s ease, transform 0.15s ease;
+
+    &:hover {
+        color: var(--mat-sys-on-surface);
+        transform: scale(1.08);
+    }
+
+    mat-icon {
+        font-size: 28px;
+        width: 28px;
+        height: 28px;
+    }
+}
+
+.play-btn {
+    --mdc-fab-container-color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+    --mat-fab-container-color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+    --mdc-fab-icon-color: #fff;
+    --mat-fab-foreground-color: #fff;
+    --mat-fab-icon-color: #fff;
+    --mat-fab-container-shape: 50%;
+    --mdc-fab-container-shape: 50%;
+    box-shadow: none !important;
+    transition: transform 0.2s ease;
+
+    &:hover {
+        transform: scale(1.06);
+    }
+
+    mat-icon {
+        font-size: 32px;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+// ─── Volume row ──────────────────────────────────────────────────────────────
+.volume-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    width: 200px;
+    margin-top: 4px;
+}
+
+.vol-icon {
+    flex-shrink: 0;
+    color: var(--mat-sys-on-surface-variant);
+    transform: scale(0.8);
+}
+
+.vol-slider {
+    flex: 1;
+    --mdc-slider-active-track-color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+    --mdc-slider-handle-color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+    --mat-slider-active-track-color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+    --mat-slider-handle-color: var(--radio-accent, var(--app-selection-color, var(--mat-sys-primary)));
+    --mdc-slider-inactive-track-color: var(--mat-sys-outline-variant);
+    --mdc-slider-handle-width: 12px;
+    --mdc-slider-handle-height: 12px;
+}
+
+// ─── Entrance ────────────────────────────────────────────────────────────────
+@keyframes fadeUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes artwork-pulse {
+    0%, 100% {
+        box-shadow:
+            0 8px 40px rgba(0, 0, 0, 0.22),
+            0 0 0 1px color-mix(in srgb, var(--radio-accent, var(--app-selection-color)) 22%, transparent),
+            0 0 32px color-mix(in srgb, var(--radio-accent, var(--app-selection-color)) 34%, transparent);
+    }
+    50% {
+        box-shadow:
+            0 12px 56px rgba(0, 0, 0, 0.3),
+            0 0 0 1px color-mix(in srgb, var(--radio-accent, var(--app-selection-color)) 52%, transparent),
+            0 0 64px color-mix(in srgb, var(--radio-accent, var(--app-selection-color)) 34%, transparent);
+    }
+}
+
+// ─── Responsive ──────────────────────────────────────────────────────────────
+@media only screen and (max-width: 599px) {
+    .artwork {
+        max-width: 160px;
+        max-height: 160px;
+        border-radius: 14px;
+
+        img { max-width: 160px; max-height: 160px; }
+    }
+
+    .artwork-fallback { width: 160px; height: 160px; }
+    .stage { gap: 16px; padding: 24px 16px; }
+    .transport { gap: 18px; }
+}
+
+@media only screen and (max-height: 480px) {
+    .artwork {
+        max-width: 120px;
+        max-height: 120px;
+        border-radius: 12px;
+
+        img { max-width: 120px; max-height: 120px; }
+    }
+
+    .artwork-fallback { width: 120px; height: 120px; }
+
+    .stage { gap: 10px; padding: 16px 12px; }
+    .station-name { font-size: 1rem; }
+}
diff --git a/libs/ui/playback/src/lib/audio-player/audio-player.component.ts b/libs/ui/playback/src/lib/audio-player/audio-player.component.ts
new file mode 100644
index 0000000..403f616
--- /dev/null
+++ b/libs/ui/playback/src/lib/audio-player/audio-player.component.ts
@@ -0,0 +1,246 @@
+import {
+    Component,
+    DestroyRef,
+    ElementRef,
+    HostListener,
+    computed,
+    effect,
+    inject,
+    input,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { extractDominantColor } from './extract-color';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSliderModule } from '@angular/material/slider';
+import { Store } from '@ngrx/store';
+import { ChannelActions } from 'm3u-state';
+
+@Component({
+    selector: 'app-audio-player',
+    template: `
+        <div class="radio-hero">
+            @if (displayIcon() && !logoError()) {
+                <div
+                    class="backdrop"
+                    [style.backgroundImage]="
+                        'url(' + displayIcon() + ')'
+                    "
+                ></div>
+            }
+            <div class="vignette"></div>
+
+            <div class="stage">
+                <div
+                    class="artwork"
+                    [class.is-playing]="playState() === 'play'"
+                >
+                    @if (displayIcon() && !logoError()) {
+                        <img
+                            [src]="displayIcon()"
+                            alt=""
+                            (error)="logoError.set(true)"
+                        />
+                    } @else {
+                        <div class="artwork-fallback">
+                            <mat-icon>radio</mat-icon>
+                        </div>
+                    }
+                </div>
+
+                <h2 class="station-name">
+                    {{ channelName() || 'Radio' }}
+                </h2>
+                <span class="station-badge" [class.live]="playState() === 'play'">
+                    @if (playState() === 'play') {
+                        <span class="pulse"></span> LIVE
+                    } @else {
+                        PAUSED
+                    }
+                </span>
+
+                <div class="transport">
+                    <button
+                        mat-icon-button
+                        class="skip-btn"
+                        (click)="switchChannel('previous')"
+                    >
+                        <mat-icon>skip_previous</mat-icon>
+                    </button>
+
+                    <button
+                        class="play-btn"
+                        mat-fab
+                        (click)="
+                            playState() === 'play' ? stop() : play()
+                        "
+                    >
+                        <mat-icon>{{
+                            playState() === 'play'
+                                ? 'pause'
+                                : 'play_arrow'
+                        }}</mat-icon>
+                    </button>
+
+                    <button
+                        mat-icon-button
+                        class="skip-btn"
+                        (click)="switchChannel('next')"
+                    >
+                        <mat-icon>skip_next</mat-icon>
+                    </button>
+                </div>
+
+                <div class="volume-row">
+                    <button
+                        mat-icon-button
+                        class="vol-icon"
+                        (click)="mute()"
+                    >
+                        <mat-icon>{{ volumeIcon() }}</mat-icon>
+                    </button>
+                    <mat-slider
+                        class="vol-slider"
+                        min="0"
+                        max="1"
+                        step="0.05"
+                    >
+                        <input
+                            matSliderThumb
+                            [ngModel]="volume()"
+                            (ngModelChange)="setVolume($event)"
+                        />
+                    </mat-slider>
+                </div>
+            </div>
+
+            <audio preload="metadata" autoplay #audio></audio>
+        </div>
+    `,
+    styleUrls: ['./audio-player.component.scss'],
+    imports: [MatSliderModule, MatIconModule, MatButtonModule, FormsModule],
+})
+export class AudioPlayerComponent {
+    readonly icon = input<string>('');
+    readonly url = input.required<string>();
+    readonly channelName = input<string>('');
+
+    readonly playState = signal<'play' | 'paused'>('paused');
+    readonly volume = signal(1);
+    readonly isMuted = signal(false);
+    readonly logoError = signal(false);
+
+    readonly displayIcon = computed(() => this.icon() || null);
+    readonly volumeIcon = computed(() => {
+        const v = this.volume();
+        if (v === 0 || this.isMuted()) return 'volume_off';
+        return v < 0.5 ? 'volume_down' : 'volume_up';
+    });
+
+    readonly audioRef =
+        viewChild.required<ElementRef<HTMLAudioElement>>('audio');
+
+    private store = inject(Store);
+    private destroyRef = inject(DestroyRef);
+    private hostEl = inject(ElementRef);
+    private fallbackVolume = 1;
+
+    constructor() {
+        const saved = parseFloat(localStorage.getItem('volume') ?? '1');
+        if (!isNaN(saved)) {
+            this.volume.set(Math.max(0, Math.min(1, saved)));
+        }
+
+        effect(() => {
+            const url = this.url();
+            const audio = this.audioRef()?.nativeElement;
+            if (!audio || !url) return;
+            audio.src = url;
+            audio.volume = this.volume();
+            audio.load();
+            this.logoError.set(false);
+            this.play();
+        });
+
+        effect(() => {
+            const iconUrl = this.displayIcon();
+            this.hostEl.nativeElement.style.removeProperty('--radio-accent');
+            if (!iconUrl) return;
+            extractDominantColor(iconUrl).then((color) => {
+                if (color) {
+                    this.hostEl.nativeElement.style.setProperty(
+                        '--radio-accent',
+                        color
+                    );
+                }
+            });
+        });
+
+        this.destroyRef.onDestroy(() => {
+            this.audioRef()?.nativeElement?.pause();
+        });
+    }
+
+    @HostListener('document:keydown', ['$event'])
+    handleKeyboard(event: KeyboardEvent) {
+        if (
+            event.target instanceof HTMLInputElement ||
+            event.target instanceof HTMLTextAreaElement
+        )
+            return;
+
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.setVolume(this.volume() + 0.05);
+        } else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.setVolume(this.volume() - 0.05);
+        } else if (event.key === 'm' || event.key === 'M') {
+            event.preventDefault();
+            this.mute();
+        }
+    }
+
+    play() {
+        const audio = this.audioRef()?.nativeElement;
+        if (!audio) return;
+        audio.play().catch((err) => console.log(err));
+        this.playState.set('play');
+    }
+
+    stop() {
+        this.audioRef()?.nativeElement?.pause();
+        this.playState.set('paused');
+    }
+
+    setVolume(value: number) {
+        const clamped =
+            Math.round(Math.max(0, Math.min(1, value)) * 100) / 100;
+        this.volume.set(clamped);
+        const audio = this.audioRef()?.nativeElement;
+        if (audio) audio.volume = clamped;
+        localStorage.setItem('volume', String(clamped));
+    }
+
+    mute() {
+        const audio = this.audioRef()?.nativeElement;
+        if (!audio) return;
+        audio.muted = !audio.muted;
+        this.isMuted.set(audio.muted);
+        if (audio.muted) {
+            this.fallbackVolume = this.volume();
+            this.setVolume(0);
+        } else {
+            this.setVolume(this.fallbackVolume);
+        }
+    }
+
+    switchChannel(direction: 'next' | 'previous') {
+        this.store.dispatch(
+            ChannelActions.setAdjacentChannelAsActive({ direction })
+        );
+    }
+
+}
diff --git a/libs/ui/playback/src/lib/audio-player/extract-color.ts b/libs/ui/playback/src/lib/audio-player/extract-color.ts
new file mode 100644
index 0000000..863777d
--- /dev/null
+++ b/libs/ui/playback/src/lib/audio-player/extract-color.ts
@@ -0,0 +1,94 @@
+/**
+ * Extracts the most vibrant dominant color from an image URL.
+ *
+ * Loads the image in a separate Image object with crossOrigin="anonymous"
+ * so the canvas isn't tainted. If the server doesn't support CORS,
+ * the extraction silently fails and returns null.
+ *
+ * Returns a promise that resolves to an `rgb(r, g, b)` string or `null`.
+ */
+export function extractDominantColor(url: string): Promise<string | null> {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(sampleColor(img));
+        img.onerror = () => resolve(null);
+        img.src = url;
+    });
+}
+
+function sampleColor(img: HTMLImageElement): string | null {
+    try {
+        const size = 64;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        if (!ctx) return null;
+
+        ctx.drawImage(img, 0, 0, size, size);
+        const { data } = ctx.getImageData(0, 0, size, size);
+
+        // Bucket pixels into a 4x4x4 colour grid (64 buckets),
+        // then pick the most frequent bucket with enough saturation.
+        const buckets = new Map<
+            number,
+            { r: number; g: number; b: number; count: number }
+        >();
+
+        for (let i = 0; i < data.length; i += 16) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            const a = data[i + 3];
+            if (a < 128) continue;
+
+            const lum = r * 0.299 + g * 0.587 + b * 0.114;
+            if (lum < 30 || lum > 230) continue;
+
+            const key = ((r >> 6) << 4) | ((g >> 6) << 2) | (b >> 6);
+            const existing = buckets.get(key);
+            if (existing) {
+                existing.r += r;
+                existing.g += g;
+                existing.b += b;
+                existing.count++;
+            } else {
+                buckets.set(key, { r, g, b, count: 1 });
+            }
+        }
+
+        if (buckets.size === 0) return null;
+
+        let best: { r: number; g: number; b: number; count: number } | null =
+            null;
+        let bestScore = 0;
+
+        for (const bucket of buckets.values()) {
+            const avg = {
+                r: bucket.r / bucket.count,
+                g: bucket.g / bucket.count,
+                b: bucket.b / bucket.count,
+            };
+            const max = Math.max(avg.r, avg.g, avg.b);
+            const min = Math.min(avg.r, avg.g, avg.b);
+            const saturation = max === 0 ? 0 : (max - min) / max;
+            const score = bucket.count * (0.3 + saturation * 0.7);
+
+            if (score > bestScore) {
+                bestScore = score;
+                best = bucket;
+            }
+        }
+
+        if (!best) return null;
+
+        const r = Math.round(best.r / best.count);
+        const g = Math.round(best.g / best.count);
+        const b = Math.round(best.b / best.count);
+
+        return `rgb(${r}, ${g}, ${b})`;
+    } catch {
+        return null;
+    }
+}
diff --git a/libs/ui/playback/src/lib/external-player-info-dialog/external-player-info-dialog.component.ts b/libs/ui/playback/src/lib/external-player-info-dialog/external-player-info-dialog.component.ts
new file mode 100644
index 0000000..61f8d1e
--- /dev/null
+++ b/libs/ui/playback/src/lib/external-player-info-dialog/external-player-info-dialog.component.ts
@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    template: `
+        <h2 mat-dialog-title>{{ 'INFORMATION' | translate }}</h2>
+        <mat-dialog-content class="mat-typography">
+            <div class="centered">
+                <mat-icon class="icon">live_tv</mat-icon>
+                <div>
+                    The video is playing in external player window.<br />
+                    Please make sure that mpv/vlc player is correctly installed
+                    on your system.<br />
+                    See
+                    <a
+                        [routerLink]
+                        style="cursor: pointer"
+                        (click)="
+                            openUrl(
+                                'https://github.com/4gray/iptvnator/wiki/What-is-mpv-video-player-and-how-to-install-it-on-different-operating-systems%3F'
+                            )
+                        "
+                        >installation instructions</a
+                    >
+                    for more details.
+                </div>
+            </div>
+        </mat-dialog-content>
+        <mat-dialog-actions style="justify-content: space-between;">
+            <div>
+                <mat-checkbox (change)="setVisibility($event.checked)"
+                    >Don't show anymore</mat-checkbox
+                >
+            </div>
+            <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+                {{ 'CLOSE' | translate }}
+            </button>
+        </mat-dialog-actions>
+    `,
+    styles: [
+        `
+            .centered {
+                text-align: center;
+                line-height: 24px;
+                margin: 20px;
+
+                .icon {
+                    font-size: 64px;
+                    height: 64px;
+                    width: 64px;
+                }
+            }
+        `,
+    ],
+    imports: [
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatIconModule,
+        RouterLink,
+        TranslateModule,
+    ],
+})
+export class ExternalPlayerInfoDialogComponent {
+    openUrl(url: string) {
+        window.open(url, '_blank');
+    }
+
+    setVisibility(value: boolean) {
+        localStorage.setItem('hideExternalInfoDialog', value.toString());
+    }
+}
diff --git a/libs/ui/playback/src/lib/html-video-player/html-video-player.component.html b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.html
new file mode 100644
index 0000000..5442850
--- /dev/null
+++ b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.html
@@ -0,0 +1 @@
+<video #videoPlayer id="video-player" autoplay="true" controls="true"></video>
diff --git a/libs/ui/playback/src/lib/html-video-player/html-video-player.component.scss b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.scss
new file mode 100644
index 0000000..08a4510
--- /dev/null
+++ b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.scss
@@ -0,0 +1,12 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+#video-player {
+    width: 100%;
+    height: 100%;
+}
diff --git a/libs/ui/playback/src/lib/html-video-player/html-video-player.component.spec.ts b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.spec.ts
new file mode 100644
index 0000000..e7e0fc1
--- /dev/null
+++ b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.spec.ts
@@ -0,0 +1,59 @@
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { DataService } from 'services';
+import { HtmlVideoPlayerComponent } from './html-video-player.component';
+
+describe('HtmlVideoPlayerComponent', () => {
+    let component: HtmlVideoPlayerComponent;
+    let fixture: ComponentFixture<HtmlVideoPlayerComponent>;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let dataService: DataService;
+
+    const TEST_CHANNEL = {
+        id: '1234',
+        url: 'http://test.ts',
+        name: 'Test channel',
+        group: {
+            title: 'News group',
+        },
+        http: {
+            'user-agent': 'localhost',
+        },
+    };
+
+    beforeEach(waitForAsync(() => {
+        const dataServiceMock = {
+            sendIpcEvent: jest.fn().mockResolvedValue(undefined),
+        };
+
+        TestBed.configureTestingModule({
+            imports: [HtmlVideoPlayerComponent, TranslateModule.forRoot()],
+            providers: [{ provide: DataService, useValue: dataServiceMock }],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(HtmlVideoPlayerComponent);
+        component = fixture.componentInstance;
+        dataService = TestBed.inject(DataService);
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call play channel function after input changes', () => {
+        jest.spyOn(component, 'playChannel');
+        jest.spyOn(global.console, 'error').mockImplementation(() => {
+            /* empty */
+        });
+        component.ngOnChanges({
+            channel: new SimpleChange(null, TEST_CHANNEL, true),
+        });
+        fixture.detectChanges();
+
+        expect(component.playChannel).toHaveBeenCalledWith(TEST_CHANNEL);
+    });
+});
diff --git a/libs/ui/playback/src/lib/html-video-player/html-video-player.component.ts b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.ts
new file mode 100644
index 0000000..dd7391e
--- /dev/null
+++ b/libs/ui/playback/src/lib/html-video-player/html-video-player.component.ts
@@ -0,0 +1,218 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    inject,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewChild,
+} from '@angular/core';
+import Hls from 'hls.js';
+import mpegts from 'mpegts.js';
+import { getExtensionFromUrl } from 'm3u-utils';
+import { DataService } from 'services';
+import { Channel } from 'shared-interfaces';
+
+/**
+ * This component contains the implementation of HTML5 based video player
+ */
+@Component({
+    selector: 'app-html-video-player',
+    templateUrl: './html-video-player.component.html',
+    styleUrls: ['./html-video-player.component.scss'],
+    standalone: true,
+})
+export class HtmlVideoPlayerComponent implements OnInit, OnChanges, OnDestroy {
+    /** Channel to play  */
+    @Input() channel!: Channel;
+    @Input() volume = 1;
+    @Input() startTime = 0;
+    @Output() timeUpdate = new EventEmitter<{
+        currentTime: number;
+        duration: number;
+    }>();
+
+    private readonly dataService = inject(DataService);
+
+    /** Video player DOM element */
+    @ViewChild('videoPlayer', { static: true })
+    videoPlayer!: ElementRef<HTMLVideoElement>;
+
+    /** HLS object */
+    hls!: Hls;
+    /** mpegts.js player for raw MPEG-TS streams */
+    private mpegtsPlayer: mpegts.Player | null = null;
+
+    /** Captions/subtitles indicator */
+    @Input() showCaptions!: boolean;
+
+    ngOnInit() {
+        this.videoPlayer.nativeElement.addEventListener('volumechange', () => {
+            this.onVolumeChange();
+        });
+
+        this.videoPlayer.nativeElement.addEventListener('loadedmetadata', () => {
+            if (this.startTime > 0) {
+                this.videoPlayer.nativeElement.currentTime = this.startTime;
+            }
+        });
+
+        this.videoPlayer.nativeElement.addEventListener('timeupdate', () => {
+            this.timeUpdate.emit({
+                currentTime: this.videoPlayer.nativeElement.currentTime,
+                duration: this.videoPlayer.nativeElement.duration,
+            });
+        });
+    }
+
+    /**
+     * Listen for component input changes
+     * @param changes component changes
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['channel'] && changes['channel'].currentValue) {
+            this.playChannel(changes['channel'].currentValue);
+        }
+        if (changes['volume']?.currentValue !== undefined) {
+            console.log(
+                'Setting HTML5 player volume to:',
+                changes['volume'].currentValue
+            );
+            this.videoPlayer.nativeElement.volume =
+                changes['volume'].currentValue;
+        }
+    }
+
+    /**
+     * Starts to play the given channel
+     * @param channel given channel object
+     */
+    playChannel(channel: Channel): void {
+        if (this.mpegtsPlayer) {
+            this.mpegtsPlayer.pause();
+            this.mpegtsPlayer.unload();
+            this.mpegtsPlayer.detachMediaElement();
+            this.mpegtsPlayer.destroy();
+            this.mpegtsPlayer = null;
+        }
+        if (this.hls) this.hls.destroy();
+        if (channel.url) {
+            const url = channel.url + (channel.epgParams ?? '');
+            const extension = getExtensionFromUrl(channel.url);
+
+            // Set user agent if specified on channel
+            if (channel.http?.['user-agent']) {
+                window.electron?.setUserAgent(
+                    channel.http['user-agent'],
+                    channel.http.referrer
+                );
+            }
+
+            if (extension === 'ts' && mpegts.isSupported()) {
+                console.log('Using mpegts.js for TS stream:', channel.name, url);
+                this.mpegtsPlayer = mpegts.createPlayer({
+                    type: 'mpegts',
+                    isLive: true,
+                    url: url,
+                });
+                this.mpegtsPlayer.attachMediaElement(
+                    this.videoPlayer.nativeElement
+                );
+                this.mpegtsPlayer.load();
+                this.handlePlayOperation();
+            } else if (
+                extension !== 'mp4' &&
+                extension !== 'mpv' &&
+                Hls &&
+                Hls.isSupported()
+            ) {
+                console.log('... switching channel to ', channel.name, url);
+                this.hls = new Hls();
+                this.hls.attachMedia(this.videoPlayer.nativeElement);
+                this.hls.loadSource(url);
+                this.handlePlayOperation();
+            } else {
+                console.log('Using native video player...');
+                this.addSourceToVideo(
+                    this.videoPlayer.nativeElement,
+                    url,
+                    'video/mp4'
+                );
+                this.videoPlayer.nativeElement.play();
+            }
+        }
+    }
+
+    addSourceToVideo(element: HTMLVideoElement, url: string, type: string) {
+        const source = document.createElement('source');
+        source.src = url;
+        source.type = type;
+        element.appendChild(source);
+    }
+
+    /**
+     * Disables text based captions based on the global settings
+     */
+    disableCaptions(): void {
+        for (
+            let i = 0;
+            i < this.videoPlayer.nativeElement.textTracks.length;
+            i++
+        ) {
+            this.videoPlayer.nativeElement.textTracks[i].mode = 'hidden';
+        }
+    }
+
+    /**
+     * Handles promise based play operation
+     */
+    handlePlayOperation(): void {
+        const playPromise = this.videoPlayer.nativeElement.play();
+
+        if (playPromise !== undefined) {
+            playPromise
+                .then(() => {
+                    // Automatic playback started!
+                    if (!this.showCaptions) {
+                        this.disableCaptions();
+                    }
+                })
+                .catch(() => {
+                    // Do nothing
+                });
+        }
+    }
+
+    /**
+     * Save volume when user changes it
+     */
+    onVolumeChange(): void {
+        const currentVolume = this.videoPlayer.nativeElement.volume;
+        console.log('Volume changed to:', currentVolume);
+        localStorage.setItem('volume', currentVolume.toString());
+    }
+
+    /**
+     * Destroy hls instance on component destroy and clean up event listener
+     */
+    ngOnDestroy(): void {
+        this.videoPlayer.nativeElement.removeEventListener(
+            'volumechange',
+            this.onVolumeChange
+        );
+        if (this.mpegtsPlayer) {
+            this.mpegtsPlayer.pause();
+            this.mpegtsPlayer.unload();
+            this.mpegtsPlayer.detachMediaElement();
+            this.mpegtsPlayer.destroy();
+            this.mpegtsPlayer = null;
+        }
+        if (this.hls) {
+            this.hls.destroy();
+        }
+    }
+}
diff --git a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.html b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.html
new file mode 100644
index 0000000..07a279c
--- /dev/null
+++ b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.html
@@ -0,0 +1,40 @@
+@if (hasPlayback()) {
+    <section class="player-shell" aria-label="Inline player">
+        <header class="player-shell__header">
+            <div class="player-shell__eyebrow">Now Playing</div>
+            <div class="player-shell__title-row">
+                <h3 class="player-shell__title" [matTooltip]="title()">
+                    {{ title() }}
+                </h3>
+                <div class="player-shell__actions">
+                    <button
+                        mat-button
+                        type="button"
+                        [cdkCopyToClipboard]="streamUrl()"
+                        [matTooltip]="streamUrl()"
+                        (click)="onCopied()"
+                    >
+                        <mat-icon>content_copy</mat-icon>
+                        Copy Stream URL
+                    </button>
+                    <button
+                        mat-stroked-button
+                        type="button"
+                        (click)="onClose()"
+                    >
+                        <mat-icon>close</mat-icon>
+                        Close Player
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <div class="player-shell__viewport">
+            <app-web-player-view
+                [streamUrl]="streamUrl()"
+                [startTime]="startTime()"
+                (timeUpdate)="onTimeUpdate($event)"
+            />
+        </div>
+    </section>
+}
diff --git a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
new file mode 100644
index 0000000..c628089
--- /dev/null
+++ b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
@@ -0,0 +1,106 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.player-shell {
+    display: grid;
+    gap: 14px;
+    padding: 18px;
+    margin-top: 8px;
+    border-radius: 18px;
+    border: 1px solid rgba(20, 20, 20, 0.08);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 245, 0.92)),
+        rgba(255, 250, 245, 0.9);
+    box-shadow:
+        0 20px 56px rgba(25, 20, 20, 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(18px);
+}
+
+.player-shell__header {
+    display: grid;
+    gap: 8px;
+}
+
+.player-shell__eyebrow {
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: rgba(26, 26, 26, 0.58);
+}
+
+.player-shell__title-row {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.player-shell__title {
+    margin: 0;
+    font-size: clamp(1.05rem, 1vw + 0.9rem, 1.4rem);
+    font-weight: 700;
+    line-height: 1.2;
+    color: #161616;
+}
+
+.player-shell__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.player-shell__viewport {
+    overflow: hidden;
+    min-height: 320px;
+    max-height: min(70vh, 720px);
+    aspect-ratio: 16 / 9;
+    border-radius: 14px;
+    background: #000;
+}
+
+.player-shell__viewport > app-web-player-view {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+:host-context(.dark-theme) .player-shell {
+    border-color: rgba(255, 255, 255, 0.12);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
+        rgba(12, 12, 12, 0.72);
+    box-shadow:
+        0 24px 80px rgba(0, 0, 0, 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:host-context(.dark-theme) .player-shell__eyebrow {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+:host-context(.dark-theme) .player-shell__title {
+    color: #fff;
+}
+
+@media (max-width: 900px) {
+    .player-shell {
+        padding: 14px;
+    }
+
+    .player-shell__title-row {
+        flex-direction: column;
+    }
+
+    .player-shell__actions {
+        justify-content: flex-start;
+    }
+
+    .player-shell__viewport {
+        min-height: 220px;
+    }
+}
diff --git a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.ts b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.ts
new file mode 100644
index 0000000..df2af8a
--- /dev/null
+++ b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.ts
@@ -0,0 +1,63 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    output,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {
+    PlayerContentInfo,
+    ResolvedPortalPlayback,
+} from 'shared-interfaces';
+import { WebPlayerViewComponent } from '../web-player-view/web-player-view.component';
+
+@Component({
+    selector: 'app-portal-inline-player',
+    templateUrl: './portal-inline-player.component.html',
+    styleUrl: './portal-inline-player.component.scss',
+    imports: [
+        ClipboardModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        WebPlayerViewComponent,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'portal-inline-player',
+        '[attr.data-has-player]': 'hasPlayback()',
+    },
+})
+export class PortalInlinePlayerComponent {
+    readonly playback = input<ResolvedPortalPlayback | null>(null);
+    readonly title = computed(() => this.playback()?.title ?? '');
+    readonly streamUrl = computed(() => this.playback()?.streamUrl ?? '');
+    readonly startTime = computed(() => this.playback()?.startTime ?? 0);
+    readonly contentInfo = computed<PlayerContentInfo | undefined>(
+        () => this.playback()?.contentInfo
+    );
+    readonly hasPlayback = computed(() => !!this.playback()?.streamUrl);
+
+    readonly closed = output<void>();
+    readonly timeUpdate = output<{
+        currentTime: number;
+        duration: number;
+    }>();
+    readonly streamUrlCopied = output<void>();
+
+    onClose(): void {
+        this.closed.emit();
+    }
+
+    onTimeUpdate(event: { currentTime: number; duration: number }): void {
+        this.timeUpdate.emit(event);
+    }
+
+    onCopied(): void {
+        this.streamUrlCopied.emit();
+    }
+}
diff --git a/libs/ui/playback/src/lib/styles/detail-view.scss b/libs/ui/playback/src/lib/styles/detail-view.scss
new file mode 100644
index 0000000..a3fda85
--- /dev/null
+++ b/libs/ui/playback/src/lib/styles/detail-view.scss
@@ -0,0 +1,588 @@
+// ============================================================================
+// Netflix-style Detail View - Cinematic Streaming Design
+// ============================================================================
+
+:host {
+    --poster-width: 220px;
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
+    --content-max-width: 1400px;
+
+    // Light theme colors (default - no .dark-theme class on body)
+    --hero-gradient-start: rgba(255, 250, 245, 0);
+    --hero-gradient-mid: rgba(255, 250, 245, 0.75);
+    --hero-gradient-end: rgba(255, 250, 245, 1);
+    --surface-bg: #fffaf5;
+    --text-primary: #1a1a1a;
+    --text-secondary: rgba(26, 26, 26, 0.75);
+    --text-muted: rgba(26, 26, 26, 0.5);
+    --accent-color: #b81d24;
+    --tag-bg: rgba(0, 0, 0, 0.06);
+    --tag-border: rgba(0, 0, 0, 0.12);
+    --play-idle-bg: linear-gradient(135deg, #fffaf2 0%, #ffffff 52%, #f7ecdf 100%);
+    --play-idle-fg: #161310;
+    --play-idle-border: rgba(88, 48, 18, 0.12);
+    --play-idle-shadow: 0 18px 38px rgba(91, 56, 24, 0.14);
+    --play-launching-bg: linear-gradient(135deg, #ffd36f 0%, #ffb14c 46%, #f57d35 100%);
+    --play-launching-fg: #241103;
+    --play-launching-border: rgba(142, 66, 0, 0.2);
+    --play-launching-shadow: 0 22px 44px rgba(244, 136, 55, 0.32);
+    --play-stop-bg: linear-gradient(135deg, #ffd1c8 0%, #ff9f8d 42%, #ef5e64 100%);
+    --play-stop-fg: #321012;
+    --play-stop-border: rgba(162, 38, 45, 0.18);
+    --play-stop-shadow: 0 22px 46px rgba(214, 74, 86, 0.26);
+    --play-icon-shell-bg: rgba(255, 255, 255, 0.32);
+    --play-icon-shell-border: rgba(255, 255, 255, 0.3);
+
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+    background: var(--surface-bg);
+    color: var(--text-primary);
+}
+
+// Dark theme overrides - cinematic dark mode
+:host-context(.dark-theme) {
+    --hero-gradient-start: rgba(20, 20, 20, 0);
+    --hero-gradient-mid: rgba(20, 20, 20, 0.7);
+    --hero-gradient-end: rgba(20, 20, 20, 1);
+    --surface-bg: #141414;
+    --text-primary: #fff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --accent-color: #e50914;
+    --tag-bg: rgba(255, 255, 255, 0.1);
+    --tag-border: rgba(255, 255, 255, 0.2);
+    --poster-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+    --play-idle-bg: linear-gradient(135deg, #fff5e6 0%, #f6efe5 58%, #e7dac9 100%);
+    --play-idle-fg: #15110d;
+    --play-idle-border: rgba(255, 255, 255, 0.18);
+    --play-idle-shadow: 0 20px 42px rgba(0, 0, 0, 0.36);
+    --play-launching-bg: linear-gradient(135deg, #ffdd79 0%, #ffb347 42%, #ef6a3a 100%);
+    --play-launching-fg: #1f1105;
+    --play-launching-border: rgba(255, 223, 136, 0.26);
+    --play-launching-shadow: 0 24px 50px rgba(255, 153, 71, 0.3);
+    --play-stop-bg: linear-gradient(135deg, #ffd7cf 0%, #ff9b8b 40%, #eb5961 100%);
+    --play-stop-fg: #2d1012;
+    --play-stop-border: rgba(255, 205, 205, 0.24);
+    --play-stop-shadow: 0 24px 50px rgba(235, 89, 97, 0.24);
+    --play-icon-shell-bg: rgba(255, 255, 255, 0.28);
+    --play-icon-shell-border: rgba(255, 255, 255, 0.24);
+}
+
+// ============================================================================
+// Details Section - Content Elements
+// ============================================================================
+
+.details {
+    // Styles for projected content elements
+
+    &__tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 12px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        background: var(--tag-bg);
+        border: 1px solid var(--tag-border);
+        border-radius: 4px;
+        backdrop-filter: blur(8px);
+
+        &--rating {
+            color: #ffd700;
+            border-color: rgba(255, 215, 0, 0.3);
+        }
+    }
+
+    &__meta-item {
+        font-size: 0.875rem;
+
+        .label {
+            color: var(--text-muted);
+            font-weight: 400;
+            margin-bottom: 2px;
+            text-decoration: none;
+            display: block;
+        }
+
+        .value {
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+    }
+}
+
+// ============================================================================
+// Action Buttons - Play, Favorite
+// ============================================================================
+
+.play-btn {
+    --play-btn-bg: var(--play-idle-bg);
+    --play-btn-fg: var(--play-idle-fg);
+    --play-btn-border: var(--play-idle-border);
+    --play-btn-shadow: var(--play-idle-shadow);
+
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 26px;
+    min-height: 54px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: var(--play-btn-bg);
+    background-size: 140% 140%;
+    background-position: 0% 50%;
+    color: var(--play-btn-fg);
+    border: 1px solid var(--play-btn-border);
+    border-radius: 16px;
+    box-shadow: var(--play-btn-shadow);
+    cursor: pointer;
+    transition:
+        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+        background-position 280ms ease,
+        box-shadow 260ms ease,
+        border-color 220ms ease,
+        color 220ms ease,
+        filter 220ms ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        background:
+            linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 36%),
+            linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 62%);
+        opacity: 0.7;
+        transition: opacity 220ms ease;
+        z-index: -1;
+    }
+
+    &:hover:not(:disabled) {
+        transform: translateY(-2px);
+        background-position: 100% 50%;
+        box-shadow:
+            var(--play-btn-shadow),
+            0 10px 20px rgba(255, 255, 255, 0.16) inset;
+    }
+
+    &:hover:not(:disabled)::before {
+        opacity: 0.95;
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: var(--play-btn-shadow);
+    }
+
+    &:disabled {
+        cursor: progress;
+        opacity: 1;
+        filter: saturate(1.05);
+    }
+
+    mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+        transition:
+            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+            color 220ms ease,
+            filter 220ms ease;
+    }
+
+    &:hover:not(:disabled) .play-btn__icon {
+        transform: scale(1.08);
+    }
+
+    &__icon-shell {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 999px;
+        background: var(--play-icon-shell-bg);
+        border: 1px solid var(--play-icon-shell-border);
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.38),
+            0 6px 14px rgba(0, 0, 0, 0.08);
+        backdrop-filter: blur(10px);
+        transition:
+            transform 220ms ease,
+            background-color 220ms ease,
+            border-color 220ms ease,
+            box-shadow 220ms ease;
+    }
+
+    &__label {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+    }
+
+    &--state-launching,
+    &--state-stop {
+        color: var(--play-btn-fg);
+    }
+
+    &--state-launching {
+        --play-btn-bg: var(--play-launching-bg);
+        --play-btn-fg: var(--play-launching-fg);
+        --play-btn-border: var(--play-launching-border);
+        --play-btn-shadow: var(--play-launching-shadow);
+        animation: playButtonPulse 1.8s ease-in-out infinite;
+
+        .play-btn__icon-shell {
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.42),
+                0 10px 22px rgba(184, 89, 26, 0.2);
+        }
+
+        .play-btn__icon {
+            animation: playIconLaunch 1.15s cubic-bezier(0.55, 0, 0.45, 1) infinite;
+        }
+    }
+
+    &--state-stop {
+        --play-btn-bg: var(--play-stop-bg);
+        --play-btn-fg: var(--play-stop-fg);
+        --play-btn-border: var(--play-stop-border);
+        --play-btn-shadow: var(--play-stop-shadow);
+
+        .play-btn__icon-shell {
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                0 12px 24px rgba(145, 38, 53, 0.18);
+        }
+
+        .play-btn__icon {
+            animation: playIconStop 1.2s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes playButtonPulse {
+    0%,
+    100% {
+        box-shadow: var(--play-btn-shadow);
+    }
+
+    50% {
+        box-shadow:
+            var(--play-btn-shadow),
+            0 0 0 6px rgba(255, 190, 92, 0.14);
+    }
+}
+
+@keyframes playIconLaunch {
+    0%,
+    100% {
+        transform: rotate(0deg) scale(1);
+    }
+
+    50% {
+        transform: rotate(18deg) scale(1.1);
+    }
+}
+
+@keyframes playIconStop {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.08);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .play-btn,
+    .play-btn::before,
+    .play-btn mat-icon,
+    .play-btn__icon-shell {
+        animation: none !important;
+        transition-duration: 1ms !important;
+    }
+}
+
+.favorite-btn,
+.download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    background: rgba(109, 109, 110, 0.7);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(109, 109, 110, 0.5);
+    }
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.favorite-btn {
+    &--active {
+        background: rgba(229, 9, 20, 0.8);
+
+        &:hover {
+            background: rgba(229, 9, 20, 0.6);
+        }
+    }
+}
+
+.download-btn {
+    background: rgba(33, 150, 243, 0.8);
+
+    &:hover {
+        background: rgba(33, 150, 243, 0.6);
+    }
+
+    &--completed {
+        background: rgba(76, 175, 80, 0.8);
+
+        &:hover {
+            background: rgba(76, 175, 80, 0.6);
+        }
+    }
+
+    &--downloading {
+        background: rgba(109, 109, 110, 0.5);
+        cursor: not-allowed;
+        opacity: 0.7;
+
+        &:hover {
+            background: rgba(109, 109, 110, 0.5);
+        }
+    }
+}
+
+// ============================================================================
+// Content Sections - Below the hero fold
+// ============================================================================
+
+.content-section {
+    padding: 20px 0;
+    width: 100%;
+    box-sizing: border-box;
+
+    &__title {
+        font-size: 1.375rem;
+        font-weight: 600;
+        margin: 0 0 20px 0;
+        color: var(--text-primary);
+    }
+}
+
+// ============================================================================
+// Seasons & Episodes - Inside details section
+// ============================================================================
+
+.seasons {
+    margin-top: 24px;
+    width: 100%;
+
+    .season-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 0;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        h4 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+        }
+
+        .expand-icon {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+    }
+
+    .episodes {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 8px 0 16px;
+
+        button {
+            margin: 0;
+            font-weight: 500;
+        }
+    }
+
+    .episodes-loading,
+    .seasons-loading {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 20px 0;
+        color: var(--text-secondary);
+    }
+
+    .no-episodes {
+        color: var(--text-muted);
+        font-style: italic;
+        padding: 8px 0;
+    }
+}
+
+// Seasons loading when inside details
+.details .seasons-loading {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 0;
+    color: var(--text-secondary);
+    margin-top: 24px;
+}
+
+// Season container when inside details section
+.details app-season-container {
+    display: block;
+    width: 100%;
+    margin-top: 24px;
+    box-sizing: border-box;
+}
+
+// ============================================================================
+// YouTube Trailer Section - Inside details
+// ============================================================================
+
+.youtube-trailer {
+    margin-top: 24px;
+    width: 100%;
+
+    h3 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0 0 12px 0;
+        color: var(--text-primary);
+    }
+
+    .trailer-wrapper {
+        position: relative;
+        width: 100%;
+        max-width: 560px;
+        aspect-ratio: 16 / 9;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    }
+}
+
+// ============================================================================
+// Legacy container support (for gradual migration)
+// ============================================================================
+
+.container {
+    display: contents;
+}
+
+.image {
+    display: none; // Hidden - now using .poster in hero
+}
+
+// ============================================================================
+// Mobile Responsive - Option A: Keep poster grid layout
+// ============================================================================
+
+@media (max-width: 800px) {
+    :host {
+        --poster-width: 120px;
+    }
+
+    .action-buttons {
+        width: 100%;
+        // This class is in ContentHeroComponent now, but these rules apply to children?
+        // No, .play-btn is a child of the PROJECTED content.
+        // So we should target the buttons directly for mobile
+    }
+
+    .play-btn,
+    .favorite-btn,
+    .download-btn {
+        flex: 1;
+        justify-content: center;
+        padding: 10px 16px;
+    }
+
+    .youtube-trailer {
+        margin-top: 16px;
+
+        .trailer-wrapper {
+            max-width: 100%;
+            border-radius: 4px;
+        }
+    }
+
+    .seasons {
+        padding: 16px 0 0;
+    }
+}
+
+// ============================================================================
+// Animations
+// ============================================================================
+
+.youtube-trailer {
+    animation: fadeInUp 0.5s ease-out 0.4s both;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// ============================================================================
+// Utility - keep .label for backwards compatibility
+// ============================================================================
+
+.label {
+    font-weight: 400;
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 0;
+    opacity: 1;
+}
diff --git a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html
new file mode 100644
index 0000000..290e030
--- /dev/null
+++ b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.html
@@ -0,0 +1,28 @@
+@if (showPlaylistHeader()) {
+    <div class="current-playlist">
+        <button
+            mat-icon-button
+            routerLink="/"
+            [matTooltip]="'SETTINGS.BACK_TO_HOME' | translate"
+            class="home-btn"
+        >
+            <mat-icon>home</mat-icon>
+        </button>
+
+        <app-playlist-switcher
+            class="switcher"
+            [currentTitle]="playlistTitle()"
+            [subtitle]="subtitle()"
+        />
+    </div>
+}
+
+<app-channel-list-container
+    [channelList]="channels()"
+    [channelsLoading]="channelsLoading()"
+    [activeView]="activeView()"
+    [recentItems]="activePlaylist()?.recentlyViewed ?? []"
+    [sidebarWidth]="sidebarWidth()"
+    (sidebarWidthRequested)="onSidebarWidthRequested($event)"
+    (sidebarWidthRequestEnded)="onSidebarWidthRequestEnded($event)"
+/>
diff --git a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.scss b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.scss
new file mode 100644
index 0000000..976c666
--- /dev/null
+++ b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.scss
@@ -0,0 +1,22 @@
+.current-playlist {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    gap: 4px;
+    app-region: drag;
+
+    button {
+        app-region: no-drag;
+    }
+
+    .switcher {
+        flex: 1;
+        min-width: 0;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .current-playlist {
+        padding: 6px;
+    }
+}
diff --git a/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts
new file mode 100644
index 0000000..583fac1
--- /dev/null
+++ b/libs/ui/playback/src/lib/video-player/sidebar/sidebar.component.ts
@@ -0,0 +1,67 @@
+import { Component, computed, inject, input, output } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { PlaylistSwitcherComponent } from '@iptvnator/playlist/shared/ui';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import { Channel } from 'shared-interfaces';
+import { ChannelListContainerComponent } from 'components';
+
+@Component({
+    selector: 'app-sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss'],
+    imports: [
+        ChannelListContainerComponent,
+        MatIcon,
+        MatIconButton,
+        MatTooltip,
+        PlaylistSwitcherComponent,
+        RouterLink,
+        TranslatePipe,
+    ],
+})
+export class SidebarComponent {
+    readonly channels = input<Channel[]>([]);
+    readonly channelsLoading = input(false);
+    readonly showPlaylistHeader = input(true);
+    readonly activeView = input<string>('all');
+    readonly sidebarWidth = input<number | null>(null);
+    readonly sidebarWidthRequested = output<number>();
+    readonly sidebarWidthRequestEnded = output<number>();
+
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly translate = inject(TranslateService);
+
+    readonly activePlaylist = this.playlistContext.activePlaylist;
+    readonly playlistTitle = computed(() => {
+        const playlist = this.activePlaylist();
+
+        return (
+            playlist?.title ||
+            playlist?.filename ||
+            playlist?.url ||
+            playlist?.portalUrl ||
+            'Untitled playlist'
+        );
+    });
+
+    readonly subtitle = computed(() => {
+        if (this.channelsLoading()) {
+            return this.translate.instant('CHANNELS.LOADING');
+        }
+
+        const count = this.channels()?.length ?? 0;
+        return `${count} ${this.translate.instant('HOME.PLAYLISTS.CHANNELS')}`;
+    });
+
+    onSidebarWidthRequested(width: number): void {
+        this.sidebarWidthRequested.emit(width);
+    }
+
+    onSidebarWidthRequestEnded(width: number): void {
+        this.sidebarWidthRequestEnded.emit(width);
+    }
+}
diff --git a/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.html b/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.html
new file mode 100644
index 0000000..9db9834
--- /dev/null
+++ b/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.html
@@ -0,0 +1,58 @@
+<mat-toolbar color="primary">
+    <button
+        mat-icon-button
+        (click)="toggleLeftDrawerClicked.emit()"
+        [matTooltip]="'TOP_MENU.OPEN_CHANNELS_LIST' | translate"
+        class="sidenav-toggle-button"
+    >
+        <mat-icon>{{ isLeftDrawerOpened ? 'menu' : 'menu_open' }}</mat-icon>
+    </button>
+    <!-- @if (playlistId$ | async) {
+        <button
+            mat-icon-button
+            (click)="updateFavoriteStatus(activeChannel)"
+            [matTooltip]="'TOP_MENU.TOGGLE_FAVORITE_FLAG' | translate"
+        >
+            <mat-icon>
+                {{
+                    (favorites$ | async).includes(activeChannel?.url)
+                        ? 'star'
+                        : 'star_outline'
+                }}</mat-icon
+            >
+        </button>
+    } -->
+    <button
+        mat-icon-button
+        (click)="infoOverlayClicked.emit()"
+        [matTooltip]="'TOP_MENU.SHOW_INFO' | translate"
+    >
+        <mat-icon>info</mat-icon>
+    </button>
+    {{ activeChannel?.name }}
+    <div class="spacer"></div>
+    <!-- <button
+        mat-icon-button
+        (click)="settingsClicked.emit()"
+        [matTooltip]="'MENU.SETTINGS' | translate"
+    >
+        <mat-icon>settings</mat-icon>
+    </button> -->
+    <button
+        mat-icon-button
+        (click)="multiEpgClicked.emit()"
+        [matTooltip]="'TOP_MENU.OPEN_MULTI_EPG' | translate"
+    >
+        <mat-icon>view_list</mat-icon>
+    </button>
+    @let isEpgAvailable = isEpgAvailable$ | async;
+    @if (isEpgAvailable) {
+        <button
+            mat-button
+            (click)="toggleRightDrawerClicked.emit()"
+            [matTooltip]="'TOP_MENU.OPEN_EPG_LIST' | translate"
+        >
+            EPG
+        </button>
+    }
+</mat-toolbar>
diff --git a/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.scss b/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.scss
new file mode 100644
index 0000000..58fec35
--- /dev/null
+++ b/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.scss
@@ -0,0 +1,26 @@
+mat-toolbar {
+    app-region: drag;
+
+    button {
+        app-region: no-drag;
+    }
+}
+
+.spacer {
+    flex: 1 1 auto;
+}
+
+.mat-toolbar.mat-primary {
+    background: var(--mdc-primary-100);
+    color: #ccc;
+
+    button {
+        color: #ccc;
+    }
+}
+
+@media only screen and (max-width: 599px) {
+    .sidenav-toggle-button {
+        display: none;
+    }
+}
diff --git a/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.ts b/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.ts
new file mode 100644
index 0000000..102e073
--- /dev/null
+++ b/libs/ui/playback/src/lib/video-player/toolbar/toolbar.component.ts
@@ -0,0 +1,49 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, Input, output } from '@angular/core';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Store } from '@ngrx/store';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    FavoritesActions,
+    selectFavorites,
+    selectIsEpgAvailable,
+} from 'm3u-state';
+import { Channel } from 'shared-interfaces';
+
+@Component({
+    imports: [
+        AsyncPipe,
+        MatButton,
+        MatDialogModule,
+        MatIcon,
+        MatIconButton,
+        MatToolbarModule,
+        MatTooltip,
+        TranslatePipe,
+    ],
+    selector: 'app-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls: ['./toolbar.component.scss'],
+})
+export class ToolbarComponent {
+    @Input() activeChannel!: Channel;
+    @Input() isLeftDrawerOpened = true;
+    readonly infoOverlayClicked = output<void>();
+    readonly multiEpgClicked = output<void>();
+    readonly settingsClicked = output<void>();
+    readonly toggleLeftDrawerClicked = output<void>();
+    readonly toggleRightDrawerClicked = output<void>();
+
+    private readonly store = inject(Store);
+
+    readonly favorites$ = this.store.select(selectFavorites);
+    readonly isEpgAvailable$ = this.store.select(selectIsEpgAvailable);
+
+    updateFavoriteStatus(channel: Channel) {
+        this.store.dispatch(FavoritesActions.updateFavorites({ channel }));
+    }
+}
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html
new file mode 100644
index 0000000..abe0d62
--- /dev/null
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html
@@ -0,0 +1,9 @@
+<video
+    #target
+    class="video-js"
+    controls
+    muted
+    playsinline
+    preload="none"
+    data-setup='{"liveui": true, "muted": false}'
+></video>
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.scss b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.scss
new file mode 100644
index 0000000..99c83a2
--- /dev/null
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.scss
@@ -0,0 +1,26 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.video-js {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* Hide the captions settings item from the captions menu. */
+.hide-captions {
+    .vjs-texttrack-settings,
+    .vjs-text-track-display,
+    .vjs-subs-caps-button {
+        display: none;
+    }
+}
+
+.video-js .vjs-menu-button-popup .vjs-menu {
+    z-index: 10;
+}
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.ts b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.ts
new file mode 100644
index 0000000..202d162
--- /dev/null
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.ts
@@ -0,0 +1,333 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewChild,
+    ViewEncapsulation,
+} from '@angular/core';
+import '@yangkghjh/videojs-aspect-ratio-panel';
+import { getExtensionFromUrl } from 'm3u-utils';
+import mpegts from 'mpegts.js';
+import videoJs from 'video.js';
+import 'videojs-contrib-quality-levels';
+import 'videojs-quality-selector-hls';
+
+/**
+ * This component contains the implementation of video player that is based on video.js library
+ */
+
+type VideoPlayerSource = {
+    src: string;
+    type?: string;
+};
+
+type VideoPlayerOptions = Record<string, unknown> & {
+    autoplay?: boolean;
+    sources?: VideoPlayerSource[];
+};
+
+type VideoJsAudioTrack = {
+    label?: string;
+    language?: string;
+    enabled?: boolean;
+    kind?: string;
+};
+
+type VideoJsAudioTrackList = {
+    length: number;
+    [index: number]: VideoJsAudioTrack;
+    addEventListener: (
+        type: string,
+        listener: EventListenerOrEventListenerObject
+    ) => void;
+};
+
+type VideoJsTech = {
+    el?: () => Element | null;
+    vhs?: {
+        playlists?: {
+            main?: { mediaGroups?: { AUDIO?: Record<string, unknown> } };
+            master?: { mediaGroups?: { AUDIO?: Record<string, unknown> } };
+        };
+    };
+};
+
+type VideoJsControlChild = {
+    getChild?: (name: string) => VideoJsControlChild | null;
+    addChild?: (
+        name: string,
+        options?: Record<string, unknown>
+    ) => VideoJsControlChild | null;
+    show?: () => void;
+    update?: () => void;
+};
+
+type VideoJsPlayer = Omit<
+    ReturnType<typeof videoJs>,
+    'audioTracks' | 'tech' | 'getChild'
+> & {
+    qualitySelectorHls?: (options?: { displayCurrentQuality?: boolean }) => void;
+    aspectRatioPanel?: () => void;
+    audioTracks: () => VideoJsAudioTrackList | null;
+    tech: (options?: unknown) => VideoJsTech | null;
+    getChild: (name: string) => VideoJsControlChild | null;
+};
+
+@Component({
+    selector: 'app-vjs-player',
+    templateUrl: './vjs-player.component.html',
+    styleUrls: ['./vjs-player.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+})
+export class VjsPlayerComponent implements OnInit, OnChanges, OnDestroy {
+    /** DOM-element reference */
+    @ViewChild('target', { static: true }) target!: ElementRef<Element>;
+    /** Options of VideoJs player */
+    @Input() options!: VideoPlayerOptions;
+    /** VideoJs object */
+    player!: VideoJsPlayer;
+    /** mpegts.js player for raw MPEG-TS streams */
+    private mpegtsPlayer: mpegts.Player | null = null;
+    @Input() volume = 1;
+    @Input() startTime = 0;
+    @Output() timeUpdate = new EventEmitter<{
+        currentTime: number;
+        duration: number;
+    }>();
+
+    /**
+     * Instantiate Video.js on component init
+     */
+    ngOnInit(): void {
+        const source = this.options?.sources?.[0];
+        const isMpegTs = this.isMpegTsSource(source?.src);
+
+        // For raw MPEG-TS streams, init Video.js without a source (UI/controls only)
+        const vjsOptions = isMpegTs
+            ? { ...this.options, sources: [], autoplay: false }
+            : { ...this.options, autoplay: true };
+
+        this.player = videoJs(
+            this.target.nativeElement,
+            vjsOptions,
+            () => {
+                console.log(
+                    'Setting VideoJS player initial volume to:',
+                    this.volume
+                );
+                this.player.volume(this.volume);
+
+                this.player.on('loadedmetadata', () => {
+                    if (this.startTime > 0) {
+                        this.player.currentTime(this.startTime);
+                    }
+                    this.logAudioTracks();
+                    this.setupAudioTrackMenu();
+                });
+
+                // Audio tracks may be added after loadedmetadata (e.g. HLS alternate audio)
+                const audioTracks = this.player.audioTracks();
+                if (audioTracks) {
+                    audioTracks.addEventListener('addtrack', () => {
+                        console.log(
+                            '[AudioTrack] addtrack event fired, total tracks:',
+                            this.player.audioTracks().length
+                        );
+                        this.logAudioTracks();
+                        this.setupAudioTrackMenu();
+                    });
+                    audioTracks.addEventListener('removetrack', () => {
+                        console.log(
+                            '[AudioTrack] removetrack event fired, total tracks:',
+                            this.player.audioTracks().length
+                        );
+                        this.logAudioTracks();
+                        this.setupAudioTrackMenu();
+                    });
+                    audioTracks.addEventListener('change', () => {
+                        this.logAudioTracks();
+                    });
+                }
+
+                this.player.on('volumechange', () => {
+                    const currentVolume = this.player.volume();
+                    localStorage.setItem('volume', currentVolume.toString());
+                });
+
+                this.player.on('timeupdate', () => {
+                    this.timeUpdate.emit({
+                        currentTime: this.player.currentTime(),
+                        duration: this.player.duration(),
+                    });
+                });
+
+                // Attach mpegts.js after Video.js is ready
+                if (isMpegTs) {
+                    this.initMpegTs(source.src);
+                }
+            }
+        ) as unknown as VideoJsPlayer;
+        try {
+            if (typeof this.player.qualitySelectorHls === 'function') {
+                this.player.qualitySelectorHls({
+                    displayCurrentQuality: true,
+                });
+            }
+        } catch (e) {
+            console.warn('qualitySelectorHls plugin failed to initialize:', e);
+        }
+        try {
+            if (typeof this.player.aspectRatioPanel === 'function') {
+                this.player.aspectRatioPanel();
+            }
+        } catch (e) {
+            console.warn('aspectRatioPanel plugin failed to initialize:', e);
+        }
+    }
+
+    /**
+     * Replaces the url source of the player with the changed source url
+     * @param changes contains changed channel object
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['options']?.previousValue) {
+            const newSource = changes['options'].currentValue.sources[0];
+            if (this.isMpegTsSource(newSource?.src)) {
+                this.destroyMpegTs();
+                this.player.reset();
+                this.initMpegTs(newSource.src);
+            } else {
+                this.destroyMpegTs();
+                this.player.src(newSource);
+            }
+        }
+        if (changes['volume']?.currentValue !== undefined && this.player) {
+            console.log(
+                'Setting VideoJS player volume to:',
+                changes['volume'].currentValue
+            );
+            this.player.volume(changes['volume'].currentValue);
+        }
+    }
+
+    /**
+     * Removes the players HTML reference on destroy
+     */
+    ngOnDestroy(): void {
+        this.destroyMpegTs();
+        if (this.player) {
+            this.player.dispose();
+        }
+    }
+
+    private isMpegTsSource(url?: string): boolean {
+        if (!url) return false;
+        return getExtensionFromUrl(url) === 'ts' && mpegts.isSupported();
+    }
+
+    private initMpegTs(url: string): void {
+        const videoEl = this.player.tech({ IWillNotUseThisInPlugins: true })?.el();
+        if (!videoEl) return;
+
+        console.log('Using mpegts.js for TS stream:', url);
+        this.mpegtsPlayer = mpegts.createPlayer({
+            type: 'mpegts',
+            isLive: true,
+            url: url,
+        });
+        this.mpegtsPlayer.attachMediaElement(videoEl as HTMLVideoElement);
+        this.mpegtsPlayer.load();
+        this.mpegtsPlayer.play();
+    }
+
+    private destroyMpegTs(): void {
+        if (this.mpegtsPlayer) {
+            this.mpegtsPlayer.pause();
+            this.mpegtsPlayer.unload();
+            this.mpegtsPlayer.detachMediaElement();
+            this.mpegtsPlayer.destroy();
+            this.mpegtsPlayer = null;
+        }
+    }
+
+    /**
+     * Logs all available audio tracks for debugging.
+     */
+    private logAudioTracks(): void {
+        const audioTracks = this.player.audioTracks();
+        console.log('[AudioTrack] Audio tracks count:', audioTracks?.length ?? 0);
+        for (let i = 0; i < (audioTracks?.length ?? 0); i++) {
+            const t = audioTracks[i];
+            console.log(
+                `[AudioTrack] Track ${i}: label="${t.label}", language="${t.language}", enabled=${t.enabled}, kind="${t.kind}"`
+            );
+        }
+
+        // Also check the underlying tech for HLS audio tracks
+        const tech =
+            typeof this.player?.tech === 'function'
+                ? this.player.tech({ IWillNotUseThisInPlugins: true })
+                : null;
+        const audioMediaGroups =
+            tech?.vhs?.playlists?.main?.mediaGroups?.AUDIO ??
+            tech?.vhs?.playlists?.master?.mediaGroups?.AUDIO;
+
+        if (audioMediaGroups) {
+            console.log(
+                '[AudioTrack] HLS AUDIO media groups:',
+                JSON.stringify(Object.keys(audioMediaGroups))
+            );
+        } else {
+            console.log(
+                '[AudioTrack] HLS AUDIO media groups: none found in playlist metadata'
+            );
+        }
+    }
+
+    /**
+     * Sets up the audio track selection menu in the control bar.
+     * Uses the Video.js audioTracks() API which works with both
+     * native multi-audio streams and HLS.js alternate audio tracks.
+     */
+    private setupAudioTrackMenu(): void {
+        const audioTracks = this.player.audioTracks();
+        console.log(
+            '[AudioTrack] setupAudioTrackMenu called, tracks:',
+            audioTracks?.length ?? 0
+        );
+        if (!audioTracks || audioTracks.length <= 1) {
+            console.log(
+                '[AudioTrack] Skipping menu: need >1 tracks, have',
+                audioTracks?.length ?? 0
+            );
+            console.log(
+                '[AudioTrack] If VLC/MPV show more tracks, the HLS manifest likely does not expose alternate audio via EXT-X-MEDIA'
+            );
+            return;
+        }
+
+        const controlBar = this.player.getChild('controlBar');
+        if (!controlBar) {
+            return;
+        }
+
+        let audioButton =
+            controlBar.getChild('audioTrackButton') ??
+            controlBar.getChild('AudioTrackButton');
+        if (!audioButton) {
+            audioButton = controlBar.addChild('audioTrackButton', {});
+        }
+
+        if (audioButton) {
+            audioButton.show?.();
+            audioButton.update?.();
+        }
+    }
+}
diff --git a/libs/ui/playback/src/lib/vod-details/vod-details.component.html b/libs/ui/playback/src/lib/vod-details/vod-details.component.html
new file mode 100644
index 0000000..078ec83
--- /dev/null
+++ b/libs/ui/playback/src/lib/vod-details/vod-details.component.html
@@ -0,0 +1,164 @@
+@let meta = normalizedMeta();
+
+<!-- Hero Section with Backdrop -->
+<app-content-hero
+    [title]="meta.title"
+    [description]="meta.description"
+    [posterUrl]="meta.posterUrl"
+    [backdropUrl]="meta.backdropUrl"
+    (backClicked)="goBack()"
+>
+    <!-- Tags: Year, Genre, Duration, Rating -->
+    <ng-container hero-tags>
+        @if (meta.year) {
+            <span class="details__tag">{{ meta.year }}</span>
+        }
+        @if (meta.genre) {
+            <span class="details__tag">{{ meta.genre }}</span>
+        }
+        @if (meta.duration) {
+            <span class="details__tag">{{ meta.duration }}</span>
+        }
+        @if (meta.ratingImdb) {
+            <span class="details__tag details__tag--rating">
+                ⭐ {{ meta.ratingImdb }}
+            </span>
+        }
+        @if (meta.country) {
+            <span class="details__tag">{{ meta.country }}</span>
+        }
+    </ng-container>
+
+    <!-- Metadata Grid -->
+    <ng-container hero-meta>
+        @if (meta.actors) {
+            <div class="details__meta-item">
+                <span class="label">{{ 'XTREAM.ACTORS' | translate }}</span>
+                <span class="value">{{ meta.actors }}</span>
+            </div>
+        }
+        @if (meta.director) {
+            <div class="details__meta-item">
+                <span class="label">{{ 'XTREAM.DIRECTOR' | translate }}</span>
+                <span class="value">{{ meta.director }}</span>
+            </div>
+        }
+        @if (meta.ratingKinopoisk) {
+            <div class="details__meta-item">
+                <span class="label">{{ 'XTREAM.KINOPOISK_RATING' | translate }}</span>
+                <span class="value">{{ meta.ratingKinopoisk }}</span>
+            </div>
+        }
+    </ng-container>
+
+    <!-- Action Buttons -->
+    <ng-container hero-actions>
+        <!-- Resume/Play buttons -->
+        @if (hasPlaybackPosition()) {
+            <button
+                class="play-btn play-btn--resume"
+                (click)="onPrimaryAction()"
+                [disabled]="isExternalLaunchPending()"
+                [class.play-btn--state-launching]="externalPrimaryButtonState() === 'launching'"
+                [class.play-btn--state-stop]="externalPrimaryButtonState() === 'stop'"
+            >
+                <span class="play-btn__icon-shell" aria-hidden="true">
+                    <mat-icon class="play-btn__icon">{{ externalPrimaryIcon() }}</mat-icon>
+                </span>
+                <span class="play-btn__label">
+                    @if (externalPrimaryLabel(); as label) {
+                        {{ label }}
+                    } @else {
+                        {{ 'XTREAM.RESUME' | translate }} {{ formattedPosition() }}
+                    }
+                </span>
+            </button>
+            @if (!isExternalStopAction()) {
+                <button class="play-btn play-btn--restart" (click)="onPlay()">
+                    <mat-icon>replay</mat-icon>
+                    {{ 'XTREAM.RESTART' | translate }}
+                </button>
+            }
+        } @else {
+            <button
+                class="play-btn"
+                (click)="onPrimaryAction()"
+                [disabled]="isExternalLaunchPending()"
+                [class.play-btn--state-launching]="externalPrimaryButtonState() === 'launching'"
+                [class.play-btn--state-stop]="externalPrimaryButtonState() === 'stop'"
+            >
+                <span class="play-btn__icon-shell" aria-hidden="true">
+                    <mat-icon class="play-btn__icon">{{ externalPrimaryIcon() }}</mat-icon>
+                </span>
+                <span class="play-btn__label">
+                    @if (externalPrimaryLabel(); as label) {
+                        {{ label }}
+                    } @else {
+                        {{ 'XTREAM.PLAY' | translate }}
+                    }
+                </span>
+            </button>
+        }
+
+        <!-- Favorites button -->
+        @if (!isFavorite()) {
+            <button class="favorite-btn" (click)="toggleFavorite()">
+                <mat-icon>add</mat-icon>
+                {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
+            </button>
+        } @else {
+            <button
+                class="favorite-btn favorite-btn--active"
+                (click)="toggleFavorite()"
+            >
+                <mat-icon>check</mat-icon>
+                {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
+            </button>
+        }
+
+        <!-- Download buttons (Electron only) -->
+        @if (isElectron()) {
+            @if (isDownloaded()) {
+                <button class="download-btn download-btn--completed" (click)="playFromLocal()">
+                    <mat-icon>play_circle</mat-icon>
+                    {{ 'DOWNLOADS.PLAY_LOCAL' | translate }}
+                </button>
+            } @else if (isDownloading()) {
+                <button class="download-btn download-btn--downloading" disabled>
+                    <mat-icon>downloading</mat-icon>
+                    {{ 'DOWNLOADS.STATUS.DOWNLOADING' | translate }}
+                </button>
+            } @else {
+                <button class="download-btn" (click)="onDownload()">
+                    <mat-icon>download</mat-icon>
+                    {{ 'DOWNLOADS.DOWNLOAD' | translate }}
+                </button>
+            }
+        }
+    </ng-container>
+
+    @if (inlinePlayback(); as playback) {
+        <app-portal-inline-player
+            [playback]="playback"
+            (timeUpdate)="onInlineTimeUpdate($event)"
+            (closed)="closeInlinePlayback()"
+            (streamUrlCopied)="onStreamUrlCopied()"
+        />
+    }
+
+    <!-- YouTube Trailer (Xtream only) -->
+    @if (meta.youtubeTrailer) {
+        <div class="youtube-trailer">
+            <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
+            <div class="trailer-wrapper">
+                <iframe
+                    [src]="'https://www.youtube.com/embed/' + meta.youtubeTrailer | safe"
+                    title="YouTube video player"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    allowfullscreen
+                ></iframe>
+            </div>
+        </div>
+    }
+</app-content-hero>
diff --git a/libs/ui/playback/src/lib/vod-details/vod-details.component.ts b/libs/ui/playback/src/lib/vod-details/vod-details.component.ts
new file mode 100644
index 0000000..0efc941
--- /dev/null
+++ b/libs/ui/playback/src/lib/vod-details/vod-details.component.ts
@@ -0,0 +1,312 @@
+import {
+    Component,
+    computed,
+    inject,
+    input,
+    output,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import { SafePipe } from '@iptvnator/pipes';
+import { PORTAL_EXTERNAL_PLAYBACK } from '@iptvnator/portal/shared/util';
+import { ContentHeroComponent } from 'components';
+import {
+    ExternalPlayerSession,
+    ResolvedPortalPlayback,
+    VodDetailsItem,
+    getVodNumericId,
+    normalizeVodDetails,
+} from 'shared-interfaces';
+import { DownloadsService } from 'services';
+import { PortalInlinePlayerComponent } from '../portal-inline-player/portal-inline-player.component';
+
+/**
+ * Unified VOD details component for both Xtream and Stalker portals.
+ *
+ * Uses discriminated union (VodDetailsItem) for type-safe handling.
+ * All actions are emitted as outputs - parent components handle
+ * store-specific operations (play, favorites, downloads).
+ *
+ * @example
+ * ```html
+ * <app-vod-details
+ *   [item]="vodItem"
+ *   [isFavorite]="isFavorite()"
+ *   [playbackPosition]="position()"
+ *   (playClicked)="onPlay($event)"
+ *   (resumeClicked)="onResume($event)"
+ *   (favoriteToggled)="onToggleFavorite($event)"
+ * />
+ * ```
+ */
+@Component({
+    selector: 'app-vod-details',
+    templateUrl: './vod-details.component.html',
+    styleUrls: ['../styles/detail-view.scss'],
+    imports: [
+        ContentHeroComponent,
+        MatIcon,
+        PortalInlinePlayerComponent,
+        SafePipe,
+        TranslatePipe,
+    ],
+})
+export class VodDetailsComponent {
+    // ============ Inputs ============
+
+    /** VOD item with discriminated union type */
+    readonly item = input.required<VodDetailsItem>();
+
+    /** Whether this item is in favorites (managed by parent) */
+    readonly isFavorite = input<boolean>(false);
+
+    /** Playback position in seconds for resume feature (managed by parent) */
+    readonly playbackPosition = input<number | null>(null);
+
+    /** Inline playback payload for embedded players (managed by parent) */
+    readonly inlinePlayback = input<ResolvedPortalPlayback | null>(null);
+
+    /** Active external playback session for launch state */
+    readonly externalPlayback = input<ExternalPlayerSession | null>(null);
+
+    // ============ Outputs ============
+
+    /** Emitted when play button is clicked */
+    readonly playClicked = output<VodDetailsItem>();
+
+    /** Emitted when resume button is clicked (includes position) */
+    readonly resumeClicked = output<{ item: VodDetailsItem; positionSeconds: number }>();
+
+    /** Emitted when favorite toggle is clicked */
+    readonly favoriteToggled = output<{ item: VodDetailsItem; isFavorite: boolean }>();
+
+    /** Emitted when back button is clicked */
+    readonly backClicked = output<void>();
+
+    /** Emitted when download is requested (parent handles URL construction) */
+    readonly downloadRequested = output<VodDetailsItem>();
+
+    /** Emitted when inline playback position changes */
+    readonly inlineTimeUpdated = output<{
+        currentTime: number;
+        duration: number;
+    }>();
+
+    /** Emitted when the inline player should be closed */
+    readonly inlinePlaybackClosed = output<void>();
+
+    /** Emitted when the stream url is copied */
+    readonly streamUrlCopied = output<void>();
+
+    // ============ Services ============
+
+    private readonly downloadsService = inject(DownloadsService);
+    private readonly externalPlaybackActions = inject(PORTAL_EXTERNAL_PLAYBACK);
+
+    // ============ Computed State ============
+
+    /** Whether running in Electron (downloads available) */
+    readonly isElectron = computed(() => this.downloadsService.isAvailable());
+
+    /** Normalized metadata for display */
+    readonly normalizedMeta = computed(() => {
+        return normalizeVodDetails(this.item());
+    });
+
+    /** Whether there's a playback position to resume from */
+    readonly hasPlaybackPosition = computed(() => {
+        const pos = this.playbackPosition();
+        return pos !== null && pos > 0;
+    });
+
+    /** Formatted playback position (e.g., "12:34" or "1:23:45") */
+    readonly formattedPosition = computed(() => {
+        const pos = this.playbackPosition();
+        if (!pos || pos <= 0) return '';
+
+        const hours = Math.floor(pos / 3600);
+        const minutes = Math.floor((pos % 3600) / 60);
+        const seconds = Math.floor(pos % 60);
+
+        if (hours > 0) {
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        }
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    });
+
+    /** Whether VOD is already downloaded */
+    readonly isDownloaded = computed(() => {
+        const item = this.item();
+        // Access signal to create reactive dependency
+        this.downloadsService.downloads();
+        const vodId = getVodNumericId(item);
+        return this.downloadsService.isDownloaded(vodId, item.playlistId, 'vod');
+    });
+
+    /** Whether VOD is currently downloading */
+    readonly isDownloading = computed(() => {
+        const item = this.item();
+        // Access signal to create reactive dependency
+        this.downloadsService.downloads();
+        const vodId = getVodNumericId(item);
+        return this.downloadsService.isDownloading(vodId, item.playlistId, 'vod');
+    });
+
+    readonly matchedExternalPlayback = computed(() => {
+        const session = this.externalPlayback();
+        const item = this.item();
+        if (
+            !session?.contentInfo ||
+            session.status === 'closed' ||
+            session.status === 'error'
+        ) {
+            return null;
+        }
+
+        const contentInfo = session.contentInfo;
+        if (
+            contentInfo.playlistId !== item.playlistId ||
+            contentInfo.contentType !== 'vod' ||
+            contentInfo.contentXtreamId !== getVodNumericId(item)
+        ) {
+            return null;
+        }
+
+        return session;
+    });
+
+    readonly externalPrimaryLabel = computed(() => {
+        const session = this.matchedExternalPlayback();
+        if (!session) {
+            return null;
+        }
+
+        const player = session.player.toUpperCase();
+        switch (session.status) {
+            case 'launching':
+                return `Opening in ${player}...`;
+            case 'opened':
+            case 'playing':
+                return `Stop ${player}`;
+            default:
+                return null;
+        }
+    });
+
+    readonly externalPrimaryIcon = computed(() => {
+        const session = this.matchedExternalPlayback();
+        switch (session?.status) {
+            case 'launching':
+                return 'hourglass_top';
+            case 'opened':
+            case 'playing':
+                return 'stop_circle';
+            default:
+                return 'play_arrow';
+        }
+    });
+
+    readonly isExternalLaunchPending = computed(
+        () => this.matchedExternalPlayback()?.status === 'launching'
+    );
+
+    readonly isExternalStopAction = computed(() => {
+        const status = this.matchedExternalPlayback()?.status;
+        return status === 'opened' || status === 'playing';
+    });
+
+    readonly externalPrimaryButtonState = computed(() => {
+        if (this.isExternalLaunchPending()) {
+            return 'launching';
+        }
+
+        return this.isExternalStopAction() ? 'stop' : 'idle';
+    });
+
+    // ============ Actions ============
+
+    /** Handle play button click */
+    onPlay(): void {
+        this.playClicked.emit(this.item());
+    }
+
+    onPrimaryAction(): void {
+        if (this.isExternalStopAction()) {
+            void this.stopExternalPlayback();
+            return;
+        }
+
+        if (this.hasPlaybackPosition()) {
+            this.onResume();
+            return;
+        }
+
+        this.onPlay();
+    }
+
+    /** Handle resume button click */
+    onResume(): void {
+        const pos = this.playbackPosition();
+        if (pos && pos > 0) {
+            this.resumeClicked.emit({
+                item: this.item(),
+                positionSeconds: pos,
+            });
+        }
+    }
+
+    /** Handle favorite toggle - emits the desired new state */
+    toggleFavorite(): void {
+        this.favoriteToggled.emit({
+            item: this.item(),
+            isFavorite: !this.isFavorite(),
+        });
+    }
+
+    /** Handle back navigation - emit event for parent to handle */
+    goBack(): void {
+        this.backClicked.emit();
+    }
+
+    /** Handle download request */
+    onDownload(): void {
+        this.downloadRequested.emit(this.item());
+    }
+
+    onInlineTimeUpdate(event: {
+        currentTime: number;
+        duration: number;
+    }): void {
+        this.inlineTimeUpdated.emit(event);
+    }
+
+    closeInlinePlayback(): void {
+        this.inlinePlaybackClosed.emit();
+    }
+
+    onStreamUrlCopied(): void {
+        this.streamUrlCopied.emit();
+    }
+
+    async stopExternalPlayback(): Promise<void> {
+        await this.externalPlaybackActions.closeSession(
+            this.matchedExternalPlayback()
+        );
+    }
+
+    /** Play from local downloaded file */
+    async playFromLocal(): Promise<void> {
+        const item = this.item();
+        const vodId = getVodNumericId(item);
+
+        const filePath = this.downloadsService.getDownloadedFilePath(
+            vodId,
+            item.playlistId,
+            'vod'
+        );
+
+        if (filePath) {
+            await this.downloadsService.playDownload(filePath);
+        }
+    }
+}
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html
new file mode 100644
index 0000000..5d1e1c3
--- /dev/null
+++ b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.html
@@ -0,0 +1,27 @@
+@if (player === 'videojs') {
+    <app-vjs-player
+        [options]="vjsOptions"
+        [startTime]="startTime()"
+        (timeUpdate)="timeUpdate.emit($event)"
+    />
+} @else if (player === 'html5') {
+    <app-html-video-player
+        [channel]="$any(channel)"
+        [startTime]="startTime()"
+        (timeUpdate)="timeUpdate.emit($event)"
+    />
+} @else if (player === 'artplayer') {
+    <app-art-player
+        [channel]="$any(channel)"
+        [volume]="1"
+        [showCaptions]="false"
+        [startTime]="startTime()"
+        (timeUpdate)="timeUpdate.emit($event)"
+    />
+} @else {
+    <app-vjs-player
+        [options]="vjsOptions"
+        [startTime]="startTime()"
+        (timeUpdate)="timeUpdate.emit($event)"
+    />
+}
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
new file mode 100644
index 0000000..675a74c
--- /dev/null
+++ b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
@@ -0,0 +1,11 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
+app-art-player,
+app-vjs-player,
+app-html-video-player {
+    display: block;
+    height: 100%;
+}
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts
new file mode 100644
index 0000000..1e6389f
--- /dev/null
+++ b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts
@@ -0,0 +1,72 @@
+import {
+    Component,
+    EventEmitter,
+    Output,
+    Signal,
+    ViewEncapsulation,
+    effect,
+    inject,
+    input,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { getExtensionFromUrl } from 'm3u-utils';
+import { Settings, STORE_KEY, VideoPlayer } from 'shared-interfaces';
+import { ArtPlayerComponent } from '../art-player/art-player.component';
+import { HtmlVideoPlayerComponent } from '../html-video-player/html-video-player.component';
+import { VjsPlayerComponent } from '../vjs-player/vjs-player.component';
+
+@Component({
+    selector: 'app-web-player-view',
+    templateUrl: './web-player-view.component.html',
+    styleUrls: ['./web-player-view.component.scss'],
+    imports: [ArtPlayerComponent, HtmlVideoPlayerComponent, VjsPlayerComponent],
+    encapsulation: ViewEncapsulation.None,
+})
+export class WebPlayerViewComponent {
+    storage = inject(StorageMap);
+
+    streamUrl = input.required<string>();
+    startTime = input<number>(0);
+    @Output() timeUpdate = new EventEmitter<{
+        currentTime: number;
+        duration: number;
+    }>();
+
+    settings = toSignal(
+        this.storage.get(STORE_KEY.Settings)
+    ) as Signal<Settings>;
+
+    channel!: { url: string };
+    player!: VideoPlayer;
+    vjsOptions!: { sources: { src: string; type: string }[] };
+
+    constructor() {
+        effect(() => {
+            this.player = this.settings()?.player ?? VideoPlayer.VideoJs;
+
+            this.setChannel(this.streamUrl());
+            this.setVjsOptions(this.streamUrl());
+        });
+    }
+
+    setVjsOptions(streamUrl: string) {
+        const extension = getExtensionFromUrl(streamUrl);
+        const mimeType =
+            extension === 'm3u' || extension === 'm3u8'
+                ? 'application/x-mpegURL'
+                : extension === 'ts'
+                  ? 'video/mp2t'
+                  : 'video/mp4';
+
+        this.vjsOptions = {
+            sources: [{ src: streamUrl, type: mimeType }],
+        };
+    }
+
+    setChannel(streamUrl: string) {
+        this.channel = {
+            url: streamUrl,
+        };
+    }
+}
diff --git a/libs/ui/playback/tsconfig.json b/libs/ui/playback/tsconfig.json
new file mode 100644
index 0000000..f7fcb0d
--- /dev/null
+++ b/libs/ui/playback/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/ui/playback/tsconfig.lib.json b/libs/ui/playback/tsconfig.lib.json
new file mode 100644
index 0000000..03dbd18
--- /dev/null
+++ b/libs/ui/playback/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/ui/remote-control/README.md b/libs/ui/remote-control/README.md
new file mode 100644
index 0000000..549a507
--- /dev/null
+++ b/libs/ui/remote-control/README.md
@@ -0,0 +1,18 @@
+# remote-control
+
+UI library for the remote control web app.
+
+## Scope
+
+- Sends channel up/down commands to `/api/remote-control/channel/up|down`
+- Sends direct number-based channel selection (`/channel/select-number`)
+- Reads live playback status from `/api/remote-control/status`
+- Sends volume commands (`/volume/up|down|toggle-mute`)
+- Used for live channel navigation in:
+- M3U playlists
+- Xtream Live TV
+- Stalker ITV
+
+## Running unit tests
+
+Run `nx test remote-control` to execute the unit tests.
diff --git a/libs/ui/remote-control/eslint.config.mjs b/libs/ui/remote-control/eslint.config.mjs
new file mode 100644
index 0000000..937c5f4
--- /dev/null
+++ b/libs/ui/remote-control/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'lib',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'lib',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/ui/remote-control/jest.config.ts b/libs/ui/remote-control/jest.config.ts
new file mode 100644
index 0000000..395a66f
--- /dev/null
+++ b/libs/ui/remote-control/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+    displayName: 'remote-control',
+    preset: '../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../coverage/libs/ui/remote-control',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};
diff --git a/libs/ui/remote-control/project.json b/libs/ui/remote-control/project.json
new file mode 100644
index 0000000..db4b0d9
--- /dev/null
+++ b/libs/ui/remote-control/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "remote-control",
+    "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/ui/remote-control/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:shared", "domain:playback", "type:ui"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/ui/remote-control/jest.config.ts",
+                "tsConfig": "libs/ui/remote-control/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/ui/remote-control/src/index.ts b/libs/ui/remote-control/src/index.ts
new file mode 100644
index 0000000..a2f5fa6
--- /dev/null
+++ b/libs/ui/remote-control/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/remote-control/remote-control.component';
+export * from './lib/remote-control/remote-control.service';
diff --git a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.html b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.html
new file mode 100644
index 0000000..a2a1f55
--- /dev/null
+++ b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.html
@@ -0,0 +1,153 @@
+<div class="remote">
+    <div class="remote__body">
+        <div class="now-card">
+            <div class="now-card__top">
+                <div class="now-card__label">Now Playing</div>
+                <div class="now-card__statusline">
+                    <span class="status-dot" [class.is-active]="isReady"></span>
+                    <span>{{ isLoading ? 'Executing' : portalLabel }}</span>
+                </div>
+            </div>
+            <div class="now-card__channel">
+                {{ status?.channelName || 'No live stream selected' }}
+            </div>
+            <div class="now-card__meta">
+                <span>
+                    @if (status?.channelNumber) {
+                        CH {{ status?.channelNumber }}
+                    } @else {
+                        CH -
+                    }
+                </span>
+                <span>{{ status?.portal || 'unknown' }}</span>
+            </div>
+            <div class="now-card__program">
+                {{ status?.epgTitle || 'No current EPG program' }}
+            </div>
+        </div>
+
+        @if (error) {
+            <div class="remote__error">
+                {{ error }}
+            </div>
+        }
+
+        <div class="cluster">
+            <div class="cluster__title">Channel Navigation</div>
+            <div class="touchpad__glass">
+                <button
+                    class="touchpad__button touchpad__button--up"
+                    (click)="changeChannelUp()"
+                    [disabled]="isLoading"
+                    [class.is-loading]="isLoading"
+                    aria-label="Channel Up"
+                >
+                    <span>CH +</span>
+                </button>
+                <button
+                    class="touchpad__button touchpad__button--down"
+                    (click)="changeChannelDown()"
+                    [disabled]="isLoading"
+                    [class.is-loading]="isLoading"
+                    aria-label="Channel Down"
+                >
+                    <span>CH -</span>
+                </button>
+                <div class="touchpad__center">
+                    <span>{{ status?.channelNumber || '-' }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="cluster">
+            <div class="cluster__title">Channel Number</div>
+            <div class="digit-display">{{ numericInput || '----' }}</div>
+            <div class="keypad">
+                @for (digit of digits; track digit) {
+                    <button
+                        class="keypad__key"
+                        (click)="appendDigit(digit)"
+                        [disabled]="isLoading"
+                    >
+                        {{ digit }}
+                    </button>
+                }
+                <button
+                    class="keypad__key keypad__key--alt"
+                    (click)="backspaceDigit()"
+                    [disabled]="isLoading"
+                >
+                    DEL
+                </button>
+                <button
+                    class="keypad__key keypad__key--alt"
+                    (click)="clearDigits()"
+                    [disabled]="isLoading"
+                >
+                    CLR
+                </button>
+                <button
+                    class="keypad__key keypad__key--go"
+                    (click)="submitChannelNumber()"
+                    [disabled]="isLoading || !numericInput"
+                >
+                    OK
+                </button>
+            </div>
+        </div>
+
+        <div class="cluster">
+            <div class="cluster__title">Volume</div>
+            <div class="volume-row">
+                <button
+                    class="volume-row__button"
+                    (click)="volumeDown()"
+                    [disabled]="isLoading || !status?.supportsVolume"
+                >
+                    VOL -
+                </button>
+                <button
+                    class="volume-row__button volume-row__button--mute"
+                    (click)="toggleMute()"
+                    [disabled]="isLoading || !status?.supportsVolume"
+                >
+                    @if (status?.muted) {
+                        UNMUTE
+                    } @else {
+                        MUTE
+                    }
+                </button>
+                <button
+                    class="volume-row__button"
+                    (click)="volumeUp()"
+                    [disabled]="isLoading || !status?.supportsVolume"
+                >
+                    VOL +
+                </button>
+            </div>
+            <div class="volume-meter">
+                <div
+                    class="volume-meter__fill"
+                    [style.width.%]="volumePercent ?? 0"
+                ></div>
+            </div>
+            <div class="volume-caption">
+                @if (status?.supportsVolume) {
+                    {{ volumePercent ?? 0 }}%
+                } @else {
+                    Volume control unavailable for this player mode
+                }
+            </div>
+        </div>
+
+        <div class="remote__footer">
+            @if (isStatusLoading) {
+                Syncing status...
+            } @else if (status?.updatedAt) {
+                Updated {{ status?.updatedAt | date: 'HH:mm:ss' }}
+            } @else {
+                Waiting for status...
+            }
+        </div>
+    </div>
+</div>
diff --git a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
new file mode 100644
index 0000000..da772ce
--- /dev/null
+++ b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
@@ -0,0 +1,335 @@
+:host {
+    --bg-0: #0a1016;
+    --bg-1: #111c26;
+    --bg-2: #1c2d3b;
+    --line: rgba(177, 220, 255, 0.2);
+    --ink: #e5f5ff;
+    --ink-dim: rgba(229, 245, 255, 0.72);
+    --accent: #2ec4ff;
+    --accent-soft: rgba(46, 196, 255, 0.2);
+    --danger: #ff596d;
+    display: block;
+    min-height: 100vh;
+}
+
+* {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.remote {
+    min-height: 100vh;
+    padding: 14px;
+    display: flex;
+    justify-content: center;
+    background:
+        radial-gradient(circle at 12% 8%, rgba(255, 200, 92, 0.18), transparent 35%),
+        radial-gradient(circle at 85% 0%, rgba(46, 196, 255, 0.28), transparent 45%),
+        linear-gradient(145deg, var(--bg-0), var(--bg-1) 58%, var(--bg-2));
+    color: var(--ink);
+    font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
+}
+
+.remote__body {
+    width: min(100%, 520px);
+    display: grid;
+    gap: 10px;
+    animation: reveal 0.6s ease-out;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--danger);
+    box-shadow: 0 0 10px rgba(255, 89, 109, 0.7);
+}
+
+.status-dot.is-active {
+    background: #44e38c;
+    box-shadow: 0 0 12px rgba(68, 227, 140, 0.7);
+}
+
+.now-card {
+    padding: 12px;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: linear-gradient(
+        155deg,
+        rgba(17, 39, 56, 0.92),
+        rgba(15, 29, 42, 0.86)
+    );
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.now-card__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.now-card__statusline {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 12px;
+    color: var(--ink-dim);
+    white-space: nowrap;
+}
+
+.now-card__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.13em;
+    color: var(--ink-dim);
+}
+
+.now-card__channel {
+    margin-top: 5px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.now-card__meta {
+    margin-top: 6px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--ink-dim);
+}
+
+.now-card__program {
+    margin-top: 8px;
+    font-size: 13px;
+    color: #b6d5ea;
+}
+
+.cluster {
+    border: 1px solid var(--line);
+    border-radius: 18px;
+    padding: 10px;
+    background: rgba(9, 21, 31, 0.72);
+}
+
+.cluster__title {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.11em;
+    color: var(--ink-dim);
+    margin-bottom: 10px;
+}
+
+.touchpad__glass {
+    width: min(100%, 320px);
+    aspect-ratio: 1;
+    margin: 0 auto;
+    position: relative;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 1px solid rgba(97, 166, 214, 0.38);
+    background:
+        radial-gradient(circle at 50% 32%, rgba(46, 196, 255, 0.24), transparent 56%),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01));
+}
+
+.touchpad__button {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    border: 0;
+    background: transparent;
+    color: var(--ink);
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    cursor: pointer;
+    transition: 180ms ease;
+}
+
+.touchpad__button:active:not(:disabled) {
+    background: var(--accent-soft);
+}
+
+.touchpad__button:disabled {
+    opacity: 0.45;
+}
+
+.touchpad__button--up {
+    top: 0;
+}
+
+.touchpad__button--down {
+    bottom: 0;
+}
+
+.touchpad__center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    border: 1px solid rgba(167, 218, 255, 0.35);
+    background: rgba(9, 23, 34, 0.9);
+    display: grid;
+    place-items: center;
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.digit-display {
+    margin-bottom: 8px;
+    border-radius: 12px;
+    border: 1px dashed rgba(167, 218, 255, 0.5);
+    padding: 10px;
+    text-align: center;
+    font-family: 'Courier New', monospace;
+    font-size: 20px;
+    letter-spacing: 0.16em;
+    color: #d5eeff;
+}
+
+.keypad {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+}
+
+.keypad__key {
+    height: 46px;
+    border-radius: 12px;
+    border: 1px solid rgba(167, 218, 255, 0.34);
+    background: rgba(15, 38, 55, 0.84);
+    color: var(--ink);
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.keypad__key:active:not(:disabled) {
+    transform: translateY(1px);
+    background: rgba(29, 67, 94, 0.94);
+}
+
+.keypad__key:disabled {
+    opacity: 0.45;
+}
+
+.keypad__key--alt {
+    font-size: 12px;
+    letter-spacing: 0.06em;
+}
+
+.keypad__key--go {
+    background: linear-gradient(140deg, #16a8df, #2ec4ff);
+    color: #042130;
+}
+
+.volume-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 8px;
+}
+
+.volume-row__button {
+    min-height: 40px;
+    border-radius: 10px;
+    border: 1px solid rgba(167, 218, 255, 0.34);
+    background: rgba(15, 38, 55, 0.84);
+    color: var(--ink);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+}
+
+.volume-row__button--mute {
+    border-color: rgba(255, 129, 143, 0.45);
+}
+
+.volume-row__button:disabled {
+    opacity: 0.45;
+}
+
+.volume-meter {
+    margin-top: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+}
+
+.volume-meter__fill {
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #1fa8de, #42e8ff);
+    transition: width 180ms ease;
+}
+
+.volume-caption {
+    margin-top: 6px;
+    color: var(--ink-dim);
+    font-size: 12px;
+}
+
+.remote__error {
+    border-radius: 12px;
+    border: 1px solid rgba(255, 117, 132, 0.5);
+    background: rgba(78, 12, 24, 0.65);
+    color: #ffd9de;
+    font-size: 13px;
+    padding: 10px 12px;
+}
+
+.remote__footer {
+    text-align: center;
+    color: rgba(213, 238, 255, 0.72);
+    font-size: 12px;
+    padding-bottom: 10px;
+}
+
+@media (max-width: 640px) {
+    .remote {
+        padding: 8px;
+    }
+
+    .remote__body {
+        width: 100%;
+        max-width: none;
+        gap: 8px;
+    }
+
+    .now-card {
+        border-radius: 14px;
+    }
+
+    .cluster {
+        border-radius: 14px;
+        padding: 9px;
+    }
+
+    .touchpad__glass {
+        width: min(100%, 360px);
+    }
+
+    .keypad__key {
+        height: 44px;
+    }
+
+    .volume-row__button {
+        min-height: 38px;
+    }
+}
+
+@keyframes reveal {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
diff --git a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.ts b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.ts
new file mode 100644
index 0000000..60120bf
--- /dev/null
+++ b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.ts
@@ -0,0 +1,157 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import {
+    RemoteControlService,
+    RemoteControlStatus,
+} from './remote-control.service';
+
+@Component({
+    selector: 'lib-remote-control',
+    imports: [CommonModule],
+    templateUrl: './remote-control.component.html',
+    styleUrls: ['./remote-control.component.scss'],
+})
+export class RemoteControlComponent implements OnInit, OnDestroy {
+    private remoteControlService = inject(RemoteControlService);
+    private statusRefreshTimer?: number;
+
+    isLoading = false;
+    isStatusLoading = false;
+    error: string | null = null;
+    status: RemoteControlStatus | null = null;
+    numericInput = '';
+    readonly digits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+
+    ngOnInit(): void {
+        void this.refreshStatus();
+        this.statusRefreshTimer = window.setInterval(() => {
+            void this.refreshStatus(true);
+        }, 2000);
+    }
+
+    ngOnDestroy(): void {
+        if (this.statusRefreshTimer) {
+            clearInterval(this.statusRefreshTimer);
+            this.statusRefreshTimer = undefined;
+        }
+    }
+
+    async changeChannelUp(): Promise<void> {
+        await this.executeAction(
+            () => this.remoteControlService.channelUp(),
+            'Failed to change channel up'
+        );
+    }
+
+    async changeChannelDown(): Promise<void> {
+        await this.executeAction(
+            () => this.remoteControlService.channelDown(),
+            'Failed to change channel down'
+        );
+    }
+
+    appendDigit(digit: string): void {
+        if (this.numericInput.length >= 4) {
+            return;
+        }
+        this.numericInput += digit;
+    }
+
+    backspaceDigit(): void {
+        this.numericInput = this.numericInput.slice(0, -1);
+    }
+
+    clearDigits(): void {
+        this.numericInput = '';
+    }
+
+    async submitChannelNumber(): Promise<void> {
+        const channelNumber = Number(this.numericInput);
+        if (!Number.isFinite(channelNumber) || channelNumber < 1) {
+            return;
+        }
+
+        await this.executeAction(
+            () =>
+                this.remoteControlService.selectChannelByNumber(channelNumber),
+            'Failed to switch by channel number'
+        );
+        this.clearDigits();
+    }
+
+    async volumeUp(): Promise<void> {
+        await this.executeAction(
+            () => this.remoteControlService.volumeUp(),
+            'Failed to increase volume'
+        );
+    }
+
+    async volumeDown(): Promise<void> {
+        await this.executeAction(
+            () => this.remoteControlService.volumeDown(),
+            'Failed to decrease volume'
+        );
+    }
+
+    async toggleMute(): Promise<void> {
+        await this.executeAction(
+            () => this.remoteControlService.toggleMute(),
+            'Failed to toggle mute'
+        );
+    }
+
+    get portalLabel(): string {
+        const portal = this.status?.portal ?? 'unknown';
+        if (portal === 'm3u') return 'M3U Live';
+        if (portal === 'xtream') return 'Xtream Live';
+        if (portal === 'stalker') return 'Stalker ITV';
+        return 'Waiting For Playback';
+    }
+
+    get isReady(): boolean {
+        return !!this.status?.isLiveView && !this.isLoading;
+    }
+
+    get volumePercent(): number | null {
+        if (!this.status?.supportsVolume || this.status.volume == null) {
+            return null;
+        }
+
+        return Math.round((this.status.volume || 0) * 100);
+    }
+
+    private async refreshStatus(silent = false): Promise<void> {
+        if (!silent) {
+            this.isStatusLoading = true;
+        }
+        try {
+            this.status = await this.remoteControlService.getStatus();
+        } catch (err) {
+            if (!silent) {
+                this.error = 'Failed to fetch remote status';
+                console.error(err);
+            }
+        } finally {
+            if (!silent) {
+                this.isStatusLoading = false;
+            }
+        }
+    }
+
+    private async executeAction(
+        action: () => Promise<void>,
+        errorMessage: string
+    ): Promise<void> {
+        this.isLoading = true;
+        this.error = null;
+        try {
+            await action();
+            await this.refreshStatus(true);
+        } catch (err) {
+            this.error = errorMessage;
+            console.error(err);
+        } finally {
+            this.isLoading = false;
+        }
+    }
+}
diff --git a/libs/ui/remote-control/src/lib/remote-control/remote-control.service.ts b/libs/ui/remote-control/src/lib/remote-control/remote-control.service.ts
new file mode 100644
index 0000000..79c0579
--- /dev/null
+++ b/libs/ui/remote-control/src/lib/remote-control/remote-control.service.ts
@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+
+export interface RemoteControlStatus {
+    portal: 'm3u' | 'xtream' | 'stalker' | 'unknown';
+    isLiveView: boolean;
+    channelName?: string;
+    channelNumber?: number;
+    epgTitle?: string;
+    epgStart?: string;
+    epgEnd?: string;
+    supportsVolume?: boolean;
+    volume?: number;
+    muted?: boolean;
+    updatedAt?: string;
+}
+
+/**
+ * Service for remote control operations.
+ * This service communicates with the Electron backend via HTTP API.
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class RemoteControlService {
+    private readonly apiBaseUrl = '/api/remote-control';
+
+    constructor(private http: HttpClient) {}
+
+    /**
+     * Changes to the next channel
+     */
+    async channelUp(): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>(`${this.apiBaseUrl}/channel/up`, {})
+        );
+    }
+
+    /**
+     * Changes to the previous channel
+     */
+    async channelDown(): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>(`${this.apiBaseUrl}/channel/down`, {})
+        );
+    }
+
+    async selectChannelByNumber(number: number): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>(`${this.apiBaseUrl}/channel/select-number`, {
+                number,
+            })
+        );
+    }
+
+    async volumeUp(): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>(`${this.apiBaseUrl}/volume/up`, {})
+        );
+    }
+
+    async volumeDown(): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>(`${this.apiBaseUrl}/volume/down`, {})
+        );
+    }
+
+    async toggleMute(): Promise<void> {
+        await firstValueFrom(
+            this.http.post<void>(`${this.apiBaseUrl}/volume/toggle-mute`, {})
+        );
+    }
+
+    async getStatus(): Promise<RemoteControlStatus> {
+        return await firstValueFrom(
+            this.http.get<RemoteControlStatus>(`${this.apiBaseUrl}/status`)
+        );
+    }
+}
diff --git a/libs/ui/remote-control/src/test-setup.ts b/libs/ui/remote-control/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/ui/remote-control/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/ui/remote-control/tsconfig.json b/libs/ui/remote-control/tsconfig.json
new file mode 100644
index 0000000..e05028a
--- /dev/null
+++ b/libs/ui/remote-control/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "typeCheckHostBindings": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/ui/remote-control/tsconfig.lib.json b/libs/ui/remote-control/tsconfig.lib.json
new file mode 100644
index 0000000..8eb88c6
--- /dev/null
+++ b/libs/ui/remote-control/tsconfig.lib.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": ["src/**/*.ts"]
+}
diff --git a/libs/ui/remote-control/tsconfig.spec.json b/libs/ui/remote-control/tsconfig.spec.json
new file mode 100644
index 0000000..7b3e56b
--- /dev/null
+++ b/libs/ui/remote-control/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/ui/shared-portals/README.md b/libs/ui/shared-portals/README.md
new file mode 100644
index 0000000..9dcccf7
--- /dev/null
+++ b/libs/ui/shared-portals/README.md
@@ -0,0 +1,2 @@
+# shared-portals This library was generated with [Nx](https://nx.dev). ##
+Running unit tests Run `nx test shared-portals` to execute the unit tests.
diff --git a/libs/ui/shared-portals/eslint.config.mjs b/libs/ui/shared-portals/eslint.config.mjs
new file mode 100644
index 0000000..14d65f5
--- /dev/null
+++ b/libs/ui/shared-portals/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'app',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'app',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/ui/shared-portals/jest.config.ts b/libs/ui/shared-portals/jest.config.ts
new file mode 100644
index 0000000..2582ad4
--- /dev/null
+++ b/libs/ui/shared-portals/jest.config.ts
@@ -0,0 +1,21 @@
+export default {
+  displayName: 'shared-portals',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/ui/shared-portals',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ]
+};
diff --git a/libs/ui/shared-portals/project.json b/libs/ui/shared-portals/project.json
new file mode 100644
index 0000000..62acfff
--- /dev/null
+++ b/libs/ui/shared-portals/project.json
@@ -0,0 +1,27 @@
+{
+  "name": "shared-portals",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/shared-portals/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [
+    "scope:portal",
+    "domain:portal-shared",
+    "type:ui"
+  ],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
+      "options": {
+        "jestConfig": "libs/ui/shared-portals/jest.config.ts",
+        "tsConfig": "libs/ui/shared-portals/tsconfig.spec.json"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}
diff --git a/libs/ui/shared-portals/src/index.ts b/libs/ui/shared-portals/src/index.ts
new file mode 100644
index 0000000..f578cba
--- /dev/null
+++ b/libs/ui/shared-portals/src/index.ts
@@ -0,0 +1,3 @@
+export * from './lib/epg-view/epg-view.component'; 
+export * from './lib/live-stream-layout/live-stream-layout.component'; 
+export { WebPlayerViewComponent } from '@iptvnator/ui/playback';
diff --git a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.html b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.html
new file mode 100644
index 0000000..422853c
--- /dev/null
+++ b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.html
@@ -0,0 +1,49 @@
+<div class="epg-title">{{ 'EPG.TITLE' | translate }}</div>
+
+<div class="epg-list">
+    @for (item of epgItems; track $index) {
+        <article class="epg-item" [class.current-program]="isCurrentProgram(item)">
+            <div class="epg-item__meta">
+                <div class="epg-item__time">
+                    {{ item.start | date: 'HH:mm' }} -
+                    {{ item.stop ?? item.end | date: 'HH:mm' }}
+                </div>
+                @if (isCurrentProgram(item)) {
+                    <span class="epg-item__badge">Live</span>
+                }
+                <button
+                    mat-icon-button
+                    class="epg-item__info"
+                    (click)="showDetails(item)"
+                >
+                    <mat-icon>info</mat-icon>
+                </button>
+            </div>
+
+            <div class="epg-item__title">{{ item.title }}</div>
+
+            @if (item.description) {
+                <div class="epg-item__description">
+                    {{ item.description }}
+                </div>
+            }
+
+            @if (isCurrentProgram(item)) {
+                <div class="epg-item__progress">
+                    <div class="epg-progress-track">
+                        <div
+                            class="epg-progress-fill"
+                            [style.width.%]="getProgress(item)"
+                        ></div>
+                    </div>
+                </div>
+            }
+        </article>
+    }
+
+    @if (epgItems?.length === 0) {
+        <div class="epg-empty">
+            {{ 'EPG.EPG_NOT_AVAILABLE_CHANNEL_TITLE' | translate }}
+        </div>
+    }
+</div>
diff --git a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
new file mode 100644
index 0000000..df8a8aa
--- /dev/null
+++ b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
@@ -0,0 +1,188 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.epg-title {
+    margin: 0;
+    padding: 14px 16px 10px;
+    font-size: 1.02rem;
+    font-weight: 620;
+    letter-spacing: 0.01em;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
+.epg-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 10px 10px 22px;
+    box-sizing: border-box;
+    scrollbar-gutter: stable;
+}
+
+.epg-item {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px 14px 16px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
+        rgba(127, 127, 127, 0.045);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 10px 20px -20px rgba(0, 0, 0, 0.35);
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
+
+    &:hover {
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
+            rgba(127, 127, 127, 0.065);
+        transform: translateY(-1px);
+    }
+
+    &.current-program {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        border-color: var(--app-selection-border);
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+
+        .epg-item__title,
+        .epg-item__time,
+        .epg-item__description,
+        .epg-item__info {
+            color: var(--app-selection-color);
+        }
+    }
+}
+
+.epg-item__meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.epg-item__time {
+    font-size: 0.78rem;
+    line-height: 1;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    font-variant-numeric: tabular-nums;
+    opacity: 0.76;
+}
+
+.epg-item__badge {
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    line-height: 1.4;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    background: color-mix(in srgb, var(--app-selection-color) 18%, transparent);
+    color: var(--app-selection-color);
+    border: 1px solid color-mix(in srgb, var(--app-selection-border) 86%, transparent);
+}
+
+.epg-item__info {
+    margin-inline-start: auto;
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    color: inherit;
+    opacity: 0.76;
+    transition:
+        opacity 0.15s ease,
+        background-color 0.15s ease,
+        transform 0.15s ease;
+
+    &:hover {
+        opacity: 1;
+        background: color-mix(in srgb, currentColor 10%, transparent);
+        transform: translateY(-1px);
+    }
+}
+
+.epg-item__title {
+    font-size: 0.94rem;
+    line-height: 1.35;
+    font-weight: 560;
+    letter-spacing: 0.005em;
+}
+
+.epg-item__description {
+    font-size: 0.82rem;
+    line-height: 1.4;
+    opacity: 0.74;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.epg-item__progress {
+    padding-top: 4px;
+}
+
+.epg-progress-track {
+    position: relative;
+    width: 100%;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background-color: rgba(127, 127, 127, 0.28);
+    background-image: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.12),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+        inset 0 1px 1px rgba(0, 0, 0, 0.18);
+}
+
+.epg-progress-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-radius: inherit;
+    background-color: var(--app-selection-color);
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.18),
+        rgba(255, 255, 255, 0)
+    );
+    box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--app-selection-border) 82%, transparent),
+        0 0 10px -2px var(--app-selection-glow);
+    transition: width 0.35s ease;
+}
+
+.epg-empty {
+    padding: 22px;
+    border: 1px dashed rgba(255, 255, 255, 0.12);
+    border-radius: 14px;
+    text-align: center;
+    font-size: 0.88rem;
+    opacity: 0.66;
+}
diff --git a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.ts b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.ts
new file mode 100644
index 0000000..c898796
--- /dev/null
+++ b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.ts
@@ -0,0 +1,50 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input, inject } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { TranslateModule } from '@ngx-translate/core';
+import { EpgItemDescriptionComponent } from '@iptvnator/ui/epg';
+import { EpgItem } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-epg-view',
+    templateUrl: './epg-view.component.html',
+    imports: [DatePipe, MatIconButton, MatIcon, MatListModule, TranslateModule],
+    styleUrls: ['./epg-view.component.scss'],
+})
+export class EpgViewComponent {
+    @Input() epgItems: EpgItem[] = [];
+
+    dialog = inject(MatDialog);
+
+    isCurrentProgram(item: EpgItem): boolean {
+        const end = item.stop ?? item.end;
+        const now = new Date().getTime();
+        const start = new Date(item.start).getTime();
+        const stop = new Date(end).getTime();
+        return now >= start && now <= stop;
+    }
+
+    getProgress(item: EpgItem): number {
+        const now = new Date().getTime();
+        const start = new Date(item.start).getTime();
+        const end = new Date(item.stop ?? item.end).getTime();
+
+        const total = end - start;
+        const current = now - start;
+
+        return Math.min(Math.max((current / total) * 100, 0), 100);
+    }
+
+    showDetails(item: EpgItem) {
+        this.dialog.open(EpgItemDescriptionComponent, {
+            width: '600px',
+            data: {
+                title: item.title ?? 'No title',
+                desc: item.description ?? 'No description',
+            },
+        });
+    }
+}
diff --git a/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.html b/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.html
new file mode 100644
index 0000000..7198214
--- /dev/null
+++ b/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.html
@@ -0,0 +1,79 @@
+<div
+    [class]="
+        player === 'videojs' || player === 'html5'
+            ? 'itv-container'
+            : 'itv-container-epg'
+    "
+>
+    <div
+        class="sidebar"
+        appResizable
+        [minWidth]="250"
+        [maxWidth]="600"
+        [defaultWidth]="400"
+        storageKey="sidebar-width"
+    >
+        <div class="sidebar-content">
+            <div class="search-panel">
+                <mat-form-field class="search-bar">
+                    <mat-icon matPrefix>search</mat-icon>
+                    <input
+                        matInput
+                        type="search"
+                        [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
+                        [(ngModel)]="searchString"
+                    />
+                </mat-form-field>
+            </div>
+            <div class="nav-list" style="height: calc(100% - 70px)">
+                <cdk-virtual-scroll-viewport
+                    [itemSize]="56"
+                    class="scroll-viewport-portals"
+                >
+                    <div
+                        class="nav-item"
+                        *cdkVirtualFor="
+                            let item of channels
+                                | filterBy: searchString() : 'name';
+                            trackBy: trackBy;
+                            templateCacheSize: 0
+                        "
+                        [class.selected]="
+                            item.stream_id === activeLiveStream?.stream_id
+                        "
+                        (click)="itemClicked.emit(item)"
+                    >
+                        @if (item.stream_icon) {
+                            <img
+                                class="stream-icon"
+                                [src]="item.stream_icon"
+                                alt="channel icon"
+                            />
+                        }
+                        <div class="title">
+                            {{ item.name }}
+                        </div>
+                    </div>
+                </cdk-virtual-scroll-viewport>
+            </div>
+        </div>
+    </div>
+    @if (player === 'videojs' || player === 'html5') {
+        @if (streamUrl) {
+            <div class="video-player">
+                <app-web-player-view [streamUrl]="streamUrl" />
+            </div>
+        }
+    }
+    @if (streamUrl) {
+        <div class="epg">
+            <div class="epg-content">
+                <app-epg-view [epgItems]="epgItems" />
+            </div>
+        </div>
+    } @else {
+        <div class="no-channel-selected">
+            {{ 'PORTALS.SELECT_CATEGORY' | translate }}
+        </div>
+    }
+</div>
diff --git a/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.scss b/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.scss
new file mode 100644
index 0000000..4a9e1a4
--- /dev/null
+++ b/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.scss
@@ -0,0 +1,201 @@
+@use '@angular/material' as mat;
+
+:host {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    display: block;
+}
+
+.itv-container {
+    display: grid;
+    // Use auto for sidebar to respect the directive's width
+    grid-template-columns: auto 1fr 1fr;
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0 0;
+    grid-auto-flow: row;
+    grid-template-areas:
+        'sidebar video-player video-player'
+        'sidebar epg epg';
+    height: 100%;
+}
+
+.itv-container-epg {
+    display: grid;
+    // Use auto for sidebar to respect the directive's width
+    grid-template-columns: auto 1fr 1fr;
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+    gap: 0 0;
+    grid-auto-flow: row;
+    grid-template-areas:
+        'sidebar epg epg'
+        'sidebar epg epg'
+        'sidebar epg epg';
+    height: 100%;
+}
+
+.sidebar {
+    grid-area: sidebar;
+    // Default width (controlled by resizable directive)
+    width: 400px;
+    min-width: 250px;
+    max-width: 600px;
+    flex-shrink: 0;
+    position: relative;
+    border-right: 1px solid #333;
+    display: flex;
+    flex-direction: column;
+}
+
+.video-player {
+    grid-area: video-player;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+}
+
+.video-player > app-web-player-view {
+    flex: 1;
+    min-height: 0;
+}
+
+.epg {
+    grid-area: epg;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.search-panel {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -15px;
+}
+
+.search-bar {
+    width: 90%;
+    @include mat.form-field-density(-5);
+}
+
+.epg-content {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-right: #111 1px solid;
+}
+
+.epg-content > app-epg-view {
+    flex: 1;
+    min-height: 0;
+}
+
+.sidebar-content {
+    height: 100%;
+    overflow-y: auto;
+    border-right: #111 1px solid;
+    overflow-x: hidden;
+}
+
+.no-channel-selected {
+    margin: 10px;
+}
+
+::ng-deep {
+    .search-bar {
+        div {
+            border-radius: 20px;
+        }
+    }
+}
+
+.nav-list {
+    flex: 1;
+    overflow-y: hidden;
+    padding: 0 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.nav-item {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 10px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--mat-sys-on-surface-variant);
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    box-sizing: border-box;
+    transition:
+        background 0.15s ease,
+        color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
+
+    .stream-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 4px;
+        object-fit: cover;
+        flex-shrink: 0;
+        background: color-mix(in srgb, var(--mat-sys-on-surface) 5%, transparent);
+    }
+
+    span,
+    .title {
+        line-height: 1.2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &:hover {
+        background: var(--mat-sys-surface-container);
+        color: var(--mat-sys-on-surface);
+    }
+
+    &.selected,
+    &.active {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        ) !important;
+        color: var(--app-selection-color) !important;
+        border-color: var(--app-selection-border) !important;
+        font-weight: 600;
+        box-shadow:
+            inset 0 0 0 1px var(--app-selection-border),
+            0 12px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+
+        * {
+            color: var(--app-selection-color) !important;
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset-inline-start: 6px;
+            top: 7px;
+            bottom: 7px;
+            width: 3px;
+            border-radius: 999px;
+            background: var(--app-selection-color);
+            box-shadow: 0 0 10px var(--app-selection-glow);
+        }
+    }
+}
diff --git a/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.ts b/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.ts
new file mode 100644
index 0000000..f2fcc0c
--- /dev/null
+++ b/libs/ui/shared-portals/src/lib/live-stream-layout/live-stream-layout.component.ts
@@ -0,0 +1,56 @@
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    signal,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { FilterPipe } from '@iptvnator/pipes';
+import { TranslateModule } from '@ngx-translate/core';
+import { WebPlayerViewComponent } from '@iptvnator/ui/playback';
+import { ResizableDirective } from 'components';
+import { EpgItem, VideoPlayer, XtreamItem } from 'shared-interfaces';
+import { EpgViewComponent } from '../epg-view/epg-view.component';
+
+@Component({
+    selector: 'app-live-stream-layout',
+    templateUrl: './live-stream-layout.component.html',
+    styleUrls: ['./live-stream-layout.component.scss'],
+    imports: [
+    EpgViewComponent,
+    FilterPipe,
+    FormsModule,
+    MatListModule,
+    MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
+    ResizableDirective,
+    ScrollingModule,
+    WebPlayerViewComponent,
+    TranslateModule
+],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LiveStreamLayoutComponent {
+    @Input({ required: true }) channels!: XtreamItem[];
+    @Input({ required: true }) player: VideoPlayer = VideoPlayer.VideoJs;
+    @Input() epgItems!: EpgItem[];
+    @Input() streamUrl!: string;
+    @Input() activeLiveStream!: XtreamItem;
+
+    @Output() itemClicked = new EventEmitter<XtreamItem>();
+
+    searchString = signal<string>('');
+
+    trackBy(_index: number, item: XtreamItem) {
+        return item.stream_id;
+    }
+}
diff --git a/libs/ui/shared-portals/src/test-setup.ts b/libs/ui/shared-portals/src/test-setup.ts
new file mode 100644
index 0000000..b15cdf3
--- /dev/null
+++ b/libs/ui/shared-portals/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true
+});
diff --git a/libs/ui/shared-portals/tsconfig.json b/libs/ui/shared-portals/tsconfig.json
new file mode 100644
index 0000000..757b823
--- /dev/null
+++ b/libs/ui/shared-portals/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/libs/ui/shared-portals/tsconfig.lib.json b/libs/ui/shared-portals/tsconfig.lib.json
new file mode 100644
index 0000000..77c91b1
--- /dev/null
+++ b/libs/ui/shared-portals/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}
diff --git a/libs/ui/shared-portals/tsconfig.spec.json b/libs/ui/shared-portals/tsconfig.spec.json
new file mode 100644
index 0000000..553f8af
--- /dev/null
+++ b/libs/ui/shared-portals/tsconfig.spec.json
@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": [
+      "jest",
+      "node"
+    ],
+    "moduleResolution": "node10"
+  },
+  "files": [
+    "src/test-setup.ts"
+  ],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/ui/styles/_content-grid.scss b/libs/ui/styles/_content-grid.scss
new file mode 100644
index 0000000..e8237fe
--- /dev/null
+++ b/libs/ui/styles/_content-grid.scss
@@ -0,0 +1,120 @@
+// Shared content grid and card styles
+//
+// Usage (after adding libs/ui/styles to stylePreprocessorOptions.includePaths):
+//   @use 'content-grid' as grid;
+//   @include grid.content-grid;
+//   @include grid.content-card;
+
+@mixin content-grid($min-width: 140px, $gap: 20px) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
+    gap: $gap;
+}
+
+@mixin content-card {
+    cursor: pointer;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    }
+}
+
+@mixin thumbnail-wrapper {
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .poster {
+        width: 100%;
+        aspect-ratio: 2/3;
+        object-fit: cover;
+        display: block;
+    }
+
+    .poster-placeholder {
+        width: 100%;
+        aspect-ratio: 2/3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(128, 128, 128, 0.1);
+
+        mat-icon {
+            font-size: 36px;
+            width: 36px;
+            height: 36px;
+            opacity: 0.25;
+        }
+    }
+}
+
+@mixin type-badge {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    background: rgba(0, 0, 0, 0.85);
+    color: #fff;
+
+    &.live {
+        color: #ef5350;
+    }
+    &.movie {
+        color: #42a5f5;
+    }
+    &.series {
+        color: #66bb6a;
+    }
+}
+
+@mixin remove-button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    width: 28px;
+    height: 28px;
+    padding: 0;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    mat-icon {
+        color: white;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+@mixin card-info {
+    padding: 8px 10px;
+
+    h3 {
+        margin: 0;
+        font-size: 0.8rem;
+        font-weight: 500;
+        line-height: 1.3;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .date-info {
+        margin: 4px 0 0;
+        font-size: 0.7rem;
+        opacity: 0.6;
+    }
+}
diff --git a/libs/ui/styles/_index.scss b/libs/ui/styles/_index.scss
new file mode 100644
index 0000000..21a81b4
--- /dev/null
+++ b/libs/ui/styles/_index.scss
@@ -0,0 +1,11 @@
+// ─── IPTVnator UI styles library ─────────────────────────────────────────────
+// Add libs/ui/styles to stylePreprocessorOptions.includePaths in project.json
+// to import these without relative paths:
+//
+//   @use 'portal-layout'  as portal;
+//   @use 'content-grid'   as grid;
+//   @use 'portal-sidebar';
+
+@forward 'portal-layout';
+@forward 'content-grid';
+@forward 'portal-sidebar';
diff --git a/libs/ui/styles/_panel-header.scss b/libs/ui/styles/_panel-header.scss
new file mode 100644
index 0000000..0738bf2
--- /dev/null
+++ b/libs/ui/styles/_panel-header.scss
@@ -0,0 +1,60 @@
+@mixin standard-panel-header(
+    $sticky: false,
+    $padding: 0 20px,
+    $gap: 12px,
+    $min-height: 52px,
+    $z-index: 2,
+    $border-color: var(--app-widget-header-border, rgba(255, 255, 255, 0.05))
+) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: $gap;
+    padding: $padding;
+    min-height: $min-height;
+    flex-shrink: 0;
+    background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid $border-color;
+
+    @if $sticky {
+        position: sticky;
+        top: 0;
+        z-index: $z-index;
+    }
+}
+
+@mixin standard-panel-meta($gap: 10px) {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: $gap;
+    flex: 1;
+}
+
+@mixin standard-panel-title($font-size: 0.95rem) {
+    margin: 0;
+    font-size: $font-size;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+    letter-spacing: -0.01em;
+}
+
+@mixin standard-panel-subtitle(
+    $font-size: 0.78rem,
+    $font-weight: 500,
+    $padding: 2px 8px,
+    $color: var(--app-body-color, var(--mat-sys-on-surface-variant)),
+    $background: var(--mat-sys-surface-container)
+) {
+    white-space: nowrap;
+    font-size: $font-size;
+    font-weight: $font-weight;
+    color: $color;
+    background: $background;
+    padding: $padding;
+    border-radius: 999px;
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/libs/ui/styles/_portal-layout.scss b/libs/ui/styles/_portal-layout.scss
new file mode 100644
index 0000000..b79d904
--- /dev/null
+++ b/libs/ui/styles/_portal-layout.scss
@@ -0,0 +1,93 @@
+// ─── Shared mixin for live-stream portal layouts ──────────────────────────────
+// Used by: xtream live-stream-layout, stalker live-stream-layout,
+//           portal-collection-live-shell
+//
+// Include this mixin in a component's SCSS to get the shared flex host+sidebar
+// skeleton, then add only the component-specific rules underneath.
+//
+// Usage (after adding libs/ui/styles to stylePreprocessorOptions.includePaths):
+//   @use 'portal-layout' as portal;
+//   @include portal.live-layout;
+
+@mixin live-layout {
+    :host {
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+    }
+
+    // ─── Sidebar ─────────────────────────────────────────────────────────────
+    .sidebar {
+        // Width controlled by the resizable directive at runtime
+        width: 400px;
+        min-width: 250px;
+        max-width: 600px;
+        border-right: 1px solid var(--app-separator);
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        overflow: hidden;
+        position: relative;
+        container-type: inline-size;
+
+        app-category-view {
+            flex: 1;
+            overflow-y: auto;
+            overflow-x: hidden;
+            margin-right: 2px;
+        }
+    }
+
+    // ─── Main content column ─────────────────────────────────────────────────
+    .content-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        min-height: 0;
+    }
+
+    .video-player {
+        flex: 1 1 0;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+
+        > app-web-player-view {
+            flex: 1;
+            min-height: 0;
+        }
+    }
+
+    .epg {
+        flex: 1 1 0;
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    .epg-content {
+        height: 100%;
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+
+        > app-epg-view {
+            flex: 1;
+            min-height: 0;
+        }
+    }
+
+    // ─── Fix artplayer sizing when nested inside .video-player ───────────────
+    ::ng-deep {
+        .video-player
+            > app-web-player-view
+            > app-art-player
+            > .artplayer-container {
+            height: 100% !important;
+            width: 100% !important;
+        }
+    }
+}
diff --git a/libs/ui/styles/_portal-sidebar.scss b/libs/ui/styles/_portal-sidebar.scss
new file mode 100644
index 0000000..44813b4
--- /dev/null
+++ b/libs/ui/styles/_portal-sidebar.scss
@@ -0,0 +1,79 @@
+// ─── Shared sidebar + sidebar-header styles ───────────────────────────────────
+// Plain CSS rules (not a mixin) used for M3U/legacy sidebar layouts.
+//
+// Usage (after adding libs/ui/styles to stylePreprocessorOptions.includePaths):
+//   @use 'portal-sidebar';   (no alias needed — no exported members to call)
+
+.sidebar {
+    // Width is controlled by the resizable directive
+    // Default fallback if directive not applied
+    width: 400px;
+    min-width: 250px;
+    max-width: 600px;
+    border-right: 1px solid var(--app-separator);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0; // Prevent sidebar from shrinking
+
+    .sidebar-header {
+        padding: 8px 12px;
+        background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+        border-bottom: 1px solid var(--app-separator);
+        app-region: drag;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+
+        h2 {
+            margin: 0;
+            font-size: 0.94rem;
+            font-weight: 600;
+            letter-spacing: -0.01em;
+            color: var(--mat-sys-on-surface);
+            flex: 1;
+        }
+
+        button {
+            app-region: no-drag;
+        }
+
+        .switcher {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .manage-categories-btn {
+            margin-left: auto;
+        }
+
+        .category-heading {
+            display: flex;
+            align-items: baseline;
+            gap: 8px;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .category-title {
+            margin: 0;
+            font-size: 0.94rem;
+            font-weight: 600;
+            letter-spacing: -0.01em;
+            color: var(--mat-sys-on-surface);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .category-count {
+            flex-shrink: 0;
+            font-size: 0.72rem;
+            font-weight: 500;
+            color: var(--mat-sys-on-surface-variant);
+            background: var(--mat-sys-surface-container);
+            padding: 2px 8px;
+            border-radius: 999px;
+        }
+    }
+}
diff --git a/libs/vercel.json b/libs/vercel.json
new file mode 100644
index 0000000..a694806
--- /dev/null
+++ b/libs/vercel.json
@@ -0,0 +1,5 @@
+{
+    "git": {
+        "deploymentEnabled": false
+    }
+}
diff --git a/libs/workspace/dashboard/data-access/README.md b/libs/workspace/dashboard/data-access/README.md
new file mode 100644
index 0000000..33ce105
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/README.md
@@ -0,0 +1,3 @@
+# data-access
+
+This library was generated with [Nx](https://nx.dev).
diff --git a/libs/workspace/dashboard/data-access/eslint.config.mjs b/libs/workspace/dashboard/data-access/eslint.config.mjs
new file mode 100644
index 0000000..51f77a3
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'lib',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'lib',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/workspace/dashboard/data-access/jest.config.ts b/libs/workspace/dashboard/data-access/jest.config.ts
new file mode 100644
index 0000000..58d8936
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/jest.config.ts
@@ -0,0 +1,22 @@
+export default {
+    displayName: 'workspace-dashboard-data-access',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/workspace/dashboard/data-access',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+    moduleFileExtensions: ['ts', 'js', 'html'],
+};
diff --git a/libs/workspace/dashboard/data-access/project.json b/libs/workspace/dashboard/data-access/project.json
new file mode 100644
index 0000000..d72c78f
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "workspace-dashboard-data-access",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/workspace/dashboard/data-access/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:workspace", "domain:workspace", "type:data-access"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/workspace/dashboard/data-access/jest.config.ts",
+                "tsConfig": "libs/workspace/dashboard/data-access/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/workspace/dashboard/data-access/src/index.ts b/libs/workspace/dashboard/data-access/src/index.ts
new file mode 100644
index 0000000..968d33e
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/dashboard-data.service';
diff --git a/libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.spec.ts b/libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.spec.ts
new file mode 100644
index 0000000..9cd3683
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.spec.ts
@@ -0,0 +1,706 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { selectAllPlaylistsMeta, selectPlaylistsLoadingFlag } from 'm3u-state';
+import { of } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import { Playlist, PlaylistMeta } from 'shared-interfaces';
+import { DashboardDataService } from './dashboard-data.service';
+
+describe('DashboardDataService', () => {
+    let service: DashboardDataService;
+    const playlistsLoadedSignal = signal(true);
+
+    const createDefaultPlaylists = (): PlaylistMeta[] => [
+        {
+            _id: 'm3u-1',
+            title: 'M3U Playlist',
+            count: 1,
+            importDate: '2026-01-01T00:00:00.000Z',
+            autoRefresh: false,
+            favorites: ['channel-1', 'https://example.com/stream-2.m3u8'],
+            recentlyViewed: [
+                {
+                    source: 'm3u',
+                    id: 'https://example.com/stream-1.m3u8',
+                    url: 'https://example.com/stream-1.m3u8',
+                    title: 'Channel One',
+                    channel_id: 'channel-1',
+                    poster_url: 'https://example.com/logo-1.png',
+                    tvg_id: 'tvg-1',
+                    tvg_name: 'Channel One',
+                    group_title: 'News',
+                    category_id: 'live',
+                    added_at: '2026-02-01T12:00:00.000Z',
+                },
+            ],
+        },
+        {
+            _id: 'xtream-1',
+            title: 'Xtream Playlist',
+            count: 1,
+            importDate: '2026-01-01T00:00:00.000Z',
+            autoRefresh: false,
+            serverUrl: 'https://example.com',
+        },
+    ];
+
+    const playlistsSignal = signal<PlaylistMeta[]>(createDefaultPlaylists());
+
+    const storeMock = {
+        selectSignal: jest.fn((selector: unknown) => {
+            if (selector === selectAllPlaylistsMeta) {
+                return playlistsSignal;
+            }
+            if (selector === selectPlaylistsLoadingFlag) {
+                return playlistsLoadedSignal;
+            }
+            return signal(null);
+        }),
+        dispatch: jest.fn(),
+    };
+
+    const dbServiceMock = {
+        getGlobalRecentlyAdded: jest.fn().mockResolvedValue([]),
+        getGlobalRecentlyViewed: jest.fn().mockResolvedValue([]),
+        getAllGlobalFavorites: jest.fn().mockResolvedValue([]),
+        removeFromFavorites: jest.fn().mockResolvedValue(undefined),
+        removeRecentItem: jest.fn().mockResolvedValue(undefined),
+    };
+    const playlistMock: Playlist = {
+        _id: 'm3u-1',
+        title: 'M3U Playlist',
+        count: 2,
+        importDate: '2026-01-01T00:00:00.000Z',
+        lastUsage: '2026-01-01T00:00:00.000Z',
+        autoRefresh: false,
+        favorites: ['channel-1', 'https://example.com/stream-2.m3u8'],
+        playlist: {
+            items: [
+                {
+                    id: 'channel-1',
+                    name: 'Channel One',
+                    url: 'https://example.com/stream-1.m3u8',
+                    tvg: {
+                        logo: 'https://example.com/logo-1.png',
+                        id: 'tvg-1',
+                        name: 'Channel One',
+                    },
+                },
+                {
+                    id: 'channel-2',
+                    name: 'Channel Two',
+                    url: 'https://example.com/stream-2.m3u8',
+                    tvg: {
+                        logo: 'https://example.com/logo-2.png',
+                        id: 'tvg-2',
+                        name: 'Channel Two',
+                    },
+                },
+            ],
+        },
+    } as Playlist;
+    const playlistsServiceMock = {
+        getPlaylistById: jest.fn().mockReturnValue(of(playlistMock)),
+        setFavorites: jest.fn().mockReturnValue(of(undefined)),
+        removeFromM3uRecentlyViewed: jest.fn().mockReturnValue(
+            of({
+                ...playlistMock,
+                recentlyViewed: [],
+            })
+        ),
+    };
+
+    beforeEach(() => {
+        Object.defineProperty(window, 'electron', {
+            value: {} as Window['electron'],
+            configurable: true,
+        });
+        playlistsLoadedSignal.set(true);
+        playlistsSignal.set(createDefaultPlaylists());
+        playlistsServiceMock.getPlaylistById.mockClear();
+        playlistsServiceMock.getPlaylistById.mockReturnValue(of(playlistMock));
+        playlistsServiceMock.setFavorites.mockClear();
+        playlistsServiceMock.setFavorites.mockReturnValue(of(undefined));
+        playlistsServiceMock.removeFromM3uRecentlyViewed.mockClear();
+        playlistsServiceMock.removeFromM3uRecentlyViewed.mockReturnValue(
+            of({
+                ...playlistMock,
+                recentlyViewed: [],
+            })
+        );
+        dbServiceMock.getAllGlobalFavorites.mockClear();
+        dbServiceMock.getAllGlobalFavorites.mockResolvedValue([]);
+        dbServiceMock.getGlobalRecentlyAdded.mockClear();
+        dbServiceMock.getGlobalRecentlyAdded.mockResolvedValue([]);
+        dbServiceMock.getGlobalRecentlyViewed.mockClear();
+        dbServiceMock.getGlobalRecentlyViewed.mockResolvedValue([]);
+        dbServiceMock.removeFromFavorites.mockClear();
+        dbServiceMock.removeRecentItem.mockClear();
+        storeMock.dispatch.mockClear();
+
+        TestBed.configureTestingModule({
+            providers: [
+                DashboardDataService,
+                { provide: Store, useValue: storeMock },
+                { provide: DatabaseService, useValue: dbServiceMock },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsServiceMock,
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        onLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+            ],
+        });
+        service = TestBed.inject(DashboardDataService);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('does not eagerly load dashboard datasets on construction', () => {
+        expect(dbServiceMock.getGlobalRecentlyViewed).not.toHaveBeenCalled();
+        expect(dbServiceMock.getAllGlobalFavorites).not.toHaveBeenCalled();
+        expect(dbServiceMock.getGlobalRecentlyAdded).not.toHaveBeenCalled();
+        expect(playlistsServiceMock.getPlaylistById).not.toHaveBeenCalled();
+        expect(service.dashboardReady()).toBe(false);
+    });
+
+    it('keeps dashboardReady false until xtream recently added finishes its first load', async () => {
+        expect(service.dashboardReady()).toBe(false);
+
+        await service.reloadGlobalRecentItems();
+        expect(service.dashboardReady()).toBe(false);
+
+        await service.reloadGlobalFavorites();
+        expect(service.dashboardReady()).toBe(false);
+
+        await service.reloadXtreamRecentlyAddedItems();
+        expect(service.dashboardReady()).toBe(true);
+    });
+
+    it('does not wait on xtream recently added when no xtream playlists exist', async () => {
+        playlistsSignal.set([
+            {
+                _id: 'm3u-1',
+                title: 'M3U Playlist',
+                count: 1,
+                importDate: '2026-01-01T00:00:00.000Z',
+                autoRefresh: false,
+                favorites: [],
+                recentlyViewed: [],
+            },
+        ]);
+
+        await service.reloadGlobalRecentItems();
+        expect(service.dashboardReady()).toBe(false);
+
+        await service.reloadGlobalFavorites();
+        expect(service.dashboardReady()).toBe(true);
+    });
+
+    it('includes M3U favorites in global favorite items', async () => {
+        await service.reloadGlobalFavorites();
+
+        expect(service.globalFavoriteItems()).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    id: 'channel-1',
+                    title: 'Channel One',
+                    type: 'live',
+                    playlist_id: 'm3u-1',
+                    source: 'm3u',
+                    poster_url: 'https://example.com/logo-1.png',
+                }),
+                expect.objectContaining({
+                    id: 'https://example.com/stream-2.m3u8',
+                    title: 'Channel Two',
+                    type: 'live',
+                    playlist_id: 'm3u-1',
+                    source: 'm3u',
+                    poster_url: 'https://example.com/logo-2.png',
+                }),
+            ])
+        );
+    });
+
+    it('includes Xtream movies and series in global favorite items', async () => {
+        dbServiceMock.getAllGlobalFavorites.mockResolvedValue([
+            {
+                id: 51,
+                category_id: 12,
+                title: 'Action Movie',
+                rating: '8.0',
+                added_at: '2026-02-02T10:00:00.000Z',
+                poster_url: 'https://example.com/movie.png',
+                xtream_id: 5001,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+            {
+                id: 52,
+                category_id: 13,
+                title: 'Sci-Fi Series',
+                rating: '8.7',
+                added_at: '2026-02-03T10:00:00.000Z',
+                poster_url: 'https://example.com/series.png',
+                xtream_id: 5002,
+                type: 'series',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await service.reloadGlobalFavorites();
+
+        expect(service.globalFavoriteItems()).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    id: 51,
+                    title: 'Action Movie',
+                    type: 'movie',
+                    source: 'xtream',
+                }),
+                expect.objectContaining({
+                    id: 52,
+                    title: 'Sci-Fi Series',
+                    type: 'series',
+                    source: 'xtream',
+                }),
+            ])
+        );
+        expect(
+            service
+                .globalFavoriteItems()
+                .filter((item) => item.type === 'movie')
+        ).toHaveLength(1);
+        expect(
+            service
+                .globalFavoriteItems()
+                .filter((item) => item.type === 'series')
+        ).toHaveLength(1);
+    });
+
+    it('builds the M3U favorites route', async () => {
+        await service.reloadGlobalFavorites();
+        const m3uItem = service
+            .globalFavoriteItems()
+            .find((item) => item.source === 'm3u');
+
+        expect(m3uItem).toBeDefined();
+        expect(service.getGlobalFavoriteLink(m3uItem!)).toEqual([
+            '/workspace',
+            'playlists',
+            'm3u-1',
+            'favorites',
+        ]);
+        expect(service.getGlobalFavoriteNavigationState(m3uItem!)).toEqual({
+            openLiveCollectionItem: {
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'm3u-1',
+                itemId: 'channel-1',
+                title: 'Channel One',
+                imageUrl: 'https://example.com/logo-1.png',
+            },
+        });
+    });
+
+    it('routes Xtream non-live favorites through the global favorites page with inline detail state', async () => {
+        dbServiceMock.getAllGlobalFavorites.mockResolvedValue([
+            {
+                id: 51,
+                category_id: 12,
+                title: 'Action Movie',
+                rating: '8.0',
+                added_at: '2026-02-02T10:00:00.000Z',
+                poster_url: 'https://example.com/movie.png',
+                xtream_id: 5001,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await service.reloadGlobalFavorites();
+        const movieItem = service
+            .globalFavoriteItems()
+            .find((item) => item.type === 'movie');
+
+        expect(movieItem).toBeDefined();
+        expect(service.getGlobalFavoriteLink(movieItem!)).toEqual([
+            '/workspace',
+            'global-favorites',
+        ]);
+        expect(service.getGlobalFavoriteNavigationState(movieItem!)).toEqual({
+            openCollectionDetailItem: {
+                item: expect.objectContaining({
+                    uid: 'xtream::xtream-1::movie:5001',
+                    name: 'Action Movie',
+                    contentType: 'movie',
+                    sourceType: 'xtream',
+                    playlistId: 'xtream-1',
+                }),
+            },
+        });
+    });
+
+    it('removes M3U favorites via PlaylistsService', async () => {
+        await service.reloadGlobalFavorites();
+        const m3uItem = service
+            .globalFavoriteItems()
+            .find((item) => item.id === 'channel-1');
+
+        expect(m3uItem).toBeDefined();
+
+        await service.removeGlobalFavorite(m3uItem!);
+
+        expect(playlistsServiceMock.setFavorites).toHaveBeenCalledWith(
+            'm3u-1',
+            ['https://example.com/stream-2.m3u8']
+        );
+    });
+
+    it('includes M3U recently viewed items in global recent items', () => {
+        expect(service.globalRecentItems()).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    id: 'https://example.com/stream-1.m3u8',
+                    title: 'Channel One',
+                    type: 'live',
+                    playlist_id: 'm3u-1',
+                    source: 'm3u',
+                    xtream_id: 'https://example.com/stream-1.m3u8',
+                }),
+            ])
+        );
+    });
+
+    it('prioritizes recently used Xtream sources over newer imported M3U sources', async () => {
+        playlistsSignal.set([
+            {
+                _id: 'm3u-fresh',
+                title: 'Fresh Import',
+                count: 1,
+                importDate: '2026-04-20T12:00:00.000Z',
+                autoRefresh: false,
+                favorites: [],
+                recentlyViewed: [],
+            },
+            {
+                _id: 'xtream-1',
+                title: 'Xtream Playlist',
+                count: 1,
+                importDate: '2026-01-01T00:00:00.000Z',
+                autoRefresh: false,
+                serverUrl: 'https://example.com',
+            },
+        ]);
+        dbServiceMock.getGlobalRecentlyViewed.mockResolvedValue([
+            {
+                id: 91,
+                category_id: 18,
+                title: 'Recent Movie',
+                rating: '7.8',
+                viewed_at: '2026-04-21T10:00:00.000Z',
+                poster_url: 'https://example.com/recent-movie.png',
+                xtream_id: 7001,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await service.reloadGlobalRecentItems();
+
+        expect(service.recentPlaylists().map((playlist) => playlist._id)).toEqual(
+            ['xtream-1', 'm3u-fresh']
+        );
+    });
+
+    it('includes M3U, Xtream, and Stalker sources when all have recent activity', async () => {
+        playlistsSignal.set([
+            {
+                _id: 'm3u-1',
+                title: 'M3U Playlist',
+                count: 1,
+                importDate: '2026-01-01T00:00:00.000Z',
+                autoRefresh: false,
+                favorites: [],
+                recentlyViewed: [
+                    {
+                        source: 'm3u',
+                        id: 'https://example.com/stream-1.m3u8',
+                        url: 'https://example.com/stream-1.m3u8',
+                        title: 'Channel One',
+                        category_id: 'live',
+                        added_at: '2026-04-19T10:00:00.000Z',
+                    },
+                ],
+            },
+            {
+                _id: 'stalker-1',
+                title: 'Stalker Playlist',
+                count: 1,
+                importDate: '2026-01-01T00:00:00.000Z',
+                autoRefresh: false,
+                macAddress: '00:11:22:33:44:55',
+                recentlyViewed: [
+                    {
+                        id: 'stalker-item-1',
+                        name: 'Stalker Movie',
+                        category_id: 'vod',
+                        added_at: '2026-04-20T10:00:00.000Z',
+                    },
+                ],
+            },
+            {
+                _id: 'xtream-1',
+                title: 'Xtream Playlist',
+                count: 1,
+                importDate: '2026-01-01T00:00:00.000Z',
+                autoRefresh: false,
+                serverUrl: 'https://example.com',
+            },
+        ]);
+        dbServiceMock.getGlobalRecentlyViewed.mockResolvedValue([
+            {
+                id: 91,
+                category_id: 18,
+                title: 'Recent Movie',
+                rating: '7.8',
+                viewed_at: '2026-04-21T10:00:00.000Z',
+                poster_url: 'https://example.com/recent-movie.png',
+                xtream_id: 7001,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await service.reloadGlobalRecentItems();
+
+        expect(service.recentPlaylists().map((playlist) => playlist._id)).toEqual(
+            ['xtream-1', 'stalker-1', 'm3u-1']
+        );
+    });
+
+    it('falls back to playlist metadata ordering when sources have no recent activity', async () => {
+        playlistsSignal.set([
+            {
+                _id: 'xtream-1',
+                title: 'Xtream Playlist',
+                count: 1,
+                importDate: '2026-01-01T00:00:00.000Z',
+                autoRefresh: false,
+                serverUrl: 'https://example.com',
+            },
+            {
+                _id: 'stalker-1',
+                title: 'Stalker Playlist',
+                count: 1,
+                importDate: '2026-03-01T00:00:00.000Z',
+                autoRefresh: false,
+                macAddress: '00:11:22:33:44:55',
+                recentlyViewed: [],
+            },
+            {
+                _id: 'm3u-1',
+                title: 'M3U Playlist',
+                count: 1,
+                importDate: '2026-02-01T00:00:00.000Z',
+                updateDate: Date.parse('2026-04-01T00:00:00.000Z'),
+                autoRefresh: false,
+                favorites: [],
+                recentlyViewed: [],
+            },
+        ]);
+        dbServiceMock.getGlobalRecentlyViewed.mockResolvedValue([]);
+
+        await service.reloadGlobalRecentItems();
+
+        expect(service.recentPlaylists().map((playlist) => playlist._id)).toEqual(
+            ['m3u-1', 'stalker-1', 'xtream-1']
+        );
+    });
+
+    it('maps recently added Xtream rows for the widget', async () => {
+        dbServiceMock.getGlobalRecentlyAdded.mockResolvedValue([
+            {
+                id: 11,
+                category_id: 77,
+                title: 'Fresh Movie',
+                rating: '8.1',
+                added: '1774298340',
+                added_at: '1774298340',
+                poster_url: 'https://example.com/poster.png',
+                xtream_id: 501,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await expect(
+            service.getGlobalRecentlyAddedItems('all', 25)
+        ).resolves.toEqual([
+            expect.objectContaining({
+                id: 11,
+                title: 'Fresh Movie',
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                source: 'xtream',
+                added_at: expect.any(String),
+            }),
+        ]);
+        expect(dbServiceMock.getGlobalRecentlyAdded).toHaveBeenCalledWith(
+            'all',
+            25
+        );
+    });
+
+    it('builds the Xtream recently added route', () => {
+        const item = {
+            id: 11,
+            title: 'Fresh Series',
+            type: 'series',
+            playlist_id: 'xtream-1',
+            playlist_name: 'Xtream Playlist',
+            added_at: '2026-03-27T14:39:00.000Z',
+            category_id: 77,
+            xtream_id: 501,
+            poster_url: 'https://example.com/poster.png',
+            source: 'xtream',
+        } as const;
+
+        expect(service.getRecentlyAddedLink(item)).toEqual([
+            '/workspace',
+            'xtreams',
+            'xtream-1',
+            'series',
+            '77',
+            '501',
+        ]);
+        expect(service.getRecentlyAddedNavigationState(item)).toBeUndefined();
+    });
+
+    it('builds the M3U recent route with collection auto-open state', () => {
+        const m3uItem = service
+            .globalRecentItems()
+            .find((item) => item.source === 'm3u');
+
+        expect(m3uItem).toBeDefined();
+        expect(service.getRecentItemLink(m3uItem!)).toEqual([
+            '/workspace',
+            'playlists',
+            'm3u-1',
+            'recent',
+        ]);
+        expect(service.getRecentItemNavigationState(m3uItem!)).toEqual({
+            openLiveCollectionItem: {
+                contentType: 'live',
+                sourceType: 'm3u',
+                playlistId: 'm3u-1',
+                itemId: 'https://example.com/stream-1.m3u8',
+                title: 'Channel One',
+                imageUrl: 'https://example.com/logo-1.png',
+            },
+        });
+    });
+
+    it('routes Xtream non-live recents through the global recent page with inline detail state', async () => {
+        dbServiceMock.getGlobalRecentlyViewed.mockResolvedValue([
+            {
+                id: 91,
+                category_id: 18,
+                title: 'Recent Movie',
+                rating: '7.8',
+                viewed_at: '2026-02-04T10:00:00.000Z',
+                poster_url: 'https://example.com/recent-movie.png',
+                backdrop_url: 'https://example.com/recent-movie-backdrop.png',
+                xtream_id: 7001,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await service.reloadGlobalRecentItems();
+        const movieItem = service
+            .globalRecentItems()
+            .find((item) => item.source === 'xtream');
+
+        expect(movieItem).toEqual(
+            expect.objectContaining({
+                backdrop_url: 'https://example.com/recent-movie-backdrop.png',
+            })
+        );
+        expect(service.getRecentItemLink(movieItem!)).toEqual([
+            '/workspace',
+            'global-recent',
+        ]);
+        expect(service.getRecentItemNavigationState(movieItem!)).toEqual({
+            openCollectionDetailItem: {
+                item: expect.objectContaining({
+                    uid: 'xtream::xtream-1::movie:7001',
+                    name: 'Recent Movie',
+                    contentType: 'movie',
+                    sourceType: 'xtream',
+                    playlistId: 'xtream-1',
+                }),
+            },
+        });
+    });
+
+    it('normalizes SQLite-style Xtream recent timestamps before sorting and rendering', async () => {
+        dbServiceMock.getGlobalRecentlyViewed.mockResolvedValue([
+            {
+                id: 91,
+                category_id: 18,
+                title: 'Recent Movie',
+                rating: '7.8',
+                viewed_at: '2026-02-04 10:00:00',
+                poster_url: 'https://example.com/recent-movie.png',
+                xtream_id: 7001,
+                type: 'movie',
+                playlist_id: 'xtream-1',
+                playlist_name: 'Xtream Playlist',
+            },
+        ]);
+
+        await service.reloadGlobalRecentItems();
+        const movieItem = service
+            .globalRecentItems()
+            .find((item) => item.source === 'xtream');
+
+        expect(movieItem).toEqual(
+            expect.objectContaining({
+                viewed_at: '2026-02-04T10:00:00.000Z',
+            })
+        );
+    });
+
+    it('removes M3U recently viewed via PlaylistsService', async () => {
+        const m3uItem = service
+            .globalRecentItems()
+            .find((item) => item.source === 'm3u');
+
+        expect(m3uItem).toBeDefined();
+
+        await service.removeGlobalRecentItem(m3uItem!);
+
+        expect(
+            playlistsServiceMock.removeFromM3uRecentlyViewed
+        ).toHaveBeenCalledWith('m3u-1', 'https://example.com/stream-1.m3u8');
+    });
+});
diff --git a/libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.ts b/libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.ts
new file mode 100644
index 0000000..70c95af
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/src/lib/dashboard-data.service.ts
@@ -0,0 +1,839 @@
+import {
+    Injectable,
+    NgZone,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import {
+    PlaylistActions,
+    selectAllPlaylistsMeta,
+    selectPlaylistsLoadingFlag,
+} from 'm3u-state';
+import { firstValueFrom, startWith } from 'rxjs';
+import {
+    DatabaseService,
+    GlobalRecentlyAddedKind,
+    PlaylistsService,
+} from 'services';
+import {
+    buildPlaylistRecentItems,
+    Channel,
+    Playlist,
+    PortalAddedItem,
+    PortalActivityItem,
+    PlaylistMeta,
+    PortalActivityType,
+    PortalFavoriteItem,
+    PortalRecentItem,
+    stalkerItemMatchesId,
+} from 'shared-interfaces';
+import {
+    buildStalkerFavoriteItems,
+    getActivityTypeLabelKey,
+    mapDbFavoriteToItem,
+    mapDbRecentlyAddedToItem,
+    mapDbRecentToItem,
+    toDateTimestamp,
+    toTimestamp,
+} from './dashboard-mappers';
+import {
+    buildStalkerDetailNavigationTarget,
+    buildStalkerStateItem,
+    buildXtreamNavigationTarget,
+    getGlobalFavoriteNavigation,
+    getRecentItemNavigation,
+    WorkspaceNavigationTarget,
+} from '@iptvnator/portal/shared/util';
+
+export type DashboardContentKind = 'all' | 'channels' | 'vod' | 'series';
+
+/** @deprecated Use {@link PortalRecentItem} from `shared-interfaces` instead. */
+export type GlobalRecentItem = PortalRecentItem;
+/** @deprecated Use {@link PortalFavoriteItem} from `shared-interfaces` instead. */
+export type DashboardFavoriteItem = PortalFavoriteItem;
+/** @deprecated Use {@link PortalAddedItem} from `shared-interfaces` instead. */
+export type DashboardRecentlyAddedItem = PortalAddedItem;
+export type DashboardRecentlyAddedFilterKind = GlobalRecentlyAddedKind;
+
+@Injectable({ providedIn: 'root' })
+export class DashboardDataService {
+    private readonly store = inject(Store);
+    private readonly dbService = inject(DatabaseService);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly ngZone = inject(NgZone);
+    private readonly translate = inject(TranslateService);
+    private favoritesAutoRefreshEnabled = false;
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    private readonly xtreamGlobalRecentItems = signal<GlobalRecentItem[]>([]);
+    private readonly xtreamRecentlyAddedItemsState = signal<
+        DashboardRecentlyAddedItem[]
+    >([]);
+    private readonly xtreamGlobalFavorites = signal<DashboardFavoriteItem[]>(
+        []
+    );
+    private readonly m3uGlobalFavorites = signal<DashboardFavoriteItem[]>([]);
+    private readonly globalRecentLoadingState = signal(true);
+    private readonly globalRecentLoadedState = signal(false);
+    private readonly globalRecentDbLoadedState = signal(!window.electron);
+    private readonly globalFavoritesLoadingState = signal(true);
+    private readonly globalFavoritesLoadedState = signal(false);
+    private readonly xtreamRecentlyAddedLoadingState = signal(true);
+    private readonly xtreamRecentlyAddedLoadedState = signal(false);
+    readonly playlists = this.store.selectSignal(selectAllPlaylistsMeta);
+    readonly playlistsLoaded = this.store.selectSignal(
+        selectPlaylistsLoadingFlag
+    );
+    readonly xtreamPlaylistCount = computed(
+        () => this.playlists().filter((playlist) => !!playlist.serverUrl).length
+    );
+    readonly hasXtreamPlaylists = computed(() => this.xtreamPlaylistCount() > 0);
+    readonly globalRecentLoading = this.globalRecentLoadingState.asReadonly();
+    readonly globalRecentLoaded = this.globalRecentLoadedState.asReadonly();
+    readonly globalFavoritesLoading =
+        this.globalFavoritesLoadingState.asReadonly();
+    readonly globalFavoritesLoaded =
+        this.globalFavoritesLoadedState.asReadonly();
+    readonly xtreamRecentlyAddedLoading =
+        this.xtreamRecentlyAddedLoadingState.asReadonly();
+    readonly xtreamRecentlyAddedLoaded =
+        this.xtreamRecentlyAddedLoadedState.asReadonly();
+    readonly xtreamRecentlyAddedItems =
+        this.xtreamRecentlyAddedItemsState.asReadonly();
+    readonly dashboardReady = computed(
+        () =>
+            this.playlistsLoaded() &&
+            this.globalRecentLoaded() &&
+            this.globalFavoritesLoaded() &&
+            (!this.hasXtreamPlaylists() || this.xtreamRecentlyAddedLoaded())
+    );
+
+    private readonly playlistFavoritesReloadKey = computed(() => {
+        if (!this.playlistsLoaded()) {
+            return null;
+        }
+
+        return this.playlists()
+            .map((playlist) =>
+                [
+                    playlist._id,
+                    playlist.serverUrl
+                        ? 'xtream'
+                        : playlist.macAddress
+                          ? 'stalker'
+                          : 'm3u',
+                    JSON.stringify(playlist.favorites ?? []),
+                ].join('::')
+            )
+            .join('|');
+    });
+
+    readonly playlistBackedGlobalRecentItems = computed<GlobalRecentItem[]>(
+        () => {
+            this.languageTick();
+            return buildPlaylistRecentItems(this.playlists(), {
+                stalker: this.translateText(
+                    'WORKSPACE.DASHBOARD.STALKER_PORTAL'
+                ),
+                m3u: this.translateText('WORKSPACE.DASHBOARD.M3U'),
+            });
+        }
+    );
+
+    readonly globalRecentItems = computed<GlobalRecentItem[]>(() =>
+        [
+            ...this.xtreamGlobalRecentItems(),
+            ...this.playlistBackedGlobalRecentItems(),
+        ]
+            .sort(
+                (a, b) =>
+                    toDateTimestamp(b.viewed_at) - toDateTimestamp(a.viewed_at)
+            )
+            .slice(0, 200)
+    );
+
+    readonly stalkerGlobalFavorites = computed<DashboardFavoriteItem[]>(() => {
+        this.languageTick();
+        return buildStalkerFavoriteItems(
+            this.playlists(),
+            this.translateText('WORKSPACE.DASHBOARD.STALKER_PORTAL')
+        );
+    });
+
+    readonly globalFavoriteItems = computed(() =>
+        [
+            ...this.xtreamGlobalFavorites(),
+            ...this.m3uGlobalFavorites(),
+            ...this.stalkerGlobalFavorites(),
+        ]
+            .sort((a, b) => toTimestamp(b.added_at) - toTimestamp(a.added_at))
+            .slice(0, 200)
+    );
+
+    private readonly recentPlaylistActivityTimestamps = computed(() => {
+        const timestamps = new Map<string, number>();
+
+        for (const item of this.globalRecentItems()) {
+            const viewedAt = toDateTimestamp(item.viewed_at);
+            const current = timestamps.get(item.playlist_id) ?? 0;
+
+            if (viewedAt > current) {
+                timestamps.set(item.playlist_id, viewedAt);
+            }
+        }
+
+        return timestamps;
+    });
+
+    constructor() {
+        effect(() => {
+            this.playlistFavoritesReloadKey();
+            if (!this.playlistsLoaded() || !this.favoritesAutoRefreshEnabled) {
+                return;
+            }
+
+            void this.refreshPlaylistBackedGlobalFavorites();
+        });
+
+        effect(() => {
+            this.playlistsLoaded();
+            this.finishInitialGlobalRecentLoadIfReady();
+            this.finishInitialGlobalFavoritesLoadIfReady();
+        });
+
+        effect(() => {
+            if (this.hasXtreamPlaylists()) {
+                return;
+            }
+
+            this.ngZone.run(() => {
+                this.xtreamRecentlyAddedItemsState.set([]);
+                this.xtreamRecentlyAddedLoadingState.set(false);
+                this.xtreamRecentlyAddedLoadedState.set(true);
+            });
+        });
+    }
+
+    readonly stats = computed(() => {
+        const items = this.playlists();
+        return {
+            total: items.length,
+            xtream: items.filter((item) => !!item.serverUrl).length,
+            stalker: items.filter((item) => !!item.macAddress).length,
+            m3u: items.filter((item) => !item.serverUrl && !item.macAddress)
+                .length,
+        };
+    });
+
+    readonly recentPlaylists = computed(() =>
+        [...this.playlists()]
+            .sort((a, b) => {
+                const activityDelta =
+                    this.getPlaylistActivityTimestamp(b) -
+                    this.getPlaylistActivityTimestamp(a);
+                if (activityDelta !== 0) {
+                    return activityDelta;
+                }
+
+                const metadataDelta =
+                    this.getRecentTimestamp(b) - this.getRecentTimestamp(a);
+                if (metadataDelta !== 0) {
+                    return metadataDelta;
+                }
+
+                return a._id.localeCompare(b._id);
+            })
+            .slice(0, 12)
+    );
+
+    readonly quickRecent = computed(() => this.recentPlaylists().slice(0, 4));
+
+    async reloadGlobalRecentItems(): Promise<void> {
+        if (!this.globalRecentLoaded()) {
+            this.globalRecentLoadingState.set(true);
+        }
+
+        if (!window.electron) {
+            this.xtreamGlobalRecentItems.set([]);
+            this.globalRecentDbLoadedState.set(true);
+            this.finishInitialGlobalRecentLoadIfReady();
+            return;
+        }
+
+        try {
+            const recentItems = await this.dbService.getGlobalRecentlyViewed();
+            const normalized = recentItems.map((item) =>
+                mapDbRecentToItem(item)
+            );
+            this.ngZone.run(() => this.xtreamGlobalRecentItems.set(normalized));
+        } catch (err) {
+            console.warn(
+                '[DashboardData] Failed to reload global recent items',
+                err
+            );
+            this.ngZone.run(() => this.xtreamGlobalRecentItems.set([]));
+        } finally {
+            this.globalRecentDbLoadedState.set(true);
+            this.finishInitialGlobalRecentLoadIfReady();
+        }
+    }
+
+    async reloadGlobalFavorites(): Promise<void> {
+        if (!this.globalFavoritesLoaded()) {
+            this.globalFavoritesLoadingState.set(true);
+        }
+
+        const xtreamReload = this.reloadXtreamGlobalFavorites();
+        const m3uReload = this.refreshPlaylistBackedGlobalFavorites();
+
+        await Promise.all([xtreamReload, m3uReload]);
+        this.favoritesAutoRefreshEnabled = true;
+    }
+
+    async getGlobalRecentlyAddedItems(
+        kind: DashboardRecentlyAddedFilterKind,
+        limit = 200
+    ): Promise<DashboardRecentlyAddedItem[]> {
+        if (!window.electron) {
+            return [];
+        }
+
+        const items = await this.dbService.getGlobalRecentlyAdded(kind, limit);
+        return items
+            .map((item) => mapDbRecentlyAddedToItem(item))
+            .sort((a, b) => toTimestamp(b.added_at) - toTimestamp(a.added_at));
+    }
+
+    async getXtreamRecentlyAddedItems(
+        limit = 20
+    ): Promise<DashboardRecentlyAddedItem[]> {
+        if (!window.electron) {
+            return [];
+        }
+
+        const items = await this.dbService.getGlobalRecentlyAdded(
+            'all',
+            limit,
+            'xtream'
+        );
+        return items
+            .map((item) => mapDbRecentlyAddedToItem(item))
+            .sort((a, b) => toTimestamp(b.added_at) - toTimestamp(a.added_at));
+    }
+
+    async reloadXtreamRecentlyAddedItems(limit = 20): Promise<void> {
+        if (!this.xtreamRecentlyAddedLoaded()) {
+            this.xtreamRecentlyAddedLoadingState.set(true);
+        }
+
+        if (!window.electron) {
+            this.ngZone.run(() => {
+                this.xtreamRecentlyAddedItemsState.set([]);
+                this.xtreamRecentlyAddedLoadingState.set(false);
+                this.xtreamRecentlyAddedLoadedState.set(true);
+            });
+            return;
+        }
+
+        try {
+            const items = await this.getXtreamRecentlyAddedItems(limit);
+            this.ngZone.run(() =>
+                this.xtreamRecentlyAddedItemsState.set(items)
+            );
+        } catch (err) {
+            console.warn(
+                '[DashboardData] Failed to reload Xtream recently added items',
+                err
+            );
+            this.ngZone.run(() => this.xtreamRecentlyAddedItemsState.set([]));
+        } finally {
+            this.ngZone.run(() => {
+                this.xtreamRecentlyAddedLoadingState.set(false);
+                this.xtreamRecentlyAddedLoadedState.set(true);
+            });
+        }
+    }
+
+    private async reloadXtreamGlobalFavorites(): Promise<void> {
+        if (!window.electron) {
+            this.xtreamGlobalFavorites.set([]);
+            this.finishInitialGlobalFavoritesLoadIfReady();
+            return;
+        }
+
+        try {
+            const favorites = await this.dbService.getAllGlobalFavorites();
+            const normalized = favorites.map((item) =>
+                mapDbFavoriteToItem(item)
+            );
+            this.ngZone.run(() => this.xtreamGlobalFavorites.set(normalized));
+        } catch (err) {
+            console.warn(
+                '[DashboardData] Failed to reload global favorites',
+                err
+            );
+            this.ngZone.run(() => this.xtreamGlobalFavorites.set([]));
+        } finally {
+            this.finishInitialGlobalFavoritesLoadIfReady();
+        }
+    }
+
+    private async refreshPlaylistBackedGlobalFavorites(): Promise<void> {
+        await this.reloadM3uGlobalFavorites();
+        this.finishInitialGlobalFavoritesLoadIfReady();
+    }
+
+    private async reloadM3uGlobalFavorites(): Promise<void> {
+        const m3uPlaylists = this.playlists().filter(
+            (playlist) =>
+                !playlist.serverUrl &&
+                !playlist.macAddress &&
+                Array.isArray(playlist.favorites) &&
+                playlist.favorites.some(
+                    (favorite): favorite is string =>
+                        typeof favorite === 'string' &&
+                        favorite.trim().length > 0
+                )
+        );
+
+        if (m3uPlaylists.length === 0) {
+            this.ngZone.run(() => this.m3uGlobalFavorites.set([]));
+            return;
+        }
+
+        const favoriteItems = await Promise.all(
+            m3uPlaylists.map((playlist) =>
+                this.loadM3uPlaylistFavorites(playlist).catch(
+                    (): DashboardFavoriteItem[] => []
+                )
+            )
+        );
+        const flattenedFavorites = favoriteItems.reduce(
+            (acc, items) => [...acc, ...items],
+            [] as DashboardFavoriteItem[]
+        );
+
+        this.ngZone.run(() => this.m3uGlobalFavorites.set(flattenedFavorites));
+    }
+
+    private finishInitialGlobalFavoritesLoadIfReady(): void {
+        if (!this.playlistsLoaded()) {
+            return;
+        }
+
+        this.ngZone.run(() => {
+            this.globalFavoritesLoadedState.set(true);
+            this.globalFavoritesLoadingState.set(false);
+        });
+    }
+
+    private finishInitialGlobalRecentLoadIfReady(): void {
+        if (!this.playlistsLoaded() || !this.globalRecentDbLoadedState()) {
+            return;
+        }
+
+        this.ngZone.run(() => {
+            this.globalRecentLoadedState.set(true);
+            this.globalRecentLoadingState.set(false);
+        });
+    }
+
+    isTypeInKind(
+        type: PortalActivityType,
+        kind: DashboardContentKind
+    ): boolean {
+        if (kind === 'all') {
+            return true;
+        }
+        if (kind === 'channels') {
+            return type === 'live';
+        }
+        if (kind === 'vod') {
+            return type === 'movie';
+        }
+        return type === 'series';
+    }
+
+    getPlaylistLink(playlist: PlaylistMeta): string[] {
+        if (playlist.serverUrl) {
+            return ['/workspace', 'xtreams', playlist._id, 'vod'];
+        }
+
+        if (playlist.macAddress) {
+            return ['/workspace', 'stalker', playlist._id, 'vod'];
+        }
+
+        return ['/workspace', 'playlists', playlist._id];
+    }
+
+    getPlaylistProvider(playlist: PlaylistMeta): string {
+        this.languageTick();
+
+        if (playlist.serverUrl) {
+            return this.translateText('WORKSPACE.DASHBOARD.XTREAM');
+        }
+
+        if (playlist.macAddress) {
+            return this.translateText('WORKSPACE.DASHBOARD.STALKER');
+        }
+
+        return this.translateText('WORKSPACE.DASHBOARD.M3U');
+    }
+
+    getRecentItemProviderLabel(item: GlobalRecentItem): string {
+        this.languageTick();
+
+        if (item.source === 'stalker') {
+            return this.translateText('WORKSPACE.DASHBOARD.STALKER');
+        }
+        if (item.source === 'xtream') {
+            return this.translateText('WORKSPACE.DASHBOARD.XTREAM');
+        }
+        if (item.source === 'm3u') {
+            return this.translateText('WORKSPACE.DASHBOARD.M3U');
+        }
+        return this.translateText('WORKSPACE.DASHBOARD.PROVIDER');
+    }
+
+    getRecentItemTypeLabel(item: GlobalRecentItem): string {
+        this.languageTick();
+        return this.translateText(getActivityTypeLabelKey(item.type));
+    }
+
+    getRecentItemLink(item: GlobalRecentItem): string[] {
+        return getRecentItemNavigation(item).link;
+    }
+
+    getRecentItemNavigationState(
+        item: GlobalRecentItem
+    ): WorkspaceNavigationTarget['state'] {
+        return getRecentItemNavigation(item).state;
+    }
+
+    async removeGlobalRecentItem(item: GlobalRecentItem): Promise<void> {
+        if (item.source === 'xtream') {
+            await this.dbService.removeRecentItem(
+                item.id as number,
+                item.playlist_id
+            );
+            await this.reloadGlobalRecentItems();
+            return;
+        }
+
+        if (item.source === 'stalker') {
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.removeFromPortalRecentlyViewed(
+                    item.playlist_id,
+                    item.id
+                )
+            );
+
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({
+                    playlist: {
+                        _id: item.playlist_id,
+                        recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                    } as unknown as PlaylistMeta,
+                }) as any
+            );
+            return;
+        }
+
+        if (item.source === 'm3u') {
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.removeFromM3uRecentlyViewed(
+                    item.playlist_id,
+                    String(item.xtream_id ?? item.id)
+                )
+            );
+
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({
+                    playlist: {
+                        _id: item.playlist_id,
+                        recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                    } as unknown as PlaylistMeta,
+                }) as any
+            );
+        }
+    }
+
+    getFavoriteItemProviderLabel(item: DashboardFavoriteItem): string {
+        return this.getActivityItemProviderLabel(item);
+    }
+
+    getRecentlyAddedItemProviderLabel(
+        item: DashboardRecentlyAddedItem
+    ): string {
+        return this.getActivityItemProviderLabel(item);
+    }
+
+    private getActivityItemProviderLabel(
+        item: Pick<PortalActivityItem, 'source'>
+    ): string {
+        this.languageTick();
+
+        if (item.source === 'stalker') {
+            return this.translateText('WORKSPACE.DASHBOARD.STALKER');
+        }
+        if (item.source === 'xtream') {
+            return this.translateText('WORKSPACE.DASHBOARD.XTREAM');
+        }
+        if (item.source === 'm3u') {
+            return this.translateText('WORKSPACE.DASHBOARD.M3U');
+        }
+        return this.translateText('WORKSPACE.DASHBOARD.PROVIDER');
+    }
+
+    getFavoriteItemTypeLabel(item: DashboardFavoriteItem): string {
+        return this.getActivityItemTypeLabel(item);
+    }
+
+    getRecentlyAddedItemTypeLabel(item: DashboardRecentlyAddedItem): string {
+        return this.getActivityItemTypeLabel(item);
+    }
+
+    private getActivityItemTypeLabel(
+        item: Pick<PortalActivityItem, 'type'>
+    ): string {
+        this.languageTick();
+        return this.translateText(getActivityTypeLabelKey(item.type));
+    }
+
+    getGlobalFavoriteLink(item: DashboardFavoriteItem): string[] {
+        return getGlobalFavoriteNavigation(item).link;
+    }
+
+    getGlobalFavoriteNavigationState(
+        item: DashboardFavoriteItem
+    ): WorkspaceNavigationTarget['state'] {
+        return getGlobalFavoriteNavigation(item).state;
+    }
+
+    getRecentlyAddedLink(item: DashboardRecentlyAddedItem): string[] {
+        if (item.source === 'stalker' && item.type !== 'live') {
+            return buildStalkerDetailNavigationTarget({
+                playlistId: item.playlist_id,
+                type: item.type,
+                categoryId: item.category_id,
+                item: buildStalkerStateItem(item.stalker_item, {
+                    id: item.id,
+                    title: item.title,
+                    type: item.type,
+                    category_id: item.category_id,
+                    poster_url: item.poster_url,
+                }),
+            }).link;
+        }
+
+        return buildXtreamNavigationTarget({
+            playlistId: item.playlist_id,
+            type: item.type,
+            categoryId: item.category_id,
+            itemId: item.xtream_id,
+            title: item.title,
+            imageUrl: item.poster_url,
+        }).link;
+    }
+
+    getRecentlyAddedNavigationState(
+        item: DashboardRecentlyAddedItem
+    ): WorkspaceNavigationTarget['state'] {
+        if (item.source === 'stalker' && item.type !== 'live') {
+            return buildStalkerDetailNavigationTarget({
+                playlistId: item.playlist_id,
+                type: item.type,
+                categoryId: item.category_id,
+                item: buildStalkerStateItem(item.stalker_item, {
+                    id: item.id,
+                    title: item.title,
+                    type: item.type,
+                    category_id: item.category_id,
+                    poster_url: item.poster_url,
+                }),
+            }).state;
+        }
+
+        return buildXtreamNavigationTarget({
+            playlistId: item.playlist_id,
+            type: item.type,
+            categoryId: item.category_id,
+            itemId: item.xtream_id,
+            title: item.title,
+            imageUrl: item.poster_url,
+        }).state;
+    }
+
+    async removeGlobalFavorite(item: DashboardFavoriteItem): Promise<void> {
+        if (item.source === 'xtream') {
+            await this.dbService.removeFromFavorites(
+                item.id as number,
+                item.playlist_id
+            );
+            await this.reloadGlobalFavorites();
+            return;
+        }
+
+        if (item.source === 'stalker') {
+            const playlist = this.playlists().find(
+                (p) => p._id === item.playlist_id
+            );
+            if (!playlist) return;
+
+            const currentFavorites = Array.isArray(playlist.favorites)
+                ? [...playlist.favorites]
+                : [];
+            const itemMatchStr = String(item.id);
+
+            const filteredFavorites = currentFavorites.filter(
+                (raw, index) =>
+                    !stalkerItemMatchesId(
+                        raw,
+                        itemMatchStr,
+                        playlist._id,
+                        index
+                    )
+            );
+
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({
+                    playlist: {
+                        _id: item.playlist_id,
+                        favorites: filteredFavorites,
+                    } as unknown as PlaylistMeta,
+                }) as any
+            );
+        }
+
+        if (item.source === 'm3u') {
+            const playlist = await firstValueFrom(
+                this.playlistsService.getPlaylistById(item.playlist_id)
+            );
+            const currentFavorites = Array.isArray(playlist?.favorites)
+                ? playlist.favorites.filter(
+                      (favorite): favorite is string =>
+                          typeof favorite === 'string'
+                  )
+                : [];
+            const filteredFavorites = currentFavorites.filter(
+                (favorite) => favorite !== String(item.id)
+            );
+
+            await firstValueFrom(
+                this.playlistsService.setFavorites(
+                    item.playlist_id,
+                    filteredFavorites
+                )
+            );
+            await this.reloadGlobalFavorites();
+        }
+    }
+
+    formatTimestamp(value?: string | number): string {
+        this.languageTick();
+
+        const timestamp = toTimestamp(value);
+        if (!timestamp) {
+            return this.translateText('WORKSPACE.DASHBOARD.NOT_YET_SYNCED');
+        }
+
+        return new Date(timestamp).toLocaleString(this.getLocale());
+    }
+
+    private async loadM3uPlaylistFavorites(
+        playlistMeta: PlaylistMeta
+    ): Promise<DashboardFavoriteItem[]> {
+        const playlist = (await firstValueFrom(
+            this.playlistsService.getPlaylistById(playlistMeta._id)
+        )) as Playlist & {
+            playlist?: {
+                items?: Channel[];
+            };
+        };
+        const favorites = Array.isArray(playlist?.favorites)
+            ? playlist.favorites.filter(
+                  (favorite): favorite is string =>
+                      typeof favorite === 'string' && favorite.trim().length > 0
+              )
+            : [];
+
+        if (favorites.length === 0) {
+            return [];
+        }
+
+        const items: Channel[] = Array.isArray(playlist?.playlist?.items)
+            ? (playlist.playlist.items as Channel[])
+            : [];
+        const fallbackTimestamp =
+            this.getM3uFavoriteTimestamp(playlistMeta) ??
+            new Date(0).toISOString();
+
+        return items.reduce<DashboardFavoriteItem[]>((acc, channel) => {
+            const channelId = String(channel.id ?? '').trim();
+            const channelUrl = String(channel.url ?? '').trim();
+            const matchedFavoriteId = favorites.find(
+                (favorite) => favorite === channelId || favorite === channelUrl
+            );
+
+            if (!matchedFavoriteId) {
+                return acc;
+            }
+
+            acc.push({
+                id: matchedFavoriteId,
+                title: channel.name?.trim() || channel.tvg?.name || channelId,
+                type: 'live',
+                playlist_id: playlistMeta._id,
+                playlist_name:
+                    playlistMeta.title || playlistMeta.filename || 'M3U',
+                added_at: fallbackTimestamp,
+                category_id: 'live',
+                xtream_id: matchedFavoriteId,
+                poster_url: channel.tvg?.logo || undefined,
+                source: 'm3u',
+            });
+            return acc;
+        }, []);
+    }
+
+    private getM3uFavoriteTimestamp(playlist: PlaylistMeta): string | null {
+        if (playlist.updateDate) {
+            return new Date(playlist.updateDate).toISOString();
+        }
+
+        return typeof playlist.importDate === 'string'
+            ? playlist.importDate
+            : null;
+    }
+
+    private getPlaylistActivityTimestamp(item: PlaylistMeta): number {
+        return this.recentPlaylistActivityTimestamps().get(item._id) ?? 0;
+    }
+
+    private getRecentTimestamp(item: PlaylistMeta): number {
+        return toTimestamp(item.updateDate) || toTimestamp(item.importDate);
+    }
+
+    private getLocale(): string | undefined {
+        return (
+            this.translate.currentLang ||
+            this.translate.defaultLang ||
+            undefined
+        );
+    }
+
+    private translateText(
+        key: string,
+        params?: Record<string, string | number>
+    ): string {
+        return this.translate.instant(key, params);
+    }
+}
diff --git a/libs/workspace/dashboard/data-access/src/lib/dashboard-mappers.ts b/libs/workspace/dashboard/data-access/src/lib/dashboard-mappers.ts
new file mode 100644
index 0000000..86e2ead
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/src/lib/dashboard-mappers.ts
@@ -0,0 +1,190 @@
+import {
+    GlobalFavoriteItem as DbGlobalFavoriteItem,
+    GlobalRecentlyAddedItem as DbGlobalRecentlyAddedItem,
+    GlobalRecentItem as DbGlobalRecentItem,
+} from 'services';
+import {
+    PortalAddedItem,
+    PlaylistMeta,
+    PortalActivityType,
+    PortalFavoriteItem,
+    PortalRecentItem,
+    extractStalkerItemId,
+    extractStalkerItemPoster,
+    extractStalkerItemTitle,
+    extractStalkerItemType,
+    normalizeStalkerDate,
+} from 'shared-interfaces';
+
+// ────── Type / label helpers ──────
+
+export function normalizeActivityType(value: string): PortalActivityType {
+    return value === 'live' || value === 'series' ? value : 'movie';
+}
+
+export function getActivityTypeLabelKey(type: PortalActivityType): string {
+    if (type === 'live') return 'WORKSPACE.DASHBOARD.TYPE_LIVE';
+    if (type === 'series') return 'WORKSPACE.DASHBOARD.TYPE_SERIES';
+    return 'WORKSPACE.DASHBOARD.TYPE_MOVIE';
+}
+
+// ────── Xtream DB → ViewModel ──────
+
+export function mapDbFavoriteToItem(
+    item: DbGlobalFavoriteItem
+): PortalFavoriteItem {
+    return {
+        id: item.id,
+        title: item.title,
+        type: normalizeActivityType(item.type),
+        playlist_id: item.playlist_id,
+        playlist_name: item.playlist_name,
+        added_at: normalizeStalkerDate(item.added_at),
+        category_id: item.category_id,
+        xtream_id: item.xtream_id,
+        poster_url: item.poster_url,
+        backdrop_url: item.backdrop_url ?? undefined,
+        source: 'xtream',
+    };
+}
+
+export function mapDbRecentToItem(item: DbGlobalRecentItem): PortalRecentItem {
+    return {
+        id: item.id,
+        title: item.title,
+        type: normalizeActivityType(item.type),
+        playlist_id: item.playlist_id,
+        playlist_name: item.playlist_name,
+        viewed_at: normalizeStalkerDate(item.viewed_at),
+        category_id: item.category_id,
+        xtream_id: item.xtream_id,
+        poster_url: item.poster_url,
+        backdrop_url: item.backdrop_url ?? undefined,
+        source: 'xtream',
+    };
+}
+
+export function mapDbRecentlyAddedToItem(
+    item: DbGlobalRecentlyAddedItem
+): PortalAddedItem {
+    return {
+        id: item.id,
+        title: item.title,
+        type: normalizeActivityType(item.type),
+        playlist_id: item.playlist_id,
+        playlist_name: item.playlist_name,
+        added_at: normalizeStalkerDate(item.added_at),
+        category_id: item.category_id,
+        xtream_id: item.xtream_id,
+        poster_url: item.poster_url,
+        source: 'xtream',
+    };
+}
+
+// ────── Stalker playlist → ViewModel ──────
+
+export function buildStalkerRecentItems(
+    playlists: PlaylistMeta[],
+    defaultPlaylistName: string
+): PortalRecentItem[] {
+    return playlists
+        .filter((playlist) => Boolean(playlist.macAddress))
+        .reduce<PortalRecentItem[]>((acc, playlist) => {
+            const recentItems = Array.isArray(
+                (playlist as { recentlyViewed?: unknown[] }).recentlyViewed
+            )
+                ? ((playlist as { recentlyViewed?: unknown[] })
+                      .recentlyViewed ?? [])
+                : [];
+
+            const mapped = recentItems.map((rawItem, index) => {
+                const item = (rawItem ?? {}) as Record<string, unknown>;
+                const id = extractStalkerItemId(item, playlist._id, index);
+
+                return {
+                    id,
+                    title: extractStalkerItemTitle(item),
+                    type: extractStalkerItemType(item),
+                    playlist_id: playlist._id,
+                    playlist_name: playlist.title || defaultPlaylistName,
+                    viewed_at: normalizeStalkerDate(item['added_at']),
+                    category_id: String(item['category_id'] ?? ''),
+                    xtream_id: id,
+                    poster_url: extractStalkerItemPoster(item),
+                    source: 'stalker' as const,
+                    stalker_item: rawItem,
+                } as PortalRecentItem;
+            });
+
+            acc.push(...mapped);
+            return acc;
+        }, []);
+}
+
+export function buildStalkerFavoriteItems(
+    playlists: PlaylistMeta[],
+    defaultPlaylistName: string
+): PortalFavoriteItem[] {
+    return playlists
+        .filter((playlist) => Boolean(playlist.macAddress))
+        .reduce<PortalFavoriteItem[]>((acc, playlist) => {
+            const favorites = Array.isArray(playlist.favorites)
+                ? playlist.favorites
+                : [];
+
+            const mapped = favorites.map((item, index) => {
+                const raw = (item ?? {}) as Record<string, unknown>;
+                const id = extractStalkerItemId(raw, playlist._id, index);
+
+                return {
+                    id,
+                    title: extractStalkerItemTitle(raw),
+                    type: extractStalkerItemType(raw),
+                    playlist_id: playlist._id,
+                    playlist_name: playlist.title || defaultPlaylistName,
+                    added_at: normalizeStalkerDate(raw['added_at']),
+                    category_id: String(raw['category_id'] ?? ''),
+                    xtream_id: id,
+                    poster_url: extractStalkerItemPoster(raw),
+                    source: 'stalker' as const,
+                    stalker_item: item,
+                } as PortalFavoriteItem;
+            });
+
+            acc.push(...mapped);
+            return acc;
+        }, []);
+}
+
+// ────── Timestamp helpers ──────
+
+export function toDateTimestamp(value: unknown): number {
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value) || value <= 0) return 0;
+        return value > 10_000_000_000 ? value : value * 1000;
+    }
+
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (/^\d+$/.test(trimmed)) {
+            const numeric = Number(trimmed);
+            if (Number.isFinite(numeric) && numeric > 0) {
+                return numeric > 10_000_000_000 ? numeric : numeric * 1000;
+            }
+            return 0;
+        }
+        const parsed = Date.parse(normalizeStalkerDate(trimmed) || trimmed);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
+
+    return 0;
+}
+
+export function toTimestamp(value?: string | number): number {
+    if (typeof value === 'number') return value;
+    if (typeof value === 'string') {
+        const parsed = Date.parse(normalizeStalkerDate(value) || value);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
+    return 0;
+}
diff --git a/libs/workspace/dashboard/data-access/src/test-setup.ts b/libs/workspace/dashboard/data-access/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/workspace/dashboard/data-access/tsconfig.json b/libs/workspace/dashboard/data-access/tsconfig.json
new file mode 100644
index 0000000..dd63ae9
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/workspace/dashboard/data-access/tsconfig.lib.json b/libs/workspace/dashboard/data-access/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/workspace/dashboard/data-access/tsconfig.spec.json b/libs/workspace/dashboard/data-access/tsconfig.spec.json
new file mode 100644
index 0000000..e7d59a0
--- /dev/null
+++ b/libs/workspace/dashboard/data-access/tsconfig.spec.json
@@ -0,0 +1,16 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "moduleResolution": "node10",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "jest.config.ts",
+        "src/test-setup.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/workspace/dashboard/feature/README.md b/libs/workspace/dashboard/feature/README.md
new file mode 100644
index 0000000..1ebf51e
--- /dev/null
+++ b/libs/workspace/dashboard/feature/README.md
@@ -0,0 +1,3 @@
+# feature
+
+This library was generated with [Nx](https://nx.dev).
diff --git a/libs/workspace/dashboard/feature/eslint.config.mjs b/libs/workspace/dashboard/feature/eslint.config.mjs
new file mode 100644
index 0000000..51f77a3
--- /dev/null
+++ b/libs/workspace/dashboard/feature/eslint.config.mjs
@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../../eslint.config.mjs';
+
+export default [
+    ...baseConfig,
+    ...nx.configs['flat/angular'],
+    ...nx.configs['flat/angular-template'],
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'lib',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'lib',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        // Override or add rules here
+        rules: {},
+    },
+];
diff --git a/libs/workspace/dashboard/feature/jest.config.ts b/libs/workspace/dashboard/feature/jest.config.ts
new file mode 100644
index 0000000..91c85f3
--- /dev/null
+++ b/libs/workspace/dashboard/feature/jest.config.ts
@@ -0,0 +1,22 @@
+export default {
+    displayName: 'workspace-dashboard-feature',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/workspace/dashboard/feature',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+    moduleFileExtensions: ['ts', 'js', 'html'],
+};
diff --git a/libs/workspace/dashboard/feature/project.json b/libs/workspace/dashboard/feature/project.json
new file mode 100644
index 0000000..e22fb3c
--- /dev/null
+++ b/libs/workspace/dashboard/feature/project.json
@@ -0,0 +1,21 @@
+{
+    "name": "workspace-dashboard-feature",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/workspace/dashboard/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:workspace", "domain:workspace", "type:feature"],
+    "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/workspace/dashboard/feature/jest.config.ts",
+                "tsConfig": "libs/workspace/dashboard/feature/tsconfig.spec.json"
+            }
+        },
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/workspace/dashboard/feature/src/index.ts b/libs/workspace/dashboard/feature/src/index.ts
new file mode 100644
index 0000000..64f95ab
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/rails/workspace-dashboard-rails.component';
+export * from './lib/rails/dashboard-rail.component';
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html
new file mode 100644
index 0000000..60dd77c
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.html
@@ -0,0 +1,136 @@
+<section class="rail" [attr.data-test-id]="testId()">
+    <header class="rail__header">
+        <h2 class="rail__title">
+            <span class="rail__label">{{ label() }}</span>
+            @if ((totalCount() ?? items().length) > 0) {
+                <span class="rail__count" aria-hidden="true">{{
+                    totalCount() ?? items().length
+                }}</span>
+            }
+        </h2>
+        @if (seeAllLink(); as link) {
+            <a
+                class="rail__see-all"
+                [routerLink]="link"
+                [attr.data-test-id]="testId() ? testId() + '-manage-all' : null"
+            >
+                <span class="rail__see-all-label">{{
+                    'WORKSPACE.DASHBOARD.MANAGE_ALL' | translate
+                }}</span>
+                <mat-icon>chevron_right</mat-icon>
+            </a>
+        }
+    </header>
+
+    <div class="rail__viewport">
+        <button
+            type="button"
+            class="rail__chev rail__chev--left"
+            [class.rail__chev--visible]="canScrollLeft()"
+            (click)="scrollBy(-1)"
+            aria-label="Scroll left"
+            tabindex="-1"
+        >
+            <mat-icon>chevron_left</mat-icon>
+        </button>
+
+        <div #track class="rail__track" (scroll)="onScroll()" role="list">
+            @for (card of items(); track card.id) {
+                <div
+                    class="rail__card"
+                    role="listitem"
+                    [attr.title]="card.title"
+                    [attr.data-test-id]="testId() ? testId() + '-card' : null"
+                >
+                    <a
+                        class="rail__card-link"
+                        [routerLink]="card.link"
+                        [state]="card.state"
+                    >
+                        <div
+                            class="rail__art"
+                            [style.aspect-ratio]="aspectRatio()"
+                        >
+                            @if (card.imageUrl && !failedImages()[card.id]) {
+                                <img
+                                    [src]="card.imageUrl"
+                                    [alt]="card.title"
+                                    loading="lazy"
+                                    decoding="async"
+                                    (error)="markFailed(card.id)"
+                                />
+                            } @else {
+                                <div class="rail__art-fallback">
+                                    <mat-icon>{{ card.icon }}</mat-icon>
+                                </div>
+                            }
+                        </div>
+
+                        <div class="rail__meta">
+                            <span class="rail__card-title">{{
+                                card.title
+                            }}</span>
+                            @if (card.subtitle) {
+                                <span class="rail__card-subtitle">{{
+                                    card.subtitle
+                                }}</span>
+                            }
+                        </div>
+                    </a>
+
+                    @if (card.actions && card.actions.length > 0) {
+                        <button
+                            type="button"
+                            mat-icon-button
+                            class="rail__action-trigger"
+                            [matMenuTriggerFor]="cardActionMenu"
+                            [matMenuTriggerData]="{ card: card }"
+                            [attr.aria-label]="'SHOW_MORE' | translate"
+                            [attr.data-test-id]="
+                                testId() ? testId() + '-card-actions' : null
+                            "
+                            (click)="stopActionEvent($event)"
+                        >
+                            <mat-icon>more_vert</mat-icon>
+                        </button>
+                    }
+                </div>
+            }
+        </div>
+
+        <mat-menu
+            #cardActionMenu="matMenu"
+            panelClass="dashboard-rail-action-menu"
+            xPosition="before"
+        >
+            <ng-template matMenuContent let-card="card">
+                @for (action of card.actions ?? []; track action.id) {
+                    <button
+                        mat-menu-item
+                        type="button"
+                        [disabled]="action.disabled"
+                        [class.rail__menu-action--danger]="action.destructive"
+                        [class.rail__menu-action--separated]="
+                            action.separatorBefore
+                        "
+                        (click)="selectAction(card, action, $event)"
+                    >
+                        <mat-icon>{{ action.icon }}</mat-icon>
+                        <span>{{ action.labelKey | translate }}</span>
+                    </button>
+                }
+            </ng-template>
+        </mat-menu>
+
+        <button
+            type="button"
+            class="rail__chev rail__chev--right"
+            [class.rail__chev--visible]="canScrollRight()"
+            (click)="scrollBy(1)"
+            aria-label="Scroll right"
+            tabindex="-1"
+        >
+            <mat-icon>chevron_right</mat-icon>
+        </button>
+    </div>
+</section>
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
new file mode 100644
index 0000000..7fdf3ab
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
@@ -0,0 +1,421 @@
+:host {
+    display: block;
+    --rail-card-width: 172px;
+    --rail-gap: 14px;
+    --rail-radius: 12px;
+}
+
+.rail {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.rail__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 0 2px;
+    // Tighter height cap — keeps rail chapter markers compact
+    min-height: 24px;
+}
+
+.rail__title {
+    margin: 0;
+    display: inline-flex;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 1.125rem; // 18px — matches Netflix rail-title scale
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.012em;
+    color: var(--app-heading-color, #1a1d23);
+}
+
+// Muted count badge, tabular numerals for alignment, sits just after label.
+.rail__count {
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--app-muted-color, #8891a4);
+    font-variant-numeric: tabular-nums;
+    // Tiny capsule to read as a "count chip", not a number-in-text
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-muted-color, #8891a4) 18%,
+        transparent
+    );
+    letter-spacing: 0;
+}
+
+.rail__see-all {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 8px 4px 10px;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.005em;
+    color: var(--app-muted-color, #8891a4);
+    text-decoration: none;
+    transition:
+        color 0.15s ease,
+        background-color 0.15s ease;
+
+    mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        transition: transform 0.15s ease;
+    }
+
+    &:hover {
+        color: var(--app-selection-color, #2f7bff);
+        background: color-mix(
+            in srgb,
+            var(--app-selection-color, #2f7bff) 12%,
+            transparent
+        );
+
+        mat-icon {
+            transform: translateX(2px);
+        }
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-color, #2f7bff);
+        outline-offset: 2px;
+    }
+}
+
+.rail__viewport {
+    position: relative;
+    min-width: 0;
+
+    // Soft edge gradients hint at horizontal scroll without any interaction.
+    // Anchored to the viewport so they appear/disappear in sync with the
+    // chevrons' `.rail__chev--visible` state.
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 32px;
+        pointer-events: none;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    &::before {
+        left: 0;
+        background: linear-gradient(
+            to right,
+            var(--app-content-bg, #161a22) 0%,
+            transparent 100%
+        );
+    }
+
+    &::after {
+        right: 0;
+        background: linear-gradient(
+            to left,
+            var(--app-content-bg, #161a22) 0%,
+            transparent 100%
+        );
+    }
+
+    // Show the correct edge gradient when scroll is possible in that direction
+    &:has(.rail__chev--left.rail__chev--visible)::before {
+        opacity: 0.9;
+    }
+
+    &:has(.rail__chev--right.rail__chev--visible)::after {
+        opacity: 0.9;
+    }
+
+    &:hover .rail__chev--visible {
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+    }
+}
+
+.rail__track {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--rail-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline-start: 4px;
+    scrollbar-width: none;
+    padding: 4px;
+    margin: -4px;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.rail__card {
+    // Pin the card size so long titles never expand the flex item.
+    // `min-width: 0` is needed because flex items default to `min-width: auto`
+    // (their intrinsic content size), which would otherwise override the
+    // flex-basis when the title wraps.
+    flex: 0 0 var(--rail-card-width);
+    width: var(--rail-card-width);
+    max-width: var(--rail-card-width);
+    min-width: 0;
+    scroll-snap-align: start;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    color: inherit;
+    border-radius: var(--rail-radius);
+    transition:
+        transform 0.2s ease,
+        filter 0.2s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+
+        .rail__art {
+            box-shadow:
+                0 12px 22px -12px rgba(0, 0, 0, 0.45),
+                0 0 0 1px var(--app-selection-border, rgba(47, 123, 255, 0.4));
+        }
+
+        .rail__card-title {
+            color: var(--app-selection-color, #2f7bff);
+        }
+    }
+}
+
+.rail__card-link {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+    border-radius: inherit;
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-color, #2f7bff);
+        outline-offset: 3px;
+    }
+}
+
+.rail__art {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--rail-radius);
+    background: var(--app-widget-bg, #1e2330);
+    border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    transition: box-shadow 0.2s ease;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+}
+
+.rail__art-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background:
+        radial-gradient(
+            circle at 30% 20%,
+            var(--app-selection-surface, rgba(120, 173, 255, 0.18)) 0%,
+            transparent 55%
+        ),
+        var(--app-widget-bg, #1e2330);
+
+    mat-icon {
+        font-size: 44px;
+        width: 44px;
+        height: 44px;
+        color: var(--app-selection-color, #78adff);
+        opacity: 0.55;
+    }
+}
+
+.rail__action-trigger {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 3;
+    width: 30px;
+    height: 30px;
+    padding: 3px;
+    border-radius: 50%;
+    color: #fff;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    opacity: 0.92;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
+    --mdc-icon-button-state-layer-size: 30px;
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+    }
+
+    &:hover,
+    &:focus-visible {
+        opacity: 1;
+        transform: translateY(-1px);
+    }
+}
+
+.rail__menu-action--separated {
+    border-top: 1px solid var(--app-separator);
+    margin-top: 4px;
+}
+
+.rail__menu-action--danger {
+    color: var(--mat-sys-error);
+
+    mat-icon {
+        color: var(--mat-sys-error);
+    }
+}
+
+.rail__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 0 2px;
+    min-width: 0;
+}
+
+.rail__card-title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--app-heading-color, #1a1d23);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    letter-spacing: -0.005em;
+    transition: color 0.15s ease;
+}
+
+.rail__card-subtitle {
+    font-size: 0.72rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--app-muted-color, #8891a4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    letter-spacing: 0.005em;
+}
+
+// Circular chevron — streaming-app pattern (Netflix/Apple TV+). High-contrast
+// dark glass works against any card color, including the muted fallback tiles
+// which previously camouflaged the buttons.
+.rail__chev {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%) scale(0.96);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: #fff;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 0.18s ease,
+        background-color 0.18s ease,
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+    z-index: 2;
+    box-shadow:
+        0 4px 14px -4px rgba(0, 0, 0, 0.55),
+        0 0 0 0 rgba(255, 255, 255, 0); // slot for hover ring
+
+    mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        // Keep icon crisp over bright content
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+    }
+
+    // Peek at rest when scroll is possible — hints the affordance exists
+    // without requiring the user to hover first.
+    &--visible {
+        opacity: 0.5;
+        pointer-events: auto;
+    }
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.88);
+        transform: translateY(-50%) scale(1.08);
+        box-shadow:
+            0 8px 22px -6px rgba(0, 0, 0, 0.65),
+            0 0 0 4px rgba(255, 255, 255, 0.06);
+    }
+
+    &:active {
+        transform: translateY(-50%) scale(0.96);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--app-selection-color, #78adff);
+        outline-offset: 3px;
+    }
+
+    &--left {
+        left: 6px;
+    }
+
+    &--right {
+        right: 6px;
+    }
+}
+
+@media (hover: none) {
+    .rail__chev {
+        display: none;
+    }
+
+    .rail__viewport::before,
+    .rail__viewport::after {
+        display: none;
+    }
+}
+
+@media (max-width: 720px) {
+    :host {
+        --rail-card-width: 140px;
+    }
+}
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.ts b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.ts
new file mode 100644
index 0000000..557682e
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.ts
@@ -0,0 +1,166 @@
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    OnDestroy,
+    effect,
+    input,
+    output,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { RouterLink } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+
+export interface DashboardRailAction {
+    id: string;
+    labelKey: string;
+    icon: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    separatorBefore?: boolean;
+}
+
+export interface DashboardRailCard {
+    id: string;
+    title: string;
+    subtitle?: string;
+    imageUrl?: string;
+    icon: string;
+    link: string[];
+    state?: Record<string, unknown>;
+    actions?: DashboardRailAction[];
+}
+
+export interface DashboardRailActionSelection {
+    action: DashboardRailAction;
+    card: DashboardRailCard;
+}
+
+@Component({
+    selector: 'lib-dashboard-rail',
+    imports: [
+        MatButtonModule,
+        MatIcon,
+        MatMenuModule,
+        RouterLink,
+        TranslatePipe,
+    ],
+    templateUrl: './dashboard-rail.component.html',
+    styleUrl: './dashboard-rail.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DashboardRailComponent implements AfterViewInit, OnDestroy {
+    readonly label = input.required<string>();
+    readonly items = input.required<DashboardRailCard[]>();
+    readonly seeAllLink = input<string[] | null>(null);
+    readonly aspectRatio = input<string>('2 / 3');
+    readonly testId = input<string | null>(null);
+    readonly actionSelected = output<DashboardRailActionSelection>();
+    /**
+     * True total in the underlying dataset. Shown as a count badge next to
+     * the rail label. Falls back to `items().length` when not supplied.
+     */
+    readonly totalCount = input<number | null>(null);
+
+    private readonly track =
+        viewChild.required<ElementRef<HTMLDivElement>>('track');
+
+    readonly canScrollLeft = signal(false);
+    readonly canScrollRight = signal(false);
+    readonly failedImages = signal<Record<string, true>>({});
+    private readonly viewReady = signal(false);
+
+    private resizeObserver?: ResizeObserver;
+    private resetFrameId: number | null = null;
+    private settleFrameId: number | null = null;
+
+    constructor() {
+        effect(() => {
+            this.items();
+            if (!this.viewReady()) return;
+            this.scheduleResetToStart();
+        });
+    }
+
+    ngAfterViewInit(): void {
+        this.viewReady.set(true);
+        this.updateScrollState();
+        this.resizeObserver = new ResizeObserver(() =>
+            this.updateScrollState()
+        );
+        this.resizeObserver.observe(this.track().nativeElement);
+    }
+
+    ngOnDestroy(): void {
+        this.resizeObserver?.disconnect();
+        this.cancelPendingReset();
+    }
+
+    onScroll(): void {
+        this.updateScrollState();
+    }
+
+    scrollBy(direction: 1 | -1): void {
+        const el = this.track().nativeElement;
+        el.scrollBy({
+            left: direction * el.clientWidth * 0.85,
+            behavior: 'smooth',
+        });
+    }
+
+    markFailed(id: string): void {
+        this.failedImages.update((state) =>
+            state[id] ? state : { ...state, [id]: true }
+        );
+    }
+
+    stopActionEvent(event: Event): void {
+        event.stopPropagation();
+    }
+
+    selectAction(
+        card: DashboardRailCard,
+        action: DashboardRailAction,
+        event: Event
+    ): void {
+        event.stopPropagation();
+        this.actionSelected.emit({ card, action });
+    }
+
+    private updateScrollState(): void {
+        const el = this.track().nativeElement;
+        this.canScrollLeft.set(el.scrollLeft > 4);
+        this.canScrollRight.set(
+            el.scrollLeft + el.clientWidth < el.scrollWidth - 4
+        );
+    }
+
+    private scheduleResetToStart(): void {
+        this.cancelPendingReset();
+        this.resetFrameId = requestAnimationFrame(() => {
+            this.resetFrameId = null;
+            this.settleFrameId = requestAnimationFrame(() => {
+                this.settleFrameId = null;
+                const el = this.track().nativeElement;
+                el.scrollTo({ left: 0, behavior: 'auto' });
+                this.updateScrollState();
+            });
+        });
+    }
+
+    private cancelPendingReset(): void {
+        if (this.resetFrameId !== null) {
+            cancelAnimationFrame(this.resetFrameId);
+            this.resetFrameId = null;
+        }
+        if (this.settleFrameId !== null) {
+            cancelAnimationFrame(this.settleFrameId);
+            this.settleFrameId = null;
+        }
+    }
+}
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.html b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.html
new file mode 100644
index 0000000..054be06
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.html
@@ -0,0 +1,160 @@
+<section
+    class="rails-page"
+    [class.rails-page--empty]="ready() && !hasPlaylists()"
+    data-test-id="dashboard-page"
+>
+    @if (!ready()) {
+        <!-- Precise ghosts that mirror the real hero + rails so the layout
+             doesn't reflow when data arrives. -->
+        <section
+            class="rails-page__skeleton-hero"
+            aria-hidden="true"
+            aria-busy="true"
+        >
+            <div class="rails-page__skeleton-hero-poster"></div>
+            <div class="rails-page__skeleton-hero-body">
+                <div class="rails-page__skeleton-hero-title"></div>
+                <div
+                    class="rails-page__skeleton-hero-title rails-page__skeleton-hero-title--short"
+                ></div>
+                <div class="rails-page__skeleton-hero-subtitle"></div>
+                <div class="rails-page__skeleton-hero-cta"></div>
+            </div>
+        </section>
+
+        @for (_ of skeletonRails; track $index) {
+            <section
+                class="rails-page__skeleton-rail"
+                aria-hidden="true"
+                aria-busy="true"
+            >
+                <div class="rails-page__skeleton-header"></div>
+                <div class="rails-page__skeleton-track">
+                    @for (slot of skeletonSlots; track slot) {
+                        <div class="rails-page__skeleton-card"></div>
+                    }
+                </div>
+            </section>
+        }
+    } @else if (!hasPlaylists()) {
+        <app-empty-state
+            [type]="'welcome-dashboard'"
+            [showElectronOnlyValueProps]="isElectron"
+            (addPlaylistClicked)="onAddPlaylist($event)"
+        />
+    } @else {
+        @if (hero(); as item) {
+            <a
+                class="hero"
+                data-test-id="dashboard-hero"
+                [class.hero--with-image]="
+                    !!item.posterUrl || !!item.backdropUrl
+                "
+                [class.hero--has-backdrop]="item.hasBackdrop"
+                [class.hero--has-default-backdrop]="
+                    item.backdropSource === 'fallback'
+                "
+                [routerLink]="item.link"
+                [state]="item.state ?? {}"
+            >
+                <span
+                    class="hero__backdrop"
+                    aria-hidden="true"
+                    [style.backgroundImage]="
+                        item.backdropUrl
+                            ? 'url(' + item.backdropUrl + ')'
+                            : item.fallbackBackdropBackground
+                    "
+                ></span>
+                @if (item.backdropUrl; as backdropUrl) {
+                    <img
+                        class="hero__image-probe"
+                        [src]="backdropUrl"
+                        alt=""
+                        aria-hidden="true"
+                        loading="eager"
+                        decoding="async"
+                        (error)="markHeroImageFailed(backdropUrl)"
+                    />
+                }
+                <span class="hero__vignette" aria-hidden="true"></span>
+
+                <span class="hero__poster">
+                    @if (item.posterUrl; as posterUrl) {
+                        <img
+                            [src]="posterUrl"
+                            [alt]="item.title"
+                            loading="eager"
+                            decoding="async"
+                            (error)="markHeroImageFailed(posterUrl)"
+                        />
+                    } @else {
+                        <span
+                            class="hero__poster-fallback"
+                            [style.backgroundImage]="
+                                item.fallbackPosterBackground
+                            "
+                        >
+                            <mat-icon>{{ item.icon }}</mat-icon>
+                        </span>
+                    }
+                </span>
+
+                <span class="hero__body">
+                    <h1 class="hero__title">{{ item.title }}</h1>
+                    <p class="hero__subtitle">{{ item.subtitle }}</p>
+
+                    <span class="hero__cta">
+                        <mat-icon>play_arrow</mat-icon>
+                        <span>{{
+                            'WORKSPACE.DASHBOARD.CONTINUE_WATCHING' | translate
+                        }}</span>
+                    </span>
+                </span>
+            </a>
+        }
+
+        @if (recentlyWatchedCards().length > 0) {
+            <lib-dashboard-rail
+                [label]="'WORKSPACE.DASHBOARD.RECENTLY_WATCHED' | translate"
+                [items]="recentlyWatchedCards()"
+                [totalCount]="data.globalRecentItems().length"
+                [seeAllLink]="['/workspace/global-recent']"
+                [testId]="'dashboard-recently-watched-rail'"
+            />
+        }
+
+        @if (favoriteCards().length > 0) {
+            <lib-dashboard-rail
+                [label]="'WORKSPACE.DASHBOARD.GLOBAL_FAVORITES' | translate"
+                [items]="favoriteCards()"
+                [totalCount]="data.globalFavoriteItems().length"
+                [seeAllLink]="['/workspace/global-favorites']"
+                [testId]="'dashboard-global-favorites-rail'"
+            />
+        }
+
+        @if (sourceCards().length > 0) {
+            <lib-dashboard-rail
+                [label]="'WORKSPACE.DASHBOARD.RECENT_SOURCES' | translate"
+                [items]="sourceCards()"
+                [totalCount]="data.playlists().length"
+                [seeAllLink]="['/workspace/sources']"
+                aspectRatio="16 / 9"
+                [testId]="'dashboard-recent-sources-rail'"
+                (actionSelected)="onSourceActionSelected($event)"
+            />
+        }
+
+        @if (xtreamRecentlyAddedCards().length > 0) {
+            <lib-dashboard-rail
+                [label]="
+                    'WORKSPACE.DASHBOARD.XTREAM_RECENTLY_ADDED' | translate
+                "
+                [items]="xtreamRecentlyAddedCards()"
+                [totalCount]="data.xtreamRecentlyAddedItems().length"
+                [testId]="'dashboard-xtream-recently-added-rail'"
+            />
+        }
+    }
+</section>
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
new file mode 100644
index 0000000..0e25da8
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
@@ -0,0 +1,463 @@
+:host {
+    display: block;
+    padding: 24px 28px 40px;
+    box-sizing: border-box;
+    min-height: 100%;
+}
+
+:host(.rails-page-host--empty) {
+    padding: 0;
+    height: 100%;
+    min-height: 100%;
+    display: flex;
+    overflow: hidden;
+}
+
+.rails-page {
+    max-width: 1440px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    min-width: 0;
+}
+
+.rails-page--empty {
+    flex: 1;
+    max-width: none;
+    margin: 0;
+    gap: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+// ── Hero ────────────────────────────────────────────────────────────────────
+// Netflix/Apple TV-style hero: blurred poster backdrop + vignette + sharp 2:3
+// poster card + text block. Mirrors content-hero fallback (no dedicated
+// backdrop asset available, so we reuse the poster blurred + scaled).
+.hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, var(--hero-poster-width)) minmax(0, 1fr);
+    gap: 24px;
+    padding: 20px;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 18px;
+    overflow: hidden;
+    isolation: isolate;
+    background: var(--app-widget-header-bg, #232840);
+    border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.08));
+    box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.2),
+        0 12px 32px -18px var(--app-selection-glow, rgba(120, 173, 255, 0.4));
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
+
+    --hero-poster-width: 160px;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow:
+            0 1px 2px rgba(0, 0, 0, 0.2),
+            0 20px 40px -20px
+                var(--app-selection-glow, rgba(120, 173, 255, 0.55));
+    }
+
+    // No-image fallback keeps the accent gradient so the hero is never flat.
+    &:not(.hero--with-image) {
+        background:
+            var(
+                --app-accent-gradient,
+                linear-gradient(
+                    135deg,
+                    rgba(99, 102, 241, 0.12) 0%,
+                    rgba(168, 85, 247, 0.07) 100%
+                )
+            ),
+            var(--app-widget-header-bg, #232840);
+    }
+}
+
+// Layer 0: backdrop. Two modes:
+//   (1) Real backdrop (`.hero--has-backdrop`): sharp wide image with no blur.
+//   (2) Blurred-poster fallback: heavy blur + scale so the poster's colours
+//       wash across the full panel without the portrait edges showing.
+.hero__backdrop {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center 25%;
+    background-repeat: no-repeat;
+    z-index: 0;
+    pointer-events: none;
+
+    // Fallback: blurred poster.
+    filter: blur(40px) saturate(1.5);
+    transform: scale(1.5);
+    opacity: 0.9;
+}
+
+.hero--has-backdrop .hero__backdrop {
+    filter: none;
+    transform: none;
+    opacity: 1;
+}
+
+.hero--has-default-backdrop .hero__backdrop {
+    filter: none;
+    transform: none;
+    opacity: 0.95;
+}
+
+.hero__image-probe {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
+}
+
+// Layer 1: vignette. Scrim behind the poster card (contrast) and on the
+// right edge (text legibility). Middle stays mostly transparent so the
+// backdrop colours show through. Darkens further when a sharp backdrop is
+// present, since real photography has more focal variation than a blur wash.
+.hero__vignette {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    background:
+        linear-gradient(
+            90deg,
+            color-mix(
+                    in srgb,
+                    var(--app-widget-header-bg, #232840) 55%,
+                    transparent
+                )
+                0%,
+            color-mix(
+                    in srgb,
+                    var(--app-widget-header-bg, #232840) 10%,
+                    transparent
+                )
+                45%,
+            color-mix(
+                    in srgb,
+                    var(--app-widget-header-bg, #232840) 65%,
+                    transparent
+                )
+                100%
+        ),
+        linear-gradient(
+            to bottom,
+            transparent 55%,
+            color-mix(
+                    in srgb,
+                    var(--app-widget-header-bg, #232840) 35%,
+                    transparent
+                )
+                100%
+        );
+}
+
+.hero--has-backdrop .hero__vignette {
+    background:
+        linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.55) 0%,
+            rgba(0, 0, 0, 0.2) 35%,
+            rgba(0, 0, 0, 0.78) 100%
+        ),
+        linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0) 40%,
+            rgba(0, 0, 0, 0.45) 100%
+        );
+}
+
+// Layer 2: sharp poster in native 2:3 aspect (no more 16:9 crop).
+.hero__poster {
+    position: relative;
+    z-index: 2;
+    width: var(--hero-poster-width);
+    aspect-ratio: 2 / 3;
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--app-widget-bg, #1e2330);
+    border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.1));
+    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55);
+    align-self: center;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+}
+
+.hero__poster-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: radial-gradient(
+        circle at 50% 40%,
+        var(--app-selection-surface, rgba(120, 173, 255, 0.2)) 0%,
+        transparent 60%
+    );
+    background-size: cover;
+    background-position: center;
+
+    mat-icon {
+        font-size: 56px;
+        width: 56px;
+        height: 56px;
+        color: var(--app-selection-color, #78adff);
+        opacity: 0.75;
+    }
+}
+
+.hero__body {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    min-width: 0;
+}
+
+.hero__title {
+    margin: 6px 0 4px;
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.15;
+    // Display-weight tracking: looser than -0.02em which crushes glyphs at
+    // this size (~28px). Matches Apple TV+ "Up Next" card scale.
+    letter-spacing: -0.015em;
+    color: var(--app-heading-color, #d8dce8);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    .hero--with-image & {
+        color: #fff;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
+    }
+}
+
+.hero__subtitle {
+    margin: 0;
+    font-size: 0.88rem;
+    font-weight: 500;
+    line-height: 1.45;
+    letter-spacing: 0.002em;
+    color: var(--app-body-color, #8b93a8);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .hero--with-image & {
+        color: rgba(255, 255, 255, 0.82);
+        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
+    }
+}
+
+.hero__cta {
+    margin-top: 16px;
+    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 20px 10px 14px;
+    border-radius: 999px;
+    background: var(--app-selection-color, #78adff);
+    color: var(--app-selection-on-color, #071225);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.005em;
+    // Explicit min-height anchors the text baseline regardless of font-smoothing
+    min-height: 36px;
+    box-sizing: border-box;
+    box-shadow: 0 4px 12px -4px
+        var(--app-selection-glow, rgba(120, 173, 255, 0.5));
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+    }
+}
+
+// ── Loading skeleton ────────────────────────────────────────────────────────
+// Geometry mirrors the real hero + rails so the layout doesn't shift when
+// data arrives. All shimmer targets share the `%skeleton-shimmer` placeholder
+// defined below.
+%skeleton-shimmer {
+    background: linear-gradient(
+        90deg,
+        var(--app-widget-bg, #1e2330) 0%,
+        var(--app-widget-header-bg, #232840) 50%,
+        var(--app-widget-bg, #1e2330) 100%
+    );
+    background-size: 200% 100%;
+    animation: dashboard-skeleton-shimmer 1.6s linear infinite;
+    border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+}
+
+@keyframes dashboard-skeleton-shimmer {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
+    }
+}
+
+// ── Hero ghost ──────────────────────────────────────────────────────────────
+.rails-page__skeleton-hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
+    gap: 24px;
+    padding: 20px;
+    border-radius: 18px;
+    background: var(--app-widget-header-bg, #232840);
+    border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.08));
+}
+
+.rails-page__skeleton-hero-poster {
+    @extend %skeleton-shimmer;
+    width: 160px;
+    aspect-ratio: 2 / 3;
+    border-radius: 12px;
+    align-self: center;
+}
+
+.rails-page__skeleton-hero-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.rails-page__skeleton-hero-title {
+    @extend %skeleton-shimmer;
+    width: 60%;
+    height: 28px;
+    border-radius: 6px;
+}
+
+.rails-page__skeleton-hero-title--short {
+    width: 35%;
+}
+
+.rails-page__skeleton-hero-subtitle {
+    @extend %skeleton-shimmer;
+    width: 45%;
+    height: 14px;
+    border-radius: 4px;
+    margin-top: 2px;
+}
+
+.rails-page__skeleton-hero-cta {
+    @extend %skeleton-shimmer;
+    width: 160px;
+    height: 36px;
+    border-radius: 999px;
+    margin-top: 14px;
+}
+
+// ── Rail ghost ──────────────────────────────────────────────────────────────
+.rails-page__skeleton-rail {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 0 0;
+}
+
+.rails-page__skeleton-header {
+    @extend %skeleton-shimmer;
+    width: 180px;
+    height: 22px;
+    border-radius: 6px;
+}
+
+.rails-page__skeleton-track {
+    display: flex;
+    gap: 14px;
+    padding: 4px 0 16px;
+    overflow: hidden;
+}
+
+.rails-page__skeleton-card {
+    @extend %skeleton-shimmer;
+    // Matches the real .rail__card width (--rail-card-width: 172px) and
+    // .rail__art aspect-ratio 2/3, so when cards arrive the geometry is
+    // identical and there's no layout shift.
+    flex: 0 0 172px;
+    width: 172px;
+    aspect-ratio: 2 / 3;
+    border-radius: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rails-page__skeleton-hero-poster,
+    .rails-page__skeleton-hero-title,
+    .rails-page__skeleton-hero-subtitle,
+    .rails-page__skeleton-hero-cta,
+    .rails-page__skeleton-header,
+    .rails-page__skeleton-card {
+        animation: none;
+        background-position: 0 0;
+    }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+@media (max-width: 720px) {
+    :host {
+        padding: 16px 16px 32px;
+    }
+
+    .rails-page {
+        gap: 24px;
+    }
+
+    .hero {
+        --hero-poster-width: 120px;
+        grid-template-columns: var(--hero-poster-width) minmax(0, 1fr);
+        gap: 14px;
+        padding: 14px;
+    }
+
+    // Skeleton hero mirrors real hero at this breakpoint.
+    .rails-page__skeleton-hero {
+        grid-template-columns: 120px minmax(0, 1fr);
+        gap: 14px;
+        padding: 14px;
+    }
+
+    .rails-page__skeleton-hero-poster {
+        width: 120px;
+    }
+
+    .rails-page__skeleton-card {
+        flex: 0 0 140px;
+        width: 140px;
+    }
+
+    .hero__title {
+        font-size: 1.3rem;
+    }
+}
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.spec.ts b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.spec.ts
new file mode 100644
index 0000000..a679dce
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.spec.ts
@@ -0,0 +1,104 @@
+import type { PlaylistMeta } from 'shared-interfaces';
+import {
+    buildDashboardSourceActions,
+    resolveDashboardHeroArtwork,
+} from './workspace-dashboard-rails.component';
+
+describe('buildDashboardSourceActions', () => {
+    const basePlaylist = {
+        _id: 'playlist-1',
+        title: 'Playlist',
+        importDate: '2026-04-24T08:00:00.000Z',
+        autoRefresh: false,
+    } as PlaylistMeta;
+
+    const actionIds = (playlist: PlaylistMeta, canRefresh: boolean) =>
+        buildDashboardSourceActions(playlist, canRefresh).map(
+            (action) => action.id
+        );
+
+    it('exposes refresh, info, and remove for refreshable M3U sources', () => {
+        const playlist = {
+            ...basePlaylist,
+            url: 'https://example.com/playlist.m3u',
+        } as PlaylistMeta;
+
+        expect(actionIds(playlist, true)).toEqual([
+            'refresh',
+            'playlist-info',
+            'remove',
+        ]);
+    });
+
+    it('exposes refresh, info, account, and remove for refreshable Xtream sources', () => {
+        const playlist = {
+            ...basePlaylist,
+            serverUrl: 'https://provider.example.test',
+            username: 'demo',
+            password: 'secret',
+        } as PlaylistMeta;
+
+        expect(actionIds(playlist, true)).toEqual([
+            'refresh',
+            'playlist-info',
+            'account-info',
+            'remove',
+        ]);
+    });
+
+    it('exposes info and remove for Stalker sources', () => {
+        const playlist = {
+            ...basePlaylist,
+            macAddress: '00:1A:79:00:00:01',
+            portalUrl: 'https://stalker.example.test',
+        } as PlaylistMeta;
+
+        expect(actionIds(playlist, false)).toEqual(['playlist-info', 'remove']);
+    });
+});
+
+describe('resolveDashboardHeroArtwork', () => {
+    const item = {
+        title: 'Broken Hero',
+        posterUrl: 'https://images.example.test/poster.jpg',
+        backdropUrl: 'https://images.example.test/backdrop.jpg',
+    };
+
+    it('uses the explicit backdrop when both hero images are available', () => {
+        expect(resolveDashboardHeroArtwork(item, {})).toMatchObject({
+            backdropUrl: item.backdropUrl,
+            backdropSource: 'backdrop',
+            hasBackdrop: true,
+            posterUrl: item.posterUrl,
+        });
+    });
+
+    it('falls back from a failed backdrop to the poster cover', () => {
+        expect(
+            resolveDashboardHeroArtwork(item, {
+                [item.backdropUrl]: true,
+            })
+        ).toMatchObject({
+            backdropUrl: item.posterUrl,
+            backdropSource: 'poster',
+            hasBackdrop: false,
+            posterUrl: item.posterUrl,
+        });
+    });
+
+    it('uses generated fallback artwork when backdrop and poster both fail', () => {
+        const artwork = resolveDashboardHeroArtwork(item, {
+            [item.backdropUrl]: true,
+            [item.posterUrl]: true,
+        });
+
+        expect(artwork).toMatchObject({
+            backdropSource: 'fallback',
+            hasBackdrop: false,
+            posterUrl: undefined,
+            backdropUrl: undefined,
+        });
+        expect(artwork.fallbackBackdropBackground).toContain('linear-gradient');
+        expect(artwork.fallbackPosterBackground).toContain('linear-gradient');
+    });
+});
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts
new file mode 100644
index 0000000..abb12ce
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.ts
@@ -0,0 +1,484 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { RouterLink } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import {
+    EmptyStateComponent,
+    PlaylistInfoComponent,
+} from '@iptvnator/playlist/shared/ui';
+import { PlaylistRefreshActionService } from '@iptvnator/playlist/shared/util';
+import {
+    WORKSPACE_SHELL_ACTIONS,
+    WorkspacePlaylistType,
+} from '@iptvnator/workspace/shell/util';
+import { DialogService } from 'components';
+import { PlaylistActions } from 'm3u-state';
+import { DatabaseService } from 'services';
+import {
+    DashboardDataService,
+    DashboardFavoriteItem,
+    DashboardRecentlyAddedItem,
+    GlobalRecentItem,
+} from 'workspace-dashboard-data-access';
+import { DashboardRailComponent } from './dashboard-rail.component';
+import type {
+    DashboardRailAction,
+    DashboardRailCard,
+    DashboardRailActionSelection,
+} from './dashboard-rail.component';
+import type { PlaylistMeta } from 'shared-interfaces';
+
+// Cap dashboard rails at 20 items. Users get ~3× what's visible at once,
+// the DOM stays cheap, and the "Manage all" link is one click away for the
+// full list. Matches the single-rail density of Netflix / Apple TV+.
+const RAIL_ITEM_LIMIT = 20;
+
+// Six placeholder slots per skeleton rail — fills a typical viewport without
+// taking the whole page. Mirrors the recently-added skeleton density.
+const SKELETON_CARDS_PER_RAIL = [1, 2, 3, 4, 5, 6] as const;
+const SKELETON_RAILS = [1, 2, 3] as const;
+
+interface DashboardHeroModel {
+    readonly backdropUrl?: string;
+    readonly backdropSource: DashboardHeroBackdropSource;
+    readonly fallbackBackdropBackground: string;
+    readonly fallbackPosterBackground: string;
+    readonly hasBackdrop: boolean;
+    readonly icon: string;
+    readonly link: string[];
+    readonly posterUrl?: string;
+    readonly state?: Record<string, unknown>;
+    readonly subtitle: string;
+    readonly title: string;
+}
+
+export type DashboardHeroBackdropSource = 'backdrop' | 'poster' | 'fallback';
+
+export interface DashboardHeroArtworkInput {
+    readonly backdropUrl?: string | null;
+    readonly posterUrl?: string | null;
+    readonly title: string;
+}
+
+export interface DashboardHeroArtwork {
+    readonly backdropUrl?: string;
+    readonly backdropSource: DashboardHeroBackdropSource;
+    readonly fallbackBackdropBackground: string;
+    readonly fallbackPosterBackground: string;
+    readonly hasBackdrop: boolean;
+    readonly posterUrl?: string;
+}
+
+export function resolveDashboardHeroArtwork(
+    item: DashboardHeroArtworkInput,
+    failedImages: Record<string, true>
+): DashboardHeroArtwork {
+    const posterUrl =
+        item.posterUrl && !failedImages[item.posterUrl]
+            ? item.posterUrl
+            : undefined;
+    const explicitBackdropUrl =
+        item.backdropUrl && !failedImages[item.backdropUrl]
+            ? item.backdropUrl
+            : undefined;
+    const backdropUrl = explicitBackdropUrl ?? posterUrl;
+    const backdropSource: DashboardHeroBackdropSource = explicitBackdropUrl
+        ? 'backdrop'
+        : posterUrl
+          ? 'poster'
+          : 'fallback';
+
+    return {
+        backdropUrl,
+        backdropSource,
+        fallbackBackdropBackground: buildFallbackBackground(
+            item.title,
+            50,
+            15,
+            80,
+            5,
+            60
+        ),
+        fallbackPosterBackground: buildFallbackBackground(
+            item.title,
+            40,
+            25,
+            50,
+            15,
+            40
+        ),
+        hasBackdrop: backdropSource === 'backdrop',
+        posterUrl,
+    };
+}
+
+function buildFallbackBackground(
+    title: string,
+    saturationA: number,
+    lightnessA: number,
+    saturationB: number,
+    lightnessB: number,
+    hueOffset: number
+): string {
+    const hue = calculateHue(title || 'placeholder');
+    const h2 = (hue + hueOffset) % 360;
+    return `linear-gradient(135deg, hsl(${hue}, ${saturationA}%, ${lightnessA}%) 0%, hsl(${h2}, ${saturationB}%, ${lightnessB}%) 100%)`;
+}
+
+function calculateHue(text: string): number {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+        hash = text.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+    }
+    return Math.abs(hash) % 360;
+}
+
+export type DashboardSourceActionId =
+    | 'refresh'
+    | 'playlist-info'
+    | 'account-info'
+    | 'remove';
+
+export function buildDashboardSourceActions(
+    playlist: PlaylistMeta,
+    canRefresh: boolean
+): DashboardRailAction[] {
+    const actions: DashboardRailAction[] = [];
+
+    if (canRefresh) {
+        actions.push({
+            id: 'refresh',
+            icon: 'sync',
+            labelKey: playlist.serverUrl
+                ? 'HOME.PLAYLISTS.REFRESH_XTREAM'
+                : 'HOME.PLAYLISTS.REFRESH',
+        });
+    }
+
+    actions.push({
+        id: 'playlist-info',
+        icon: 'edit',
+        labelKey: 'HOME.PLAYLISTS.SHOW_DETAILS',
+    });
+
+    if (isXtreamAccountPlaylist(playlist)) {
+        actions.push({
+            id: 'account-info',
+            icon: 'person',
+            labelKey: 'WORKSPACE.SHELL.ACCOUNT_INFO',
+        });
+    }
+
+    actions.push({
+        id: 'remove',
+        icon: 'delete',
+        labelKey: 'HOME.PLAYLISTS.REMOVE_DIALOG.TITLE',
+        destructive: true,
+        separatorBefore: true,
+    });
+
+    return actions;
+}
+
+function isXtreamAccountPlaylist(
+    playlist: PlaylistMeta
+): playlist is PlaylistMeta & {
+    serverUrl: string;
+    username: string;
+    password: string;
+} {
+    return Boolean(
+        playlist.serverUrl && playlist.username && playlist.password
+    );
+}
+
+@Component({
+    selector: 'lib-workspace-dashboard-rails',
+    imports: [
+        DashboardRailComponent,
+        EmptyStateComponent,
+        MatButtonModule,
+        MatIcon,
+        RouterLink,
+        TranslatePipe,
+    ],
+    templateUrl: './workspace-dashboard-rails.component.html',
+    styleUrl: './workspace-dashboard-rails.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class.rails-page-host--empty]': 'ready() && !hasPlaylists()',
+    },
+})
+export class WorkspaceDashboardRailsComponent {
+    readonly data = inject(DashboardDataService);
+    private readonly databaseService = inject(DatabaseService);
+    private readonly dialog = inject(MatDialog);
+    private readonly dialogService = inject(DialogService);
+    private readonly playlistRefreshAction = inject(
+        PlaylistRefreshActionService
+    );
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly store = inject(Store);
+    private readonly translate = inject(TranslateService);
+    private readonly shellActions = inject(WORKSPACE_SHELL_ACTIONS);
+
+    readonly hasPlaylists = computed(() => this.data.playlists().length > 0);
+    readonly ready = this.data.dashboardReady;
+    readonly xtreamPlaylistCount = this.data.xtreamPlaylistCount;
+    readonly isElectron = !!window.electron;
+
+    readonly skeletonSlots = SKELETON_CARDS_PER_RAIL;
+    readonly skeletonRails = SKELETON_RAILS;
+    readonly failedHeroImages = signal<Record<string, true>>({});
+
+    readonly hero = computed<DashboardHeroModel | null>(() => {
+        const item = this.data.globalRecentItems()[0] ?? null;
+        if (!item) {
+            return null;
+        }
+
+        const artwork = resolveDashboardHeroArtwork(
+            {
+                backdropUrl: item.backdrop_url,
+                posterUrl: item.poster_url,
+                title: item.title,
+            },
+            this.failedHeroImages()
+        );
+
+        return {
+            ...artwork,
+            icon: this.typeIcon(item.type),
+            link: this.data.getRecentItemLink(item),
+            state: this.data.getRecentItemNavigationState(item),
+            subtitle: this.buildHeroSubtitle(item),
+            title: item.title,
+        };
+    });
+
+    readonly recentlyWatchedCards = computed<DashboardRailCard[]>(() =>
+        this.data
+            .globalRecentItems()
+            .slice(0, RAIL_ITEM_LIMIT)
+            .map((item) => this.toRecentCard(item))
+    );
+
+    readonly favoriteCards = computed<DashboardRailCard[]>(() =>
+        this.data
+            .globalFavoriteItems()
+            .slice(0, RAIL_ITEM_LIMIT)
+            .map((item) => this.toFavoriteCard(item))
+    );
+
+    readonly xtreamRecentlyAddedCards = computed<DashboardRailCard[]>(() =>
+        this.data
+            .xtreamRecentlyAddedItems()
+            .slice(0, RAIL_ITEM_LIMIT)
+            .map((item) => this.toRecentlyAddedCard(item))
+    );
+
+    readonly sourceCards = computed<DashboardRailCard[]>(() =>
+        this.data.recentPlaylists().map((playlist) => ({
+            id: playlist._id,
+            title:
+                playlist.title ||
+                playlist.filename ||
+                this.t('WORKSPACE.DASHBOARD.UNTITLED_SOURCE'),
+            subtitle: this.data.getPlaylistProvider(playlist),
+            icon: playlist.serverUrl
+                ? 'cloud'
+                : playlist.macAddress
+                  ? 'cast'
+                  : 'folder_open',
+            link: this.data.getPlaylistLink(playlist),
+            actions: buildDashboardSourceActions(
+                playlist,
+                this.playlistRefreshAction.canRefresh(playlist)
+            ),
+        }))
+    );
+
+    constructor() {
+        // Re-entering the dashboard should pick up any DB-backed recent/favorite
+        // changes made while viewing details, including newly backfilled
+        // backdrops that do not change recency ordering.
+        void this.data.reloadGlobalRecentItems();
+        void this.data.reloadGlobalFavorites();
+
+        // Refresh when Xtream playlist count changes so a newly added provider
+        // populates the rail without a manual dashboard reload.
+        effect(() => {
+            if (this.xtreamPlaylistCount() === 0) {
+                return;
+            }
+
+            void this.data.reloadXtreamRecentlyAddedItems(RAIL_ITEM_LIMIT);
+        });
+    }
+
+    onAddPlaylist(type?: WorkspacePlaylistType): void {
+        this.shellActions.openAddPlaylistDialog(type);
+    }
+
+    markHeroImageFailed(url: string): void {
+        this.failedHeroImages.update((state) =>
+            state[url] ? state : { ...state, [url]: true }
+        );
+    }
+
+    onSourceActionSelected(selection: DashboardRailActionSelection): void {
+        const playlist = this.data
+            .playlists()
+            .find((item) => item._id === selection.card.id);
+
+        if (!playlist) {
+            return;
+        }
+
+        switch (selection.action.id as DashboardSourceActionId) {
+            case 'refresh':
+                this.playlistRefreshAction.refresh(playlist);
+                break;
+            case 'playlist-info':
+                this.dialog.open(PlaylistInfoComponent, { data: playlist });
+                break;
+            case 'account-info':
+                this.openXtreamAccountInfo(playlist);
+                break;
+            case 'remove':
+                this.confirmRemovePlaylist(playlist);
+                break;
+        }
+    }
+
+    private buildHeroSubtitle(item: GlobalRecentItem): string {
+        const parts = [
+            item.playlist_name,
+            this.data.getRecentItemProviderLabel(item),
+            this.data.getRecentItemTypeLabel(item),
+        ].filter((value): value is string => Boolean(value));
+        return parts.join(' · ');
+    }
+
+    private toRecentCard(item: GlobalRecentItem): DashboardRailCard {
+        return {
+            id: `recent-${item.id}-${item.playlist_id}-${item.viewed_at}`,
+            title: item.title,
+            subtitle: `${this.data.getRecentItemProviderLabel(item)} · ${this.data.getRecentItemTypeLabel(item)}`,
+            imageUrl: item.poster_url,
+            icon: this.typeIcon(item.type),
+            link: this.data.getRecentItemLink(item),
+            state: this.data.getRecentItemNavigationState(item),
+        };
+    }
+
+    private toFavoriteCard(item: DashboardFavoriteItem): DashboardRailCard {
+        return {
+            id: `fav-${item.id}-${item.playlist_id}-${item.added_at}`,
+            title: item.title,
+            subtitle: `${this.data.getFavoriteItemProviderLabel(item)} · ${this.data.getFavoriteItemTypeLabel(item)}`,
+            imageUrl: item.poster_url,
+            icon: this.typeIcon(item.type),
+            link: this.data.getGlobalFavoriteLink(item),
+            state: this.data.getGlobalFavoriteNavigationState(item),
+        };
+    }
+
+    private toRecentlyAddedCard(
+        item: DashboardRecentlyAddedItem
+    ): DashboardRailCard {
+        const typeLabel = this.data.getRecentlyAddedItemTypeLabel(item);
+        const subtitleParts = [item.playlist_name, typeLabel].filter(
+            (value): value is string => Boolean(value)
+        );
+        return {
+            id: `added-${item.id}-${item.playlist_id}-${item.added_at}`,
+            title: item.title,
+            subtitle: subtitleParts.join(' · '),
+            imageUrl: item.poster_url,
+            icon: this.typeIcon(item.type),
+            link: this.data.getRecentlyAddedLink(item),
+            state: this.data.getRecentlyAddedNavigationState(item),
+        };
+    }
+
+    private typeIcon(type: 'live' | 'movie' | 'series'): string {
+        if (type === 'live') return 'live_tv';
+        if (type === 'movie') return 'movie';
+        return 'video_library';
+    }
+
+    private openXtreamAccountInfo(playlist: PlaylistMeta): void {
+        if (!isXtreamAccountPlaylist(playlist)) {
+            return;
+        }
+
+        const title =
+            playlist.title ||
+            playlist.filename ||
+            this.t('WORKSPACE.DASHBOARD.UNTITLED_SOURCE');
+
+        this.shellActions.openAccountInfo({
+            playlist: {
+                id: playlist._id,
+                name: title,
+                title,
+                serverUrl: playlist.serverUrl,
+                username: playlist.username,
+                password: playlist.password,
+            },
+        });
+    }
+
+    private confirmRemovePlaylist(playlist: PlaylistMeta): void {
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.TITLE'),
+            message: this.translate.instant(
+                'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE'
+            ),
+            onConfirm: () => {
+                void this.removePlaylist(playlist);
+            },
+        });
+    }
+
+    private async removePlaylist(playlist: PlaylistMeta): Promise<void> {
+        const operationId = playlist.serverUrl
+            ? this.databaseService.createOperationId('playlist-delete')
+            : undefined;
+
+        const deleted = await this.databaseService.deletePlaylist(
+            playlist._id,
+            operationId ? { operationId } : undefined
+        );
+
+        if (!deleted) {
+            return;
+        }
+
+        this.store.dispatch(
+            PlaylistActions.removePlaylist({ playlistId: playlist._id })
+        );
+        this.snackBar.open(
+            this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.SUCCESS'),
+            undefined,
+            { duration: 2000 }
+        );
+    }
+
+    private t(key: string): string {
+        return this.translate.instant(key);
+    }
+}
diff --git a/libs/workspace/dashboard/feature/src/test-setup.ts b/libs/workspace/dashboard/feature/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/workspace/dashboard/feature/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/workspace/dashboard/feature/tsconfig.json b/libs/workspace/dashboard/feature/tsconfig.json
new file mode 100644
index 0000000..7d33479
--- /dev/null
+++ b/libs/workspace/dashboard/feature/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ]
+}
diff --git a/libs/workspace/dashboard/feature/tsconfig.lib.json b/libs/workspace/dashboard/feature/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/workspace/dashboard/feature/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/workspace/dashboard/feature/tsconfig.spec.json b/libs/workspace/dashboard/feature/tsconfig.spec.json
new file mode 100644
index 0000000..e7d59a0
--- /dev/null
+++ b/libs/workspace/dashboard/feature/tsconfig.spec.json
@@ -0,0 +1,16 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "moduleResolution": "node10",
+        "types": ["jest", "node"]
+    },
+    "include": [
+        "jest.config.ts",
+        "src/test-setup.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/workspace/shell/feature/jest.config.ts b/libs/workspace/shell/feature/jest.config.ts
new file mode 100644
index 0000000..d89762d
--- /dev/null
+++ b/libs/workspace/shell/feature/jest.config.ts
@@ -0,0 +1,22 @@
+export default {
+    displayName: 'workspace-shell-feature',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/workspace/shell/feature',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+    moduleFileExtensions: ['ts', 'js', 'html'],
+};
diff --git a/libs/workspace/shell/feature/project.json b/libs/workspace/shell/feature/project.json
new file mode 100644
index 0000000..4f6493d
--- /dev/null
+++ b/libs/workspace/shell/feature/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "workspace-shell-feature",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/workspace/shell/feature/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:workspace", "domain:workspace", "type:feature"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/index.ts b/libs/workspace/shell/feature/src/index.ts
new file mode 100644
index 0000000..7d2dace
--- /dev/null
+++ b/libs/workspace/shell/feature/src/index.ts
@@ -0,0 +1,4 @@
+export * from './lib/global-favorites/global-favorites-list.component';
+export * from './lib/global-favorites/unified-favorite-channel.interface';
+export * from './lib/workspace-shell/workspace-shell.component';
+export * from './lib/workspace-sources/workspace-sources.component';
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html
new file mode 100644
index 0000000..8652f52
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html
@@ -0,0 +1,59 @@
+<div class="search-panel">
+    <mat-form-field class="search-bar">
+        <mat-icon matPrefix>search</mat-icon>
+        <input
+            matInput
+            type="search"
+            [placeholder]="
+                'WORKSPACE.GLOBAL_FAVORITES.SEARCH_PLACEHOLDER' | translate
+            "
+            [value]="searchTerm()"
+            (input)="searchTerm.set($any($event.target).value)"
+        />
+    </mat-form-field>
+</div>
+
+<div class="nav-list" cdkDropList (cdkDropListDropped)="onDrop($event)">
+    @if (enrichedChannels().length === 0) {
+        <div class="empty-state">
+            <mat-icon class="empty-icon">star_border</mat-icon>
+            @if (searchTerm()) {
+                <p class="empty-title">
+                    {{ 'WORKSPACE.GLOBAL_FAVORITES.NO_RESULTS' | translate }}
+                </p>
+                <p class="empty-hint">
+                    {{
+                        'WORKSPACE.GLOBAL_FAVORITES.NO_RESULTS_HINT'
+                            | translate
+                    }}
+                </p>
+            } @else {
+                <p class="empty-title">
+                    {{
+                        'WORKSPACE.GLOBAL_FAVORITES.EMPTY_TITLE' | translate
+                    }}
+                </p>
+                <p class="empty-hint">
+                    {{ 'WORKSPACE.GLOBAL_FAVORITES.EMPTY_HINT' | translate }}
+                </p>
+            }
+        </div>
+    }
+
+    @for (ch of enrichedChannels(); track trackByUid($index, ch)) {
+        <app-channel-list-item
+            [isDraggable]="!searchTerm()"
+            [logo]="ch.logo"
+            [name]="ch.name"
+            [selected]="activeUid() === ch.uid"
+            [showEpg]="true"
+            [epgProgram]="ch.currentEpgProgram"
+            [progressPercentage]="ch.progressPercentage"
+            [showFavoriteButton]="true"
+            [isFavorite]="true"
+            [showProgramInfoButton]="true"
+            (clicked)="onChannelClick(ch)"
+            (favoriteToggled)="onFavoriteToggled(ch)"
+        />
+    }
+</div>
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
new file mode 100644
index 0000000..6cb095d
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
@@ -0,0 +1,79 @@
+@use '@angular/material' as mat;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+// ─── Search ────────────────────────────────────────────────────────────────────
+
+.search-panel {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -10px;
+    flex-shrink: 0;
+}
+
+.search-bar {
+    width: 90%;
+    @include mat.form-field-density(-5);
+}
+
+:host ::ng-deep .search-bar div {
+    border-radius: 20px;
+}
+
+:host ::ng-deep .search-bar div[matformfieldlineripple],
+:host ::ng-deep .search-bar .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
+
+// ─── List ──────────────────────────────────────────────────────────────────────
+
+.nav-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 8px 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+// ─── Empty state ───────────────────────────────────────────────────────────────
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+
+    .empty-icon {
+        font-size: 48px;
+        height: 48px;
+        width: 48px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+    }
+
+    .empty-title {
+        font-size: 1.05rem;
+        font-weight: 520;
+        letter-spacing: -0.01em;
+        margin: 0 0 8px;
+    }
+
+    .empty-hint {
+        font-size: 0.85rem;
+        opacity: 0.65;
+        margin: 0;
+        max-width: 260px;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.ts b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.ts
new file mode 100644
index 0000000..cadeccc
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.ts
@@ -0,0 +1,4 @@
+export {
+    EnrichedUnifiedFavorite,
+    GlobalFavoritesListComponent,
+} from '@iptvnator/portal/shared/ui';
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites.service.ts b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites.service.ts
new file mode 100644
index 0000000..aeb7e34
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites.service.ts
@@ -0,0 +1,367 @@
+/**
+ * GlobalFavoritesService
+ *
+ * Aggregates live TV favorites from all three playlist source types:
+ * - M3U   – channels whose URL/id is listed in playlist.favorites[]
+ * - Xtream – rows in the `favorites` DB table where content.type = 'live'
+ * - Stalker – items in playlist.favorites[] that have a `cmd` (live channels)
+ *             and do NOT have movie_id / series_id
+ *
+ * Also handles reordering: persists position for Xtream rows via IPC.
+ * For M3U and Stalker the list order is managed in the app_state table
+ * as a JSON array of UIDs (keyed by GLOBAL_FAVORITES_ORDER_KEY).
+ */
+import { inject, Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { selectAllPlaylistsMeta } from 'm3u-state';
+import { firstValueFrom, map } from 'rxjs';
+import { DatabaseService, PlaylistsService } from 'services';
+import {
+    Channel,
+    Playlist,
+    PlaylistMeta,
+    StalkerPortalItem,
+} from 'shared-interfaces';
+import {
+    buildFavoriteUid,
+    UnifiedFavoriteChannel,
+} from '@iptvnator/portal/shared/util';
+
+const GLOBAL_FAVORITES_ORDER_KEY = 'global-favorites-channel-order-v1';
+
+interface XtreamGlobalFavoriteRow {
+    readonly added_at?: string | null;
+    readonly id: number;
+    readonly playlist_id: string;
+    readonly playlist_name: string;
+    readonly position?: number | null;
+    readonly poster_url?: string | null;
+    readonly title: string;
+    readonly xtream_id: number;
+}
+
+type PlaylistWithChannels = Playlist & {
+    readonly playlist?: {
+        readonly items?: Channel[];
+    };
+};
+
+function isStalkerFavoriteItem(
+    value: string | StalkerPortalItem
+): value is StalkerPortalItem {
+    return typeof value !== 'string';
+}
+
+@Injectable({ providedIn: 'root' })
+export class GlobalFavoritesService {
+    private readonly store = inject(Store);
+    private readonly dbService = inject(DatabaseService);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly translate = inject(TranslateService);
+
+    /**
+     * Fetch and merge live TV favorites from all source types.
+     * The returned list is sorted by persisted position first,
+     * then by addedAt descending for items without a position.
+     */
+    async getUnifiedLiveFavorites(): Promise<UnifiedFavoriteChannel[]> {
+        const [m3uItems, xtreamItems, stalkerItems, savedOrder] =
+            await Promise.all([
+                this.getM3uFavorites(),
+                this.getXtreamLiveFavorites(),
+                this.getStalkerLiveFavorites(),
+                this.getSavedOrder(),
+            ]);
+
+        const all = [...m3uItems, ...xtreamItems, ...stalkerItems];
+
+        return this.applyOrder(all, savedOrder);
+    }
+
+    /**
+     * Remove a channel from its source playlist's favorites.
+     * Works for all three source types (M3U, Xtream, Stalker).
+     */
+    async removeFavorite(channel: UnifiedFavoriteChannel): Promise<void> {
+        switch (channel.sourceType) {
+            case 'm3u': {
+                const playlist = await firstValueFrom(
+                    this.playlistsService.getPlaylistById(channel.playlistId)
+                );
+                const currentFavs = (playlist.favorites as string[]) ?? [];
+                const filtered = currentFavs.filter(
+                    (f) => f !== channel.streamUrl
+                );
+                await firstValueFrom(
+                    this.playlistsService.setFavorites(
+                        channel.playlistId,
+                        filtered
+                    )
+                );
+                break;
+            }
+            case 'xtream': {
+                if (window.electron && channel.contentId != null) {
+                    await window.electron.dbRemoveFavorite(
+                        channel.contentId,
+                        channel.playlistId
+                    );
+                }
+                break;
+            }
+            case 'stalker': {
+                const sourceItemId = channel.uid.split('::')[2];
+                await firstValueFrom(
+                    this.playlistsService.removeFromPortalFavorites(
+                        channel.playlistId,
+                        sourceItemId
+                    )
+                );
+                break;
+            }
+        }
+    }
+
+    /**
+     * Persist the new display order.
+     * For Xtream items update the DB position column.
+     * For all items, persist the UID order in app_state.
+     */
+    async reorder(channels: UnifiedFavoriteChannel[]): Promise<void> {
+        const uidOrder = channels.map((ch) => ch.uid);
+
+        // Persist xtream positions to DB
+        const xtreamUpdates = channels
+            .filter(
+                (
+                    ch
+                ): ch is UnifiedFavoriteChannel & { contentId: number } =>
+                    ch.sourceType === 'xtream' && ch.contentId != null
+            )
+            .map((ch, index) => ({
+                content_id: ch.contentId,
+                position: index,
+            }));
+
+        await Promise.all([
+            xtreamUpdates.length > 0 && window.electron
+                ? window.electron.dbReorderGlobalFavorites(xtreamUpdates)
+                : Promise.resolve(),
+            this.saveOrder(uidOrder),
+        ]);
+    }
+
+    // ─── Private helpers ───────────────────────────────────────────
+
+    private async getM3uFavorites(): Promise<UnifiedFavoriteChannel[]> {
+        const allMeta = await firstValueFrom(
+            this.store
+                .select(selectAllPlaylistsMeta)
+                .pipe(map((metas) => metas as PlaylistMeta[]))
+        );
+        const m3uPlaylists = allMeta.filter(
+            (p) => p._id && !p.serverUrl && !p.macAddress
+        );
+
+        const results: UnifiedFavoriteChannel[] = [];
+
+        for (const meta of m3uPlaylists) {
+            if (!meta.favorites?.length) continue;
+            const favoriteIds = new Set(
+                (meta.favorites as string[]).map(String)
+            );
+
+            // Load full playlist to access channel items
+            let playlist: PlaylistWithChannels | undefined;
+            try {
+                playlist = (await firstValueFrom(
+                    this.playlistsService.getPlaylistById(meta._id)
+                )) as PlaylistWithChannels | undefined;
+            } catch {
+                continue;
+            }
+
+            const items = playlist?.playlist?.items ?? [];
+            for (const ch of items) {
+                if (favoriteIds.has(ch.id) || favoriteIds.has(ch.url)) {
+                    const sourceItemId = ch.url || ch.id;
+                    results.push({
+                        uid: buildFavoriteUid('m3u', meta._id, sourceItemId),
+                        name: ch.name,
+                        logo: ch.tvg?.logo ?? null,
+                        sourceType: 'm3u',
+                        playlistId: meta._id,
+                        playlistName: meta.title || meta.filename || 'M3U',
+                        streamUrl: ch.url,
+                        tvgId: ch.tvg?.id || ch.tvg?.name || ch.name,
+                        addedAt: new Date(0).toISOString(),
+                        position: 0,
+                    });
+                }
+            }
+        }
+
+        return results;
+    }
+
+    private async getXtreamLiveFavorites(): Promise<UnifiedFavoriteChannel[]> {
+        if (!window.electron) return [];
+
+        let items: XtreamGlobalFavoriteRow[] = [];
+        try {
+            items =
+                (await this.dbService.getGlobalFavorites()) as XtreamGlobalFavoriteRow[];
+        } catch {
+            return [];
+        }
+
+        // getGlobalFavorites now only returns type='live'
+        return items.map((item) => ({
+            uid: buildFavoriteUid('xtream', item.playlist_id, item.xtream_id),
+            name: item.title,
+            logo: item.poster_url ?? null,
+            sourceType: 'xtream' as const,
+            playlistId: item.playlist_id,
+            playlistName: item.playlist_name,
+            xtreamId: item.xtream_id,
+            tvgId: String(item.xtream_id),
+            addedAt: item.added_at ?? new Date(0).toISOString(),
+            position: item.position ?? 0,
+            contentId: item.id,
+        }));
+    }
+
+    private async getStalkerLiveFavorites(): Promise<UnifiedFavoriteChannel[]> {
+        const allMeta = await firstValueFrom(
+            this.store
+                .select(selectAllPlaylistsMeta)
+                .pipe(map((metas) => metas as PlaylistMeta[]))
+        );
+
+        const stalkerPlaylists = allMeta.filter((p) => p._id && p.macAddress);
+
+        const results: UnifiedFavoriteChannel[] = [];
+
+        for (const meta of stalkerPlaylists) {
+            if (!meta.favorites?.length) continue;
+
+            // Fetch full playlist to get credentials
+            let playlist: Playlist | undefined;
+            try {
+                playlist = (await firstValueFrom(
+                    this.playlistsService.getPlaylistById(meta._id)
+                )) as Playlist | undefined;
+            } catch {
+                continue;
+            }
+
+            const favorites = Array.isArray(playlist?.favorites)
+                ? playlist.favorites.filter(isStalkerFavoriteItem)
+                : [];
+
+            for (const fav of favorites) {
+                // Live channels: have a cmd, no movie_id / series_id
+                const isLive =
+                    fav.cmd &&
+                    !fav.movie_id &&
+                    !fav.series_id &&
+                    (fav.stream_type === 'live' ||
+                        fav.category_id === 'itv' ||
+                        (!fav.stream_type && !fav.series_id && !fav.movie_id));
+                if (!isLive) continue;
+
+                const streamId = fav.stream_id ?? fav.id;
+                results.push({
+                    uid: buildFavoriteUid('stalker', meta._id, streamId),
+                    name:
+                        fav.o_name ||
+                        fav.name ||
+                        this.translate.instant(
+                            'WORKSPACE.GLOBAL_FAVORITES.UNKNOWN_CHANNEL'
+                        ),
+                    logo: fav.logo ?? fav.cover ?? null,
+                    sourceType: 'stalker' as const,
+                    playlistId: meta._id,
+                    playlistName:
+                        meta.title ||
+                        meta.filename ||
+                        this.translate.instant(
+                            'WORKSPACE.DASHBOARD.STALKER_PORTAL'
+                        ),
+                    stalkerCmd: fav.cmd,
+                    stalkerPortalUrl: playlist.portalUrl ?? playlist.url,
+                    stalkerMacAddress: playlist.macAddress,
+                    addedAt: fav.added_at
+                        ? new Date(fav.added_at).toISOString()
+                        : new Date(0).toISOString(),
+                    position: 0,
+                });
+            }
+        }
+
+        return results;
+    }
+
+    private async getSavedOrder(): Promise<string[]> {
+        if (!window.electron?.dbGetAppState) return [];
+        try {
+            const raw = await window.electron.dbGetAppState(
+                GLOBAL_FAVORITES_ORDER_KEY
+            );
+            if (!raw) return [];
+            return JSON.parse(raw) as string[];
+        } catch {
+            return [];
+        }
+    }
+
+    private async saveOrder(uidOrder: string[]): Promise<void> {
+        if (!window.electron?.dbSetAppState) return;
+        try {
+            await window.electron.dbSetAppState(
+                GLOBAL_FAVORITES_ORDER_KEY,
+                JSON.stringify(uidOrder)
+            );
+        } catch {
+            // ignore
+        }
+    }
+
+    private applyOrder(
+        channels: UnifiedFavoriteChannel[],
+        savedOrder: string[]
+    ): UnifiedFavoriteChannel[] {
+        if (!savedOrder.length) {
+            // Default: sort by addedAt descending, xtream position asc
+            return channels.slice().sort((a, b) => {
+                if (a.position !== b.position) return a.position - b.position;
+                return (
+                    new Date(b.addedAt).getTime() -
+                    new Date(a.addedAt).getTime()
+                );
+            });
+        }
+
+        const orderMap = new Map(savedOrder.map((uid, i) => [uid, i]));
+        const ordered: UnifiedFavoriteChannel[] = [];
+        const unordered: UnifiedFavoriteChannel[] = [];
+
+        for (const ch of channels) {
+            const position = orderMap.get(ch.uid);
+            if (position != null) {
+                ordered.push({ ...ch, position });
+            } else {
+                unordered.push(ch);
+            }
+        }
+
+        ordered.sort((a, b) => a.position - b.position);
+        unordered.sort(
+            (a, b) =>
+                new Date(b.addedAt).getTime() - new Date(a.addedAt).getTime()
+        );
+
+        return [...ordered, ...unordered];
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/unified-favorite-channel.interface.ts b/libs/workspace/shell/feature/src/lib/global-favorites/unified-favorite-channel.interface.ts
new file mode 100644
index 0000000..e642808
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/unified-favorite-channel.interface.ts
@@ -0,0 +1,5 @@
+export {
+    buildFavoriteUid,
+    FavoriteSourceType,
+    UnifiedFavoriteChannel,
+} from '@iptvnator/portal/shared/util';
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/index.ts b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/index.ts
new file mode 100644
index 0000000..3923f1f
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/index.ts
@@ -0,0 +1,2 @@
+export * from './playlist-drop-overlay.component';
+export * from './playlist-drop-zone.directive';
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.html b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.html
new file mode 100644
index 0000000..127ca95
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.html
@@ -0,0 +1,31 @@
+@if (isVisible()) {
+    <div class="drop-overlay__backdrop" aria-hidden="true"></div>
+    <div
+        class="drop-overlay__card"
+        [class.is-rejected]="isRejected()"
+        role="status"
+        aria-live="polite"
+    >
+        <div class="drop-overlay__icon-wrap">
+            <mat-icon class="drop-overlay__icon">
+                {{ isRejected() ? 'error_outline' : 'file_download' }}
+            </mat-icon>
+        </div>
+        <h2 class="drop-overlay__title">
+            {{
+                (isRejected()
+                    ? rejectionKey()
+                    : 'WORKSPACE.SHELL.DROP_OVERLAY_TITLE'
+                ) | translate
+            }}
+        </h2>
+        <p class="drop-overlay__body">
+            {{
+                (isRejected()
+                    ? 'WORKSPACE.SHELL.DROP_OVERLAY_REJECTED_BODY'
+                    : 'WORKSPACE.SHELL.DROP_OVERLAY_BODY'
+                ) | translate
+            }}
+        </p>
+    </div>
+}
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
new file mode 100644
index 0000000..7dd81df
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
@@ -0,0 +1,149 @@
+:host {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: none;
+    pointer-events: none;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+
+:host.is-visible {
+    display: flex;
+    animation: drop-overlay-fade 0.15s ease-out;
+}
+
+.drop-overlay__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(2, 6, 23, 0.6);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.drop-overlay__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 12px;
+    padding: clamp(28px, 5vh, 48px) clamp(28px, 5vw, 56px);
+    min-width: 320px;
+    max-width: min(520px, 88vw);
+    background: linear-gradient(
+        145deg,
+        rgba(96, 165, 250, 0.12),
+        rgba(37, 99, 235, 0.08)
+    );
+    border: 2px dashed rgba(96, 165, 250, 0.55);
+    border-radius: 18px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+    color: #f1f5f9;
+    animation: drop-overlay-scale 0.18s ease-out;
+
+    &.is-rejected {
+        border-color: rgba(248, 113, 113, 0.55);
+        background: linear-gradient(
+            145deg,
+            rgba(248, 113, 113, 0.12),
+            rgba(220, 38, 38, 0.08)
+        );
+
+        .drop-overlay__icon-wrap {
+            background: linear-gradient(135deg, #f87171, #dc2626);
+            box-shadow: 0 8px 22px rgba(220, 38, 38, 0.4);
+        }
+    }
+}
+
+.drop-overlay__icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, #3b82f6, #2563eb);
+    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.45);
+    margin-bottom: 4px;
+}
+
+.drop-overlay__icon {
+    font-size: 36px;
+    width: 36px;
+    height: 36px;
+    color: white;
+}
+
+.drop-overlay__title {
+    font-family: Roboto, 'Helvetica Neue', sans-serif;
+    font-weight: 600;
+    font-size: 1.25rem;
+    margin: 0;
+    letter-spacing: -0.01em;
+}
+
+.drop-overlay__body {
+    font-family: Roboto, 'Helvetica Neue', sans-serif;
+    font-size: 0.9rem;
+    margin: 0;
+    opacity: 0.78;
+    line-height: 1.45;
+}
+
+@keyframes drop-overlay-fade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes drop-overlay-scale {
+    from {
+        opacity: 0;
+        transform: translateY(6px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :host.is-visible {
+        animation: drop-overlay-fade 0.1s ease-out;
+    }
+
+    .drop-overlay__card {
+        animation: drop-overlay-fade 0.1s ease-out;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .drop-overlay__backdrop {
+        background: rgba(15, 23, 42, 0.45);
+    }
+
+    .drop-overlay__card {
+        background: linear-gradient(
+            145deg,
+            rgba(255, 255, 255, 0.96),
+            rgba(241, 245, 249, 0.96)
+        );
+        color: #0f172a;
+        border-color: rgba(37, 99, 235, 0.55);
+
+        &.is-rejected {
+            background: linear-gradient(
+                145deg,
+                rgba(254, 226, 226, 0.96),
+                rgba(252, 165, 165, 0.92)
+            );
+            border-color: rgba(220, 38, 38, 0.6);
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.ts b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.ts
new file mode 100644
index 0000000..883e1d6
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.ts
@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+
+export type PlaylistDropOverlayState =
+    | { kind: 'idle' }
+    | { kind: 'dragging' }
+    | { kind: 'rejected'; reason: 'unsupported' | 'empty' | 'read-error' };
+
+@Component({
+    selector: 'app-playlist-drop-overlay',
+    templateUrl: './playlist-drop-overlay.component.html',
+    styleUrl: './playlist-drop-overlay.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatIcon, TranslatePipe],
+    host: {
+        '[class.is-visible]': 'isVisible()',
+        '[attr.aria-hidden]': '!isVisible()',
+    },
+})
+export class PlaylistDropOverlayComponent {
+    readonly state = input<PlaylistDropOverlayState>({ kind: 'idle' });
+
+    readonly isVisible = (): boolean => this.state().kind !== 'idle';
+
+    readonly isRejected = (): boolean => this.state().kind === 'rejected';
+
+    readonly rejectionKey = (): string => {
+        const current = this.state();
+        if (current.kind !== 'rejected') return '';
+        switch (current.reason) {
+            case 'unsupported':
+                return 'WORKSPACE.SHELL.DROP_OVERLAY_REJECTED_UNSUPPORTED';
+            case 'empty':
+                return 'WORKSPACE.SHELL.DROP_OVERLAY_REJECTED_EMPTY';
+            case 'read-error':
+                return 'WORKSPACE.SHELL.DROP_OVERLAY_REJECTED_READ_ERROR';
+        }
+    };
+}
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-zone.directive.ts b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-zone.directive.ts
new file mode 100644
index 0000000..77134ff
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-zone.directive.ts
@@ -0,0 +1,134 @@
+import {
+    DestroyRef,
+    Directive,
+    ElementRef,
+    HostListener,
+    OnInit,
+    inject,
+    signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '@ngx-translate/core';
+import { PlaylistFileImportService } from '@iptvnator/playlist/shared/util';
+import { fromEvent, merge } from 'rxjs';
+import type { PlaylistDropOverlayState } from './playlist-drop-overlay.component';
+
+const REJECTED_DISMISS_MS = 1800;
+
+@Directive({
+    selector: '[appPlaylistDropZone]',
+    exportAs: 'playlistDropZone',
+})
+export class PlaylistDropZoneDirective implements OnInit {
+    private readonly host = inject(ElementRef<HTMLElement>);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly importService = inject(PlaylistFileImportService);
+    private readonly snackBar = inject(MatSnackBar);
+    private readonly translate = inject(TranslateService);
+
+    private dragDepth = 0;
+    private rejectionTimer: ReturnType<typeof setTimeout> | null = null;
+
+    readonly overlayState = signal<PlaylistDropOverlayState>({ kind: 'idle' });
+
+    ngOnInit(): void {
+        merge(
+            fromEvent<KeyboardEvent>(window, 'keydown'),
+            fromEvent(window, 'blur')
+        )
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+                if (event instanceof KeyboardEvent && event.key !== 'Escape') {
+                    return;
+                }
+                this.resetState();
+            });
+    }
+
+    @HostListener('dragenter', ['$event'])
+    onDragEnter(event: DragEvent): void {
+        if (!this.isFileDrag(event)) return;
+        event.preventDefault();
+        this.dragDepth += 1;
+        if (this.overlayState().kind === 'rejected') return;
+        this.overlayState.set({ kind: 'dragging' });
+    }
+
+    @HostListener('dragover', ['$event'])
+    onDragOver(event: DragEvent): void {
+        if (!this.isFileDrag(event)) return;
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }
+
+    @HostListener('dragleave', ['$event'])
+    onDragLeave(event: DragEvent): void {
+        if (!this.isFileDrag(event)) return;
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0 && this.overlayState().kind === 'dragging') {
+            this.overlayState.set({ kind: 'idle' });
+        }
+    }
+
+    @HostListener('drop', ['$event'])
+    async onDrop(event: DragEvent): Promise<void> {
+        if (!this.isFileDrag(event)) return;
+        event.preventDefault();
+        this.dragDepth = 0;
+
+        const file = event.dataTransfer?.files?.[0];
+        if (!file) {
+            this.overlayState.set({ kind: 'idle' });
+            return;
+        }
+
+        const result = await this.importService.importFile(file);
+        if (result.ok === true) {
+            this.overlayState.set({ kind: 'idle' });
+            this.snackBar.open(
+                this.translate.instant(
+                    'WORKSPACE.SHELL.DROP_IMPORT_SUCCESS',
+                    { title: result.title }
+                ),
+                undefined,
+                { duration: 3000 }
+            );
+            return;
+        }
+
+        this.flashRejection(result.reason);
+    }
+
+    private isFileDrag(event: DragEvent): boolean {
+        const types = event.dataTransfer?.types;
+        if (!types) return false;
+        return Array.from(types).includes('Files');
+    }
+
+    private flashRejection(
+        reason: 'unsupported' | 'empty' | 'read-error'
+    ): void {
+        this.overlayState.set({ kind: 'rejected', reason });
+        this.clearRejectionTimer();
+        this.rejectionTimer = setTimeout(() => {
+            this.overlayState.set({ kind: 'idle' });
+            this.rejectionTimer = null;
+        }, REJECTED_DISMISS_MS);
+    }
+
+    private resetState(): void {
+        this.dragDepth = 0;
+        this.clearRejectionTimer();
+        this.overlayState.set({ kind: 'idle' });
+    }
+
+    private clearRejectionTimer(): void {
+        if (this.rejectionTimer !== null) {
+            clearTimeout(this.rejectionTimer);
+            this.rejectionTimer = null;
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html
new file mode 100644
index 0000000..8b8a6d7
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.html
@@ -0,0 +1,61 @@
+<div class="palette-shell">
+    <label class="palette-search">
+        <mat-icon class="palette-search__icon">search</mat-icon>
+        <input
+            #queryInput
+            type="search"
+            spellcheck="false"
+            [value]="query()"
+            (input)="onQueryInput($event)"
+            (keydown)="onInputKeydown($event)"
+            [placeholder]="
+                'WORKSPACE.COMMAND_PALETTE.SEARCH_PLACEHOLDER' | translate
+            "
+            [attr.aria-label]="
+                'WORKSPACE.COMMAND_PALETTE.SEARCH_LABEL' | translate
+            "
+        />
+        <kbd class="palette-search__kbd">&#8984;K</kbd>
+    </label>
+
+    @if (commandGroups().length > 0) {
+        <div class="palette-divider"></div>
+
+        <div class="palette-results">
+            @for (group of commandGroups(); track group.group) {
+                <section class="palette-group">
+                    <h3 class="palette-group__title">
+                        {{ getGroupTitleKey(group.group) | translate }}
+                    </h3>
+                    @for (command of group.items; track command.id) {
+                        <button
+                            type="button"
+                            class="palette-command"
+                            [class.is-selected]="isCommandSelected(command)"
+                            [disabled]="!command.enabled"
+                            (mouseenter)="onCommandHover(command)"
+                            (click)="onCommandClick(command)"
+                        >
+                            <span class="palette-command__icon">
+                                <mat-icon>{{ command.icon }}</mat-icon>
+                            </span>
+                            <span class="palette-command__label">{{
+                                command.label
+                            }}</span>
+                            @if (command.description) {
+                                <span class="palette-command__desc">{{
+                                    command.description
+                                }}</span>
+                            }
+                        </button>
+                    }
+                </section>
+            }
+        </div>
+    } @else {
+        <div class="palette-divider"></div>
+        <div class="palette-empty">
+            {{ 'WORKSPACE.COMMAND_PALETTE.EMPTY' | translate }}
+        </div>
+    }
+</div>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
new file mode 100644
index 0000000..d1ac130
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
@@ -0,0 +1,219 @@
+:host {
+    display: block;
+    width: 100%;
+    max-height: 80vh;
+    app-region: no-drag;
+}
+
+// ─── Shell ───────────────────────────────────────────────────────────────────
+.palette-shell {
+    background: var(--app-widget-bg);
+    color: var(--mat-sys-on-surface);
+    border: 1px solid var(--app-separator);
+    border-radius: 14px;
+    box-shadow:
+        0 24px 48px -28px rgba(0, 0, 0, 0.5),
+        0 10px 24px -18px rgba(0, 0, 0, 0.35);
+    overflow: hidden;
+}
+
+// ─── Search ──────────────────────────────────────────────────────────────────
+.palette-search {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 14px;
+    min-height: 44px;
+    cursor: text;
+}
+
+.palette-search__icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: var(--mat-sys-on-surface-variant);
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.palette-search input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--mat-sys-on-surface);
+    font: inherit;
+    font-size: 0.94rem;
+    font-weight: 450;
+    width: 100%;
+    min-width: 0;
+
+    &::placeholder {
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.55;
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}
+
+.palette-search__kbd {
+    font-family: inherit;
+    font-size: 0.68rem;
+    font-weight: 500;
+    color: var(--mat-sys-on-surface-variant);
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--mat-sys-outline-variant) 80%,
+            transparent
+        );
+    border-radius: 5px;
+    padding: 2px 5px;
+    line-height: 1;
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+// ─── Divider ─────────────────────────────────────────────────────────────────
+.palette-divider {
+    height: 1px;
+    background: var(--app-separator);
+}
+
+// ─── Results ─────────────────────────────────────────────────────────────────
+.palette-results {
+    max-height: min(56vh, 480px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 6px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--mat-sys-outline-variant) transparent;
+}
+
+// ─── Group ───────────────────────────────────────────────────────────────────
+.palette-group {
+    &:not(:first-child) {
+        margin-top: 4px;
+    }
+}
+
+.palette-group__title {
+    margin: 0;
+    padding: 6px 8px 4px;
+    font-size: 0.68rem;
+    font-weight: 600;
+    color: var(--mat-sys-on-surface-variant);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    opacity: 0.7;
+}
+
+// ─── Command Row ─────────────────────────────────────────────────────────────
+.palette-command {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 7px 8px;
+    border: 1px solid transparent;
+    border-radius: 9px;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition:
+        background 0.12s ease,
+        border-color 0.12s ease;
+
+    &:hover:not(:disabled),
+    &.is-selected:not(:disabled) {
+        background: linear-gradient(
+            135deg,
+            var(--app-selection-surface-strong),
+            var(--app-selection-surface)
+        );
+        border-color: var(--app-selection-border);
+    }
+
+    &.is-selected:not(:disabled) {
+        box-shadow: 0 1px 4px -2px var(--app-selection-glow);
+
+        .palette-command__icon {
+            background: color-mix(
+                in srgb,
+                var(--app-selection-color) 22%,
+                transparent
+            );
+            color: var(--app-selection-color);
+        }
+
+        .palette-command__label {
+            color: var(--app-selection-color);
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.4;
+    }
+}
+
+.palette-command__icon {
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 7px;
+    background: color-mix(
+        in srgb,
+        var(--mat-sys-on-surface-variant) 10%,
+        transparent
+    );
+    color: var(--mat-sys-on-surface-variant);
+    flex-shrink: 0;
+    transition:
+        background 0.12s ease,
+        color 0.12s ease;
+
+    mat-icon {
+        font-size: 17px;
+        width: 17px;
+        height: 17px;
+    }
+}
+
+.palette-command__label {
+    font-size: 0.84rem;
+    font-weight: 530;
+    letter-spacing: -0.006em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    transition: color 0.12s ease;
+}
+
+.palette-command__desc {
+    margin-left: auto;
+    font-size: 0.74rem;
+    color: var(--mat-sys-on-surface-variant);
+    opacity: 0.65;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    min-width: 0;
+    padding-left: 12px;
+}
+
+// ─── Empty State ─────────────────────────────────────────────────────────────
+.palette-empty {
+    padding: 20px 14px;
+    text-align: center;
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.82rem;
+    opacity: 0.7;
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.spec.ts
new file mode 100644
index 0000000..3cca4b9
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.spec.ts
@@ -0,0 +1,165 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { WorkspaceResolvedCommandItem } from '@iptvnator/portal/shared/util';
+import { WorkspaceCommandPaletteComponent } from './workspace-command-palette.component';
+
+describe('WorkspaceCommandPaletteComponent', () => {
+    let fixture: ComponentFixture<WorkspaceCommandPaletteComponent>;
+    let component: WorkspaceCommandPaletteComponent;
+    let dialogRef: { close: jest.Mock };
+    let commands: WorkspaceResolvedCommandItem[];
+
+    beforeEach(async () => {
+        dialogRef = {
+            close: jest.fn(),
+        };
+        commands = [
+            {
+                id: 'global-search',
+                label: 'Search all Xtream playlists',
+                description: 'Open global search overlay',
+                group: 'global',
+                icon: 'search',
+                keywords: ['xtream', 'global'],
+                priority: 100,
+                visible: true,
+                enabled: false,
+                run: () => undefined,
+            },
+            {
+                id: 'playlist-search',
+                label: 'Search this playlist',
+                description: 'Open playlist search route',
+                group: 'playlist',
+                icon: 'playlist_play',
+                keywords: ['playlist'],
+                priority: 10,
+                visible: true,
+                enabled: true,
+                run: () => undefined,
+            },
+            {
+                id: 'multi-epg',
+                label: 'Open Multi-EPG',
+                description: '',
+                group: 'view',
+                icon: 'view_list',
+                keywords: ['epg', 'guide'],
+                priority: 0,
+                visible: true,
+                enabled: true,
+                run: () => undefined,
+            },
+            {
+                id: 'hidden-command',
+                label: 'Hidden command',
+                description: 'Should not appear',
+                group: 'global',
+                icon: 'visibility_off',
+                keywords: [],
+                priority: 200,
+                visible: false,
+                enabled: true,
+                run: () => undefined,
+            },
+        ];
+
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceCommandPaletteComponent],
+            providers: [
+                {
+                    provide: MatDialogRef,
+                    useValue: dialogRef,
+                },
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {
+                        query: 'search',
+                        commands,
+                    },
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(WorkspaceCommandPaletteComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('creates and applies initial query', () => {
+        expect(component).toBeTruthy();
+        expect(component.query()).toBe('search');
+    });
+
+    it('selects the first enabled command by default', () => {
+        expect(component.selectedIndex()).toBe(0);
+        expect(component.flatCommands()[0].id).toBe('playlist-search');
+    });
+
+    it('hides non-visible commands and omits empty groups', () => {
+        expect(component.flatCommands().map((command) => command.id)).toEqual([
+            'playlist-search',
+            'global-search',
+        ]);
+        expect(component.commandGroups().map((group) => group.group)).toEqual([
+            'playlist',
+            'global',
+        ]);
+    });
+
+    it('filters commands by keywords', () => {
+        component.query.set('guide');
+
+        expect(component.flatCommands().map((command) => command.id)).toEqual([
+            'multi-epg',
+        ]);
+    });
+
+    it('skips disabled commands during keyboard navigation', () => {
+        component.query.set('');
+        fixture.detectChanges();
+
+        expect(component.flatCommands().map((command) => command.id)).toEqual([
+            'multi-epg',
+            'playlist-search',
+            'global-search',
+        ]);
+        expect(component.selectedIndex()).toBe(0);
+
+        component.onInputKeydown(
+            new KeyboardEvent('keydown', { key: 'ArrowDown' })
+        );
+        expect(component.selectedIndex()).toBe(1);
+
+        component.onInputKeydown(
+            new KeyboardEvent('keydown', { key: 'ArrowDown' })
+        );
+        expect(component.selectedIndex()).toBe(0);
+    });
+
+    it('closes with selected command and query on click', () => {
+        component.query.set('');
+        const command = component.flatCommands()[0];
+        component.onCommandClick(command);
+
+        expect(dialogRef.close).toHaveBeenCalledWith({
+            commandId: 'multi-epg',
+            query: '',
+        });
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts
new file mode 100644
index 0000000..8fa6433
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts
@@ -0,0 +1,252 @@
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    computed,
+    effect,
+    inject,
+    signal,
+    viewChild,
+} from '@angular/core';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogModule,
+    MatDialogRef,
+} from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    WorkspaceCommandGroup,
+    WorkspaceCommandSelection,
+    WorkspaceResolvedCommandItem,
+} from '@iptvnator/portal/shared/util';
+
+interface WorkspaceCommandPaletteData {
+    commands: WorkspaceResolvedCommandItem[];
+    query?: string;
+}
+
+interface WorkspaceCommandGroupSection {
+    group: WorkspaceCommandGroup;
+    items: WorkspaceResolvedCommandItem[];
+}
+
+@Component({
+    selector: 'app-workspace-command-palette',
+    imports: [MatDialogModule, MatIconModule, TranslatePipe],
+    templateUrl: './workspace-command-palette.component.html',
+    styleUrl: './workspace-command-palette.component.scss',
+})
+export class WorkspaceCommandPaletteComponent implements AfterViewInit {
+    private readonly dialogRef = inject(
+        MatDialogRef<
+            WorkspaceCommandPaletteComponent,
+            WorkspaceCommandSelection | undefined
+        >
+    );
+    private readonly data =
+        inject<WorkspaceCommandPaletteData>(MAT_DIALOG_DATA);
+
+    private readonly queryInputRef =
+        viewChild<ElementRef<HTMLInputElement>>('queryInput');
+
+    readonly query = signal(this.data?.query ?? '');
+    readonly selectedIndex = signal(0);
+
+    readonly visibleCommands = computed(() =>
+        this.data.commands.filter((command) => command.visible)
+    );
+
+    readonly filteredCommands = computed(() => {
+        const term = this.query().trim().toLowerCase();
+        const commands = this.visibleCommands();
+
+        if (!term) {
+            return commands;
+        }
+
+        return commands.filter((command) => {
+            const haystack = [
+                command.label,
+                command.description,
+                ...(command.keywords ?? []),
+            ]
+                .join(' ')
+                .toLowerCase();
+
+            return haystack.includes(term);
+        });
+    });
+
+    readonly commandGroups = computed<WorkspaceCommandGroupSection[]>(() => {
+        const commands = this.filteredCommands();
+        const sections: WorkspaceCommandGroupSection[] = [];
+
+        const buildSection = (
+            group: WorkspaceCommandGroup
+        ): WorkspaceCommandGroupSection | null => {
+            const items = commands.filter((command) => command.group === group);
+
+            if (items.length === 0) {
+                return null;
+            }
+
+            return { group, items };
+        };
+
+        const groups = [
+            buildSection('view'),
+            buildSection('playlist'),
+            buildSection('global'),
+        ].filter(
+            (group): group is WorkspaceCommandGroupSection => group !== null
+        );
+
+        sections.push(...groups);
+        return sections;
+    });
+
+    readonly flatCommands = computed(() =>
+        this.commandGroups().reduce<WorkspaceResolvedCommandItem[]>(
+            (items, group) => items.concat(group.items),
+            []
+        )
+    );
+
+    readonly selectableIndices = computed(() =>
+        this.flatCommands()
+            .map((command, index) => (command.enabled ? index : -1))
+            .filter((index) => index >= 0)
+    );
+
+    constructor() {
+        effect(() => {
+            const items = this.flatCommands();
+            if (items.length === 0) {
+                this.selectedIndex.set(-1);
+                return;
+            }
+
+            const selectableIndices = this.selectableIndices();
+            if (selectableIndices.length === 0) {
+                this.selectedIndex.set(-1);
+                return;
+            }
+
+            const currentIndex = this.selectedIndex();
+            if (!selectableIndices.includes(currentIndex)) {
+                this.selectedIndex.set(selectableIndices[0]);
+            }
+        });
+    }
+
+    ngAfterViewInit(): void {
+        queueMicrotask(() => {
+            this.queryInputRef()?.nativeElement.focus();
+            this.queryInputRef()?.nativeElement.select();
+        });
+    }
+
+    onQueryInput(event: Event): void {
+        const target = event.target as HTMLInputElement | null;
+        this.query.set(target?.value ?? '');
+    }
+
+    onInputKeydown(event: KeyboardEvent): void {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.moveSelection(1);
+            return;
+        }
+
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.moveSelection(-1);
+            return;
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.selectCurrent();
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.dialogRef.close();
+        }
+    }
+
+    onCommandHover(command: WorkspaceResolvedCommandItem): void {
+        if (!command.enabled) {
+            return;
+        }
+
+        const index = this.flatCommands().findIndex(
+            (item) => item.id === command.id
+        );
+        if (index >= 0) {
+            this.selectedIndex.set(index);
+        }
+    }
+
+    onCommandClick(command: WorkspaceResolvedCommandItem): void {
+        if (!command.enabled) {
+            return;
+        }
+
+        this.dialogRef.close({
+            commandId: command.id,
+            query: this.query().trim(),
+        });
+    }
+
+    isCommandSelected(command: WorkspaceResolvedCommandItem): boolean {
+        const index = this.flatCommands().findIndex(
+            (item) => item.id === command.id
+        );
+        return index >= 0 && this.selectedIndex() === index;
+    }
+
+    getGroupTitleKey(group: WorkspaceCommandGroup): string {
+        if (group === 'view') {
+            return 'WORKSPACE.COMMAND_PALETTE.GROUP_VIEW';
+        }
+        if (group === 'playlist') {
+            return 'WORKSPACE.COMMAND_PALETTE.GROUP_PLAYLIST';
+        }
+        return 'WORKSPACE.COMMAND_PALETTE.GROUP_GLOBAL';
+    }
+
+    private moveSelection(direction: 1 | -1): void {
+        const selectableIndices = this.selectableIndices();
+        if (selectableIndices.length === 0) {
+            return;
+        }
+
+        const currentPosition = selectableIndices.indexOf(this.selectedIndex());
+        const nextPosition =
+            currentPosition === -1
+                ? direction === 1
+                    ? 0
+                    : selectableIndices.length - 1
+                : (currentPosition + direction + selectableIndices.length) %
+                  selectableIndices.length;
+
+        this.selectedIndex.set(selectableIndices[nextPosition]);
+    }
+
+    private selectCurrent(): void {
+        const items = this.flatCommands();
+        if (items.length === 0) {
+            return;
+        }
+
+        const index = this.selectedIndex();
+        if (index < 0 || index >= items.length) {
+            return;
+        }
+
+        this.onCommandClick(items[index]);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html
new file mode 100644
index 0000000..f005049
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.html
@@ -0,0 +1,67 @@
+@if (items()?.length > 0) {
+    <div class="nav-list">
+        @if (statusText()) {
+            <div class="context-inline-status">
+                {{ statusText() }}
+            </div>
+        }
+        @for (item of items(); track $index) {
+            <button
+                type="button"
+                class="nav-item category-item"
+                [attr.data-category-id]="
+                    $any(item).category_id ?? $any(item).xtream_id ?? item.id
+                "
+                [class.selected]="isSelected(item)"
+                [class.category-item--selected]="isSelected(item)"
+                [class.category-item--disabled]="!interactionEnabled()"
+                [attr.aria-current]="isSelected(item) ? 'true' : null"
+                [attr.aria-disabled]="!interactionEnabled()"
+                [disabled]="!interactionEnabled()"
+                (click)="onCategoryClick(item)"
+            >
+                <span class="nav-item-label">
+                    {{
+                        item.category_name ||
+                            $any(item).name ||
+                            'No category name'
+                    }}
+                </span>
+                @if (showCounts()) {
+                    @if (countDisplayMode() === 'loading') {
+                        <div
+                            class="nav-item-meta item-count item-count--loading"
+                            aria-hidden="true"
+                        ></div>
+                    } @else {
+                        <div class="nav-item-meta item-count">
+                            {{ getItemCount(item) }}
+                        </div>
+                    }
+                } @else if ($any(item).count !== undefined) {
+                    <div class="nav-item-meta item-count">
+                        {{ $any(item).count }}
+                    </div>
+                }
+            </button>
+        } @empty {
+            <app-workspace-context-error-view
+                [title]="'PORTALS.EMPTY_LIST_VIEW.TITLE' | translate"
+                [description]="
+                    'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate
+                "
+                [showActionButtons]="false"
+                [viewType]="'NO_SEARCH_RESULTS'"
+            />
+        }
+    </div>
+} @else {
+    <div class="category-empty-state">
+        <app-workspace-context-error-view
+            [title]="'No categories available'"
+            [showIllustration]="false"
+            [showActionButtons]="false"
+            [viewType]="'EMPTY_CATEGORY'"
+        />
+    </div>
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
new file mode 100644
index 0000000..e75a148
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
@@ -0,0 +1,135 @@
+@use '../../../../../../../../apps/web/src/nav-list.scss';
+
+:host {
+    display: block;
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.context-inline-status {
+    margin: 0 4px 8px;
+    padding: 8px 12px;
+    border-radius: 12px;
+    background: color-mix(
+        in srgb,
+        var(--app-selection-surface, var(--mat-sys-surface-container)) 72%,
+        transparent
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-selection-border, var(--mat-sys-outline-variant)) 70%,
+            transparent
+        );
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.78rem;
+    line-height: 1.35;
+}
+
+.category-item {
+    appearance: none;
+    font: inherit;
+    cursor: pointer;
+    width: auto;
+
+    .item-count {
+        opacity: 0.6;
+        font-size: 0.85em;
+        margin-left: 4px;
+    }
+}
+
+.category-item--disabled,
+.category-item--disabled:hover {
+    cursor: progress;
+    transform: none;
+    box-shadow: none;
+}
+
+.item-count--loading {
+    position: relative;
+    overflow: hidden;
+    width: 22px;
+    height: 10px;
+    border-radius: 999px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
+    );
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 8%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 18%,
+                    transparent
+                )
+                44%,
+            transparent 74%
+        );
+        transform: translateX(-120%);
+        animation: context-item-count-shimmer 1.15s ease-in-out infinite;
+    }
+}
+
+.category-item--selected .item-count {
+    color: var(--app-selection-color) !important;
+    opacity: 0.95;
+}
+
+mat-card-content {
+    overflow-wrap: break-word;
+    padding: 12px;
+}
+
+.category-empty-state {
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(14px, 3vh, 28px) 12px clamp(20px, 4vh, 34px);
+    box-sizing: border-box;
+
+    app-workspace-context-error-view {
+        --error-empty-illustration-size: clamp(132px, 15vw, 180px);
+        --error-empty-max-width: min(270px, 100%);
+        --error-empty-title-size: clamp(1.15rem, 1.35vw, 1.4rem);
+        --error-empty-title-weight: 610;
+        --error-empty-title-spacing: -0.006em;
+        --error-empty-copy-gap: 4px;
+        --error-empty-description-opacity: 0.82;
+    }
+}
+
+@keyframes context-item-count-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
+
+@media (max-width: 800px) {
+    .category-item {
+        width: 100%;
+        margin: 4px;
+    }
+
+    .category-empty-state {
+        app-workspace-context-error-view {
+            --error-empty-illustration-size: 142px;
+            --error-empty-max-width: 230px;
+            --error-empty-title-size: 1.05rem;
+            --error-empty-title-weight: 600;
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.ts b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.ts
new file mode 100644
index 0000000..c075025
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.ts
@@ -0,0 +1,103 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    output,
+} from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+import { TranslatePipe } from '@ngx-translate/core';
+import { WorkspaceContextErrorViewComponent } from './workspace-context-error-view.component';
+
+interface WorkspaceCategoryViewItem {
+    readonly category_id?: string | number;
+    readonly category_name?: string;
+    readonly count?: number;
+    readonly id?: string | number;
+    readonly name?: string;
+}
+
+@Component({
+    selector: 'app-workspace-context-category-view',
+    imports: [MatListModule, TranslatePipe, WorkspaceContextErrorViewComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './workspace-context-category-view.component.html',
+    styleUrl: './workspace-context-category-view.component.scss',
+})
+export class WorkspaceContextCategoryViewComponent {
+    readonly items = input<WorkspaceCategoryViewItem[]>([]);
+    readonly selectedCategoryId = input<string | number | null | undefined>();
+    readonly itemCounts = input<Map<number, number>>(new Map());
+    readonly showCounts = input(false);
+    readonly countDisplayMode = input<'loading' | 'ready'>('ready');
+    readonly interactionEnabled = input(true);
+    readonly statusText = input('');
+
+    private readonly hostEl = inject(ElementRef<HTMLElement>);
+
+    readonly categoryClicked = output<WorkspaceCategoryViewItem>();
+
+    constructor() {
+        effect(() => {
+            const selectedCategory = this.selectedCategoryId();
+            if (selectedCategory == null) {
+                return;
+            }
+
+            queueMicrotask(() => {
+                const container = this.hostEl.nativeElement;
+                const candidates = Array.from(
+                    container.querySelectorAll('[data-category-id]')
+                ) as HTMLElement[];
+                const selected = candidates.find(
+                    (el) =>
+                        el.dataset['categoryId'] === String(selectedCategory)
+                );
+                if (!selected) {
+                    return;
+                }
+
+                const containerRect = container.getBoundingClientRect();
+                const selectedRect = selected.getBoundingClientRect();
+                const targetTop =
+                    container.scrollTop +
+                    (selectedRect.top - containerRect.top) -
+                    container.clientHeight / 2 +
+                    selectedRect.height / 2;
+                const maxScrollTop = Math.max(
+                    0,
+                    container.scrollHeight - container.clientHeight
+                );
+
+                container.scrollTo({
+                    behavior: 'smooth',
+                    top: Math.min(maxScrollTop, Math.max(0, targetTop)),
+                });
+            });
+        });
+    }
+
+    isSelected(item: WorkspaceCategoryViewItem): boolean {
+        const selectedCategory = this.selectedCategoryId();
+        const itemId = item.category_id ?? item.id;
+        return (
+            selectedCategory != null &&
+            String(selectedCategory) === String(itemId)
+        );
+    }
+
+    getItemCount(item: WorkspaceCategoryViewItem): number {
+        const itemId = Number(item.id ?? item.category_id);
+        return this.itemCounts().get(itemId) ?? 0;
+    }
+
+    onCategoryClick(item: WorkspaceCategoryViewItem): void {
+        if (!this.interactionEnabled()) {
+            return;
+        }
+
+        this.categoryClicked.emit(item);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.html b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.html
new file mode 100644
index 0000000..2e108ac
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.html
@@ -0,0 +1,29 @@
+<div
+    class="error-view"
+    [class.error-view--empty-category]="viewType() === 'EMPTY_CATEGORY'"
+    [class.error-view--text-only]="!showIllustration()"
+>
+    @if (showIllustration()) {
+        @if (viewType() === 'ERROR') {
+            <img
+                alt="Something went wrong"
+                src="./assets/images/broken-tv.svg"
+            />
+        } @else if (viewType() === 'EMPTY_CATEGORY') {
+            <img
+                alt="empty category"
+                class="error-view__illustration"
+                src="./assets/images/empty-category.svg"
+            />
+        } @else if (viewType() === 'NO_SEARCH_RESULTS') {
+            <mat-icon class="icon">search</mat-icon>
+        }
+    }
+
+    <div class="error-view__copy">
+        <h3 class="error-view__title">{{ title() }}</h3>
+        @if (description()) {
+            <p class="error-view__description">{{ description() }}</p>
+        }
+    </div>
+</div>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.scss
new file mode 100644
index 0000000..50f5f9c
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.scss
@@ -0,0 +1,103 @@
+:host {
+    display: block;
+    width: 100%;
+    min-height: 0;
+}
+
+.error-view {
+    --error-view-illustration-size: var(
+        --error-empty-illustration-size,
+        clamp(170px, 28vw, 260px)
+    );
+    --error-view-copy-width: var(--error-empty-max-width, 420px);
+    --error-view-copy-gap: var(--error-empty-copy-gap, 8px);
+    --error-view-title-size: var(--error-empty-title-size, 1.55rem);
+    --error-view-title-weight: var(--error-empty-title-weight, 640);
+    --error-view-title-spacing: var(--error-empty-title-spacing, -0.012em);
+    --error-view-description-size: var(--error-empty-description-size, 0.98rem);
+    --error-view-description-line-height: var(
+        --error-empty-description-line-height,
+        1.4
+    );
+    --error-view-description-opacity: var(
+        --error-empty-description-opacity,
+        0.88
+    );
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 100%;
+    padding: clamp(12px, 2.2vw, 26px);
+    gap: 14px;
+    text-align: center;
+    box-sizing: border-box;
+    color: var(--app-body-color, var(--mat-sys-on-surface-variant));
+
+    img {
+        width: min(100%, var(--error-view-illustration-size));
+        height: auto;
+        filter: invert(80%);
+    }
+}
+
+.icon {
+    font-size: 64px;
+    height: 64px;
+    width: 64px;
+}
+
+.error-view--empty-category .error-view__illustration {
+    margin-top: clamp(0px, 1vh, 8px);
+}
+
+.error-view--text-only {
+    gap: 6px;
+}
+
+.error-view__copy {
+    max-width: var(--error-view-copy-width);
+    display: grid;
+    gap: var(--error-view-copy-gap);
+}
+
+.error-view__title {
+    margin: 0;
+    font-size: var(--error-view-title-size);
+    font-weight: var(--error-view-title-weight);
+    line-height: 1.12;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+    letter-spacing: var(--error-view-title-spacing);
+    text-wrap: balance;
+}
+
+.error-view__description {
+    margin: 0;
+    font-size: var(--error-view-description-size);
+    line-height: var(--error-view-description-line-height);
+    color: inherit;
+    opacity: var(--error-view-description-opacity);
+    text-wrap: balance;
+}
+
+@media (max-width: 1024px) {
+    .error-view {
+        --error-view-title-size: var(--error-empty-title-size, 1.4rem);
+        --error-view-description-size: var(
+            --error-empty-description-size,
+            0.92rem
+        );
+    }
+}
+
+::ng-deep {
+    .dark-theme {
+        .error-view {
+            img {
+                filter: invert(10%) !important;
+            }
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.ts b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.ts
new file mode 100644
index 0000000..8a8aaf8
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-error-view.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-workspace-context-error-view',
+    imports: [MatIcon],
+    templateUrl: './workspace-context-error-view.component.html',
+    styleUrl: './workspace-context-error-view.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkspaceContextErrorViewComponent {
+    readonly description = input<string | undefined>(undefined);
+    readonly showIllustration = input(true);
+    readonly showActionButtons = input(false);
+    readonly title = input<string | undefined>(undefined);
+    readonly viewType = input<'ERROR' | 'EMPTY_CATEGORY' | 'NO_SEARCH_RESULTS'>(
+        'ERROR'
+    );
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-collection-context-panel.component.ts b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-collection-context-panel.component.ts
new file mode 100644
index 0000000..70e0bab
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-collection-context-panel.component.ts
@@ -0,0 +1,74 @@
+import { Component, computed, inject } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PortalCollectionContextService } from '@iptvnator/portal/shared/util';
+import { WorkspaceContextCategoryViewComponent } from './components/workspace-context-category-view.component';
+
+/**
+ * Context panel rendered in the workspace-shell aside for
+ * collection-backed workspace pages such as downloads.
+ *
+ * Reads categories from PortalCollectionContextService (populated by the
+ * active routed collection page) and emits
+ * category selections back through the same service.
+ */
+@Component({
+    selector: 'app-workspace-collection-context-panel',
+    imports: [TranslatePipe, WorkspaceContextCategoryViewComponent],
+    template: `
+        <div class="context-column">
+            <header class="context-header">
+                <div class="context-header__top">
+                    <h2>
+                        {{
+                            selectedCategory()?.category_name ||
+                                ('WORKSPACE.CONTEXT.FILTER_BY_TYPE' | translate)
+                        }}
+                    </h2>
+                </div>
+                @if (selectedCount() !== null) {
+                    <span class="context-header__badge">
+                        @if (selectedCount() === 1) {
+                            {{ 'WORKSPACE.CONTEXT.ITEM_COUNT_ONE' | translate }}
+                        } @else {
+                            {{
+                                'WORKSPACE.CONTEXT.ITEM_COUNT_OTHER'
+                                    | translate: { count: selectedCount() }
+                            }}
+                        }
+                    </span>
+                }
+            </header>
+
+            <div class="context-divider"></div>
+
+            <app-workspace-context-category-view
+                [items]="ctx.categories()"
+                [selectedCategoryId]="ctx.selectedCategoryId()"
+                (categoryClicked)="onCategoryClicked($event)"
+            />
+        </div>
+    `,
+    styleUrl: './workspace-context-panel.component.scss',
+})
+export class WorkspaceCollectionContextPanelComponent {
+    readonly ctx = inject(PortalCollectionContextService);
+
+    readonly selectedCategory = computed(() => {
+        const categories = this.ctx.categories();
+        return categories.find(
+            (c) => c.category_id === this.ctx.selectedCategoryId()
+        );
+    });
+
+    readonly selectedCount = computed(
+        () => this.selectedCategory()?.count ?? null
+    );
+
+    onCategoryClicked(item: {
+        category_id?: string | number;
+        id?: string | number;
+    }): void {
+        const id = String(item.category_id ?? item.id ?? 'all');
+        this.ctx.setCategoryId(id);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.html b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.html
new file mode 100644
index 0000000..8f0ae7f
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.html
@@ -0,0 +1,132 @@
+<div class="context-column">
+    <header class="context-header">
+        <div class="context-header__top">
+            <h2>{{ title() | translate }}</h2>
+            <div class="context-header__actions">
+                @if (canSearchCategories()) {
+                    <button
+                        type="button"
+                        mat-icon-button
+                        class="context-header__action"
+                        [class.context-header__action--active]="isSearchOpen()"
+                        (click)="toggleCategorySearch()"
+                        [matTooltip]="'WORKSPACE.CONTEXT.SEARCH' | translate"
+                        [attr.aria-label]="
+                            'WORKSPACE.CONTEXT.SEARCH' | translate
+                        "
+                    >
+                        <mat-icon>search</mat-icon>
+                    </button>
+                }
+                @if (isXtreamCategories()) {
+                    <button
+                        type="button"
+                        mat-icon-button
+                        class="context-header__action"
+                        (click)="openManageCategories()"
+                        [disabled]="!canManageXtreamCategories()"
+                        [matTooltip]="
+                            'WORKSPACE.CONTEXT.MANAGE_CATEGORIES' | translate
+                        "
+                        [attr.aria-label]="
+                            'WORKSPACE.CONTEXT.MANAGE_CATEGORIES' | translate
+                        "
+                    >
+                        <mat-icon>tune</mat-icon>
+                    </button>
+                }
+            </div>
+        </div>
+        <!-- @if (subtitle(); as text) {
+            <span class="context-header__badge">{{ text }}</span>
+        } -->
+    </header>
+
+    @if (isSearchOpen()) {
+        <label class="context-search">
+            <mat-icon class="context-search__icon">search</mat-icon>
+            <input
+                #searchInput
+                type="search"
+                spellcheck="false"
+                [value]="categorySearchTerm()"
+                (input)="onSearchInput($event)"
+                [placeholder]="
+                    'WORKSPACE.CONTEXT.SEARCH_CATEGORIES' | translate
+                "
+                [attr.aria-label]="
+                    'WORKSPACE.CONTEXT.SEARCH_CATEGORIES' | translate
+                "
+            />
+            @if (categorySearchTerm()) {
+                <button
+                    type="button"
+                    mat-icon-button
+                    class="context-search__clear"
+                    (click)="clearCategorySearch()"
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+        </label>
+    } @else {
+        <div class="context-divider"></div>
+    }
+
+    @if (isXtreamCategories()) {
+        @if (isXtreamCategoryLoading()) {
+            <div class="context-skeleton" aria-hidden="true">
+                @for (row of skeletonRows; track row) {
+                    <div class="context-skeleton__row">
+                        <span class="context-skeleton__dot"></span>
+                        <span
+                            class="context-skeleton__label"
+                            [style.width.%]="skeletonLabelWidths[row]"
+                        ></span>
+                        <span class="context-skeleton__count"></span>
+                    </div>
+                }
+            </div>
+        } @else {
+            <app-workspace-context-category-view
+                [items]="filteredXtreamCategories()"
+                [selectedCategoryId]="xtreamSelectedCategoryId()"
+                [itemCounts]="xtreamCategoryItemCounts()"
+                [showCounts]="true"
+                [countDisplayMode]="xtreamCountDisplayMode()"
+                [interactionEnabled]="isXtreamCategoryInteractionEnabled()"
+                [statusText]="xtreamStatusText()"
+                (categoryClicked)="onXtreamCategoryClicked($event)"
+            />
+        }
+    } @else if (isStalkerCategories()) {
+        @if (isStalkerCategoryLoading()) {
+            <div class="context-skeleton" aria-hidden="true">
+                @for (row of skeletonRows; track row) {
+                    <div class="context-skeleton__row">
+                        <span class="context-skeleton__dot"></span>
+                        <span
+                            class="context-skeleton__label"
+                            [style.width.%]="skeletonLabelWidths[row]"
+                        ></span>
+                        <span class="context-skeleton__count"></span>
+                    </div>
+                }
+            </div>
+        } @else if (isStalkerCategoryFailed()) {
+            <app-workspace-context-error-view
+                [title]="'WORKSPACE.CONTEXT.LOAD_CATEGORIES_ERROR' | translate"
+                [description]="
+                    'WORKSPACE.CONTEXT.LOAD_CATEGORIES_ERROR_HINT' | translate
+                "
+                [showActionButtons]="false"
+            />
+        } @else {
+            <app-workspace-context-category-view
+                [items]="filteredStalkerCategories()"
+                [selectedCategoryId]="$any(stalkerSelectedCategoryId())"
+                (categoryClicked)="onStalkerCategoryClicked($any($event))"
+            />
+        }
+    }
+</div>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
new file mode 100644
index 0000000..591ccf1
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
@@ -0,0 +1,260 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+.context-column {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+.context-header {
+    padding: 4px 6px 10px;
+    flex-shrink: 0;
+}
+
+.context-header__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    h2 {
+        margin: 0;
+        font-size: 0.94rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--mat-sys-on-surface);
+    }
+}
+
+.context-header__actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+}
+
+.context-header__action {
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    flex-shrink: 0;
+    padding: 0;
+
+    &[disabled] {
+        opacity: 0.48;
+    }
+
+    &--active mat-icon {
+        color: var(--mat-sys-primary);
+    }
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        color: var(--mat-sys-on-surface-variant);
+    }
+}
+
+.context-header__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 5px;
+    padding: 2px 0;
+    border-radius: 999px;
+    background: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface-variant);
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.context-header p {
+    margin: 4px 0 0;
+    font-size: 0.78rem;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+// ─── Search Bar ──────────────────────────────────────────────────────────────
+.context-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 6px 6px;
+    padding: 0 10px;
+    min-height: 36px;
+    border-radius: 10px;
+    border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+    background: var(--app-search-bg, var(--mat-sys-surface-container));
+    flex-shrink: 0;
+    cursor: text;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:focus-within {
+        border-color: var(--mat-sys-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    }
+}
+
+.context-search__icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--mat-sys-on-surface-variant);
+    flex-shrink: 0;
+}
+
+.context-search input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--mat-sys-on-surface);
+    font: inherit;
+    font-size: 0.84rem;
+    width: 100%;
+    min-width: 0;
+
+    &::placeholder {
+        color: var(--mat-sys-on-surface-variant);
+        opacity: 0.6;
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}
+
+.context-search__clear {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    line-height: 24px;
+    flex-shrink: 0;
+    padding: 0;
+
+    mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+.context-divider {
+    height: 1px;
+    background: var(--mat-sys-outline-variant);
+    margin: 0 0 6px;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+// ─── Category List ────────────────────────────────────────────────────────────
+app-workspace-context-category-view {
+    display: block;
+    min-height: 0;
+    height: 100%;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--mat-sys-outline-variant) transparent;
+}
+
+.context-skeleton {
+    display: grid;
+    gap: 8px;
+    padding: 4px 6px 2px;
+    overflow: hidden;
+}
+
+.context-skeleton__row {
+    display: grid;
+    grid-template-columns: 12px minmax(0, 1fr) 28px;
+    align-items: center;
+    gap: 10px;
+    min-height: 36px;
+    padding: 0 10px;
+    border-radius: 12px;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
+        var(--app-widget-bg, var(--mat-sys-surface-container)) 12%
+    );
+    border: 1px solid
+        color-mix(
+            in srgb,
+            var(--app-widget-header-border, var(--mat-sys-outline-variant)) 96%,
+            transparent
+        );
+}
+
+.context-skeleton__dot,
+.context-skeleton__label,
+.context-skeleton__count {
+    position: relative;
+    overflow: hidden;
+    background: color-mix(
+        in srgb,
+        var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
+        var(--app-body-color, var(--mat-sys-on-surface-variant)) 48%
+    );
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            100deg,
+            transparent 8%,
+            color-mix(
+                    in srgb,
+                    var(--app-heading-color, var(--mat-sys-on-surface)) 18%,
+                    transparent
+                )
+                44%,
+            transparent 74%
+        );
+        transform: translateX(-120%);
+        animation: context-skeleton-shimmer 1.15s ease-in-out infinite;
+    }
+}
+
+.context-skeleton__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 999px;
+}
+
+.context-skeleton__label {
+    height: 9px;
+    border-radius: 999px;
+}
+
+.context-skeleton__count {
+    justify-self: end;
+    width: 22px;
+    height: 9px;
+    border-radius: 999px;
+}
+
+@keyframes context-skeleton-shimmer {
+    100% {
+        transform: translateX(120%);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.spec.ts
new file mode 100644
index 0000000..05db31d
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.spec.ts
@@ -0,0 +1,197 @@
+import { computed, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import {
+    XtreamContentLoadState,
+    XtreamStore,
+} from '@iptvnator/portal/xtream/data-access';
+import { WorkspaceContextPanelComponent } from './workspace-context-panel.component';
+
+const translations: Record<string, string> = {
+    'WORKSPACE.CONTEXT.MANAGE_CATEGORIES': 'Manage categories',
+    'WORKSPACE.CONTEXT.XTREAM_SYNCING_LIVE': 'Syncing live categories...',
+    'WORKSPACE.CONTEXT.XTREAM_SYNCING_MOVIES': 'Syncing movie categories...',
+    'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING':
+        'Fetching playlist data from source...',
+};
+
+describe('WorkspaceContextPanelComponent', () => {
+    let fixture: ComponentFixture<WorkspaceContextPanelComponent>;
+    const xtreamCategories = signal([
+        { id: 1, name: 'News' },
+        { id: 2, name: 'Sports' },
+    ]);
+    const xtreamCategoryItemCounts = signal(new Map<number, number>());
+    const xtreamSelectedCategoryId = signal<number | null>(null);
+    const xtreamSelectedTypeContentState =
+        signal<XtreamContentLoadState>('loading');
+    const xtreamImportPhase = signal<string | null>('loading-live');
+    const xtreamIsLoadingCategories = signal(false);
+
+    const xtreamStore = {
+        getCategoriesBySelectedType: xtreamCategories,
+        getCategoryItemCounts: xtreamCategoryItemCounts,
+        selectedCategoryId: xtreamSelectedCategoryId,
+        selectedTypeContentState: xtreamSelectedTypeContentState,
+        selectedTypeContentReady: computed(
+            () => xtreamSelectedTypeContentState() === 'ready'
+        ),
+        selectedTypeCountsReady: computed(
+            () => xtreamSelectedTypeContentState() === 'ready'
+        ),
+        currentImportPhase: xtreamImportPhase,
+        isLoadingCategories: xtreamIsLoadingCategories,
+        setSelectedItem: jest.fn(),
+        setSelectedCategory: jest.fn(),
+        reloadCategories: jest.fn(),
+    };
+    const stalkerStore = {
+        getCategoryResource: signal([]),
+        selectedCategoryId: signal<string | null>(null),
+        isCategoryResourceLoading: signal(false),
+        isCategoryResourceFailed: signal(false),
+        setSelectedCategory: jest.fn(),
+        setPage: jest.fn(),
+        clearSelectedItem: jest.fn(),
+    };
+    const router = {
+        navigate: jest.fn(),
+    };
+    const dialog = {
+        open: jest.fn(),
+    };
+
+    beforeEach(async () => {
+        xtreamCategories.set([
+            { id: 1, name: 'News' },
+            { id: 2, name: 'Sports' },
+        ]);
+        xtreamCategoryItemCounts.set(new Map());
+        xtreamSelectedCategoryId.set(null);
+        xtreamSelectedTypeContentState.set('loading');
+        xtreamImportPhase.set('loading-live');
+        xtreamIsLoadingCategories.set(false);
+        xtreamStore.setSelectedItem.mockClear();
+        xtreamStore.setSelectedCategory.mockClear();
+        xtreamStore.reloadCategories.mockClear();
+        router.navigate.mockClear();
+        dialog.open.mockClear();
+
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceContextPanelComponent, NoopAnimationsModule],
+            providers: [
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => translations[key] ?? key,
+                        get: (key: string) => of(translations[key] ?? key),
+                        stream: (key: string) => of(translations[key] ?? key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+                {
+                    provide: XtreamStore,
+                    useValue: xtreamStore,
+                },
+                {
+                    provide: StalkerStore,
+                    useValue: stalkerStore,
+                },
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: MatDialog,
+                    useValue: dialog,
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(WorkspaceContextPanelComponent);
+        fixture.componentRef.setInput('context', {
+            provider: 'xtreams',
+            playlistId: 'playlist-1',
+        });
+    });
+
+    it('renders loading meta and blocks xtream category clicks until counts are ready', () => {
+        fixture.componentRef.setInput('section', 'live');
+        fixture.detectChanges();
+
+        const countPlaceholders = fixture.nativeElement.querySelectorAll(
+            '.item-count--loading'
+        );
+        const categoryButtons = Array.from(
+            fixture.nativeElement.querySelectorAll('.category-item')
+        ) as HTMLButtonElement[];
+        const status = fixture.nativeElement.querySelector(
+            '.context-inline-status'
+        ) as HTMLElement | null;
+        const manageButton = fixture.nativeElement.querySelector(
+            '.context-header__action'
+        ) as HTMLButtonElement | null;
+
+        expect(countPlaceholders).toHaveLength(2);
+        expect(categoryButtons.every((button) => button.disabled)).toBe(true);
+        expect(status?.textContent).toContain('Syncing live categories...');
+        expect(status?.textContent).toContain(
+            'Fetching playlist data from source...'
+        );
+        expect(manageButton?.disabled).toBe(true);
+
+        categoryButtons[0]?.click();
+
+        expect(xtreamStore.setSelectedItem).not.toHaveBeenCalled();
+        expect(xtreamStore.setSelectedCategory).not.toHaveBeenCalled();
+        expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('shows real counts and enables navigation once the selected xtream type is ready', () => {
+        fixture.componentRef.setInput('section', 'vod');
+        xtreamSelectedTypeContentState.set('ready');
+        xtreamImportPhase.set(null);
+        xtreamCategoryItemCounts.set(
+            new Map([
+                [1, 3],
+                [2, 0],
+            ])
+        );
+        fixture.detectChanges();
+
+        const countTexts = Array.from(
+            fixture.nativeElement.querySelectorAll('.item-count')
+        ).map((element: Element) => element.textContent?.trim());
+        const categoryButtons = Array.from(
+            fixture.nativeElement.querySelectorAll('.category-item')
+        ) as HTMLButtonElement[];
+        const manageButton = fixture.nativeElement.querySelector(
+            '.context-header__action'
+        ) as HTMLButtonElement | null;
+
+        expect(countTexts).toEqual(['3', '0']);
+        expect(categoryButtons.every((button) => !button.disabled)).toBe(true);
+        expect(manageButton?.disabled).toBe(false);
+
+        categoryButtons[1]?.click();
+
+        expect(xtreamStore.setSelectedItem).toHaveBeenCalledWith(null);
+        expect(xtreamStore.setSelectedCategory).toHaveBeenCalledWith(2);
+        expect(router.navigate).toHaveBeenCalledWith([
+            '/workspace',
+            'xtreams',
+            'playlist-1',
+            'vod',
+            2,
+        ]);
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.ts b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.ts
new file mode 100644
index 0000000..889e1ef
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.ts
@@ -0,0 +1,375 @@
+import {
+    Component,
+    computed,
+    DestroyRef,
+    effect,
+    inject,
+    input,
+    signal,
+    viewChild,
+    ElementRef,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatIconButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { WorkspaceContextCategoryViewComponent } from './components/workspace-context-category-view.component';
+import { WorkspaceContextErrorViewComponent } from './components/workspace-context-error-view.component';
+
+type WorkspaceProvider = 'xtreams' | 'stalker' | 'playlists';
+
+interface WorkspaceContextRoute {
+    provider: WorkspaceProvider;
+    playlistId: string;
+}
+
+interface XtreamCategoryLike {
+    id?: number | string;
+    category_id?: number | string;
+}
+
+@Component({
+    selector: 'app-workspace-context-panel',
+    imports: [
+        MatIconButton,
+        MatIcon,
+        MatTooltip,
+        TranslatePipe,
+        WorkspaceContextCategoryViewComponent,
+        WorkspaceContextErrorViewComponent,
+    ],
+    templateUrl: './workspace-context-panel.component.html',
+    styleUrl: './workspace-context-panel.component.scss',
+})
+export class WorkspaceContextPanelComponent {
+    private readonly router = inject(Router);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly stalkerStore = inject(StalkerStore);
+    private readonly dialog = inject(MatDialog);
+    private readonly destroyRef = inject(DestroyRef);
+    private readonly translate = inject(TranslateService);
+
+    readonly context = input.required<WorkspaceContextRoute>();
+    readonly section = input.required<string>();
+
+    readonly isXtreamCategories = computed(
+        () =>
+            this.context().provider === 'xtreams' &&
+            (this.section() === 'vod' ||
+                this.section() === 'series' ||
+                this.section() === 'live')
+    );
+    readonly isStalkerCategories = computed(
+        () =>
+            this.context().provider === 'stalker' &&
+            (this.section() === 'vod' ||
+                this.section() === 'series' ||
+                this.section() === 'itv')
+    );
+
+    readonly xtreamCategories = this.xtreamStore.getCategoriesBySelectedType;
+    readonly xtreamCategoryItemCounts = this.xtreamStore.getCategoryItemCounts;
+    readonly xtreamSelectedCategoryId = this.xtreamStore.selectedCategoryId;
+    readonly xtreamSelectedTypeContentState =
+        this.xtreamStore.selectedTypeContentState;
+    readonly xtreamSelectedTypeContentReady =
+        this.xtreamStore.selectedTypeContentReady;
+    readonly xtreamSelectedTypeCountsReady =
+        this.xtreamStore.selectedTypeCountsReady;
+    readonly xtreamImportPhase = this.xtreamStore.currentImportPhase;
+    readonly isXtreamCategoryLoading = computed(
+        () =>
+            this.isXtreamCategories() &&
+            this.xtreamStore.isLoadingCategories() &&
+            this.xtreamCategories().length === 0
+    );
+    readonly isXtreamCategoryInteractionEnabled = computed(
+        () =>
+            !this.isXtreamCategoryLoading() &&
+            this.xtreamSelectedTypeContentReady()
+    );
+    readonly xtreamCountDisplayMode = computed<'loading' | 'ready'>(() =>
+        this.isXtreamCategoryInteractionEnabled() ? 'ready' : 'loading'
+    );
+    readonly canManageXtreamCategories = computed(
+        () =>
+            this.isXtreamCategories() &&
+            this.xtreamCategories().length > 0 &&
+            this.xtreamSelectedTypeCountsReady()
+    );
+    readonly xtreamStatusText = computed(() => {
+        if (
+            !this.isXtreamCategories() ||
+            this.isXtreamCategoryLoading() ||
+            this.xtreamSelectedTypeContentState() !== 'loading'
+        ) {
+            return '';
+        }
+
+        const syncLabel = this.translate.instant(
+            this.getXtreamSyncLabelKey(this.section())
+        );
+        const phaseKey = this.getXtreamImportPhaseLabelKey(
+            this.xtreamImportPhase()
+        );
+        const phaseLabel = phaseKey ? this.translate.instant(phaseKey) : '';
+
+        return phaseLabel ? `${syncLabel} ${phaseLabel}` : syncLabel;
+    });
+
+    readonly stalkerCategories = this.stalkerStore.getCategoryResource;
+    readonly stalkerSelectedCategoryId = this.stalkerStore.selectedCategoryId;
+    readonly isStalkerCategoryLoading =
+        this.stalkerStore.isCategoryResourceLoading;
+    readonly isStalkerCategoryFailed =
+        this.stalkerStore.isCategoryResourceFailed;
+    readonly skeletonRows = Array.from({ length: 14 }, (_, index) => index);
+    readonly skeletonLabelWidths = [
+        78, 66, 74, 59, 83, 69, 76, 62, 81, 64, 72, 67, 79, 61,
+    ];
+
+    readonly searchInput =
+        viewChild<ElementRef<HTMLInputElement>>('searchInput');
+    readonly isSearchOpen = signal(false);
+    readonly categorySearchTerm = signal('');
+
+    readonly canSearchCategories = computed(
+        () =>
+            (this.isXtreamCategories() &&
+                this.xtreamCategories().length > 0) ||
+            (this.isStalkerCategories() &&
+                this.stalkerCategories().length > 0)
+    );
+
+    readonly filteredXtreamCategories = computed(() => {
+        const cats = this.xtreamCategories();
+        const term = this.categorySearchTerm().trim().toLowerCase();
+        if (!term) return cats;
+        return cats.filter((c) => {
+            const label =
+                (c as { category_name?: string }).category_name ??
+                (c as { name?: string }).name ??
+                '';
+            return label.toLowerCase().includes(term);
+        });
+    });
+
+    readonly filteredStalkerCategories = computed(() => {
+        const cats = this.stalkerCategories();
+        const term = this.categorySearchTerm().trim().toLowerCase();
+        if (!term) return cats;
+        return cats.filter((c) => {
+            const label =
+                (c as { name?: string }).name ??
+                (c as { category_name?: string }).category_name ??
+                '';
+            return label.toLowerCase().includes(term);
+        });
+    });
+
+    readonly title = computed(() => {
+        if (this.isXtreamCategories()) {
+            if (this.section() === 'vod') {
+                return 'WORKSPACE.CONTEXT.MOVIE_CATEGORIES';
+            }
+            if (this.section() === 'series') {
+                return 'WORKSPACE.CONTEXT.SERIES_CATEGORIES';
+            }
+            return 'WORKSPACE.CONTEXT.LIVE_CATEGORIES';
+        }
+
+        if (this.isStalkerCategories()) {
+            if (this.section() === 'vod') {
+                return 'WORKSPACE.CONTEXT.MOVIE_CATEGORIES';
+            }
+            if (this.section() === 'series') {
+                return 'WORKSPACE.CONTEXT.SERIES_CATEGORIES';
+            }
+            return 'WORKSPACE.CONTEXT.LIVE_CATEGORIES';
+        }
+
+        return 'WORKSPACE.CONTEXT.CATEGORIES';
+    });
+
+    readonly subtitle = computed(() => {
+        if (this.isXtreamCategories()) {
+            return 'WORKSPACE.CONTEXT.XTREAM_SOURCE';
+        }
+        if (this.isStalkerCategories()) {
+            return 'WORKSPACE.CONTEXT.STALKER_PORTAL';
+        }
+        return '';
+    });
+
+    constructor() {
+        effect(() => {
+            if (this.isSearchOpen()) {
+                queueMicrotask(() => {
+                    this.searchInput()?.nativeElement.focus();
+                });
+            }
+        });
+    }
+
+    toggleCategorySearch(): void {
+        const opening = !this.isSearchOpen();
+        this.isSearchOpen.set(opening);
+        if (!opening) {
+            this.categorySearchTerm.set('');
+        }
+    }
+
+    onSearchInput(event: Event): void {
+        const value = (event.target as HTMLInputElement).value;
+        this.categorySearchTerm.set(value);
+    }
+
+    clearCategorySearch(): void {
+        this.categorySearchTerm.set('');
+        this.searchInput()?.nativeElement.focus();
+    }
+
+    openManageCategories(): void {
+        if (!this.canManageXtreamCategories()) {
+            return;
+        }
+
+        const context = this.context();
+        const section = this.section();
+        const contentType =
+            section === 'series'
+                ? 'series'
+                : section === 'live'
+                  ? 'live'
+                  : 'vod';
+
+        void import('@iptvnator/portal/xtream/feature').then(
+            ({ CategoryManagementDialogComponent }) => {
+                const dialogRef = this.dialog.open(
+                    CategoryManagementDialogComponent,
+                    {
+                        data: {
+                            playlistId: context.playlistId,
+                            contentType,
+                            itemCounts: this.xtreamStore.getCategoryItemCounts(),
+                        },
+                        width: '500px',
+                        maxHeight: '90vh',
+                    }
+                );
+
+                dialogRef
+                    .afterClosed()
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((result) => {
+                        if (result) {
+                            this.xtreamStore.reloadCategories();
+                        }
+                    });
+            }
+        );
+    }
+
+    onXtreamCategoryClicked(category: XtreamCategoryLike): void {
+        if (!this.isXtreamCategoryInteractionEnabled()) {
+            return;
+        }
+
+        const context = this.context();
+        const section = this.section();
+        const rawCategoryId = category.category_id ?? category.id;
+        if (rawCategoryId === undefined || rawCategoryId === null) {
+            return;
+        }
+        const numericCategoryId = Number(rawCategoryId);
+        if (Number.isNaN(numericCategoryId)) {
+            return;
+        }
+        const categoryId = numericCategoryId;
+
+        this.xtreamStore.setSelectedItem(null);
+        this.xtreamStore.setSelectedCategory(categoryId);
+
+        if (section === 'live') {
+            return;
+        }
+
+        this.router.navigate([
+            '/workspace',
+            'xtreams',
+            context.playlistId,
+            section,
+            categoryId,
+        ]);
+    }
+
+    onStalkerCategoryClicked(item: { category_id?: string | number }): void {
+        const context = this.context();
+        const section = this.section();
+        const categoryId = String(item.category_id ?? '*');
+
+        this.stalkerStore.setSelectedCategory(categoryId);
+        this.stalkerStore.setPage(0);
+        this.stalkerStore.clearSelectedItem();
+
+        if (section === 'itv') {
+            return;
+        }
+
+        if (categoryId === '*') {
+            this.router.navigate([
+                '/workspace',
+                'stalker',
+                context.playlistId,
+                section,
+            ]);
+            return;
+        }
+
+        this.router.navigate([
+            '/workspace',
+            'stalker',
+            context.playlistId,
+            section,
+            categoryId,
+        ]);
+    }
+
+    private getXtreamSyncLabelKey(section: string): string {
+        switch (section) {
+            case 'live':
+                return 'WORKSPACE.CONTEXT.XTREAM_SYNCING_LIVE';
+            case 'series':
+                return 'WORKSPACE.CONTEXT.XTREAM_SYNCING_SERIES';
+            case 'vod':
+            default:
+                return 'WORKSPACE.CONTEXT.XTREAM_SYNCING_MOVIES';
+        }
+    }
+
+    private getXtreamImportPhaseLabelKey(phase: string | null): string {
+        switch (phase) {
+            case 'preparing-content':
+                return 'WORKSPACE.SHELL.XTREAM_IMPORT_PREPARING';
+            case 'loading-categories':
+            case 'loading-live':
+            case 'loading-movies':
+            case 'loading-series':
+                return 'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING';
+            case 'saving-categories':
+            case 'saving-content':
+                return 'WORKSPACE.SHELL.XTREAM_IMPORT_SAVING';
+            case 'restoring-favorites':
+                return 'WORKSPACE.SHELL.XTREAM_IMPORT_RESTORING_FAVORITES';
+            case 'restoring-recently-viewed':
+                return 'WORKSPACE.SHELL.XTREAM_IMPORT_RESTORING_RECENT';
+            default:
+                return '';
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss
new file mode 100644
index 0000000..ea949a9
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss
@@ -0,0 +1,37 @@
+@use '../../nav-list.scss';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.panel-title {
+    margin: 0;
+    padding: 16px 16px 0;
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--mat-sys-on-surface);
+}
+
+.settings-panel-body {
+    flex: 1;
+    min-height: 0;
+    padding-top: 16px;
+}
+
+.settings-sections-list {
+    height: 100%;
+}
+
+.settings-panel-footer {
+    flex-shrink: 0;
+    padding: 12px 8px calc(20px + env(safe-area-inset-bottom, 0px));
+    border-top: 1px solid var(--app-separator);
+}
+
+.settings-section-item:hover:not(.active):not(.selected),
+.settings-back-button:hover:not(.active):not(.selected) {
+    background: var(--app-selection-surface);
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.ts b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.ts
new file mode 100644
index 0000000..b4d59da
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.ts
@@ -0,0 +1,47 @@
+import { Location } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { SettingsContextService } from '@iptvnator/workspace/shell/util';
+
+@Component({
+    selector: 'app-workspace-settings-context-panel',
+    imports: [MatIconModule, TranslateModule],
+    styleUrls: ['./workspace-settings-context-panel.component.scss'],
+    template: `
+        <h2 class="panel-title">{{ 'SETTINGS.TITLE' | translate }}</h2>
+        <div class="settings-panel-body">
+            <div class="nav-list settings-sections-list">
+                @for (section of ctx.sections(); track section.id) {
+                    <button
+                        type="button"
+                        class="nav-item settings-section-item"
+                        [class.active]="ctx.activeSection() === section.id"
+                        (click)="ctx.navigateToSection(section.id)"
+                    >
+                        <mat-icon>{{ section.icon }}</mat-icon>
+                        <span>{{ section.label | translate }}</span>
+                    </button>
+                }
+            </div>
+        </div>
+        <div class="settings-panel-footer">
+            <button
+                type="button"
+                class="nav-item settings-back-button"
+                (click)="onBack()"
+            >
+                <mat-icon>arrow_back</mat-icon>
+                <span>{{ 'SETTINGS.BACK_TO_HOME' | translate }}</span>
+            </button>
+        </div>
+    `,
+})
+export class WorkspaceSettingsContextPanelComponent {
+    readonly ctx = inject(SettingsContextService);
+    private readonly location = inject(Location);
+
+    onBack() {
+        this.location.back();
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.html
new file mode 100644
index 0000000..eb27456
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.html
@@ -0,0 +1,52 @@
+@if (variant() === 'sources' && hasPlaylists()) {
+    <aside
+        class="context-panel context-panel--sources"
+        appResizable
+        [minWidth]="220"
+        [maxWidth]="440"
+        [defaultWidth]="290"
+        storageKey="sidebar-width"
+    >
+        <app-workspace-sources-filters-panel />
+    </aside>
+} @else if (variant() === 'category') {
+    @if (context(); as context) {
+        @if (section(); as section) {
+            <aside
+                class="context-panel context-panel--route"
+                appResizable
+                [minWidth]="240"
+                [maxWidth]="560"
+                [defaultWidth]="300"
+                storageKey="sidebar-width"
+            >
+                <app-workspace-context-panel
+                    [context]="context"
+                    [section]="section"
+                />
+            </aside>
+        }
+    }
+} @else if (variant() === 'settings') {
+    <aside
+        class="context-panel context-panel--settings"
+        appResizable
+        [minWidth]="200"
+        [maxWidth]="400"
+        [defaultWidth]="260"
+        storageKey="sidebar-width"
+    >
+        <app-workspace-settings-context-panel />
+    </aside>
+} @else if (variant() === 'collection') {
+    <aside
+        class="context-panel context-panel--route"
+        appResizable
+        [minWidth]="200"
+        [maxWidth]="400"
+        [defaultWidth]="260"
+        storageKey="sidebar-width"
+    >
+        <app-workspace-collection-context-panel />
+    </aside>
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
new file mode 100644
index 0000000..3d54a79
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
@@ -0,0 +1,43 @@
+:host {
+    display: block;
+    min-width: 0;
+    min-height: 0;
+}
+
+.context-panel {
+    border-right: 1px solid var(--mat-sys-outline-variant);
+    background: var(--app-rail-bg, var(--mat-sys-surface-container-low));
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    height: 100%;
+    padding: 12px;
+    width: 300px;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.context-panel--route {
+    padding: 12px 10px 10px 12px;
+    overflow: visible;
+}
+
+.context-panel--sources {
+    padding: 12px 10px 10px 12px;
+    overflow: visible;
+}
+
+.context-panel--route app-workspace-context-panel {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.context-panel--sources app-workspace-sources-filters-panel {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.spec.ts
new file mode 100644
index 0000000..c0bf476
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.spec.ts
@@ -0,0 +1,109 @@
+import {
+    Component,
+    Directive,
+    input,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { WorkspaceShellContextSidebarComponent } from './workspace-shell-context-sidebar.component';
+
+@Directive({
+    selector: '[appResizable]',
+    standalone: true,
+})
+class MockResizableDirective {
+    readonly minWidth = input<number | null>(null);
+    readonly maxWidth = input<number | null>(null);
+    readonly defaultWidth = input<number | null>(null);
+    readonly storageKey = input<string | null>(null);
+}
+
+@Component({
+    selector: 'app-workspace-context-panel',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceContextPanelComponent {
+    readonly context = input.required<unknown>();
+    readonly section = input.required<string>();
+}
+
+@Component({
+    selector: 'app-workspace-collection-context-panel',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceCollectionContextPanelComponent {}
+
+@Component({
+    selector: 'app-workspace-settings-context-panel',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceSettingsContextPanelComponent {}
+
+@Component({
+    selector: 'app-workspace-sources-filters-panel',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceSourcesFiltersPanelComponent {}
+
+describe('WorkspaceShellContextSidebarComponent', () => {
+    let fixture: ComponentFixture<WorkspaceShellContextSidebarComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceShellContextSidebarComponent],
+        })
+            .overrideComponent(WorkspaceShellContextSidebarComponent, {
+                set: {
+                    imports: [
+                        MockResizableDirective,
+                        MockWorkspaceContextPanelComponent,
+                        MockWorkspaceCollectionContextPanelComponent,
+                        MockWorkspaceSettingsContextPanelComponent,
+                        MockWorkspaceSourcesFiltersPanelComponent,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(WorkspaceShellContextSidebarComponent);
+    });
+
+    it('renders the settings panel for the settings variant', () => {
+        fixture.componentRef.setInput('variant', 'settings');
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector(
+                'app-workspace-settings-context-panel'
+            )
+        ).not.toBeNull();
+    });
+
+    it('renders the route context panel for category routes', () => {
+        fixture.componentRef.setInput('variant', 'category');
+        fixture.componentRef.setInput('context', {
+            provider: 'xtreams',
+            playlistId: 'pl-1',
+        });
+        fixture.componentRef.setInput('section', 'vod');
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('app-workspace-context-panel')
+        ).not.toBeNull();
+    });
+
+    it('renders the shared collection panel for collection routes', () => {
+        fixture.componentRef.setInput('variant', 'collection');
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector(
+                'app-workspace-collection-context-panel'
+            )
+        ).not.toBeNull();
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.ts
new file mode 100644
index 0000000..087b4ea
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.ts
@@ -0,0 +1,35 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+} from '@angular/core';
+import { ResizableDirective } from 'components';
+import { PortalRailSection } from '@iptvnator/portal/shared/util';
+import {
+    WorkspacePortalContext,
+    WorkspaceShellContextPanel,
+} from '@iptvnator/workspace/shell/util';
+import { WorkspaceCollectionContextPanelComponent } from '../../../workspace-context-panel/workspace-collection-context-panel.component';
+import { WorkspaceContextPanelComponent } from '../../../workspace-context-panel/workspace-context-panel.component';
+import { WorkspaceSettingsContextPanelComponent } from '../../../workspace-context-panel/workspace-settings-context-panel.component';
+import { WorkspaceSourcesFiltersPanelComponent } from '../../../workspace-sources-filters-panel/workspace-sources-filters-panel.component';
+
+@Component({
+    selector: 'app-workspace-shell-context-sidebar',
+    imports: [
+        ResizableDirective,
+        WorkspaceCollectionContextPanelComponent,
+        WorkspaceContextPanelComponent,
+        WorkspaceSettingsContextPanelComponent,
+        WorkspaceSourcesFiltersPanelComponent,
+    ],
+    templateUrl: './workspace-shell-context-sidebar.component.html',
+    styleUrl: './workspace-shell-context-sidebar.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkspaceShellContextSidebarComponent {
+    readonly variant = input.required<WorkspaceShellContextPanel>();
+    readonly context = input<WorkspacePortalContext | null>(null);
+    readonly section = input<PortalRailSection | null>(null);
+    readonly hasPlaylists = input(true);
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html
new file mode 100644
index 0000000..046f477
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html
@@ -0,0 +1,141 @@
+<header class="workspace-header">
+    <app-playlist-switcher
+        class="playlist-switcher"
+        [currentTitle]="playlistTitle()"
+        [subtitle]="playlistSubtitle()"
+        [showPlaylistInfo]="canOpenPlaylistInfo()"
+        [showAccountInfo]="canOpenAccountInfo()"
+        [showAddPlaylist]="true"
+        [canRefreshActivePlaylist]="canRefreshPlaylist()"
+        [isRefreshingActivePlaylist]="isRefreshingPlaylist()"
+        (playlistInfoRequested)="onPlaylistInfoRequested()"
+        (accountInfoRequested)="onAccountInfoRequested()"
+        (addPlaylistRequested)="onAddPlaylistRequested()"
+        (refreshPlaylistRequested)="onRefreshPlaylistRequested()"
+    />
+
+    @if (!hasNoPlaylists() || showQuickPlayerSelect()) {
+        <div class="search-toolbar">
+            @if (showQuickPlayerSelect()) {
+                <mat-form-field
+                    class="quick-player-field"
+                    appearance="outline"
+                    subscriptSizing="dynamic"
+                >
+                    <mat-label>{{
+                        'WORKSPACE.SHELL.QUICK_PLAYER_LABEL' | translate
+                    }}</mat-label>
+                    <mat-select
+                        [value]="quickHeaderPlayerValue()"
+                        (selectionChange)="
+                            onQuickPlayerChange($event.value)
+                        "
+                        [attr.aria-label]="
+                            'WORKSPACE.SHELL.QUICK_PLAYER_LABEL' | translate
+                        "
+                    >
+                        <mat-option [value]="VideoPlayer.ArtPlayer">{{
+                            'WORKSPACE.SHELL.QUICK_PLAYER_ARTPLAYER' | translate
+                        }}</mat-option>
+                        <mat-option [value]="VideoPlayer.VLC">{{
+                            'WORKSPACE.SHELL.QUICK_PLAYER_VLC' | translate
+                        }}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            }
+            @if (!hasNoPlaylists()) {
+                <label class="search-field">
+                    <mat-icon>search</mat-icon>
+                    @if (searchScopeLabel()) {
+                        <span class="search-chip search-chip--scope">
+                            {{ searchScopeLabel() }}
+                        </span>
+                    }
+                    <input
+                        type="search"
+                        spellcheck="false"
+                        [value]="searchQuery()"
+                        (input)="onSearchInput($event)"
+                        (keydown.enter)="onSearchEnter($event)"
+                        [disabled]="!canUseSearch()"
+                        [placeholder]="searchPlaceholder() | translate"
+                        [attr.aria-label]="
+                            'WORKSPACE.SHELL.SEARCH_LABEL' | translate
+                        "
+                    />
+                    @if (searchStatusLabel()) {
+                        <span class="search-chip search-chip--status">
+                            {{ searchStatusLabel() }}
+                        </span>
+                    }
+                    <button
+                        type="button"
+                        class="command-trigger"
+                        (click)="onCommandPaletteRequested()"
+                        [matTooltip]="
+                            'WORKSPACE.SHELL.COMMAND_PALETTE_SHORTCUT'
+                                | translate
+                        "
+                        [attr.aria-label]="
+                            'WORKSPACE.SHELL.OPEN_COMMAND_PALETTE' | translate
+                        "
+                    >
+                        {{ commandShortcutLabel }}
+                    </button>
+                </label>
+            }
+        </div>
+    }
+
+    <div class="header-actions header-actions--leading">
+        <button
+            type="button"
+            mat-icon-button
+            (click)="onAddPlaylistRequested()"
+            [matTooltip]="'WORKSPACE.SHELL.ADD_PLAYLIST_ALL' | translate"
+            [attr.aria-label]="'WORKSPACE.SHELL.ADD_PLAYLIST' | translate"
+        >
+            <mat-icon>add</mat-icon>
+        </button>
+        @if (headerShortcut(); as action) {
+            <button
+                type="button"
+                class="header-shortcut"
+                mat-icon-button
+                (click)="onHeaderShortcutRequested()"
+                [matTooltip]="action.tooltipKey | translate"
+                [attr.aria-label]="action.ariaLabelKey | translate"
+            >
+                <mat-icon>{{ action.icon }}</mat-icon>
+            </button>
+        }
+    </div>
+
+    @if (isElectron()) {
+        <div class="header-actions header-actions--trailing">
+            <span class="download-btn-wrap">
+                @if (hasActiveDownloads()) {
+                    <span class="download-activity-bar" aria-hidden="true">
+                        <span class="download-activity-bar__fill"></span>
+                    </span>
+                }
+                <button
+                    type="button"
+                    class="header-shortcut"
+                    mat-icon-button
+                    [class.is-active]="isDownloadsView()"
+                    [class.has-activity]="hasActiveDownloads()"
+                    (click)="onDownloadsRequested()"
+                    [matTooltip]="
+                        'WORKSPACE.SHELL.RAIL_DOWNLOADS' | translate
+                    "
+                    [attr.aria-label]="
+                        'WORKSPACE.SHELL.OPEN_DOWNLOADS' | translate
+                    "
+                >
+                    <mat-icon>download</mat-icon>
+                </button>
+            </span>
+        </div>
+    }
+</header>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
new file mode 100644
index 0000000..06b9af8
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
@@ -0,0 +1,337 @@
+:host {
+    display: block;
+    min-width: 0;
+}
+
+.workspace-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 56px;
+    padding: 0 24px;
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
+    background: var(--app-header-bg, var(--mat-sys-surface-container-low));
+    app-region: drag;
+}
+
+.playlist-switcher {
+    width: min(260px, 32vw);
+    flex-shrink: 0;
+    app-region: no-drag;
+}
+
+.search-toolbar {
+    flex: 1;
+    min-width: 0;
+    max-width: 720px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    app-region: no-drag;
+}
+
+.quick-player-field {
+    flex: 0 0 auto;
+    width: min(168px, 28vw);
+
+    --mat-form-field-container-height: 40px;
+    --mat-form-field-container-vertical-padding: 0px;
+
+    ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+    }
+
+    ::ng-deep .mat-mdc-text-field-wrapper {
+        padding-bottom: 0;
+    }
+
+    ::ng-deep .mat-mdc-form-field-infix {
+        padding-top: 6px;
+        padding-bottom: 6px;
+        min-height: 36px;
+    }
+}
+
+.search-field {
+    flex: 1;
+    min-width: 0;
+    max-width: none;
+    height: 36px;
+    border-radius: 10px;
+    border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
+    background: var(--app-search-bg, var(--mat-sys-surface-container));
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    transition:
+        border-color 0.15s ease,
+        background-color 0.15s ease,
+        box-shadow 0.15s ease;
+    app-region: no-drag;
+
+    &:focus-within {
+        border-color: var(--mat-sys-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
+    }
+
+    mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        color: var(--mat-sys-on-surface-variant);
+        flex-shrink: 0;
+    }
+
+    .search-chip {
+        max-width: 200px;
+        padding: 0 10px;
+        height: 24px;
+        border-radius: 999px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--mat-sys-on-surface-variant);
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 76%,
+            transparent
+        );
+        border: 1px solid
+            color-mix(in srgb, var(--mat-sys-outline-variant) 82%, transparent);
+        font-size: 0.75rem;
+        font-weight: 600;
+        line-height: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 1;
+        min-width: 48px;
+    }
+
+    .search-chip--scope {
+        color: var(--mat-sys-on-surface);
+    }
+
+    .search-chip--status {
+        color: var(--app-selection-color, var(--mat-sys-primary));
+        background: color-mix(
+            in srgb,
+            var(--app-selection-surface, var(--mat-sys-primary-container)) 70%,
+            transparent
+        );
+        border-color: color-mix(
+            in srgb,
+            var(--app-selection-border, var(--mat-sys-primary)) 52%,
+            transparent
+        );
+    }
+
+    input {
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--mat-sys-on-surface);
+        font: inherit;
+        font-size: 0.875rem;
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        &::placeholder {
+            color: var(--mat-sys-on-surface-variant);
+            opacity: 0.7;
+        }
+    }
+
+    .command-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 22px;
+        min-width: 36px;
+        padding: 0 6px;
+        margin-right: -2px;
+        color: var(--mat-sys-on-surface-variant);
+        background: color-mix(
+            in srgb,
+            var(--mat-sys-surface-container-high) 76%,
+            transparent
+        );
+        border: 1px solid
+            color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
+        border-radius: 5px;
+        font-family: inherit;
+        font-size: 0.7rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        cursor: pointer;
+        flex-shrink: 0;
+        transition:
+            color 0.15s ease,
+            background 0.15s ease,
+            border-color 0.15s ease;
+
+        &:hover {
+            background: var(--mat-sys-surface-container-highest);
+            color: var(--mat-sys-on-surface);
+            border-color: color-mix(
+                in srgb,
+                var(--mat-sys-outline-variant) 100%,
+                transparent
+            );
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--mat-sys-primary);
+            outline-offset: 1px;
+        }
+    }
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    app-region: no-drag;
+
+    button,
+    a {
+        color: var(--mat-sys-on-surface-variant);
+        border-radius: 8px;
+        transition:
+            color 0.15s ease,
+            background 0.15s ease;
+
+        &:hover {
+            color: var(--mat-sys-on-surface);
+            background: var(--mat-sys-surface-container);
+        }
+
+        &.is-active {
+            color: var(--app-selection-color);
+            background: linear-gradient(
+                145deg,
+                var(--app-selection-surface-strong),
+                var(--app-selection-surface)
+            );
+            box-shadow:
+                inset 0 0 0 1px var(--app-selection-border),
+                0 10px 20px -16px var(--app-selection-glow);
+        }
+    }
+}
+
+.header-actions--leading {
+    margin-left: -4px;
+}
+
+.header-actions--trailing {
+    margin-left: auto;
+    padding-left: 8px;
+    border-left: 1px solid var(--mat-sys-outline-variant);
+    app-region: no-drag;
+}
+
+// ─── Download Activity Indicator ─────────────────────────────────────────────
+.download-btn-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.download-activity-bar {
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 18px;
+    height: 2px;
+    border-radius: 1px;
+    background: rgba(255, 255, 255, 0.08);
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.download-activity-bar__fill {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: -50%;
+    width: 50%;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--app-selection-color, #78adff);
+    animation: download-bar-slide 1.4s ease-in-out infinite;
+}
+
+@keyframes download-bar-slide {
+    0% {
+        left: -50%;
+    }
+
+    50% {
+        left: 100%;
+    }
+
+    100% {
+        left: -50%;
+    }
+}
+
+@media (max-width: 960px) {
+    .search-field {
+        min-width: 120px;
+        flex: 1 1 150px;
+
+        .search-chip {
+            max-width: 150px;
+        }
+    }
+}
+
+@media (max-width: 780px) {
+    .workspace-header {
+        padding-inline: 10px;
+        gap: 10px;
+    }
+
+    .playlist-switcher {
+        width: 190px;
+    }
+
+    .header-actions {
+        gap: 0;
+    }
+
+    .search-field {
+        gap: 6px;
+        padding-inline: 10px;
+
+        .search-chip {
+            max-width: 116px;
+            padding-inline: 8px;
+        }
+    }
+}
+
+@media (max-width: 640px) {
+    .playlist-switcher {
+        width: auto;
+        min-width: 140px;
+        flex: 1;
+    }
+
+    .search-field {
+        .search-chip--status {
+            display: none;
+        }
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.spec.ts
new file mode 100644
index 0000000..b2257bb
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.spec.ts
@@ -0,0 +1,147 @@
+import {
+    Component,
+    input,
+    output,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { TranslatePipe } from '@ngx-translate/core';
+import { WorkspaceShellHeaderComponent } from './workspace-shell-header.component';
+
+@Component({
+    selector: 'app-playlist-switcher',
+    template: '',
+    standalone: true,
+})
+class MockPlaylistSwitcherComponent {
+    readonly currentTitle = input.required<string>();
+    readonly subtitle = input('');
+    readonly showPlaylistInfo = input(false);
+    readonly showAccountInfo = input(false);
+    readonly showAddPlaylist = input(false);
+    readonly playlistInfoRequested = output<void>();
+    readonly accountInfoRequested = output<void>();
+    readonly addPlaylistRequested = output<void>();
+}
+
+describe('WorkspaceShellHeaderComponent', () => {
+    let fixture: ComponentFixture<WorkspaceShellHeaderComponent>;
+    let component: WorkspaceShellHeaderComponent;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceShellHeaderComponent, NoopAnimationsModule],
+            providers: [
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+            ],
+        })
+            .overrideComponent(WorkspaceShellHeaderComponent, {
+                set: {
+                    imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatTooltip,
+                        MockPlaylistSwitcherComponent,
+                        TranslatePipe,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(WorkspaceShellHeaderComponent);
+        component = fixture.componentInstance;
+        fixture.componentRef.setInput('playlistTitle', 'Playlist A');
+        fixture.componentRef.setInput('playlistSubtitle', 'Subtitle');
+        fixture.componentRef.setInput('searchQuery', 'neo');
+        fixture.componentRef.setInput('canUseSearch', true);
+        fixture.componentRef.setInput(
+            'searchPlaceholder',
+            'WORKSPACE.SHELL.SEARCH_PLAYLIST_PLACEHOLDER'
+        );
+        fixture.detectChanges();
+    });
+
+    it('emits search input changes as user types', () => {
+        const emitted: string[] = [];
+        component.searchChanged.subscribe((value) => emitted.push(value));
+        const input: HTMLInputElement =
+            fixture.nativeElement.querySelector('input[type="search"]');
+
+        input.value = 'matrix';
+        input.dispatchEvent(new Event('input'));
+
+        expect(emitted).toEqual(['matrix']);
+    });
+
+    it('emits add playlist requests when the toolbar add button is clicked', () => {
+        const requested = jest.fn();
+        component.addPlaylistRequested.subscribe(requested);
+
+        const button: HTMLButtonElement = fixture.nativeElement.querySelector(
+            'button[aria-label="WORKSPACE.SHELL.ADD_PLAYLIST"]'
+        );
+        button.click();
+
+        expect(requested).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render the removed global favorites shortcut', () => {
+        const button: HTMLButtonElement | null =
+            fixture.nativeElement.querySelector(
+                'button[aria-label="WORKSPACE.SHELL.OPEN_GLOBAL_FAVORITES"]'
+            );
+
+        expect(button).toBeNull();
+    });
+
+    it('emits contextual header shortcut requests when configured', () => {
+        const requested = jest.fn();
+        component.headerShortcutRequested.subscribe(requested);
+        fixture.componentRef.setInput('headerShortcut', {
+            icon: 'tune',
+            tooltipKey: 'shortcut.tooltip',
+            ariaLabelKey: 'shortcut.aria',
+            run: () => undefined,
+        });
+        fixture.detectChanges();
+
+        const button: HTMLButtonElement = fixture.nativeElement.querySelector(
+            'button[aria-label="shortcut.aria"]'
+        );
+        button.click();
+
+        expect(requested).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders scope and status chips when search metadata is provided', () => {
+        fixture.componentRef.setInput('searchScopeLabel', 'Movies / All Items');
+        fixture.componentRef.setInput(
+            'searchStatusLabel',
+            'Loaded channels only'
+        );
+        fixture.detectChanges();
+
+        const chips = Array.from(
+            fixture.nativeElement.querySelectorAll('.search-chip')
+        ).map((element: Element) => element.textContent?.trim());
+
+        expect(chips).toEqual(['Movies / All Items', 'Loaded channels only']);
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts
new file mode 100644
index 0000000..dbd8bad
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts
@@ -0,0 +1,111 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+    output,
+} from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PlaylistSwitcherComponent } from '@iptvnator/playlist/shared/ui';
+import { WorkspaceHeaderAction } from '@iptvnator/portal/shared/util';
+import { VideoPlayer } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-workspace-shell-header',
+    imports: [
+        MatFormFieldModule,
+        MatIcon,
+        MatIconButton,
+        MatSelectModule,
+        MatTooltip,
+        PlaylistSwitcherComponent,
+        TranslatePipe,
+    ],
+    templateUrl: './workspace-shell-header.component.html',
+    styleUrl: './workspace-shell-header.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkspaceShellHeaderComponent {
+    readonly VideoPlayer = VideoPlayer;
+
+    readonly isMac =
+        typeof navigator !== 'undefined' &&
+        /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+    readonly commandShortcutLabel = this.isMac ? '⌘K' : 'Ctrl+K';
+
+    readonly playlistTitle = input('');
+    readonly playlistSubtitle = input('');
+    readonly canOpenPlaylistInfo = input(false);
+    readonly canOpenAccountInfo = input(false);
+    readonly searchQuery = input('');
+    readonly canUseSearch = input(false);
+    readonly searchPlaceholder = input('');
+    readonly searchScopeLabel = input('');
+    readonly searchStatusLabel = input('');
+    readonly headerShortcut = input<WorkspaceHeaderAction | null>(null);
+    readonly canRefreshPlaylist = input(false);
+    readonly isRefreshingPlaylist = input(false);
+    readonly isElectron = input(false);
+    readonly hasNoPlaylists = input(false);
+    readonly isDownloadsView = input(false);
+    readonly hasActiveDownloads = input(false);
+    readonly showQuickPlayerSelect = input(false);
+    readonly quickHeaderPlayerValue = input(VideoPlayer.ArtPlayer);
+
+    readonly searchChanged = output<string>();
+    readonly searchSubmitted = output<string>();
+    readonly commandPaletteRequested = output<void>();
+    readonly addPlaylistRequested = output<void>();
+    readonly headerShortcutRequested = output<void>();
+    readonly refreshPlaylistRequested = output<void>();
+    readonly downloadsRequested = output<void>();
+    readonly playlistInfoRequested = output<void>();
+    readonly accountInfoRequested = output<void>();
+    readonly quickHeaderPlayerChange = output<VideoPlayer>();
+
+    onSearchInput(event: Event): void {
+        const target = event.target as HTMLInputElement | null;
+        this.searchChanged.emit(target?.value ?? '');
+    }
+
+    onSearchEnter(event: Event): void {
+        const target = event.target as HTMLInputElement | null;
+        this.searchSubmitted.emit(target?.value ?? this.searchQuery());
+    }
+
+    onPlaylistInfoRequested(): void {
+        this.playlistInfoRequested.emit();
+    }
+
+    onAccountInfoRequested(): void {
+        this.accountInfoRequested.emit();
+    }
+
+    onAddPlaylistRequested(): void {
+        this.addPlaylistRequested.emit();
+    }
+
+    onCommandPaletteRequested(): void {
+        this.commandPaletteRequested.emit();
+    }
+
+    onHeaderShortcutRequested(): void {
+        this.headerShortcutRequested.emit();
+    }
+
+    onRefreshPlaylistRequested(): void {
+        this.refreshPlaylistRequested.emit();
+    }
+
+    onDownloadsRequested(): void {
+        this.downloadsRequested.emit();
+    }
+
+    onQuickPlayerChange(value: VideoPlayer): void {
+        this.quickHeaderPlayerChange.emit(value);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html
new file mode 100644
index 0000000..5642a1b
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.html
@@ -0,0 +1,20 @@
+<nav class="rail-links">
+    @for (link of links(); track link.path.join('/')) {
+        <a
+            class="portal-rail-link nav-item"
+            [routerLink]="link.path"
+            [routerLinkActive]="activeClass()"
+            [routerLinkActiveOptions]="{ exact: link.exact ?? false }"
+            [matTooltip]="link.tooltip"
+            [matTooltipPosition]="'right'"
+            [attr.aria-label]="link.tooltip"
+            [attr.aria-current]="isActive(link) ? 'page' : null"
+            [class.active]="activeClass() === 'active' && isActive(link)"
+            [class.is-active]="
+                activeClass() === 'is-active' && isActive(link)
+            "
+        >
+            <mat-icon>{{ resolveIcon(link) }}</mat-icon>
+        </a>
+    }
+</nav>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
new file mode 100644
index 0000000..802f2e6
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
@@ -0,0 +1,99 @@
+:host {
+    display: block;
+    width: 100%;
+    --rail-link-color: var(--mat-sys-on-surface-variant);
+}
+
+.rail-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    width: 100%;
+}
+
+.portal-rail-link {
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    gap: 0;
+    border-radius: 14px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rail-link-color);
+    text-decoration: none;
+    app-region: no-drag;
+    animation: rail-link-enter 0.2s ease-out both;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+
+    &:hover {
+        color: var(--rail-link-hover-color, var(--mat-sys-on-surface));
+        background: var(
+            --rail-link-hover-bg,
+            var(--mat-sys-surface-container)
+        );
+    }
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+@for $i from 1 through 8 {
+    .portal-rail-link:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 30}ms;
+    }
+}
+
+@keyframes rail-link-enter {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.portal-rail-link.is-active,
+.portal-rail-link.active {
+    color: var(--rail-link-active-color, var(--app-selection-color));
+    background: linear-gradient(
+        145deg,
+        var(--rail-link-active-bg-strong, var(--app-selection-surface-strong)),
+        var(--rail-link-active-bg, var(--app-selection-surface))
+    );
+    box-shadow:
+        inset 0 0 0 1px
+            var(--rail-link-active-border, var(--app-selection-border)),
+        0 10px 20px -16px
+            var(--rail-link-active-glow, var(--app-selection-glow));
+    transform: translateY(-1px);
+
+    mat-icon {
+        color: var(--rail-link-active-icon, var(--app-selection-color));
+    }
+}
+
+.portal-rail-link.is-active::after,
+.portal-rail-link.active::after {
+    content: '';
+    position: absolute;
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 20px;
+    border-radius: 999px;
+    background: var(--rail-link-active-icon, var(--app-selection-color));
+    box-shadow: 0 0 10px var(--rail-link-active-glow, var(--app-selection-glow));
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts
new file mode 100644
index 0000000..b961c80
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.ts
@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import {
+    IsActiveMatchOptions,
+    Router,
+    RouterLink,
+    RouterLinkActive,
+} from '@angular/router';
+import {
+    PortalRailLink,
+    PortalRailSection,
+} from '@iptvnator/portal/shared/util';
+
+@Component({
+    selector: 'app-workspace-shell-rail-links',
+    imports: [MatIcon, MatTooltip, RouterLink, RouterLinkActive],
+    templateUrl: './workspace-shell-rail-links.component.html',
+    styleUrl: './workspace-shell-rail-links.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkspaceShellRailLinksComponent {
+    private readonly router = inject(Router);
+
+    readonly links = input<PortalRailLink[]>([]);
+    readonly selectedSection = input<
+        PortalRailSection | string | null | undefined
+    >(null);
+    readonly activeClass = input<'active' | 'is-active'>('is-active');
+
+    resolveIcon(link: PortalRailLink): string {
+        const normalizedPath = link.path.map((segment) => String(segment)).join('/');
+        if (normalizedPath.includes('/workspace/sources')) {
+            return 'playlist_play';
+        }
+
+        return link.icon;
+    }
+
+    isActive(link: PortalRailLink): boolean {
+        const selectedSection = this.selectedSection();
+        if (selectedSection && link.section) {
+            return selectedSection === link.section;
+        }
+
+        const commands = link.path.map((segment) => String(segment));
+        const tree = this.router.createUrlTree(commands);
+        const matchOptions: IsActiveMatchOptions = {
+            paths: link.exact ? 'exact' : 'subset',
+            queryParams: 'ignored',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+        };
+        return this.router.isActive(tree, matchOptions);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html
new file mode 100644
index 0000000..d635b06
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.html
@@ -0,0 +1,51 @@
+<aside class="app-rail" [class.is-macos]="isMacOS()">
+    <a
+        class="brand"
+        [routerLink]="brandLink()"
+        [matTooltip]="brandTooltipKey() | translate"
+        [matTooltipPosition]="'right'"
+        [attr.aria-label]="brandAriaLabelKey() | translate"
+    >
+        <img
+            src="./assets/icons/icon-tv-256.png"
+            [attr.alt]="'WORKSPACE.SHELL.BRAND_ALT' | translate"
+        />
+    </a>
+
+    <app-workspace-shell-rail-links [links]="workspaceLinks()" />
+
+    @if (primaryContextLinks().length > 0) {
+        <div
+            class="rail-context-region"
+            [class]="railProviderClass()"
+        >
+            <app-workspace-shell-rail-links
+                activeClass="is-active"
+                [selectedSection]="selectedSection()"
+                [links]="primaryContextLinks()"
+            />
+
+            @if (secondaryContextLinks().length > 0) {
+                <div class="rail-divider"></div>
+                <app-workspace-shell-rail-links
+                    activeClass="is-active"
+                    [selectedSection]="selectedSection()"
+                    [links]="secondaryContextLinks()"
+                />
+            }
+        </div>
+    }
+
+    <div class="rail-footer">
+        <a
+            class="rail-shortcut nav-item"
+            routerLink="/workspace/settings"
+            [class.is-active]="isSettingsRoute()"
+            [matTooltip]="'WORKSPACE.SHELL.RAIL_SETTINGS' | translate"
+            [matTooltipPosition]="'right'"
+            [attr.aria-label]="'WORKSPACE.SHELL.OPEN_SETTINGS' | translate"
+        >
+            <mat-icon>settings</mat-icon>
+        </a>
+    </div>
+</aside>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
new file mode 100644
index 0000000..eb6610c
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
@@ -0,0 +1,267 @@
+:host {
+    display: block;
+    min-width: 0;
+    min-height: 0;
+}
+
+.app-rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10px 8px;
+    border-right: 1px solid
+        var(--app-rail-border, var(--mat-sys-outline-variant));
+    background: var(--app-rail-bg, var(--mat-sys-surface-container-low));
+    app-region: drag;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    --rail-link-color: color-mix(in srgb, var(--app-on-surface) 65%, transparent);
+    --rail-link-hover-color: var(--app-on-surface);
+    --rail-link-hover-bg: var(--app-hover-overlay);
+    --rail-link-active-bg: var(--app-selection-surface);
+    --rail-link-active-bg-strong: var(--app-selection-surface-strong);
+    --rail-link-active-color: var(--app-selection-color);
+    --rail-link-active-icon: var(--app-selection-color);
+    --rail-link-active-border: var(--app-selection-border);
+    --rail-link-active-glow: var(--app-selection-glow);
+
+    &.is-macos {
+        padding-top: 36px;
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.app-rail a {
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rail-link-color);
+    text-decoration: none;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    app-region: no-drag;
+
+    mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.app-rail a:hover {
+    color: var(--rail-link-hover-color);
+    background: var(--rail-link-hover-bg);
+}
+
+.app-rail a.is-active,
+.app-rail a.active {
+    color: var(--rail-link-active-color);
+    background: linear-gradient(
+        145deg,
+        var(--rail-link-active-bg-strong),
+        var(--rail-link-active-bg)
+    );
+    box-shadow:
+        inset 0 0 0 1px var(--rail-link-active-border),
+        0 10px 20px -16px var(--rail-link-active-glow);
+    transform: translateY(-1px);
+
+    mat-icon {
+        color: var(--rail-link-active-icon);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 18px;
+        border-radius: 999px;
+        background: var(--rail-link-active-icon);
+        box-shadow: 0 0 10px var(--rail-link-active-glow);
+    }
+}
+
+.brand {
+    margin-bottom: 10px;
+    background: var(--mat-sys-primary-container);
+    color: var(--mat-sys-on-primary-container);
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.brand img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+}
+
+.rail-context-region {
+    --region-accent: var(--mat-sys-outline-variant);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    width: 100%;
+    max-width: 48px;
+    padding: 5px 2px;
+    margin: 4px 0;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--app-on-surface) 3%, transparent);
+    border: 1px solid color-mix(in srgb, var(--app-on-surface) 4%, transparent);
+    position: relative;
+    animation: region-enter 0.25s ease-out both;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: 10px;
+        right: 10px;
+        height: 2px;
+        border-radius: 0 0 2px 2px;
+        background: var(--region-accent);
+        opacity: 0.5;
+    }
+
+    .rail-divider {
+        width: 24px;
+        margin: 3px 0;
+        opacity: 0.25;
+    }
+}
+
+.rail-context-region--xtreams {
+    --region-accent: #7c8cf5;
+}
+
+.rail-context-region--stalker {
+    --region-accent: #4ecdc4;
+}
+
+.rail-context-region--playlists {
+    --region-accent: #f5a623;
+}
+
+@keyframes region-enter {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.rail-divider {
+    width: 44px;
+    height: 1px;
+    background: var(--mat-sys-outline-variant);
+    margin: 6px 0;
+    opacity: 0.5;
+}
+
+.rail-footer {
+    margin-top: auto;
+
+    .rail-shortcut {
+        width: 44px;
+        height: 44px;
+        padding: 0;
+        gap: 0;
+        border-radius: 14px;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: color-mix(in srgb, var(--app-on-surface) 65%, transparent);
+        app-region: no-drag;
+
+        mat-icon {
+            font-size: 20px;
+            width: 20px;
+            height: 20px;
+        }
+
+        &:hover:not(.is-active) {
+            background: var(--app-hover-overlay);
+            color: var(--app-on-surface);
+        }
+
+        &.is-active::after {
+            content: '';
+            position: absolute;
+            right: -4px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 4px;
+            height: 20px;
+            border-radius: 999px;
+            background: var(--app-selection-color);
+            box-shadow: 0 0 10px var(--app-selection-glow);
+        }
+    }
+}
+
+@media (max-width: 640px) {
+    .app-rail {
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 6px 10px;
+        border-right: none;
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
+
+        .brand {
+            margin-bottom: 0;
+        }
+    }
+
+    .rail-divider {
+        width: 1px;
+        height: 24px;
+        margin: 0 4px;
+    }
+
+    .rail-context-region {
+        width: auto;
+        flex-direction: row;
+        margin: 0;
+        padding: 2px 4px;
+        border-radius: 10px;
+
+        &::before {
+            display: none;
+        }
+
+        .rail-divider {
+            width: 1px;
+            height: 24px;
+            margin: 0 2px;
+        }
+    }
+
+    .rail-footer {
+        margin-top: 0;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts
new file mode 100644
index 0000000..8c8a7db
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.spec.ts
@@ -0,0 +1,100 @@
+import { Component, input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { provideRouter } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { RouterLink } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { WorkspaceShellRailComponent } from './workspace-shell-rail.component';
+
+@Component({
+    selector: 'app-workspace-shell-rail-links',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceShellRailLinksComponent {
+    readonly links = input<unknown[]>([]);
+    readonly selectedSection = input<string | null>(null);
+    readonly activeClass = input('active');
+}
+
+describe('WorkspaceShellRailComponent', () => {
+    let fixture: ComponentFixture<WorkspaceShellRailComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceShellRailComponent],
+            providers: [
+                provideRouter([]),
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (key: string) => key,
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+            ],
+        })
+            .overrideComponent(WorkspaceShellRailComponent, {
+                set: {
+                    imports: [
+                        MatIcon,
+                        MatTooltip,
+                        MockWorkspaceShellRailLinksComponent,
+                        RouterLink,
+                        TranslatePipe,
+                    ],
+                },
+            })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(WorkspaceShellRailComponent);
+    });
+
+    it('renders provider context region and active settings shortcut state', () => {
+        fixture.componentRef.setInput('brandLink', '/workspace/sources');
+        fixture.componentRef.setInput(
+            'brandAriaLabelKey',
+            'WORKSPACE.SHELL.OPEN_SOURCES'
+        );
+        fixture.componentRef.setInput('primaryContextLinks', [
+            {
+                icon: 'movie',
+                tooltip: 'Movies',
+                path: ['/workspace', 'xtreams', 'pl-1', 'vod'],
+                section: 'vod',
+            },
+        ]);
+        fixture.componentRef.setInput(
+            'railProviderClass',
+            'rail-context-region rail-context-region--xtreams'
+        );
+        fixture.componentRef.setInput('isSettingsRoute', true);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector('.rail-context-region--xtreams')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('.rail-shortcut.is-active')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement
+                .querySelector('.brand')
+                ?.getAttribute('href')
+        ).toContain('/workspace/sources');
+        expect(
+            fixture.nativeElement
+                .querySelector('.brand')
+                ?.getAttribute('aria-label')
+        ).toBe('WORKSPACE.SHELL.OPEN_SOURCES');
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts
new file mode 100644
index 0000000..999c5ea
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.ts
@@ -0,0 +1,42 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+} from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import {
+    PortalRailLink,
+    PortalRailSection,
+} from '@iptvnator/portal/shared/util';
+import { WorkspaceShellRailLinksComponent } from '../workspace-shell-rail-links/workspace-shell-rail-links.component';
+
+@Component({
+    selector: 'app-workspace-shell-rail',
+    imports: [
+        MatIcon,
+        MatTooltip,
+        RouterLink,
+        TranslatePipe,
+        WorkspaceShellRailLinksComponent,
+    ],
+    templateUrl: './workspace-shell-rail.component.html',
+    styleUrl: './workspace-shell-rail.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkspaceShellRailComponent {
+    readonly isMacOS = input(false);
+    readonly brandLink = input('/workspace/dashboard');
+    readonly brandTooltipKey = input('WORKSPACE.SHELL.RAIL_DASHBOARD');
+    readonly brandAriaLabelKey = input('WORKSPACE.SHELL.OPEN_DASHBOARD');
+    readonly workspaceLinks = input<PortalRailLink[]>([]);
+    readonly primaryContextLinks = input<PortalRailLink[]>([]);
+    readonly secondaryContextLinks = input<PortalRailLink[]>([]);
+    readonly selectedSection = input<
+        PortalRailSection | string | null | undefined
+    >(null);
+    readonly railProviderClass = input('rail-context-region');
+    readonly isSettingsRoute = input(false);
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts
new file mode 100644
index 0000000..0373dc7
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.spec.ts
@@ -0,0 +1,578 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { PlaylistContextFacade } from '@iptvnator/playlist/shared/util';
+import {
+    PORTAL_EXTERNAL_PLAYBACK,
+    WorkspaceHeaderContextService,
+    WorkspaceViewCommandService,
+} from '@iptvnator/portal/shared/util';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import {
+    PlaylistsService,
+    SettingsStore,
+    WORKSPACE_PRODUCT_BRANDING,
+} from 'services';
+import { PlaylistMeta } from 'shared-interfaces';
+import {
+    WorkspaceStartupPreferencesService,
+    WORKSPACE_SHELL_ACTIONS,
+} from '@iptvnator/workspace/shell/util';
+import { WorkspaceShellFacade } from './workspace-shell.facade';
+
+class MockXtreamStore {
+    readonly recentItems = signal<unknown[]>([]);
+    readonly searchTerm = signal('');
+    readonly categorySearchTerm = signal('');
+    readonly isImporting = signal(false);
+    readonly isCancellingImport = signal(false);
+    readonly activeImportSessionId = signal<string | null>(null);
+    readonly currentImportPhase = signal<string | null>(null);
+    readonly activeImportContentType = signal<'live' | 'vod' | 'series' | null>(
+        null
+    );
+    readonly activeImportCurrentCount = signal(0);
+    readonly activeImportTotalCount = signal(0);
+    readonly getImportCount = signal(0);
+    readonly itemsToImport = signal(0);
+    readonly getSelectedCategory = signal<{
+        category_name?: string;
+        name?: string;
+    } | null>(null);
+    readonly vodStreams = signal<unknown[]>([{ id: 1 }]);
+    readonly liveStreams = signal<unknown[]>([{ id: 2 }]);
+    readonly serialStreams = signal<unknown[]>([{ id: 3 }]);
+
+    setSearchTerm = jest.fn((term: string) => this.searchTerm.set(term));
+    setCategorySearchTerm = jest.fn((term: string) =>
+        this.categorySearchTerm.set(term)
+    );
+    clearRecentItems = jest.fn();
+}
+
+class MockStalkerStore {
+    readonly searchPhrase = signal('');
+    readonly getSelectedCategoryName = signal('All Items');
+
+    setSearchPhrase = jest.fn((term: string) => this.searchPhrase.set(term));
+}
+
+function createParseUrl(url: string): { queryParams: Record<string, unknown> } {
+    const parsed = new URL(url, 'http://localhost');
+    const queryParams: Record<string, unknown> = {};
+
+    parsed.searchParams.forEach((value, key) => {
+        const currentValue = queryParams[key];
+        if (currentValue === undefined) {
+            queryParams[key] = value;
+            return;
+        }
+
+        if (Array.isArray(currentValue)) {
+            currentValue.push(value);
+            return;
+        }
+
+        queryParams[key] = [currentValue, value];
+    });
+
+    return { queryParams };
+}
+
+describe('WorkspaceShellFacade', () => {
+    type PlaylistSignalMeta = PlaylistMeta & {
+        serverUrl?: string;
+        macAddress?: string;
+    };
+
+    let facade: WorkspaceShellFacade;
+    let router: {
+        url: string;
+        events: ReturnType<typeof of>;
+        navigate: jest.Mock;
+        navigateByUrl: jest.Mock;
+        parseUrl: jest.Mock;
+        createUrlTree: jest.Mock;
+        isActive: jest.Mock;
+    };
+    let playlistsService: {
+        clearPortalRecentlyViewed: jest.Mock;
+        clearM3uRecentlyViewed: jest.Mock;
+    };
+    let workspaceActions: {
+        openAddPlaylistDialog: jest.Mock;
+        openGlobalSearch: jest.Mock;
+        openGlobalRecent: jest.Mock;
+        openAccountInfo: jest.Mock;
+    };
+    let storeDispatch: jest.Mock;
+    let activePlaylistSignal: ReturnType<
+        typeof signal<PlaylistSignalMeta | null>
+    >;
+    let playlistsSignal: ReturnType<typeof signal<PlaylistSignalMeta[]>>;
+    let stalkerStore: MockStalkerStore;
+    let showDashboardSignal: ReturnType<typeof signal<boolean>>;
+    let startupPreferences: {
+        getFirstAvailableWorkspacePath: jest.Mock;
+        persistLastRestorablePath: jest.Mock;
+        showDashboard: jest.Mock;
+    };
+
+    beforeEach(() => {
+        window.electron = { platform: 'darwin' } as typeof window.electron;
+        showDashboardSignal = signal(true);
+
+        activePlaylistSignal = signal({
+            _id: 'pl-1',
+            serverUrl: 'http://example.com',
+            title: 'Playlist A',
+            recentlyViewed: ['recent-1'],
+        });
+        playlistsSignal = signal([
+            { _id: 'pl-1', serverUrl: 'http://example.com' },
+            { _id: 'pl-2', macAddress: '00:11:22:33' },
+        ]);
+
+        router = {
+            url: '/workspace/xtreams/pl-1/vod',
+            events: of(
+                new NavigationEnd(
+                    1,
+                    '/workspace/xtreams/pl-1/vod',
+                    '/workspace/xtreams/pl-1/vod'
+                )
+            ),
+            navigate: jest.fn().mockResolvedValue(true),
+            navigateByUrl: jest.fn().mockResolvedValue(true),
+            parseUrl: jest.fn((url: string) => createParseUrl(url)),
+            createUrlTree: jest.fn(),
+            isActive: jest.fn(),
+        };
+        playlistsService = {
+            clearPortalRecentlyViewed: jest
+                .fn()
+                .mockReturnValue(of({ recentlyViewed: [] })),
+            clearM3uRecentlyViewed: jest
+                .fn()
+                .mockReturnValue(of({ recentlyViewed: [] })),
+        };
+        workspaceActions = {
+            openAddPlaylistDialog: jest.fn(),
+            openGlobalSearch: jest.fn(),
+            openGlobalRecent: jest.fn(),
+            openAccountInfo: jest.fn(),
+        };
+        startupPreferences = {
+            getFirstAvailableWorkspacePath: jest.fn((showDashboard: boolean) =>
+                showDashboard ? '/workspace/dashboard' : '/workspace/sources'
+            ),
+            persistLastRestorablePath: jest.fn(),
+            showDashboard: jest.fn(() => showDashboardSignal()),
+        };
+        storeDispatch = jest.fn();
+        stalkerStore = new MockStalkerStore();
+
+        const selectSignal = jest.fn().mockReturnValue(playlistsSignal);
+
+        TestBed.configureTestingModule({
+            providers: [
+                WorkspaceShellFacade,
+                {
+                    provide: Router,
+                    useValue: router,
+                },
+                {
+                    provide: Store,
+                    useValue: {
+                        selectSignal,
+                        dispatch: storeDispatch,
+                    },
+                },
+                {
+                    provide: XtreamStore,
+                    useClass: MockXtreamStore,
+                },
+                {
+                    provide: StalkerStore,
+                    useValue: stalkerStore,
+                },
+                {
+                    provide: PORTAL_EXTERNAL_PLAYBACK,
+                    useValue: {
+                        activeSession: signal(null),
+                        visibleSession: signal(null),
+                        closeSession: jest.fn(),
+                    },
+                },
+                {
+                    provide: PlaylistContextFacade,
+                    useValue: {
+                        activePlaylist: activePlaylistSignal,
+                    },
+                },
+                {
+                    provide: SettingsStore,
+                    useValue: {
+                        showExternalPlaybackBar: signal(true),
+                    },
+                },
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsService,
+                },
+                {
+                    provide: MatDialog,
+                    useValue: {
+                        open: jest.fn().mockReturnValue({
+                            afterClosed: () => of(undefined),
+                        }),
+                    },
+                },
+                {
+                    provide: WORKSPACE_SHELL_ACTIONS,
+                    useValue: workspaceActions,
+                },
+                {
+                    provide: WorkspaceStartupPreferencesService,
+                    useValue: startupPreferences,
+                },
+                {
+                    provide: WORKSPACE_PRODUCT_BRANDING,
+                    useValue: null,
+                },
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: (
+                            key: string,
+                            params?: Record<string, string | number>
+                        ) => {
+                            if (
+                                key === 'WORKSPACE.SHELL.XTREAM_IMPORT_PROGRESS' &&
+                                params
+                            ) {
+                                return `${params.type} imported: ${params.current} / ${params.total}`;
+                            }
+
+                            return key;
+                        },
+                        get: (key: string) => of(key),
+                        stream: (key: string) => of(key),
+                        onLangChange: of(null),
+                        onTranslationChange: of(null),
+                        onDefaultLangChange: of(null),
+                        currentLang: 'en',
+                        defaultLang: 'en',
+                    },
+                },
+            ],
+        });
+
+        facade = TestBed.inject(WorkspaceShellFacade);
+    });
+
+    it('routes dashboard search Enter into the active Xtream playlist search', () => {
+        const xtreamStore = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+
+        facade.currentUrl.set('/workspace/dashboard');
+        router.navigate.mockClear();
+
+        facade.onSearchEnter('Matrix');
+
+        expect(xtreamStore.setSearchTerm).toHaveBeenCalledWith('Matrix');
+        expect(router.navigate).toHaveBeenCalledWith(
+            ['/workspace', 'xtreams', 'pl-1', 'search'],
+            {
+                queryParams: { q: 'Matrix' },
+            }
+        );
+    });
+
+    it('uses a loading label for remote Xtream fetch phases', () => {
+        const xtreamStore = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+
+        xtreamStore.currentImportPhase.set('loading-categories');
+        expect(facade.xtreamImportPhaseLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+        );
+
+        xtreamStore.currentImportPhase.set('loading-live');
+        expect(facade.xtreamImportPhaseLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+        );
+        expect(facade.xtreamImportSourceLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_REMOTE_BADGE'
+        );
+        expect(facade.xtreamImportDetailLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_DETAIL_REMOTE'
+        );
+
+        xtreamStore.currentImportPhase.set('saving-categories');
+        expect(facade.xtreamImportPhaseLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_SAVING'
+        );
+
+        xtreamStore.currentImportPhase.set('saving-content');
+        expect(facade.xtreamImportPhaseLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_SAVING'
+        );
+        expect(facade.xtreamImportSourceLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_LOCAL_BADGE'
+        );
+        expect(facade.xtreamImportDetailLabel()).toBe(
+            'WORKSPACE.SHELL.XTREAM_IMPORT_DETAIL_LOCAL'
+        );
+    });
+
+    it('builds a type-aware xtream import progress label', () => {
+        const xtreamStore = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+
+        xtreamStore.activeImportContentType.set('vod');
+        xtreamStore.activeImportCurrentCount.set(20);
+        xtreamStore.activeImportTotalCount.set(12323);
+
+        expect(facade.xtreamImportTypeLabel()).toBe(
+            'WORKSPACE.SHELL.RAIL_MOVIES'
+        );
+        expect(facade.xtreamImportProgressLabel()).toBe(
+            'WORKSPACE.SHELL.RAIL_MOVIES imported: 20 / 12,323'
+        );
+    });
+
+    it('keeps stalker local-filter routes on the same page and syncs q', () => {
+        router.navigate.mockClear();
+        router.navigateByUrl.mockClear();
+        facade.currentUrl.set('/workspace/stalker/pl-1/downloads');
+
+        facade.onSearchEnter('Neo');
+        TestBed.flushEffects();
+
+        expect(router.navigate).not.toHaveBeenCalled();
+        expect(router.navigateByUrl).toHaveBeenCalledWith(
+            '/workspace/stalker/pl-1/downloads?q=Neo',
+            {
+                replaceUrl: true,
+            }
+        );
+    });
+
+    it('removes the q param when clearing a sources search', async () => {
+        facade.appliedSearchQuery.set('matrix');
+        facade.currentUrl.set('/workspace/sources?q=matrix');
+        router.navigateByUrl.mockClear();
+
+        facade.onSearchEnter('');
+        TestBed.flushEffects();
+
+        expect(router.navigateByUrl).toHaveBeenCalledWith('/workspace/sources', {
+            replaceUrl: true,
+        });
+    });
+
+    it('navigates to the global favorites route', () => {
+        router.navigate.mockClear();
+        facade.currentUrl.set('/workspace/xtreams/pl-1/vod');
+
+        facade.navigateToGlobalFavorites();
+
+        expect(router.navigate).toHaveBeenCalledWith([
+            '/workspace/global-favorites',
+        ]);
+    });
+
+    it('clears stalker recent items and refreshes the route', async () => {
+        facade.currentUrl.set('/workspace/stalker/pl-1/recent');
+        router.navigateByUrl.mockClear();
+
+        await facade.runHeaderBulkAction();
+
+        expect(playlistsService.clearPortalRecentlyViewed).toHaveBeenCalledWith(
+            'pl-1'
+        );
+        expect(storeDispatch).toHaveBeenCalled();
+        expect(router.navigateByUrl).toHaveBeenCalledWith(
+            expect.stringMatching(/^\/workspace\/stalker\/pl-1\/recent\?refresh=/),
+            {
+                replaceUrl: true,
+            }
+        );
+    });
+
+    it('exposes loaded-only status for stalker itv searches', () => {
+        facade.currentUrl.set('/workspace/stalker/pl-1/itv?q=cnn');
+        (facade as { syncSearchFromRoute: () => void }).syncSearchFromRoute();
+        TestBed.flushEffects();
+
+        expect(stalkerStore.setSearchPhrase).toHaveBeenCalledWith('cnn');
+        expect(facade.canUseSearch()).toBe(true);
+        expect(facade.searchStatusLabel()).toBe(
+            'WORKSPACE.SHELL.SEARCH_STATUS_LOADED_ONLY'
+        );
+    });
+
+    it('applies q to Xtream category search on vod routes', () => {
+        const xtreamStore = TestBed.inject(XtreamStore) as unknown as MockXtreamStore;
+
+        facade.currentUrl.set('/workspace/xtreams/pl-1/vod?q=neo');
+        (facade as { syncSearchFromRoute: () => void }).syncSearchFromRoute();
+        TestBed.flushEffects();
+
+        expect(xtreamStore.setCategorySearchTerm).toHaveBeenCalledWith('neo');
+        expect(xtreamStore.setSearchTerm).not.toHaveBeenCalled();
+    });
+
+    it('enables local-filter search on playlist favorites routes', () => {
+        facade.currentUrl.set('/workspace/playlists/pl-1/favorites?q=news');
+        (facade as { syncSearchFromRoute: () => void }).syncSearchFromRoute();
+
+        expect(facade.canUseSearch()).toBe(true);
+        expect(facade.searchQuery()).toBe('news');
+    });
+
+    it('uses the translated global favorites scope label on the global favorites route', () => {
+        facade.currentUrl.set('/workspace/global-favorites?q=news');
+        (facade as { syncSearchFromRoute: () => void }).syncSearchFromRoute();
+
+        expect(facade.searchScopeLabel()).toBe(
+            'HOME.PLAYLISTS.GLOBAL_FAVORITES'
+        );
+    });
+
+    it('removes the dashboard rail link when dashboard is hidden', () => {
+        showDashboardSignal.set(false);
+
+        expect(facade.workspaceLinks()).toEqual([
+            {
+                icon: 'library_books',
+                tooltip: 'WORKSPACE.SHELL.RAIL_SOURCES',
+                path: ['/workspace/sources'],
+            },
+            {
+                icon: 'favorite',
+                tooltip: 'WORKSPACE.SHELL.RAIL_GLOBAL_FAVORITES',
+                path: ['/workspace/global-favorites'],
+                exact: true,
+            },
+            {
+                icon: 'history',
+                tooltip: 'WORKSPACE.SHELL.RAIL_GLOBAL_RECENT',
+                path: ['/workspace/global-recent'],
+                exact: true,
+            },
+        ]);
+        expect(facade.brandLink()).toBe('/workspace/sources');
+    });
+
+    it('persists the last restorable route from navigation events', () => {
+        expect(startupPreferences.persistLastRestorablePath).toHaveBeenCalledWith(
+            '/workspace/xtreams/pl-1/vod'
+        );
+    });
+
+    it('uses the translated recent scope label on the global recent route', () => {
+        facade.currentUrl.set('/workspace/global-recent?q=news');
+        (facade as { syncSearchFromRoute: () => void }).syncSearchFromRoute();
+
+        expect(facade.searchScopeLabel()).toBe('PORTALS.RECENTLY_VIEWED');
+    });
+
+    it('shows only actionable global commands on an empty dashboard', () => {
+        activePlaylistSignal.set(null);
+        playlistsSignal.set([]);
+        facade.currentUrl.set('/workspace/dashboard');
+
+        const commands = facade.commandPaletteCommands();
+
+        expect(commands.map((command) => command.id)).toEqual([
+            'open-global-favorites',
+            'open-global-recent',
+            'open-downloads',
+            'open-settings',
+            'open-sources',
+            'add-playlist',
+        ]);
+        expect(commands.every((command) => command.group === 'global')).toBe(
+            true
+        );
+        expect(commands.every((command) => command.enabled)).toBe(true);
+    });
+
+    it('includes M3U navigation, playlist actions, and Multi-EPG on playlist routes', () => {
+        const headerContext = TestBed.inject(WorkspaceHeaderContextService);
+
+        activePlaylistSignal.set({
+            _id: 'pl-m3u',
+            title: 'Playlist M3U',
+            count: 10,
+            importDate: '2026-04-22T10:00:00.000Z',
+            autoRefresh: false,
+        });
+        facade.currentUrl.set('/workspace/playlists/pl-m3u/groups');
+        headerContext.setAction({
+            id: 'm3u-multi-epg',
+            icon: 'view_list',
+            tooltipKey: 'TOP_MENU.OPEN_MULTI_EPG',
+            ariaLabelKey: 'TOP_MENU.OPEN_MULTI_EPG',
+            palette: {
+                labelKey: 'TOP_MENU.OPEN_MULTI_EPG',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_MULTI_EPG_DESCRIPTION',
+                keywords: ['epg', 'guide', 'schedule'],
+                priority: 10,
+            },
+            run: jest.fn(),
+        });
+
+        const commands = facade.commandPaletteCommands();
+
+        expect(commands.map((command) => command.id)).toEqual(
+            expect.arrayContaining([
+                'm3u-multi-epg',
+                'go-to-all',
+                'go-to-favorites',
+                'go-to-recent',
+                'playlist-info',
+            ])
+        );
+        expect(
+            commands.find((command) => command.id === 'm3u-multi-epg')?.group
+        ).toBe('view');
+        expect(commands.some((command) => command.id === 'account-info')).toBe(
+            false
+        );
+    });
+
+    it('places registered current-view commands ahead of globals on global favorites routes', () => {
+        const viewCommands = TestBed.inject(WorkspaceViewCommandService);
+        const clearCurrent = jest.fn();
+        const unregister = viewCommands.registerCommand({
+            id: 'clear-current-favorites',
+            group: 'view',
+            icon: 'delete_sweep',
+            labelKey: 'WORKSPACE.SHELL.CLEAR_FAVORITES_TYPE',
+            labelParams: () => ({ type: 'Live TV' }),
+            descriptionKey:
+                'WORKSPACE.SHELL.COMMANDS.CLEAR_CURRENT_VIEW_DESCRIPTION',
+            descriptionParams: () => ({ type: 'Live TV' }),
+            priority: 10,
+            run: clearCurrent,
+        });
+
+        facade.currentUrl.set('/workspace/global-favorites');
+
+        const commands = facade.commandPaletteCommands();
+
+        expect(commands[0]?.id).toBe('clear-current-favorites');
+        expect(commands[0]?.group).toBe('view');
+        expect(commands.some((command) => command.id === 'playlist-search')).toBe(
+            false
+        );
+
+        unregister();
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts
new file mode 100644
index 0000000..92a1f48
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/services/workspace-shell.facade.ts
@@ -0,0 +1,1674 @@
+import {
+    computed,
+    DestroyRef,
+    effect,
+    inject,
+    Injectable,
+    signal,
+} from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { NavigationEnd, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
+import { filter, firstValueFrom, startWith } from 'rxjs';
+import { PlaylistInfoComponent } from '@iptvnator/playlist/shared/ui';
+import {
+    PlaylistContextFacade,
+    PlaylistRefreshActionService,
+} from '@iptvnator/playlist/shared/util';
+import {
+    buildPortalRailLinks,
+    PORTAL_EXTERNAL_PLAYBACK,
+    PortalRailLink,
+    PortalRailSection,
+    WorkspaceCommandContribution,
+    WorkspaceCommandSelection,
+    WorkspaceHeaderAction,
+    WorkspaceHeaderContextService,
+    WorkspaceResolvedCommandItem,
+    WorkspaceViewCommandService,
+} from '@iptvnator/portal/shared/util';
+import { XtreamStore } from '@iptvnator/portal/xtream/data-access';
+import { StalkerStore } from '@iptvnator/portal/stalker/data-access';
+import {
+    parseWorkspaceShellRoute,
+    WorkspacePortalContext,
+    WorkspaceShellPageKind,
+    WorkspaceSearchCapability,
+    WorkspaceStartupPreferencesService,
+} from '@iptvnator/workspace/shell/util';
+import {
+    DownloadsService,
+    PlaylistsService,
+    SettingsStore,
+    WORKSPACE_PRODUCT_BRANDING,
+} from 'services';
+import { PlaylistActions, selectAllPlaylistsMeta } from 'm3u-state';
+import { PlaylistMeta, VideoPlayer } from 'shared-interfaces';
+import {
+    WorkspaceAccountInfoData,
+    WORKSPACE_SHELL_ACTIONS,
+} from '@iptvnator/workspace/shell/util';
+import { WorkspaceCommandPaletteComponent } from '../../workspace-command-palette/workspace-command-palette.component';
+
+export interface WorkspaceHeaderBulkAction {
+    icon: string;
+    tooltip: string;
+    ariaLabel: string;
+    disabled: boolean;
+}
+
+type XtreamImportPhaseTone = 'remote' | 'local' | null;
+
+const SEARCH_INPUT_DEBOUNCE_MS = 350;
+const SEARCH_PLAYLIST_PLACEHOLDER =
+    'WORKSPACE.SHELL.SEARCH_PLAYLIST_PLACEHOLDER';
+const SEARCH_SECTION_PLACEHOLDER = 'WORKSPACE.SHELL.SEARCH_SECTION_PLACEHOLDER';
+const FILTER_SECTION_PLACEHOLDER = 'WORKSPACE.SHELL.FILTER_SECTION_PLACEHOLDER';
+const SEARCH_SOURCES_PLACEHOLDER = 'WORKSPACE.SHELL.SEARCH_SOURCES_PLACEHOLDER';
+const SEARCH_LOADED_ONLY_STATUS = 'WORKSPACE.SHELL.SEARCH_STATUS_LOADED_ONLY';
+const CLEAR_RECENTLY_VIEWED_TOOLTIP =
+    'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_SECTION';
+const CLEAR_RECENTLY_VIEWED_ARIA =
+    'WORKSPACE.SHELL.CLEAR_RECENTLY_VIEWED_SECTION_ARIA';
+
+const RAIL_TOOLTIP_KEYS: Readonly<Partial<Record<PortalRailSection, string>>> =
+    {
+        vod: 'WORKSPACE.SHELL.RAIL_MOVIES',
+        live: 'WORKSPACE.SHELL.RAIL_LIVE',
+        itv: 'WORKSPACE.SHELL.RAIL_LIVE',
+        series: 'WORKSPACE.SHELL.RAIL_SERIES',
+        'recently-added': 'WORKSPACE.SHELL.RAIL_RECENTLY_ADDED',
+        search: 'WORKSPACE.SHELL.RAIL_SEARCH',
+        recent: 'WORKSPACE.SHELL.RAIL_RECENT',
+        favorites: 'WORKSPACE.SHELL.RAIL_FAVORITES',
+        downloads: 'WORKSPACE.SHELL.RAIL_DOWNLOADS',
+        all: 'WORKSPACE.SHELL.RAIL_ALL_CHANNELS',
+        groups: 'WORKSPACE.SHELL.RAIL_GROUPS',
+    };
+
+@Injectable()
+export class WorkspaceShellFacade {
+    private readonly router = inject(Router);
+    private readonly store = inject(Store);
+    private readonly xtreamStore = inject(XtreamStore);
+    private readonly stalkerStore = inject(StalkerStore);
+    private readonly destroyRef = inject(DestroyRef);
+    readonly externalPlayback = inject(PORTAL_EXTERNAL_PLAYBACK);
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly playlistsService = inject(PlaylistsService);
+    private readonly workspaceActions = inject(WORKSPACE_SHELL_ACTIONS);
+    private readonly translate = inject(TranslateService);
+    private readonly dialog = inject(MatDialog);
+    private readonly playlistContext = inject(PlaylistContextFacade);
+    private readonly startupPreferences = inject(
+        WorkspaceStartupPreferencesService
+    );
+    readonly headerContext = inject(WorkspaceHeaderContextService);
+    private readonly viewCommands = inject(WorkspaceViewCommandService);
+    private readonly playlistRefreshAction = inject(
+        PlaylistRefreshActionService
+    );
+    private readonly downloadsService = inject(DownloadsService);
+    private readonly productBranding = inject(WORKSPACE_PRODUCT_BRANDING, {
+        optional: true,
+    });
+    readonly hasActiveDownloads = computed(
+        () => this.isElectron && this.downloadsService.activeCount() > 0
+    );
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    private searchDebounceTimeoutId: ReturnType<typeof setTimeout> | null =
+        null;
+    private commandPaletteRef: MatDialogRef<
+        WorkspaceCommandPaletteComponent,
+        WorkspaceCommandSelection | undefined
+    > | null = null;
+    private readonly onDocumentKeydown = (event: KeyboardEvent): void => {
+        if (!(event.ctrlKey || event.metaKey)) {
+            return;
+        }
+
+        if (event.key.toLowerCase() === 'k') {
+            event.preventDefault();
+            this.openCommandPalette();
+        }
+    };
+
+    readonly playlistTitle = computed(() => {
+        const playlist = this.playlistContext.activePlaylist();
+
+        return (
+            playlist?.title ||
+            playlist?.filename ||
+            playlist?.url ||
+            playlist?.portalUrl ||
+            'Untitled playlist'
+        );
+    });
+    private readonly activePlaylist = this.playlistContext.activePlaylist;
+    private readonly playlists = this.store.selectSignal(
+        selectAllPlaylistsMeta
+    );
+    readonly hasNoPlaylists = computed(() => this.playlists().length === 0);
+
+    readonly searchQuery = signal('');
+    readonly appliedSearchQuery = signal('');
+    readonly isElectron = !!window.electron;
+
+    /** ArtPlayer vs VLC for the header quick selector (non-VLC counts as ArtPlayer). */
+    readonly quickHeaderPlayerValue = computed(() =>
+        this.settingsStore.player() === VideoPlayer.VLC
+            ? VideoPlayer.VLC
+            : VideoPlayer.ArtPlayer
+    );
+
+    async setQuickHeaderPlayer(player: VideoPlayer): Promise<void> {
+        const next =
+            player === VideoPlayer.VLC
+                ? VideoPlayer.VLC
+                : VideoPlayer.ArtPlayer;
+        await this.settingsStore.updateSettings({ player: next });
+    }
+    readonly isMacOS = window.electron?.platform === 'darwin';
+    readonly currentUrl = signal(this.router.url);
+    readonly currentRoute = computed(() =>
+        parseWorkspaceShellRoute(this.currentUrl())
+    );
+    readonly showDashboard = computed(() =>
+        this.startupPreferences.showDashboard()
+    );
+    readonly brandLink = computed(() =>
+        this.startupPreferences.getFirstAvailableWorkspacePath(
+            this.showDashboard()
+        )
+    );
+    readonly brandTooltipKey = computed(() =>
+        this.showDashboard()
+            ? 'WORKSPACE.SHELL.RAIL_DASHBOARD'
+            : 'WORKSPACE.SHELL.RAIL_SOURCES'
+    );
+    readonly brandAriaLabelKey = computed(() =>
+        this.showDashboard()
+            ? 'WORKSPACE.SHELL.OPEN_DASHBOARD'
+            : 'WORKSPACE.SHELL.OPEN_SOURCES'
+    );
+    readonly currentContext = computed(() => this.currentRoute().context);
+    readonly currentSection = computed(() => this.currentRoute().section);
+    readonly commandPaletteCommands = computed<WorkspaceResolvedCommandItem[]>(
+        () => this.getCommandPaletteItems()
+    );
+    readonly workspaceLinks = computed<PortalRailLink[]>(() => {
+        this.languageTick();
+
+        const links: PortalRailLink[] = [];
+
+        if (this.showDashboard()) {
+            links.push({
+                icon: 'dashboard',
+                tooltip: this.translateText('WORKSPACE.SHELL.RAIL_DASHBOARD'),
+                path: ['/workspace/dashboard'],
+                exact: true,
+            });
+        }
+
+        links.push({
+            icon: 'library_books',
+            tooltip: this.translateText('WORKSPACE.SHELL.RAIL_SOURCES'),
+            path: ['/workspace/sources'],
+        });
+
+        links.push({
+            icon: 'favorite',
+            tooltip: this.translateText(
+                'WORKSPACE.SHELL.RAIL_GLOBAL_FAVORITES'
+            ),
+            path: ['/workspace/global-favorites'],
+            exact: true,
+        });
+
+        links.push({
+            icon: 'history',
+            tooltip: this.translateText('WORKSPACE.SHELL.RAIL_GLOBAL_RECENT'),
+            path: ['/workspace/global-recent'],
+            exact: true,
+        });
+
+        return links;
+    });
+    readonly isDashboardRoute = computed(
+        () => this.currentRoute().kind === 'dashboard'
+    );
+    readonly isSourcesRoute = computed(
+        () => this.currentRoute().kind === 'sources'
+    );
+    readonly isSettingsRoute = computed(
+        () => this.currentRoute().kind === 'settings'
+    );
+    readonly isGlobalDownloadsRoute = computed(
+        () => this.currentRoute().kind === 'downloads'
+    );
+    readonly railContext = computed<WorkspacePortalContext | null>(() => {
+        const routeContext = this.currentContext();
+        if (routeContext) {
+            return routeContext;
+        }
+
+        const currentRoute = this.currentRoute();
+        if (
+            currentRoute.kind !== 'dashboard' &&
+            currentRoute.kind !== 'sources' &&
+            currentRoute.kind !== 'settings' &&
+            currentRoute.kind !== 'global-favorites' &&
+            currentRoute.kind !== 'global-recent' &&
+            currentRoute.kind !== 'downloads'
+        ) {
+            return null;
+        }
+
+        const activePlaylist = this.activePlaylist();
+        if (!activePlaylist?._id) {
+            return null;
+        }
+
+        return {
+            provider: this.getProviderFromPlaylist(activePlaylist),
+            playlistId: activePlaylist._id,
+        };
+    });
+    readonly externalPlaybackSession = this.externalPlayback.visibleSession;
+    readonly showExternalPlaybackBar = computed(
+        () => this.settingsStore.showExternalPlaybackBar?.() ?? true
+    );
+    readonly dashboardXtreamContext = computed<WorkspacePortalContext | null>(
+        () => {
+            if (!this.isDashboardRoute()) {
+                return null;
+            }
+
+            const context = this.railContext();
+            if (!context || context.provider !== 'xtreams') {
+                return null;
+            }
+
+            return context;
+        }
+    );
+    readonly contextPanel = computed(() => this.currentRoute().contextPanel);
+    readonly showContextPanel = computed(
+        () => this.currentRoute().contextPanel !== 'none'
+    );
+    readonly xtreamImportCount = this.xtreamStore.getImportCount;
+    readonly xtreamItemsToImport = this.xtreamStore.itemsToImport;
+    readonly xtreamActiveImportCount = this.xtreamStore.activeImportCurrentCount;
+    readonly xtreamActiveItemsToImport =
+        this.xtreamStore.activeImportTotalCount;
+    readonly xtreamImportPhase = this.xtreamStore.currentImportPhase;
+    readonly isCancellingXtreamImport = this.xtreamStore.isCancellingImport;
+    readonly canCancelXtreamImport = computed(
+        () =>
+            this.isElectron &&
+            this.xtreamStore.isImporting() &&
+            Boolean(this.xtreamStore.activeImportSessionId()) &&
+            !this.xtreamStore.isCancellingImport()
+    );
+    readonly xtreamImportTitleLabel = computed(() =>
+        this.translateText('WORKSPACE.SHELL.XTREAM_IMPORT_TITLE')
+    );
+    readonly xtreamImportTypeLabel = computed(() => {
+        this.languageTick();
+
+        switch (this.xtreamStore.activeImportContentType()) {
+            case 'live':
+                return this.translateText('WORKSPACE.SHELL.RAIL_LIVE');
+            case 'vod':
+                return this.translateText('WORKSPACE.SHELL.RAIL_MOVIES');
+            case 'series':
+                return this.translateText('WORKSPACE.SHELL.RAIL_SERIES');
+            default:
+                return '';
+        }
+    });
+    readonly xtreamImportProgressLabel = computed(() => {
+        const type = this.xtreamImportTypeLabel();
+        const total = this.xtreamActiveItemsToImport();
+
+        if (!type || total === 0) {
+            return '';
+        }
+
+        return this.translateText('WORKSPACE.SHELL.XTREAM_IMPORT_PROGRESS', {
+            type,
+            current: this.formatLocalizedNumber(this.xtreamActiveImportCount()),
+            total: this.formatLocalizedNumber(total),
+        });
+    });
+    readonly xtreamImportPhaseTone = computed<XtreamImportPhaseTone>(() => {
+        switch (this.xtreamStore.currentImportPhase()) {
+            case 'loading-categories':
+            case 'loading-live':
+            case 'loading-movies':
+            case 'loading-series':
+                return 'remote';
+            case 'preparing-content':
+            case 'saving-categories':
+            case 'saving-content':
+            case 'restoring-favorites':
+            case 'restoring-recently-viewed':
+                return 'local';
+            default:
+                return null;
+        }
+    });
+    readonly xtreamImportSourceLabel = computed(() => {
+        this.languageTick();
+
+        return this.xtreamImportPhaseTone() === 'remote'
+            ? this.translateText('WORKSPACE.SHELL.XTREAM_IMPORT_REMOTE_BADGE')
+            : this.xtreamImportPhaseTone() === 'local'
+              ? this.translateText('WORKSPACE.SHELL.XTREAM_IMPORT_LOCAL_BADGE')
+              : '';
+    });
+    readonly xtreamImportPhaseLabel = computed(() => {
+        this.languageTick();
+
+        switch (this.xtreamStore.currentImportPhase()) {
+            case 'preparing-content':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_PREPARING'
+                );
+            case 'loading-categories':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+                );
+            case 'saving-categories':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_SAVING'
+                );
+            case 'loading-live':
+            case 'loading-movies':
+            case 'loading-series':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+                );
+            case 'saving-content':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_SAVING'
+                );
+            case 'restoring-favorites':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_RESTORING_FAVORITES'
+                );
+            case 'restoring-recently-viewed':
+                return this.translateText(
+                    'WORKSPACE.SHELL.XTREAM_IMPORT_RESTORING_RECENT'
+                );
+            default:
+                return '';
+        }
+    });
+    readonly xtreamImportDetailLabel = computed(() => {
+        this.languageTick();
+
+        return this.xtreamImportPhaseTone() === 'remote'
+            ? this.translateText('WORKSPACE.SHELL.XTREAM_IMPORT_DETAIL_REMOTE')
+            : this.xtreamImportPhaseTone() === 'local'
+              ? this.translateText('WORKSPACE.SHELL.XTREAM_IMPORT_DETAIL_LOCAL')
+              : '';
+    });
+    readonly showXtreamImportOverlay = computed(() => {
+        const context = this.currentContext();
+        const section = this.currentSection();
+
+        if (context?.provider !== 'xtreams') {
+            return false;
+        }
+
+        return (
+            !this.xtreamStore.contentInitBlockReason() &&
+            this.xtreamStore.isImporting() &&
+            (section === 'vod' ||
+                section === 'live' ||
+                section === 'series' ||
+                section === 'search' ||
+                section === 'recently-added')
+        );
+    });
+    readonly searchCapability = computed<WorkspaceSearchCapability>(() => {
+        this.languageTick();
+
+        const route = this.currentRoute();
+        const context = route.context;
+        const section = route.section;
+        const appliedQuery = this.appliedSearchQuery().trim();
+
+        if (route.kind === 'settings') {
+            return {
+                enabled: false,
+                behavior: 'disabled',
+                context: null,
+                section: null,
+                searchMode: 'none',
+                placeholderKey: SEARCH_PLAYLIST_PLACEHOLDER,
+                scopeLabel: '',
+                statusLabel: '',
+                minLength: 0,
+                advancedRouteTarget: null,
+            };
+        }
+
+        if (route.kind === 'dashboard') {
+            const dashboardContext = this.dashboardXtreamContext();
+
+            return {
+                enabled: Boolean(dashboardContext),
+                behavior: dashboardContext ? 'advanced-only' : 'disabled',
+                context: dashboardContext,
+                section: section,
+                searchMode: dashboardContext ? 'advanced-only' : 'none',
+                placeholderKey: SEARCH_PLAYLIST_PLACEHOLDER,
+                scopeLabel: dashboardContext
+                    ? this.translateText('WORKSPACE.SHELL.RAIL_SEARCH')
+                    : '',
+                statusLabel: '',
+                minLength: dashboardContext ? 1 : 0,
+                advancedRouteTarget: dashboardContext
+                    ? [
+                          '/workspace',
+                          'xtreams',
+                          dashboardContext.playlistId,
+                          'search',
+                      ]
+                    : null,
+            };
+        }
+
+        if (route.searchMode === 'none') {
+            return {
+                enabled: false,
+                behavior: 'disabled',
+                context,
+                section,
+                searchMode: route.searchMode,
+                placeholderKey: SEARCH_PLAYLIST_PLACEHOLDER,
+                scopeLabel: '',
+                statusLabel: '',
+                minLength: 0,
+                advancedRouteTarget: null,
+            };
+        }
+
+        const isDegradedStalkerItv =
+            context?.provider === 'stalker' &&
+            section === 'itv' &&
+            appliedQuery.length > 0;
+        const behavior = isDegradedStalkerItv
+            ? 'degraded-loaded-only'
+            : route.searchMode;
+
+        return {
+            enabled: true,
+            behavior,
+            context,
+            section,
+            searchMode: route.searchMode,
+            placeholderKey: this.resolveSearchPlaceholderKey(
+                route.kind,
+                context,
+                section
+            ),
+            scopeLabel: this.resolveSearchScopeLabel(
+                route.kind,
+                context,
+                section
+            ),
+            statusLabel: isDegradedStalkerItv
+                ? this.translateText(SEARCH_LOADED_ONLY_STATUS)
+                : '',
+            minLength: route.searchMode === 'remote-search' ? 3 : 1,
+            advancedRouteTarget: null,
+        };
+    });
+    readonly canUseSearch = computed(() => this.searchCapability().enabled);
+    readonly searchPlaceholder = computed(
+        () => this.searchCapability().placeholderKey
+    );
+    readonly searchScopeLabel = computed(
+        () => this.searchCapability().scopeLabel
+    );
+    readonly searchStatusLabel = computed(
+        () => this.searchCapability().statusLabel
+    );
+    readonly railProviderClass = computed(() => {
+        const context = this.railContext();
+        if (!context) {
+            return 'rail-context-region';
+        }
+
+        return `rail-context-region rail-context-region--${context.provider}`;
+    });
+    readonly primaryContextLinks = computed<PortalRailLink[]>(() => {
+        this.languageTick();
+
+        const context = this.railContext();
+        if (!context) {
+            return [];
+        }
+
+        return this.translateRailLinks(
+            buildPortalRailLinks({
+                provider: context.provider,
+                playlistId: context.playlistId,
+                isElectron: this.isElectron,
+                workspace: true,
+            }).primary,
+            context.provider
+        );
+    });
+    readonly secondaryContextLinks = computed<PortalRailLink[]>(() => {
+        this.languageTick();
+
+        const context = this.railContext();
+        if (!context) {
+            return [];
+        }
+
+        return this.translateRailLinks(
+            buildPortalRailLinks({
+                provider: context.provider,
+                playlistId: context.playlistId,
+                isElectron: this.isElectron,
+                workspace: true,
+            }).secondary.filter((link) => link.section !== 'downloads'),
+            context.provider
+        );
+    });
+    readonly isDownloadsView = computed(
+        () =>
+            this.currentSection() === 'downloads' ||
+            this.isGlobalDownloadsRoute()
+    );
+    readonly headerShortcut = computed<WorkspaceHeaderAction | null>(() => {
+        const context = this.currentContext();
+        const action = this.headerContext.action();
+
+        if (!action || context?.provider !== 'playlists') {
+            return null;
+        }
+
+        return action;
+    });
+    readonly canOpenPlaylistInfo = computed(() =>
+        Boolean(this.activePlaylist())
+    );
+    readonly canOpenAccountInfo = computed(() =>
+        Boolean(this.activePlaylist()?.serverUrl)
+    );
+    readonly canRefreshPlaylist = computed(() =>
+        this.playlistRefreshAction.canRefresh(this.activePlaylist())
+    );
+    readonly isRefreshingPlaylist = this.playlistRefreshAction.isRefreshing;
+    readonly headerBulkAction = computed<WorkspaceHeaderBulkAction | null>(
+        () => {
+            this.languageTick();
+
+            const context = this.currentContext();
+            const section = this.currentSection();
+
+            if (!context || section !== 'recent') {
+                return null;
+            }
+
+            if (
+                context.provider !== 'xtreams' &&
+                context.provider !== 'stalker' &&
+                context.provider !== 'playlists'
+            ) {
+                return null;
+            }
+
+            return {
+                icon: 'delete_sweep',
+                tooltip: this.translateText(CLEAR_RECENTLY_VIEWED_TOOLTIP),
+                ariaLabel: this.translateText(CLEAR_RECENTLY_VIEWED_ARIA),
+                disabled: this.isRecentCleanupDisabled(context.provider),
+            };
+        }
+    );
+    readonly playlistSubtitle = computed(() => {
+        this.languageTick();
+
+        const active = this.activePlaylist();
+        if (active?.serverUrl) {
+            return this.translateText('WORKSPACE.SHELL.XTREAM_CODE');
+        }
+        if (active?.macAddress) {
+            return this.translateText('WORKSPACE.SHELL.STALKER_PORTAL');
+        }
+        if (active?.count) {
+            return this.translateText('WORKSPACE.SHELL.CHANNELS_COUNT', {
+                count: active.count,
+            });
+        }
+
+        const sourcesCount = this.playlists().length;
+        if (sourcesCount === 0) {
+            return this.translateText('WORKSPACE.SHELL.NO_SOURCES_AVAILABLE');
+        }
+        if (sourcesCount === 1) {
+            return this.translateText('WORKSPACE.SHELL.ONE_SOURCE_AVAILABLE');
+        }
+        return this.translateText('WORKSPACE.SHELL.SOURCES_AVAILABLE', {
+            count: sourcesCount,
+        });
+    });
+
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            if (this.searchDebounceTimeoutId !== null) {
+                clearTimeout(this.searchDebounceTimeoutId);
+                this.searchDebounceTimeoutId = null;
+            }
+
+            document.removeEventListener('keydown', this.onDocumentKeydown);
+        });
+
+        document.addEventListener('keydown', this.onDocumentKeydown);
+
+        this.router.events
+            .pipe(
+                filter(
+                    (event): event is NavigationEnd =>
+                        event instanceof NavigationEnd
+                ),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe((event) => {
+                this.currentUrl.set(event.urlAfterRedirects);
+                this.startupPreferences.persistLastRestorablePath(
+                    event.urlAfterRedirects
+                );
+                this.syncSearchFromRoute();
+            });
+
+        this.syncSearchFromRoute();
+
+        effect(() => {
+            const context = this.currentContext();
+            const section = this.currentSection();
+            const term = this.appliedSearchQuery();
+
+            if (!context || context.provider !== 'xtreams') {
+                return;
+            }
+
+            if (section === 'search') {
+                this.xtreamStore.setSearchTerm(term);
+                return;
+            }
+
+            if (section === 'vod' || section === 'series') {
+                this.xtreamStore.setCategorySearchTerm(term);
+            }
+        });
+
+        effect(() => {
+            const context = this.currentContext();
+            const section = this.currentSection();
+            const term = this.appliedSearchQuery();
+
+            if (
+                context?.provider !== 'stalker' ||
+                !section ||
+                (section !== 'vod' && section !== 'series' && section !== 'itv')
+            ) {
+                return;
+            }
+
+            this.stalkerStore.setSearchPhrase(term);
+        });
+
+        effect(() => {
+            if (!this.currentRoute().usesQuerySearch) {
+                return;
+            }
+
+            this.syncSearchQueryParam(this.appliedSearchQuery());
+        });
+    }
+
+    closeActiveExternalSession(): void {
+        void this.externalPlayback.closeSession(
+            this.externalPlayback.activeSession()
+        );
+    }
+
+    openActiveExternalSessionTarget(): void {
+        const playlistId = this.externalPlaybackSession()?.contentInfo
+            ?.playlistId;
+        if (!playlistId) return;
+
+        const playlist = this.playlists().find((p) => p._id === playlistId);
+        if (!playlist) return;
+
+        if (playlist.serverUrl) {
+            void this.router.navigate(['/workspace', 'xtreams', playlistId]);
+        } else if (playlist.macAddress) {
+            void this.router.navigate(['/workspace', 'stalker', playlistId]);
+        } else {
+            void this.router.navigate(['/workspace', 'playlists', playlistId]);
+        }
+    }
+
+    onSearchInput(value: string): void {
+        this.searchQuery.set(value);
+        this.scheduleSearchApply(value);
+    }
+
+    onSearchEnter(value: string): void {
+        const trimmedValue = value.trim();
+        this.searchQuery.set(trimmedValue);
+
+        if (this.searchCapability().behavior === 'advanced-only') {
+            const advancedRouteTarget =
+                this.searchCapability().advancedRouteTarget;
+            if (!advancedRouteTarget) {
+                this.applySearchQuery(trimmedValue);
+                return;
+            }
+
+            this.xtreamStore.setSearchTerm(trimmedValue);
+            this.applySearchQuery(trimmedValue);
+            void this.router.navigate(advancedRouteTarget, {
+                queryParams: trimmedValue ? { q: trimmedValue } : {},
+            });
+            return;
+        }
+
+        this.applySearchQuery(trimmedValue);
+    }
+
+    openAddPlaylistDialog(): void {
+        this.workspaceActions.openAddPlaylistDialog();
+    }
+
+    openCommandPalette(): void {
+        if (this.commandPaletteRef) {
+            this.commandPaletteRef.close();
+            return;
+        }
+
+        const commands = this.commandPaletteCommands();
+        const dialogRef = this.dialog.open<
+            WorkspaceCommandPaletteComponent,
+            { commands: WorkspaceResolvedCommandItem[]; query: string },
+            WorkspaceCommandSelection | undefined
+        >(WorkspaceCommandPaletteComponent, {
+            width: 'min(760px, 92vw)',
+            maxWidth: '92vw',
+            panelClass: 'workspace-command-palette-overlay',
+            autoFocus: false,
+            data: {
+                commands,
+                query: this.searchQuery(),
+            },
+        });
+        this.commandPaletteRef = dialogRef;
+
+        dialogRef
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((selection) => {
+                this.commandPaletteRef = null;
+                if (!selection) {
+                    return;
+                }
+
+                const command = commands.find(
+                    (item) =>
+                        item.id === selection.commandId &&
+                        item.visible &&
+                        item.enabled
+                );
+                command?.run({ query: selection.query.trim() });
+            });
+    }
+
+    async runHeaderBulkAction(): Promise<void> {
+        const context = this.currentContext();
+        const section = this.currentSection();
+
+        if (!context || section !== 'recent') {
+            return;
+        }
+
+        if (context.provider === 'xtreams') {
+            this.xtreamStore.clearRecentItems({ id: context.playlistId });
+            return;
+        }
+
+        if (context.provider === 'stalker') {
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.clearPortalRecentlyViewed(
+                    context.playlistId
+                )
+            );
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({
+                    playlist: {
+                        _id: context.playlistId,
+                        recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                    } as PlaylistMeta,
+                })
+            );
+            this.bumpRefreshQueryParam();
+            return;
+        }
+
+        if (context.provider === 'playlists') {
+            const updatedPlaylist = await firstValueFrom(
+                this.playlistsService.clearM3uRecentlyViewed(context.playlistId)
+            );
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({
+                    playlist: {
+                        _id: context.playlistId,
+                        recentlyViewed: updatedPlaylist?.recentlyViewed ?? [],
+                    } as PlaylistMeta,
+                })
+            );
+            this.bumpRefreshQueryParam();
+        }
+    }
+
+    navigateToGlobalFavorites(): void {
+        void this.router.navigate(['/workspace/global-favorites']);
+    }
+
+    openDownloadsShortcut(): void {
+        void this.router.navigate(['/workspace/downloads']);
+    }
+
+    runHeaderShortcut(): void {
+        this.headerShortcut()?.run();
+    }
+
+    openGlobalSearch(initialQuery = ''): void {
+        this.workspaceActions.openGlobalSearch(initialQuery);
+    }
+
+    openGlobalRecent(): void {
+        this.workspaceActions.openGlobalRecent();
+    }
+
+    openPlaylistInfo(): void {
+        const playlist = this.activePlaylist();
+        if (!playlist) {
+            return;
+        }
+
+        this.dialog.open(PlaylistInfoComponent, {
+            data: playlist,
+        });
+    }
+
+    cancelXtreamImport(): void {
+        void this.xtreamStore.cancelImport();
+    }
+
+    openAccountInfo(): void {
+        if (!this.canOpenAccountInfo()) {
+            return;
+        }
+
+        const data: WorkspaceAccountInfoData = {
+            vodStreamsCount: this.xtreamStore.vodStreams().length,
+            liveStreamsCount: this.xtreamStore.liveStreams().length,
+            seriesCount: this.xtreamStore.serialStreams().length,
+        };
+        this.workspaceActions.openAccountInfo(data);
+    }
+
+    refreshCurrentPlaylist(): void {
+        const playlist = this.activePlaylist();
+
+        if (!playlist || !this.canRefreshPlaylist()) {
+            return;
+        }
+
+        this.playlistRefreshAction.refresh(playlist);
+    }
+
+    private getCommandPaletteItems(): WorkspaceResolvedCommandItem[] {
+        this.languageTick();
+
+        return [
+            ...this.getViewCommandDefinitions(),
+            ...this.getPlaylistCommandDefinitions(),
+            ...this.getGlobalCommandDefinitions(),
+            ...this.viewCommands.commands(),
+        ]
+            .map((command) => this.resolveCommand(command))
+            .filter((command) => command.visible)
+            .sort((left, right) => this.comparePaletteCommands(left, right));
+    }
+
+    private getViewCommandDefinitions(): WorkspaceCommandContribution[] {
+        const context = this.currentContext();
+        const section = this.currentSection();
+
+        if (!context || !section) {
+            return [];
+        }
+
+        if (context.provider === 'playlists') {
+            return this.getM3uNavigationCommands(context, section);
+        }
+
+        if (context.provider === 'xtreams' || context.provider === 'stalker') {
+            return this.getPortalNavigationCommands(context, section);
+        }
+
+        return [];
+    }
+
+    private getPlaylistCommandDefinitions(): WorkspaceCommandContribution[] {
+        const route = this.currentRoute();
+        const context = route.context;
+
+        if (
+            !context ||
+            (context.provider !== 'xtreams' &&
+                context.provider !== 'stalker' &&
+                context.provider !== 'playlists')
+        ) {
+            return [];
+        }
+
+        const hasActivePlaylist = !!this.activePlaylist();
+        const canOpenPlaylistSearch =
+            context.provider === 'xtreams' || context.provider === 'stalker';
+
+        return [
+            {
+                id: 'playlist-search',
+                group: 'playlist',
+                icon: 'playlist_play',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.PLAYLIST_SEARCH_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.PLAYLIST_SEARCH_DESCRIPTION',
+                priority: 10,
+                visible: canOpenPlaylistSearch,
+                run: ({ query }) => this.openPlaylistSearchFromPalette(query),
+            },
+            {
+                id: 'refresh-playlist',
+                group: 'playlist',
+                icon: 'sync',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.REFRESH_PLAYLIST_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.REFRESH_PLAYLIST_DESCRIPTION',
+                priority: 20,
+                visible: this.canRefreshPlaylist(),
+                run: () => this.refreshCurrentPlaylist(),
+            },
+            {
+                id: 'playlist-info',
+                group: 'playlist',
+                icon: 'info',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.PLAYLIST_INFO_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.PLAYLIST_INFO_DESCRIPTION',
+                priority: 30,
+                visible: hasActivePlaylist,
+                run: () => this.openPlaylistInfo(),
+            },
+            {
+                id: 'account-info',
+                group: 'playlist',
+                icon: 'account_circle',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.ACCOUNT_INFO_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.ACCOUNT_INFO_DESCRIPTION',
+                priority: 40,
+                visible: context.provider === 'xtreams',
+                run: () => this.openAccountInfo(),
+            },
+        ];
+    }
+
+    private getGlobalCommandDefinitions(): WorkspaceCommandContribution[] {
+        const route = this.currentRoute();
+        const hasXtreamPlaylists = this.playlists().some(
+            (playlist) => !!playlist.serverUrl
+        );
+
+        return [
+            {
+                id: 'global-search',
+                group: 'global',
+                icon: 'search',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.GLOBAL_SEARCH_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.GLOBAL_SEARCH_DESCRIPTION',
+                priority: 10,
+                visible: hasXtreamPlaylists,
+                keywords: ['xtream'],
+                run: ({ query }) => this.openGlobalSearch(query),
+            },
+            {
+                id: 'open-global-favorites',
+                group: 'global',
+                icon: 'star',
+                labelKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_GLOBAL_FAVORITES_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_GLOBAL_FAVORITES_DESCRIPTION',
+                priority: 20,
+                visible: route.kind !== 'global-favorites',
+                run: () => this.navigateToGlobalFavorites(),
+            },
+            {
+                id: 'open-global-recent',
+                group: 'global',
+                icon: 'history',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.OPEN_GLOBAL_RECENT_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_GLOBAL_RECENT_DESCRIPTION',
+                priority: 30,
+                visible: route.kind !== 'global-recent',
+                run: () => this.openGlobalRecent(),
+            },
+            {
+                id: 'open-downloads',
+                group: 'global',
+                icon: 'download',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.OPEN_DOWNLOADS_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_DOWNLOADS_DESCRIPTION',
+                priority: 40,
+                visible: this.isElectron && route.kind !== 'downloads',
+                run: () => this.openDownloadsShortcut(),
+            },
+            {
+                id: 'open-settings',
+                group: 'global',
+                icon: 'settings',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.OPEN_SETTINGS_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_SETTINGS_DESCRIPTION',
+                priority: 50,
+                visible: route.kind !== 'settings',
+                run: () => {
+                    void this.router.navigate(['/workspace', 'settings']);
+                },
+            },
+            {
+                id: 'open-sources',
+                group: 'global',
+                icon: 'library_books',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.OPEN_SOURCES_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_SOURCES_DESCRIPTION',
+                priority: 60,
+                visible: route.kind !== 'sources',
+                run: () => {
+                    void this.router.navigate(['/workspace', 'sources']);
+                },
+            },
+            {
+                id: 'open-dashboard',
+                group: 'global',
+                icon: 'dashboard',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.OPEN_DASHBOARD_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.OPEN_DASHBOARD_DESCRIPTION',
+                priority: 70,
+                visible: this.showDashboard() && route.kind !== 'dashboard',
+                run: () => {
+                    void this.router.navigate(['/workspace', 'dashboard']);
+                },
+            },
+            {
+                id: 'add-playlist',
+                group: 'global',
+                icon: 'add_circle_outline',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_DESCRIPTION',
+                priority: 80,
+                visible: !this.productBranding?.xtreamOnlyUi,
+                run: () => this.openAddPlaylistDialog(),
+            },
+            {
+                id: 'add-playlist-m3u',
+                group: 'global',
+                icon: 'folder_open',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_M3U_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_M3U_DESCRIPTION',
+                keywords: ['m3u', 'm3u8', 'file', 'url', 'add', 'import'],
+                priority: 79,
+                visible: !this.productBranding?.xtreamOnlyUi,
+                run: () => this.workspaceActions.openAddPlaylistDialog('url'),
+            },
+            {
+                id: 'add-playlist-xtream',
+                group: 'global',
+                icon: 'cloud',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_XTREAM_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_XTREAM_DESCRIPTION',
+                keywords: ['xtream', 'codes', 'iptv', 'add', 'import'],
+                priority: 78,
+                run: () =>
+                    this.workspaceActions.openAddPlaylistDialog('xtream'),
+            },
+            {
+                id: 'add-playlist-stalker',
+                group: 'global',
+                icon: 'cast',
+                labelKey: 'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_STALKER_LABEL',
+                descriptionKey:
+                    'WORKSPACE.SHELL.COMMANDS.ADD_PLAYLIST_STALKER_DESCRIPTION',
+                keywords: ['stalker', 'portal', 'mac', 'ministra', 'add'],
+                priority: 77,
+                visible: !this.productBranding?.xtreamOnlyUi,
+                run: () =>
+                    this.workspaceActions.openAddPlaylistDialog('stalker'),
+            },
+        ];
+    }
+
+    private getPortalNavigationCommands(
+        context: WorkspacePortalContext,
+        section: PortalRailSection
+    ): WorkspaceCommandContribution[] {
+        const liveSection = context.provider === 'stalker' ? 'itv' : 'live';
+
+        return [
+            this.createNavigationCommand({
+                id: 'go-to-vod',
+                context,
+                targetSection: 'vod',
+                currentSection: section,
+                icon: 'movie',
+                labelKey: 'WORKSPACE.SHELL.RAIL_MOVIES',
+                priority: 100,
+            }),
+            this.createNavigationCommand({
+                id: 'go-to-live',
+                context,
+                targetSection: liveSection,
+                currentSection: section,
+                icon: 'live_tv',
+                labelKey: 'WORKSPACE.SHELL.RAIL_LIVE',
+                priority: 110,
+            }),
+            this.createNavigationCommand({
+                id: 'go-to-series',
+                context,
+                targetSection: 'series',
+                currentSection: section,
+                icon: 'video_library',
+                labelKey: 'WORKSPACE.SHELL.RAIL_SERIES',
+                priority: 120,
+            }),
+        ].filter(
+            (command): command is WorkspaceCommandContribution => command !== null
+        );
+    }
+
+    private getM3uNavigationCommands(
+        context: WorkspacePortalContext,
+        section: PortalRailSection
+    ): WorkspaceCommandContribution[] {
+        return [
+            this.createNavigationCommand({
+                id: 'go-to-all',
+                context,
+                targetSection: 'all',
+                currentSection: section,
+                icon: 'format_list_bulleted',
+                labelKey: 'WORKSPACE.SHELL.RAIL_ALL_CHANNELS',
+                priority: 100,
+            }),
+            this.createNavigationCommand({
+                id: 'go-to-groups',
+                context,
+                targetSection: 'groups',
+                currentSection: section,
+                icon: 'folder_open',
+                labelKey: 'WORKSPACE.SHELL.RAIL_GROUPS',
+                priority: 110,
+            }),
+            this.createNavigationCommand({
+                id: 'go-to-favorites',
+                context,
+                targetSection: 'favorites',
+                currentSection: section,
+                icon: 'star',
+                labelKey: 'WORKSPACE.SHELL.RAIL_FAVORITES',
+                priority: 120,
+            }),
+            this.createNavigationCommand({
+                id: 'go-to-recent',
+                context,
+                targetSection: 'recent',
+                currentSection: section,
+                icon: 'history',
+                labelKey: 'WORKSPACE.SHELL.RAIL_RECENT',
+                priority: 130,
+            }),
+        ].filter(
+            (command): command is WorkspaceCommandContribution => command !== null
+        );
+    }
+
+    private createNavigationCommand(config: {
+        id: string;
+        context: WorkspacePortalContext;
+        targetSection: string;
+        currentSection: PortalRailSection;
+        icon: string;
+        labelKey: string;
+        priority: number;
+    }): WorkspaceCommandContribution | null {
+        if (config.currentSection === config.targetSection) {
+            return null;
+        }
+
+        return {
+            id: config.id,
+            group: 'view',
+            icon: config.icon,
+            labelKey: config.labelKey,
+            descriptionKey: 'WORKSPACE.SHELL.COMMANDS.OPEN_VIEW_DESCRIPTION',
+            descriptionParams: () => ({
+                view: this.translateText(config.labelKey),
+            }),
+            priority: config.priority,
+            run: () => {
+                void this.router.navigate([
+                    '/workspace',
+                    config.context.provider,
+                    config.context.playlistId,
+                    config.targetSection,
+                ]);
+            },
+        };
+    }
+
+    private resolveCommand(
+        command: WorkspaceCommandContribution
+    ): WorkspaceResolvedCommandItem {
+        const labelParams = this.resolveCommandValue(command.labelParams);
+        const descriptionParams = this.resolveCommandValue(
+            command.descriptionParams
+        );
+
+        return {
+            id: command.id,
+            group: command.group,
+            icon: command.icon,
+            label: this.translateText(command.labelKey, labelParams),
+            description: command.descriptionKey
+                ? this.translateText(command.descriptionKey, descriptionParams)
+                : '',
+            keywords: this.resolveCommandValue(command.keywords) ?? [],
+            priority: command.priority ?? 100,
+            visible: this.resolveCommandValue(command.visible) ?? true,
+            enabled: this.resolveCommandValue(command.enabled) ?? true,
+            run: command.run,
+        };
+    }
+
+    private comparePaletteCommands(
+        left: WorkspaceResolvedCommandItem,
+        right: WorkspaceResolvedCommandItem
+    ): number {
+        const groupOrder =
+            this.getCommandGroupOrder(left.group) -
+            this.getCommandGroupOrder(right.group);
+
+        if (groupOrder !== 0) {
+            return groupOrder;
+        }
+
+        if (left.priority !== right.priority) {
+            return left.priority - right.priority;
+        }
+
+        return left.label.localeCompare(right.label);
+    }
+
+    private getCommandGroupOrder(group: WorkspaceResolvedCommandItem['group']) {
+        switch (group) {
+            case 'view':
+                return 0;
+            case 'playlist':
+                return 1;
+            default:
+                return 2;
+        }
+    }
+
+    private resolveCommandValue<T>(
+        value: T | (() => T | undefined) | undefined
+    ): T | undefined {
+        if (typeof value === 'function') {
+            return (value as () => T | undefined)();
+        }
+
+        return value;
+    }
+
+    private openPlaylistSearchFromPalette(query: string): void {
+        const effectiveContext =
+            this.dashboardXtreamContext() ?? this.currentContext();
+
+        if (!effectiveContext) {
+            return;
+        }
+
+        this.searchQuery.set(query);
+        this.appliedSearchQuery.set(query);
+
+        if (effectiveContext.provider === 'xtreams') {
+            this.xtreamStore.setSearchTerm(query);
+            void this.router.navigate(
+                [
+                    '/workspace',
+                    'xtreams',
+                    effectiveContext.playlistId,
+                    'search',
+                ],
+                {
+                    queryParams: query ? { q: query } : {},
+                }
+            );
+            return;
+        }
+
+        if (effectiveContext.provider === 'stalker') {
+            void this.router.navigate(
+                [
+                    '/workspace',
+                    'stalker',
+                    effectiveContext.playlistId,
+                    'search',
+                ],
+                {
+                    queryParams: query ? { q: query } : {},
+                }
+            );
+        }
+    }
+
+    private syncSearchFromRoute(): void {
+        if (this.currentRoute().usesQuerySearch) {
+            this.setSearchState(this.getRouteQueryParam('q'));
+            return;
+        }
+
+        this.setSearchState('');
+    }
+
+    private setSearchState(value: string): void {
+        if (this.searchDebounceTimeoutId !== null) {
+            clearTimeout(this.searchDebounceTimeoutId);
+            this.searchDebounceTimeoutId = null;
+        }
+
+        this.searchQuery.set(value);
+        this.appliedSearchQuery.set(value);
+    }
+
+    private scheduleSearchApply(value: string): void {
+        if (this.searchDebounceTimeoutId !== null) {
+            clearTimeout(this.searchDebounceTimeoutId);
+        }
+
+        this.searchDebounceTimeoutId = setTimeout(() => {
+            this.searchDebounceTimeoutId = null;
+            this.applySearchQuery(value);
+        }, SEARCH_INPUT_DEBOUNCE_MS);
+    }
+
+    private applySearchQuery(value: string): void {
+        this.appliedSearchQuery.set(value);
+    }
+
+    private syncSearchQueryParam(term: string): void {
+        const nextTerm = term.trim();
+        const currentTerm = this.getRouteQueryParam('q');
+        if (nextTerm === currentTerm) {
+            return;
+        }
+
+        const routePath = this.currentUrl().split('?')[0];
+        const queryParams = {
+            ...this.router.parseUrl(this.currentUrl()).queryParams,
+        };
+
+        if (nextTerm.length > 0) {
+            queryParams['q'] = nextTerm;
+        } else {
+            delete queryParams['q'];
+        }
+
+        const queryString = this.toQueryString(queryParams);
+        const nextUrl = queryString ? `${routePath}?${queryString}` : routePath;
+        void this.router.navigateByUrl(nextUrl, { replaceUrl: true });
+    }
+
+    private getRouteQueryParam(name: string): string {
+        const value = this.router.parseUrl(this.currentUrl()).queryParams[name];
+        return typeof value === 'string' ? value : '';
+    }
+
+    private toQueryString(queryParams: Record<string, unknown>): string {
+        const urlSearchParams = new URLSearchParams();
+
+        Object.entries(queryParams).forEach(([key, value]) => {
+            if (value == null) {
+                return;
+            }
+
+            if (Array.isArray(value)) {
+                value.forEach((item) =>
+                    urlSearchParams.append(key, String(item))
+                );
+                return;
+            }
+
+            urlSearchParams.set(key, String(value));
+        });
+
+        return urlSearchParams.toString();
+    }
+
+    private bumpRefreshQueryParam(): void {
+        const routePath = this.currentUrl().split('?')[0];
+        const queryParams = {
+            ...this.router.parseUrl(this.currentUrl()).queryParams,
+            refresh: Date.now().toString(),
+        };
+
+        const queryString = this.toQueryString(queryParams);
+        const nextUrl = queryString ? `${routePath}?${queryString}` : routePath;
+        void this.router.navigateByUrl(nextUrl, { replaceUrl: true });
+    }
+
+    private isRecentCleanupDisabled(
+        provider: WorkspacePortalContext['provider']
+    ): boolean {
+        if (provider === 'xtreams') {
+            return this.xtreamStore.recentItems().length === 0;
+        }
+
+        if (provider === 'playlists') {
+            return (this.activePlaylist()?.recentlyViewed?.length ?? 0) === 0;
+        }
+
+        return false;
+    }
+
+    private getProviderFromPlaylist(playlist: {
+        serverUrl?: string;
+        macAddress?: string;
+    }): WorkspacePortalContext['provider'] {
+        if (playlist.serverUrl) {
+            return 'xtreams';
+        }
+        if (playlist.macAddress) {
+            return 'stalker';
+        }
+        return 'playlists';
+    }
+
+    private resolveSearchPlaceholderKey(
+        kind: WorkspaceShellPageKind,
+        context: WorkspacePortalContext | null,
+        section: PortalRailSection | null
+    ): string {
+        if (kind === 'sources') {
+            return SEARCH_SOURCES_PLACEHOLDER;
+        }
+
+        if (kind === 'dashboard' || section === 'search') {
+            return SEARCH_PLAYLIST_PLACEHOLDER;
+        }
+
+        if (
+            context &&
+            (section === 'vod' ||
+                section === 'series' ||
+                section === 'live' ||
+                section === 'itv')
+        ) {
+            return SEARCH_SECTION_PLACEHOLDER;
+        }
+
+        return FILTER_SECTION_PLACEHOLDER;
+    }
+
+    private resolveSearchScopeLabel(
+        kind: WorkspaceShellPageKind,
+        context: WorkspacePortalContext | null,
+        section: PortalRailSection | null
+    ): string {
+        if (kind === 'sources') {
+            return this.translateText('WORKSPACE.SHELL.RAIL_SOURCES');
+        }
+
+        if (kind === 'global-favorites') {
+            return this.translateText('HOME.PLAYLISTS.GLOBAL_FAVORITES');
+        }
+
+        if (kind === 'global-recent') {
+            return this.translateText('PORTALS.RECENTLY_VIEWED');
+        }
+
+        if (kind === 'downloads') {
+            return this.translateText('WORKSPACE.SHELL.RAIL_DOWNLOADS');
+        }
+
+        if (kind === 'dashboard' || section === 'search') {
+            return this.translateText('WORKSPACE.SHELL.RAIL_SEARCH');
+        }
+
+        if (!context || !section) {
+            return '';
+        }
+
+        if (
+            section === 'vod' ||
+            section === 'series' ||
+            section === 'live' ||
+            section === 'itv'
+        ) {
+            const categoryLabel = this.resolveActiveCategoryLabel(
+                context,
+                section
+            );
+            const sectionLabel = this.translateRailSection(section);
+
+            return categoryLabel
+                ? `${sectionLabel} / ${categoryLabel}`
+                : sectionLabel;
+        }
+
+        return this.translateRailSection(section);
+    }
+
+    private resolveActiveCategoryLabel(
+        context: WorkspacePortalContext,
+        section: PortalRailSection
+    ): string {
+        if (context.provider === 'xtreams') {
+            const category = this.xtreamStore.getSelectedCategory();
+            return (
+                category?.category_name ??
+                category?.name ??
+                this.translateRailSection(section)
+            );
+        }
+
+        if (context.provider === 'stalker') {
+            return (
+                this.stalkerStore.getSelectedCategoryName().trim() ||
+                this.translateRailSection(section)
+            );
+        }
+
+        return this.translateRailSection(section);
+    }
+
+    private translateRailSection(section: PortalRailSection): string {
+        return this.translateText(this.getRailTooltipKey('playlists', section));
+    }
+
+    private formatLocalizedNumber(value: number): string {
+        const locale =
+            this.translate.currentLang || this.translate.defaultLang || 'en';
+        return new Intl.NumberFormat(locale).format(value);
+    }
+
+    private translateText(
+        key: string,
+        params?: Record<string, string | number>
+    ): string {
+        return this.translate.instant(key, params);
+    }
+
+    private translateRailLinks(
+        links: PortalRailLink[],
+        provider: WorkspacePortalContext['provider']
+    ): PortalRailLink[] {
+        return links.map((link) => ({
+            ...link,
+            tooltip: this.translateText(
+                this.getRailTooltipKey(provider, link.section)
+            ),
+        }));
+    }
+
+    private getRailTooltipKey(
+        provider: WorkspacePortalContext['provider'],
+        section?: PortalRailSection
+    ): string {
+        if (provider === 'xtreams' && section === 'library') {
+            return 'WORKSPACE.SHELL.RAIL_LIBRARY';
+        }
+
+        return (
+            (section ? RAIL_TOOLTIP_KEYS[section] : null) ??
+            'WORKSPACE.SHELL.RAIL_CONTEXT_ACTIONS'
+        );
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html
new file mode 100644
index 0000000..e7d897f
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html
@@ -0,0 +1,148 @@
+<div
+    class="workspace-shell"
+    appPlaylistDropZone
+    #dropZone="playlistDropZone"
+>
+    <app-playlist-drop-overlay [state]="dropZone.overlayState()" />
+    @if (facade.showXtreamImportOverlay()) {
+        <div class="workspace-loading-overlay">
+            <div class="workspace-loading-overlay__card">
+                <div class="workspace-loading-overlay__header">
+                    @if (facade.xtreamImportSourceLabel()) {
+                        <span
+                            class="workspace-loading-overlay__badge"
+                            [class.workspace-loading-overlay__badge--remote]="
+                                facade.xtreamImportPhaseTone() === 'remote'
+                            "
+                        >
+                            {{ facade.xtreamImportSourceLabel() }}
+                        </span>
+                    }
+                    <h3>{{ facade.xtreamImportTitleLabel() }}</h3>
+                </div>
+                @if (facade.xtreamImportPhaseLabel()) {
+                    <p
+                        class="workspace-loading-overlay__phase"
+                        aria-live="polite"
+                    >
+                        {{ facade.xtreamImportPhaseLabel() }}
+                    </p>
+                }
+                @if (facade.xtreamImportDetailLabel()) {
+                    <p class="workspace-loading-overlay__detail">
+                        {{ facade.xtreamImportDetailLabel() }}
+                    </p>
+                }
+                @if (
+                    facade.xtreamActiveImportCount() !== 0 &&
+                    facade.xtreamActiveItemsToImport() !== 0
+                ) {
+                    <mat-progress-bar
+                        mode="determinate"
+                        [value]="
+                            (facade.xtreamActiveImportCount() /
+                                facade.xtreamActiveItemsToImport()) *
+                            100
+                        "
+                    />
+                } @else {
+                    <mat-progress-bar mode="indeterminate" />
+                }
+                @if (facade.xtreamImportProgressLabel()) {
+                    <p class="workspace-loading-overlay__progress-copy">
+                        {{ facade.xtreamImportProgressLabel() }}
+                    </p>
+                }
+                @if (facade.canCancelXtreamImport()) {
+                    <button
+                        mat-stroked-button
+                        class="workspace-loading-overlay__action"
+                        type="button"
+                        [disabled]="facade.isCancellingXtreamImport()"
+                        (click)="facade.cancelXtreamImport()"
+                    >
+                        {{
+                            (facade.isCancellingXtreamImport()
+                                ? 'WORKSPACE.SHELL.XTREAM_IMPORT_CANCELLING'
+                                : 'WORKSPACE.SHELL.XTREAM_IMPORT_CANCEL'
+                            ) | translate
+                        }}
+                    </button>
+                }
+            </div>
+        </div>
+    }
+
+    <app-workspace-shell-rail
+        [isMacOS]="facade.isMacOS"
+        [brandLink]="facade.brandLink()"
+        [brandTooltipKey]="facade.brandTooltipKey()"
+        [brandAriaLabelKey]="facade.brandAriaLabelKey()"
+        [workspaceLinks]="facade.workspaceLinks()"
+        [primaryContextLinks]="facade.primaryContextLinks()"
+        [secondaryContextLinks]="facade.secondaryContextLinks()"
+        [selectedSection]="facade.currentSection()"
+        [railProviderClass]="facade.railProviderClass()"
+        [isSettingsRoute]="facade.isSettingsRoute()"
+    />
+
+    <app-workspace-shell-header
+        [playlistTitle]="facade.playlistTitle()"
+        [playlistSubtitle]="facade.playlistSubtitle()"
+        [canOpenPlaylistInfo]="facade.canOpenPlaylistInfo()"
+        [canOpenAccountInfo]="facade.canOpenAccountInfo()"
+        [searchQuery]="facade.searchQuery()"
+        [canUseSearch]="facade.canUseSearch()"
+        [searchPlaceholder]="facade.searchPlaceholder()"
+        [searchScopeLabel]="facade.searchScopeLabel()"
+        [searchStatusLabel]="facade.searchStatusLabel()"
+        [headerShortcut]="facade.headerShortcut()"
+        [canRefreshPlaylist]="facade.canRefreshPlaylist()"
+        [isRefreshingPlaylist]="facade.isRefreshingPlaylist()"
+        [isElectron]="facade.isElectron"
+        [hasNoPlaylists]="facade.hasNoPlaylists()"
+        [isDownloadsView]="facade.isDownloadsView()"
+        [hasActiveDownloads]="facade.hasActiveDownloads()"
+        [showQuickPlayerSelect]="facade.isElectron"
+        [quickHeaderPlayerValue]="facade.quickHeaderPlayerValue()"
+        (quickHeaderPlayerChange)="facade.setQuickHeaderPlayer($event)"
+        (refreshPlaylistRequested)="facade.refreshCurrentPlaylist()"
+        (searchChanged)="facade.onSearchInput($event)"
+        (searchSubmitted)="facade.onSearchEnter($event)"
+        (commandPaletteRequested)="facade.openCommandPalette()"
+        (addPlaylistRequested)="facade.openAddPlaylistDialog()"
+        (headerShortcutRequested)="facade.runHeaderShortcut()"
+        (downloadsRequested)="facade.openDownloadsShortcut()"
+        (playlistInfoRequested)="facade.openPlaylistInfo()"
+        (accountInfoRequested)="facade.openAccountInfo()"
+    />
+
+    <div class="workspace-body" [class.single-pane]="!facade.showContextPanel()">
+        @if (facade.showContextPanel()) {
+            <app-workspace-shell-context-sidebar
+                [variant]="facade.contextPanel()"
+                [context]="facade.currentContext()"
+                [section]="facade.currentSection()"
+                [hasPlaylists]="!facade.hasNoPlaylists()"
+            />
+        }
+
+        <main class="workspace-content">
+            <router-outlet />
+        </main>
+    </div>
+
+    @if (facade.showExternalPlaybackBar()) {
+        @if (facade.externalPlaybackSession(); as session) {
+            <footer class="workspace-now-playing">
+                <app-external-playback-dock
+                    [session]="session"
+                    (closeClicked)="facade.closeActiveExternalSession()"
+                    (artworkClicked)="
+                        facade.openActiveExternalSessionTarget()
+                    "
+                />
+            </footer>
+        }
+    }
+</div>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
new file mode 100644
index 0000000..d077df5
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
@@ -0,0 +1,225 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+
+.workspace-shell {
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    grid-template-rows: 56px minmax(0, 1fr) auto;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--app-shell-bg, var(--mat-sys-surface));
+    color: var(--mat-sys-on-surface);
+}
+
+app-workspace-shell-rail {
+    grid-column: 1;
+    grid-row: 1 / span 3;
+    min-height: 0;
+}
+
+app-workspace-shell-header {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+}
+
+.workspace-body {
+    grid-column: 2;
+    grid-row: 2;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--app-rail-bg, var(--mat-sys-surface-container-low));
+
+    &.single-pane {
+        grid-template-columns: 1fr;
+    }
+}
+
+app-workspace-shell-context-sidebar {
+    min-width: 0;
+    min-height: 0;
+}
+
+.workspace-now-playing {
+    grid-column: 2;
+    grid-row: 3;
+    padding: 0;
+    background: var(--app-content-bg, var(--mat-sys-surface));
+}
+
+.workspace-content {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    background: var(--app-content-bg, var(--mat-sys-surface));
+    border-radius: 16px 0 0 0;
+    box-shadow: -4px 8px 20px var(--app-content-shadow, rgba(0, 0, 0, 0.18));
+}
+
+.workspace-loading-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background:
+        radial-gradient(
+            circle at top,
+            rgba(99, 120, 255, 0.12),
+            transparent 34%
+        ),
+        rgba(8, 10, 16, 0.68);
+    backdrop-filter: blur(14px);
+    z-index: 1000;
+}
+
+.workspace-loading-overlay__card {
+    width: min(440px, 100%);
+    display: grid;
+    gap: 14px;
+    padding: 24px 24px 20px;
+    border-radius: 24px;
+    border: 1px solid var(--app-separator, rgba(255, 255, 255, 0.12));
+    background:
+        linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.06),
+            rgba(255, 255, 255, 0)
+        ),
+        var(--mat-sys-surface-container-high);
+    box-shadow:
+        0 24px 64px rgba(0, 0, 0, 0.32),
+        0 1px 0 rgba(255, 255, 255, 0.05) inset;
+    text-align: center;
+    animation: workspace-loading-overlay-enter 180ms ease-out;
+
+    h3 {
+        margin: 0;
+        font-size: 1.55rem;
+        font-weight: 650;
+        letter-spacing: -0.03em;
+        color: var(--app-heading-color, var(--mat-sys-on-surface));
+    }
+}
+
+.workspace-loading-overlay__header {
+    display: grid;
+    gap: 10px;
+    justify-items: center;
+}
+
+.workspace-loading-overlay__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(120, 220, 255, 0.24);
+    background: rgba(120, 220, 255, 0.08);
+    color: rgba(164, 233, 255, 1);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.workspace-loading-overlay__badge--remote {
+    border-color: rgba(105, 195, 255, 0.34);
+    background: rgba(83, 158, 255, 0.12);
+    color: rgba(202, 230, 255, 1);
+}
+
+.workspace-loading-overlay__phase,
+.workspace-loading-overlay__detail,
+.workspace-loading-overlay__progress-copy {
+    margin: 0;
+}
+
+.workspace-loading-overlay__phase {
+    font-size: 1rem;
+    font-weight: 560;
+    color: var(--app-body-color, var(--mat-sys-on-surface));
+}
+
+.workspace-loading-overlay__detail {
+    max-width: 32ch;
+    justify-self: center;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    line-height: 1.45;
+}
+
+.workspace-loading-overlay__progress-copy {
+    max-width: 30ch;
+    justify-self: center;
+    line-height: 1.45;
+    font-variant-numeric: tabular-nums;
+    color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
+    text-wrap: balance;
+}
+
+.workspace-loading-overlay__action {
+    justify-self: center;
+    min-width: 180px;
+    border-radius: 999px;
+}
+
+:host ::ng-deep .workspace-loading-overlay__card .mat-mdc-progress-bar {
+    overflow: hidden;
+    border-radius: 999px;
+}
+
+@keyframes workspace-loading-overlay-enter {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.985);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@media (max-width: 780px) {
+    .workspace-shell {
+        grid-template-columns: 56px 1fr;
+        grid-template-rows: 56px 1fr auto;
+    }
+}
+
+@media (max-width: 640px) {
+    .workspace-shell {
+        grid-template-columns: 1fr;
+        grid-template-rows: 52px 56px minmax(0, 1fr) auto;
+    }
+
+    app-workspace-shell-rail {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    app-workspace-shell-header {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    .workspace-body {
+        grid-column: 1;
+        grid-row: 3;
+    }
+
+    .workspace-now-playing {
+        grid-column: 1;
+        grid-row: 4;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts
new file mode 100644
index 0000000..d38ea5d
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.spec.ts
@@ -0,0 +1,259 @@
+import {
+    Component,
+    input,
+    output,
+    signal,
+} from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { RouterOutlet, provideRouter } from '@angular/router';
+import {
+    WorkspacePortalContext,
+    WorkspaceShellContextPanel,
+} from '@iptvnator/workspace/shell/util';
+import { WorkspaceShellComponent } from './workspace-shell.component';
+import {
+    WorkspaceHeaderBulkAction,
+    WorkspaceShellFacade,
+} from './services/workspace-shell.facade';
+import { VideoPlayer } from 'shared-interfaces';
+
+@Component({
+    selector: 'app-workspace-shell-rail',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceShellRailComponent {
+    readonly isMacOS = input(false);
+    readonly brandLink = input('/workspace/dashboard');
+    readonly brandTooltipKey = input('WORKSPACE.SHELL.RAIL_DASHBOARD');
+    readonly brandAriaLabelKey = input('WORKSPACE.SHELL.OPEN_DASHBOARD');
+    readonly workspaceLinks = input<unknown[]>([]);
+    readonly primaryContextLinks = input<unknown[]>([]);
+    readonly secondaryContextLinks = input<unknown[]>([]);
+    readonly selectedSection = input<string | null>(null);
+    readonly railProviderClass = input('');
+    readonly isSettingsRoute = input(false);
+}
+
+@Component({
+    selector: 'app-workspace-shell-header',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceShellHeaderComponent {
+    readonly playlistTitle = input('');
+    readonly playlistSubtitle = input('');
+    readonly canOpenPlaylistInfo = input(false);
+    readonly canOpenAccountInfo = input(false);
+    readonly searchQuery = input('');
+    readonly canUseSearch = input(false);
+    readonly searchPlaceholder = input('');
+    readonly searchScopeLabel = input('');
+    readonly searchStatusLabel = input('');
+    readonly headerShortcut = input<unknown>(null);
+    readonly canRefreshPlaylist = input(false);
+    readonly isRefreshingPlaylist = input(false);
+    readonly isElectron = input(false);
+    readonly isDownloadsView = input(false);
+    readonly hasActiveDownloads = input(false);
+    readonly hasNoPlaylists = input(false);
+    readonly showQuickPlayerSelect = input(false);
+    readonly quickHeaderPlayerValue = input(VideoPlayer.ArtPlayer);
+    readonly headerBulkAction = input<WorkspaceHeaderBulkAction | null>(null);
+    readonly searchChanged = output<string>();
+    readonly searchSubmitted = output<string>();
+    readonly commandPaletteRequested = output<void>();
+    readonly addPlaylistRequested = output<void>();
+    readonly headerShortcutRequested = output<void>();
+    readonly refreshPlaylistRequested = output<void>();
+    readonly downloadsRequested = output<void>();
+    readonly headerBulkActionRequested = output<void>();
+    readonly playlistInfoRequested = output<void>();
+    readonly accountInfoRequested = output<void>();
+    readonly quickHeaderPlayerChange = output<VideoPlayer>();
+}
+
+@Component({
+    selector: 'app-workspace-shell-context-sidebar',
+    template: '',
+    standalone: true,
+})
+class MockWorkspaceShellContextSidebarComponent {
+    readonly variant = input<WorkspaceShellContextPanel>('none');
+    readonly context = input<WorkspacePortalContext | null>(null);
+    readonly section = input<string | null>(null);
+}
+
+@Component({
+    selector: 'app-external-playback-dock',
+    template: '',
+    standalone: true,
+})
+class MockExternalPlaybackDockComponent {
+    readonly session = input<unknown>(null);
+    readonly closeClicked = output<void>();
+}
+
+class MockWorkspaceShellFacade {
+    readonly brandLink = signal('/workspace/dashboard');
+    readonly brandTooltipKey = signal('WORKSPACE.SHELL.RAIL_DASHBOARD');
+    readonly brandAriaLabelKey = signal('WORKSPACE.SHELL.OPEN_DASHBOARD');
+    readonly workspaceLinks = signal([]);
+    readonly primaryContextLinks = signal([]);
+    readonly secondaryContextLinks = signal([]);
+    readonly currentSection = signal<string | null>(null);
+    readonly railProviderClass = signal('rail-context-region');
+    readonly isSettingsRoute = signal(false);
+    readonly playlistTitle = signal('Playlist A');
+    readonly playlistSubtitle = signal('Subtitle');
+    readonly canOpenPlaylistInfo = signal(true);
+    readonly canOpenAccountInfo = signal(true);
+    readonly searchQuery = signal('');
+    readonly canUseSearch = signal(true);
+    readonly searchPlaceholder = signal(
+        'WORKSPACE.SHELL.SEARCH_PLAYLIST_PLACEHOLDER'
+    );
+    readonly searchScopeLabel = signal('Movies / All Items');
+    readonly searchStatusLabel = signal('');
+    readonly headerShortcut = signal(null);
+    readonly canRefreshPlaylist = signal(false);
+    readonly isRefreshingPlaylist = signal(false);
+    readonly isDownloadsView = signal(false);
+    readonly hasActiveDownloads = signal(false);
+    readonly headerBulkAction = signal<WorkspaceHeaderBulkAction | null>(null);
+    readonly showContextPanel = signal(true);
+    readonly contextPanel = signal<WorkspaceShellContextPanel>('settings');
+    readonly currentContext = signal<WorkspacePortalContext | null>(null);
+    readonly showExternalPlaybackBar = signal(true);
+    readonly externalPlaybackSession = signal({ id: 'session-1' });
+    readonly showXtreamImportOverlay = signal(false);
+    readonly xtreamImportCount = signal(0);
+    readonly xtreamItemsToImport = signal(0);
+    readonly xtreamActiveImportCount = signal(0);
+    readonly xtreamActiveItemsToImport = signal(0);
+    readonly xtreamImportTitleLabel = signal(
+        'WORKSPACE.SHELL.XTREAM_IMPORT_TITLE'
+    );
+    readonly xtreamImportSourceLabel = signal(
+        'WORKSPACE.SHELL.XTREAM_IMPORT_REMOTE_BADGE'
+    );
+    readonly xtreamImportPhaseLabel = signal(
+        'WORKSPACE.SHELL.XTREAM_IMPORT_LOADING'
+    );
+    readonly xtreamImportDetailLabel = signal(
+        'WORKSPACE.SHELL.XTREAM_IMPORT_DETAIL_REMOTE'
+    );
+    readonly xtreamImportProgressLabel = signal('');
+    readonly xtreamImportPhaseTone = signal<'remote' | 'local' | null>(
+        'remote'
+    );
+    readonly canCancelXtreamImport = signal(false);
+    readonly isCancellingXtreamImport = signal(false);
+    readonly isMacOS = true;
+    readonly isElectron = true;
+
+    onSearchInput = jest.fn();
+    onSearchEnter = jest.fn();
+    openCommandPalette = jest.fn();
+    openAddPlaylistDialog = jest.fn();
+    runHeaderShortcut = jest.fn();
+    refreshCurrentPlaylist = jest.fn();
+    openDownloadsShortcut = jest.fn();
+    runHeaderBulkAction = jest.fn();
+    openPlaylistInfo = jest.fn();
+    openAccountInfo = jest.fn();
+    closeActiveExternalSession = jest.fn();
+    cancelXtreamImport = jest.fn();
+}
+
+describe('WorkspaceShellComponent', () => {
+    it('creates and renders the shell composition with mocked children', async () => {
+        const facade = new MockWorkspaceShellFacade();
+
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceShellComponent],
+            providers: [provideRouter([])],
+        })
+            .overrideComponent(WorkspaceShellComponent, {
+                set: {
+                    imports: [
+                        MatProgressBarModule,
+                        RouterOutlet,
+                        MockExternalPlaybackDockComponent,
+                        MockWorkspaceShellContextSidebarComponent,
+                        MockWorkspaceShellHeaderComponent,
+                        MockWorkspaceShellRailComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: WorkspaceShellFacade,
+                            useValue: facade,
+                        },
+                    ],
+                },
+            })
+            .compileComponents();
+
+        const fixture = TestBed.createComponent(WorkspaceShellComponent);
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance).toBeTruthy();
+        expect(
+            fixture.nativeElement.querySelector('app-workspace-shell-rail')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('app-workspace-shell-header')
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector(
+                'app-workspace-shell-context-sidebar'
+            )
+        ).not.toBeNull();
+        expect(
+            fixture.nativeElement.querySelector('app-external-playback-dock')
+        ).not.toBeNull();
+    });
+
+    it('renders type-aware xtream import progress copy in the overlay', async () => {
+        const facade = new MockWorkspaceShellFacade();
+
+        await TestBed.configureTestingModule({
+            imports: [WorkspaceShellComponent],
+            providers: [provideRouter([])],
+        })
+            .overrideComponent(WorkspaceShellComponent, {
+                set: {
+                    imports: [
+                        MatProgressBarModule,
+                        RouterOutlet,
+                        MockExternalPlaybackDockComponent,
+                        MockWorkspaceShellContextSidebarComponent,
+                        MockWorkspaceShellHeaderComponent,
+                        MockWorkspaceShellRailComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: WorkspaceShellFacade,
+                            useValue: facade,
+                        },
+                    ],
+                },
+            })
+            .compileComponents();
+
+        facade.showXtreamImportOverlay.set(true);
+        facade.xtreamActiveImportCount.set(20);
+        facade.xtreamActiveItemsToImport.set(12323);
+        facade.xtreamImportProgressLabel.set('Movies imported: 20 / 12,323');
+
+        const fixture = TestBed.createComponent(WorkspaceShellComponent);
+        fixture.detectChanges();
+
+        expect(
+            fixture.nativeElement.querySelector(
+                '.workspace-loading-overlay__progress-copy'
+            )?.textContent
+        ).toContain('Movies imported: 20 / 12,323');
+    });
+});
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts
new file mode 100644
index 0000000..03ec1dc
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts
@@ -0,0 +1,39 @@
+import {
+    Component,
+    inject,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { RouterOutlet } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ExternalPlaybackDockComponent } from 'components';
+import {
+    PlaylistDropOverlayComponent,
+    PlaylistDropZoneDirective,
+} from '../playlist-drop-overlay';
+import { WorkspaceShellContextSidebarComponent } from './components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component';
+import { WorkspaceShellHeaderComponent } from './components/workspace-shell-header/workspace-shell-header.component';
+import { WorkspaceShellRailComponent } from './components/workspace-shell-rail/workspace-shell-rail.component';
+import { WorkspaceShellFacade } from './services/workspace-shell.facade';
+
+@Component({
+    selector: 'app-workspace-shell',
+    imports: [
+        ExternalPlaybackDockComponent,
+        MatButtonModule,
+        MatProgressBarModule,
+        PlaylistDropOverlayComponent,
+        PlaylistDropZoneDirective,
+        RouterOutlet,
+        TranslatePipe,
+        WorkspaceShellContextSidebarComponent,
+        WorkspaceShellHeaderComponent,
+        WorkspaceShellRailComponent,
+    ],
+    templateUrl: './workspace-shell.component.html',
+    styleUrl: './workspace-shell.component.scss',
+    providers: [WorkspaceShellFacade],
+})
+export class WorkspaceShellComponent {
+    readonly facade = inject(WorkspaceShellFacade);
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html
new file mode 100644
index 0000000..bea239e
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.html
@@ -0,0 +1,38 @@
+<div class="context-column">
+    <header class="context-header">
+        <div class="context-header__top">
+            <h2>{{ 'WORKSPACE.SOURCES.TITLE' | translate }}</h2>
+        </div>
+        <p>{{ 'WORKSPACE.SOURCES.SUBTITLE' | translate }}</p>
+    </header>
+
+    <div class="context-divider"></div>
+
+    <section class="panel-section">
+        <div class="nav-list option-list">
+            <h3 class="panel-section-title">
+                {{ 'WORKSPACE.SOURCES.TYPE' | translate }}
+            </h3>
+            @for (option of typeOptions; track option.id) {
+                <button
+                    type="button"
+                    class="nav-item category-item option-row"
+                    [class.selected]="isTypeActive(option.id)"
+                    (click)="selectType(option.id)"
+                >
+                    <mat-icon>{{ option.icon }}</mat-icon>
+                    <span class="nav-item-label option-label">
+                        {{
+                            option.translationKey
+                                ? (option.translationKey | translate)
+                                : option.label
+                        }}
+                    </span>
+                    <div class="nav-item-meta option-meta">
+                        {{ getTypeCount(option.id) }}
+                    </div>
+                </button>
+            }
+        </div>
+    </section>
+</div>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
new file mode 100644
index 0000000..8c0df9d
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
@@ -0,0 +1,102 @@
+@use '../../nav-list.scss';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+}
+
+.context-column {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+// ─── Header ───────────────────────────────────────────────────────────────────
+.context-header {
+    padding: 4px 6px 10px;
+    flex-shrink: 0;
+}
+
+.context-header__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    h2 {
+        margin: 0;
+        font-size: 0.94rem;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--mat-sys-on-surface);
+    }
+}
+
+.context-header p {
+    margin: 4px 0 0;
+    font-size: 0.78rem;
+    color: var(--mat-sys-on-surface-variant);
+}
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+.context-divider {
+    height: 1px;
+    background: var(--mat-sys-outline-variant);
+    margin: 0 0 6px;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+.panel-section {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.option-list {
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.option-row {
+    border-radius: 12px;
+    transition:
+        box-shadow 0.18s ease,
+        transform 0.18s ease;
+
+    .option-label,
+    .option-meta,
+    mat-icon {
+        transition: color 0.18s ease, opacity 0.18s ease;
+    }
+
+    &.selected {
+        box-shadow: 0 10px 20px -18px var(--app-selection-glow);
+        transform: translateY(-1px);
+
+        .option-label,
+        .option-meta,
+        mat-icon {
+            color: var(--app-selection-color) !important;
+        }
+
+        .option-meta {
+            opacity: 0.95;
+        }
+    }
+}
+
+.panel-section-title {
+    margin: 0;
+    padding: 10px 10px 6px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--mat-sys-on-surface-variant);
+    opacity: 0.85;
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts
new file mode 100644
index 0000000..630a4ff
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.ts
@@ -0,0 +1,100 @@
+import { computed, Component, inject } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { Store } from '@ngrx/store';
+import {
+    FilterActions,
+    selectActiveTypeFilters,
+    selectAllPlaylistsMeta,
+} from 'm3u-state';
+import { TranslatePipe } from '@ngx-translate/core';
+
+type PlaylistFilterId = 'all' | 'm3u' | 'xtream' | 'stalker';
+
+interface PlaylistFilterOption {
+    id: PlaylistFilterId;
+    icon: string;
+    label?: string;
+    translationKey?: string;
+}
+
+const ALL_FILTERS = ['m3u', 'xtream', 'stalker'];
+
+@Component({
+    selector: 'app-workspace-sources-filters-panel',
+    imports: [MatIcon, MatListModule, TranslatePipe],
+    templateUrl: './workspace-sources-filters-panel.component.html',
+    styleUrl: './workspace-sources-filters-panel.component.scss',
+})
+export class WorkspaceSourcesFiltersPanelComponent {
+    private readonly store = inject(Store);
+
+    private readonly activeTypeFilters = this.store.selectSignal(
+        selectActiveTypeFilters
+    );
+    private readonly playlists = this.store.selectSignal(selectAllPlaylistsMeta);
+
+    readonly typeOptions: PlaylistFilterOption[] = [
+        {
+            id: 'all',
+            icon: 'layers',
+            translationKey: 'WORKSPACE.SOURCES.ALL',
+        },
+        {
+            id: 'm3u',
+            icon: 'playlist_play',
+            translationKey: 'HOME.PLAYLIST_TYPES.M3U',
+        },
+        {
+            id: 'xtream',
+            icon: 'cloud',
+            translationKey: 'HOME.PLAYLIST_TYPES.XTREAM',
+        },
+        {
+            id: 'stalker',
+            icon: 'router',
+            translationKey: 'HOME.PLAYLIST_TYPES.STALKER',
+        },
+    ];
+
+    readonly typeCounts = computed(() => {
+        const items = this.playlists();
+        return {
+            all: items.length,
+            m3u: items.filter((item) => !item.serverUrl && !item.macAddress)
+                .length,
+            xtream: items.filter((item) => !!item.serverUrl).length,
+            stalker: items.filter((item) => !!item.macAddress).length,
+        };
+    });
+
+    isTypeActive(filterId: PlaylistFilterId): boolean {
+        const selected = this.activeTypeFilters();
+        if (filterId === 'all') {
+            return (
+                selected.length === ALL_FILTERS.length &&
+                ALL_FILTERS.every((id) => selected.includes(id))
+            );
+        }
+
+        return selected.length === 1 && selected[0] === filterId;
+    }
+
+    selectType(filterId: PlaylistFilterId): void {
+        const selectedFilters =
+            filterId === 'all' ? ALL_FILTERS : [filterId];
+        this.store.dispatch(
+            FilterActions.setSelectedFilters({
+                selectedFilters,
+            })
+        );
+    }
+
+    getTypeCount(filterId: PlaylistFilterId): number {
+        const counts = this.typeCounts();
+        if (filterId === 'all') {
+            return counts.all;
+        }
+        return counts[filterId];
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html
new file mode 100644
index 0000000..5dcd2bf
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.html
@@ -0,0 +1,45 @@
+<section
+    class="sources-page"
+    [class.sources-page--empty]="visibleSourcesCount() === 0"
+>
+    @if (visibleSourcesCount() > 0) {
+        <header class="sources-header">
+            <div class="sources-header__text">
+                <h2 class="sources-title">{{ title() }}</h2>
+                <p class="sources-subtitle">{{ subtitle() }}</p>
+            </div>
+            <button
+                type="button"
+                mat-stroked-button
+                class="sort-trigger"
+                [matMenuTriggerFor]="sortMenu"
+            >
+                <mat-icon>sort</mat-icon>
+                <span class="sort-trigger__label">{{ activeSortLabel() }}</span>
+                <mat-icon class="sort-trigger__caret">arrow_drop_down</mat-icon>
+            </button>
+            <mat-menu #sortMenu="matMenu" xPosition="before">
+                @for (option of sortOptions; track option.translationKey) {
+                    <button
+                        mat-menu-item
+                        type="button"
+                        [class.active-option]="isSortActive(option)"
+                        (click)="setSortOption(option)"
+                    >
+                        <mat-icon>{{ option.icon }}</mat-icon>
+                        <span>{{ option.translationKey | translate }}</span>
+                        @if (isSortActive(option)) {
+                            <mat-icon class="sort-menu__check">check</mat-icon>
+                        }
+                    </button>
+                }
+            </mat-menu>
+        </header>
+    }
+    <div class="sources-content">
+        <app-recent-playlists
+            [searchQueryInput]="searchQuery()"
+            (addPlaylistClicked)="onAddPlaylist($event)"
+        />
+    </div>
+</section>
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss
new file mode 100644
index 0000000..f315551
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.scss
@@ -0,0 +1,89 @@
+:host {
+    display: block;
+    height: 100%;
+    min-height: 100%;
+}
+
+.sources-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.sources-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    padding: 20px 20px 8px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.sources-header__text {
+    min-width: 0;
+    flex: 1;
+}
+
+.sources-title {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+}
+
+.sources-subtitle {
+    margin: 4px 0 0;
+    font-size: 0.875rem;
+    color: var(--mat-sys-on-surface-variant, rgba(255, 255, 255, 0.6));
+}
+
+.sort-trigger {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    .sort-trigger__label {
+        font-size: 0.85rem;
+        font-weight: 500;
+    }
+
+    .sort-trigger__caret {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        margin-left: -2px;
+    }
+}
+
+.sources-content {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 20px 20px;
+}
+
+.sources-content app-recent-playlists {
+    display: block;
+    height: 100%;
+}
+
+.sources-page--empty {
+    .sources-content {
+        padding: 0;
+        overflow: hidden;
+        display: flex;
+    }
+
+    .sources-content app-recent-playlists {
+        flex: 1;
+        height: 100%;
+        min-height: 0;
+        display: flex;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.ts b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.ts
new file mode 100644
index 0000000..121ed99
--- /dev/null
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources/workspace-sources.component.ts
@@ -0,0 +1,193 @@
+import { Component, computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { RecentPlaylistsComponent } from '@iptvnator/playlist/shared/ui';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { selectActiveTypeFilters, selectAllPlaylistsMeta } from 'm3u-state';
+import { map, startWith } from 'rxjs';
+import { SortBy, SortOrder, SortService } from 'services';
+import {
+    WORKSPACE_SHELL_ACTIONS,
+    WorkspacePlaylistType,
+} from '@iptvnator/workspace/shell/util';
+
+interface SortOption {
+    by: SortBy;
+    order: SortOrder;
+    icon: string;
+    translationKey: string;
+}
+
+@Component({
+    selector: 'app-workspace-sources',
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        RecentPlaylistsComponent,
+        TranslatePipe,
+    ],
+    templateUrl: './workspace-sources.component.html',
+    styleUrl: './workspace-sources.component.scss',
+})
+export class WorkspaceSourcesComponent {
+    private readonly route = inject(ActivatedRoute);
+    private readonly store = inject(Store);
+    private readonly workspaceActions = inject(WORKSPACE_SHELL_ACTIONS);
+    private readonly translate = inject(TranslateService);
+    private readonly sortService = inject(SortService);
+
+    private readonly activeTypeFilters = this.store.selectSignal(
+        selectActiveTypeFilters
+    );
+    private readonly playlists = this.store.selectSignal(
+        selectAllPlaylistsMeta
+    );
+    private readonly languageTick = toSignal(
+        this.translate.onLangChange.pipe(startWith(null)),
+        { initialValue: null }
+    );
+
+    readonly sortOptions: SortOption[] = [
+        {
+            by: SortBy.DATE_ADDED,
+            order: SortOrder.DESC,
+            icon: 'schedule',
+            translationKey: 'HOME.SORT_OPTIONS.NEWEST',
+        },
+        {
+            by: SortBy.DATE_ADDED,
+            order: SortOrder.ASC,
+            icon: 'history',
+            translationKey: 'HOME.SORT_OPTIONS.OLDEST',
+        },
+        {
+            by: SortBy.NAME,
+            order: SortOrder.ASC,
+            icon: 'sort_by_alpha',
+            translationKey: 'HOME.SORT_OPTIONS.NAME_ASC',
+        },
+        {
+            by: SortBy.NAME,
+            order: SortOrder.DESC,
+            icon: 'sort_by_alpha',
+            translationKey: 'HOME.SORT_OPTIONS.NAME_DESC',
+        },
+        {
+            by: SortBy.CUSTOM,
+            order: SortOrder.ASC,
+            icon: 'drag_indicator',
+            translationKey: 'HOME.SORT_OPTIONS.CUSTOM_ORDER',
+        },
+    ];
+
+    private readonly currentSortOptions = toSignal(
+        this.sortService.getSortOptions(),
+        { requireSync: true }
+    );
+
+    readonly searchQuery = toSignal(
+        this.route.queryParamMap.pipe(map((params) => params.get('q') ?? '')),
+        { initialValue: '' }
+    );
+    readonly title = computed(() => {
+        this.languageTick();
+
+        const filters = this.activeTypeFilters();
+
+        if (filters.length === 1) {
+            if (filters[0] === 'm3u') {
+                return this.translateText('WORKSPACE.SOURCES.M3U_PLAYLISTS');
+            }
+            if (filters[0] === 'xtream') {
+                return this.translateText('WORKSPACE.SOURCES.XTREAM_PLAYLISTS');
+            }
+            if (filters[0] === 'stalker') {
+                return this.translateText(
+                    'WORKSPACE.SOURCES.STALKER_PLAYLISTS'
+                );
+            }
+        }
+
+        return this.translateText('WORKSPACE.SOURCES.ALL_PLAYLISTS');
+    });
+
+    readonly visibleSourcesCount = computed(() => {
+        const query = this.searchQuery().trim().toLowerCase();
+        const filters = this.activeTypeFilters();
+        const allPlaylists = this.playlists();
+
+        return allPlaylists
+            .filter((item) => {
+                const isStalkerFilter =
+                    !!item.macAddress && filters.includes('stalker');
+                const isXtreamFilter =
+                    !!item.username &&
+                    !!item.password &&
+                    !!item.serverUrl &&
+                    filters.includes('xtream');
+                const isM3uFilter =
+                    !item.username &&
+                    !item.password &&
+                    !item.serverUrl &&
+                    !item.macAddress &&
+                    filters.includes('m3u');
+
+                return isStalkerFilter || isXtreamFilter || isM3uFilter;
+            })
+            .filter((item) => (item.title || '').toLowerCase().includes(query))
+            .length;
+    });
+
+    readonly subtitle = computed(() => {
+        this.languageTick();
+
+        const count = this.visibleSourcesCount();
+        if (count === 1) {
+            return this.translateText('WORKSPACE.SOURCES.PLAYLIST_COUNT_ONE');
+        }
+
+        return this.translateText('WORKSPACE.SOURCES.PLAYLIST_COUNT_OTHER', {
+            count,
+        });
+    });
+
+    readonly activeSortLabel = computed(() => {
+        this.languageTick();
+        const current = this.currentSortOptions();
+        const match = this.sortOptions.find(
+            (option) =>
+                option.by === current.by && option.order === current.order
+        );
+        return this.translateText(
+            match?.translationKey ?? 'HOME.SORT_OPTIONS.NEWEST'
+        );
+    });
+
+    onAddPlaylist(type?: WorkspacePlaylistType): void {
+        this.workspaceActions.openAddPlaylistDialog(type);
+    }
+
+    isSortActive(option: SortOption): boolean {
+        const current = this.currentSortOptions();
+        return current.by === option.by && current.order === option.order;
+    }
+
+    setSortOption(option: SortOption): void {
+        this.sortService.setSortOptions({
+            by: option.by,
+            order: option.order,
+        });
+    }
+
+    private translateText(
+        key: string,
+        params?: Record<string, string | number>
+    ): string {
+        return this.translate.instant(key, params);
+    }
+}
diff --git a/libs/workspace/shell/feature/src/nav-list.scss b/libs/workspace/shell/feature/src/nav-list.scss
new file mode 100644
index 0000000..79b6f46
--- /dev/null
+++ b/libs/workspace/shell/feature/src/nav-list.scss
@@ -0,0 +1 @@
+@use '../../../../../apps/web/src/nav-list.scss';
diff --git a/libs/workspace/shell/feature/src/test-setup.ts b/libs/workspace/shell/feature/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/workspace/shell/feature/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/workspace/shell/feature/tsconfig.json b/libs/workspace/shell/feature/tsconfig.json
new file mode 100644
index 0000000..dd63ae9
--- /dev/null
+++ b/libs/workspace/shell/feature/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/workspace/shell/feature/tsconfig.lib.json b/libs/workspace/shell/feature/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/workspace/shell/feature/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/workspace/shell/feature/tsconfig.spec.json b/libs/workspace/shell/feature/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/workspace/shell/feature/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/libs/workspace/shell/util/jest.config.ts b/libs/workspace/shell/util/jest.config.ts
new file mode 100644
index 0000000..e5d1fae
--- /dev/null
+++ b/libs/workspace/shell/util/jest.config.ts
@@ -0,0 +1,22 @@
+export default {
+    displayName: 'workspace-shell-util',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/workspace/shell/util',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+    moduleFileExtensions: ['ts', 'js', 'html'],
+};
diff --git a/libs/workspace/shell/util/project.json b/libs/workspace/shell/util/project.json
new file mode 100644
index 0000000..d8228d2
--- /dev/null
+++ b/libs/workspace/shell/util/project.json
@@ -0,0 +1,13 @@
+{
+    "name": "workspace-shell-util",
+    "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/workspace/shell/util/src",
+    "prefix": "lib",
+    "projectType": "library",
+    "tags": ["scope:workspace", "domain:workspace", "type:util"],
+    "targets": {
+        "lint": {
+            "executor": "@nx/eslint:lint"
+        }
+    }
+}
diff --git a/libs/workspace/shell/util/src/index.ts b/libs/workspace/shell/util/src/index.ts
new file mode 100644
index 0000000..7884980
--- /dev/null
+++ b/libs/workspace/shell/util/src/index.ts
@@ -0,0 +1,5 @@
+export * from './lib/settings-context.service';
+export * from './lib/navigation/workspace-shell-route.utils';
+export * from './lib/navigation/workspace-search-capability';
+export * from './lib/workspace-shell-actions';
+export * from './lib/workspace-startup-preferences.service';
diff --git a/libs/workspace/shell/util/src/lib/navigation/workspace-search-capability.ts b/libs/workspace/shell/util/src/lib/navigation/workspace-search-capability.ts
new file mode 100644
index 0000000..fc9d305
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/navigation/workspace-search-capability.ts
@@ -0,0 +1,25 @@
+import { PortalRailSection } from '@iptvnator/portal/shared/util';
+import {
+    WorkspacePortalContext,
+    WorkspaceShellSearchMode,
+} from './workspace-shell-route.utils';
+
+export type WorkspaceSearchBehavior =
+    | 'disabled'
+    | 'local-filter'
+    | 'remote-search'
+    | 'advanced-only'
+    | 'degraded-loaded-only';
+
+export interface WorkspaceSearchCapability {
+    enabled: boolean;
+    behavior: WorkspaceSearchBehavior;
+    context: WorkspacePortalContext | null;
+    section: PortalRailSection | null;
+    searchMode: WorkspaceShellSearchMode;
+    placeholderKey: string;
+    scopeLabel: string;
+    statusLabel: string;
+    minLength: number;
+    advancedRouteTarget: readonly string[] | null;
+}
diff --git a/libs/workspace/shell/util/src/lib/navigation/workspace-shell-route.utils.spec.ts b/libs/workspace/shell/util/src/lib/navigation/workspace-shell-route.utils.spec.ts
new file mode 100644
index 0000000..9d20b4e
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/navigation/workspace-shell-route.utils.spec.ts
@@ -0,0 +1,181 @@
+import {
+    parseWorkspaceShellRoute,
+    usesWorkspaceRouteQuerySearch,
+} from './workspace-shell-route.utils';
+
+describe('workspace-shell-route.utils', () => {
+    it('parses top-level workspace pages', () => {
+        expect(parseWorkspaceShellRoute('/workspace')).toEqual(
+            expect.objectContaining({
+                kind: 'dashboard',
+                context: null,
+                contextPanel: 'none',
+                searchMode: 'advanced-only',
+                usesQuerySearch: false,
+            })
+        );
+        expect(parseWorkspaceShellRoute('/workspace/sources?q=matrix')).toEqual(
+            expect.objectContaining({
+                kind: 'sources',
+                context: null,
+                contextPanel: 'sources',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+            })
+        );
+        expect(parseWorkspaceShellRoute('/workspace/settings')).toEqual(
+            expect.objectContaining({
+                kind: 'settings',
+                context: null,
+                contextPanel: 'settings',
+            })
+        );
+        expect(parseWorkspaceShellRoute('/workspace/global-favorites')).toEqual(
+            expect.objectContaining({
+                kind: 'global-favorites',
+            })
+        );
+        expect(parseWorkspaceShellRoute('/workspace/global-recent')).toEqual(
+            expect.objectContaining({
+                kind: 'global-recent',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+            })
+        );
+        expect(parseWorkspaceShellRoute('/workspace/downloads')).toEqual(
+            expect.objectContaining({
+                kind: 'downloads',
+            })
+        );
+    });
+
+    it('parses Xtream portal routes and detects context-panel/query-search state', () => {
+        expect(
+            parseWorkspaceShellRoute('/workspace/xtreams/pl-1/vod/42')
+        ).toEqual(
+            expect.objectContaining({
+                kind: 'portal',
+                context: {
+                    provider: 'xtreams',
+                    playlistId: 'pl-1',
+                },
+                section: 'vod',
+                contextPanel: 'category',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+                isPortalFavoritesAllScope: false,
+            })
+        );
+
+        expect(
+            parseWorkspaceShellRoute(
+                '/workspace/xtreams/pl-1/favorites?scope=all&q=neo'
+            )
+        ).toEqual(
+            expect.objectContaining({
+                section: 'favorites',
+                contextPanel: 'none',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+                isPortalFavoritesAllScope: true,
+            })
+        );
+
+        expect(
+            parseWorkspaceShellRoute('/workspace/xtreams/pl-1/downloads')
+        ).toEqual(
+            expect.objectContaining({
+                section: 'downloads',
+                contextPanel: 'collection',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+            })
+        );
+    });
+
+    it('parses Stalker portal routes and detects context-panel/query-search state', () => {
+        expect(
+            parseWorkspaceShellRoute('/workspace/stalker/pl-2/itv')
+        ).toEqual(
+            expect.objectContaining({
+                kind: 'portal',
+                context: {
+                    provider: 'stalker',
+                    playlistId: 'pl-2',
+                },
+                section: 'itv',
+                contextPanel: 'category',
+                searchMode: 'remote-search',
+                usesQuerySearch: true,
+            })
+        );
+
+        expect(
+            parseWorkspaceShellRoute('/workspace/stalker/pl-2/recent?q=test')
+        ).toEqual(
+            expect.objectContaining({
+                section: 'recent',
+                contextPanel: 'none',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+            })
+        );
+    });
+
+    it('parses M3U portal routes without provider-specific workspace state', () => {
+        expect(
+            parseWorkspaceShellRoute('/workspace/playlists/pl-3/favorites')
+        ).toEqual(
+            expect.objectContaining({
+                kind: 'portal',
+                context: {
+                    provider: 'playlists',
+                    playlistId: 'pl-3',
+                },
+                section: 'favorites',
+                contextPanel: 'none',
+                searchMode: 'local-filter',
+                usesQuerySearch: true,
+                isPortalFavoritesAllScope: false,
+            })
+        );
+    });
+
+    it('returns unknown for non-workspace URLs', () => {
+        expect(parseWorkspaceShellRoute('/xtreams/pl-1/search')).toEqual(
+            expect.objectContaining({
+                kind: 'unknown',
+                context: null,
+                section: null,
+                searchMode: 'none',
+            })
+        );
+    });
+
+    it('exposes query-search eligibility as a pure helper', () => {
+        expect(
+            usesWorkspaceRouteQuerySearch(
+                { provider: 'xtreams', playlistId: '1' },
+                'favorites'
+            )
+        ).toBe(true);
+        expect(
+            usesWorkspaceRouteQuerySearch(
+                { provider: 'xtreams', playlistId: '1' },
+                'vod'
+            )
+        ).toBe(true);
+        expect(
+            usesWorkspaceRouteQuerySearch(
+                { provider: 'stalker', playlistId: '1' },
+                'recent'
+            )
+        ).toBe(true);
+        expect(
+            usesWorkspaceRouteQuerySearch(
+                { provider: 'playlists', playlistId: '1' },
+                'favorites'
+            )
+        ).toBe(true);
+    });
+});
diff --git a/libs/workspace/shell/util/src/lib/navigation/workspace-shell-route.utils.ts b/libs/workspace/shell/util/src/lib/navigation/workspace-shell-route.utils.ts
new file mode 100644
index 0000000..e01a7e1
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/navigation/workspace-shell-route.utils.ts
@@ -0,0 +1,303 @@
+import {
+    PortalProvider,
+    PortalRailSection,
+} from '@iptvnator/portal/shared/util';
+
+export type WorkspaceShellPageKind =
+    | 'dashboard'
+    | 'downloads'
+    | 'global-favorites'
+    | 'global-recent'
+    | 'portal'
+    | 'settings'
+    | 'sources'
+    | 'unknown';
+
+export type WorkspaceShellContextPanel =
+    | 'none'
+    | 'sources'
+    | 'settings'
+    | 'category'
+    | 'collection';
+
+export interface WorkspacePortalContext {
+    provider: PortalProvider;
+    playlistId: string;
+}
+
+export type WorkspaceShellSearchMode =
+    | 'none'
+    | 'local-filter'
+    | 'remote-search'
+    | 'advanced-only';
+
+export interface WorkspaceShellRoute {
+    kind: WorkspaceShellPageKind;
+    context: WorkspacePortalContext | null;
+    section: PortalRailSection | null;
+    isPortalFavoritesAllScope: boolean;
+    searchMode: WorkspaceShellSearchMode;
+    usesQuerySearch: boolean;
+    contextPanel: WorkspaceShellContextPanel;
+}
+
+const PORTAL_PROVIDERS: readonly PortalProvider[] = [
+    'xtreams',
+    'stalker',
+    'playlists',
+];
+
+const PORTAL_SECTIONS: readonly PortalRailSection[] = [
+    'all',
+    'downloads',
+    'favorites',
+    'groups',
+    'itv',
+    'library',
+    'live',
+    'recent',
+    'recently-added',
+    'search',
+    'series',
+    'vod',
+];
+
+const XTREAM_ROUTE_QUERY_SEARCH_SECTIONS = new Set<PortalRailSection>([
+    'favorites',
+    'downloads',
+    'recent',
+    'recently-added',
+]);
+
+const STALKER_ROUTE_QUERY_SEARCH_SECTIONS = new Set<PortalRailSection>([
+    'favorites',
+    'recent',
+]);
+
+const XTREAM_CATEGORY_CONTEXT_SECTIONS = new Set<PortalRailSection>([
+    'vod',
+    'series',
+    'live',
+]);
+
+const STALKER_CATEGORY_CONTEXT_SECTIONS = new Set<PortalRailSection>([
+    'vod',
+    'series',
+    'itv',
+]);
+
+function normalizePath(url: string): {
+    segments: string[];
+    queryParams: URLSearchParams;
+} {
+    const [path, query = ''] = url.split('?');
+    return {
+        segments: path.split('/').filter(Boolean),
+        queryParams: new URLSearchParams(query),
+    };
+}
+
+function asPortalProvider(value?: string): PortalProvider | null {
+    if (!value) {
+        return null;
+    }
+
+    return PORTAL_PROVIDERS.includes(value as PortalProvider)
+        ? (value as PortalProvider)
+        : null;
+}
+
+function asPortalRailSection(value?: string): PortalRailSection | null {
+    if (!value) {
+        return null;
+    }
+
+    return PORTAL_SECTIONS.includes(value as PortalRailSection)
+        ? (value as PortalRailSection)
+        : null;
+}
+
+export function usesWorkspaceRouteQuerySearch(
+    context: WorkspacePortalContext | null,
+    section: PortalRailSection | null
+): boolean {
+    return resolvePortalSearchMode(context, section) !== 'none';
+}
+
+function resolvePortalSearchMode(
+    context: WorkspacePortalContext | null,
+    section: PortalRailSection | null
+): Exclude<WorkspaceShellSearchMode, 'advanced-only'> {
+    if (!context || !section) {
+        return 'none';
+    }
+
+    if (context.provider === 'playlists') {
+        return section === 'all' ||
+            section === 'groups' ||
+            section === 'favorites' ||
+            section === 'recent'
+            ? 'local-filter'
+            : 'none';
+    }
+
+    if (context.provider === 'xtreams') {
+        if (section === 'search') {
+            return 'remote-search';
+        }
+
+        return section === 'vod' ||
+            section === 'series' ||
+            section === 'live' ||
+            XTREAM_ROUTE_QUERY_SEARCH_SECTIONS.has(section)
+            ? 'local-filter'
+            : 'none';
+    }
+
+    if (context.provider === 'stalker') {
+        if (
+            section === 'vod' ||
+            section === 'series' ||
+            section === 'itv' ||
+            section === 'search'
+        ) {
+            return 'remote-search';
+        }
+
+        return STALKER_ROUTE_QUERY_SEARCH_SECTIONS.has(section) ||
+            section === 'downloads'
+            ? 'local-filter'
+            : 'none';
+    }
+
+    return 'none';
+}
+
+function resolveRouteSearchMode(
+    kind: WorkspaceShellPageKind,
+    context: WorkspacePortalContext | null,
+    section: PortalRailSection | null
+): WorkspaceShellSearchMode {
+    if (kind === 'dashboard') {
+        return 'advanced-only';
+    }
+
+    if (
+        kind === 'sources' ||
+        kind === 'downloads' ||
+        kind === 'global-favorites' ||
+        kind === 'global-recent'
+    ) {
+        return 'local-filter';
+    }
+
+    if (kind === 'portal') {
+        return resolvePortalSearchMode(context, section);
+    }
+
+    return 'none';
+}
+
+function resolveContextPanel(
+    kind: WorkspaceShellPageKind,
+    context: WorkspacePortalContext | null,
+    section: PortalRailSection | null
+): WorkspaceShellContextPanel {
+    if (kind === 'sources') {
+        return 'sources';
+    }
+
+    if (kind === 'settings') {
+        return 'settings';
+    }
+
+    if (!context || !section) {
+        return 'none';
+    }
+
+    if (
+        (context.provider === 'xtreams' &&
+            XTREAM_CATEGORY_CONTEXT_SECTIONS.has(section)) ||
+        (context.provider === 'stalker' &&
+            STALKER_CATEGORY_CONTEXT_SECTIONS.has(section))
+    ) {
+        return 'category';
+    }
+
+    if (
+        (context.provider === 'xtreams' || context.provider === 'stalker') &&
+        section === 'downloads'
+    ) {
+        return 'collection';
+    }
+
+    return 'none';
+}
+
+export function parseWorkspaceShellRoute(url: string): WorkspaceShellRoute {
+    const { segments, queryParams } = normalizePath(url);
+
+    if (segments[0] !== 'workspace') {
+        return {
+            kind: 'unknown',
+            context: null,
+            section: null,
+            isPortalFavoritesAllScope: false,
+            searchMode: 'none',
+            usesQuerySearch: false,
+            contextPanel: 'none',
+        };
+    }
+
+    const sectionSegment = segments[3];
+    const provider = asPortalProvider(segments[1]);
+
+    if (provider && segments[2]) {
+        const context: WorkspacePortalContext = {
+            provider,
+            playlistId: segments[2],
+        };
+        const section = asPortalRailSection(sectionSegment);
+
+        return {
+            kind: 'portal',
+            context,
+            section,
+            isPortalFavoritesAllScope:
+                section === 'favorites' &&
+                (provider === 'xtreams' || provider === 'stalker') &&
+                queryParams.get('scope') === 'all',
+            searchMode: resolveRouteSearchMode('portal', context, section),
+            usesQuerySearch: usesWorkspaceRouteQuerySearch(context, section),
+            contextPanel: resolveContextPanel('portal', context, section),
+        };
+    }
+
+    const page = segments[1];
+    const kind: WorkspaceShellPageKind =
+        !page || page === 'dashboard'
+            ? 'dashboard'
+            : page === 'sources'
+              ? 'sources'
+              : page === 'settings'
+                ? 'settings'
+                : page === 'global-favorites'
+                  ? 'global-favorites'
+                  : page === 'global-recent'
+                    ? 'global-recent'
+                  : page === 'downloads'
+                    ? 'downloads'
+                    : 'unknown';
+    const searchMode = resolveRouteSearchMode(kind, null, null);
+
+    return {
+        kind,
+        context: null,
+        section: null,
+        isPortalFavoritesAllScope: false,
+        searchMode,
+        usesQuerySearch:
+            searchMode === 'local-filter' || searchMode === 'remote-search',
+        contextPanel: resolveContextPanel(kind, null, null),
+    };
+}
diff --git a/libs/workspace/shell/util/src/lib/settings-context.service.ts b/libs/workspace/shell/util/src/lib/settings-context.service.ts
new file mode 100644
index 0000000..ead1e90
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/settings-context.service.ts
@@ -0,0 +1,37 @@
+import { Injectable, signal } from '@angular/core';
+
+export interface SettingsNavItem {
+    id: string;
+    label: string;
+    icon: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class SettingsContextService {
+    readonly sections = signal<SettingsNavItem[]>([]);
+    readonly activeSection = signal<string>('general');
+    readonly pendingScrollTarget = signal<string | null>(null);
+
+    setSections(items: SettingsNavItem[]): void {
+        this.sections.set(items);
+    }
+
+    setActiveSection(id: string): void {
+        this.activeSection.set(id);
+    }
+
+    navigateToSection(id: string): void {
+        this.activeSection.set(id);
+        this.pendingScrollTarget.set(id);
+    }
+
+    clearPendingScrollTarget(): void {
+        this.pendingScrollTarget.set(null);
+    }
+
+    reset(): void {
+        this.sections.set([]);
+        this.activeSection.set('general');
+        this.pendingScrollTarget.set(null);
+    }
+}
diff --git a/libs/workspace/shell/util/src/lib/workspace-shell-actions.ts b/libs/workspace/shell/util/src/lib/workspace-shell-actions.ts
new file mode 100644
index 0000000..4c3a7ea
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/workspace-shell-actions.ts
@@ -0,0 +1,23 @@
+import { InjectionToken } from '@angular/core';
+import type { XtreamAccountInfoDialogData } from 'shared-interfaces';
+
+export type WorkspacePlaylistType =
+    | 'xtream'
+    | 'url'
+    | 'text'
+    | 'file'
+    | 'stalker';
+export type PlaylistCategory = 'm3u' | 'xtream' | 'stalker';
+export type M3uSubType = 'url' | 'file' | 'text';
+
+export type WorkspaceAccountInfoData = XtreamAccountInfoDialogData;
+
+export interface WorkspaceShellActions {
+    openAddPlaylistDialog(type?: WorkspacePlaylistType): void;
+    openGlobalSearch(initialQuery?: string): void;
+    openGlobalRecent(): void;
+    openAccountInfo(data: WorkspaceAccountInfoData): void;
+}
+
+export const WORKSPACE_SHELL_ACTIONS =
+    new InjectionToken<WorkspaceShellActions>('WORKSPACE_SHELL_ACTIONS');
diff --git a/libs/workspace/shell/util/src/lib/workspace-startup-preferences.service.spec.ts b/libs/workspace/shell/util/src/lib/workspace-startup-preferences.service.spec.ts
new file mode 100644
index 0000000..76484f7
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/workspace-startup-preferences.service.spec.ts
@@ -0,0 +1,104 @@
+import { signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { PlaylistsService, SettingsStore } from 'services';
+import { StartupBehavior } from 'shared-interfaces';
+import { WorkspaceStartupPreferencesService } from './workspace-startup-preferences.service';
+
+describe('WorkspaceStartupPreferencesService', () => {
+    let service: WorkspaceStartupPreferencesService;
+    let playlistsService: { getAllPlaylists: jest.Mock };
+    let settingsStore: {
+        loadSettings: jest.Mock;
+        showDashboard: ReturnType<typeof signal<boolean>>;
+        startupBehavior: ReturnType<typeof signal<StartupBehavior>>;
+    };
+
+    beforeEach(() => {
+        localStorage.clear();
+
+        playlistsService = {
+            getAllPlaylists: jest.fn().mockReturnValue(
+                of([{ _id: 'playlist-1' }])
+            ),
+        };
+        settingsStore = {
+            loadSettings: jest.fn().mockResolvedValue(undefined),
+            showDashboard: signal(true),
+            startupBehavior: signal(StartupBehavior.FirstView),
+        };
+
+        TestBed.configureTestingModule({
+            providers: [
+                WorkspaceStartupPreferencesService,
+                {
+                    provide: PlaylistsService,
+                    useValue: playlistsService,
+                },
+                {
+                    provide: SettingsStore,
+                    useValue: settingsStore,
+                },
+            ],
+        });
+
+        service = TestBed.inject(WorkspaceStartupPreferencesService);
+    });
+
+    it('resolves the first view to dashboard when dashboard is enabled', async () => {
+        await expect(service.resolveInitialWorkspacePath()).resolves.toBe(
+            '/workspace/dashboard'
+        );
+    });
+
+    it('resolves the first view to sources when dashboard is hidden', async () => {
+        settingsStore.showDashboard.set(false);
+
+        await expect(service.resolveInitialWorkspacePath()).resolves.toBe(
+            '/workspace/sources'
+        );
+    });
+
+    it('restores the last route when restore-last-view is enabled', async () => {
+        settingsStore.startupBehavior.set(StartupBehavior.RestoreLastView);
+        service.persistLastRestorablePath('/workspace/global-recent?q=matrix');
+
+        await expect(service.resolveInitialWorkspacePath()).resolves.toBe(
+            '/workspace/global-recent'
+        );
+    });
+
+    it('falls back to sources when the stored dashboard route is hidden', async () => {
+        settingsStore.showDashboard.set(false);
+        settingsStore.startupBehavior.set(StartupBehavior.RestoreLastView);
+        service.persistLastRestorablePath('/workspace/dashboard');
+
+        await expect(service.resolveInitialWorkspacePath()).resolves.toBe(
+            '/workspace/sources'
+        );
+    });
+
+    it('canonicalizes detail routes to their section root', () => {
+        expect(
+            service.getRestorablePath(
+                '/workspace/xtreams/playlist-1/vod/123/456?q=matrix'
+            )
+        ).toBe('/workspace/xtreams/playlist-1/vod');
+    });
+
+    it('ignores non-restorable routes', () => {
+        expect(service.getRestorablePath('/workspace/settings')).toBeNull();
+        expect(service.getRestorablePath('/workspace')).toBeNull();
+        expect(service.getRestorablePath('/unknown')).toBeNull();
+    });
+
+    it('falls back to the first available view when the stored playlist no longer exists', async () => {
+        settingsStore.startupBehavior.set(StartupBehavior.RestoreLastView);
+        playlistsService.getAllPlaylists.mockReturnValue(of([]));
+        service.persistLastRestorablePath('/workspace/xtreams/missing/live');
+
+        await expect(service.resolveInitialWorkspacePath()).resolves.toBe(
+            '/workspace/dashboard'
+        );
+    });
+});
diff --git a/libs/workspace/shell/util/src/lib/workspace-startup-preferences.service.ts b/libs/workspace/shell/util/src/lib/workspace-startup-preferences.service.ts
new file mode 100644
index 0000000..4fe4ed3
--- /dev/null
+++ b/libs/workspace/shell/util/src/lib/workspace-startup-preferences.service.ts
@@ -0,0 +1,153 @@
+import { Injectable, inject } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { PlaylistsService, SettingsStore } from 'services';
+import {
+    StartupBehavior,
+} from 'shared-interfaces';
+import { parseWorkspaceShellRoute } from './navigation/workspace-shell-route.utils';
+
+const LAST_RESTORABLE_ROUTE_STORAGE_KEY = 'workspace-last-restorable-route-v1';
+
+@Injectable({ providedIn: 'root' })
+export class WorkspaceStartupPreferencesService {
+    private readonly settingsStore = inject(SettingsStore);
+    private readonly playlistsService = inject(PlaylistsService);
+
+    async resolveInitialWorkspacePath(): Promise<string> {
+        await this.settingsStore.loadSettings();
+
+        const showDashboard = this.showDashboard();
+        const firstViewPath = this.getFirstAvailableWorkspacePath(showDashboard);
+
+        if (this.startupBehavior() !== StartupBehavior.RestoreLastView) {
+            return firstViewPath;
+        }
+
+        return (
+            (await this.getValidatedLastRestorablePath(showDashboard)) ??
+            firstViewPath
+        );
+    }
+
+    async resolveDashboardPath(): Promise<string> {
+        await this.settingsStore.loadSettings();
+
+        return this.showDashboard()
+            ? '/workspace/dashboard'
+            : '/workspace/sources';
+    }
+
+    getFirstAvailableWorkspacePath(showDashboard = this.showDashboard()): string {
+        return showDashboard ? '/workspace/dashboard' : '/workspace/sources';
+    }
+
+    showDashboard(): boolean {
+        return this.settingsStore.showDashboard?.() ?? true;
+    }
+
+    startupBehavior(): StartupBehavior {
+        return (
+            this.settingsStore.startupBehavior?.() ??
+            StartupBehavior.FirstView
+        );
+    }
+
+    persistLastRestorablePath(url: string): void {
+        const canonicalPath = this.getRestorablePath(url);
+        if (!canonicalPath) {
+            return;
+        }
+
+        try {
+            localStorage.setItem(
+                LAST_RESTORABLE_ROUTE_STORAGE_KEY,
+                canonicalPath
+            );
+        } catch {
+            // Ignore storage write failures.
+        }
+    }
+
+    getRestorablePath(url: string): string | null {
+        const [path] = url.split('?');
+        if (path === '/workspace' || path === '/workspace/') {
+            return null;
+        }
+
+        const route = parseWorkspaceShellRoute(url);
+
+        switch (route.kind) {
+            case 'dashboard':
+                return '/workspace/dashboard';
+            case 'downloads':
+                return '/workspace/downloads';
+            case 'global-favorites':
+                return '/workspace/global-favorites';
+            case 'global-recent':
+                return '/workspace/global-recent';
+            case 'sources':
+                return '/workspace/sources';
+            case 'portal':
+                if (!route.context || !route.section) {
+                    return null;
+                }
+
+                return [
+                    '/workspace',
+                    route.context.provider,
+                    route.context.playlistId,
+                    route.section,
+                ].join('/');
+            default:
+                return null;
+        }
+    }
+
+    async getValidatedLastRestorablePath(
+        showDashboard = this.showDashboard()
+    ): Promise<string | null> {
+        const storedPath = this.readLastRestorablePath();
+        if (!storedPath) {
+            return null;
+        }
+
+        const canonicalPath = this.getRestorablePath(storedPath);
+        if (!canonicalPath) {
+            return null;
+        }
+
+        if (!showDashboard && canonicalPath === '/workspace/dashboard') {
+            return this.getFirstAvailableWorkspacePath(false);
+        }
+
+        const route = parseWorkspaceShellRoute(canonicalPath);
+        if (route.kind !== 'portal' || !route.context) {
+            return canonicalPath;
+        }
+
+        try {
+            const playlists = await firstValueFrom(
+                this.playlistsService.getAllPlaylists()
+            );
+
+            return playlists.some(
+                (playlist) => playlist._id === route.context?.playlistId
+            )
+                ? canonicalPath
+                : this.getFirstAvailableWorkspacePath(showDashboard);
+        } catch {
+            return this.getFirstAvailableWorkspacePath(showDashboard);
+        }
+    }
+
+    private readLastRestorablePath(): string | null {
+        try {
+            const value = localStorage.getItem(
+                LAST_RESTORABLE_ROUTE_STORAGE_KEY
+            );
+            return value && value.trim().length > 0 ? value : null;
+        } catch {
+            return null;
+        }
+    }
+}
diff --git a/libs/workspace/shell/util/src/test-setup.ts b/libs/workspace/shell/util/src/test-setup.ts
new file mode 100644
index 0000000..0d88648
--- /dev/null
+++ b/libs/workspace/shell/util/src/test-setup.ts
@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});
diff --git a/libs/workspace/shell/util/tsconfig.json b/libs/workspace/shell/util/tsconfig.json
new file mode 100644
index 0000000..dd63ae9
--- /dev/null
+++ b/libs/workspace/shell/util/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "extends": "../../../../tsconfig.base.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "target": "es2022",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "emitDecoratorMetadata": false,
+        "module": "preserve"
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}
diff --git a/libs/workspace/shell/util/tsconfig.lib.json b/libs/workspace/shell/util/tsconfig.lib.json
new file mode 100644
index 0000000..7fba372
--- /dev/null
+++ b/libs/workspace/shell/util/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/workspace/shell/util/tsconfig.spec.json b/libs/workspace/shell/util/tsconfig.spec.json
new file mode 100644
index 0000000..c0bb248
--- /dev/null
+++ b/libs/workspace/shell/util/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}
diff --git a/ngsw-config.json b/ngsw-config.json
new file mode 100644
index 0000000..f8bf210
--- /dev/null
+++ b/ngsw-config.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/nx.json b/nx.json
new file mode 100644
index 0000000..89dd5ac
--- /dev/null
+++ b/nx.json
@@ -0,0 +1,97 @@
+{
+    "$schema": "./node_modules/nx/schemas/nx-schema.json",
+    "namedInputs": {
+        "default": ["{projectRoot}/**/*", "sharedGlobals"],
+        "production": [
+            "default",
+            "!{projectRoot}/.eslintrc.json",
+            "!{projectRoot}/eslint.config.mjs",
+            "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+            "!{projectRoot}/tsconfig.spec.json",
+            "!{projectRoot}/jest.config.[jt]s",
+            "!{projectRoot}/src/test-setup.[jt]s",
+            "!{projectRoot}/test-setup.[jt]s"
+        ],
+        "sharedGlobals": ["{workspaceRoot}/.github/workflows/ci.yml"]
+    },
+    "targetDefaults": {
+        "@angular/build:application": {
+            "cache": true,
+            "dependsOn": ["^build"],
+            "inputs": ["production", "^production"]
+        },
+        "@nx/eslint:lint": {
+            "cache": true,
+            "inputs": [
+                "default",
+                "{workspaceRoot}/.eslintrc.json",
+                "{workspaceRoot}/.eslintignore",
+                "{workspaceRoot}/eslint.config.mjs"
+            ]
+        },
+        "@nx/jest:jest": {
+            "cache": true,
+            "inputs": [
+                "default",
+                "^production",
+                "{workspaceRoot}/jest.preset.js"
+            ],
+            "options": {
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        },
+        "@nx/js:tsc": {
+            "cache": true,
+            "dependsOn": ["^build"],
+            "inputs": ["production", "^production"]
+        },
+        "e2e-ci--src/*.e2e.ts": {
+            "dependsOn": [
+                {
+                    "projects": ["electron-backend"],
+                    "target": "build-e2e"
+                },
+                {
+                    "projects": ["stalker-mock-server", "xtream-mock-server"],
+                    "target": "serve"
+                }
+            ]
+        }
+    },
+    "plugins": [
+        {
+            "plugin": "@nx/playwright/plugin",
+            "options": {
+                "targetName": "e2e"
+            }
+        },
+        {
+            "plugin": "@nx/eslint/plugin",
+            "options": {
+                "targetName": "lint"
+            }
+        }
+    ],
+    "generators": {
+        "@nx/angular:application": {
+            "e2eTestRunner": "playwright",
+            "linter": "eslint",
+            "style": "scss",
+            "unitTestRunner": "jest"
+        },
+        "@nx/angular:library": {
+            "linter": "eslint",
+            "unitTestRunner": "jest"
+        },
+        "@nx/angular:component": {
+            "style": "scss"
+        }
+    },
+    "defaultProject": "web"
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..00dc823
--- /dev/null
+++ b/package.json
@@ -0,0 +1,224 @@
+{
+    "name": "kiratv",
+    "version": "0.20.0",
+    "license": "MIT",
+    "description": "KiraTV — cliente IPTV para Kira Cloud (Windows y Linux).",
+    "homepage": "https://play.kiracloud.es",
+    "author": {
+        "name": "Kira Cloud",
+        "email": "jnavajascordobes@gmail.com"
+    },
+    "keywords": [
+        "angular",
+        "electron",
+        "typescript",
+        "m3u",
+        "m3u8",
+        "player",
+        "iptv",
+        "video",
+        "tv"
+    ],
+    "scripts": {
+        "postinstall": "electron-builder install-app-deps",
+        "build:frontend": "nx build web",
+        "build:frontend:pwa": "nx build web --configuration=pwa",
+        "build:backend": "nx build electron-backend --configuration=production",
+        "build:kiratv": "nx run electron-backend:build --configuration=kiratv",
+        "make:kiratv": "nx run electron-backend:make --configuration=kiratv",
+        "make:kiratv:linux-deb": "node tools/packaging/make-kiratv-linux-deb.mjs",
+        "make:kiratv:linux-deb-appimage": "node tools/packaging/make-kiratv-linux-deb-appimage.mjs",
+        "packaging:download-vlc-windows": "node tools/packaging/download-vlc-windows.mjs",
+        "make:kiratv:windows-nsis": "node tools/packaging/make-kiratv-windows-nsis.mjs",
+        "make:kiratv:release": "node tools/packaging/make-kiratv-release-artifacts.mjs",
+        "serve:frontend": "nx serve web --no-tui",
+        "serve:frontend:pwa": "nx serve web --configuration=pwa --no-tui",
+        "serve:backend": "nx serve electron-backend",
+        "test:frontend": "nx test web",
+        "test:backend": "nx test electron-backend",
+        "test:unit:all": "nx run-many --target=test --all --parallel=3",
+        "test:unit:ci": "nx run-many --target=test --projects=electron-backend,web,services,m3u-state,portal-stalker-data-access,portal-shared-util,playlist-shared-ui,portal-xtream-data-access,portal-xtream-feature,workspace-dashboard-data-access,components,@iptvnator/pipes --parallel=3 --output-style=static",
+        "typecheck:web": "tsc -p apps/web/tsconfig.app.json --noEmit",
+        "typecheck:backend": "tsc -p apps/electron-backend/tsconfig.app.json --noEmit",
+        "typecheck:ci": "pnpm run typecheck:web && pnpm run typecheck:backend",
+        "verify:package-layout": "node tools/packaging/verify-electron-package-layout.mjs",
+        "package:app": "nx run electron-backend:make --prepackageOnly",
+        "make:app": "nx run electron-backend:make",
+        "smoke:packaged": "node tools/testing/launch-packaged-electron.mjs",
+        "serve:website": "nx serve website",
+        "build:website": "nx build website",
+        "lint": "nx lint electron-backend",
+        "build": "nx build electron-backend",
+        "wiki:export": "node tools/wiki/export-wiki-context.mjs",
+        "test:wiki-export": "node --test tools/wiki/export-wiki-context.test.mjs"
+    },
+    "private": true,
+    "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
+    "dependencies": {
+        "@angular/animations": "21.1.5",
+        "@angular/cdk": "^21.1.5",
+        "@angular/common": "~21.1.5",
+        "@angular/compiler": "~21.1.5",
+        "@angular/core": "~21.1.5",
+        "@angular/forms": "~21.1.5",
+        "@angular/material": "^21.1.5",
+        "@angular/platform-browser": "~21.1.5",
+        "@angular/platform-browser-dynamic": "~21.1.5",
+        "@angular/router": "~21.1.5",
+        "@ngrx/component-store": "21.0.1",
+        "@ngrx/effects": "21.0.1",
+        "@ngrx/entity": "21.0.1",
+        "@ngrx/router-store": "21.0.1",
+        "@ngrx/signals": "21.0.1",
+        "@ngrx/store": "21.0.1",
+        "@ngrx/store-devtools": "21.0.1",
+        "@ngx-pwa/local-storage": "21.0.0",
+        "@videojs/http-streaming": "2.15.0",
+        "@yangkghjh/videojs-aspect-ratio-panel": "0.0.1",
+        "angularx-qrcode": "21.0.4",
+        "artplayer": "5.3.0",
+        "axios": "1.15.0",
+        "better-sqlite3": "^12.5.0",
+        "date-fns": "4.1.0",
+        "drizzle-orm": "0.45.2",
+        "electron-conf": "1.3.0",
+        "electron-dl": "4.0.0",
+        "fix-path": "5.0.0",
+        "hls.js": "1.6.13",
+        "iptv-playlist-parser": "github:4gray/iptv-playlist-parser",
+        "lodash": "4.18.1",
+        "mpegts.js": "1.8.0",
+        "ngx-indexed-db": "21.0.0",
+        "ngx-skeleton-loader": "11.3.0",
+        "rxjs": "7.8.2",
+        "saxes": "6.0.0",
+        "semver": "7.7.3",
+        "uuid": "9.0.0",
+        "video.js": "8.23.4",
+        "videojs-contrib-quality-levels": "4.1.0",
+        "videojs-quality-selector-hls": "1.1.1",
+        "zone.js": "~0.15.1"
+    },
+    "devDependencies": {
+        "@angular-devkit/core": "~21.1.4",
+        "@angular-devkit/schematics": "~21.1.4",
+        "@angular-eslint/builder": "21.2.0",
+        "@angular-eslint/eslint-plugin": "21.2.0",
+        "@angular-eslint/eslint-plugin-template": "21.2.0",
+        "@angular-eslint/schematics": "21.2.0",
+        "@angular-eslint/template-parser": "21.2.0",
+        "@angular/build": "~21.1.4",
+        "@angular/cli": "~21.1.4",
+        "@angular/common": "21.1.5",
+        "@angular/compiler": "21.1.5",
+        "@angular/compiler-cli": "21.1.5",
+        "@angular/core": "21.1.5",
+        "@angular/forms": "21.1.5",
+        "@angular/language-service": "21.1.5",
+        "@angular/platform-browser": "21.1.5",
+        "@angular/platform-browser-dynamic": "21.1.5",
+        "@angular/router": "21.1.5",
+        "@angular/service-worker": "21.1.5",
+        "@astrojs/mdx": "4.3.13",
+        "@astrojs/sitemap": "3.7.0",
+        "@astrojs/tailwind": "6.0.2",
+        "@eslint/eslintrc": "3.3.1",
+        "@eslint/js": "^9.38.0",
+        "@faker-js/faker": "10.3.0",
+        "@fontsource/crimson-pro": "5.2.8",
+        "@fontsource/dm-sans": "5.2.8",
+        "@fontsource/jetbrains-mono": "5.2.8",
+        "@fontsource/roboto": "5.2.10",
+        "@ngrx/eslint-plugin": "^21.0.1",
+        "@ngx-translate/core": "16.0.4",
+        "@ngx-translate/http-loader": "16.0.1",
+        "@nx/angular": "22.5.1",
+        "@nx/devkit": "22.5.1",
+        "@nx/eslint": "22.5.1",
+        "@nx/eslint-plugin": "22.5.1",
+        "@nx/jest": "22.5.1",
+        "@nx/js": "22.5.1",
+        "@nx/playwright": "22.5.1",
+        "@nx/web": "22.5.1",
+        "@nx/workspace": "22.5.1",
+        "@playwright/test": "^1.36.0",
+        "@schematics/angular": "~21.1.4",
+        "@semantic-release/changelog": "6.0.3",
+        "@semantic-release/git": "10.0.1",
+        "@semantic-release/npm": "12.0.1",
+        "@swc-node/register": "1.11.1",
+        "@swc/core": "1.15.8",
+        "@swc/helpers": "0.5.18",
+        "@tailwindcss/typography": "0.5.19",
+        "@types/better-sqlite3": "^7.6.12",
+        "@types/cors": "2.8.19",
+        "@types/express": "5.0.6",
+        "@types/jest": "^30.0.0",
+        "@types/lodash": "4.17.20",
+        "@types/mocha": "9.0.0",
+        "@types/node": "20.19.9",
+        "@types/uuid": "^10.0.0",
+        "@types/video.js": "7.3.29",
+        "@typescript-eslint/eslint-plugin": "^8.46.2",
+        "@typescript-eslint/parser": "^8.46.2",
+        "@typescript-eslint/utils": "^8.46.2",
+        "angular-eslint": "20.5.2",
+        "astro": "5.18.1",
+        "conventional-changelog-cli": "5.0.0",
+        "cors": "2.8.6",
+        "drizzle-kit": "0.31.5",
+        "electron": "^39.8.5",
+        "electron-builder": "^26.0.12",
+        "electron-playwright-helpers": "1.8.2",
+        "esbuild": "0.27.0",
+        "eslint": "^9.8.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-import": "2.32.0",
+        "eslint-plugin-playwright": "^1.6.2",
+        "express": "5.2.1",
+        "globals": "15.9.0",
+        "jest": "^30.0.2",
+        "jest-environment-jsdom": "^30.0.2",
+        "jest-environment-node": "^30.0.2",
+        "jest-preset-angular": "~15.0.0",
+        "jest-util": "^30.0.2",
+        "jsonc-eslint-parser": "^2.1.0",
+        "material-design-icons-iconfont": "6.7.0",
+        "ng-mocks": "14.15.1",
+        "nx": "22.5.1",
+        "nx-electron": "^21.0.1",
+        "prettier": "^3.8.1",
+        "semantic-release": "24.2.9",
+        "sharp": "0.34.5",
+        "tailwindcss": "^3.4.19",
+        "ts-jest": "^29.4.5",
+        "ts-node": "10.9.2",
+        "tslib": "^2.8.1",
+        "tsx": "4.21.0",
+        "typescript": "5.9.3",
+        "typescript-eslint": "^8.46.2"
+    },
+    "pnpm": {
+        "overrides": {
+            "@hono/node-server@1.19.9": "1.19.14",
+            "ajv@6.12.6": "6.14.0",
+            "brace-expansion@1.1.12": "1.1.13",
+            "defu@6.1.4": "6.1.6",
+            "devalue@5.6.2": "5.6.4",
+            "express-rate-limit@8.2.1": "8.3.0",
+            "flatted@3.3.3": "3.4.2",
+            "follow-redirects@1.15.11": "1.16.0",
+            "h3@1.15.5": "1.15.10",
+            "hono@4.12.0": "4.12.14",
+            "immutable@5.1.4": "5.1.5",
+            "lodash-es@4.17.22": "4.18.1",
+            "node-forge@1.3.3": "1.4.0",
+            "path-to-regexp@0.1.12": "0.1.13",
+            "picomatch@2.3.1": "2.3.2",
+            "rollup@4.52.3": "4.59.0",
+            "smol-toml@1.6.0": "1.6.1",
+            "svgo@3.3.2": "3.3.3",
+            "yaml@1.10.2": "1.10.3"
+        }
+    }
+}
diff --git a/playlists.png b/playlists.png
new file mode 100644
index 0000000..6fd4de3
Binary files /dev/null and b/playlists.png differ
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..4c5cca2
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,25839 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+overrides:
+  '@hono/node-server@1.19.9': 1.19.14
+  ajv@6.12.6: 6.14.0
+  brace-expansion@1.1.12: 1.1.13
+  defu@6.1.4: 6.1.6
+  devalue@5.6.2: 5.6.4
+  express-rate-limit@8.2.1: 8.3.0
+  flatted@3.3.3: 3.4.2
+  follow-redirects@1.15.11: 1.16.0
+  h3@1.15.5: 1.15.10
+  hono@4.12.0: 4.12.14
+  immutable@5.1.4: 5.1.5
+  lodash-es@4.17.22: 4.18.1
+  node-forge@1.3.3: 1.4.0
+  path-to-regexp@0.1.12: 0.1.13
+  picomatch@2.3.1: 2.3.2
+  rollup@4.52.3: 4.59.0
+  smol-toml@1.6.0: 1.6.1
+  svgo@3.3.2: 3.3.3
+  yaml@1.10.2: 1.10.3
+
+importers:
+
+  .:
+    dependencies:
+      '@angular/animations':
+        specifier: 21.1.5
+        version: 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@angular/cdk':
+        specifier: ^21.1.5
+        version: 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@angular/common':
+        specifier: ~21.1.5
+        version: 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/compiler':
+        specifier: ~21.1.5
+        version: 21.1.5
+      '@angular/core':
+        specifier: ~21.1.5
+        version: 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/forms':
+        specifier: ~21.1.5
+        version: 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@angular/material':
+        specifier: ^21.1.5
+        version: 21.1.5(3d5d3d4637587a26bfc0094ebf8dcf80)
+      '@angular/platform-browser':
+        specifier: ~21.1.5
+        version: 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@angular/platform-browser-dynamic':
+        specifier: ~21.1.5
+        version: 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@21.1.5)(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))
+      '@angular/router':
+        specifier: ~21.1.5
+        version: 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@ngrx/component-store':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@ngrx/effects':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)
+      '@ngrx/entity':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)
+      '@ngrx/router-store':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/router@21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)
+      '@ngrx/signals':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@ngrx/store':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@ngrx/store-devtools':
+        specifier: 21.0.1
+        version: 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)
+      '@ngx-pwa/local-storage':
+        specifier: 21.0.0
+        version: 21.0.0(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@videojs/http-streaming':
+        specifier: 2.15.0
+        version: 2.15.0(video.js@8.23.4)
+      '@yangkghjh/videojs-aspect-ratio-panel':
+        specifier: 0.0.1
+        version: 0.0.1
+      angularx-qrcode:
+        specifier: 21.0.4
+        version: 21.0.4(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      artplayer:
+        specifier: 5.3.0
+        version: 5.3.0
+      axios:
+        specifier: 1.15.0
+        version: 1.15.0
+      better-sqlite3:
+        specifier: ^12.5.0
+        version: 12.5.0
+      date-fns:
+        specifier: 4.1.0
+        version: 4.1.0
+      drizzle-orm:
+        specifier: 0.45.2
+        version: 0.45.2(@types/better-sqlite3@7.6.13)(better-sqlite3@12.5.0)
+      electron-conf:
+        specifier: 1.3.0
+        version: 1.3.0(electron@39.8.8)
+      electron-dl:
+        specifier: 4.0.0
+        version: 4.0.0
+      fix-path:
+        specifier: 5.0.0
+        version: 5.0.0
+      hls.js:
+        specifier: 1.6.13
+        version: 1.6.13
+      iptv-playlist-parser:
+        specifier: github:4gray/iptv-playlist-parser
+        version: https://codeload.github.com/4gray/iptv-playlist-parser/tar.gz/38a62d0b7c98f442bfa102ee8e1fe14169ae9386
+      lodash:
+        specifier: 4.18.1
+        version: 4.18.1
+      mpegts.js:
+        specifier: 1.8.0
+        version: 1.8.0
+      ngx-indexed-db:
+        specifier: 21.0.0
+        version: 21.0.0(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      ngx-skeleton-loader:
+        specifier: 11.3.0
+        version: 11.3.0(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      rxjs:
+        specifier: 7.8.2
+        version: 7.8.2
+      saxes:
+        specifier: 6.0.0
+        version: 6.0.0
+      semver:
+        specifier: 7.7.3
+        version: 7.7.3
+      uuid:
+        specifier: 9.0.0
+        version: 9.0.0
+      video.js:
+        specifier: 8.23.4
+        version: 8.23.4
+      videojs-contrib-quality-levels:
+        specifier: 4.1.0
+        version: 4.1.0(video.js@8.23.4)
+      videojs-quality-selector-hls:
+        specifier: 1.1.1
+        version: 1.1.1
+      zone.js:
+        specifier: ~0.15.1
+        version: 0.15.1
+    devDependencies:
+      '@angular-devkit/core':
+        specifier: ~21.1.4
+        version: 21.1.4
+      '@angular-devkit/schematics':
+        specifier: ~21.1.4
+        version: 21.1.4
+      '@angular-eslint/builder':
+        specifier: 21.2.0
+        version: 21.2.0(@angular/cli@21.1.4(@types/node@20.19.9))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/eslint-plugin':
+        specifier: 21.2.0
+        version: 21.2.0(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/eslint-plugin-template':
+        specifier: 21.2.0
+        version: 21.2.0(@angular-eslint/template-parser@21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/schematics':
+        specifier: 21.2.0
+        version: 21.2.0(@angular-eslint/template-parser@21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@angular/cli@21.1.4(@types/node@20.19.9))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/template-parser':
+        specifier: 21.2.0
+        version: 21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular/build':
+        specifier: ~21.1.4
+        version: 21.1.4(@angular/compiler-cli@21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3))(@angular/compiler@21.1.5)(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/service-worker@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(postcss@8.5.6)(sass-embedded@1.97.1)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))(terser@5.44.1)(tslib@2.8.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
+      '@angular/cli':
+        specifier: ~21.1.4
+        version: 21.1.4(@types/node@20.19.9)
+      '@angular/compiler-cli':
+        specifier: 21.1.5
+        version: 21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3)
+      '@angular/language-service':
+        specifier: 21.1.5
+        version: 21.1.5
+      '@angular/service-worker':
+        specifier: 21.1.5
+        version: 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@astrojs/mdx':
+        specifier: 4.3.13
+        version: 4.3.13(astro@5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))
+      '@astrojs/sitemap':
+        specifier: 3.7.0
+        version: 3.7.0
+      '@astrojs/tailwind':
+        specifier: 6.0.2
+        version: 6.0.2(astro@5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      '@eslint/eslintrc':
+        specifier: 3.3.1
+        version: 3.3.1
+      '@eslint/js':
+        specifier: ^9.38.0
+        version: 9.39.2
+      '@faker-js/faker':
+        specifier: 10.3.0
+        version: 10.3.0
+      '@fontsource/crimson-pro':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource/dm-sans':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource/jetbrains-mono':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource/roboto':
+        specifier: 5.2.10
+        version: 5.2.10
+      '@ngrx/eslint-plugin':
+        specifier: ^21.0.1
+        version: 21.0.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript-eslint@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(typescript@5.9.3)
+      '@ngx-translate/core':
+        specifier: 16.0.4
+        version: 16.0.4(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@ngx-translate/http-loader':
+        specifier: 16.0.1
+        version: 16.0.1(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@nx/angular':
+        specifier: 22.5.1
+        version: 22.5.1(a7619a9b727b1016a8a40de6ba7d327e)
+      '@nx/devkit':
+        specifier: 22.5.1
+        version: 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/eslint':
+        specifier: 22.5.1
+        version: 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@zkochan/js-yaml@0.0.7)(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/eslint-plugin':
+        specifier: 22.5.1
+        version: 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(typescript@5.9.3)
+      '@nx/jest':
+        specifier: 22.5.1
+        version: 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))(typescript@5.9.3)
+      '@nx/js':
+        specifier: 22.5.1
+        version: 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/playwright':
+        specifier: 22.5.1
+        version: 22.5.1(@babel/traverse@7.28.5)(@playwright/test@1.57.0)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@zkochan/js-yaml@0.0.7)(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/web':
+        specifier: 22.5.1
+        version: 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/workspace':
+        specifier: 22.5.1
+        version: 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      '@playwright/test':
+        specifier: ^1.36.0
+        version: 1.57.0
+      '@schematics/angular':
+        specifier: ~21.1.4
+        version: 21.1.4
+      '@semantic-release/changelog':
+        specifier: 6.0.3
+        version: 6.0.3(semantic-release@24.2.9(typescript@5.9.3))
+      '@semantic-release/git':
+        specifier: 10.0.1
+        version: 10.0.1(semantic-release@24.2.9(typescript@5.9.3))
+      '@semantic-release/npm':
+        specifier: 12.0.1
+        version: 12.0.1(semantic-release@24.2.9(typescript@5.9.3))
+      '@swc-node/register':
+        specifier: 1.11.1
+        version: 1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3)
+      '@swc/core':
+        specifier: 1.15.8
+        version: 1.15.8(@swc/helpers@0.5.18)
+      '@swc/helpers':
+        specifier: 0.5.18
+        version: 0.5.18
+      '@tailwindcss/typography':
+        specifier: 0.5.19
+        version: 0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))
+      '@types/better-sqlite3':
+        specifier: ^7.6.12
+        version: 7.6.13
+      '@types/cors':
+        specifier: 2.8.19
+        version: 2.8.19
+      '@types/express':
+        specifier: 5.0.6
+        version: 5.0.6
+      '@types/jest':
+        specifier: ^30.0.0
+        version: 30.0.0
+      '@types/lodash':
+        specifier: 4.17.20
+        version: 4.17.20
+      '@types/mocha':
+        specifier: 9.0.0
+        version: 9.0.0
+      '@types/node':
+        specifier: 20.19.9
+        version: 20.19.9
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
+      '@types/video.js':
+        specifier: 7.3.29
+        version: 7.3.29
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.46.2
+        version: 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.46.2
+        version: 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils':
+        specifier: ^8.46.2
+        version: 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      angular-eslint:
+        specifier: 20.5.2
+        version: 20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript-eslint@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(typescript@5.9.3)
+      astro:
+        specifier: 5.18.1
+        version: 5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
+      conventional-changelog-cli:
+        specifier: 5.0.0
+        version: 5.0.0(conventional-commits-filter@5.0.0)
+      cors:
+        specifier: 2.8.6
+        version: 2.8.6
+      drizzle-kit:
+        specifier: 0.31.5
+        version: 0.31.5
+      electron:
+        specifier: ^39.8.5
+        version: 39.8.8
+      electron-builder:
+        specifier: ^26.0.12
+        version: 26.0.12
+      electron-playwright-helpers:
+        specifier: 1.8.2
+        version: 1.8.2
+      esbuild:
+        specifier: 0.27.0
+        version: 0.27.0
+      eslint:
+        specifier: ^9.8.0
+        version: 9.39.2(jiti@1.21.7)
+      eslint-config-prettier:
+        specifier: ^10.1.8
+        version: 10.1.8(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-import:
+        specifier: 2.32.0
+        version: 2.32.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-playwright:
+        specifier: ^1.6.2
+        version: 1.8.3(eslint@9.39.2(jiti@1.21.7))
+      express:
+        specifier: 5.2.1
+        version: 5.2.1
+      globals:
+        specifier: 15.9.0
+        version: 15.9.0
+      jest:
+        specifier: ^30.0.2
+        version: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      jest-environment-jsdom:
+        specifier: ^30.0.2
+        version: 30.2.0
+      jest-environment-node:
+        specifier: ^30.0.2
+        version: 30.2.0
+      jest-preset-angular:
+        specifier: ~15.0.0
+        version: 15.0.3(c95b39587e3b37a11597cec5dd875b5c)
+      jest-util:
+        specifier: ^30.0.2
+        version: 30.2.0
+      jsonc-eslint-parser:
+        specifier: ^2.1.0
+        version: 2.4.2
+      material-design-icons-iconfont:
+        specifier: 6.7.0
+        version: 6.7.0
+      ng-mocks:
+        specifier: 14.15.1
+        version: 14.15.1(93120d4c81fe34719ab854033955f316)
+      nx:
+        specifier: 22.5.1
+        version: 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      nx-electron:
+        specifier: ^21.0.1
+        version: 21.0.1(@nx/workspace@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(@swc/core@1.15.8(@swc/helpers@0.5.18))(electron@39.8.8)(esbuild@0.27.0)(rxjs@7.8.2)(typescript@5.9.3)
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      semantic-release:
+        specifier: 24.2.9
+        version: 24.2.9(typescript@5.9.3)
+      sharp:
+        specifier: 0.34.5
+        version: 0.34.5
+      tailwindcss:
+        specifier: ^3.4.19
+        version: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
+      ts-jest:
+        specifier: ^29.4.5
+        version: 29.4.6(@babel/core@7.28.5)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.5))(esbuild@0.27.0)(jest-util@30.2.0)(jest@30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)))(typescript@5.9.3)
+      ts-node:
+        specifier: 10.9.2
+        version: 10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)
+      tslib:
+        specifier: ^2.8.1
+        version: 2.8.1
+      tsx:
+        specifier: 4.21.0
+        version: 4.21.0
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.46.2
+        version: 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+
+packages:
+
+  7zip-bin@5.2.0:
+    resolution: {integrity: sha512-ukTPVhqG4jNzMro2qA9HSCSSVJN3aN7tlb+hfqYCt3ER0yWroeA2VR38MNrOHLQ/cVj+DaIMad0kFCtWWowh/A==}
+
+  '@algolia/abtesting@1.12.2':
+    resolution: {integrity: sha512-oWknd6wpfNrmRcH0vzed3UPX0i17o4kYLM5OMITyMVM2xLgaRbIafoxL0e8mcrNNb0iORCJA0evnNDKRYth5WQ==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-abtesting@5.46.2':
+    resolution: {integrity: sha512-oRSUHbylGIuxrlzdPA8FPJuwrLLRavOhAmFGgdAvMcX47XsyM+IOGa9tc7/K5SPvBqn4nhppOCEz7BrzOPWc4A==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-analytics@5.46.2':
+    resolution: {integrity: sha512-EPBN2Oruw0maWOF4OgGPfioTvd+gmiNwx0HmD9IgmlS+l75DatcBkKOPNJN+0z3wBQWUO5oq602ATxIfmTQ8bA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-common@5.46.2':
+    resolution: {integrity: sha512-Hj8gswSJNKZ0oyd0wWissqyasm+wTz1oIsv5ZmLarzOZAp3vFEda8bpDQ8PUhO+DfkbiLyVnAxsPe4cGzWtqkg==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-insights@5.46.2':
+    resolution: {integrity: sha512-6dBZko2jt8FmQcHCbmNLB0kCV079Mx/DJcySTL3wirgDBUH7xhY1pOuUTLMiGkqM5D8moVZTvTdRKZUJRkrwBA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-personalization@5.46.2':
+    resolution: {integrity: sha512-1waE2Uqh/PHNeDXGn/PM/WrmYOBiUGSVxAWqiJIj73jqPqvfzZgzdakHscIVaDl6Cp+j5dwjsZ5LCgaUr6DtmA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-query-suggestions@5.46.2':
+    resolution: {integrity: sha512-EgOzTZkyDcNL6DV0V/24+oBJ+hKo0wNgyrOX/mePBM9bc9huHxIY2352sXmoZ648JXXY2x//V1kropF/Spx83w==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-search@5.46.2':
+    resolution: {integrity: sha512-ZsOJqu4HOG5BlvIFnMU0YKjQ9ZI6r3C31dg2jk5kMWPSdhJpYL9xa5hEe7aieE+707dXeMI4ej3diy6mXdZpgA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/ingestion@1.46.2':
+    resolution: {integrity: sha512-1Uw2OslTWiOFDtt83y0bGiErJYy5MizadV0nHnOoHFWMoDqWW0kQoMFI65pXqRSkVvit5zjXSLik2xMiyQJDWQ==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/monitoring@1.46.2':
+    resolution: {integrity: sha512-xk9f+DPtNcddWN6E7n1hyNNsATBCHIqAvVGG2EAGHJc4AFYL18uM/kMTiOKXE/LKDPyy1JhIerrh9oYb7RBrgw==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/recommend@5.46.2':
+    resolution: {integrity: sha512-NApbTPj9LxGzNw4dYnZmj2BoXiAc8NmbbH6qBNzQgXklGklt/xldTvu+FACN6ltFsTzoNU6j2mWNlHQTKGC5+Q==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/requester-browser-xhr@5.46.2':
+    resolution: {integrity: sha512-ekotpCwpSp033DIIrsTpYlGUCF6momkgupRV/FA3m62SreTSZUKjgK6VTNyG7TtYfq9YFm/pnh65bATP/ZWJEg==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/requester-fetch@5.46.2':
+    resolution: {integrity: sha512-gKE+ZFi/6y7saTr34wS0SqYFDcjHW4Wminv8PDZEi0/mE99+hSrbKgJWxo2ztb5eqGirQTgIh1AMVacGGWM1iw==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/requester-node-http@5.46.2':
+    resolution: {integrity: sha512-ciPihkletp7ttweJ8Zt+GukSVLp2ANJHU+9ttiSxsJZThXc4Y2yJ8HGVWesW5jN1zrsZsezN71KrMx/iZsOYpg==}
+    engines: {node: '>= 14.0.0'}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@angular-devkit/architect@0.2003.13':
+    resolution: {integrity: sha512-JyH6Af6PNC1IHJToColFk1RaXDU87mpPjz7M5sWDfn8bC+KBipw6dSdRkCEuw0D9HY1lZkC9EBV9k9GhpvHjCQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+
+  '@angular-devkit/architect@0.2101.4':
+    resolution: {integrity: sha512-3yyebORk+ovtO+LfDjIGbGCZhCMDAsyn9vkCljARj3sSshS4blOQBar0g+V3kYAweLT5Gf+rTKbN5jneOkBAFQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    hasBin: true
+
+  '@angular-devkit/core@20.3.13':
+    resolution: {integrity: sha512-/D84T1Caxll3I2sRihPDR9UaWBhF50M+tAX15PdP6uSh/TxwAlLl9p7Rm1bD0mPjPercqaEKA+h9a9qLP16hug==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    peerDependencies:
+      chokidar: ^4.0.0
+    peerDependenciesMeta:
+      chokidar:
+        optional: true
+
+  '@angular-devkit/core@21.1.4':
+    resolution: {integrity: sha512-ObPTI5gYCB1jGxTRhcqZ6oQVUBFVJ8GH4LksVuAiz0nFX7xxpzARWvlhq943EtnlovVlUd9I8fM3RQqjfGVVAQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    peerDependencies:
+      chokidar: ^5.0.0
+    peerDependenciesMeta:
+      chokidar:
+        optional: true
+
+  '@angular-devkit/schematics@20.3.13':
+    resolution: {integrity: sha512-hdMKY4rUTko8xqeWYGnwwDYDomkeOoLsYsP6SdaHWK7hpGvzWsT6Q/aIv8J8NrCYkLu+M+5nLiKOooweUZu3GQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+
+  '@angular-devkit/schematics@21.1.4':
+    resolution: {integrity: sha512-Nqq0ioCUxrbEX+L4KOarETcZZJNnJ1mAJ0ubO4VM91qnn8RBBM9SnQ91590TfC34Szk/wh+3+Uj6KUvTJNuegQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+
+  '@angular-eslint/builder@20.5.2':
+    resolution: {integrity: sha512-BBuuVnkA8JCdmuqMlbaU+TRYZrrTqZgAR+Qn/2I371JMMPK3KFo1IdnGK2ByA472JTdK6QtO5kqAXzRkAEv8dA==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/builder@21.2.0':
+    resolution: {integrity: sha512-wcp3J9cbrDwSeI/o1D/DSvMQa8zpKjc5WhRGTx33omhWijCfiVNEAiBLWiEx5Sb/dWcoX8yFNWY5jSgFVy9Sjw==}
+    peerDependencies:
+      '@angular/cli': '>= 21.0.0 < 22.0.0'
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/bundled-angular-compiler@20.5.2':
+    resolution: {integrity: sha512-lYCCohMJ7dj49o2A8O8WOzZaXwDp51fZ9F8oyz/EtORDr83VVcsLeXRaByfalbWbJHWVogZ5Koo5rTF9IrZBeA==}
+
+  '@angular-eslint/bundled-angular-compiler@21.2.0':
+    resolution: {integrity: sha512-J0DWL+j6t9ItFIyIADvzHGqwDA1qfVJ9bx+oTmJ/Hlo7cUpIRoXpcTXpug0CEEABFH0RfDu6PDG2b0FoZ1+7bg==}
+
+  '@angular-eslint/eslint-plugin-template@20.5.2':
+    resolution: {integrity: sha512-Mc0hkkP0Ux31U+c7YE7eJJbQSTbSRnMYRwjkYPRVUfViHFicAj+NkYUwIHsoEHXHvNnMEdoRAMO8lHY311DoLg==}
+    peerDependencies:
+      '@angular-eslint/template-parser': 20.5.2
+      '@typescript-eslint/types': ^7.11.0 || ^8.0.0
+      '@typescript-eslint/utils': ^7.11.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/eslint-plugin-template@21.2.0':
+    resolution: {integrity: sha512-lJ13Dj0DjR6YiceQR0sRbyWzSzOQ6uZPwK9CJUF3wuZjYAUvL1D61zaU9QrVLtf89NVOxv+dYZHDdu3IDeIqbA==}
+    peerDependencies:
+      '@angular-eslint/template-parser': 21.2.0
+      '@typescript-eslint/types': ^7.11.0 || ^8.0.0
+      '@typescript-eslint/utils': ^7.11.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/eslint-plugin@20.5.2':
+    resolution: {integrity: sha512-9opiJMnGvFA12sAbc+slIPXsHnmjQxYtCcb2yhPIeHEuvlF2GKdvO4i4VFDbhRVOOn8IsLZpSG1C1tZtBEytdQ==}
+    peerDependencies:
+      '@typescript-eslint/utils': ^7.11.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/eslint-plugin@21.2.0':
+    resolution: {integrity: sha512-X2Qn2viDsjm91CEMxNrxDH3qkKpp6un0C1F1BW2p/m9J4AUVfOcXwWz9UpHFSHTRQ+YlTJbiH1ZwwAPeKhFaxA==}
+    peerDependencies:
+      '@typescript-eslint/utils': ^7.11.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/schematics@20.5.2':
+    resolution: {integrity: sha512-02yzRgmUPCc+NniasYECMey09EOm6OjKZ8aJtAbrDnHcvEu/YjFWyF8y17RT70MZcpFatxT79AV7zXQEwR2w7g==}
+
+  '@angular-eslint/schematics@21.2.0':
+    resolution: {integrity: sha512-WtT4fPKIUQ/hswy+l2GF/rKOdD+42L3fUzzcwRzNutQbe2tU9SimoSOAsay/ylWEuhIOQTs7ysPB8fUgFQoLpA==}
+    peerDependencies:
+      '@angular/cli': '>= 21.0.0 < 22.0.0'
+
+  '@angular-eslint/template-parser@20.5.2':
+    resolution: {integrity: sha512-zBkrr9+ml5dH+gnz4uFwQFcBNKzo81BGSPFf7bHNmphXS9U6RdGokBJF/R+YVFt05CkCl4U00fuydR2P/mh7mQ==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/template-parser@21.2.0':
+    resolution: {integrity: sha512-TCb3qYOC/uXKZCo56cJ6N9sHeWdFhyVqrbbYfFjTi09081T6jllgHDZL5Ms7gOMNY8KywWGGbhxwvzeA0RwTgA==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/utils@20.5.2':
+    resolution: {integrity: sha512-JFNovS6jVpNVucm1MW0SjeAxRowDUvpTKvqCZqQTgzVCh5jj3Lgz2fcqLp5ICG27s96zDrNJzHBNKxDai4t6yQ==}
+    peerDependencies:
+      '@typescript-eslint/utils': ^7.11.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular-eslint/utils@21.2.0':
+    resolution: {integrity: sha512-E19/hkuvHoNFvctBkmEiGWpy2bbC6cgbr3GNVrn2nGtbI4jnwnDFCGHv50I4LBfvj0PA9E6TWe73ejJ5qoMJWQ==}
+    peerDependencies:
+      '@typescript-eslint/utils': ^7.11.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+
+  '@angular/animations@21.1.5':
+    resolution: {integrity: sha512-gsqHX8lCYV8cgVtHs0iLwrX8SVlmcjUF44l/xCc/jBC/TeKWRl2e6Jqrn1Wcd0NDlGiNsm+mYNyqMyy5/I7kjw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/core': 21.1.5
+
+  '@angular/build@21.1.4':
+    resolution: {integrity: sha512-7CAAQPWFMMqod40ox5MOVB/CnoBXFDehyQhs0hls6lu7bOy/M0EDy0v6bERkyNGRz1mihWWBiCV8XzEinrlq1A==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    peerDependencies:
+      '@angular/compiler': ^21.0.0
+      '@angular/compiler-cli': ^21.0.0
+      '@angular/core': ^21.0.0
+      '@angular/localize': ^21.0.0
+      '@angular/platform-browser': ^21.0.0
+      '@angular/platform-server': ^21.0.0
+      '@angular/service-worker': ^21.0.0
+      '@angular/ssr': ^21.1.4
+      karma: ^6.4.0
+      less: ^4.2.0
+      ng-packagr: ^21.0.0
+      postcss: ^8.4.0
+      tailwindcss: ^2.0.0 || ^3.0.0 || ^4.0.0
+      tslib: ^2.3.0
+      typescript: '>=5.9 <6.0'
+      vitest: ^4.0.8
+    peerDependenciesMeta:
+      '@angular/core':
+        optional: true
+      '@angular/localize':
+        optional: true
+      '@angular/platform-browser':
+        optional: true
+      '@angular/platform-server':
+        optional: true
+      '@angular/service-worker':
+        optional: true
+      '@angular/ssr':
+        optional: true
+      karma:
+        optional: true
+      less:
+        optional: true
+      ng-packagr:
+        optional: true
+      postcss:
+        optional: true
+      tailwindcss:
+        optional: true
+      vitest:
+        optional: true
+
+  '@angular/cdk@21.1.5':
+    resolution: {integrity: sha512-AlQPgqe3LLwXCyrDwYSX3m/WKnl2ppCMW7Gb+7bJpIcpMdWYEpSOSQF318jXGYIysKg43YbdJ1tWhJWY/cbn3w==}
+    peerDependencies:
+      '@angular/common': ^21.0.0 || ^22.0.0
+      '@angular/core': ^21.0.0 || ^22.0.0
+      '@angular/platform-browser': ^21.0.0 || ^22.0.0
+      rxjs: ^6.5.3 || ^7.4.0
+
+  '@angular/cli@21.1.4':
+    resolution: {integrity: sha512-XsMHgxTvHGiXXrhYZz3zMZYhYU0gHdpoHKGiEKXwcx+S1KoYbIssyg6oF2Kq49ZaE0OYCTKjnvgDce6ZqdkJ/A==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    hasBin: true
+
+  '@angular/common@21.1.5':
+    resolution: {integrity: sha512-olO2F0b+H8YBfsuQFEwo9Hjf+B714xGcttDW37+4jnY2IRS2uYeMu2RGIpY7ps+0uZ017c4iK3CCgSPBgmbTcA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/core': 21.1.5
+      rxjs: ^6.5.3 || ^7.4.0
+
+  '@angular/compiler-cli@21.1.5':
+    resolution: {integrity: sha512-i2r2bQuWdjjFGTd2TA7FtCWNx5yJ3BMoyTGUC9lzSfmxWAfcH/NWR+6OdaEVwv6Zap3IXYYxs8S+REkx954EwA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@angular/compiler': 21.1.5
+      typescript: '>=5.9 <6.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@angular/compiler@21.1.5':
+    resolution: {integrity: sha512-yRUdWlL+AWcTL4d7zD0jkNqsjvxXpWEihvOfD2gc65DO0+E80DsWIpHq9A8yWeLukbfLcmBGI2QbfW9+SXAlvg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@angular/core@21.1.5':
+    resolution: {integrity: sha512-m61YHiyE+SIvS8UXcFLjYCucv6ShJJCwz9xxEk7ysYW9wOtHdfIf9tgyOsucZDAvrvpSyQLRj5jGBCGm1VIvXA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/compiler': 21.1.5
+      rxjs: ^6.5.3 || ^7.4.0
+      zone.js: ~0.15.0 || ~0.16.0
+    peerDependenciesMeta:
+      '@angular/compiler':
+        optional: true
+      zone.js:
+        optional: true
+
+  '@angular/forms@21.1.5':
+    resolution: {integrity: sha512-Z8Vcgz5KYlCobRxLjyGGUBv0mA4nusuiD36GqYRn3sR780TLDcPFVwTCwVEWLdwID64oiHXG+x9jjU/Z3HzR6A==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/common': 21.1.5
+      '@angular/core': 21.1.5
+      '@angular/platform-browser': 21.1.5
+      rxjs: ^6.5.3 || ^7.4.0
+
+  '@angular/language-service@21.1.5':
+    resolution: {integrity: sha512-/MiXx/peMBjMHEX6Gm7C6ZHOlcgEzkWeBlI7WWnIEDU9vU6F3nU4kauBYdLr/EpXhHpdpOtL4eknPhAfdvVrJA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@angular/material@21.1.5':
+    resolution: {integrity: sha512-D6JvFulPvIKhPJ52prMV7DxwYMzcUpHar11ZcMb7r9WQzUfCS3FDPXfMAce5n3h+3kFccfmmGpnyBwqTlLPSig==}
+    peerDependencies:
+      '@angular/cdk': 21.1.5
+      '@angular/common': ^21.0.0 || ^22.0.0
+      '@angular/core': ^21.0.0 || ^22.0.0
+      '@angular/forms': ^21.0.0 || ^22.0.0
+      '@angular/platform-browser': ^21.0.0 || ^22.0.0
+      rxjs: ^6.5.3 || ^7.4.0
+
+  '@angular/platform-browser-dynamic@21.1.5':
+    resolution: {integrity: sha512-Pd8nPbJSIONnze1WS9wLBAtaFw4TYIH+ZGjKHS9G1E9l09tDWtHWyB7dY82Sc//Nc8iR4V7dcsbUmFjOJHThww==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/common': 21.1.5
+      '@angular/compiler': 21.1.5
+      '@angular/core': 21.1.5
+      '@angular/platform-browser': 21.1.5
+
+  '@angular/platform-browser@21.1.5':
+    resolution: {integrity: sha512-rAN0cu05Pg7HHe9JMRd3g5JyyVCeFW8QiB/jG6klUrOTF4QzyCbmwlm7MX0uTx3CWAZraWCGbdahUkLyYtuqFA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/animations': 21.1.5
+      '@angular/common': 21.1.5
+      '@angular/core': 21.1.5
+    peerDependenciesMeta:
+      '@angular/animations':
+        optional: true
+
+  '@angular/router@21.1.5':
+    resolution: {integrity: sha512-OjFn6Nw51CU712CMbl2U9TxlCkzOmjMLYPAfnV4+RdG7o+/eOS2nV0oapJ88RNCw7Yl04PA1amc3ql3agDFd4A==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@angular/common': 21.1.5
+      '@angular/core': 21.1.5
+      '@angular/platform-browser': 21.1.5
+      rxjs: ^6.5.3 || ^7.4.0
+
+  '@angular/service-worker@21.1.5':
+    resolution: {integrity: sha512-hG+hlcPo3Qkz8LAweGTiN0gQyd24h/rX7gAJZ+R3/lpMJYTMrY76Qrxl7GRs9cN24WbawITMWlhNNFCVQEIQtg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@angular/core': 21.1.5
+      rxjs: ^6.5.3 || ^7.4.0
+
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
+  '@astrojs/compiler@2.13.1':
+    resolution: {integrity: sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg==}
+
+  '@astrojs/internal-helpers@0.7.5':
+    resolution: {integrity: sha512-vreGnYSSKhAjFJCWAwe/CNhONvoc5lokxtRoZims+0wa3KbHBdPHSSthJsKxPd8d/aic6lWKpRTYGY/hsgK6EA==}
+
+  '@astrojs/internal-helpers@0.7.6':
+    resolution: {integrity: sha512-GOle7smBWKfMSP8osUIGOlB5kaHdQLV3foCsf+5Q9Wsuu+C6Fs3Ez/ttXmhjZ1HkSgsogcM1RXSjjOVieHq16Q==}
+
+  '@astrojs/markdown-remark@6.3.10':
+    resolution: {integrity: sha512-kk4HeYR6AcnzC4QV8iSlOfh+N8TZ3MEStxPyenyCtemqn8IpEATBFMTJcfrNW32dgpt6MY3oCkMM/Tv3/I4G3A==}
+
+  '@astrojs/markdown-remark@6.3.11':
+    resolution: {integrity: sha512-hcaxX/5aC6lQgHeGh1i+aauvSwIT6cfyFjKWvExYSxUhZZBBdvCliOtu06gbQyhbe0pGJNoNmqNlQZ5zYUuIyQ==}
+
+  '@astrojs/mdx@4.3.13':
+    resolution: {integrity: sha512-IHDHVKz0JfKBy3//52JSiyWv089b7GVSChIXLrlUOoTLWowG3wr2/8hkaEgEyd/vysvNQvGk+QhysXpJW5ve6Q==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+    peerDependencies:
+      astro: ^5.0.0
+
+  '@astrojs/prism@3.3.0':
+    resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+
+  '@astrojs/sitemap@3.7.0':
+    resolution: {integrity: sha512-+qxjUrz6Jcgh+D5VE1gKUJTA3pSthuPHe6Ao5JCxok794Lewx8hBFaWHtOnN0ntb2lfOf7gvOi9TefUswQ/ZVA==}
+
+  '@astrojs/tailwind@6.0.2':
+    resolution: {integrity: sha512-j3mhLNeugZq6A8dMNXVarUa8K6X9AW+QHU9u3lKNrPLMHhOQ0S7VeWhHwEeJFpEK1BTKEUY1U78VQv2gN6hNGg==}
+    peerDependencies:
+      astro: ^3.0.0 || ^4.0.0 || ^5.0.0
+      tailwindcss: ^3.0.24
+
+  '@astrojs/telemetry@3.3.0':
+    resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.5':
+    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.28.5':
+    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.28.5':
+    resolution: {integrity: sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5':
+    resolution: {integrity: sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-define-polyfill-provider@0.6.5':
+    resolution: {integrity: sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.27.1':
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-remap-async-to-generator@7.27.1':
+    resolution: {integrity: sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-replace-supers@7.27.1':
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-split-export-declaration@7.24.7':
+    resolution: {integrity: sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-wrap-function@7.28.3':
+    resolution: {integrity: sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
+    resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1':
+    resolution: {integrity: sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1':
+    resolution: {integrity: sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1':
+    resolution: {integrity: sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3':
+    resolution: {integrity: sha512-b6YTX108evsvE4YgWyQ921ZAFFQm3Bn+CA3+ZXlNVnPhx+UfsVURoPjfGAPCjBgrqo30yX/C2nZGX96DxvR9Iw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-proposal-decorators@7.28.0':
+    resolution: {integrity: sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2':
+    resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-async-generators@7.8.4':
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-bigint@7.8.3':
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-properties@7.12.13':
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-static-block@7.14.5':
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-decorators@7.27.1':
+    resolution: {integrity: sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-assertions@7.27.1':
+    resolution: {integrity: sha512-UT/Jrhw57xg4ILHLFnzFpPDlMbcdEicaAtjPQpbj9wa8T4r5KVWCimHcL/460g8Ht0DMxDyjsLgiWSkVjnwPFg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-attributes@7.27.1':
+    resolution: {integrity: sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-meta@7.10.4':
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-json-strings@7.8.3':
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.27.1':
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3':
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4':
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3':
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3':
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3':
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5':
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-top-level-await@7.14.5':
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.27.1':
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6':
+    resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-arrow-functions@7.27.1':
+    resolution: {integrity: sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-async-generator-functions@7.28.0':
+    resolution: {integrity: sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-async-to-generator@7.27.1':
+    resolution: {integrity: sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-block-scoped-functions@7.27.1':
+    resolution: {integrity: sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-block-scoping@7.28.5':
+    resolution: {integrity: sha512-45DmULpySVvmq9Pj3X9B+62Xe+DJGov27QravQJU1LLcapR6/10i+gYVAucGGJpHBp5mYxIMK4nDAT/QDLr47g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-class-properties@7.27.1':
+    resolution: {integrity: sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-class-static-block@7.28.3':
+    resolution: {integrity: sha512-LtPXlBbRoc4Njl/oh1CeD/3jC+atytbnf/UqLoqTDcEYGUPj022+rvfkbDYieUrSj3CaV4yHDByPE+T2HwfsJg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+
+  '@babel/plugin-transform-classes@7.28.4':
+    resolution: {integrity: sha512-cFOlhIYPBv/iBoc+KS3M6et2XPtbT2HiCRfBXWtfpc9OAyostldxIf9YAYB6ypURBBbx+Qv6nyrLzASfJe+hBA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-computed-properties@7.27.1':
+    resolution: {integrity: sha512-lj9PGWvMTVksbWiDT2tW68zGS/cyo4AkZ/QTp0sQT0mjPopCmrSkzxeXkznjqBxzDI6TclZhOJbBmbBLjuOZUw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-destructuring@7.28.5':
+    resolution: {integrity: sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-dotall-regex@7.27.1':
+    resolution: {integrity: sha512-gEbkDVGRvjj7+T1ivxrfgygpT7GUd4vmODtYpbs0gZATdkX8/iSnOtZSxiZnsgm1YjTgjI6VKBGSJJevkrclzw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-duplicate-keys@7.27.1':
+    resolution: {integrity: sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1':
+    resolution: {integrity: sha512-hkGcueTEzuhB30B3eJCbCYeCaaEQOmQR0AdvzpD4LoN0GXMWzzGSuRrxR2xTnCrvNbVwK9N6/jQ92GSLfiZWoQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-dynamic-import@7.27.1':
+    resolution: {integrity: sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-explicit-resource-management@7.28.0':
+    resolution: {integrity: sha512-K8nhUcn3f6iB+P3gwCv/no7OdzOZQcKchW6N389V6PD8NUWKZHzndOd9sPDVbMoBsbmjMqlB4L9fm+fEFNVlwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.5':
+    resolution: {integrity: sha512-D4WIMaFtwa2NizOp+dnoFjRez/ClKiC2BqqImwKd1X28nqBtZEyCYJ2ozQrrzlxAFrcrjxo39S6khe9RNDlGzw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-export-namespace-from@7.27.1':
+    resolution: {integrity: sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-for-of@7.27.1':
+    resolution: {integrity: sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-function-name@7.27.1':
+    resolution: {integrity: sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-json-strings@7.27.1':
+    resolution: {integrity: sha512-6WVLVJiTjqcQauBhn1LkICsR2H+zm62I3h9faTDKt1qP4jn2o72tSvqMwtGFKGTpojce0gJs+76eZ2uCHRZh0Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-literals@7.27.1':
+    resolution: {integrity: sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5':
+    resolution: {integrity: sha512-axUuqnUTBuXyHGcJEVVh9pORaN6wC5bYfE7FGzPiaWa3syib9m7g+/IT/4VgCOe2Upef43PHzeAvcrVek6QuuA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-member-expression-literals@7.27.1':
+    resolution: {integrity: sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-amd@7.27.1':
+    resolution: {integrity: sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1':
+    resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5':
+    resolution: {integrity: sha512-vn5Jma98LCOeBy/KpeQhXcV2WZgaRUtjwQmjoBuLNlOmkg0fB5pdvYVeWRYI69wWKwK2cD1QbMiUQnoujWvrew==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-umd@7.27.1':
+    resolution: {integrity: sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1':
+    resolution: {integrity: sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-new-target@7.27.1':
+    resolution: {integrity: sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1':
+    resolution: {integrity: sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-numeric-separator@7.27.1':
+    resolution: {integrity: sha512-fdPKAcujuvEChxDBJ5c+0BTaS6revLV7CJL08e4m3de8qJfNIuCc2nc7XJYOjBoTMJeqSmwXJ0ypE14RCjLwaw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-object-rest-spread@7.28.4':
+    resolution: {integrity: sha512-373KA2HQzKhQCYiRVIRr+3MjpCObqzDlyrM6u4I201wL8Mp2wHf7uB8GhDwis03k2ti8Zr65Zyyqs1xOxUF/Ew==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-object-super@7.27.1':
+    resolution: {integrity: sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-catch-binding@7.27.1':
+    resolution: {integrity: sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-chaining@7.28.5':
+    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-parameters@7.27.7':
+    resolution: {integrity: sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-methods@7.27.1':
+    resolution: {integrity: sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-property-in-object@7.27.1':
+    resolution: {integrity: sha512-5J+IhqTi1XPa0DXF83jYOaARrX+41gOewWbkPyjMNRDqgOCqdffGh8L3f/Ek5utaEBZExjSAzcyjmV9SSAWObQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-property-literals@7.27.1':
+    resolution: {integrity: sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-regenerator@7.28.4':
+    resolution: {integrity: sha512-+ZEdQlBoRg9m2NnzvEeLgtvBMO4tkFBw5SQIUgLICgTrumLoU7lr+Oghi6km2PFj+dbUt2u1oby2w3BDO9YQnA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-regexp-modifiers@7.27.1':
+    resolution: {integrity: sha512-TtEciroaiODtXvLZv4rmfMhkCv8jx3wgKpL68PuiPh2M4fvz5jhsA7697N1gMvkvr/JTF13DrFYyEbY9U7cVPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-reserved-words@7.27.1':
+    resolution: {integrity: sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-runtime@7.28.5':
+    resolution: {integrity: sha512-20NUVgOrinudkIBzQ2bNxP08YpKprUkRTiRSd2/Z5GOdPImJGkoN4Z7IQe1T5AdyKI1i5L6RBmluqdSzvaq9/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-shorthand-properties@7.27.1':
+    resolution: {integrity: sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-spread@7.27.1':
+    resolution: {integrity: sha512-kpb3HUqaILBJcRFVhFUs6Trdd4mkrzcGXss+6/mxUd273PfbWqSDHRzMT2234gIg2QYfAjvXLSquP1xECSg09Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-sticky-regex@7.27.1':
+    resolution: {integrity: sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-template-literals@7.27.1':
+    resolution: {integrity: sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typeof-symbol@7.27.1':
+    resolution: {integrity: sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.28.5':
+    resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-escapes@7.27.1':
+    resolution: {integrity: sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-property-regex@7.27.1':
+    resolution: {integrity: sha512-uW20S39PnaTImxp39O5qFlHLS9LJEmANjMG7SxIhap8rCHqu0Ik+tLEPX5DKmHn6CsWQ7j3lix2tFOa5YtL12Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-regex@7.27.1':
+    resolution: {integrity: sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-sets-regex@7.27.1':
+    resolution: {integrity: sha512-EtkOujbc4cgvb0mlpQefi4NTPBzhSIevblFevACNLUspmrALgmEBdL/XfnyyITfd8fKBZrZys92zOWcik7j9Tw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/preset-env@7.28.5':
+    resolution: {integrity: sha512-S36mOoi1Sb6Fz98fBfE+UZSpYw5mJm0NUHtIKrOuNcqeFauy1J6dIvXm2KRVKobOSaGq4t/hBXdN4HGU3wL9Wg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-modules@0.1.6-no-external-plugins':
+    resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
+
+  '@babel/preset-typescript@7.28.5':
+    resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.5':
+    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
+  '@bufbuild/protobuf@2.10.2':
+    resolution: {integrity: sha512-uFsRXwIGyu+r6AMdz+XijIIZJYpoWeYzILt5yZ2d3mCjQrWUTVpVD9WL/jZAbvp+Ed04rOhrsk7FiTcEDseB5A==}
+
+  '@capsizecss/unpack@4.0.0':
+    resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==}
+    engines: {node: '>=18'}
+
+  '@colors/colors@1.5.0':
+    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
+    engines: {node: '>=0.1.90'}
+
+  '@conventional-changelog/git-client@1.0.1':
+    resolution: {integrity: sha512-PJEqBwAleffCMETaVm/fUgHldzBE35JFk3/9LL6NUA5EXa3qednu+UT6M7E5iBu3zIQZCULYIiZ90fBYHt6xUw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      conventional-commits-filter: ^5.0.0
+      conventional-commits-parser: ^6.0.0
+    peerDependenciesMeta:
+      conventional-commits-filter:
+        optional: true
+      conventional-commits-parser:
+        optional: true
+
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@develar/schema-utils@2.6.5':
+    resolution: {integrity: sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==}
+    engines: {node: '>= 8.9.0'}
+
+  '@drizzle-team/brocli@0.10.2':
+    resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
+
+  '@electron/asar@3.2.18':
+    resolution: {integrity: sha512-2XyvMe3N3Nrs8cV39IKELRHTYUWFKrmqqSY1U+GMlc0jvqjIVnoxhNd2H4JolWQncbJi1DCvb5TNxZuI2fEjWg==}
+    engines: {node: '>=10.12.0'}
+    hasBin: true
+
+  '@electron/asar@3.4.1':
+    resolution: {integrity: sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==}
+    engines: {node: '>=10.12.0'}
+    hasBin: true
+
+  '@electron/fuses@1.8.0':
+    resolution: {integrity: sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==}
+    hasBin: true
+
+  '@electron/get@2.0.3':
+    resolution: {integrity: sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==}
+    engines: {node: '>=12'}
+
+  '@electron/node-gyp@https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2':
+    resolution: {tarball: https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2}
+    version: 10.2.0-electron.1
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+
+  '@electron/notarize@2.5.0':
+    resolution: {integrity: sha512-jNT8nwH1f9X5GEITXaQ8IF/KdskvIkOFfB2CvwumsveVidzpSc+mvhhTMdAGSYF3O+Nq49lJ7y+ssODRXu06+A==}
+    engines: {node: '>= 10.0.0'}
+
+  '@electron/osx-sign@1.3.1':
+    resolution: {integrity: sha512-BAfviURMHpmb1Yb50YbCxnOY0wfwaLXH5KJ4+80zS0gUkzDX3ec23naTlEqKsN+PwYn+a1cCzM7BJ4Wcd3sGzw==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+
+  '@electron/rebuild@3.6.1':
+    resolution: {integrity: sha512-f6596ZHpEq/YskUd8emYvOUne89ij8mQgjYFA5ru25QwbrRO+t1SImofdDv7kKOuWCmVOuU5tvfkbgGxIl3E/w==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+
+  '@electron/rebuild@3.7.0':
+    resolution: {integrity: sha512-VW++CNSlZwMYP7MyXEbrKjpzEwhB5kDNbzGtiPEjwYysqyTCF+YbNJ210Dj3AjWsGSV4iEEwNkmJN9yGZmVvmw==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+
+  '@electron/universal@2.0.1':
+    resolution: {integrity: sha512-fKpv9kg4SPmt+hY7SVBnIYULE9QJl8L3sCfcBsnqbJwwBwAeTLokJ9TRt9y7bK0JAzIW2y78TVVjvnQEms/yyA==}
+    engines: {node: '>=16.4'}
+
+  '@emnapi/core@1.8.1':
+    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
+
+  '@emnapi/runtime@1.8.1':
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+
+  '@esbuild-kit/core-utils@3.3.2':
+    resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
+    deprecated: 'Merged into tsx: https://tsx.is'
+
+  '@esbuild-kit/esm-loader@2.6.5':
+    resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
+    deprecated: 'Merged into tsx: https://tsx.is'
+
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.27.0':
+    resolution: {integrity: sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.27.2':
+    resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.18.20':
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.27.0':
+    resolution: {integrity: sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.27.2':
+    resolution: {integrity: sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.18.20':
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.0':
+    resolution: {integrity: sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.2':
+    resolution: {integrity: sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.18.20':
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.0':
+    resolution: {integrity: sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.2':
+    resolution: {integrity: sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.18.20':
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.27.0':
+    resolution: {integrity: sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.27.2':
+    resolution: {integrity: sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.18.20':
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.0':
+    resolution: {integrity: sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.2':
+    resolution: {integrity: sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.18.20':
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.27.0':
+    resolution: {integrity: sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.27.2':
+    resolution: {integrity: sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.18.20':
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.0':
+    resolution: {integrity: sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.2':
+    resolution: {integrity: sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.18.20':
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.27.0':
+    resolution: {integrity: sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.27.2':
+    resolution: {integrity: sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.18.20':
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.0':
+    resolution: {integrity: sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.2':
+    resolution: {integrity: sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.18.20':
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.0':
+    resolution: {integrity: sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.2':
+    resolution: {integrity: sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.18.20':
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.0':
+    resolution: {integrity: sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.2':
+    resolution: {integrity: sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.18.20':
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.0':
+    resolution: {integrity: sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.2':
+    resolution: {integrity: sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.18.20':
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.0':
+    resolution: {integrity: sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.2':
+    resolution: {integrity: sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.18.20':
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.0':
+    resolution: {integrity: sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.2':
+    resolution: {integrity: sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.18.20':
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.0':
+    resolution: {integrity: sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.2':
+    resolution: {integrity: sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.18.20':
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.0':
+    resolution: {integrity: sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.2':
+    resolution: {integrity: sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.0':
+    resolution: {integrity: sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.18.20':
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.0':
+    resolution: {integrity: sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.2':
+    resolution: {integrity: sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-arm64@0.27.0':
+    resolution: {integrity: sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.18.20':
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.0':
+    resolution: {integrity: sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.2':
+    resolution: {integrity: sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.0':
+    resolution: {integrity: sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.2':
+    resolution: {integrity: sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.18.20':
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.27.0':
+    resolution: {integrity: sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.27.2':
+    resolution: {integrity: sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.18.20':
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.27.0':
+    resolution: {integrity: sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.27.2':
+    resolution: {integrity: sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.18.20':
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.0':
+    resolution: {integrity: sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.2':
+    resolution: {integrity: sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.18.20':
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.0':
+    resolution: {integrity: sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.2':
+    resolution: {integrity: sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.2':
+    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@faker-js/faker@10.3.0':
+    resolution: {integrity: sha512-It0Sne6P3szg7JIi6CgKbvTZoMjxBZhcv91ZrqrNuaZQfB5WoqYYbzCUOq89YR+VY8juY9M1vDWmDDa2TzfXCw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0, npm: '>=10'}
+
+  '@fontsource/crimson-pro@5.2.8':
+    resolution: {integrity: sha512-t+cAoAswUKEReDPqDNWWSyAp7baZkKrtF6Ry0KrDZQHJCldS9pIbRH0n2hm1u4+SbIUI7c+nUS9yfK6rEhycTw==}
+
+  '@fontsource/dm-sans@5.2.8':
+    resolution: {integrity: sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA==}
+
+  '@fontsource/jetbrains-mono@5.2.8':
+    resolution: {integrity: sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==}
+
+  '@fontsource/roboto@5.2.10':
+    resolution: {integrity: sha512-8HlA5FtSfz//oFSr2eL7GFXAiE7eIkcGOtx7tjsLKq+as702x9+GU7K95iDeWFapHC4M2hv9RrpXKRTGGBI8Zg==}
+
+  '@gar/promisify@1.1.3':
+    resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
+
+  '@hono/node-server@1.19.14':
+    resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: 4.12.14
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@hutson/parse-repository-url@5.0.0':
+    resolution: {integrity: sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==}
+    engines: {node: '>=10.13.0'}
+
+  '@img/colour@1.0.0':
+    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@inquirer/ansi@1.0.2':
+    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
+    engines: {node: '>=18'}
+
+  '@inquirer/checkbox@4.3.2':
+    resolution: {integrity: sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/confirm@5.1.21':
+    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.3.2':
+    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/editor@4.2.23':
+    resolution: {integrity: sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/expand@4.0.23':
+    resolution: {integrity: sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.15':
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
+
+  '@inquirer/input@4.3.1':
+    resolution: {integrity: sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/number@3.0.23':
+    resolution: {integrity: sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/password@4.0.23':
+    resolution: {integrity: sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/prompts@7.10.1':
+    resolution: {integrity: sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/rawlist@4.1.11':
+    resolution: {integrity: sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/search@3.2.2':
+    resolution: {integrity: sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/select@4.4.2':
+    resolution: {integrity: sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/type@3.0.10':
+    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
+  '@jest/console@30.2.0':
+    resolution: {integrity: sha512-+O1ifRjkvYIkBqASKWgLxrpEhQAAE7hY77ALLUufSk5717KfOShg6IbqLmdsLMPdUiFvA2kTs0R7YZy+l0IzZQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/core@30.2.0':
+    resolution: {integrity: sha512-03W6IhuhjqTlpzh/ojut/pDB2LPRygyWX8ExpgHtQA8H/3K7+1vKmcINx5UzeOX1se6YEsBsOHQ1CRzf3fOwTQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/diff-sequences@30.0.1':
+    resolution: {integrity: sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/environment-jsdom-abstract@30.2.0':
+    resolution: {integrity: sha512-kazxw2L9IPuZpQ0mEt9lu9Z98SqR74xcagANmMBU16X0lS23yPc0+S6hGLUz8kVRlomZEs/5S/Zlpqwf5yu6OQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+      jsdom: '*'
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  '@jest/environment@30.2.0':
+    resolution: {integrity: sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/expect-utils@30.2.0':
+    resolution: {integrity: sha512-1JnRfhqpD8HGpOmQp180Fo9Zt69zNtC+9lR+kT7NVL05tNXIi+QC8Csz7lfidMoVLPD3FnOtcmp0CEFnxExGEA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/expect@30.2.0':
+    resolution: {integrity: sha512-V9yxQK5erfzx99Sf+7LbhBwNWEZ9eZay8qQ9+JSC0TrMR1pMDHLMY+BnVPacWU6Jamrh252/IKo4F1Xn/zfiqA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/fake-timers@30.2.0':
+    resolution: {integrity: sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/get-type@30.1.0':
+    resolution: {integrity: sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/globals@30.2.0':
+    resolution: {integrity: sha512-b63wmnKPaK+6ZZfpYhz9K61oybvbI1aMcIs80++JI1O1rR1vaxHUCNqo3ITu6NU0d4V34yZFoHMn/uoKr/Rwfw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/pattern@30.0.1':
+    resolution: {integrity: sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/reporters@30.2.0':
+    resolution: {integrity: sha512-DRyW6baWPqKMa9CzeiBjHwjd8XeAyco2Vt8XbcLFjiwCOEKOvy82GJ8QQnJE9ofsxCMPjH4MfH8fCWIHHDKpAQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/schemas@29.6.3':
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/schemas@30.0.5':
+    resolution: {integrity: sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/snapshot-utils@30.2.0':
+    resolution: {integrity: sha512-0aVxM3RH6DaiLcjj/b0KrIBZhSX1373Xci4l3cW5xiUWPctZ59zQ7jj4rqcJQ/Z8JuN/4wX3FpJSa3RssVvCug==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/source-map@30.0.1':
+    resolution: {integrity: sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/test-result@30.2.0':
+    resolution: {integrity: sha512-RF+Z+0CCHkARz5HT9mcQCBulb1wgCP3FBvl9VFokMX27acKphwyQsNuWH3c+ojd1LeWBLoTYoxF0zm6S/66mjg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/test-sequencer@30.2.0':
+    resolution: {integrity: sha512-wXKgU/lk8fKXMu/l5Hog1R61bL4q5GCdT6OJvdAFz1P+QrpoFuLU68eoKuVc4RbrTtNnTL5FByhWdLgOPSph+Q==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/transform@30.2.0':
+    resolution: {integrity: sha512-XsauDV82o5qXbhalKxD7p4TZYYdwcaEXC77PPD2HixEFF+6YGppjrAAQurTl2ECWcEomHBMMNS9AH3kcCFx8jA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/types@29.6.3':
+    resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/types@30.2.0':
+    resolution: {integrity: sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+  '@jsonjoy.com/base64@1.1.2':
+    resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/buffers@1.2.1':
+    resolution: {integrity: sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/codegen@1.0.0':
+    resolution: {integrity: sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/json-pack@1.21.0':
+    resolution: {integrity: sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/json-pointer@1.0.2':
+    resolution: {integrity: sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/util@1.9.0':
+    resolution: {integrity: sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@leichtgewicht/ip-codec@2.0.5':
+    resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
+
+  '@listr2/prompt-adapter-inquirer@3.0.5':
+    resolution: {integrity: sha512-WELs+hj6xcilkloBXYf9XXK8tYEnKsgLj01Xl5ONUJpKjmT5hGVUzNUS5tooUxs7pGMrw+jFD/41WpqW4V3LDA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@inquirer/prompts': '>= 3 < 8'
+      listr2: 9.0.5
+
+  '@lmdb/lmdb-darwin-arm64@3.4.4':
+    resolution: {integrity: sha512-XaKL705gDWd6XVls3ATDj13ZdML/LqSIxwgnYpG8xTzH2ifArx8fMMDdvqGE/Emd+W6R90W2fveZcJ0AyS8Y0w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@lmdb/lmdb-darwin-x64@3.4.4':
+    resolution: {integrity: sha512-GPHGEVcwJlkD01GmIr7B4kvbIcUDS2+kBadVEd7lU4can1RZaZQLDDBJRrrNfS2Kavvl0VLI/cMv7UASAXGrww==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@lmdb/lmdb-linux-arm64@3.4.4':
+    resolution: {integrity: sha512-mALqr7DE42HsiwVTKpQWxacjHoJk+e9p00RWIJqTACh/hpucxp/0lK/XMh5XzWnU/TDCZLukq1+vNqnNumTP/Q==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@lmdb/lmdb-linux-arm@3.4.4':
+    resolution: {integrity: sha512-cmev5/dZr5ACKri9f6GU6lZCXTjMhV72xujlbOhFCgFXrt4W0TxGsmY8kA1BITvH60JBKE50cSxsiulybAbrrw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@lmdb/lmdb-linux-x64@3.4.4':
+    resolution: {integrity: sha512-QjLs8OcmCNcraAcLoZyFlo0atzBJniQLLwhtR+ymQqS5kLYpV5RqwriL87BW+ZiR9ZiGgZx3evrz5vnWPtJ1fQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@lmdb/lmdb-win32-arm64@3.4.4':
+    resolution: {integrity: sha512-tr/pwHDlZ33forLGAr0tI04cRmP4SgF93yHbb+2zvZiDEyln5yMHhbKDySxY66aUOkhvBvTuHq9q/3YmTj6ZHQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@lmdb/lmdb-win32-x64@3.4.4':
+    resolution: {integrity: sha512-KRzfocJzB/mgoTCqnMawuLSKheHRVTqWfSmouIgYpFs6Hx4zvZSvsZKSCEb5gHmICy7qsx9l06jk3MFTtiFVAQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@malept/cross-spawn-promise@2.0.0':
+    resolution: {integrity: sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==}
+    engines: {node: '>= 12.13.0'}
+
+  '@malept/flatpak-bundler@0.4.0':
+    resolution: {integrity: sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==}
+    engines: {node: '>= 10.0.0'}
+
+  '@mdx-js/mdx@3.1.1':
+    resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
+
+  '@modelcontextprotocol/sdk@1.26.0':
+    resolution: {integrity: sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@module-federation/bridge-react-webpack-plugin@0.21.6':
+    resolution: {integrity: sha512-lJMmdhD4VKVkeg8RHb+Jwe6Ou9zKVgjtb1inEURDG/sSS2ksdZA8pVKLYbRPRbdmjr193Y8gJfqFbI2dqoyc/g==}
+
+  '@module-federation/bridge-react-webpack-plugin@0.22.0':
+    resolution: {integrity: sha512-OzMBBbUhOMbDVX/wkVDxaOshgyUdxv+kRQDtxl1/ipV5GXTjs1tpS4NHtDwiJi0qKeG0AvnvGCrPu7bjMOcAVw==}
+
+  '@module-federation/cli@0.21.6':
+    resolution: {integrity: sha512-qNojnlc8pTyKtK7ww3i/ujLrgWwgXqnD5DcDPsjADVIpu7STaoaVQ0G5GJ7WWS/ajXw6EyIAAGW/AMFh4XUxsQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
+  '@module-federation/cli@0.22.0':
+    resolution: {integrity: sha512-kdeDg6HuOqJYKtPeoupWQg6wLZT7B+AwMDwMjwhcKHxKEmKFPImbJLymBWEgmKTktZKh1ERtEOplwFt9u5iEBA==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
+  '@module-federation/data-prefetch@0.21.6':
+    resolution: {integrity: sha512-8HD7ZhtWZ9vl6i3wA7M8cEeCRdtvxt09SbMTfqIPm+5eb/V4ijb8zGTYSRhNDb5RCB+BAixaPiZOWKXJ63/rVw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+
+  '@module-federation/data-prefetch@0.22.0':
+    resolution: {integrity: sha512-NESR/5Wcn9unPY18oQSSXlbXTnMbUFwqqvSZnpJt5vBb/8QlcJEiPnxERZqKhKrIS6GTD8KneHPRCOQsP6Xcqw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+
+  '@module-federation/dts-plugin@0.21.6':
+    resolution: {integrity: sha512-YIsDk8/7QZIWn0I1TAYULniMsbyi2LgKTi9OInzVmZkwMC6644x/ratTWBOUDbdY1Co+feNkoYeot1qIWv2L7w==}
+    peerDependencies:
+      typescript: ^4.9.0 || ^5.0.0
+      vue-tsc: '>=1.0.24'
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
+  '@module-federation/dts-plugin@0.22.0':
+    resolution: {integrity: sha512-lj5YtUZz0moaT1XziM0OyizE0mIhMa8W65RUiX/+UZ4iNK/KMs4e/CGpfhEt2Lj9+j6KYSzI2+676d+73j/kag==}
+    peerDependencies:
+      typescript: ^4.9.0 || ^5.0.0
+      vue-tsc: '>=1.0.24'
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
+  '@module-federation/enhanced@0.21.6':
+    resolution: {integrity: sha512-8PFQxtmXc6ukBC4CqGIoc96M2Ly9WVwCPu4Ffvt+K/SB6rGbeFeZoYAwREV1zGNMJ5v5ly6+AHIEOBxNuSnzSg==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^4.9.0 || ^5.0.0
+      vue-tsc: '>=1.0.24'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+      webpack:
+        optional: true
+
+  '@module-federation/enhanced@0.22.0':
+    resolution: {integrity: sha512-OysyO6xbhpP+CeOEDp2v6HyFcVT5wWAdQrfga3jhlFUAdIR7nZZ2albysnF2CGn/xyU050Ss74ttgy7GiKi5fQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^4.9.0 || ^5.0.0
+      vue-tsc: '>=1.0.24'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+      webpack:
+        optional: true
+
+  '@module-federation/error-codes@0.21.6':
+    resolution: {integrity: sha512-MLJUCQ05KnoVl8xd6xs9a5g2/8U+eWmVxg7xiBMeR0+7OjdWUbHwcwgVFatRIwSZvFgKHfWEiI7wsU1q1XbTRQ==}
+
+  '@module-federation/error-codes@0.22.0':
+    resolution: {integrity: sha512-xF9SjnEy7vTdx+xekjPCV5cIHOGCkdn3pIxo9vU7gEZMIw0SvAEdsy6Uh17xaCpm8V0FWvR0SZoK9Ik6jGOaug==}
+
+  '@module-federation/inject-external-runtime-core-plugin@0.21.6':
+    resolution: {integrity: sha512-DJQne7NQ988AVi3QB8byn12FkNb+C2lBeU1NRf8/WbL0gmHsr6kW8hiEJCm8LYaURwtsQqtsEV7i+8+51qjSmQ==}
+    peerDependencies:
+      '@module-federation/runtime-tools': 0.21.6
+
+  '@module-federation/inject-external-runtime-core-plugin@0.22.0':
+    resolution: {integrity: sha512-zeN6XiLV9l0tAsZzQxHLEQM28sWiijmIBp9CiIDc4iqk2f/kgCSqiBWTiNcS4sZODzupPkktaWsC5+5eWk0ENQ==}
+    peerDependencies:
+      '@module-federation/runtime-tools': 0.22.0
+
+  '@module-federation/managers@0.21.6':
+    resolution: {integrity: sha512-BeV6m2/7kF5MDVz9JJI5T8h8lMosnXkH2bOxxFewcra7ZjvDOgQu7WIio0mgk5l1zjNPvnEVKhnhrenEdcCiWg==}
+
+  '@module-federation/managers@0.22.0':
+    resolution: {integrity: sha512-Ptv8gEUihPBeoQEpsKq3GZUEB4y/hqG83mKw5NrKpXMIfcoF6SZjcknXz5LuN7NF3xMi1XHYU74z/nKzr+izew==}
+
+  '@module-federation/manifest@0.21.6':
+    resolution: {integrity: sha512-yg93+I1qjRs5B5hOSvjbjmIoI2z3th8/yst9sfwvx4UDOG1acsE3HHMyPN0GdoIGwplC/KAnU5NmUz4tREUTGQ==}
+
+  '@module-federation/manifest@0.22.0':
+    resolution: {integrity: sha512-Exv+frMkRGKDs3KKXeBBKcHvL7nNTk5Yt2ftEvxCUIRPC16Ebvy6RcQvFFvbvmOhuM/If6j6E/aZu5Z9oau6xw==}
+
+  '@module-federation/node@2.7.26':
+    resolution: {integrity: sha512-C7aIABSxbZKOvVDMIivmV9Q/aOVh9xpUv+y+nwSWuQr9v2pgmMzVK3rxWoeusmkpaENia8h5AWNpYjcrMi+O9g==}
+    peerDependencies:
+      next: '*'
+      react: ^16||^17||^18||^19
+      react-dom: ^16||^17||^18||^19
+      webpack: ^5.40.0
+    peerDependenciesMeta:
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  '@module-federation/rspack@0.21.6':
+    resolution: {integrity: sha512-SB+z1P+Bqe3R6geZje9dp0xpspX6uash+zO77nodmUy8PTTBlkL7800Cq2FMLKUdoTZHJTBVXf0K6CqQWSlItg==}
+    peerDependencies:
+      '@rspack/core': '>=0.7'
+      typescript: ^4.9.0 || ^5.0.0
+      vue-tsc: '>=1.0.24'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  '@module-federation/rspack@0.22.0':
+    resolution: {integrity: sha512-PvDlFxzCbufArZvt6wSLsJNm20hdDsz/4X04YAxAZfp/dTECZghZsebLcR7nHOzOwR2gCX8vv+gB3r+5MheobA==}
+    peerDependencies:
+      '@rspack/core': '>=0.7'
+      typescript: ^4.9.0 || ^5.0.0
+      vue-tsc: '>=1.0.24'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  '@module-federation/runtime-core@0.21.6':
+    resolution: {integrity: sha512-5Hd1Y5qp5lU/aTiK66lidMlM/4ji2gr3EXAtJdreJzkY+bKcI5+21GRcliZ4RAkICmvdxQU5PHPL71XmNc7Lsw==}
+
+  '@module-federation/runtime-core@0.22.0':
+    resolution: {integrity: sha512-GR1TcD6/s7zqItfhC87zAp30PqzvceoeDGYTgF3Vx2TXvsfDrhP6Qw9T4vudDQL3uJRne6t7CzdT29YyVxlgIA==}
+
+  '@module-federation/runtime-tools@0.21.6':
+    resolution: {integrity: sha512-fnP+ZOZTFeBGiTAnxve+axGmiYn2D60h86nUISXjXClK3LUY1krUfPgf6MaD4YDJ4i51OGXZWPekeMe16pkd8Q==}
+
+  '@module-federation/runtime-tools@0.22.0':
+    resolution: {integrity: sha512-4ScUJ/aUfEernb+4PbLdhM/c60VHl698Gn1gY21m9vyC1Ucn69fPCA1y2EwcCB7IItseRMoNhdcWQnzt/OPCNA==}
+
+  '@module-federation/runtime@0.21.6':
+    resolution: {integrity: sha512-+caXwaQqwTNh+CQqyb4mZmXq7iEemRDrTZQGD+zyeH454JAYnJ3s/3oDFizdH6245pk+NiqDyOOkHzzFQorKhQ==}
+
+  '@module-federation/runtime@0.22.0':
+    resolution: {integrity: sha512-38g5iPju2tPC3KHMPxRKmy4k4onNp6ypFPS1eKGsNLUkXgHsPMBFqAjDw96iEcjri91BrahG4XcdyKi97xZzlA==}
+
+  '@module-federation/sdk@0.21.6':
+    resolution: {integrity: sha512-x6hARETb8iqHVhEsQBysuWpznNZViUh84qV2yE7AD+g7uIzHKiYdoWqj10posbo5XKf/147qgWDzKZoKoEP2dw==}
+
+  '@module-federation/sdk@0.22.0':
+    resolution: {integrity: sha512-x4aFNBKn2KVQRuNVC5A7SnrSCSqyfIWmm1DvubjbO9iKFe7ith5niw8dqSFBekYBg2Fwy+eMg4sEFNVvCAdo6g==}
+
+  '@module-federation/third-party-dts-extractor@0.21.6':
+    resolution: {integrity: sha512-Il6x4hLsvCgZNk1DFwuMBNeoxD1BsZ5AW2BI/nUgu0k5FiAvfcz1OFawRFEHtaM/kVrCsymMOW7pCao90DaX3A==}
+
+  '@module-federation/third-party-dts-extractor@0.22.0':
+    resolution: {integrity: sha512-3y2DZdeEjArNKDqA1Ds32Q6A5RATcsmywCXyQaWcfaScprpmzfEWiDkeD/nzoA/0+4ePY8OEinJ4hLtoMNLbLQ==}
+
+  '@module-federation/webpack-bundler-runtime@0.21.6':
+    resolution: {integrity: sha512-7zIp3LrcWbhGuFDTUMLJ2FJvcwjlddqhWGxi/MW3ur1a+HaO8v5tF2nl+vElKmbG1DFLU/52l3PElVcWf/YcsQ==}
+
+  '@module-federation/webpack-bundler-runtime@0.22.0':
+    resolution: {integrity: sha512-aM8gCqXu+/4wBmJtVeMeeMN5guw3chf+2i6HajKtQv7SJfxV/f4IyNQJUeUQu9HfiAZHjqtMV5Lvq/Lvh8LdyA==}
+
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
+    resolution: {integrity: sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3':
+    resolution: {integrity: sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3':
+    resolution: {integrity: sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3':
+    resolution: {integrity: sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3':
+    resolution: {integrity: sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
+    resolution: {integrity: sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/nice-android-arm-eabi@1.1.1':
+    resolution: {integrity: sha512-kjirL3N6TnRPv5iuHw36wnucNqXAO46dzK9oPb0wj076R5Xm8PfUVA9nAFB5ZNMmfJQJVKACAPd/Z2KYMppthw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+
+  '@napi-rs/nice-android-arm64@1.1.1':
+    resolution: {integrity: sha512-blG0i7dXgbInN5urONoUCNf+DUEAavRffrO7fZSeoRMJc5qD+BJeNcpr54msPF6qfDD6kzs9AQJogZvT2KD5nw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/nice-darwin-arm64@1.1.1':
+    resolution: {integrity: sha512-s/E7w45NaLqTGuOjC2p96pct4jRfo61xb9bU1unM/MJ/RFkKlJyJDx7OJI/O0ll/hrfpqKopuAFDV8yo0hfT7A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/nice-darwin-x64@1.1.1':
+    resolution: {integrity: sha512-dGoEBnVpsdcC+oHHmW1LRK5eiyzLwdgNQq3BmZIav+9/5WTZwBYX7r5ZkQC07Nxd3KHOCkgbHSh4wPkH1N1LiQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/nice-freebsd-x64@1.1.1':
+    resolution: {integrity: sha512-kHv4kEHAylMYmlNwcQcDtXjklYp4FCf0b05E+0h6nDHsZ+F0bDe04U/tXNOqrx5CmIAth4vwfkjjUmp4c4JktQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@napi-rs/nice-linux-arm-gnueabihf@1.1.1':
+    resolution: {integrity: sha512-E1t7K0efyKXZDoZg1LzCOLxgolxV58HCkaEkEvIYQx12ht2pa8hoBo+4OB3qh7e+QiBlp1SRf+voWUZFxyhyqg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/nice-linux-arm64-gnu@1.1.1':
+    resolution: {integrity: sha512-CIKLA12DTIZlmTaaKhQP88R3Xao+gyJxNWEn04wZwC2wmRapNnxCUZkVwggInMJvtVElA+D4ZzOU5sX4jV+SmQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/nice-linux-arm64-musl@1.1.1':
+    resolution: {integrity: sha512-+2Rzdb3nTIYZ0YJF43qf2twhqOCkiSrHx2Pg6DJaCPYhhaxbLcdlV8hCRMHghQ+EtZQWGNcS2xF4KxBhSGeutg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/nice-linux-ppc64-gnu@1.1.1':
+    resolution: {integrity: sha512-4FS8oc0GeHpwvv4tKciKkw3Y4jKsL7FRhaOeiPei0X9T4Jd619wHNe4xCLmN2EMgZoeGg+Q7GY7BsvwKpL22Tg==}
+    engines: {node: '>= 10'}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/nice-linux-riscv64-gnu@1.1.1':
+    resolution: {integrity: sha512-HU0nw9uD4FO/oGCCk409tCi5IzIZpH2agE6nN4fqpwVlCn5BOq0MS1dXGjXaG17JaAvrlpV5ZeyZwSon10XOXw==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/nice-linux-s390x-gnu@1.1.1':
+    resolution: {integrity: sha512-2YqKJWWl24EwrX0DzCQgPLKQBxYDdBxOHot1KWEq7aY2uYeX+Uvtv4I8xFVVygJDgf6/92h9N3Y43WPx8+PAgQ==}
+    engines: {node: '>= 10'}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/nice-linux-x64-gnu@1.1.1':
+    resolution: {integrity: sha512-/gaNz3R92t+dcrfCw/96pDopcmec7oCcAQ3l/M+Zxr82KT4DljD37CpgrnXV+pJC263JkW572pdbP3hP+KjcIg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/nice-linux-x64-musl@1.1.1':
+    resolution: {integrity: sha512-xScCGnyj/oppsNPMnevsBe3pvNaoK7FGvMjT35riz9YdhB2WtTG47ZlbxtOLpjeO9SqqQ2J2igCmz6IJOD5JYw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/nice-openharmony-arm64@1.1.1':
+    resolution: {integrity: sha512-6uJPRVwVCLDeoOaNyeiW0gp2kFIM4r7PL2MczdZQHkFi9gVlgm+Vn+V6nTWRcu856mJ2WjYJiumEajfSm7arPQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@napi-rs/nice-win32-arm64-msvc@1.1.1':
+    resolution: {integrity: sha512-uoTb4eAvM5B2aj/z8j+Nv8OttPf2m+HVx3UjA5jcFxASvNhQriyCQF1OB1lHL43ZhW+VwZlgvjmP5qF3+59atA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/nice-win32-ia32-msvc@1.1.1':
+    resolution: {integrity: sha512-CNQqlQT9MwuCsg1Vd/oKXiuH+TcsSPJmlAFc5frFyX/KkOh0UpBLEj7aoY656d5UKZQMQFP7vJNa1DNUNORvug==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@napi-rs/nice-win32-x64-msvc@1.1.1':
+    resolution: {integrity: sha512-vB+4G/jBQCAh0jelMTY3+kgFy00Hlx2f2/1zjMoH821IbplbWZOkLiTYXQkygNTzQJTq5cvwBDgn2ppHD+bglQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/nice@1.1.1':
+    resolution: {integrity: sha512-xJIPs+bYuc9ASBl+cvGsKbGrJmS6fAKaSZCnT0lhahT5rhA2VVy9/EcIgd2JhtEuFOJNx7UHNn/qiTPTY4nrQw==}
+    engines: {node: '>= 10'}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@napi-rs/wasm-runtime@0.2.4':
+    resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
+
+  '@napi-rs/wasm-runtime@1.0.7':
+    resolution: {integrity: sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==}
+
+  '@napi-rs/wasm-runtime@1.1.1':
+    resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
+
+  '@ngrx/component-store@21.0.1':
+    resolution: {integrity: sha512-aOfudK8MqCZQUuBjMnXAXRxRcr9Qu/+9/2iIh4aLhmGXC5JCpkDi1a82A/39EUFZy2xBbI4lPI7P817b1PQRvQ==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngrx/effects@21.0.1':
+    resolution: {integrity: sha512-hSdpToAiSYa5FJ/CAygQHpnCaF2S1HO7q/57ob3XvNTWmkofa0VqI/IIe4W57bojh2YOWCJ91SCn3kAjymaV3g==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+      '@ngrx/store': 21.0.1
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngrx/entity@21.0.1':
+    resolution: {integrity: sha512-h7PjW8WzkPwSYDlicWcEw6EJ9yBfa+fbf5tmIty4cZ8yH6+Ld3aHuGAMAu8xbnV79oj0TGa/PSynu5LZq4jXdA==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+      '@ngrx/store': 21.0.1
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngrx/eslint-plugin@21.0.1':
+    resolution: {integrity: sha512-ZFFb7UFiTF4UzXYaMRmK6hEHFOiFtoJ+Euus4O7i0A+0na+zaYVxS42cdylG/IKe3sfAoLKZWkly/idNnMSaWQ==}
+    peerDependencies:
+      '@typescript-eslint/utils': ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+      typescript-eslint: ^8.0.0
+
+  '@ngrx/router-store@21.0.1':
+    resolution: {integrity: sha512-hacH8ciwCRMLg7p7bThslYn564GOyS5LPf9c8cX4FTyOH+iJM32eJd2Lt64cA62vN6ruofV/IM2vB09nCkxHzg==}
+    peerDependencies:
+      '@angular/common': ^21.0.0
+      '@angular/core': ^21.0.0
+      '@angular/router': ^21.0.0
+      '@ngrx/store': 21.0.1
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngrx/signals@21.0.1':
+    resolution: {integrity: sha512-krmZDhgHrnmZrxfEJ41bp/aM8Mc55k5B2N7oCLT5w4M3YbOkbnWPkP6bBWMv4XPI+2rqVgkLRW6DaWLwoESaBw==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+      rxjs: ^6.5.3 || ^7.4.0
+    peerDependenciesMeta:
+      rxjs:
+        optional: true
+
+  '@ngrx/store-devtools@21.0.1':
+    resolution: {integrity: sha512-G9fO7CFwYUpz8+JZ9uny+lVJ7iv6PcFJDg+jae5CCrAUIiflnR8gbwD8exAd2AODpxPCpmnSojuLNpLDAcwGzQ==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+      '@ngrx/store': 21.0.1
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngrx/store@21.0.1':
+    resolution: {integrity: sha512-2hGnw/c5o8nmKzyx7TrUUM7FXjE2zqjX0EF+wLbw9Oy/L+VdCmx+ZI1BFjuAR4B8PKEWHG2KSbOM13SMNkpZiA==}
+    peerDependencies:
+      '@angular/core': ^21.0.0
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngx-pwa/local-storage@21.0.0':
+    resolution: {integrity: sha512-MOsgo5G2HvWHOzWus868K/CLHtHmaOPvIkOharYKic6ze/+w8vz6J7KEcIcZ6zmGniEvdefNRWO+XIaah+av3w==}
+    peerDependencies:
+      '@angular/common': ^21.0.0
+      '@angular/core': ^21.0.0
+      rxjs: ^7.6.0
+
+  '@ngx-translate/core@16.0.4':
+    resolution: {integrity: sha512-s8llTL2SJvROhqttxvEs7Cg+6qSf4kvZPFYO+cTOY1d8DWTjlutRkWAleZcPPoeX927Dm7ALfL07G7oYDJ7z6w==}
+    peerDependencies:
+      '@angular/common': '>=16'
+      '@angular/core': '>=16'
+
+  '@ngx-translate/http-loader@16.0.1':
+    resolution: {integrity: sha512-xJEOUpvs6Zfc8G4cmQmegFOEpfYSoplTHHoisPNrATXjRBjpaKsBaPOXlZsuFUW2XV00s16gIyI4+9z1XkO5bw==}
+    peerDependencies:
+      '@angular/common': '>=16'
+      '@angular/core': '>=16'
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@npmcli/agent@4.0.0':
+    resolution: {integrity: sha512-kAQTcEN9E8ERLVg5AsGwLNoFb+oEG6engbqAU2P43gD4JEIkNGMHdVQ096FsOAAYpZPB0RSt0zgInKIAS1l5QA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/fs@2.1.2':
+    resolution: {integrity: sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  '@npmcli/fs@5.0.0':
+    resolution: {integrity: sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/git@7.0.1':
+    resolution: {integrity: sha512-+XTFxK2jJF/EJJ5SoAzXk3qwIDfvFc5/g+bD274LZ7uY7LE8sTfG6Z8rOanPl2ZEvZWqNvmEdtXC25cE54VcoA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/installed-package-contents@4.0.0':
+    resolution: {integrity: sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+    hasBin: true
+
+  '@npmcli/move-file@2.0.1':
+    resolution: {integrity: sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This functionality has been moved to @npmcli/fs
+
+  '@npmcli/node-gyp@5.0.0':
+    resolution: {integrity: sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/package-json@7.0.5':
+    resolution: {integrity: sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/promise-spawn@9.0.1':
+    resolution: {integrity: sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/redact@4.0.0':
+    resolution: {integrity: sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@npmcli/run-script@10.0.3':
+    resolution: {integrity: sha512-ER2N6itRkzWbbtVmZ9WKaWxVlKlOeBFF1/7xx+KA5J1xKa4JjUwBdb6tDpk0v1qA+d+VDwHI9qmLcXSWcmi+Rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@nx/angular@22.5.1':
+    resolution: {integrity: sha512-NNgR0UIGiFLiikfGjZVCqG2jcZIN9gMWlvdMfr8Sgjy/rD7sVbNWaMWCPQksRm0Uhrjyx1BDe3c/E898ojIStw==}
+    peerDependencies:
+      '@angular-devkit/build-angular': '>= 19.0.0 < 22.0.0'
+      '@angular-devkit/core': '>= 19.0.0 < 22.0.0'
+      '@angular-devkit/schematics': '>= 19.0.0 < 22.0.0'
+      '@angular/build': '>= 19.0.0 < 22.0.0'
+      '@schematics/angular': '>= 19.0.0 < 22.0.0'
+      ng-packagr: '>= 19.0.0 < 22.0.0'
+      rxjs: ^6.5.3 || ^7.5.0
+    peerDependenciesMeta:
+      '@angular-devkit/build-angular':
+        optional: true
+      '@angular/build':
+        optional: true
+      ng-packagr:
+        optional: true
+
+  '@nx/devkit@22.5.1':
+    resolution: {integrity: sha512-1ZJ8pCB+6EWC8X6q8tfBweg92WzFAwliBhtBkOPP8Li8GQq71ulPWRdY4lDd5pH3Ea1zKqhOtBKWdOlyDPOKYA==}
+    peerDependencies:
+      nx: '>= 21 <= 23 || ^22.0.0-0'
+
+  '@nx/eslint-plugin@22.5.1':
+    resolution: {integrity: sha512-TUUsvdfCtr6EoUxmnqp2uQANI3CQb9g0RmJALbGQAOSGeyr7TQc4wEeW0VjFl/1PQB//9TiK9lnPUkOF76SV/Q==}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.13.2 || ^7.0.0 || ^8.0.0
+      eslint-config-prettier: ^10.0.0
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+
+  '@nx/eslint@22.5.1':
+    resolution: {integrity: sha512-878xSsfOKtnQBJlRyeeHANVr5+HJMeMfPgpsffRfFDoat7pF/B2KoK2UJx/wQlAHUyVubKNhm7x46fA/shqBow==}
+    peerDependencies:
+      '@zkochan/js-yaml': 0.0.7
+      eslint: ^8.0.0 || ^9.0.0
+    peerDependenciesMeta:
+      '@zkochan/js-yaml':
+        optional: true
+
+  '@nx/jest@22.5.1':
+    resolution: {integrity: sha512-pzynR/D61JJV21UEtsIsNRFQ4JvFGckxmMa31ndCfRJKBRVIJVTICdrrga/pls5vjII/K3nNaz/QBQqTOvHNLQ==}
+
+  '@nx/js@22.5.1':
+    resolution: {integrity: sha512-g/0x9P7e2KDsY5po9RxvsNR2Z8xPWpWqTs82gll1G/h5Jot2QJ6oIuZTfjdHramVXWd6pi6KoruxThnNv5DmYQ==}
+    peerDependencies:
+      verdaccio: ^6.0.5
+    peerDependenciesMeta:
+      verdaccio:
+        optional: true
+
+  '@nx/module-federation@22.5.1':
+    resolution: {integrity: sha512-LiAN6Vy+5fdMvaKl0lPii0+yQODpf8v8kXVqUsKrXWWGlRI8IksElx8pVtoX9pL04MWGmcAckd0+G3PkvwGAPw==}
+
+  '@nx/nx-darwin-arm64@22.5.1':
+    resolution: {integrity: sha512-DuvOwhXPO6l9W7/zM4/BaAbGTIXFyHVcbbCD1c7HfgZ3VfJPmcE7H4+TuQH0cigHHtpg/eGqV100NQbd7N4zwg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@nx/nx-darwin-x64@22.5.1':
+    resolution: {integrity: sha512-81Lb7+rp3Qltpgy33Kc1qxk+8IWqZLhqvdLdRFSVV1FN1pPSJDFKyPjCn9oMpRryNPSJ8DgZDpfIaVVyP85rUw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@nx/nx-freebsd-x64@22.5.1':
+    resolution: {integrity: sha512-Ig8yQN3lSz9R+Zf3NQWcvEnIzwDX4NSeaFtEliPnC3OHlQXGNXbOUfkExa0U0UUgyxa4rgnCgefmwuc12H9q2Q==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@nx/nx-linux-arm-gnueabihf@22.5.1':
+    resolution: {integrity: sha512-C7tGoLnR9MjKLJsLMF2VsKcDChPiygAsw6dSVgU4B650H7sBWmkEHM/QjvyRvkcZuoQBDamS/eVs/UaJu9wNhA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@nx/nx-linux-arm64-gnu@22.5.1':
+    resolution: {integrity: sha512-GNxei+lwhzhrO9m+nNkibgxLhbkYKyFXPSRpOKLwv9VavNzJn5UmLfKJyhjNQPBOSYuNhiVPbU1Ja/qOBcozYw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@nx/nx-linux-arm64-musl@22.5.1':
+    resolution: {integrity: sha512-VDJtdJP2nCgS8ommbfWFAKjoZCE51VH7tZyIfh8RFI5fxwoB3Pk6d6f6cmNHI/1t98YI3V7Onuf3Y9KBkYtyfQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@nx/nx-linux-x64-gnu@22.5.1':
+    resolution: {integrity: sha512-BZ/i+KTplEJmE8ZHKgPGD513Zl86DuSGyRAvbDZ7Qf19Tei7Of6vxW+ypvVDIwmDbyXfe13u54M5gDt8iiqFGQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@nx/nx-linux-x64-musl@22.5.1':
+    resolution: {integrity: sha512-e0VdiV6fe88Dbhill2gUjYAD9jMhHjYsafGOPR+/uaGMAYPoI1jKur6uPGY+ik6fvwvDFFl0VT2+HACKVn7RoA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@nx/nx-win32-arm64-msvc@22.5.1':
+    resolution: {integrity: sha512-3vWZO9y7uHKeyepcU55pE8VQTKGome3mLdicvx1TCoKKl0cA3bTR341Jdo2Zl4Waa2ENk7pGQbLWRQ3ZkaA92A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@nx/nx-win32-x64-msvc@22.5.1':
+    resolution: {integrity: sha512-4e5LduuhpBx96JgD1J3fHUGCwC+/lL+tvXp3UVtjh/AOdINGsyI+scinT3uaI9vcB5GKBcybTxbBZzwcH50w9g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@nx/playwright@22.5.1':
+    resolution: {integrity: sha512-iyBLhkBYhXTFOPo5WZP+6I1WFmIFmZQQiQyj0IXxSSw1iiGsmKar/IzGr5j/GDUIA5t6fbw4ZELtKkq78V+LEg==}
+    peerDependencies:
+      '@playwright/test': ^1.36.0
+    peerDependenciesMeta:
+      '@playwright/test':
+        optional: true
+
+  '@nx/rspack@22.5.1':
+    resolution: {integrity: sha512-UcJkj2wKDHaWBs5G0vNpuLdvuyGyTRoPgsl3rsoOqHjkwbWCWVBVBKc2dlDt7vSj0694U8eOaisv2sweGbK0+w==}
+    peerDependencies:
+      '@module-federation/enhanced': ^0.21.2
+      '@module-federation/node': ^2.7.21
+
+  '@nx/web@22.5.1':
+    resolution: {integrity: sha512-kK46sX/nPFjNptqfwwXX29ALVthmbxts9YlqB80gT+sewgBgnRU6HN+d+9lvBJT+9AtHodJPb25HeRRKXspx3w==}
+
+  '@nx/webpack@22.5.1':
+    resolution: {integrity: sha512-xLz3iqMBHBlriGwkYB8vSBvU9uvT+xXD6oNvBAwH/9rMx3NIEfG6E7iM5Z1iZmb50p3STsZF6uJh6CUoeEq2pA==}
+
+  '@nx/workspace@22.5.1':
+    resolution: {integrity: sha512-IZJ440ITiNpswacrTGGpo46adOszLAAZM9RYYvQg5ak8kZDmmrskTm0SWWVgZCuiJazw8s23vqDLQ07TN/t1NQ==}
+
+  '@octokit/auth-token@6.0.0':
+    resolution: {integrity: sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==}
+    engines: {node: '>= 20'}
+
+  '@octokit/core@7.0.6':
+    resolution: {integrity: sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==}
+    engines: {node: '>= 20'}
+
+  '@octokit/endpoint@11.0.2':
+    resolution: {integrity: sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==}
+    engines: {node: '>= 20'}
+
+  '@octokit/graphql@9.0.3':
+    resolution: {integrity: sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==}
+    engines: {node: '>= 20'}
+
+  '@octokit/openapi-types@26.0.0':
+    resolution: {integrity: sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA==}
+
+  '@octokit/openapi-types@27.0.0':
+    resolution: {integrity: sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==}
+
+  '@octokit/plugin-paginate-rest@13.2.1':
+    resolution: {integrity: sha512-Tj4PkZyIL6eBMYcG/76QGsedF0+dWVeLhYprTmuFVVxzDW7PQh23tM0TP0z+1MvSkxB29YFZwnUX+cXfTiSdyw==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=6'
+
+  '@octokit/plugin-retry@8.0.3':
+    resolution: {integrity: sha512-vKGx1i3MC0za53IzYBSBXcrhmd+daQDzuZfYDd52X5S0M2otf3kVZTVP8bLA3EkU0lTvd1WEC2OlNNa4G+dohA==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=7'
+
+  '@octokit/plugin-throttling@11.0.3':
+    resolution: {integrity: sha512-34eE0RkFCKycLl2D2kq7W+LovheM/ex3AwZCYN8udpi6bxsyjZidb2McXs69hZhLmJlDqTSP8cH+jSRpiaijBg==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': ^7.0.0
+
+  '@octokit/request-error@7.1.0':
+    resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
+    engines: {node: '>= 20'}
+
+  '@octokit/request@10.0.7':
+    resolution: {integrity: sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==}
+    engines: {node: '>= 20'}
+
+  '@octokit/types@15.0.2':
+    resolution: {integrity: sha512-rR+5VRjhYSer7sC51krfCctQhVTmjyUMAaShfPB8mscVa8tSoLyon3coxQmXu0ahJoLVWl8dSGD/3OGZlFV44Q==}
+
+  '@octokit/types@16.0.0':
+    resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
+
+  '@oslojs/encoding@1.1.0':
+    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
+
+  '@oxc-project/types@0.106.0':
+    resolution: {integrity: sha512-QdsH3rZq480VnOHSHgPYOhjL8O8LBdcnSjM408BpPCCUc0JYYZPG9Gafl9i3OcGk/7137o+gweb4cCv3WAUykg==}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.17.1':
+    resolution: {integrity: sha512-+VuZyMYYaap5uDAU1xDU3Kul0FekLqpBS8kI5JozlWfYQKnc/HsZg2gHPkQrj0SC9lt74WMNCfOzZZJlYXSdEQ==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.17.1':
+    resolution: {integrity: sha512-YlDDTjvOEKhom/cRSVsXsMVeXVIAM9PJ/x2mfe08rfuS0iIEfJd8PngKbEIhG72WPxleUa+vkEZj9ncmC14z3Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.17.1':
+    resolution: {integrity: sha512-HOYYLSY4JDk14YkXaz/ApgJYhgDP4KsG8EZpgpOxdszGW9HmIMMY/vXqVKYW74dSH+GQkIXYxBrEh3nv+XODVg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.17.1':
+    resolution: {integrity: sha512-JHPJbsa5HvPq2/RIdtGlqfaG9zV2WmgvHrKTYmlW0L5esqtKCBuetFudXTBzkNcyD69kSZLzH92AzTr6vFHMFg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.17.1':
+    resolution: {integrity: sha512-UD1FRC8j8xZstFXYsXwQkNmmg7vUbee006IqxokwDUUA+xEgKZDpLhBEiVKM08Urb+bn7Q0gn6M1pyNR0ng5mg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.17.1':
+    resolution: {integrity: sha512-wFWC1wyf2ROFWTxK5x0Enm++DSof3EBQ/ypyAesMDLiYxOOASDoMOZG1ylWUnlKaCt5W7eNOWOzABpdfFf/ssA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.17.1':
+    resolution: {integrity: sha512-k/hUif0GEBk/csSqCfTPXb8AAVs1NNWCa/skBghvNbTtORcWfOVqJ3mM+2pE189+enRm4UnryLREu5ysI0kXEQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.17.1':
+    resolution: {integrity: sha512-Cwm6A071ww60QouJ9LoHAwBgEoZzHQ0Qaqk2E7WLfBdiQN9mLXIDhnrpn04hlRElRPhLiu/dtg+o5PPLvaINXQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.17.1':
+    resolution: {integrity: sha512-+hwlE2v3m0r3sk93SchJL1uyaKcPjf+NGO/TD2DZUDo+chXx7FfaEj0nUMewigSt7oZ2sQN9Z4NJOtUa75HE5Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.17.1':
+    resolution: {integrity: sha512-bO+rsaE5Ox8cFyeL5Ct5tzot1TnQpFa/Wmu5k+hqBYSH2dNVDGoi0NizBN5QV8kOIC6O5MZr81UG4yW/2FyDTA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.17.1':
+    resolution: {integrity: sha512-B/P+hxKQ1oX4YstI9Lyh4PGzqB87Ddqj/A4iyRBbPdXTcxa+WW3oRLx1CsJKLmHPdDk461Hmbghq1Bm3pl+8Aw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.17.1':
+    resolution: {integrity: sha512-ulp2H3bFXzd/th2maH+QNKj5qgOhJ3v9Yspdf1svTw3CDOuuTl6sRKsWQ7MUw0vnkSNvQndtflBwVXgzZvURsQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.17.1':
+    resolution: {integrity: sha512-LAXYVe3rKk09Zo9YKF2ZLBcH8sz8Oj+JIyiUxiHtq0hiYLMsN6dOpCf2hzQEjPAmsSEA/hdC1PVKeXo+oma8mQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.17.1':
+    resolution: {integrity: sha512-3RAhxipMKE8RCSPn7O//sj440i+cYTgYbapLeOoDvQEt6R1QcJjTsFgI4iz99FhVj3YbPxlZmcLB5VW+ipyRTA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.17.1':
+    resolution: {integrity: sha512-wpjMEubGU8r9VjZTLdZR3aPHaBqTl8Jl8F4DBbgNoZ+yhkhQD1/MGvY70v2TLnAI6kAHSvcqgfvaqKDa2iWsPQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.17.1':
+    resolution: {integrity: sha512-XIE4w17RYAVIgx+9Gs3deTREq5tsmalbatYOOBGNdH7n0DfTE600c7wYXsp7ANc3BPDXsInnOzXDEPCvO1F6cg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.17.1':
+    resolution: {integrity: sha512-Lqi5BlHX3zS4bpSOkIbOKVf7DIk6Gvmdifr2OuOI58eUUyP944M8/OyaB09cNpPy9Vukj7nmmhOzj8pwLgAkIg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.17.1':
+    resolution: {integrity: sha512-l6lTcLBQVj1HNquFpXSsrkCIM8X5Hlng5YNQJrg00z/KyovvDV5l3OFhoRyZ+aLBQ74zUnMRaJZC7xcBnHyeNg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-ia32-msvc@11.17.1':
+    resolution: {integrity: sha512-VTzVtfnCCsU/6GgvursWoyZrhe3Gj/RyXzDWmh4/U1Y3IW0u1FZbp+hCIlBL16pRPbDc5YvXVtCOnA41QOrOoQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.17.1':
+    resolution: {integrity: sha512-jRPVU+6/12baj87q2+UGRh30FBVBzqKdJ7rP/mSqiL1kpNQB9yZ1j0+m3sru1m+C8hiFK7lBFwjUtYUBI7+UpQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+
+  '@phenomnomnominal/tsquery@6.1.4':
+    resolution: {integrity: sha512-3tHlGy/fxjJCHqIV8nelAzbRTNkCUY+k7lqBGKNuQz99H2OKGRt6oU+U2SZs6LYrbOe8mxMFl6kq6gzHapFRkw==}
+    peerDependencies:
+      typescript: ^3 || ^4 || ^5
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
+  '@playwright/test@1.57.0':
+    resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@pnpm/config.env-replace@1.1.0':
+    resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
+    engines: {node: '>=12.22.0'}
+
+  '@pnpm/network.ca-file@1.0.2':
+    resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==}
+    engines: {node: '>=12.22.0'}
+
+  '@pnpm/npm-conf@2.3.1':
+    resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
+    engines: {node: '>=12'}
+
+  '@rolldown/binding-android-arm64@1.0.0-beta.58':
+    resolution: {integrity: sha512-mWj5eE4Qc8TbPdGGaaLvBb9XfDPvE1EmZkJQgiGKwchkWH4oAJcRAKMTw7ZHnb1L+t7Ah41sBkAecaIsuUgsug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.58':
+    resolution: {integrity: sha512-wFxUymI/5R8bH8qZFYDfAxAN9CyISEIYke+95oZPiv6EWo88aa5rskjVcCpKA532R+klFmdqjbbaD56GNmTF4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.58':
+    resolution: {integrity: sha512-ybp3MkPj23VDV9PhtRwdU5qrGhlViWRV5BjKwO6epaSlUD5lW0WyY+roN3ZAzbma/9RrMTgZ/a/gtQq8YXOcqw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.58':
+    resolution: {integrity: sha512-Evxj3yh7FWvyklUYZa0qTVT9N2zX9TPDqGF056hl8hlCZ9/ndQ2xMv6uw9PD1VlLpukbsqL+/C6M0qwipL0QMg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.58':
+    resolution: {integrity: sha512-tYeXprDOrEgVHUbPXH6MPso4cM/c6RTkmJNICMQlYdki4hGMh92aj3yU6CKs+4X5gfG0yj5kVUw/L4M685SYag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.58':
+    resolution: {integrity: sha512-N78vmZzP6zG967Ohr+MasCjmKtis0geZ1SOVmxrA0/bklTQSzH5kHEjW5Qn+i1taFno6GEre1E40v0wuWsNOQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.58':
+    resolution: {integrity: sha512-l+p4QVtG72C7wI2SIkNQw/KQtSjuYwS3rV6AKcWrRBF62ClsFUcif5vLaZIEbPrCXu5OFRXigXFJnxYsVVZqdQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.58':
+    resolution: {integrity: sha512-urzJX0HrXxIh0FfxwWRjfPCMeInU9qsImLQxHBgLp5ivji1EEUnOfux8KxPPnRQthJyneBrN2LeqUix9DYrNaQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.58':
+    resolution: {integrity: sha512-7ijfVK3GISnXIwq/1FZo+KyAUJjL3kWPJ7rViAL6MWeEBhEgRzJ0yEd9I8N9aut8Y8ab+EKFJyRNMWZuUBwQ0A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.58':
+    resolution: {integrity: sha512-/m7sKZCS+cUULbzyJTIlv8JbjNohxbpAOA6cM+lgWgqVzPee3U6jpwydrib328JFN/gF9A99IZEnuGYqEDJdww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.58':
+    resolution: {integrity: sha512-6SZk7zMgv+y3wFFQ9qE5P9NnRHcRsptL1ypmudD26PDY+PvFCvfHRkJNfclWnvacVGxjowr7JOL3a9fd1wWhUw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.58':
+    resolution: {integrity: sha512-sFqfYPnBZ6xBhMkadB7UD0yjEDRvs7ipR3nCggblN+N4ODCXY6qhg/bKL39+W+dgQybL7ErD4EGERVbW9DAWvg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.58':
+    resolution: {integrity: sha512-AnFWJdAqB8+IDPcGrATYs67Kik/6tnndNJV2jGRmwlbeNiQQ8GhRJU8ETRlINfII0pqi9k4WWLnb00p1QCxw/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-beta.58':
+    resolution: {integrity: sha512-qWhDs6yFGR5xDfdrwiSa3CWGIHxD597uGE/A9xGqytBjANvh4rLCTTkq7szhMV4+Ygh+PMS90KVJ8xWG/TkX4w==}
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: 4.59.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rspack/binding-darwin-arm64@1.6.8':
+    resolution: {integrity: sha512-e8CTQtzaeGnf+BIzR7wRMUwKfIg0jd/sxMRc1Vd0bCMHBhSN9EsGoMuJJaKeRrSmy2nwMCNWHIG+TvT1CEKg+A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rspack/binding-darwin-x64@1.6.8':
+    resolution: {integrity: sha512-ku1XpTEPt6Za11zhpFWhfwrTQogcgi9RJrOUVC4FESiPO9aKyd4hJ+JiPgLY0MZOqsptK6vEAgOip+uDVXrCpg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rspack/binding-linux-arm64-gnu@1.6.8':
+    resolution: {integrity: sha512-fvZX6xZPvBT8qipSpvkKMX5M7yd2BSpZNCZXcefw6gA3uC7LI3gu+er0LrDXY1PtPzVuHTyDx+abwWpagV3PiQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-arm64-musl@1.6.8':
+    resolution: {integrity: sha512-++XMKcMNrt59HcFBLnRaJcn70k3X0GwkAegZBVpel8xYIAgvoXT5+L8P1ExId/yTFxqedaz8DbcxQnNmMozviw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-linux-x64-gnu@1.6.8':
+    resolution: {integrity: sha512-tv3BWkTE1TndfX+DsE1rSTg8fBevCxujNZ3MlfZ22Wfy9x1FMXTJlWG8VIOXmaaJ1wUHzv8S7cE2YUUJ2LuiCg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rspack/binding-linux-x64-musl@1.6.8':
+    resolution: {integrity: sha512-DCGgZ5/in1O3FjHWqXnDsncRy+48cMhfuUAAUyl0yDj1NpsZu9pP+xfGLvGcQTiYrVl7IH9Aojf1eShP/77WGA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rspack/binding-wasm32-wasi@1.6.8':
+    resolution: {integrity: sha512-VUwdhl/lI4m6o1OGCZ9JwtMjTV/yLY5VZTQdEPKb40JMTlmZ5MBlr5xk7ByaXXYHr6I+qnqEm73iMKQvg6iknw==}
+    cpu: [wasm32]
+
+  '@rspack/binding-win32-arm64-msvc@1.6.8':
+    resolution: {integrity: sha512-23YX7zlOZlub+nPGDBUzktb4D5D6ETUAluKjXEeHIZ9m7fSlEYBnGL66YE+3t1DHXGd0OqsdwlvrNGcyo6EXDQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rspack/binding-win32-ia32-msvc@1.6.8':
+    resolution: {integrity: sha512-cFgRE3APxrY4AEdooVk2LtipwNNT/9mrnjdC5lVbsIsz+SxvGbZR231bxDJEqP15+RJOaD07FO1sIjINFqXMEg==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rspack/binding-win32-x64-msvc@1.6.8':
+    resolution: {integrity: sha512-cIuhVsZYd3o3Neo1JSAhJYw6BDvlxaBoqvgwRkG1rs0ExFmEmgYyG7ip9pFKnKNWph/tmW3rDYypmEfjs1is7g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rspack/binding@1.6.8':
+    resolution: {integrity: sha512-lUeL4mbwGo+nqRKqFDCm9vH2jv9FNMVt1X8jqayWRcOCPlj/2UVMEFgqjR7Pp2vlvnTKq//31KbDBJmDZq31RQ==}
+
+  '@rspack/core@1.6.8':
+    resolution: {integrity: sha512-FolcIAH5FW4J2FET+qwjd1kNeFbCkd0VLuIHO0thyolEjaPSxw5qxG67DA7BZGm6PVcoiSgPLks1DL6eZ8c+fA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      '@swc/helpers': '>=0.5.1'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
+  '@rspack/dev-server@1.1.5':
+    resolution: {integrity: sha512-cwz0qc6iqqoJhyWqxP7ZqE2wyYNHkBMQUXxoQ0tNoZ4YNRkDyQ4HVJ/3oPSmMKbvJk/iJ16u7xZmwG6sK47q/A==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': '*'
+
+  '@rspack/lite-tapable@1.1.0':
+    resolution: {integrity: sha512-E2B0JhYFmVAwdDiG14+DW0Di4Ze4Jg10Pc4/lILUrd5DRCaklduz2OvJ5HYQ6G+hd+WTzqQb3QnDNfK4yvAFYw==}
+
+  '@rspack/plugin-react-refresh@1.5.3':
+    resolution: {integrity: sha512-VOnQMf3YOHkTqJ0+BJbrYga4tQAWNwoAnkgwRauXB4HOyCc5wLfBs9DcOFla/2usnRT3Sq6CMVhXmdPobwAoTA==}
+    peerDependencies:
+      react-refresh: '>=0.10.0 <1.0.0'
+      webpack-hot-middleware: 2.x
+    peerDependenciesMeta:
+      webpack-hot-middleware:
+        optional: true
+
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@schematics/angular@21.1.4':
+    resolution: {integrity: sha512-I1zdSNzdbrVCWpeE2NsZQmIoa9m0nlw4INgdGIkqUH6FgwvoGKC0RoOxKAmm6HHVJ48FE/sPI13dwAeK89ow5A==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@semantic-release/changelog@6.0.3':
+    resolution: {integrity: sha512-dZuR5qByyfe3Y03TpmCvAxCyTnp7r5XwtHRf/8vD9EAn4ZWbavUX8adMtXYzE86EVh0gyLA7lm5yW4IV30XUag==}
+    engines: {node: '>=14.17'}
+    peerDependencies:
+      semantic-release: '>=18.0.0'
+
+  '@semantic-release/commit-analyzer@13.0.1':
+    resolution: {integrity: sha512-wdnBPHKkr9HhNhXOhZD5a2LNl91+hs8CC2vsAVYxtZH3y0dV3wKn+uZSN61rdJQZ8EGxzWB3inWocBHV9+u/CQ==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@semantic-release/error@3.0.0':
+    resolution: {integrity: sha512-5hiM4Un+tpl4cKw3lV4UgzJj+SmfNIDCLLw0TepzQxz9ZGV5ixnqkzIVF+3tp0ZHgcMKE+VNGHJjEeyFG2dcSw==}
+    engines: {node: '>=14.17'}
+
+  '@semantic-release/error@4.0.0':
+    resolution: {integrity: sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ==}
+    engines: {node: '>=18'}
+
+  '@semantic-release/git@10.0.1':
+    resolution: {integrity: sha512-eWrx5KguUcU2wUPaO6sfvZI0wPafUKAMNC18aXY4EnNcrZL86dEmpNVnC9uMpGZkmZJ9EfCVJBQx4pV4EMGT1w==}
+    engines: {node: '>=14.17'}
+    peerDependencies:
+      semantic-release: '>=18.0.0'
+
+  '@semantic-release/github@11.0.6':
+    resolution: {integrity: sha512-ctDzdSMrT3H+pwKBPdyCPty6Y47X8dSrjd3aPZ5KKIKKWTwZBE9De8GtsH3TyAlw3Uyo2stegMx6rJMXKpJwJA==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=24.1.0'
+
+  '@semantic-release/npm@12.0.1':
+    resolution: {integrity: sha512-/6nntGSUGK2aTOI0rHPwY3ZjgY9FkXmEHbW9Kr+62NVOsyqpKKeP0lrCH+tphv+EsNdJNmqqwijTEnVWUMQ2Nw==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@semantic-release/npm@12.0.2':
+    resolution: {integrity: sha512-+M9/Lb35IgnlUO6OSJ40Ie+hUsZLuph2fqXC/qrKn0fMvUU/jiCjpoL6zEm69vzcmaZJ8yNKtMBEKHWN49WBbQ==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@semantic-release/release-notes-generator@14.1.0':
+    resolution: {integrity: sha512-CcyDRk7xq+ON/20YNR+1I/jP7BYKICr1uKd1HHpROSnnTdGqOTburi4jcRiTYz0cpfhxSloQO3cGhnoot7IEkA==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@shikijs/core@3.22.0':
+    resolution: {integrity: sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==}
+
+  '@shikijs/engine-javascript@3.22.0':
+    resolution: {integrity: sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==}
+
+  '@shikijs/engine-oniguruma@3.22.0':
+    resolution: {integrity: sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==}
+
+  '@shikijs/langs@3.22.0':
+    resolution: {integrity: sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==}
+
+  '@shikijs/themes@3.22.0':
+    resolution: {integrity: sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==}
+
+  '@shikijs/types@3.22.0':
+    resolution: {integrity: sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
+  '@sigstore/bundle@4.0.0':
+    resolution: {integrity: sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@sigstore/core@3.1.0':
+    resolution: {integrity: sha512-o5cw1QYhNQ9IroioJxpzexmPjfCe7gzafd2RY3qnMpxr4ZEja+Jad/U8sgFpaue6bOaF+z7RVkyKVV44FN+N8A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@sigstore/protobuf-specs@0.5.0':
+    resolution: {integrity: sha512-MM8XIwUjN2bwvCg1QvrMtbBmpcSHrkhFSCu1D11NyPvDQ25HEc4oG5/OcQfd/Tlf/OxmKWERDj0zGE23jQaMwA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  '@sigstore/sign@4.1.0':
+    resolution: {integrity: sha512-Vx1RmLxLGnSUqx/o5/VsCjkuN5L7y+vxEEwawvc7u+6WtX2W4GNa7b9HEjmcRWohw/d6BpATXmvOwc78m+Swdg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@sigstore/tuf@4.0.1':
+    resolution: {integrity: sha512-OPZBg8y5Vc9yZjmWCHrlWPMBqW5yd8+wFNl+thMdtcWz3vjVSoJQutF8YkrzI0SLGnkuFof4HSsWUhXrf219Lw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@sigstore/verify@3.1.0':
+    resolution: {integrity: sha512-mNe0Iigql08YupSOGv197YdHpPPr+EzDZmfCgMc7RPNaZTw5aLN01nBl6CHJOh3BGtnMIj83EeN4butBchc8Ag==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@sinclair/typebox@0.27.8':
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+
+  '@sinclair/typebox@0.34.46':
+    resolution: {integrity: sha512-kiW7CtS/NkdvTUjkjUJo7d5JsFfbJ14YjdhDk9KoEgK6nFjKNXZPrX0jfLA8ZlET4cFLHxOZ/0vFKOP+bOxIOQ==}
+
+  '@sindresorhus/is@4.6.0':
+    resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
+    engines: {node: '>=10'}
+
+  '@sindresorhus/merge-streams@2.3.0':
+    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
+    engines: {node: '>=18'}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@sinonjs/commons@3.0.1':
+    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
+
+  '@sinonjs/fake-timers@13.0.5':
+    resolution: {integrity: sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==}
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@swc-node/core@1.14.1':
+    resolution: {integrity: sha512-jrt5GUaZUU6cmMS+WTJEvGvaB6j1YNKPHPzC2PUi2BjaFbtxURHj6641Az6xN7b665hNniAIdvjxWcRml5yCnw==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      '@swc/core': '>= 1.13.3'
+      '@swc/types': '>= 0.1'
+
+  '@swc-node/register@1.11.1':
+    resolution: {integrity: sha512-VQ0hJ5jX31TVv/fhZx4xJRzd8pwn6VvzYd2tGOHHr2TfXGCBixZoqdPDXTiEoJLCTS2MmvBf6zyQZZ0M8aGQCQ==}
+    peerDependencies:
+      '@swc/core': '>= 1.4.13'
+      typescript: '>= 4.3'
+
+  '@swc-node/sourcemap-support@0.6.1':
+    resolution: {integrity: sha512-ovltDVH5QpdHXZkW138vG4+dgcNsxfwxHVoV6BtmTbz2KKl1A8ZSlbdtxzzfNjCjbpayda8Us9eMtcHobm38dA==}
+
+  '@swc/core-darwin-arm64@1.15.8':
+    resolution: {integrity: sha512-M9cK5GwyWWRkRGwwCbREuj6r8jKdES/haCZ3Xckgkl8MUQJZA3XB7IXXK1IXRNeLjg6m7cnoMICpXv1v1hlJOg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.15.8':
+    resolution: {integrity: sha512-j47DasuOvXl80sKJHSi2X25l44CMc3VDhlJwA7oewC1nV1VsSzwX+KOwE5tLnfORvVJJyeiXgJORNYg4jeIjYQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.15.8':
+    resolution: {integrity: sha512-siAzDENu2rUbwr9+fayWa26r5A9fol1iORG53HWxQL1J8ym4k7xt9eME0dMPXlYZDytK5r9sW8zEA10F2U3Xwg==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.15.8':
+    resolution: {integrity: sha512-o+1y5u6k2FfPYbTRUPvurwzNt5qd0NTumCTFscCNuBksycloXY16J8L+SMW5QRX59n4Hp9EmFa3vpvNHRVv1+Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-arm64-musl@1.15.8':
+    resolution: {integrity: sha512-koiCqL09EwOP1S2RShCI7NbsQuG6r2brTqUYE7pV7kZm9O17wZ0LSz22m6gVibpwEnw8jI3IE1yYsQTVpluALw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@swc/core-linux-x64-gnu@1.15.8':
+    resolution: {integrity: sha512-4p6lOMU3bC+Vd5ARtKJ/FxpIC5G8v3XLoPEZ5s7mLR8h7411HWC/LmTXDHcrSXRC55zvAVia1eldy6zDLz8iFQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-x64-musl@1.15.8':
+    resolution: {integrity: sha512-z3XBnbrZAL+6xDGAhJoN4lOueIxC/8rGrJ9tg+fEaeqLEuAtHSW2QHDHxDwkxZMjuF/pZ6MUTjHjbp8wLbuRLA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@swc/core-win32-arm64-msvc@1.15.8':
+    resolution: {integrity: sha512-djQPJ9Rh9vP8GTS/Df3hcc6XP6xnG5c8qsngWId/BLA9oX6C7UzCPAn74BG/wGb9a6j4w3RINuoaieJB3t+7iQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.15.8':
+    resolution: {integrity: sha512-/wfAgxORg2VBaUoFdytcVBVCgf1isWZIEXB9MZEUty4wwK93M/PxAkjifOho9RN3WrM3inPLabICRCEgdHpKKQ==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.15.8':
+    resolution: {integrity: sha512-GpMePrh9Sl4d61o4KAHOOv5is5+zt6BEXCOCgs/H0FLGeii7j9bWDE8ExvKFy2GRRZVNR1ugsnzaGWHKM6kuzA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.15.8':
+    resolution: {integrity: sha512-T8keoJjXaSUoVBCIjgL6wAnhADIb09GOELzKg10CjNg+vLX48P93SME6jTfte9MZIm5m+Il57H3rTSk/0kzDUw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '>=0.5.17'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.18':
+    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
+
+  '@swc/types@0.1.25':
+    resolution: {integrity: sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==}
+
+  '@szmarczak/http-timer@4.0.6':
+    resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
+    engines: {node: '>=10'}
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tootallnate/once@2.0.0':
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+
+  '@tsconfig/node10@1.0.12':
+    resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+  '@tufjs/canonical-json@2.0.0':
+    resolution: {integrity: sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  '@tufjs/models@4.1.0':
+    resolution: {integrity: sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@tybys/wasm-util@0.9.0':
+    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/better-sqlite3@7.6.13':
+    resolution: {integrity: sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA==}
+
+  '@types/body-parser@1.19.6':
+    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
+
+  '@types/bonjour@3.5.13':
+    resolution: {integrity: sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==}
+
+  '@types/cacheable-request@6.0.3':
+    resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
+
+  '@types/connect-history-api-fallback@1.5.4':
+    resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==}
+
+  '@types/connect@3.4.38':
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
+  '@types/cors@2.8.19':
+    resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}
+
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
+  '@types/eslint-scope@3.7.7':
+    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
+
+  '@types/eslint@9.6.1':
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+
+  '@types/esquery@1.5.4':
+    resolution: {integrity: sha512-yYO4Q8H+KJHKW1rEeSzHxcZi90durqYgWVfnh5K6ZADVBjBv2e1NEveYX5yT2bffgN7RqzH3k9930m+i2yBoMA==}
+
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/express-serve-static-core@4.19.7':
+    resolution: {integrity: sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==}
+
+  '@types/express-serve-static-core@5.1.1':
+    resolution: {integrity: sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==}
+
+  '@types/express@4.17.25':
+    resolution: {integrity: sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==}
+
+  '@types/express@5.0.6':
+    resolution: {integrity: sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==}
+
+  '@types/fs-extra@9.0.13':
+    resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/http-cache-semantics@4.0.4':
+    resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
+
+  '@types/http-errors@2.0.5':
+    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
+
+  '@types/http-proxy@1.17.17':
+    resolution: {integrity: sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==}
+
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/jest@30.0.0':
+    resolution: {integrity: sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==}
+
+  '@types/jsdom@21.1.7':
+    resolution: {integrity: sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
+  '@types/keyv@3.1.4':
+    resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
+
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+
+  '@types/mime@1.3.5':
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+
+  '@types/mocha@9.0.0':
+    resolution: {integrity: sha512-scN0hAWyLVAvLR9AyW7HoFF5sJZglyBsbPuHO4fv7JRvfmPBMfp1ozWqOf/e4wwPNxezBZXRfWzMb6iFLgEVRA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/nlcst@2.0.3':
+    resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
+
+  '@types/node-forge@1.3.14':
+    resolution: {integrity: sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==}
+
+  '@types/node@17.0.45':
+    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
+
+  '@types/node@20.19.9':
+    resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==}
+
+  '@types/node@22.19.3':
+    resolution: {integrity: sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==}
+
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
+  '@types/plist@3.0.5':
+    resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}
+
+  '@types/qs@6.14.0':
+    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+
+  '@types/range-parser@1.2.7':
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+
+  '@types/responselike@1.0.3':
+    resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
+
+  '@types/retry@0.12.2':
+    resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
+
+  '@types/sax@1.2.7':
+    resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
+
+  '@types/semver@7.5.8':
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+
+  '@types/semver@7.7.1':
+    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
+
+  '@types/send@0.17.6':
+    resolution: {integrity: sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==}
+
+  '@types/send@1.2.1':
+    resolution: {integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==}
+
+  '@types/serve-index@1.9.4':
+    resolution: {integrity: sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==}
+
+  '@types/serve-static@1.15.10':
+    resolution: {integrity: sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==}
+
+  '@types/serve-static@2.2.0':
+    resolution: {integrity: sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==}
+
+  '@types/sockjs@0.3.36':
+    resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==}
+
+  '@types/stack-utils@2.0.3':
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+
+  '@types/tough-cookie@4.0.5':
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
+  '@types/verror@1.10.11':
+    resolution: {integrity: sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==}
+
+  '@types/video.js@7.3.29':
+    resolution: {integrity: sha512-7xP5O3tQC6dm5xljwwvDvMKTumlu/cag4k5FwezMUazoCAbni0t3NB5ToavQlNAH5OKLLP3/ZEJbPqP6ShocIA==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@17.0.35':
+    resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
+
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
+
+  '@typescript-eslint/eslint-plugin@8.51.0':
+    resolution: {integrity: sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.51.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.51.0':
+    resolution: {integrity: sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.51.0':
+    resolution: {integrity: sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.51.0':
+    resolution: {integrity: sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.51.0':
+    resolution: {integrity: sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.51.0':
+    resolution: {integrity: sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.51.0':
+    resolution: {integrity: sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.51.0':
+    resolution: {integrity: sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.51.0':
+    resolution: {integrity: sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.51.0':
+    resolution: {integrity: sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@videojs/http-streaming@2.15.0':
+    resolution: {integrity: sha512-uRW62ybZOP4Osw24/yT79vjRkxqAyoB/wtVV6lroAaPHYUXCz9//VUQAC6xZn2z6JeCoBz0pQHGlxYb8JRFj6Q==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      video.js: ^6 || ^7
+
+  '@videojs/http-streaming@2.16.3':
+    resolution: {integrity: sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      video.js: ^6 || ^7
+
+  '@videojs/http-streaming@3.17.2':
+    resolution: {integrity: sha512-VBQ3W4wnKnVKb/limLdtSD2rAd5cmHN70xoMf4OmuDd0t2kfJX04G+sfw6u2j8oOm2BXYM9E1f4acHruqKnM1g==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      video.js: ^8.19.0
+
+  '@videojs/vhs-utils@3.0.5':
+    resolution: {integrity: sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==}
+    engines: {node: '>=8', npm: '>=5'}
+
+  '@videojs/vhs-utils@4.1.1':
+    resolution: {integrity: sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==}
+    engines: {node: '>=8', npm: '>=5'}
+
+  '@videojs/xhr@2.6.0':
+    resolution: {integrity: sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==}
+
+  '@videojs/xhr@2.7.0':
+    resolution: {integrity: sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==}
+
+  '@vitejs/plugin-basic-ssl@2.1.0':
+    resolution: {integrity: sha512-dOxxrhgyDIEUADhb/8OlV9JIqYLgos03YorAueTIeOUskLJSEsfwCByjbu98ctXitUN3znXKp0bYD/WHSudCeA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0
+
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+
+  '@webassemblyjs/ieee754@1.13.2':
+    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+
+  '@webassemblyjs/leb128@1.13.2':
+    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+
+  '@webassemblyjs/utf8@1.13.2':
+    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
+
+  '@webassemblyjs/wasm-gen@1.14.1':
+    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
+
+  '@webassemblyjs/wasm-opt@1.14.1':
+    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
+
+  '@webassemblyjs/wasm-parser@1.14.1':
+    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
+
+  '@webassemblyjs/wast-printer@1.14.1':
+    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
+
+  '@xmldom/xmldom@0.7.13':
+    resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
+    engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
+
+  '@xmldom/xmldom@0.8.11':
+    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
+    engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
+
+  '@xtuc/ieee754@1.2.0':
+    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
+
+  '@xtuc/long@4.2.2':
+    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
+
+  '@yangkghjh/videojs-aspect-ratio-panel@0.0.1':
+    resolution: {integrity: sha512-b5l9W9H0y717jUcZCnwWwdVOJrN/N35MTjpAA5TMS8I0CGlsAwvAUaRyj3/o5SXI7VHVcf7iS40M1smMRfRWAA==}
+    engines: {node: '>=8', npm: '>=5'}
+
+  '@yarnpkg/lockfile@1.1.0':
+    resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
+
+  '@yarnpkg/parsers@3.0.2':
+    resolution: {integrity: sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==}
+    engines: {node: '>=18.12.0'}
+
+  '@zkochan/js-yaml@0.0.7':
+    resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
+    hasBin: true
+
+  abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+
+  abbrev@4.0.0:
+    resolution: {integrity: sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  acorn-import-phases@1.0.4:
+    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      acorn: ^8.14.0
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  add-stream@1.0.0:
+    resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
+
+  address@1.2.2:
+    resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
+    engines: {node: '>= 10.0.0'}
+
+  adm-zip@0.5.16:
+    resolution: {integrity: sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==}
+    engines: {node: '>=12.0'}
+
+  aes-decrypter@3.1.3:
+    resolution: {integrity: sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==}
+
+  aes-decrypter@4.0.2:
+    resolution: {integrity: sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==}
+
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  agentkeepalive@4.6.0:
+    resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
+    engines: {node: '>= 8.0.0'}
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  aggregate-error@5.0.0:
+    resolution: {integrity: sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw==}
+    engines: {node: '>=18'}
+
+  ajv-formats@2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-keywords@3.5.2:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: 6.14.0
+
+  ajv-keywords@5.1.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  algoliasearch@5.46.2:
+    resolution: {integrity: sha512-qqAXW9QvKf2tTyhpDA4qXv1IfBwD2eduSW6tUEBFIfCeE9gn9HQ9I5+MaKoenRuHrzk5sQoNh1/iof8mY7uD6Q==}
+    engines: {node: '>= 14.0.0'}
+
+  angular-eslint@20.5.2:
+    resolution: {integrity: sha512-naf3bBX9vNZu0igPyB3Ctw5y8GJi7WSZXB2k7+3st+ZCb99ptKHvux3JIEcDP50JbTcs41nDGHyfeErTvHcYSA==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '*'
+      typescript-eslint: ^8.0.0
+
+  angularx-qrcode@21.0.4:
+    resolution: {integrity: sha512-GZFa/X/3rHx/4peA4zNROkK6UaYqxJX0dgkEMk7dCcoYNwJM8/UkOkEUfcx+Btjr7iT4UEhf9twWhFjFp58wfw==}
+    peerDependencies:
+      '@angular/common': ^21.0.0
+      '@angular/core': ^21.0.0
+
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-escapes@7.2.0:
+    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
+    engines: {node: '>=18'}
+
+  ansi-html-community@0.0.8:
+    resolution: {integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==}
+    engines: {'0': node >= 0.8.0}
+    hasBin: true
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  app-builder-bin@5.0.0-alpha.10:
+    resolution: {integrity: sha512-Ev4jj3D7Bo+O0GPD2NMvJl+PGiBAfS7pUGawntBNpCbxtpncfUixqFj9z9Jme7V7s3LBGqsWZZP54fxBX3JKJw==}
+
+  app-builder-bin@5.0.0-alpha.12:
+    resolution: {integrity: sha512-j87o0j6LqPL3QRr8yid6c+Tt5gC7xNfYo6uQIQkorAC6MpeayVMZrEDzKmJJ/Hlv7EnOQpaRm53k6ktDYZyB6w==}
+
+  app-builder-lib@25.1.8:
+    resolution: {integrity: sha512-pCqe7dfsQFBABC1jeKZXQWhGcCPF3rPCXDdfqVKjIeWBcXzyC1iOWZdfFhGl+S9MyE/k//DFmC6FzuGAUudNDg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      dmg-builder: 25.1.8
+      electron-builder-squirrel-windows: 25.1.8
+
+  app-builder-lib@26.0.12:
+    resolution: {integrity: sha512-+/CEPH1fVKf6HowBUs6LcAIoRcjeqgvAeoSE+cl7Y7LndyQ9ViGPYibNk7wmhMHzNgHIuIbw4nWADPO+4mjgWw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      dmg-builder: 26.0.12
+      electron-builder-squirrel-windows: 26.0.12
+
+  aproba@2.1.0:
+    resolution: {integrity: sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew==}
+
+  are-we-there-yet@3.0.1:
+    resolution: {integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
+
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  argv-formatter@1.0.0:
+    resolution: {integrity: sha512-F2+Hkm9xFaRg+GkaNnbwXNDV5O6pnCFEmqyhvfC/Ic5LbgOWjJh3L+mN/s91rxVL3znE7DYVpW0GJFT+4YBgWw==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+
+  array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array-iterate@2.0.1:
+    resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
+
+  array-union@3.0.1:
+    resolution: {integrity: sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==}
+    engines: {node: '>=12'}
+
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  artplayer@5.3.0:
+    resolution: {integrity: sha512-yExO39MpEg4P+bxgChxx1eJfiUPE4q1QQRLCmqGhlsj+ANuaoEkR8hF93LdI5ZyrAcIbJkuEndxEiUoKobifDw==}
+
+  assert-plus@1.0.0:
+    resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
+    engines: {node: '>=0.8'}
+
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
+    hasBin: true
+
+  astro@5.18.1:
+    resolution: {integrity: sha512-m4VWilWZ+Xt6NPoYzC4CgGZim/zQUO7WFL0RHCH0AiEavF1153iC3+me2atDvXpf/yX4PyGUeD8wZLq1cirT3g==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
+    hasBin: true
+
+  async-exit-hook@2.0.1:
+    resolution: {integrity: sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==}
+    engines: {node: '>=0.12.0'}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+
+  autoprefixer@10.4.23:
+    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axios@1.15.0:
+    resolution: {integrity: sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  babel-jest@30.2.0:
+    resolution: {integrity: sha512-0YiBEOxWqKkSQWL9nNGGEgndoeL0ZpWrbLMNL5u/Kaxrli3Eaxlt3ZtIDktEvXt4L/R9r3ODr2zKwGM/2BjxVw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@babel/core': ^7.11.0 || ^8.0.0-0
+
+  babel-loader@9.2.1:
+    resolution: {integrity: sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+      webpack: '>=5'
+
+  babel-plugin-const-enum@1.2.0:
+    resolution: {integrity: sha512-o1m/6iyyFnp9MRsK1dHF3bneqyf3AlM2q3A/YbgQr2pCat6B6XJVDv2TXqzfY2RYUi4mak6WAksSBPlyYGx9dg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  babel-plugin-istanbul@7.0.1:
+    resolution: {integrity: sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA==}
+    engines: {node: '>=12'}
+
+  babel-plugin-jest-hoist@30.2.0:
+    resolution: {integrity: sha512-ftzhzSGMUnOzcCXd6WHdBGMyuwy15Wnn0iyyWGKgBDLxf9/s5ABuraCSpBX2uG0jUg4rqJnxsLc5+oYBqoxVaA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
+  babel-plugin-polyfill-corejs2@0.4.14:
+    resolution: {integrity: sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-corejs3@0.13.0:
+    resolution: {integrity: sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-regenerator@0.6.5:
+    resolution: {integrity: sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-transform-typescript-metadata@0.3.2:
+    resolution: {integrity: sha512-mWEvCQTgXQf48yDqgN7CH50waTyYBeP2Lpqx4nNWab9sxEpdXVeKgfj1qYI2/TgUPQtNFZ85i3PemRtnXVYYJg==}
+    peerDependencies:
+      '@babel/core': ^7
+      '@babel/traverse': ^7
+    peerDependenciesMeta:
+      '@babel/traverse':
+        optional: true
+
+  babel-preset-current-node-syntax@1.2.0:
+    resolution: {integrity: sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0 || ^8.0.0-0
+
+  babel-preset-jest@30.2.0:
+    resolution: {integrity: sha512-US4Z3NOieAQumwFnYdUWKvUKh8+YSnS/gB3t6YBiz0bskpu7Pine8pPCheNxlPEW4wnUkma2a94YuW2q3guvCQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@babel/core': ^7.11.0 || ^8.0.0-beta.1
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.3:
+    resolution: {integrity: sha512-1pHv8LX9CpKut1Zp4EXey7Z8OfH11ONNH6Dhi2WDUt31VVZFXZzKwXcysBgqSumFCmR+0dqjMK5v5JiFHzi0+g==}
+    engines: {node: 20 || >=22}
+
+  base-64@1.0.0:
+    resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  baseline-browser-mapping@2.9.11:
+    resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
+    hasBin: true
+
+  basic-auth@2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+
+  batch@0.6.1:
+    resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
+
+  beasties@0.3.5:
+    resolution: {integrity: sha512-NaWu+f4YrJxEttJSm16AzMIFtVldCvaJ68b1L098KpqXmxt9xOLtKoLkKxb8ekhOrLqEJAbvT6n6SEvB/sac7A==}
+    engines: {node: '>=14.0.0'}
+
+  before-after-hook@4.0.0:
+    resolution: {integrity: sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==}
+
+  better-sqlite3@12.5.0:
+    resolution: {integrity: sha512-WwCZ/5Diz7rsF29o27o0Gcc1Du+l7Zsv7SYtVPG0X3G/uUI1LqdxrQI7c9Hs2FWpqXXERjW9hp6g3/tH7DlVKg==}
+    engines: {node: 20.x || 22.x || 23.x || 24.x || 25.x}
+
+  big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bindings@1.5.0:
+    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  bluebird-lst@1.0.9:
+    resolution: {integrity: sha512-7B1Rtx82hjnSD4PGLAjVWeYH3tHAcVUmChh85a3lltKQm6FresXh9ErQo6oAv6CqxttczC3/kEg8SY5NluPuUw==}
+
+  bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+
+  body-parser@1.20.4:
+    resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  body-parser@2.2.1:
+    resolution: {integrity: sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==}
+    engines: {node: '>=18'}
+
+  bonjour-service@1.3.0:
+    resolution: {integrity: sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  boolean@3.2.0:
+    resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  bottleneck@2.19.5:
+    resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==}
+
+  boxen@8.0.1:
+    resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
+    engines: {node: '>=18'}
+
+  brace-expansion@1.1.13:
+    resolution: {integrity: sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==}
+
+  brace-expansion@2.1.0:
+    resolution: {integrity: sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==}
+
+  brace-expansion@5.0.2:
+    resolution: {integrity: sha512-Pdk8c9poy+YhOgVWw1JNN22/HcivgKWwpxKq04M/jTmHyCZn12WPJebZxdjSa5TmBqISrUSgNYU3eRORljfCCw==}
+    engines: {node: 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  bs-logger@0.2.6:
+    resolution: {integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==}
+    engines: {node: '>= 6'}
+
+  bser@2.1.1:
+    resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
+
+  btoa@1.2.1:
+    resolution: {integrity: sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==}
+    engines: {node: '>= 0.4.0'}
+    hasBin: true
+
+  buffer-builder@0.2.0:
+    resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==}
+
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  builder-util-runtime@9.2.10:
+    resolution: {integrity: sha512-6p/gfG1RJSQeIbz8TK5aPNkoztgY1q5TgmGFMAXcY8itsGW6Y2ld1ALsZ5UJn8rog7hKF3zHx5iQbNQ8uLcRlw==}
+    engines: {node: '>=12.0.0'}
+
+  builder-util-runtime@9.3.1:
+    resolution: {integrity: sha512-2/egrNDDnRaxVwK3A+cJq6UOlqOdedGA7JPqCeJjN2Zjk1/QB/6QUi3b714ScIGS7HafFXTyzJEOr5b44I3kvQ==}
+    engines: {node: '>=12.0.0'}
+
+  builder-util@25.1.7:
+    resolution: {integrity: sha512-7jPjzBwEGRbwNcep0gGNpLXG9P94VA3CPAZQCzxkFXiV2GMQKlziMbY//rXPI7WKfhsvGgFXjTcXdBEwgXw9ww==}
+
+  builder-util@26.0.11:
+    resolution: {integrity: sha512-xNjXfsldUEe153h1DraD0XvDOpqGR0L5eKFkdReB7eFW5HqysDZFfly4rckda6y9dF39N3pkPlOblcfHKGw+uA==}
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  cacache@16.1.3:
+    resolution: {integrity: sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  cacache@20.0.3:
+    resolution: {integrity: sha512-3pUp4e8hv07k1QlijZu6Kn7c9+ZpWWk4j3F8N3xPuCExULobqJydKYOTj1FTq58srkJsXvO7LbGAH4C0ZU3WGw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  cacheable-lookup@5.0.4:
+    resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==}
+    engines: {node: '>=10.6.0'}
+
+  cacheable-request@7.0.4:
+    resolution: {integrity: sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+
+  camelcase@8.0.0:
+    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
+    engines: {node: '>=16'}
+
+  caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+
+  caniuse-lite@1.0.30001762:
+    resolution: {integrity: sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  chownr@1.1.4:
+    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
+
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  chrome-trace-event@1.0.4:
+    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
+    engines: {node: '>=6.0'}
+
+  chromium-pickle-js@0.2.0:
+    resolution: {integrity: sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==}
+
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
+  ci-info@4.3.1:
+    resolution: {integrity: sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==}
+    engines: {node: '>=8'}
+
+  cjs-module-lexer@2.2.0:
+    resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  clean-stack@5.3.0:
+    resolution: {integrity: sha512-9ngPTOhYGQqNVSfeJkYXHmF7AGWp4/nN5D/QqNQs3Dvxd1Kk/WpjHfNujKHYUQ/5CoGyOyFNoWSPk5afzP0QVg==}
+    engines: {node: '>=14.16'}
+
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-highlight@2.1.11:
+    resolution: {integrity: sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==}
+    engines: {node: '>=8.0.0', npm: '>=5.0.0'}
+    hasBin: true
+
+  cli-spinners@2.6.1:
+    resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
+    engines: {node: '>=6'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-spinners@3.4.0:
+    resolution: {integrity: sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==}
+    engines: {node: '>=18.20'}
+
+  cli-table3@0.6.5:
+    resolution: {integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==}
+    engines: {node: 10.* || >= 12.*}
+
+  cli-truncate@2.1.0:
+    resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
+    engines: {node: '>=8'}
+
+  cli-truncate@5.1.1:
+    resolution: {integrity: sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==}
+    engines: {node: '>=20'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
+  cliui@7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  cliui@9.0.1:
+    resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
+    engines: {node: '>=20'}
+
+  clone-deep@4.0.1:
+    resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
+    engines: {node: '>=6'}
+
+  clone-response@1.0.3:
+    resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
+
+  clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+
+  collapse-white-space@2.1.0:
+    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+
+  collect-v8-coverage@1.0.3:
+    resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-support@1.1.3:
+    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
+    hasBin: true
+
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+
+  columnify@1.6.0:
+    resolution: {integrity: sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==}
+    engines: {node: '>=8.0.0'}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  commander@5.1.0:
+    resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
+    engines: {node: '>= 6'}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  common-ancestor-path@1.0.1:
+    resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
+
+  common-path-prefix@3.0.0:
+    resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
+
+  compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+
+  compare-version@0.1.2:
+    resolution: {integrity: sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==}
+    engines: {node: '>=0.10.0'}
+
+  compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+
+  compression@1.8.1:
+    resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
+    engines: {node: '>= 0.8.0'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
+  config-file-ts@0.2.8-rc1:
+    resolution: {integrity: sha512-GtNECbVI82bT4RiDIzBSVuTKoSHufnU7Ce7/42bkWZJZFLjmDF2WBpVsvRkhKCfKBnTBb3qZrBwPpFBU/Myvhg==}
+
+  confusing-browser-globals@1.0.11:
+    resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
+
+  connect-history-api-fallback@2.0.0:
+    resolution: {integrity: sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==}
+    engines: {node: '>=0.8'}
+
+  console-control-strings@1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
+  content-disposition@1.0.1:
+    resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  conventional-changelog-angular@8.1.0:
+    resolution: {integrity: sha512-GGf2Nipn1RUCAktxuVauVr1e3r8QrLP/B0lEUsFktmGqc3ddbQkhoJZHJctVU829U1c6mTSWftrVOCHaL85Q3w==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-atom@5.0.0:
+    resolution: {integrity: sha512-WfzCaAvSCFPkznnLgLnfacRAzjgqjLUjvf3MftfsJzQdDICqkOOpcMtdJF3wTerxSpv2IAAjX8doM3Vozqle3g==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-cli@5.0.0:
+    resolution: {integrity: sha512-9Y8fucJe18/6ef6ZlyIlT2YQUbczvoQZZuYmDLaGvcSBP+M6h+LAvf7ON7waRxKJemcCII8Yqu5/8HEfskTxJQ==}
+    engines: {node: '>=18'}
+    deprecated: This package is no longer maintained. Please use the conventional-changelog package instead.
+    hasBin: true
+
+  conventional-changelog-codemirror@5.0.0:
+    resolution: {integrity: sha512-8gsBDI5Y3vrKUCxN6Ue8xr6occZ5nsDEc4C7jO/EovFGozx8uttCAyfhRrvoUAWi2WMm3OmYs+0mPJU7kQdYWQ==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-conventionalcommits@8.0.0:
+    resolution: {integrity: sha512-eOvlTO6OcySPyyyk8pKz2dP4jjElYunj9hn9/s0OB+gapTO8zwS9UQWrZ1pmF2hFs3vw1xhonOLGcGjy/zgsuA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-core@8.0.0:
+    resolution: {integrity: sha512-EATUx5y9xewpEe10UEGNpbSHRC6cVZgO+hXQjofMqpy+gFIrcGvH3Fl6yk2VFKh7m+ffenup2N7SZJYpyD9evw==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-ember@5.0.0:
+    resolution: {integrity: sha512-RPflVfm5s4cSO33GH/Ey26oxhiC67akcxSKL8CLRT3kQX2W3dbE19sSOM56iFqUJYEwv9mD9r6k79weWe1urfg==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-eslint@6.0.0:
+    resolution: {integrity: sha512-eiUyULWjzq+ybPjXwU6NNRflApDWlPEQEHvI8UAItYW/h22RKkMnOAtfCZxMmrcMO1OKUWtcf2MxKYMWe9zJuw==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-express@5.0.0:
+    resolution: {integrity: sha512-D8Q6WctPkQpvr2HNCCmwU5GkX22BVHM0r4EW8vN0230TSyS/d6VQJDAxGb84lbg0dFjpO22MwmsikKL++Oo/oQ==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-jquery@6.0.0:
+    resolution: {integrity: sha512-2kxmVakyehgyrho2ZHBi90v4AHswkGzHuTaoH40bmeNqUt20yEkDOSpw8HlPBfvEQBwGtbE+5HpRwzj6ac2UfA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-jshint@5.0.0:
+    resolution: {integrity: sha512-gGNphSb/opc76n2eWaO6ma4/Wqu3tpa2w7i9WYqI6Cs2fncDSI2/ihOfMvXveeTTeld0oFvwMVNV+IYQIk3F3g==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-preset-loader@5.0.0:
+    resolution: {integrity: sha512-SetDSntXLk8Jh1NOAl1Gu5uLiCNSYenB5tm0YVeZKePRIgDW9lQImromTwLa3c/Gae298tsgOM+/CYT9XAl0NA==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-writer@8.2.0:
+    resolution: {integrity: sha512-Y2aW4596l9AEvFJRwFGJGiQjt2sBYTjPD18DdvxX9Vpz0Z7HQ+g1Z+6iYDAm1vR3QOJrDBkRHixHK/+FhkR6Pw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conventional-changelog@6.0.0:
+    resolution: {integrity: sha512-tuUH8H/19VjtD9Ig7l6TQRh+Z0Yt0NZ6w/cCkkyzUbGQTnUEmKfGtkC9gGfVgCfOL1Rzno5NgNF4KY8vR+Jo3w==}
+    engines: {node: '>=18'}
+
+  conventional-commits-filter@5.0.0:
+    resolution: {integrity: sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==}
+    engines: {node: '>=18'}
+
+  conventional-commits-parser@6.2.1:
+    resolution: {integrity: sha512-20pyHgnO40rvfI0NGF/xiEoFMkXDtkF8FwHvk5BokoFoCuTQRI8vrNCNFWUOfuolKJMm1tPCHc8GgYEtr1XRNA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  convert-hrtime@5.0.0:
+    resolution: {integrity: sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==}
+    engines: {node: '>=12'}
+
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-es@1.2.2:
+    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
+
+  cookie-signature@1.0.7:
+    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  cookies@0.9.1:
+    resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
+    engines: {node: '>= 0.8'}
+
+  copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+
+  copy-webpack-plugin@10.2.4:
+    resolution: {integrity: sha512-xFVltahqlsRcyyJqQbDY6EYTtyQZF9rf+JPjwHObLdPFMEISqkFkr7mFoVOC6BfYS/dNThyoQKvziugm+OnwBg==}
+    engines: {node: '>= 12.20.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+
+  copy-webpack-plugin@12.0.2:
+    resolution: {integrity: sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+
+  core-js-compat@3.47.0:
+    resolution: {integrity: sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==}
+
+  core-util-is@1.0.2:
+    resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
+
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
+  corser@2.0.1:
+    resolution: {integrity: sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==}
+    engines: {node: '>= 0.4.0'}
+
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
+  cosmiconfig@8.3.6:
+    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  crc@3.8.0:
+    resolution: {integrity: sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==}
+
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+  cron-parser@4.9.0:
+    resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
+    engines: {node: '>=12.0.0'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+
+  crypto-random-string@4.0.0:
+    resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
+    engines: {node: '>=12'}
+
+  css-declaration-sorter@7.3.1:
+    resolution: {integrity: sha512-gz6x+KkgNCjxq3Var03pRYLhyNfwhkKF1g/yoLgDNtFvVu0/fOLV9C8fFEZRjACp/XQLumjAYo7JVjzH3wLbxA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
+
+  css-loader@6.11.0:
+    resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
+  css-minimizer-webpack-plugin@5.0.1:
+    resolution: {integrity: sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      '@parcel/css': '*'
+      '@swc/css': '*'
+      clean-css: '*'
+      csso: '*'
+      esbuild: '*'
+      lightningcss: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@parcel/css':
+        optional: true
+      '@swc/css':
+        optional: true
+      clean-css:
+        optional: true
+      csso:
+        optional: true
+      esbuild:
+        optional: true
+      lightningcss:
+        optional: true
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-select@6.0.0:
+    resolution: {integrity: sha512-rZZVSLle8v0+EY8QAkDWrKhpgt6SA5OtHsgBnsj6ZaLb5dmDVOWUDtQitd9ydxxvEjhewNudS6eTVU7uOyzvXw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  css-what@7.0.0:
+    resolution: {integrity: sha512-wD5oz5xibMOPHzy13CyGmogB3phdvcDaB5t0W/Nr5Z2O/agcB8YwOz6e2Lsp10pNDzBoDO9nVa3RGs/2BttpHQ==}
+    engines: {node: '>= 6'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssnano-preset-default@6.1.2:
+    resolution: {integrity: sha512-1C0C+eNaeN8OcHQa193aRgYexyJtU8XwbdieEjClw+J9d94E41LwT6ivKH0WT+fYwYWB0Zp3I3IZ7tI/BbUbrg==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  cssnano-utils@4.0.2:
+    resolution: {integrity: sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  cssnano@6.1.2:
+    resolution: {integrity: sha512-rYk5UeX7VAM/u0lNqewCdasdtPK81CgX8wJFLEIXHbV2oldWRgJAsZrdhRXkV1NJzA2g850KiFm9mMU2HxNxMA==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  date-format@4.0.14:
+    resolution: {integrity: sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==}
+    engines: {node: '>=4.0'}
+
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
+  decompress-response@6.0.0:
+    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
+    engines: {node: '>=10'}
+
+  dedent@1.7.1:
+    resolution: {integrity: sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deep-equal@1.0.1:
+    resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.4.0:
+    resolution: {integrity: sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==}
+    engines: {node: '>=18'}
+
+  default-shell@2.2.0:
+    resolution: {integrity: sha512-sPpMZcVhRQ0nEMDtuMJ+RtCxt7iHPAMBU+I4tAlo5dU1sjRpNax0crj6nR3qKpvVnckaQ9U38enXcwW9nZJeCw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+
+  defer-to-connect@2.0.1:
+    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
+    engines: {node: '>=10'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  defu@6.1.6:
+    resolution: {integrity: sha512-f8mefEW4WIVg4LckePx3mALjQSPQgFlg9U8yaPdlsbdYcHQyj9n2zL2LJEA52smeYxOvmd/nB7TpMtHGMTHcug==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+
+  depd@1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-newline@3.1.0:
+    resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
+    engines: {node: '>=8'}
+
+  detect-node@2.1.0:
+    resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
+
+  detect-port@1.6.1:
+    resolution: {integrity: sha512-CmnVc+Hek2egPx1PeTFVta2W78xy2K/9Rkf6cC4T59S50tVnzKj+tnx5mmx5lwvCkujZ4uRrpRSuV+IVs3f90Q==}
+    engines: {node: '>= 4.0.0'}
+    hasBin: true
+
+  deterministic-object-hash@2.0.2:
+    resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==}
+    engines: {node: '>=18'}
+
+  devalue@5.6.4:
+    resolution: {integrity: sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+    engines: {node: '>=0.3.1'}
+
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
+  dir-compare@4.2.0:
+    resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dmg-builder@25.1.8:
+    resolution: {integrity: sha512-NoXo6Liy2heSklTI5OIZbCgXC1RzrDQsZkeEwXhdOro3FT1VBOvbubvscdPnjVuQ4AMwwv61oaH96AbiYg9EnQ==}
+
+  dmg-builder@26.0.12:
+    resolution: {integrity: sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==}
+
+  dmg-license@1.0.11:
+    resolution: {integrity: sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==}
+    engines: {node: '>=8'}
+    os: [darwin]
+    hasBin: true
+
+  dns-packet@5.6.1:
+    resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
+    engines: {node: '>=6'}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  dom-walk@0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  dotenv-expand@11.0.7:
+    resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
+    engines: {node: '>=12'}
+
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+    engines: {node: '>=12'}
+
+  dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
+
+  drizzle-kit@0.31.5:
+    resolution: {integrity: sha512-+CHgPFzuoTQTt7cOYCV6MOw2w8vqEn/ap1yv4bpZOWL03u7rlVRQhUY0WYT3rHsgVTXwYQDZaSUJSQrMBUKuWg==}
+    hasBin: true
+
+  drizzle-orm@0.45.2:
+    resolution: {integrity: sha512-kY0BSaTNYWnoDMVoyY8uxmyHjpJW1geOmBMdSSicKo9CIIWkSxMIj2rkeSR51b8KAPB7m+qysjuHme5nKP+E5Q==}
+    peerDependencies:
+      '@aws-sdk/client-rds-data': '>=3'
+      '@cloudflare/workers-types': '>=4'
+      '@electric-sql/pglite': '>=0.2.0'
+      '@libsql/client': '>=0.10.0'
+      '@libsql/client-wasm': '>=0.10.0'
+      '@neondatabase/serverless': '>=0.10.0'
+      '@op-engineering/op-sqlite': '>=2'
+      '@opentelemetry/api': ^1.4.1
+      '@planetscale/database': '>=1.13'
+      '@prisma/client': '*'
+      '@tidbcloud/serverless': '*'
+      '@types/better-sqlite3': '*'
+      '@types/pg': '*'
+      '@types/sql.js': '*'
+      '@upstash/redis': '>=1.34.7'
+      '@vercel/postgres': '>=0.8.0'
+      '@xata.io/client': '*'
+      better-sqlite3: '>=7'
+      bun-types: '*'
+      expo-sqlite: '>=14.0.0'
+      gel: '>=2'
+      knex: '*'
+      kysely: '*'
+      mysql2: '>=2'
+      pg: '>=8'
+      postgres: '>=3'
+      prisma: '*'
+      sql.js: '>=1'
+      sqlite3: '>=5'
+    peerDependenciesMeta:
+      '@aws-sdk/client-rds-data':
+        optional: true
+      '@cloudflare/workers-types':
+        optional: true
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      '@libsql/client-wasm':
+        optional: true
+      '@neondatabase/serverless':
+        optional: true
+      '@op-engineering/op-sqlite':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@prisma/client':
+        optional: true
+      '@tidbcloud/serverless':
+        optional: true
+      '@types/better-sqlite3':
+        optional: true
+      '@types/pg':
+        optional: true
+      '@types/sql.js':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/postgres':
+        optional: true
+      '@xata.io/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      bun-types:
+        optional: true
+      expo-sqlite:
+        optional: true
+      gel:
+        optional: true
+      knex:
+        optional: true
+      kysely:
+        optional: true
+      mysql2:
+        optional: true
+      pg:
+        optional: true
+      postgres:
+        optional: true
+      prisma:
+        optional: true
+      sql.js:
+        optional: true
+      sqlite3:
+        optional: true
+
+  dset@3.1.4:
+    resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
+    engines: {node: '>=4'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexer2@0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  ejs@3.1.10:
+    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  electron-builder@25.1.8:
+    resolution: {integrity: sha512-poRgAtUHHOnlzZnc9PK4nzG53xh74wj2Jy7jkTrqZ0MWPoHGh1M2+C//hGeYdA+4K8w4yiVCNYoLXF7ySj2Wig==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  electron-builder@26.0.12:
+    resolution: {integrity: sha512-cD1kz5g2sgPTMFHjLxfMjUK5JABq3//J4jPswi93tOPFz6btzXYtK5NrDt717NRbukCUDOrrvmYVOWERlqoiXA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  electron-conf@1.3.0:
+    resolution: {integrity: sha512-F1F33QntbFiRsmCW4r8n+CqfTmBzw9XhCWVh27weFpfCNATo9n0K1h1UQLEG5kYBZRqMfcWr1+IHSO+Yd7seRQ==}
+    peerDependencies:
+      electron: '>=15.0.0'
+
+  electron-dl@4.0.0:
+    resolution: {integrity: sha512-USiB9816d2JzKv0LiSbreRfTg5lDk3lWh0vlx/gugCO92ZIJkHVH0UM18EHvKeadErP6Xn4yiTphWzYfbA2Ong==}
+    engines: {node: '>=18'}
+
+  electron-playwright-helpers@1.8.2:
+    resolution: {integrity: sha512-sM9fDSEFDOptKDa8oiNphiXdR1KR1uFe8yHnlrnvyQE1ScnHizca/SoYvUdtn+5IuVNTkT8MesKWJ6seS4/zuA==}
+
+  electron-publish@25.1.7:
+    resolution: {integrity: sha512-+jbTkR9m39eDBMP4gfbqglDd6UvBC7RLh5Y0MhFSsc6UkGHj9Vj9TWobxevHYMMqmoujL11ZLjfPpMX+Pt6YEg==}
+
+  electron-publish@26.0.11:
+    resolution: {integrity: sha512-a8QRH0rAPIWH9WyyS5LbNvW9Ark6qe63/LqDB7vu2JXYpi0Gma5Q60Dh4tmTqhOBQt0xsrzD8qE7C+D7j+B24A==}
+
+  electron-to-chromium@1.5.267:
+    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
+
+  electron@39.8.8:
+    resolution: {integrity: sha512-24MMLdwCg8xwlWzDxC1XZU2MqW0Xx2UPxt9EU15vMDoRSMHPqmi/BgRCEINXZaBLfFSeXEKGpg+QlBRdL5uwaw==}
+    engines: {node: '>= 12.20.55'}
+    hasBin: true
+
+  emittery@0.13.1:
+    resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
+    engines: {node: '>=12'}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  emojilib@2.4.0:
+    resolution: {integrity: sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw==}
+
+  emojis-list@3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  encoding@0.1.13:
+    resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
+  enhanced-resolve@5.18.4:
+    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
+    engines: {node: '>=10.13.0'}
+
+  enquirer@2.3.6:
+    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
+    engines: {node: '>=8.6'}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  env-ci@11.2.0:
+    resolution: {integrity: sha512-D5kWfzkmaOQDioPmiviWAVtKmpPT4/iJmMVQxWxMPJTFyTkdc5JQUfc5iXEeWxcOdsYTKSAiA/Age4NUOqKsRA==}
+    engines: {node: ^18.17 || >=20.6.1}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  err-code@2.0.3:
+    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
+
+  errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  error-stack-parser@2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+
+  es-abstract@1.24.1:
+    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  es6-error@4.1.1:
+    resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
+
+  es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
+  esbuild-register@3.6.0:
+    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
+    peerDependencies:
+      esbuild: '>=0.12 <1'
+
+  esbuild-wasm@0.27.2:
+    resolution: {integrity: sha512-eUTnl8eh+v8UZIZh4MrMOKDAc8Lm7+NqP3pyuTORGFY1s/o9WoiJgKnwXy+te2J3hX7iRbFSHEyig7GsPeeJyw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.0:
+    resolution: {integrity: sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.2:
+    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-goat@4.0.0:
+    resolution: {integrity: sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==}
+    engines: {node: '>=12'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-playwright@1.8.3:
+    resolution: {integrity: sha512-h87JPFHkz8a6oPhn8GRGGhSQoAJjx0AkOv1jME6NoMk2FpEsfvfJJNaQDxLSqSALkCr0IJXPGTnp6SIRVu5Nqg==}
+    engines: {node: '>=16.6.0'}
+    peerDependencies:
+      eslint: '>=8.40.0'
+      eslint-plugin-jest: '>=25'
+    peerDependenciesMeta:
+      eslint-plugin-jest:
+        optional: true
+
+  eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-scope@9.1.0:
+    resolution: {integrity: sha512-CkWE42hOJsNj9FJRaoMX9waUFYhqY4jmyLFdAdzZr6VaCg3ynLYx4WnOdkaIifGfH4gsUcBTn4OZbHXkpLD0FQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.39.2:
+    resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
+  eventsource-parser@3.0.6:
+    resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  exit-x@0.2.2:
+    resolution: {integrity: sha512-+I6B/IkJc1o/2tiURyz/ivu/O0nKNEArIUB5O7zBrlDVJr22SCLH3xTeEry428LvFhRzIA1g8izguxJ/gbNcVQ==}
+    engines: {node: '>= 0.8.0'}
+
+  expand-template@2.0.3:
+    resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
+    engines: {node: '>=6'}
+
+  expand-tilde@2.0.2:
+    resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==}
+    engines: {node: '>=0.10.0'}
+
+  expect@30.2.0:
+    resolution: {integrity: sha512-u/feCi0GPsI+988gU2FLcsHyAHTU0MX1Wg68NhAnN7z/+C5wqG+CY8J53N9ioe8RXgaoz0nBR/TYMf3AycUuPw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  exponential-backoff@3.1.3:
+    resolution: {integrity: sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==}
+
+  express-rate-limit@8.3.0:
+    resolution: {integrity: sha512-KJzBawY6fB9FiZGdE/0aftepZ91YlaGIrV8vgblRM3J8X+dHx/aiowJWwkx6LIGyuqGiANsjSwwrbb8mifOJ4Q==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@4.22.1:
+    resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
+    engines: {node: '>= 0.10.0'}
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  ext-list@2.2.2:
+    resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
+    engines: {node: '>=0.10.0'}
+
+  ext-name@5.0.0:
+    resolution: {integrity: sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==}
+    engines: {node: '>=4'}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
+  extsprintf@1.4.1:
+    resolution: {integrity: sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==}
+    engines: {'0': node >=0.6.0}
+
+  fast-content-type-parse@3.0.0:
+    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  faye-websocket@0.11.4:
+    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
+    engines: {node: '>=0.8.0'}
+
+  fb-watchman@2.0.2:
+    resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
+
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  figures@2.0.0:
+    resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
+    engines: {node: '>=4'}
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  file-uri-to-path@1.0.0:
+    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+
+  filelist@1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@1.3.2:
+    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
+    engines: {node: '>= 0.8'}
+
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  find-cache-dir@4.0.0:
+    resolution: {integrity: sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==}
+    engines: {node: '>=14.16'}
+
+  find-file-up@2.0.1:
+    resolution: {integrity: sha512-qVdaUhYO39zmh28/JLQM5CoYN9byEOKEH4qfa8K1eNV17W0UUMJ9WgbR/hHFH+t5rcl+6RTb5UC7ck/I+uRkpQ==}
+    engines: {node: '>=8'}
+
+  find-pkg@2.0.0:
+    resolution: {integrity: sha512-WgZ+nKbELDa6N3i/9nrHeNznm+lY3z4YfhDDWgW+5P0pdmMj26bxaxU11ookgY3NyP9GC7HvZ9etp0jRFqGEeQ==}
+    engines: {node: '>=8'}
+
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
+    engines: {node: '>=18'}
+
+  find-up@2.1.0:
+    resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
+    engines: {node: '>=4'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  find-up@6.3.0:
+    resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  find-versions@6.0.0:
+    resolution: {integrity: sha512-2kCCtc+JvcZ86IGAz3Z2Y0A1baIz9fL31pH/0S1IqZr9Iwnjq8izfPtrCyQKO6TLMPELLsQMre7VDqeIKCsHkA==}
+    engines: {node: '>=18'}
+
+  fix-path@5.0.0:
+    resolution: {integrity: sha512-erEWGGCN7RIu1bXTCfNVpVBdm0f5mwcbeja+4QXiEZzIQukP401sbpu8gd3Ny1vS34YNeswyMO0TdT2tP5OlHA==}
+    engines: {node: '>=20'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flat@5.0.2:
+    resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
+    hasBin: true
+
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+
+  flattie@1.1.1:
+    resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
+    engines: {node: '>=8'}
+
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  fontace@0.4.1:
+    resolution: {integrity: sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw==}
+
+  fontkitten@1.0.2:
+    resolution: {integrity: sha512-piJxbLnkD9Xcyi7dWJRnqszEURixe7CrF/efBfbffe2DPyabmuIuqraruY8cXTs19QoM8VJzx47BDRVNXETM7Q==}
+    engines: {node: '>=20'}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  fork-ts-checker-webpack-plugin@7.2.13:
+    resolution: {integrity: sha512-fR3WRkOb4bQdWB/y7ssDUlVdrclvwtyCUIHCfivAoYxq9dF7XfrDKbMdZIfwJ7hxIAqkYSGeU7lLJE6xrxIBdg==}
+    engines: {node: '>=12.13.0', yarn: '>=1.0.0'}
+    peerDependencies:
+      typescript: '>3.6.0'
+      vue-template-compiler: '*'
+      webpack: ^5.11.0
+    peerDependenciesMeta:
+      vue-template-compiler:
+        optional: true
+
+  fork-ts-checker-webpack-plugin@9.1.0:
+    resolution: {integrity: sha512-mpafl89VFPJmhnJ1ssH+8wmM2b50n+Rew5x42NeI2U78aRWgtkEtGmctp7iT16UjquJTjorEmIfESj3DxdW84Q==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      typescript: '>3.6.0'
+      webpack: ^5.11.0
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  from2@2.3.0:
+    resolution: {integrity: sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==}
+
+  front-matter@4.0.2:
+    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
+
+  fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs-extra@11.3.3:
+    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
+    engines: {node: '>=14.14'}
+
+  fs-extra@8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
+  fs-minipass@3.0.3:
+    resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  fs-monkey@1.1.0:
+    resolution: {integrity: sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw==}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function-timeout@1.0.2:
+    resolution: {integrity: sha512-939eZS4gJ3htTHAldmyyuzlrD58P03fHG49v2JfFXbV6OhvZKRC9j2yAtdHw/zrp2zXHuv05zMIy40F0ge7spA==}
+    engines: {node: '>=18'}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  gauge@4.0.4:
+    resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
+
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
+  get-east-asian-width@1.5.0:
+    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-package-type@0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@7.0.1:
+    resolution: {integrity: sha512-3M8C1EOFN6r8AMUhwUAACIoXZJEOufDU5+0gFFN5uNs6XYOralD2Pqkl7m046va6x77FwposWXbAhPPIOus7mQ==}
+    engines: {node: '>=16'}
+
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
+  git-log-parser@1.2.1:
+    resolution: {integrity: sha512-PI+sPDvHXNPl5WNOErAK05s3j0lgwUzMN6o8cyQrDaKfT3qd7TmNJKeXX+SknI5I0QhG5fVPAEwSY4tRGDtYoQ==}
+
+  git-raw-commits@5.0.0:
+    resolution: {integrity: sha512-I2ZXrXeOc0KrCvC7swqtIFXFN+rbjnC7b2T943tvemIOVNl+XP8YnA9UVwqFhzzLClnSA60KR/qEjLpXzs73Qg==}
+    engines: {node: '>=18'}
+    deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead.
+    hasBin: true
+
+  git-semver-tags@8.0.0:
+    resolution: {integrity: sha512-N7YRIklvPH3wYWAR2vysaqGLPRcpwQ0GKdlqTiVN5w1UmCdaeY3K8s6DMKRCh54DDdzyt/OAB6C8jgVtb7Y2Fg==}
+    engines: {node: '>=18'}
+    deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead.
+    hasBin: true
+
+  github-from-package@0.0.0:
+    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
+
+  github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob-to-regex.js@1.2.0:
+    resolution: {integrity: sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    hasBin: true
+
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  global-agent@3.0.0:
+    resolution: {integrity: sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==}
+    engines: {node: '>=10.0'}
+
+  global-modules@1.0.0:
+    resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
+    engines: {node: '>=0.10.0'}
+
+  global-prefix@1.0.2:
+    resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
+    engines: {node: '>=0.10.0'}
+
+  global@4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
+
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.9.0:
+    resolution: {integrity: sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@12.2.0:
+    resolution: {integrity: sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  globby@14.1.0:
+    resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
+    engines: {node: '>=18'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  got@11.8.6:
+    resolution: {integrity: sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==}
+    engines: {node: '>=10.19.0'}
+
+  graceful-fs@4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  h3@1.15.10:
+    resolution: {integrity: sha512-YzJeWSkDZxAhvmp8dexjRK5hxziRO7I9m0N53WhvYL5NiWfkUkzssVzY9jvGu0HBoLFW6+duYmNSn6MaZBCCtg==}
+
+  handle-thing@2.0.1:
+    resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  harmony-reflect@1.6.2:
+    resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  has-unicode@2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
+
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
+  hls.js@1.6.13:
+    resolution: {integrity: sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA==}
+
+  homedir-polyfill@1.0.3:
+    resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
+    engines: {node: '>=0.10.0'}
+
+  hono@4.12.14:
+    resolution: {integrity: sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==}
+    engines: {node: '>=16.9.0'}
+
+  hook-std@4.0.0:
+    resolution: {integrity: sha512-IHI4bEVOt3vRUDJ+bFA9VUJlo7SzvFARPNLw75pqSmAOP2HmTWfFJtPvLBrDrlgjEYXY9zs7SFdHPQaJShkSCQ==}
+    engines: {node: '>=20'}
+
+  hosted-git-info@4.1.0:
+    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
+    engines: {node: '>=10'}
+
+  hosted-git-info@7.0.2:
+    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  hosted-git-info@8.1.0:
+    resolution: {integrity: sha512-Rw/B2DNQaPBICNXEm8balFz9a6WpZrkCGpcWFpy7nCj+NyhSdqXipmfvtmWt9xGfp0wZnBxB+iVpLmQMYt47Tw==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  hosted-git-info@9.0.2:
+    resolution: {integrity: sha512-M422h7o/BR3rmCQ8UHi7cyyMqKltdP9Uo+J2fXK+RSAY+wTcKOIRyhTuKv4qn+DJf3g+PL890AzId5KZpX+CBg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  hpack.js@2.1.6:
+    resolution: {integrity: sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==}
+
+  html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-entities@2.6.0:
+    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  html-escaper@3.0.3:
+    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
+  http-assert@1.5.0:
+    resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
+    engines: {node: '>= 0.8'}
+
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  http-deceiver@1.2.7:
+    resolution: {integrity: sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==}
+
+  http-errors@1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+
+  http-errors@1.8.1:
+    resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
+    engines: {node: '>= 0.6'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-parser-js@0.5.10:
+    resolution: {integrity: sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==}
+
+  http-proxy-agent@5.0.0:
+    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
+    engines: {node: '>= 6'}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  http-proxy-middleware@2.0.9:
+    resolution: {integrity: sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/express': ^4.17.13
+    peerDependenciesMeta:
+      '@types/express':
+        optional: true
+
+  http-proxy-middleware@3.0.5:
+    resolution: {integrity: sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  http-proxy@1.18.1:
+    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
+    engines: {node: '>=8.0.0'}
+
+  http-server@14.1.1:
+    resolution: {integrity: sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  http2-wrapper@1.0.3:
+    resolution: {integrity: sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==}
+    engines: {node: '>=10.19.0'}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  humanize-ms@1.2.1:
+    resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
+
+  hyperdyperid@1.2.0:
+    resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
+    engines: {node: '>=10.18'}
+
+  iconv-corefoundation@1.1.7:
+    resolution: {integrity: sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==}
+    engines: {node: ^8.11.2 || >=10}
+    os: [darwin]
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.1:
+    resolution: {integrity: sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==}
+    engines: {node: '>=0.10.0'}
+
+  icss-utils@5.1.0:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  identity-obj-proxy@3.0.0:
+    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
+    engines: {node: '>=4'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore-walk@8.0.0:
+    resolution: {integrity: sha512-FCeMZT4NiRQGh+YkeKMtWrOmBgWjHjMJ26WQWrRQyoyzqevdaGSakUaJW5xQYmjLlUVk2qUnCjYVBax9EKKg8A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  immutable@5.1.5:
+    resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-from-esm@2.0.0:
+    resolution: {integrity: sha512-YVt14UZCgsX1vZQ3gKjkWVdBdHQ6eu3MPU1TBgL1H5orXe2+jWD006WCPPtOuwlQm10NuzOW5WawiF1Q9veW8g==}
+    engines: {node: '>=18.20'}
+
+  import-local@3.2.0:
+    resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
+  index-to-position@1.2.0:
+    resolution: {integrity: sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw==}
+    engines: {node: '>=18'}
+
+  individual@2.0.0:
+    resolution: {integrity: sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==}
+
+  infer-owner@1.0.4:
+    resolution: {integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@6.0.0:
+    resolution: {integrity: sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  into-stream@7.0.0:
+    resolution: {integrity: sha512-2dYz766i9HprMBasCMvHMuazJ7u4WzhJwo5kb3iPSiW/iRYV6uPari3zHoqZlnuaR7V1bEiNMxikhp37rdBXbw==}
+    engines: {node: '>=12'}
+
+  ip-address@10.1.0:
+    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  ipaddr.js@2.3.0:
+    resolution: {integrity: sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==}
+    engines: {node: '>= 10'}
+
+  iptv-playlist-parser@https://codeload.github.com/4gray/iptv-playlist-parser/tar.gz/38a62d0b7c98f442bfa102ee8e1fe14169ae9386:
+    resolution: {tarball: https://codeload.github.com/4gray/iptv-playlist-parser/tar.gz/38a62d0b7c98f442bfa102ee8e1fe14169ae9386}
+    version: 0.12.2
+
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-ci@3.0.1:
+    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
+    hasBin: true
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@1.0.0:
+    resolution: {integrity: sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww==}
+    engines: {node: '>=0.10.0'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
+  is-function@1.0.2:
+    resolution: {integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==}
+
+  is-generator-fn@2.1.0:
+    resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
+    engines: {node: '>=6'}
+
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@2.0.1:
+    resolution: {integrity: sha512-a1dBeB19NXsf/E0+FHqkagizel/LQw2DjSQpvQrj3zT+jYPpaUCryPnrQajXKFLCMuf4I6FhRpaGtw4lPrG6Eg==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
+  is-invalid-path@0.1.0:
+    resolution: {integrity: sha512-aZMG0T3F34mTg4eTdszcGXx54oiZ4NtHSft3hWNJMGJXUUqdIj3cOZuHcU0nCWWcY3jd7yRe/3AEm3vSNTpBGQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-lambda@1.0.1:
+    resolution: {integrity: sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-network-error@1.3.0:
+    resolution: {integrity: sha512-6oIwpsgRfnDiyEDLMay/GqCl3HoAtH5+RUKW29gYkL0QA+ipzpDLA16yQs7/RHCSu+BwgbJaOUqa4A99qNVQVw==}
+    engines: {node: '>=16'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-obj@3.0.0:
+    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
+    engines: {node: '>=10'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-valid-path@0.1.1:
+    resolution: {integrity: sha512-+kwPrVDu9Ms03L90Qaml+79+6DZHqHyRoANI6IsZJ/g8frhnfchDOBCa0RbQ6/kdHt5CS5OeIEyrYznNuVN+8A==}
+    engines: {node: '>=0.10.0'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
+  is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isbinaryfile@5.0.7:
+    resolution: {integrity: sha512-gnWD14Jh3FzS3CPhF0AxNOJ8CxqeblPTADzI38r0wt8ZyQl5edpy75myt08EG2oKvpyiqSqsx+Wkz9vtkbTqYQ==}
+    engines: {node: '>= 18.0.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@4.0.0:
+    resolution: {integrity: sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==}
+    engines: {node: '>=20'}
+
+  isobject@3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+
+  isomorphic-ws@5.0.0:
+    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
+    peerDependencies:
+      ws: '*'
+
+  issue-parser@7.0.1:
+    resolution: {integrity: sha512-3YZcUUR2Wt1WsapF+S/WiA2WmlW0cWAoPccMqne7AxEBhCdFeTPjfv/Axb8V2gyCgY3nRw+ksZ3xSUX+R47iAg==}
+    engines: {node: ^18.17 || >=20.6.1}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@6.0.3:
+    resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jake@10.9.4:
+    resolution: {integrity: sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  java-properties@1.0.2:
+    resolution: {integrity: sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==}
+    engines: {node: '>= 0.6.0'}
+
+  jest-changed-files@30.2.0:
+    resolution: {integrity: sha512-L8lR1ChrRnSdfeOvTrwZMlnWV8G/LLjQ0nG9MBclwWZidA2N5FviRki0Bvh20WRMOX31/JYvzdqTJrk5oBdydQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-circus@30.2.0:
+    resolution: {integrity: sha512-Fh0096NC3ZkFx05EP2OXCxJAREVxj1BcW/i6EWqqymcgYKWjyyDpral3fMxVcHXg6oZM7iULer9wGRFvfpl+Tg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-cli@30.2.0:
+    resolution: {integrity: sha512-Os9ukIvADX/A9sLt6Zse3+nmHtHaE6hqOsjQtNiugFTbKRHYIYtZXNGNK9NChseXy7djFPjndX1tL0sCTlfpAA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jest-config@30.2.0:
+    resolution: {integrity: sha512-g4WkyzFQVWHtu6uqGmQR4CQxz/CH3yDSlhzXMWzNjDx843gYjReZnMRanjRCq5XZFuQrGDxgUaiYWE8BRfVckA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@types/node': '*'
+      esbuild-register: '>=3.4.0'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      esbuild-register:
+        optional: true
+      ts-node:
+        optional: true
+
+  jest-diff@30.2.0:
+    resolution: {integrity: sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-docblock@30.2.0:
+    resolution: {integrity: sha512-tR/FFgZKS1CXluOQzZvNH3+0z9jXr3ldGSD8bhyuxvlVUwbeLOGynkunvlTMxchC5urrKndYiwCFC0DLVjpOCA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-each@30.2.0:
+    resolution: {integrity: sha512-lpWlJlM7bCUf1mfmuqTA8+j2lNURW9eNafOy99knBM01i5CQeY5UH1vZjgT9071nDJac1M4XsbyI44oNOdhlDQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-environment-jsdom@30.2.0:
+    resolution: {integrity: sha512-zbBTiqr2Vl78pKp/laGBREYzbZx9ZtqPjOK4++lL4BNDhxRnahg51HtoDrk9/VjIy9IthNEWdKVd7H5bqBhiWQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jest-environment-node@30.2.0:
+    resolution: {integrity: sha512-ElU8v92QJ9UrYsKrxDIKCxu6PfNj4Hdcktcn0JX12zqNdqWHB0N+hwOnnBBXvjLd2vApZtuLUGs1QSY+MsXoNA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-haste-map@30.2.0:
+    resolution: {integrity: sha512-sQA/jCb9kNt+neM0anSj6eZhLZUIhQgwDt7cPGjumgLM4rXsfb9kpnlacmvZz3Q5tb80nS+oG/if+NBKrHC+Xw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-leak-detector@30.2.0:
+    resolution: {integrity: sha512-M6jKAjyzjHG0SrQgwhgZGy9hFazcudwCNovY/9HPIicmNSBuockPSedAP9vlPK6ONFJ1zfyH/M2/YYJxOz5cdQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-matcher-utils@30.2.0:
+    resolution: {integrity: sha512-dQ94Nq4dbzmUWkQ0ANAWS9tBRfqCrn0bV9AMYdOi/MHW726xn7eQmMeRTpX2ViC00bpNaWXq+7o4lIQ3AX13Hg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-message-util@30.2.0:
+    resolution: {integrity: sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-mock@30.2.0:
+    resolution: {integrity: sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-pnp-resolver@1.2.3:
+    resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
+    engines: {node: '>=6'}
+    peerDependencies:
+      jest-resolve: '*'
+    peerDependenciesMeta:
+      jest-resolve:
+        optional: true
+
+  jest-preset-angular@15.0.3:
+    resolution: {integrity: sha512-W1OpeQ/tq72ZSGXRvUDktL02QBAWIM5SZPK4KI0zoXNvRGiGhNMbxuaFF7anLi27cojmWHm+TewJQI1Dsm9s6A==}
+    engines: {node: ^18.19.1 || ^20.11.1 || >=22.0.0}
+    peerDependencies:
+      '@angular/compiler-cli': '>=18.0.0 <21.0.0'
+      '@angular/core': '>=18.0.0 <21.0.0'
+      '@angular/platform-browser': '>=18.0.0 <21.0.0'
+      '@angular/platform-browser-dynamic': '>=18.0.0 <21.0.0'
+      jest: ^30.0.0
+      jsdom: '>=26.0.0'
+      typescript: '>=5.5'
+
+  jest-regex-util@30.0.1:
+    resolution: {integrity: sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-resolve-dependencies@30.2.0:
+    resolution: {integrity: sha512-xTOIGug/0RmIe3mmCqCT95yO0vj6JURrn1TKWlNbhiAefJRWINNPgwVkrVgt/YaerPzY3iItufd80v3lOrFJ2w==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-resolve@30.2.0:
+    resolution: {integrity: sha512-TCrHSxPlx3tBY3hWNtRQKbtgLhsXa1WmbJEqBlTBrGafd5fiQFByy2GNCEoGR+Tns8d15GaL9cxEzKOO3GEb2A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-runner@30.2.0:
+    resolution: {integrity: sha512-PqvZ2B2XEyPEbclp+gV6KO/F1FIFSbIwewRgmROCMBo/aZ6J1w8Qypoj2pEOcg3G2HzLlaP6VUtvwCI8dM3oqQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-runtime@30.2.0:
+    resolution: {integrity: sha512-p1+GVX/PJqTucvsmERPMgCPvQJpFt4hFbM+VN3n8TMo47decMUcJbt+rgzwrEme0MQUA/R+1de2axftTHkKckg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-snapshot@30.2.0:
+    resolution: {integrity: sha512-5WEtTy2jXPFypadKNpbNkZ72puZCa6UjSr/7djeecHWOu7iYhSXSnHScT8wBz3Rn8Ena5d5RYRcsyKIeqG1IyA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-util@29.7.0:
+    resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-util@30.2.0:
+    resolution: {integrity: sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-validate@30.2.0:
+    resolution: {integrity: sha512-FBGWi7dP2hpdi8nBoWxSsLvBFewKAg0+uSQwBaof4Y4DPgBabXgpSYC5/lR7VmnIlSpASmCi/ntRWPbv7089Pw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-watcher@30.2.0:
+    resolution: {integrity: sha512-PYxa28dxJ9g777pGm/7PrbnMeA0Jr7osHP9bS7eJy9DuAjMgdGtxgf0uKMyoIsTWAkIbUW5hSDdJ3urmgXBqxg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-worker@27.5.1:
+    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
+    engines: {node: '>= 10.13.0'}
+
+  jest-worker@29.7.0:
+    resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-worker@30.2.0:
+    resolution: {integrity: sha512-0Q4Uk8WF7BUwqXHuAjc23vmopWJw5WH7w2tqBoUOZpOjW/ZnR44GXXd1r82RvnmI2GZge3ivrYXk/BE2+VtW2g==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest@30.2.0:
+    resolution: {integrity: sha512-F26gjC0yWN8uAA5m5Ss8ZQf5nDHWGlN/xWZIh8S5SRbsEKBovwZhxGd6LJlbZYxBgCYOtreSUyb8hpXyGC5O4A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jose@6.1.3:
+    resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@3.14.2:
+    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+    hasBin: true
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-better-errors@1.0.2:
+    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-parse-even-better-errors@5.0.0:
+    resolution: {integrity: sha512-ZF1nxZ28VhQouRWhUcVlUIN3qwSgPuswK05s/HIaoetAoE/9tngVmCHjSxmSQPav1nd+lPtTL0YZ/2AFdR/iYQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json-stringify-safe@5.0.1:
+    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonc-eslint-parser@2.4.2:
+    resolution: {integrity: sha512-1e4qoRgnn448pRuMvKGsFFymUCquZV0mpGgOyIKNgD3JVDTsVJyRBGH/Fm0tBb8WsWGgmB1mDe6/yJMQM37DUA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  jsonc-parser@3.2.0:
+    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
+
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  keycode@2.2.1:
+    resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
+
+  keygrip@1.1.0:
+    resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
+    engines: {node: '>= 0.6'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  koa-compose@4.1.0:
+    resolution: {integrity: sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==}
+
+  koa@3.0.3:
+    resolution: {integrity: sha512-MeuwbCoN1daWS32/Ni5qkzmrOtQO2qrnfdxDHjrm6s4b59yG4nexAJ0pTEFyzjLp0pBVO80CZp0vW8Ze30Ebow==}
+    engines: {node: '>= 18'}
+
+  launch-editor@2.12.0:
+    resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
+
+  lazy-val@1.0.5:
+    resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
+
+  less-loader@11.1.4:
+    resolution: {integrity: sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+
+  less@4.5.1:
+    resolution: {integrity: sha512-UKgI3/KON4u6ngSsnDADsUERqhZknsVZbnuzlRZXLQCmfC/MDld42fTydUE9B+Mla1AL6SJ/Pp6SlEFi/AVGfw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  leven@3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  license-webpack-plugin@4.0.2:
+    resolution: {integrity: sha512-771TFWFD70G1wLTC4oU2Cw4qvtmNrIw+wRvBtn+okgHl7slJVi7zfNcdmqDL72BojM30VNJ2UHylr1o77U37Jw==}
+    peerDependencies:
+      webpack: '*'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lines-and-columns@2.0.3:
+    resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  listr2@9.0.5:
+    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
+    engines: {node: '>=20.0.0'}
+
+  lmdb@3.4.4:
+    resolution: {integrity: sha512-+Y2DqovevLkb6DrSQ6SXTYLEd6kvlRbhsxzgJrk7BUfOVA/mt21ak6pFDZDKxiAczHMWxrb02kXBTSTIA0O94A==}
+    hasBin: true
+
+  load-json-file@4.0.0:
+    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
+    engines: {node: '>=4'}
+
+  loader-runner@4.3.1:
+    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
+    engines: {node: '>=6.11.5'}
+
+  loader-utils@2.0.4:
+    resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
+    engines: {node: '>=8.9.0'}
+
+  locate-path@2.0.0:
+    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
+    engines: {node: '>=4'}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
+  lodash.capitalize@4.2.1:
+    resolution: {integrity: sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw==}
+
+  lodash.clonedeepwith@4.5.0:
+    resolution: {integrity: sha512-QRBRSxhbtsX1nc0baxSkkK5WlVTTm/s48DSukcGcWZwIyI8Zz+lB+kFiELJXtzfH4Aj6kMWQ1VWW4U5uUDgZMA==}
+
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.escaperegexp@4.1.2:
+    resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash.uniqby@4.7.0:
+    resolution: {integrity: sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==}
+
+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
+  log-symbols@7.0.1:
+    resolution: {integrity: sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==}
+    engines: {node: '>=18'}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  log4js@6.9.1:
+    resolution: {integrity: sha512-1somDdy9sChrr9/f4UlzhdaGfDR2c/SaD2a4T7qEkG4jTS57/B3qmnjLYePwQ8cqWnUHZI0iAKxMBpCZICiZ2g==}
+    engines: {node: '>=8.0'}
+
+  long-timeout@0.1.1:
+    resolution: {integrity: sha512-BFRuQUqc7x2NWxfJBCyUrN8iYUYznzL9JROmRz1gZ6KlOIgmoD+njPVbb+VNn2nGMKggMsK79iUNErillsrx7w==}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  lowercase-keys@2.0.0:
+    resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
+    engines: {node: '>=8'}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@11.2.4:
+    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  luxon@3.7.2:
+    resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
+    engines: {node: '>=12'}
+
+  m3u8-parser@4.8.0:
+    resolution: {integrity: sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==}
+
+  m3u8-parser@7.2.0:
+    resolution: {integrity: sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==}
+
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.5.2:
+    resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==}
+
+  make-asynchronous@1.0.1:
+    resolution: {integrity: sha512-T9BPOmEOhp6SmV25SwLVcHK4E6JyG/coH3C6F1NjNXSziv/fd4GmsqMk8YR6qpPOswfaOCApSNkZv6fxoaYFcQ==}
+    engines: {node: '>=18'}
+
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  make-fetch-happen@10.2.1:
+    resolution: {integrity: sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  make-fetch-happen@15.0.3:
+    resolution: {integrity: sha512-iyyEpDty1mwW3dGlYXAJqC/azFn5PPvgKVwXayOGBSmKLxhKZ9fg4qIan2ePpp1vJIwfFiO34LAPZgq9SZW9Aw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  makeerror@1.0.12:
+    resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
+
+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  marked-terminal@7.3.0:
+    resolution: {integrity: sha512-t4rBvPsHc57uE/2nJOLmMbZCQ4tgAccAED3ngXQqW6g+TxA488JzJ+FK3lQkzBQOI1mRV/r/Kq+1ZlJ4D0owQw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      marked: '>=1 <16'
+
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
+  matcher@3.0.0:
+    resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
+    engines: {node: '>=10'}
+
+  material-design-icons-iconfont@6.7.0:
+    resolution: {integrity: sha512-lSj71DgVv20kO0kGbs42icDzbRot61gEDBLQACzkUuznRQBUYmbxzEkGU6dNBb5fRWHMaScYlAXX96HQ4/cJWA==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-definitions@6.0.0:
+    resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  memfs@3.5.3:
+    resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
+    engines: {node: '>= 4.0.0'}
+
+  memfs@4.51.1:
+    resolution: {integrity: sha512-Eyt3XrufitN2ZL9c/uIRMyDwXanLI88h/L3MoWqNY747ha3dMR9dWqp8cRT5ntjZ0U1TNuq4U91ZXK0sMBjYOQ==}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  merge-descriptors@1.0.3:
+    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mime@2.6.0:
+    resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
+    engines: {node: '>=4.0.0'}
+    hasBin: true
+
+  mime@4.1.0:
+    resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  mimic-response@1.0.1:
+    resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
+    engines: {node: '>=4'}
+
+  mimic-response@3.1.0:
+    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
+    engines: {node: '>=10'}
+
+  min-document@2.19.2:
+    resolution: {integrity: sha512-8S5I8db/uZN8r9HSLFVWPdJCvYOejMcEC82VIzNUc6Zkklf/d1gg2psfE79/vyhWOj4+J8MtwmoOz3TmvaGu5A==}
+
+  mini-css-extract-plugin@2.4.7:
+    resolution: {integrity: sha512-euWmddf0sk9Nv1O0gfeeUAvAkoSlWncNLF77C0TP2+WoPvy8mAHKOzMajcCz2dzvyt3CNgxb1obIEVFIRxaipg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+
+  minimalistic-assert@1.0.1:
+    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
+
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
+    engines: {node: 20 || >=22}
+
+  minimatch@10.2.2:
+    resolution: {integrity: sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+
+  minimatch@5.1.9:
+    resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
+    engines: {node: '>=10'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass-collect@1.0.2:
+    resolution: {integrity: sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==}
+    engines: {node: '>= 8'}
+
+  minipass-collect@2.0.1:
+    resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass-fetch@2.1.2:
+    resolution: {integrity: sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  minipass-fetch@5.0.1:
+    resolution: {integrity: sha512-yHK8pb0iCGat0lDrs/D6RZmCdaBT64tULXjdxjSMAqoDi18Q3qKEUTHypHQZQd9+FYpIS+lkvpq6C/R6SbUeRw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  minipass-flush@1.0.5:
+    resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
+    engines: {node: '>= 8'}
+
+  minipass-pipeline@1.2.4:
+    resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
+    engines: {node: '>=8'}
+
+  minipass-sized@1.0.3:
+    resolution: {integrity: sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==}
+    engines: {node: '>=8'}
+
+  minipass-sized@2.0.0:
+    resolution: {integrity: sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==}
+    engines: {node: '>=8'}
+
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
+  minizlib@3.1.0:
+    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
+    engines: {node: '>= 18'}
+
+  mkdirp-classic@0.5.3:
+    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
+
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  mpd-parser@0.22.0:
+    resolution: {integrity: sha512-P2GSZGTlud9zGr1IU/wd+dwK5v+cdeHd9ys+8y0Yo4kADfkKyYET37oIvOoQiLGp6k7CTNO7navdyV2mfG0yzw==}
+    hasBin: true
+
+  mpd-parser@0.22.1:
+    resolution: {integrity: sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==}
+    hasBin: true
+
+  mpd-parser@1.3.1:
+    resolution: {integrity: sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==}
+    hasBin: true
+
+  mpegts.js@1.8.0:
+    resolution: {integrity: sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==}
+
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  msgpackr-extract@3.0.3:
+    resolution: {integrity: sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==}
+    hasBin: true
+
+  msgpackr@1.11.8:
+    resolution: {integrity: sha512-bC4UGzHhVvgDNS7kn9tV8fAucIYUBuGojcaLiz7v+P63Lmtm0Xeji8B/8tYKddALXxJLpwIeBmUN3u64C4YkRA==}
+
+  multicast-dns@7.2.5:
+    resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
+    hasBin: true
+
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  mux.js@6.0.1:
+    resolution: {integrity: sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==}
+    engines: {node: '>=8', npm: '>=5'}
+    hasBin: true
+
+  mux.js@7.1.0:
+    resolution: {integrity: sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==}
+    engines: {node: '>=8', npm: '>=5'}
+    hasBin: true
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  napi-build-utils@2.0.0:
+    resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
+
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@0.6.4:
+    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  neotraverse@0.6.18:
+    resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
+    engines: {node: '>= 10'}
+
+  nerf-dart@1.0.0:
+    resolution: {integrity: sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g==}
+
+  ng-mocks@14.15.1:
+    resolution: {integrity: sha512-qytFlHgR8YkyH2Hsc6ssGHf817pku6UvV1vpKelh9K07+2IYxfgZJrAyTAGmwH0+9i9hjtdoTrZSP5A4KdQu4Q==}
+    peerDependencies:
+      '@angular/common': 5.0.0-alpha - 5 || 6.0.0-alpha - 6 || 7.0.0-alpha - 7 || 8.0.0-alpha - 8 || 9.0.0-alpha - 9 || 10.0.0-alpha - 10 || 11.0.0-alpha - 11 || 12.0.0-alpha - 12 || 13.0.0-alpha - 13 || 14.0.0-alpha - 14 || 15.0.0-alpha - 15 || 16.0.0-alpha - 16 || 17.0.0-alpha - 17 || 18.0.0-alpha - 18 || 19.0.0-alpha - 19 || 20.0.0-alpha - 20
+      '@angular/core': 5.0.0-alpha - 5 || 6.0.0-alpha - 6 || 7.0.0-alpha - 7 || 8.0.0-alpha - 8 || 9.0.0-alpha - 9 || 10.0.0-alpha - 10 || 11.0.0-alpha - 11 || 12.0.0-alpha - 12 || 13.0.0-alpha - 13 || 14.0.0-alpha - 14 || 15.0.0-alpha - 15 || 16.0.0-alpha - 16 || 17.0.0-alpha - 17 || 18.0.0-alpha - 18 || 19.0.0-alpha - 19 || 20.0.0-alpha - 20
+      '@angular/forms': 5.0.0-alpha - 5 || 6.0.0-alpha - 6 || 7.0.0-alpha - 7 || 8.0.0-alpha - 8 || 9.0.0-alpha - 9 || 10.0.0-alpha - 10 || 11.0.0-alpha - 11 || 12.0.0-alpha - 12 || 13.0.0-alpha - 13 || 14.0.0-alpha - 14 || 15.0.0-alpha - 15 || 16.0.0-alpha - 16 || 17.0.0-alpha - 17 || 18.0.0-alpha - 18 || 19.0.0-alpha - 19 || 20.0.0-alpha - 20
+      '@angular/platform-browser': 5.0.0-alpha - 5 || 6.0.0-alpha - 6 || 7.0.0-alpha - 7 || 8.0.0-alpha - 8 || 9.0.0-alpha - 9 || 10.0.0-alpha - 10 || 11.0.0-alpha - 11 || 12.0.0-alpha - 12 || 13.0.0-alpha - 13 || 14.0.0-alpha - 14 || 15.0.0-alpha - 15 || 16.0.0-alpha - 16 || 17.0.0-alpha - 17 || 18.0.0-alpha - 18 || 19.0.0-alpha - 19 || 20.0.0-alpha - 20
+
+  ngx-indexed-db@21.0.0:
+    resolution: {integrity: sha512-781n0P4ZWt0CegInpvQ7WB2Z9Z9A4Pi3GKOUuAfsKFof4ZSv85g05+IXkSx+h3jBIibCuNWcQd77VLj84xLBQA==}
+    peerDependencies:
+      '@angular/common': '>=10.0.6 < 21.0.0'
+      '@angular/core': '>=10.0.6 < 21.0.0'
+
+  ngx-skeleton-loader@11.3.0:
+    resolution: {integrity: sha512-MLm5shgXGiCA1W5NEqct6glBFx2AEgEKbk8pDyY15BsZ2zTGUwa5jw4pe6nJdrCj6xcl/d9oFTinQHrO0q+3RA==}
+    peerDependencies:
+      '@angular/common': '>=19.0.0'
+      '@angular/core': '>=19.0.0'
+
+  nlcst-to-string@4.0.0:
+    resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
+
+  node-abi@3.85.0:
+    resolution: {integrity: sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==}
+    engines: {node: '>=10'}
+
+  node-abort-controller@3.1.1:
+    resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
+
+  node-addon-api@1.7.2:
+    resolution: {integrity: sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==}
+
+  node-addon-api@6.1.0:
+    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-api-version@0.2.1:
+    resolution: {integrity: sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==}
+
+  node-emoji@2.2.0:
+    resolution: {integrity: sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw==}
+    engines: {node: '>=18'}
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
+  node-forge@1.4.0:
+    resolution: {integrity: sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==}
+    engines: {node: '>= 6.13.0'}
+
+  node-gyp-build-optional-packages@5.2.2:
+    resolution: {integrity: sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==}
+    hasBin: true
+
+  node-gyp@12.2.0:
+    resolution: {integrity: sha512-q23WdzrQv48KozXlr0U1v9dwO/k59NHeSzn6loGcasyf0UnSrtzs8kRxM+mfwJSf0DkX0s43hcqgnSO4/VNthQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+    hasBin: true
+
+  node-gyp@9.4.1:
+    resolution: {integrity: sha512-OQkWKbjQKbGkMf/xqI1jjy3oCTgMKJac58G2+bjZb3fza6gW2YrCSdMQYaoTb70crvE//Gngr4f0AgVHmqHvBQ==}
+    engines: {node: ^12.13 || ^14.13 || >=16}
+    hasBin: true
+
+  node-int64@0.4.0:
+    resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
+
+  node-machine-id@1.1.12:
+    resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
+
+  node-mock-http@1.0.4:
+    resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  node-schedule@2.1.1:
+    resolution: {integrity: sha512-OXdegQq03OmXEjt2hZP33W2YPs/E5BcFQks46+G2gAxs4gHOIVD1u7EqlYLYSKsaIpyKCK9Gbk0ta1/gjRSMRQ==}
+    engines: {node: '>=6'}
+
+  nopt@6.0.0:
+    resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    hasBin: true
+
+  nopt@9.0.0:
+    resolution: {integrity: sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+    hasBin: true
+
+  normalize-package-data@6.0.2:
+    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-url@6.1.0:
+    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
+    engines: {node: '>=10'}
+
+  normalize-url@8.1.1:
+    resolution: {integrity: sha512-JYc0DPlpGWB40kH5g07gGTrYuMqV653k3uBKY6uITPWds3M0ov3GaWGp9lbE3Bzngx8+XkfzgvASb9vk9JDFXQ==}
+    engines: {node: '>=14.16'}
+
+  npm-bundled@5.0.0:
+    resolution: {integrity: sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-install-checks@8.0.0:
+    resolution: {integrity: sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-normalize-package-bin@5.0.0:
+    resolution: {integrity: sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-package-arg@13.0.2:
+    resolution: {integrity: sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-packlist@10.0.3:
+    resolution: {integrity: sha512-zPukTwJMOu5X5uvm0fztwS5Zxyvmk38H/LfidkOMt3gbZVCyro2cD/ETzwzVPcWZA3JOyPznfUN/nkyFiyUbxg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-pick-manifest@11.0.3:
+    resolution: {integrity: sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-registry-fetch@19.1.1:
+    resolution: {integrity: sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  npm@10.9.4:
+    resolution: {integrity: sha512-OnUG836FwboQIbqtefDNlyR0gTHzIfwRfE3DuiNewBvnMnWEpB0VEXwBlFVgqpNzIgYo/MHh3d2Hel/pszapAA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+    bundledDependencies:
+      - '@isaacs/string-locale-compare'
+      - '@npmcli/arborist'
+      - '@npmcli/config'
+      - '@npmcli/fs'
+      - '@npmcli/map-workspaces'
+      - '@npmcli/package-json'
+      - '@npmcli/promise-spawn'
+      - '@npmcli/redact'
+      - '@npmcli/run-script'
+      - '@sigstore/tuf'
+      - abbrev
+      - archy
+      - cacache
+      - chalk
+      - ci-info
+      - cli-columns
+      - fastest-levenshtein
+      - fs-minipass
+      - glob
+      - graceful-fs
+      - hosted-git-info
+      - ini
+      - init-package-json
+      - is-cidr
+      - json-parse-even-better-errors
+      - libnpmaccess
+      - libnpmdiff
+      - libnpmexec
+      - libnpmfund
+      - libnpmhook
+      - libnpmorg
+      - libnpmpack
+      - libnpmpublish
+      - libnpmsearch
+      - libnpmteam
+      - libnpmversion
+      - make-fetch-happen
+      - minimatch
+      - minipass
+      - minipass-pipeline
+      - ms
+      - node-gyp
+      - nopt
+      - normalize-package-data
+      - npm-audit-report
+      - npm-install-checks
+      - npm-package-arg
+      - npm-pick-manifest
+      - npm-profile
+      - npm-registry-fetch
+      - npm-user-validate
+      - p-map
+      - pacote
+      - parse-conflict-json
+      - proc-log
+      - qrcode-terminal
+      - read
+      - semver
+      - spdx-expression-parse
+      - ssri
+      - supports-color
+      - tar
+      - text-table
+      - tiny-relative-date
+      - treeverse
+      - validate-npm-package-name
+      - which
+      - write-file-atomic
+
+  npmlog@6.0.2:
+    resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  nwsapi@2.2.23:
+    resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
+
+  nx-electron@21.0.1:
+    resolution: {integrity: sha512-9+pyOdsW92by/fzxqdN6QiIns12ctGooH4e8O4vCIcrYuWJARPydd0XXi6zeGE3oyUTv5CZS13S3i7G3iMUuDg==}
+    peerDependencies:
+      '@nx/workspace': ^21
+      electron: '*'
+
+  nx@22.5.1:
+    resolution: {integrity: sha512-KIQqOSdoshkav9JuoH/+Vp42niA5MTRtACupe+q8CaB7bHiLsWr5nctQVC7ul3NauAmsoqNWH7t5CIi8KgrPIQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc-node/register': 1.11.1
+      '@swc/core': 1.15.8
+    peerDependenciesMeta:
+      '@swc-node/register':
+        optional: true
+      '@swc/core':
+        optional: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  obuf@1.1.2:
+    resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
+
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  on-headers@1.1.0:
+    resolution: {integrity: sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.4:
+    resolution: {integrity: sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==}
+
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
+  opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+
+  option-validator@2.0.6:
+    resolution: {integrity: sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@5.3.0:
+    resolution: {integrity: sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==}
+    engines: {node: '>=10'}
+
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  ora@9.0.0:
+    resolution: {integrity: sha512-m0pg2zscbYgWbqRR6ABga5c3sZdEon7bSgjnlXC64kxtxLOyjRcbbUkLj7HFyy/FTD+P2xdBWu8snGhYI0jc4A==}
+    engines: {node: '>=20'}
+
+  ordered-binary@1.6.1:
+    resolution: {integrity: sha512-QkCdPooczexPLiXIrbVOPYkR3VO3T6v2OyKRkR1Xbhpy7/LAVXwahnRCgRp78Oe/Ehf0C/HATAxfSr6eA1oX+w==}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  oxc-resolver@11.17.1:
+    resolution: {integrity: sha512-pyRXK9kH81zKlirHufkFhOFBZRks8iAMLwPH8gU7lvKFiuzUH9L8MxDEllazwOb8fjXMcWjY1PMDfMJ2/yh5cw==}
+
+  p-cancelable@2.1.1:
+    resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
+    engines: {node: '>=8'}
+
+  p-each-series@3.0.0:
+    resolution: {integrity: sha512-lastgtAdoH9YaLyDa5i5z64q+kzOcQHsQ5SsZJD3q0VEyI8mq872S3geuNbRUQLVAE9siMfgKrpj7MloKFHruw==}
+    engines: {node: '>=12'}
+
+  p-event@6.0.1:
+    resolution: {integrity: sha512-Q6Bekk5wpzW5qIyUP4gdMEujObYstZl6DMMOSenwBvV0BlE5LkDwkjs5yHbZmdCEq2o4RJx4tE1vwxFVf2FG1w==}
+    engines: {node: '>=16.17'}
+
+  p-filter@4.1.0:
+    resolution: {integrity: sha512-37/tPdZ3oJwHaS3gNJdenCDB3Tz26i9sjhnguBtvN0vYlRIiDNnvTWkuh+0hETV9rLPdJ3rlL3yVOYPIAnM8rw==}
+    engines: {node: '>=18'}
+
+  p-is-promise@3.0.0:
+    resolution: {integrity: sha512-Wo8VsW4IRQSKVXsJCn7TomUaVtyfjVDn3nUP7kE967BQk0CwFpdbZs0X0uk5sW9mkBa9eNM7hCMaG93WUAwxYQ==}
+    engines: {node: '>=8'}
+
+  p-limit@1.3.0:
+    resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
+    engines: {node: '>=4'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-limit@6.2.0:
+    resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==}
+    engines: {node: '>=18'}
+
+  p-locate@2.0.0:
+    resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
+    engines: {node: '>=4'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-map@4.0.0:
+    resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
+    engines: {node: '>=10'}
+
+  p-map@7.0.4:
+    resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
+    engines: {node: '>=18'}
+
+  p-queue@8.1.1:
+    resolution: {integrity: sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==}
+    engines: {node: '>=18'}
+
+  p-reduce@2.1.0:
+    resolution: {integrity: sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==}
+    engines: {node: '>=8'}
+
+  p-reduce@3.0.0:
+    resolution: {integrity: sha512-xsrIUgI0Kn6iyDYm9StOpOeK29XM1aboGji26+QEortiFST1hGZaUQOLhtEbqHErPpGW/aSz6allwK2qcptp0Q==}
+    engines: {node: '>=12'}
+
+  p-retry@6.2.1:
+    resolution: {integrity: sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==}
+    engines: {node: '>=16.17'}
+
+  p-timeout@6.1.4:
+    resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==}
+    engines: {node: '>=14.16'}
+
+  p-try@1.0.0:
+    resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
+    engines: {node: '>=4'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
+  pacote@21.0.4:
+    resolution: {integrity: sha512-RplP/pDW0NNNDh3pnaoIWYPvNenS7UqMbXyvMqJczosiFWTeGGwJC2NQBLqKf4rGLFfwCOnntw1aEp9Jiqm1MA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+    hasBin: true
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse-json@4.0.0:
+    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
+    engines: {node: '>=4'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-json@8.3.0:
+    resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==}
+    engines: {node: '>=18'}
+
+  parse-latin@7.0.0:
+    resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
+  parse-passwd@1.0.0:
+    resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
+    engines: {node: '>=0.10.0'}
+
+  parse5-html-rewriting-stream@8.0.0:
+    resolution: {integrity: sha512-wzh11mj8KKkno1pZEu+l2EVeWsuKDfR5KNWZOTsslfUX8lPDZx77m9T0kIoAVkFtD1nx6YF8oh4BnPHvxMtNMw==}
+
+  parse5-htmlparser2-tree-adapter@6.0.1:
+    resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
+
+  parse5-sax-parser@8.0.0:
+    resolution: {integrity: sha512-/dQ8UzHZwnrzs3EvDj6IkKrD/jIZyTlB+8XrHJvcjNgRdmWruNdN9i9RK/JtxakmlUdPwKubKPTCqvbTgzGhrw==}
+
+  parse5@4.0.0:
+    resolution: {integrity: sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==}
+
+  parse5@5.1.1:
+    resolution: {integrity: sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==}
+
+  parse5@6.0.1:
+    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-exists@3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
+
+  path-to-regexp@0.1.13:
+    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
+
+  path-to-regexp@8.3.0:
+    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  path-type@6.0.0:
+    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
+    engines: {node: '>=18'}
+
+  pe-library@0.4.1:
+    resolution: {integrity: sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
+  piccolore@0.1.3:
+    resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pify@3.0.0:
+    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
+    engines: {node: '>=4'}
+
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  piscina@5.1.4:
+    resolution: {integrity: sha512-7uU4ZnKeQq22t9AsmHGD2w4OYQGonwFnTypDypaWi7Qr2EvQIFVtG8J5D/3bE7W123Wdc9+v4CZDu5hJXVCtBg==}
+    engines: {node: '>=20.x'}
+
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
+  pkcs7@1.0.4:
+    resolution: {integrity: sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==}
+    hasBin: true
+
+  pkg-conf@2.1.0:
+    resolution: {integrity: sha512-C+VUP+8jis7EsQZIhDYmS5qlNtjv2yP4SNtjXK9AP1ZcTRlnSfuumaTnRfYZnYgUUYVIKqL0fRvmUGDV2fmp6g==}
+    engines: {node: '>=4'}
+
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
+  pkg-dir@7.0.0:
+    resolution: {integrity: sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==}
+    engines: {node: '>=14.16'}
+
+  playwright-core@1.57.0:
+    resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.57.0:
+    resolution: {integrity: sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  plist@3.1.0:
+    resolution: {integrity: sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==}
+    engines: {node: '>=10.4.0'}
+
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
+  portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
+    engines: {node: '>= 10.12'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-calc@9.0.1:
+    resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.2.2
+
+  postcss-colormin@6.1.0:
+    resolution: {integrity: sha512-x9yX7DOxeMAR+BgGVnNSAxmAj98NX/YxEMNFP+SDCEeNLb2r3i6Hh1ksMsnW8Ub5SLCpbescQqn9YEbE9554Sw==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-convert-values@6.1.0:
+    resolution: {integrity: sha512-zx8IwP/ts9WvUM6NkVSkiU902QZL1bwPhaVaLynPtCsOTqp+ZKbNi+s6XJg3rfqpKGA/oc7Oxk5t8pOQJcwl/w==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-comments@6.0.2:
+    resolution: {integrity: sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-duplicates@6.0.3:
+    resolution: {integrity: sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-empty@6.0.3:
+    resolution: {integrity: sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-overridden@6.0.2:
+    resolution: {integrity: sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-import@14.1.0:
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss-loader@6.2.1:
+    resolution: {integrity: sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^5.0.0
+
+  postcss-loader@8.2.0:
+    resolution: {integrity: sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+
+  postcss-merge-longhand@6.0.5:
+    resolution: {integrity: sha512-5LOiordeTfi64QhICp07nzzuTDjNSO8g5Ksdibt44d+uvIIAE1oZdRn8y/W5ZtYgRH/lnLDlvi9F8btZcVzu3w==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-merge-rules@6.1.1:
+    resolution: {integrity: sha512-KOdWF0gju31AQPZiD+2Ar9Qjowz1LTChSjFFbS+e2sFgc4uHOp3ZvVX4sNeTlk0w2O31ecFGgrFzhO0RSWbWwQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-font-values@6.1.0:
+    resolution: {integrity: sha512-gklfI/n+9rTh8nYaSJXlCo3nOKqMNkxuGpTn/Qm0gstL3ywTr9/WRKznE+oy6fvfolH6dF+QM4nCo8yPLdvGJg==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-gradients@6.0.3:
+    resolution: {integrity: sha512-4KXAHrYlzF0Rr7uc4VrfwDJ2ajrtNEpNEuLxFgwkhFZ56/7gaE4Nr49nLsQDZyUe+ds+kEhf+YAUolJiYXF8+Q==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-params@6.1.0:
+    resolution: {integrity: sha512-bmSKnDtyyE8ujHQK0RQJDIKhQ20Jq1LYiez54WiaOoBtcSuflfK3Nm596LvbtlFcpipMjgClQGyGr7GAs+H1uA==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-selectors@6.0.4:
+    resolution: {integrity: sha512-L8dZSwNLgK7pjTto9PzWRoMbnLq5vsZSTu8+j1P/2GB8qdtGQfn+K1uSvFgYvgh83cbyxT5m43ZZhUMTJDSClQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-modules-extract-imports@3.1.0:
+    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules-local-by-default@4.2.0:
+    resolution: {integrity: sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules-scope@3.2.1:
+    resolution: {integrity: sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-modules-values@4.0.0:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-normalize-charset@6.0.2:
+    resolution: {integrity: sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-display-values@6.0.2:
+    resolution: {integrity: sha512-8H04Mxsb82ON/aAkPeq8kcBbAtI5Q2a64X/mnRRfPXBq7XeogoQvReqxEfc0B4WPq1KimjezNC8flUtC3Qz6jg==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-positions@6.0.2:
+    resolution: {integrity: sha512-/JFzI441OAB9O7VnLA+RtSNZvQ0NCFZDOtp6QPFo1iIyawyXg0YI3CYM9HBy1WvwCRHnPep/BvI1+dGPKoXx/Q==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-repeat-style@6.0.2:
+    resolution: {integrity: sha512-YdCgsfHkJ2jEXwR4RR3Tm/iOxSfdRt7jplS6XRh9Js9PyCR/aka/FCb6TuHT2U8gQubbm/mPmF6L7FY9d79VwQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-string@6.0.2:
+    resolution: {integrity: sha512-vQZIivlxlfqqMp4L9PZsFE4YUkWniziKjQWUtsxUiVsSSPelQydwS8Wwcuw0+83ZjPWNTl02oxlIvXsmmG+CiQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-timing-functions@6.0.2:
+    resolution: {integrity: sha512-a+YrtMox4TBtId/AEwbA03VcJgtyW4dGBizPl7e88cTFULYsprgHWTbfyjSLyHeBcK/Q9JhXkt2ZXiwaVHoMzA==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-unicode@6.1.0:
+    resolution: {integrity: sha512-QVC5TQHsVj33otj8/JD869Ndr5Xcc/+fwRh4HAsFsAeygQQXm+0PySrKbr/8tkDKzW+EVT3QkqZMfFrGiossDg==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-url@6.0.2:
+    resolution: {integrity: sha512-kVNcWhCeKAzZ8B4pv/DnrU1wNh458zBNp8dh4y5hhxih5RZQ12QWMuQrDgPRw3LRl8mN9vOVfHl7uhvHYMoXsQ==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-whitespace@6.0.2:
+    resolution: {integrity: sha512-sXZ2Nj1icbJOKmdjXVT9pnyHQKiSAyuNQHSgRCUgThn2388Y9cGVDR+E9J9iAYbSbLHI+UUwLVl1Wzco/zgv0Q==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-ordered-values@6.0.2:
+    resolution: {integrity: sha512-VRZSOB+JU32RsEAQrO94QPkClGPKJEL/Z9PCBImXMhIeK5KAYo6slP/hBYlLgrCjFxyqvn5VC81tycFEDBLG1Q==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-reduce-initial@6.1.0:
+    resolution: {integrity: sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-reduce-transforms@6.0.2:
+    resolution: {integrity: sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss-svgo@6.0.3:
+    resolution: {integrity: sha512-dlrahRmxP22bX6iKEjOM+c8/1p+81asjKT+V5lrgOH944ryx/OHpclnIbGsKVd3uWOXFLYJwCVf0eEkJGvO96g==}
+    engines: {node: ^14 || ^16 || >= 18}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-unique-selectors@6.0.4:
+    resolution: {integrity: sha512-K38OCaIrO8+PzpArzkLKB42dSARtC2tmG6PvD4b1o1Q2E9Os8jzfWFfSy/rixsHwohtsDdFtAWGjFVFUdwYaMg==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prebuild-install@7.1.3:
+    resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
+    engines: {node: '>=10'}
+    deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
+    hasBin: true
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-format@30.2.0:
+    resolution: {integrity: sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  proc-log@2.0.1:
+    resolution: {integrity: sha512-Kcmo2FhfDTXdcbfDH76N7uBYHINxc/8GW7UAVuVP9I+Va3uHSerrnKV6dLooga/gh7GlgzuCCr/eoldnL1muGw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  proc-log@6.1.0:
+    resolution: {integrity: sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
+  promise-inflight@1.0.1:
+    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+
+  promise-retry@2.0.1:
+    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
+    engines: {node: '>=10'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
+  prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pupa@3.3.0:
+    resolution: {integrity: sha512-LjgDO2zPtoXP2wJpDjZrGdojii1uqO0cnwKoIoUzkfS98HDmbeiGmYiXo3lXeFlq2xvne1QFQhwYXSUCLKtEuA==}
+    engines: {node: '>=12.20'}
+
+  pure-rand@7.0.1:
+    resolution: {integrity: sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==}
+
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  qs@6.14.1:
+    resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
+    engines: {node: '>=0.6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  quick-lru@5.1.1:
+    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+    engines: {node: '>=10'}
+
+  radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
+  rambda@9.4.2:
+    resolution: {integrity: sha512-++euMfxnl7OgaEKwXh9QqThOjMeta2HH001N1v4mYQzBjJBnmXBh2BCK6dZAbICFVXOFUVD3xFG0R3ZPU0mxXw==}
+
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@2.5.3:
+    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
+    engines: {node: '>= 0.8'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
+    peerDependencies:
+      react: ^19.2.3
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
+    engines: {node: '>=0.10.0'}
+
+  read-binary-file-arch@1.0.6:
+    resolution: {integrity: sha512-BNg9EN3DD3GsDXX7Aa8O4p92sryjkmzYYgmgTAc6CA4uGLEDzFfxOxugu21akOxpcXHiEgsYkC6nPsQvLLLmEg==}
+    hasBin: true
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  read-package-up@11.0.0:
+    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
+    engines: {node: '>=18'}
+
+  read-pkg@9.0.1:
+    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
+    engines: {node: '>=18'}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
+  reflect-metadata@0.2.2:
+    resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regenerate-unicode-properties@10.2.2:
+    resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
+    engines: {node: '>=4'}
+
+  regenerate@1.4.2:
+    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  regexpu-core@6.4.0:
+    resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==}
+    engines: {node: '>=4'}
+
+  registry-auth-token@5.1.0:
+    resolution: {integrity: sha512-GdekYuwLXLxMuFTwAPg5UKGLW/UXzQrZvH/Zj791BQif5T05T0RsaLfHc9q3ZOKi7n+BoprPD9mJ0O0k4xzUlw==}
+    engines: {node: '>=14'}
+
+  regjsgen@0.8.0:
+    resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
+
+  regjsparser@0.13.0:
+    resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
+    hasBin: true
+
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-mdx@3.1.1:
+    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-smartypants@3.0.2:
+    resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==}
+    engines: {node: '>=16.0.0'}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  resedit@1.7.2:
+    resolution: {integrity: sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  resolve-alpn@1.2.1:
+    resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
+
+  resolve-cwd@3.0.0:
+    resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
+    engines: {node: '>=8'}
+
+  resolve-dir@1.0.1:
+    resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve.exports@2.0.3:
+    resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
+    engines: {node: '>=10'}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+
+  responselike@2.0.1:
+    resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  retext-latin@4.0.0:
+    resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==}
+
+  retext-smartypants@6.2.0:
+    resolution: {integrity: sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==}
+
+  retext-stringify@4.0.0:
+    resolution: {integrity: sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==}
+
+  retext@9.0.0:
+    resolution: {integrity: sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==}
+
+  retry@0.12.0:
+    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
+    engines: {node: '>= 4'}
+
+  retry@0.13.1:
+    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
+    engines: {node: '>= 4'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  roarr@2.15.4:
+    resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
+    engines: {node: '>=8.0'}
+
+  rolldown@1.0.0-beta.58:
+    resolution: {integrity: sha512-v1FCjMZCan7f+xGAHBi+mqiE4MlH7I+SXEHSQSJoMOGNNB2UYtvMiejsq9YuUOiZjNeUeV/a21nSFbrUR+4ZCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rust-result@1.0.0:
+    resolution: {integrity: sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==}
+
+  rxjs-for-await@1.0.0:
+    resolution: {integrity: sha512-MJhvf1vtQaljd5wlzsasvOjcohVogzkHkUI0gFE9nGhZ15/fT2vR1CjkLEh37oRqWwpv11vHo5D+sLM+Aw9Y8g==}
+    peerDependencies:
+      rxjs: ^7.0.0
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-json-parse@4.0.0:
+    resolution: {integrity: sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sanitize-filename@1.6.3:
+    resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==}
+
+  sass-embedded-all-unknown@1.97.1:
+    resolution: {integrity: sha512-0au5gUNibfob7W/g+ycBx74O22CL8vwHiZdEDY6J0uzMkHPiSJk//h0iRf5AUnMArFHJjFd3urIiQIaoRKYa1Q==}
+    cpu: ['!arm', '!arm64', '!riscv64', '!x64']
+
+  sass-embedded-android-arm64@1.97.1:
+    resolution: {integrity: sha512-h62DmOiS2Jn87s8+8GhJcMerJnTKa1IsIa9iIKjLiqbAvBDKCGUs027RugZkM+Zx7I+vhPq86PUXBYZ9EkRxdw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  sass-embedded-android-arm@1.97.1:
+    resolution: {integrity: sha512-B5dlv4utJ+yC8ZpBeWTHwSZPVKRlqA8pcaD0FAzeNm/DelIFgQUQtt0UwgYoAI6wDIiie5uSVpMK9l2DaCbiBQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [android]
+
+  sass-embedded-android-riscv64@1.97.1:
+    resolution: {integrity: sha512-tGup88vgaXPnUHEgDMujrt5rfYadvkiVjRb/45FJTx2hQFoGVbmUXz5XqUFjIIbEjQ3kAJqp86A2jy11s43UiQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [android]
+
+  sass-embedded-android-x64@1.97.1:
+    resolution: {integrity: sha512-CAzKjjzu90LZduye2O9+UGX1oScMyF5/RVOa5CxACKALeIS+3XL3LVdV47kwKPoBv5B1aFUvGLscY0CR7jBAbg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [android]
+
+  sass-embedded-darwin-arm64@1.97.1:
+    resolution: {integrity: sha512-tyDzspzh5PbqdAFGtVKUXuf0up6Lff3c1U8J7+4Y7jW6AWRBnq95vTzIIxfnNifGCTI2fW5e7GAZpYygKpNwcw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  sass-embedded-darwin-x64@1.97.1:
+    resolution: {integrity: sha512-FMrRuSPI2ICt2M2SYaLbiG4yxn86D6ae+XtrRdrrBMhWprAcB7Iyu67bgRzZkipMZNIKKeTR7EUvJHgZzi5ixQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  sass-embedded-linux-arm64@1.97.1:
+    resolution: {integrity: sha512-im80gfDWRivw9Su3r3YaZmJaCATcJgu3CsCSLodPk1b1R2+X/E12zEQayvrl05EGT9PDwTtuiqKgS4ND4xjwVg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: glibc
+
+  sass-embedded-linux-arm@1.97.1:
+    resolution: {integrity: sha512-48VxaTUApLyx1NXFdZhKqI/7FYLmz8Ju3Ki2V/p+mhn5raHgAiYeFgn8O1WGxTOh+hBb9y3FdSR5a8MNTbmKMQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: glibc
+
+  sass-embedded-linux-musl-arm64@1.97.1:
+    resolution: {integrity: sha512-kD35WSD9o0279Ptwid3Jnbovo1FYnuG2mayYk9z4ZI4mweXEK6vTu+tlvCE/MdF/zFKSj11qaxaH+uzXe2cO5A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: musl
+
+  sass-embedded-linux-musl-arm@1.97.1:
+    resolution: {integrity: sha512-FUFs466t3PVViVOKY/60JgLLtl61Pf7OW+g5BeEfuqVcSvYUECVHeiYHtX1fT78PEVa0h9tHpM6XpWti+7WYFA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: musl
+
+  sass-embedded-linux-musl-riscv64@1.97.1:
+    resolution: {integrity: sha512-ZgpYps5YHuhA2+KiLkPukRbS5298QObgUhPll/gm5i0LOZleKCwrFELpVPcbhsSBuxqji2uaag5OL+n3JRBVVg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: musl
+
+  sass-embedded-linux-musl-x64@1.97.1:
+    resolution: {integrity: sha512-wcAigOyyvZ6o1zVypWV7QLZqpOEVnlBqJr9MbpnRIm74qFTSbAEmShoh8yMXBymzuVSmEbThxAwW01/TLf62tA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: musl
+
+  sass-embedded-linux-riscv64@1.97.1:
+    resolution: {integrity: sha512-9j1qE1ZrLMuGb+LUmBzw93Z4TNfqlRkkxjPVZy6u5vIggeSfvGbte7eRoYBNWX6SFew/yBCL90KXIirWFSGrlQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: glibc
+
+  sass-embedded-linux-x64@1.97.1:
+    resolution: {integrity: sha512-7nrLFYMH/UgvEgXR5JxQJ6y9N4IJmnFnYoDxN0nw0jUp+CQWQL4EJ4RqAKTGelneueRbccvt2sEyPK+X0KJ9Jg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: glibc
+
+  sass-embedded-unknown-all@1.97.1:
+    resolution: {integrity: sha512-oPSeKc7vS2dx3ZJHiUhHKcyqNq0GWzAiR8zMVpPd/kVMl5ZfVyw+5HTCxxWDBGkX02lNpou27JkeBPCaneYGAQ==}
+    os: ['!android', '!darwin', '!linux', '!win32']
+
+  sass-embedded-win32-arm64@1.97.1:
+    resolution: {integrity: sha512-L5j7J6CbZgHGwcfVedMVpM3z5MYeighcyZE8GF2DVmjWzZI3JtPKNY11wNTD/P9o1Uql10YPOKhGH0iWIXOT7Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  sass-embedded-win32-x64@1.97.1:
+    resolution: {integrity: sha512-rfaZAKXU8cW3E7gvdafyD6YtgbEcsDeT99OEiHXRT0UGFuXT8qCOjpAwIKaOA3XXr2d8S42xx6cXcaZ1a+1fgw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  sass-embedded@1.97.1:
+    resolution: {integrity: sha512-wH3CbOThHYGX0bUyqFf7laLKyhVWIFc2lHynitkqMIUCtX2ixH9mQh0bN7+hkUu5BFt/SXvEMjFbkEbBMpQiSQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
+  sass-loader@16.0.6:
+    resolution: {integrity: sha512-sglGzId5gmlfxNs4gK2U3h7HlVRfx278YK6Ono5lwzuvi1jxig80YiuHkaDBVsYIKFhx8wN7XSCI0M2IDS/3qA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+      sass: ^1.3.0
+      sass-embedded: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      webpack:
+        optional: true
+
+  sass@1.97.1:
+    resolution: {integrity: sha512-uf6HoO8fy6ClsrShvMgaKUn14f2EHQLQRtpsZZLeU/Mv0Q1K5P0+x2uvH6Cub39TVVbWNSrraUhDAoFph6vh0A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  sax@1.4.3:
+    resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
+
+  sax@1.6.0:
+    resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
+    engines: {node: '>=11.0.0'}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  schema-utils@3.3.0:
+    resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
+    engines: {node: '>= 10.13.0'}
+
+  schema-utils@4.3.3:
+    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
+    engines: {node: '>= 10.13.0'}
+
+  secure-compare@3.0.1:
+    resolution: {integrity: sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==}
+
+  select-hose@2.0.0:
+    resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
+
+  selfsigned@2.4.1:
+    resolution: {integrity: sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==}
+    engines: {node: '>=10'}
+
+  semantic-release@24.2.9:
+    resolution: {integrity: sha512-phCkJ6pjDi9ANdhuF5ElS10GGdAKY6R1Pvt9lT3SFhOwM4T7QZE7MLpBDbNruUx/Q3gFD92/UOFringGipRqZA==}
+    engines: {node: '>=20.8.1'}
+    hasBin: true
+
+  semver-compare@1.0.0:
+    resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
+
+  semver-diff@5.0.0:
+    resolution: {integrity: sha512-0HbGtOm+S7T6NGQ/pxJSJipJvc4DK3FcRVMRkhsIwJDJ4Jcz5DQC1cPPzB5GhzyHjwttW878HaWQq46CkL3cqg==}
+    engines: {node: '>=12'}
+    deprecated: Deprecated as the semver package now supports this built-in.
+
+  semver-regex@4.0.5:
+    resolution: {integrity: sha512-hunMQrEy1T6Jr2uEVjrAIqjwWcQTgOAcIM52C8MY1EZSD3DDNft04XzvYKPqjED65bNVVko0YI38nYeEHCX3yw==}
+    engines: {node: '>=12'}
+
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@0.19.2:
+    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
+    engines: {node: '>= 0.8.0'}
+
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serialize-error@7.0.1:
+    resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
+    engines: {node: '>=10'}
+
+  serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+
+  serve-index@1.9.1:
+    resolution: {integrity: sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==}
+    engines: {node: '>= 0.8.0'}
+
+  serve-static@1.16.3:
+    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
+    engines: {node: '>= 0.8.0'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shallow-clone@3.0.1:
+    resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
+    engines: {node: '>=8'}
+
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shell-env@4.0.1:
+    resolution: {integrity: sha512-w3oeZ9qg/P6Lu6qqwavvMnB/bwfsz67gPB3WXmLd/n6zuh7TWQZtGa3iMEdmua0kj8rivkwl+vUjgLWlqZOMPw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  shell-path@3.1.0:
+    resolution: {integrity: sha512-s/9q9PEtcRmDTz69+cJ3yYBAe9yGrL7e46gm2bU4pQ9N48ecPK9QrGFnLwYgb4smOHskx4PL7wCNMktW2AoD+g==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  shiki@3.22.0:
+    resolution: {integrity: sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  signale@1.4.0:
+    resolution: {integrity: sha512-iuh+gPf28RkltuJC7W5MRi6XAjTDCAPC/prJUpQoG4vIP3MJZ+GTydVnodXA7pwvTKb2cA0m9OFZW/cdWy/I/w==}
+    engines: {node: '>=6'}
+
+  sigstore@4.1.0:
+    resolution: {integrity: sha512-/fUgUhYghuLzVT/gaJoeVehLCgZiUxPCPMcyVNY0lIf/cTCz58K/WTI7PefDarXxp9nUKpEwg1yyz3eSBMTtgA==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
+
+  simple-get@4.0.1:
+    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
+
+  simple-update-notifier@2.0.0:
+    resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
+    engines: {node: '>=10'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  sitemap@8.0.2:
+    resolution: {integrity: sha512-LwktpJcyZDoa0IL6KT++lQ53pbSrx2c9ge41/SeLTyqy2XUNA6uR4+P9u5IVo5lPeL2arAcOKn1aZAxoYbCKlQ==}
+    engines: {node: '>=14.0.0', npm: '>=6.0.0'}
+    hasBin: true
+
+  skin-tone@2.0.0:
+    resolution: {integrity: sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==}
+    engines: {node: '>=8'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slash@4.0.0:
+    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
+    engines: {node: '>=12'}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  slice-ansi@3.0.0:
+    resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
+    engines: {node: '>=8'}
+
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  smol-toml@1.6.1:
+    resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
+    engines: {node: '>= 18'}
+
+  sockjs@0.3.24:
+    resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
+
+  socks-proxy-agent@7.0.0:
+    resolution: {integrity: sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==}
+    engines: {node: '>= 10'}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.7:
+    resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  sort-keys-length@1.0.1:
+    resolution: {integrity: sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==}
+    engines: {node: '>=0.10.0'}
+
+  sort-keys@1.1.2:
+    resolution: {integrity: sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==}
+    engines: {node: '>=0.10.0'}
+
+  sorted-array-functions@1.3.0:
+    resolution: {integrity: sha512-2sqgzeFlid6N4Z2fUQ1cvFmTOLRi/sEDzSQ0OKYchqgoPmQBVyM3959qYx3fpS6Esef80KjmpgPeEr028dP3OA==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-loader@5.0.0:
+    resolution: {integrity: sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      webpack: ^5.72.1
+
+  source-map-support@0.5.13:
+    resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
+
+  source-map-support@0.5.19:
+    resolution: {integrity: sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  spawn-error-forwarder@1.0.0:
+    resolution: {integrity: sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g==}
+
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+
+  spdx-license-ids@3.0.22:
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
+
+  spdy-transport@3.0.0:
+    resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
+
+  spdy@4.0.2:
+    resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==}
+    engines: {node: '>=6.0.0'}
+
+  split2@1.0.0:
+    resolution: {integrity: sha512-NKywug4u4pX/AZBB1FCPzZ6/7O+Xhz1qMVbzTvvKvikjO99oPN87SkK08mEY9P63/5lWjK+wgOOgApnTg5r6qg==}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  sprintf-js@1.1.3:
+    resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
+
+  ssri@13.0.1:
+    resolution: {integrity: sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  ssri@9.0.1:
+    resolution: {integrity: sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
+  stackframe@1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+
+  stat-mode@1.0.0:
+    resolution: {integrity: sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==}
+    engines: {node: '>= 6'}
+
+  statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  stream-combiner2@1.1.1:
+    resolution: {integrity: sha512-3PnJbYgS56AeWgtKF5jtJRT6uFJe56Z0Hc5Ngg/6sI6rIt8iiMBTa9cvdyFfpMQjaVHr8dusbNeFGIIonxOvKw==}
+
+  stream-replace-string@2.0.0:
+    resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==}
+
+  streamroller@3.1.5:
+    resolution: {integrity: sha512-KFxaM7XT+irxvdqSP1LGLgNWbYN7ay5owZ3r/8t77p+EtSUAfUgtl7be3xtqtOmGUl9K9YPO2ca8133RlTjvKw==}
+    engines: {node: '>=8.0'}
+
+  string-length@4.0.2:
+    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
+    engines: {node: '>=10'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string-width@8.2.0:
+    resolution: {integrity: sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==}
+    engines: {node: '>=20'}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-bom@4.0.0:
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  style-loader@3.3.4:
+    resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
+  stylehacks@6.1.1:
+    resolution: {integrity: sha512-gSTTEQ670cJNoaeIp9KX6lZmm8LJ3jPB5yJmX8Zq/wQxOsAFXV3qjWzHas3YYk1qesuVIyYWWUpZ0vSE/dTSGg==}
+    engines: {node: ^14 || ^16 || >=18.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  sumchecker@3.0.1:
+    resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
+    engines: {node: '>= 8.0'}
+
+  super-regex@1.1.0:
+    resolution: {integrity: sha512-WHkws2ZflZe41zj6AolvvmaTrWds/VuyeYr9iPVv/oQeaIoVxMKaushfFWpOGDT+GuBrM/sVqF8KUCYQlSSTdQ==}
+    engines: {node: '>=18'}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svgo@3.3.3:
+    resolution: {integrity: sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  sync-child-process@1.0.2:
+    resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
+    engines: {node: '>=16.0.0'}
+
+  sync-message-port@1.1.3:
+    resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==}
+    engines: {node: '>=16.0.0'}
+
+  synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tar-fs@2.1.4:
+    resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
+
+  tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  tar@7.5.2:
+    resolution: {integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==}
+    engines: {node: '>=18'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  tar@7.5.9:
+    resolution: {integrity: sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==}
+    engines: {node: '>=18'}
+
+  temp-dir@3.0.0:
+    resolution: {integrity: sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==}
+    engines: {node: '>=14.16'}
+
+  temp-file@3.4.0:
+    resolution: {integrity: sha512-C5tjlC/HCtVUOi3KWVokd4vHVViOmGjtLwIh4MuzPo/nMYTV/p1urt3RnMz2IWXDdKEGJH3k5+KPxtqRsUYGtg==}
+
+  tempfile@5.0.0:
+    resolution: {integrity: sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==}
+    engines: {node: '>=14.18'}
+
+  tempy@3.1.0:
+    resolution: {integrity: sha512-7jDLIdD2Zp0bDe5r3D2qtkd1QOCacylBuL7oa4udvN6v2pqr4+LcCr67C8DR1zkpaZ8XosF5m1yQSabKAW6f2g==}
+    engines: {node: '>=14.16'}
+
+  terser-webpack-plugin@5.3.16:
+    resolution: {integrity: sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+
+  terser@5.44.1:
+    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  thingies@2.5.0:
+    resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==}
+    engines: {node: '>=10.18'}
+    peerDependencies:
+      tslib: ^2
+
+  through2@2.0.5:
+    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
+
+  thunky@1.1.0:
+    resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
+
+  time-span@5.1.0:
+    resolution: {integrity: sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==}
+    engines: {node: '>=12'}
+
+  tiny-async-pool@1.3.0:
+    resolution: {integrity: sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA==}
+
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  tmp-promise@3.0.3:
+    resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
+
+  tmp@0.2.5:
+    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
+    engines: {node: '>=14.14'}
+
+  tmpl@1.0.5:
+    resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  traverse@0.6.8:
+    resolution: {integrity: sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==}
+    engines: {node: '>= 0.4'}
+
+  tree-dump@1.1.0:
+    resolution: {integrity: sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  truncate-utf8-bytes@1.0.2:
+    resolution: {integrity: sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==}
+
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-checker-rspack-plugin@1.2.3:
+    resolution: {integrity: sha512-Fq2+/sSILEJKWrqoj/H+ytnBbYrudPfRLxaULA/MuL+/3jswXuiR4MOfL30R9XzVUD2km0pSx6bj8yk95IEOaA==}
+    peerDependencies:
+      '@rspack/core': ^1.0.0
+      typescript: '>=3.8.0'
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  ts-jest@29.4.6:
+    resolution: {integrity: sha512-fSpWtOO/1AjSNQguk43hb/JCo16oJDnMJf3CdEGNkqsEX3t0KX96xvyX1D7PfLCpVoKu4MfVrqUkFyblYoY4lA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      '@jest/transform': ^29.0.0 || ^30.0.0
+      '@jest/types': ^29.0.0 || ^30.0.0
+      babel-jest: ^29.0.0 || ^30.0.0
+      esbuild: '*'
+      jest: ^29.0.0 || ^30.0.0
+      jest-util: ^29.0.0 || ^30.0.0
+      typescript: '>=4.3 <6'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@jest/transform':
+        optional: true
+      '@jest/types':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+      jest-util:
+        optional: true
+
+  ts-loader@9.5.4:
+    resolution: {integrity: sha512-nCz0rEwunlTZiy6rXFByQU1kVVpCIgUpc/psFiKVrUwrizdnIbRFu8w7bxhUF0X613DYwT4XzrZHpVyMe758hQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      typescript: '*'
+      webpack: ^5.0.0
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  tsconfig-paths-webpack-plugin@4.2.0:
+    resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
+    engines: {node: '>=10.13.0'}
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsscmp@1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  tuf-js@4.1.0:
+    resolution: {integrity: sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  tunnel-agent@0.6.0:
+    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-detect@4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+
+  type-fest@0.13.1:
+    resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
+    engines: {node: '>=10'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  type-fest@1.4.0:
+    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
+    engines: {node: '>=10'}
+
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typed-assert@1.0.9:
+    resolution: {integrity: sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==}
+
+  typescript-eslint@8.51.0:
+    resolution: {integrity: sha512-jh8ZuM5oEh2PSdyQG9YAEM1TCGuWenLSuSUhf/irbVUNW9O5FhbFVONviN2TgMTBnUmyHv7E56rYnfLZK6TkiA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici@7.20.0:
+    resolution: {integrity: sha512-MJZrkjyd7DeC+uPZh+5/YaMDxFiiEEaDgbUSVMXayofAkDWF1088CDo+2RPg7B1BuS1qf1vgNE7xqwPxE0DuSQ==}
+    engines: {node: '>=20.18.1'}
+
+  unicode-canonical-property-names-ecmascript@2.0.1:
+    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
+    engines: {node: '>=4'}
+
+  unicode-emoji-modifier-base@1.0.0:
+    resolution: {integrity: sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==}
+    engines: {node: '>=4'}
+
+  unicode-match-property-ecmascript@2.0.0:
+    resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
+    engines: {node: '>=4'}
+
+  unicode-match-property-value-ecmascript@2.2.1:
+    resolution: {integrity: sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==}
+    engines: {node: '>=4'}
+
+  unicode-property-aliases-ecmascript@2.2.0:
+    resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
+    engines: {node: '>=4'}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unifont@0.7.4:
+    resolution: {integrity: sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==}
+
+  union@0.5.0:
+    resolution: {integrity: sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==}
+    engines: {node: '>= 0.8.0'}
+
+  unique-filename@2.0.1:
+    resolution: {integrity: sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  unique-filename@5.0.0:
+    resolution: {integrity: sha512-2RaJTAvAb4owyjllTfXzFClJ7WsGxlykkPvCr9pA//LD9goVq+m4PPAeBgNodGZ7nSrntT/auWpJ6Y5IFXcfjg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  unique-slug@3.0.0:
+    resolution: {integrity: sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  unique-slug@6.0.0:
+    resolution: {integrity: sha512-4Lup7Ezn8W3d52/xBhZBVdx323ckxa7DEvd9kPQHppTkLoJXw6ltrBCyj5pnrxj0qKDxYMJ56CoxNuFCscdTiw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  unique-string@3.0.0:
+    resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==}
+    engines: {node: '>=12'}
+
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-modify-children@4.0.0:
+    resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==}
+
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-remove-position@5.0.0:
+    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-children@3.0.0:
+    resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  universal-user-agent@7.0.3:
+    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
+
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  unstorage@1.17.4:
+    resolution: {integrity: sha512-fHK0yNg38tBiJKp/Vgsq4j0JEsCmgqH58HAn707S7zGkArbZsVr/CwINoi+nh3h98BRCwKvx1K3Xg9u3VV83sw==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6 || ^7 || ^8
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1 || ^2 || ^3
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
+  unused-filename@4.0.1:
+    resolution: {integrity: sha512-ZX6U1J04K1FoSUeoX1OicAhw4d0aro2qo+L8RhJkiGTNtBNkd/Fi1Wxoc9HzcVu6HfOzm0si/N15JjxFmD1z6A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  upath@2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  url-join@4.0.1:
+    resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
+
+  url-join@5.0.0:
+    resolution: {integrity: sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  url-toolkit@2.2.5:
+    resolution: {integrity: sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==}
+
+  utf8-byte-length@1.0.5:
+    resolution: {integrity: sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
+  uuid@9.0.0:
+    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
+    hasBin: true
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  v8-to-istanbul@9.3.0:
+    resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
+    engines: {node: '>=10.12.0'}
+
+  validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  validator@13.15.26:
+    resolution: {integrity: sha512-spH26xU080ydGggxRyR1Yhcbgx+j3y5jbNXk/8L+iRvdIEQ4uTRH2Sgf2dokud6Q4oAtsbNvJ1Ft+9xmm6IZcA==}
+    engines: {node: '>= 0.10'}
+
+  varint@6.0.0:
+    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  verror@1.10.1:
+    resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
+    engines: {node: '>=0.6.0'}
+
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  video.js@7.21.7:
+    resolution: {integrity: sha512-T2s3WFAht7Zjr2OSJamND9x9Dn2O+Z5WuHGdh8jI5SYh5mkMdVTQ7vSRmA5PYpjXJ2ycch6jpMjkJEIEU2xxqw==}
+
+  video.js@8.23.4:
+    resolution: {integrity: sha512-qI0VTlYmKzEqRsz1Nppdfcaww4RSxZAq77z2oNSl3cNg2h6do5C8Ffl0KqWQ1OpD8desWXsCrde7tKJ9gGTEyQ==}
+
+  videojs-contrib-quality-levels@4.1.0:
+    resolution: {integrity: sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==}
+    engines: {node: '>=16', npm: '>=8'}
+    peerDependencies:
+      video.js: ^8
+
+  videojs-font@3.2.0:
+    resolution: {integrity: sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==}
+
+  videojs-font@4.2.0:
+    resolution: {integrity: sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==}
+
+  videojs-quality-selector-hls@1.1.1:
+    resolution: {integrity: sha512-GR7Bs/pL4nioq+jlSASqy4nUlnnmY7NnjXY6vBPlmBJA7OuYD80ceyejuCbNeaXX7cC11WOtKTeC8QBJcKuMtA==}
+    engines: {node: '>=18', npm: '>=9'}
+
+  videojs-vtt.js@0.15.5:
+    resolution: {integrity: sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==}
+
+  vite@6.4.1:
+    resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vite@7.3.0:
+    resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.1.1:
+    resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  walker@1.0.8:
+    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
+
+  watchpack@2.5.0:
+    resolution: {integrity: sha512-e6vZvY6xboSwLz2GD36c16+O/2Z6fKvIf4pOXptw2rY9MVwE/TXc6RGqxD3I3x0a28lwBY7DE+76uTPSsBrrCA==}
+    engines: {node: '>=10.13.0'}
+
+  wbuf@1.7.3:
+    resolution: {integrity: sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==}
+
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  weak-lru-cache@1.2.2:
+    resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==}
+
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
+  web-worker@1.2.0:
+    resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  webpack-dev-middleware@7.4.5:
+    resolution: {integrity: sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+
+  webpack-dev-server@5.2.2:
+    resolution: {integrity: sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==}
+    engines: {node: '>= 18.12.0'}
+    hasBin: true
+    peerDependencies:
+      webpack: ^5.0.0
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+      webpack-cli:
+        optional: true
+
+  webpack-merge@5.10.0:
+    resolution: {integrity: sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==}
+    engines: {node: '>=10.0.0'}
+
+  webpack-node-externals@3.0.0:
+    resolution: {integrity: sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==}
+    engines: {node: '>=6'}
+
+  webpack-sources@3.3.3:
+    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
+    engines: {node: '>=10.13.0'}
+
+  webpack-subresource-integrity@5.1.0:
+    resolution: {integrity: sha512-sacXoX+xd8r4WKsy9MvH/q/vBtEHr86cpImXwyg74pFIpERKt6FmB8cXpeuh0ZLgclOlHI4Wcll7+R5L02xk9Q==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      html-webpack-plugin: '>= 5.0.0-beta.1 < 6'
+      webpack: ^5.12.0
+    peerDependenciesMeta:
+      html-webpack-plugin:
+        optional: true
+
+  webpack@5.104.1:
+    resolution: {integrity: sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+
+  websocket-driver@0.7.4:
+    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
+    engines: {node: '>=0.8.0'}
+
+  websocket-extensions@0.1.4:
+    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
+    engines: {node: '>=0.8.0'}
+
+  webworkify-webpack@https://codeload.github.com/xqq/webworkify-webpack/tar.gz/24d1e719b4a6cac37a518b2bb10fe124527ef4ef:
+    resolution: {tarball: https://codeload.github.com/xqq/webworkify-webpack/tar.gz/24d1e719b4a6cac37a518b2bb10fe124527ef4ef}
+    version: 2.1.5
+
+  whatwg-encoding@2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  which-pm-runs@1.1.0:
+    resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
+    engines: {node: '>=4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@6.0.1:
+    resolution: {integrity: sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+    hasBin: true
+
+  wide-align@1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+
+  widest-line@5.0.0:
+    resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
+    engines: {node: '>=18'}
+
+  wildcard@2.0.1:
+    resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==}
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlbuilder@15.1.1:
+    resolution: {integrity: sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==}
+    engines: {node: '>=8.0'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yaml@1.10.3:
+    resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
+    engines: {node: '>= 6'}
+
+  yaml@2.8.2:
+    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs-parser@22.0.0:
+    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
+  yargs@16.2.0:
+    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+    engines: {node: '>=10'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yargs@18.0.0:
+    resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
+  yocto-spinner@0.2.3:
+    resolution: {integrity: sha512-sqBChb33loEnkoXte1bLg45bEBsOP9N1kzQh5JZNKj/0rik4zAPTNSAVPj3uQAdc6slYJ0Ksc403G2XgxsJQFQ==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.1:
+    resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==}
+    peerDependencies:
+      zod: ^3.25 || ^4
+
+  zod-to-ts@1.2.0:
+    resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==}
+    peerDependencies:
+      typescript: ^4.9.4 || ^5.0.2
+      zod: ^3
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.3.5:
+    resolution: {integrity: sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==}
+
+  zone.js@0.15.1:
+    resolution: {integrity: sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  7zip-bin@5.2.0: {}
+
+  '@algolia/abtesting@1.12.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/client-abtesting@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/client-analytics@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/client-common@5.46.2': {}
+
+  '@algolia/client-insights@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/client-personalization@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/client-query-suggestions@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/client-search@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/ingestion@1.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/monitoring@1.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/recommend@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  '@algolia/requester-browser-xhr@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+
+  '@algolia/requester-fetch@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+
+  '@algolia/requester-node-http@5.46.2':
+    dependencies:
+      '@algolia/client-common': 5.46.2
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@angular-devkit/architect@0.2003.13':
+    dependencies:
+      '@angular-devkit/core': 20.3.13
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - chokidar
+
+  '@angular-devkit/architect@0.2101.4':
+    dependencies:
+      '@angular-devkit/core': 21.1.4
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - chokidar
+
+  '@angular-devkit/core@20.3.13':
+    dependencies:
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      jsonc-parser: 3.3.1
+      picomatch: 4.0.3
+      rxjs: 7.8.2
+      source-map: 0.7.6
+
+  '@angular-devkit/core@21.1.4':
+    dependencies:
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      jsonc-parser: 3.3.1
+      picomatch: 4.0.3
+      rxjs: 7.8.2
+      source-map: 0.7.6
+
+  '@angular-devkit/schematics@20.3.13':
+    dependencies:
+      '@angular-devkit/core': 20.3.13
+      jsonc-parser: 3.3.1
+      magic-string: 0.30.17
+      ora: 8.2.0
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - chokidar
+
+  '@angular-devkit/schematics@21.1.4':
+    dependencies:
+      '@angular-devkit/core': 21.1.4
+      jsonc-parser: 3.3.1
+      magic-string: 0.30.21
+      ora: 9.0.0
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - chokidar
+
+  '@angular-eslint/builder@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-devkit/architect': 0.2003.13
+      '@angular-devkit/core': 20.3.13
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - chokidar
+
+  '@angular-eslint/builder@21.2.0(@angular/cli@21.1.4(@types/node@20.19.9))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-devkit/architect': 0.2101.4
+      '@angular-devkit/core': 21.1.4
+      '@angular/cli': 21.1.4(@types/node@20.19.9)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - chokidar
+
+  '@angular-eslint/bundled-angular-compiler@20.5.2': {}
+
+  '@angular-eslint/bundled-angular-compiler@21.2.0': {}
+
+  '@angular-eslint/eslint-plugin-template@20.5.2(@angular-eslint/template-parser@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 20.5.2
+      '@angular-eslint/template-parser': 20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/utils': 20.5.2(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+
+  '@angular-eslint/eslint-plugin-template@21.2.0(@angular-eslint/template-parser@21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 21.2.0
+      '@angular-eslint/template-parser': 21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/utils': 21.2.0(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+
+  '@angular-eslint/eslint-plugin@20.5.2(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 20.5.2
+      '@angular-eslint/utils': 20.5.2(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+
+  '@angular-eslint/eslint-plugin@21.2.0(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 21.2.0
+      '@angular-eslint/utils': 21.2.0(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+
+  '@angular-eslint/schematics@20.5.2(@angular-eslint/template-parser@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-devkit/core': 20.3.13
+      '@angular-devkit/schematics': 20.3.13
+      '@angular-eslint/eslint-plugin': 20.5.2(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/eslint-plugin-template': 20.5.2(@angular-eslint/template-parser@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      ignore: 7.0.5
+      semver: 7.7.3
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - '@angular-eslint/template-parser'
+      - '@typescript-eslint/types'
+      - '@typescript-eslint/utils'
+      - chokidar
+      - eslint
+      - typescript
+
+  '@angular-eslint/schematics@21.2.0(@angular-eslint/template-parser@21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@angular/cli@21.1.4(@types/node@20.19.9))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-devkit/core': 21.1.4
+      '@angular-devkit/schematics': 21.1.4
+      '@angular-eslint/eslint-plugin': 21.2.0(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/eslint-plugin-template': 21.2.0(@angular-eslint/template-parser@21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular/cli': 21.1.4(@types/node@20.19.9)
+      ignore: 7.0.5
+      semver: 7.7.3
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - '@angular-eslint/template-parser'
+      - '@typescript-eslint/types'
+      - '@typescript-eslint/utils'
+      - chokidar
+      - eslint
+      - typescript
+
+  '@angular-eslint/template-parser@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 20.5.2
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-scope: 8.4.0
+      typescript: 5.9.3
+
+  '@angular-eslint/template-parser@21.2.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 21.2.0
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-scope: 9.1.0
+      typescript: 5.9.3
+
+  '@angular-eslint/utils@20.5.2(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 20.5.2
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+
+  '@angular-eslint/utils@21.2.0(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@angular-eslint/bundled-angular-compiler': 21.2.0
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+
+  '@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+
+  '@angular/build@21.1.4(@angular/compiler-cli@21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3))(@angular/compiler@21.1.5)(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/service-worker@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(postcss@8.5.6)(sass-embedded@1.97.1)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))(terser@5.44.1)(tslib@2.8.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@angular-devkit/architect': 0.2101.4
+      '@angular/compiler': 21.1.5
+      '@angular/compiler-cli': 21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3)
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-split-export-declaration': 7.24.7
+      '@inquirer/confirm': 5.1.21(@types/node@20.19.9)
+      '@vitejs/plugin-basic-ssl': 2.1.0(vite@7.3.0(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      beasties: 0.3.5
+      browserslist: 4.28.1
+      esbuild: 0.27.2
+      https-proxy-agent: 7.0.6
+      istanbul-lib-instrument: 6.0.3
+      jsonc-parser: 3.3.1
+      listr2: 9.0.5
+      magic-string: 0.30.21
+      mrmime: 2.0.1
+      parse5-html-rewriting-stream: 8.0.0
+      picomatch: 4.0.3
+      piscina: 5.1.4
+      rolldown: 1.0.0-beta.58
+      sass: 1.97.1
+      semver: 7.7.3
+      source-map-support: 0.5.21
+      tinyglobby: 0.2.15
+      tslib: 2.8.1
+      typescript: 5.9.3
+      undici: 7.20.0
+      vite: 7.3.0(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      watchpack: 2.5.0
+    optionalDependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@angular/service-worker': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      less: 4.5.1
+      lmdb: 3.4.4
+      postcss: 8.5.6
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - chokidar
+      - jiti
+      - lightningcss
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  '@angular/cdk@21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      parse5: 8.0.0
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@angular/cli@21.1.4(@types/node@20.19.9)':
+    dependencies:
+      '@angular-devkit/architect': 0.2101.4
+      '@angular-devkit/core': 21.1.4
+      '@angular-devkit/schematics': 21.1.4
+      '@inquirer/prompts': 7.10.1(@types/node@20.19.9)
+      '@listr2/prompt-adapter-inquirer': 3.0.5(@inquirer/prompts@7.10.1(@types/node@20.19.9))(@types/node@20.19.9)(listr2@9.0.5)
+      '@modelcontextprotocol/sdk': 1.26.0(zod@4.3.5)
+      '@schematics/angular': 21.1.4
+      '@yarnpkg/lockfile': 1.1.0
+      algoliasearch: 5.46.2
+      ini: 6.0.0
+      jsonc-parser: 3.3.1
+      listr2: 9.0.5
+      npm-package-arg: 13.0.2
+      pacote: 21.0.4
+      parse5-html-rewriting-stream: 8.0.0
+      resolve: 1.22.11
+      semver: 7.7.3
+      yargs: 18.0.0
+      zod: 4.3.5
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/node'
+      - chokidar
+      - supports-color
+
+  '@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@angular/compiler-cli@21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3)':
+    dependencies:
+      '@angular/compiler': 21.1.5
+      '@babel/core': 7.28.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      chokidar: 5.0.0
+      convert-source-map: 1.9.0
+      reflect-metadata: 0.2.2
+      semver: 7.7.3
+      tslib: 2.8.1
+      yargs: 18.0.0
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@angular/compiler@21.1.5':
+    dependencies:
+      tslib: 2.8.1
+
+  '@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)':
+    dependencies:
+      rxjs: 7.8.2
+      tslib: 2.8.1
+    optionalDependencies:
+      '@angular/compiler': 21.1.5
+      zone.js: 0.15.1
+
+  '@angular/forms@21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@standard-schema/spec': 1.1.0
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@angular/language-service@21.1.5': {}
+
+  '@angular/material@21.1.5(3d5d3d4637587a26bfc0094ebf8dcf80)':
+    dependencies:
+      '@angular/cdk': 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/forms': 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@angular/platform-browser-dynamic@21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@21.1.5)(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/compiler': 21.1.5
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      tslib: 2.8.1
+
+  '@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@angular/animations': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+
+  '@angular/router@21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@angular/service-worker@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
+  '@astrojs/compiler@2.13.1': {}
+
+  '@astrojs/internal-helpers@0.7.5': {}
+
+  '@astrojs/internal-helpers@0.7.6': {}
+
+  '@astrojs/markdown-remark@6.3.10':
+    dependencies:
+      '@astrojs/internal-helpers': 0.7.5
+      '@astrojs/prism': 3.3.0
+      github-slugger: 2.0.0
+      hast-util-from-html: 2.0.3
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.2.0
+      js-yaml: 4.1.1
+      mdast-util-definitions: 6.0.0
+      rehype-raw: 7.0.0
+      rehype-stringify: 10.0.1
+      remark-gfm: 4.0.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remark-smartypants: 3.0.2
+      shiki: 3.22.0
+      smol-toml: 1.6.1
+      unified: 11.0.5
+      unist-util-remove-position: 5.0.0
+      unist-util-visit: 5.1.0
+      unist-util-visit-parents: 6.0.2
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@astrojs/markdown-remark@6.3.11':
+    dependencies:
+      '@astrojs/internal-helpers': 0.7.6
+      '@astrojs/prism': 3.3.0
+      github-slugger: 2.0.0
+      hast-util-from-html: 2.0.3
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.2.0
+      js-yaml: 4.1.1
+      mdast-util-definitions: 6.0.0
+      rehype-raw: 7.0.0
+      rehype-stringify: 10.0.1
+      remark-gfm: 4.0.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remark-smartypants: 3.0.2
+      shiki: 3.22.0
+      smol-toml: 1.6.1
+      unified: 11.0.5
+      unist-util-remove-position: 5.0.0
+      unist-util-visit: 5.1.0
+      unist-util-visit-parents: 6.0.2
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@astrojs/mdx@4.3.13(astro@5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))':
+    dependencies:
+      '@astrojs/markdown-remark': 6.3.10
+      '@mdx-js/mdx': 3.1.1
+      acorn: 8.15.0
+      astro: 5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
+      es-module-lexer: 1.7.0
+      estree-util-visit: 2.0.0
+      hast-util-to-html: 9.0.5
+      piccolore: 0.1.3
+      rehype-raw: 7.0.0
+      remark-gfm: 4.0.1
+      remark-smartypants: 3.0.2
+      source-map: 0.7.6
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@astrojs/prism@3.3.0':
+    dependencies:
+      prismjs: 1.30.0
+
+  '@astrojs/sitemap@3.7.0':
+    dependencies:
+      sitemap: 8.0.2
+      stream-replace-string: 2.0.0
+      zod: 3.25.76
+
+  '@astrojs/tailwind@6.0.2(astro@5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))':
+    dependencies:
+      astro: 5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
+      autoprefixer: 10.4.23(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - ts-node
+
+  '@astrojs/telemetry@3.3.0':
+    dependencies:
+      ci-info: 4.3.1
+      debug: 4.4.3
+      dlv: 1.1.3
+      dset: 3.1.4
+      is-docker: 3.0.0
+      is-wsl: 3.1.0
+      which-pm-runs: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.5': {}
+
+  '@babel/core@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.28.5':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.5
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      regexpu-core: 6.4.0
+      semver: 6.3.1
+
+  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      debug: 4.4.3
+      lodash.debounce: 4.0.8
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/helper-plugin-utils@7.27.1': {}
+
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-wrap-function': 7.28.3
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-split-export-declaration@7.24.7':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helper-wrap-function@7.28.3':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+
+  '@babel/parser@7.28.5':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-assertions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-block-scoping@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-class-static-block@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-globals': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/template': 7.27.2
+
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-explicit-resource-management@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-json-strings@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-runtime@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.5)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.5)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-unicode-property-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-unicode-sets-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/preset-env@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.28.5)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-explicit-resource-management': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-systemjs': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-property-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-sets-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.5)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.5)
+      core-js-compat: 3.47.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/types': 7.29.0
+      esutils: 2.0.3
+
+  '@babel/preset-typescript@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.28.4': {}
+
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+
+  '@babel/traverse@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
+  '@bufbuild/protobuf@2.10.2': {}
+
+  '@capsizecss/unpack@4.0.0':
+    dependencies:
+      fontkitten: 1.0.2
+
+  '@colors/colors@1.5.0':
+    optional: true
+
+  '@conventional-changelog/git-client@1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1)':
+    dependencies:
+      '@types/semver': 7.7.1
+      semver: 7.7.3
+    optionalDependencies:
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.2.1
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@develar/schema-utils@2.6.5':
+    dependencies:
+      ajv: 6.14.0
+      ajv-keywords: 3.5.2(ajv@6.14.0)
+
+  '@drizzle-team/brocli@0.10.2': {}
+
+  '@electron/asar@3.2.18':
+    dependencies:
+      commander: 5.1.0
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  '@electron/asar@3.4.1':
+    dependencies:
+      commander: 5.1.0
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  '@electron/fuses@1.8.0':
+    dependencies:
+      chalk: 4.1.2
+      fs-extra: 9.1.0
+      minimist: 1.2.8
+
+  '@electron/get@2.0.3':
+    dependencies:
+      debug: 4.4.3
+      env-paths: 2.2.1
+      fs-extra: 8.1.0
+      got: 11.8.6
+      progress: 2.0.3
+      semver: 6.3.1
+      sumchecker: 3.0.1
+    optionalDependencies:
+      global-agent: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/node-gyp@https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2':
+    dependencies:
+      env-paths: 2.2.1
+      exponential-backoff: 3.1.3
+      glob: 8.1.0
+      graceful-fs: 4.2.11
+      make-fetch-happen: 10.2.1
+      nopt: 6.0.0
+      proc-log: 2.0.1
+      semver: 7.7.3
+      tar: 6.2.1
+      which: 2.0.2
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  '@electron/notarize@2.5.0':
+    dependencies:
+      debug: 4.4.3
+      fs-extra: 9.1.0
+      promise-retry: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/osx-sign@1.3.1':
+    dependencies:
+      compare-version: 0.1.2
+      debug: 4.4.3
+      fs-extra: 10.1.0
+      isbinaryfile: 4.0.10
+      minimist: 1.2.8
+      plist: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/rebuild@3.6.1':
+    dependencies:
+      '@malept/cross-spawn-promise': 2.0.0
+      chalk: 4.1.2
+      debug: 4.4.3
+      detect-libc: 2.1.2
+      fs-extra: 10.1.0
+      got: 11.8.6
+      node-abi: 3.85.0
+      node-api-version: 0.2.1
+      node-gyp: 9.4.1
+      ora: 5.4.1
+      read-binary-file-arch: 1.0.6
+      semver: 7.7.3
+      tar: 6.2.1
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  '@electron/rebuild@3.7.0':
+    dependencies:
+      '@electron/node-gyp': https://codeload.github.com/electron/node-gyp/tar.gz/06b29aafb7708acef8b3669835c8a7857ebc92d2
+      '@malept/cross-spawn-promise': 2.0.0
+      chalk: 4.1.2
+      debug: 4.4.3
+      detect-libc: 2.1.2
+      fs-extra: 10.1.0
+      got: 11.8.6
+      node-abi: 3.85.0
+      node-api-version: 0.2.1
+      ora: 5.4.1
+      read-binary-file-arch: 1.0.6
+      semver: 7.7.3
+      tar: 6.2.1
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  '@electron/universal@2.0.1':
+    dependencies:
+      '@electron/asar': 3.2.18
+      '@malept/cross-spawn-promise': 2.0.0
+      debug: 4.4.3
+      dir-compare: 4.2.0
+      fs-extra: 11.3.3
+      minimatch: 9.0.5
+      plist: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emnapi/core@1.8.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+
+  '@emnapi/runtime@1.8.1':
+    dependencies:
+      tslib: 2.8.1
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@esbuild-kit/core-utils@3.3.2':
+    dependencies:
+      esbuild: 0.18.20
+      source-map-support: 0.5.21
+
+  '@esbuild-kit/esm-loader@2.6.5':
+    dependencies:
+      '@esbuild-kit/core-utils': 3.3.2
+      get-tsconfig: 4.13.0
+
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.0':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.2':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm@0.18.20':
+    optional: true
+
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm@0.27.0':
+    optional: true
+
+  '@esbuild/android-arm@0.27.2':
+    optional: true
+
+  '@esbuild/android-arm@0.27.7':
+    optional: true
+
+  '@esbuild/android-x64@0.18.20':
+    optional: true
+
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
+  '@esbuild/android-x64@0.27.0':
+    optional: true
+
+  '@esbuild/android-x64@0.27.2':
+    optional: true
+
+  '@esbuild/android-x64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-x64@0.18.20':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.0':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.2':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.0':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm@0.18.20':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.0':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.2':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ia32@0.18.20':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.0':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.2':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/linux-loong64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.0':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.18.20':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.0':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.2':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.0':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.0':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-s390x@0.18.20':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.0':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.2':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.7':
+    optional: true
+
+  '@esbuild/linux-x64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.0':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.0':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.0':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/sunos-x64@0.18.20':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.0':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.2':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.0':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-ia32@0.18.20':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.0':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.2':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/win32-x64@0.18.20':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.0':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.2':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.7':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@1.21.7))':
+    dependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.14.0
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.2': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@faker-js/faker@10.3.0': {}
+
+  '@fontsource/crimson-pro@5.2.8': {}
+
+  '@fontsource/dm-sans@5.2.8': {}
+
+  '@fontsource/jetbrains-mono@5.2.8': {}
+
+  '@fontsource/roboto@5.2.10': {}
+
+  '@gar/promisify@1.1.3': {}
+
+  '@hono/node-server@1.19.14(hono@4.12.14)':
+    dependencies:
+      hono: 4.12.14
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@hutson/parse-repository-url@5.0.0': {}
+
+  '@img/colour@1.0.0': {}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.8.1
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
+  '@inquirer/ansi@1.0.2': {}
+
+  '@inquirer/checkbox@4.3.2(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/confirm@5.1.21(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/core@10.3.2(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/editor@4.2.23(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/external-editor': 1.0.3(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/expand@4.0.23(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/external-editor@1.0.3(@types/node@20.19.9)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.1
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/figures@1.0.15': {}
+
+  '@inquirer/input@4.3.1(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/number@3.0.23(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/password@4.0.23(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/prompts@7.10.1(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.2(@types/node@20.19.9)
+      '@inquirer/confirm': 5.1.21(@types/node@20.19.9)
+      '@inquirer/editor': 4.2.23(@types/node@20.19.9)
+      '@inquirer/expand': 4.0.23(@types/node@20.19.9)
+      '@inquirer/input': 4.3.1(@types/node@20.19.9)
+      '@inquirer/number': 3.0.23(@types/node@20.19.9)
+      '@inquirer/password': 4.0.23(@types/node@20.19.9)
+      '@inquirer/rawlist': 4.1.11(@types/node@20.19.9)
+      '@inquirer/search': 3.2.2(@types/node@20.19.9)
+      '@inquirer/select': 4.4.2(@types/node@20.19.9)
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/rawlist@4.1.11(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/search@3.2.2(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/select@4.4.2(@types/node@20.19.9)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@20.19.9)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@inquirer/type@3.0.10(@types/node@20.19.9)':
+    optionalDependencies:
+      '@types/node': 20.19.9
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.3
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.2
+      resolve-from: 5.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jest/console@30.2.0':
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      jest-message-util: 30.2.0
+      jest-util: 30.2.0
+      slash: 3.0.0
+
+  '@jest/core@30.2.0(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))':
+    dependencies:
+      '@jest/console': 30.2.0
+      '@jest/pattern': 30.0.1
+      '@jest/reporters': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 4.3.1
+      exit-x: 0.2.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 30.2.0
+      jest-config: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      jest-haste-map: 30.2.0
+      jest-message-util: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-resolve: 30.2.0
+      jest-resolve-dependencies: 30.2.0
+      jest-runner: 30.2.0
+      jest-runtime: 30.2.0
+      jest-snapshot: 30.2.0
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      jest-watcher: 30.2.0
+      micromatch: 4.0.8
+      pretty-format: 30.2.0
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - esbuild-register
+      - supports-color
+      - ts-node
+
+  '@jest/diff-sequences@30.0.1': {}
+
+  '@jest/environment-jsdom-abstract@30.2.0(jsdom@26.1.0)':
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/fake-timers': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/jsdom': 21.1.7
+      '@types/node': 20.19.9
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+      jsdom: 26.1.0
+
+  '@jest/environment@30.2.0':
+    dependencies:
+      '@jest/fake-timers': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      jest-mock: 30.2.0
+
+  '@jest/expect-utils@30.2.0':
+    dependencies:
+      '@jest/get-type': 30.1.0
+
+  '@jest/expect@30.2.0':
+    dependencies:
+      expect: 30.2.0
+      jest-snapshot: 30.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/fake-timers@30.2.0':
+    dependencies:
+      '@jest/types': 30.2.0
+      '@sinonjs/fake-timers': 13.0.5
+      '@types/node': 20.19.9
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+
+  '@jest/get-type@30.1.0': {}
+
+  '@jest/globals@30.2.0':
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/expect': 30.2.0
+      '@jest/types': 30.2.0
+      jest-mock: 30.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/pattern@30.0.1':
+    dependencies:
+      '@types/node': 20.19.9
+      jest-regex-util: 30.0.1
+
+  '@jest/reporters@30.2.0':
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@jest/console': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      collect-v8-coverage: 1.0.3
+      exit-x: 0.2.2
+      glob: 10.5.0
+      graceful-fs: 4.2.11
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-instrument: 6.0.3
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      jest-message-util: 30.2.0
+      jest-util: 30.2.0
+      jest-worker: 30.2.0
+      slash: 3.0.0
+      string-length: 4.0.2
+      v8-to-istanbul: 9.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/schemas@29.6.3':
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+
+  '@jest/schemas@30.0.5':
+    dependencies:
+      '@sinclair/typebox': 0.34.46
+
+  '@jest/snapshot-utils@30.2.0':
+    dependencies:
+      '@jest/types': 30.2.0
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      natural-compare: 1.4.0
+
+  '@jest/source-map@30.0.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      callsites: 3.1.0
+      graceful-fs: 4.2.11
+
+  '@jest/test-result@30.2.0':
+    dependencies:
+      '@jest/console': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/istanbul-lib-coverage': 2.0.6
+      collect-v8-coverage: 1.0.3
+
+  '@jest/test-sequencer@30.2.0':
+    dependencies:
+      '@jest/test-result': 30.2.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      slash: 3.0.0
+
+  '@jest/transform@30.2.0':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@jest/types': 30.2.0
+      '@jridgewell/trace-mapping': 0.3.31
+      babel-plugin-istanbul: 7.0.1
+      chalk: 4.1.2
+      convert-source-map: 2.0.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-util: 30.2.0
+      micromatch: 4.0.8
+      pirates: 4.0.7
+      slash: 3.0.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/types@29.6.3':
+    dependencies:
+      '@jest/schemas': 29.6.3
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.19.9
+      '@types/yargs': 17.0.35
+      chalk: 4.1.2
+
+  '@jest/types@30.2.0':
+    dependencies:
+      '@jest/pattern': 30.0.1
+      '@jest/schemas': 30.0.5
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.19.9
+      '@types/yargs': 17.0.35
+      chalk: 4.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jsonjoy.com/base64@1.1.2(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/buffers@1.2.1(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/codegen@1.0.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/json-pack@1.21.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 1.2.1(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pointer': 1.0.2(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
+      hyperdyperid: 1.2.0
+      thingies: 2.5.0(tslib@2.8.1)
+      tree-dump: 1.1.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/json-pointer@1.0.2(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/util@1.9.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/buffers': 1.2.1(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@leichtgewicht/ip-codec@2.0.5': {}
+
+  '@listr2/prompt-adapter-inquirer@3.0.5(@inquirer/prompts@7.10.1(@types/node@20.19.9))(@types/node@20.19.9)(listr2@9.0.5)':
+    dependencies:
+      '@inquirer/prompts': 7.10.1(@types/node@20.19.9)
+      '@inquirer/type': 3.0.10(@types/node@20.19.9)
+      listr2: 9.0.5
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@lmdb/lmdb-darwin-arm64@3.4.4':
+    optional: true
+
+  '@lmdb/lmdb-darwin-x64@3.4.4':
+    optional: true
+
+  '@lmdb/lmdb-linux-arm64@3.4.4':
+    optional: true
+
+  '@lmdb/lmdb-linux-arm@3.4.4':
+    optional: true
+
+  '@lmdb/lmdb-linux-x64@3.4.4':
+    optional: true
+
+  '@lmdb/lmdb-win32-arm64@3.4.4':
+    optional: true
+
+  '@lmdb/lmdb-win32-x64@3.4.4':
+    optional: true
+
+  '@malept/cross-spawn-promise@2.0.0':
+    dependencies:
+      cross-spawn: 7.0.6
+
+  '@malept/flatpak-bundler@0.4.0':
+    dependencies:
+      debug: 4.4.3
+      fs-extra: 9.1.0
+      lodash: 4.18.1
+      tmp-promise: 3.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mdx-js/mdx@3.1.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdx': 2.0.13
+      acorn: 8.15.0
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.6
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.1(acorn@8.15.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      source-map: 0.7.6
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@modelcontextprotocol/sdk@1.26.0(zod@4.3.5)':
+    dependencies:
+      '@hono/node-server': 1.19.14(hono@4.12.14)
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.6
+      express: 5.2.1
+      express-rate-limit: 8.3.0(express@5.2.1)
+      hono: 4.12.14
+      jose: 6.1.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 4.3.5
+      zod-to-json-schema: 3.25.1(zod@4.3.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@module-federation/bridge-react-webpack-plugin@0.21.6':
+    dependencies:
+      '@module-federation/sdk': 0.21.6
+      '@types/semver': 7.5.8
+      semver: 7.6.3
+
+  '@module-federation/bridge-react-webpack-plugin@0.22.0':
+    dependencies:
+      '@module-federation/sdk': 0.22.0
+      '@types/semver': 7.5.8
+      semver: 7.6.3
+
+  '@module-federation/cli@0.21.6(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/dts-plugin': 0.21.6(typescript@5.9.3)
+      '@module-federation/sdk': 0.21.6
+      chalk: 3.0.0
+      commander: 11.1.0
+      jiti: 2.4.2
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vue-tsc
+
+  '@module-federation/cli@0.22.0(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/dts-plugin': 0.22.0(typescript@5.9.3)
+      '@module-federation/sdk': 0.22.0
+      chalk: 3.0.0
+      commander: 11.1.0
+      jiti: 2.4.2
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vue-tsc
+
+  '@module-federation/data-prefetch@0.21.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@module-federation/runtime': 0.21.6
+      '@module-federation/sdk': 0.21.6
+      fs-extra: 9.1.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@module-federation/data-prefetch@0.22.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@module-federation/runtime': 0.22.0
+      '@module-federation/sdk': 0.22.0
+      fs-extra: 9.1.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@module-federation/dts-plugin@0.21.6(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/error-codes': 0.21.6
+      '@module-federation/managers': 0.21.6
+      '@module-federation/sdk': 0.21.6
+      '@module-federation/third-party-dts-extractor': 0.21.6
+      adm-zip: 0.5.16
+      ansi-colors: 4.1.3
+      axios: 1.15.0
+      chalk: 3.0.0
+      fs-extra: 9.1.0
+      isomorphic-ws: 5.0.0(ws@8.18.0)
+      koa: 3.0.3
+      lodash.clonedeepwith: 4.5.0
+      log4js: 6.9.1
+      node-schedule: 2.1.1
+      rambda: 9.4.2
+      typescript: 5.9.3
+      ws: 8.18.0
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
+  '@module-federation/dts-plugin@0.22.0(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/error-codes': 0.22.0
+      '@module-federation/managers': 0.22.0
+      '@module-federation/sdk': 0.22.0
+      '@module-federation/third-party-dts-extractor': 0.22.0
+      adm-zip: 0.5.16
+      ansi-colors: 4.1.3
+      axios: 1.15.0
+      chalk: 3.0.0
+      fs-extra: 9.1.0
+      isomorphic-ws: 5.0.0(ws@8.18.0)
+      koa: 3.0.3
+      lodash.clonedeepwith: 4.5.0
+      log4js: 6.9.1
+      node-schedule: 2.1.1
+      rambda: 9.4.2
+      typescript: 5.9.3
+      ws: 8.18.0
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
+  '@module-federation/enhanced@0.21.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))':
+    dependencies:
+      '@module-federation/bridge-react-webpack-plugin': 0.21.6
+      '@module-federation/cli': 0.21.6(typescript@5.9.3)
+      '@module-federation/data-prefetch': 0.21.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@module-federation/dts-plugin': 0.21.6(typescript@5.9.3)
+      '@module-federation/error-codes': 0.21.6
+      '@module-federation/inject-external-runtime-core-plugin': 0.21.6(@module-federation/runtime-tools@0.21.6)
+      '@module-federation/managers': 0.21.6
+      '@module-federation/manifest': 0.21.6(typescript@5.9.3)
+      '@module-federation/rspack': 0.21.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(typescript@5.9.3)
+      '@module-federation/runtime-tools': 0.21.6
+      '@module-federation/sdk': 0.21.6
+      btoa: 1.2.1
+      schema-utils: 4.3.3
+      upath: 2.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - bufferutil
+      - debug
+      - react
+      - react-dom
+      - supports-color
+      - utf-8-validate
+
+  '@module-federation/enhanced@0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))':
+    dependencies:
+      '@module-federation/bridge-react-webpack-plugin': 0.22.0
+      '@module-federation/cli': 0.22.0(typescript@5.9.3)
+      '@module-federation/data-prefetch': 0.22.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@module-federation/dts-plugin': 0.22.0(typescript@5.9.3)
+      '@module-federation/error-codes': 0.22.0
+      '@module-federation/inject-external-runtime-core-plugin': 0.22.0(@module-federation/runtime-tools@0.22.0)
+      '@module-federation/managers': 0.22.0
+      '@module-federation/manifest': 0.22.0(typescript@5.9.3)
+      '@module-federation/rspack': 0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(typescript@5.9.3)
+      '@module-federation/runtime-tools': 0.22.0
+      '@module-federation/sdk': 0.22.0
+      btoa: 1.2.1
+      schema-utils: 4.3.3
+      upath: 2.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - bufferutil
+      - debug
+      - react
+      - react-dom
+      - supports-color
+      - utf-8-validate
+
+  '@module-federation/error-codes@0.21.6': {}
+
+  '@module-federation/error-codes@0.22.0': {}
+
+  '@module-federation/inject-external-runtime-core-plugin@0.21.6(@module-federation/runtime-tools@0.21.6)':
+    dependencies:
+      '@module-federation/runtime-tools': 0.21.6
+
+  '@module-federation/inject-external-runtime-core-plugin@0.22.0(@module-federation/runtime-tools@0.22.0)':
+    dependencies:
+      '@module-federation/runtime-tools': 0.22.0
+
+  '@module-federation/managers@0.21.6':
+    dependencies:
+      '@module-federation/sdk': 0.21.6
+      find-pkg: 2.0.0
+      fs-extra: 9.1.0
+
+  '@module-federation/managers@0.22.0':
+    dependencies:
+      '@module-federation/sdk': 0.22.0
+      find-pkg: 2.0.0
+      fs-extra: 9.1.0
+
+  '@module-federation/manifest@0.21.6(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/dts-plugin': 0.21.6(typescript@5.9.3)
+      '@module-federation/managers': 0.21.6
+      '@module-federation/sdk': 0.21.6
+      chalk: 3.0.0
+      find-pkg: 2.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vue-tsc
+
+  '@module-federation/manifest@0.22.0(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/dts-plugin': 0.22.0(typescript@5.9.3)
+      '@module-federation/managers': 0.22.0
+      '@module-federation/sdk': 0.22.0
+      chalk: 3.0.0
+      find-pkg: 2.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vue-tsc
+
+  '@module-federation/node@2.7.26(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))':
+    dependencies:
+      '@module-federation/enhanced': 0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      '@module-federation/runtime': 0.22.0
+      '@module-federation/sdk': 0.22.0
+      btoa: 1.2.1
+      encoding: 0.1.13
+      node-fetch: 2.7.0(encoding@0.1.13)
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    optionalDependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - bufferutil
+      - debug
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vue-tsc
+
+  '@module-federation/rspack@0.21.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/bridge-react-webpack-plugin': 0.21.6
+      '@module-federation/dts-plugin': 0.21.6(typescript@5.9.3)
+      '@module-federation/inject-external-runtime-core-plugin': 0.21.6(@module-federation/runtime-tools@0.21.6)
+      '@module-federation/managers': 0.21.6
+      '@module-federation/manifest': 0.21.6(typescript@5.9.3)
+      '@module-federation/runtime-tools': 0.21.6
+      '@module-federation/sdk': 0.21.6
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      btoa: 1.2.1
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
+  '@module-federation/rspack@0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/bridge-react-webpack-plugin': 0.22.0
+      '@module-federation/dts-plugin': 0.22.0(typescript@5.9.3)
+      '@module-federation/inject-external-runtime-core-plugin': 0.22.0(@module-federation/runtime-tools@0.22.0)
+      '@module-federation/managers': 0.22.0
+      '@module-federation/manifest': 0.22.0(typescript@5.9.3)
+      '@module-federation/runtime-tools': 0.22.0
+      '@module-federation/sdk': 0.22.0
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      btoa: 1.2.1
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
+  '@module-federation/runtime-core@0.21.6':
+    dependencies:
+      '@module-federation/error-codes': 0.21.6
+      '@module-federation/sdk': 0.21.6
+
+  '@module-federation/runtime-core@0.22.0':
+    dependencies:
+      '@module-federation/error-codes': 0.22.0
+      '@module-federation/sdk': 0.22.0
+
+  '@module-federation/runtime-tools@0.21.6':
+    dependencies:
+      '@module-federation/runtime': 0.21.6
+      '@module-federation/webpack-bundler-runtime': 0.21.6
+
+  '@module-federation/runtime-tools@0.22.0':
+    dependencies:
+      '@module-federation/runtime': 0.22.0
+      '@module-federation/webpack-bundler-runtime': 0.22.0
+
+  '@module-federation/runtime@0.21.6':
+    dependencies:
+      '@module-federation/error-codes': 0.21.6
+      '@module-federation/runtime-core': 0.21.6
+      '@module-federation/sdk': 0.21.6
+
+  '@module-federation/runtime@0.22.0':
+    dependencies:
+      '@module-federation/error-codes': 0.22.0
+      '@module-federation/runtime-core': 0.22.0
+      '@module-federation/sdk': 0.22.0
+
+  '@module-federation/sdk@0.21.6': {}
+
+  '@module-federation/sdk@0.22.0': {}
+
+  '@module-federation/third-party-dts-extractor@0.21.6':
+    dependencies:
+      find-pkg: 2.0.0
+      fs-extra: 9.1.0
+      resolve: 1.22.8
+
+  '@module-federation/third-party-dts-extractor@0.22.0':
+    dependencies:
+      find-pkg: 2.0.0
+      fs-extra: 9.1.0
+      resolve: 1.22.8
+
+  '@module-federation/webpack-bundler-runtime@0.21.6':
+    dependencies:
+      '@module-federation/runtime': 0.21.6
+      '@module-federation/sdk': 0.21.6
+
+  '@module-federation/webpack-bundler-runtime@0.22.0':
+    dependencies:
+      '@module-federation/runtime': 0.22.0
+      '@module-federation/sdk': 0.22.0
+
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
+    optional: true
+
+  '@napi-rs/nice-android-arm-eabi@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-android-arm64@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-darwin-arm64@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-darwin-x64@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-freebsd-x64@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-arm-gnueabihf@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-arm64-gnu@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-arm64-musl@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-ppc64-gnu@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-riscv64-gnu@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-s390x-gnu@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-x64-gnu@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-linux-x64-musl@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-openharmony-arm64@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-win32-arm64-msvc@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-win32-ia32-msvc@1.1.1':
+    optional: true
+
+  '@napi-rs/nice-win32-x64-msvc@1.1.1':
+    optional: true
+
+  '@napi-rs/nice@1.1.1':
+    optionalDependencies:
+      '@napi-rs/nice-android-arm-eabi': 1.1.1
+      '@napi-rs/nice-android-arm64': 1.1.1
+      '@napi-rs/nice-darwin-arm64': 1.1.1
+      '@napi-rs/nice-darwin-x64': 1.1.1
+      '@napi-rs/nice-freebsd-x64': 1.1.1
+      '@napi-rs/nice-linux-arm-gnueabihf': 1.1.1
+      '@napi-rs/nice-linux-arm64-gnu': 1.1.1
+      '@napi-rs/nice-linux-arm64-musl': 1.1.1
+      '@napi-rs/nice-linux-ppc64-gnu': 1.1.1
+      '@napi-rs/nice-linux-riscv64-gnu': 1.1.1
+      '@napi-rs/nice-linux-s390x-gnu': 1.1.1
+      '@napi-rs/nice-linux-x64-gnu': 1.1.1
+      '@napi-rs/nice-linux-x64-musl': 1.1.1
+      '@napi-rs/nice-openharmony-arm64': 1.1.1
+      '@napi-rs/nice-win32-arm64-msvc': 1.1.1
+      '@napi-rs/nice-win32-ia32-msvc': 1.1.1
+      '@napi-rs/nice-win32-x64-msvc': 1.1.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@0.2.4':
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.9.0
+
+  '@napi-rs/wasm-runtime@1.0.7':
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.1':
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@ngrx/component-store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngrx/effects@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@ngrx/store': 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngrx/entity@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@ngrx/store': 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngrx/eslint-plugin@21.0.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript-eslint@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      strip-json-comments: 3.1.1
+      typescript: 5.9.3
+      typescript-eslint: 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+
+  '@ngrx/router-store@21.0.1(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/router@21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/router': 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@ngrx/store': 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngrx/signals@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      rxjs: 7.8.2
+
+  '@ngrx/store-devtools@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@ngrx/store': 21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngrx/store@21.0.1(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngx-pwa/local-storage@21.0.0(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      rxjs: 7.8.2
+      tslib: 2.8.1
+
+  '@ngx-translate/core@16.0.4(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+
+  '@ngx-translate/http-loader@16.0.1(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))':
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@npmcli/agent@4.0.0':
+    dependencies:
+      agent-base: 7.1.4
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 11.2.4
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@npmcli/fs@2.1.2':
+    dependencies:
+      '@gar/promisify': 1.1.3
+      semver: 7.7.3
+
+  '@npmcli/fs@5.0.0':
+    dependencies:
+      semver: 7.7.3
+
+  '@npmcli/git@7.0.1':
+    dependencies:
+      '@npmcli/promise-spawn': 9.0.1
+      ini: 6.0.0
+      lru-cache: 11.2.4
+      npm-pick-manifest: 11.0.3
+      proc-log: 6.1.0
+      promise-retry: 2.0.1
+      semver: 7.7.3
+      which: 6.0.1
+
+  '@npmcli/installed-package-contents@4.0.0':
+    dependencies:
+      npm-bundled: 5.0.0
+      npm-normalize-package-bin: 5.0.0
+
+  '@npmcli/move-file@2.0.1':
+    dependencies:
+      mkdirp: 1.0.4
+      rimraf: 3.0.2
+
+  '@npmcli/node-gyp@5.0.0': {}
+
+  '@npmcli/package-json@7.0.5':
+    dependencies:
+      '@npmcli/git': 7.0.1
+      glob: 13.0.6
+      hosted-git-info: 9.0.2
+      json-parse-even-better-errors: 5.0.0
+      proc-log: 6.1.0
+      semver: 7.7.3
+      spdx-expression-parse: 4.0.0
+
+  '@npmcli/promise-spawn@9.0.1':
+    dependencies:
+      which: 6.0.1
+
+  '@npmcli/redact@4.0.0': {}
+
+  '@npmcli/run-script@10.0.3':
+    dependencies:
+      '@npmcli/node-gyp': 5.0.0
+      '@npmcli/package-json': 7.0.5
+      '@npmcli/promise-spawn': 9.0.1
+      node-gyp: 12.2.0
+      proc-log: 6.1.0
+      which: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@nx/angular@22.5.1(a7619a9b727b1016a8a40de6ba7d327e)':
+    dependencies:
+      '@angular-devkit/core': 21.1.4
+      '@angular-devkit/schematics': 21.1.4
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/eslint': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@zkochan/js-yaml@0.0.7)(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/module-federation': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(esbuild@0.27.0)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@nx/rspack': 22.5.1(@babel/traverse@7.28.5)(@module-federation/enhanced@0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)))(@module-federation/node@2.7.26(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)))(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(@types/express@5.0.6)(esbuild@0.27.0)(less@4.5.1)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(react-dom@19.2.3(react@19.2.3))(react-refresh@0.18.0)(react@19.2.3)(typescript@5.9.3)
+      '@nx/web': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/webpack': 22.5.1(@babel/traverse@7.28.5)(@rspack/core@1.6.8(@swc/helpers@0.5.18))(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(typescript@5.9.3)
+      '@nx/workspace': 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
+      '@schematics/angular': 21.1.4
+      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      enquirer: 2.3.6
+      magic-string: 0.30.21
+      picocolors: 1.1.1
+      picomatch: 4.0.2
+      rxjs: 7.8.2
+      semver: 7.7.3
+      tslib: 2.8.1
+      webpack-merge: 5.10.0
+    optionalDependencies:
+      '@angular/build': 21.1.4(@angular/compiler-cli@21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3))(@angular/compiler@21.1.5)(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/service-worker@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(postcss@8.5.6)(sass-embedded@1.97.1)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))(terser@5.44.1)(tslib@2.8.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@module-federation/enhanced'
+      - '@module-federation/node'
+      - '@parcel/css'
+      - '@rspack/core'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/helpers'
+      - '@types/express'
+      - '@zkochan/js-yaml'
+      - bufferutil
+      - clean-css
+      - csso
+      - debug
+      - esbuild
+      - eslint
+      - html-webpack-plugin
+      - less
+      - lightningcss
+      - next
+      - node-sass
+      - nx
+      - react
+      - react-dom
+      - react-refresh
+      - supports-color
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - verdaccio
+      - vue-template-compiler
+      - vue-tsc
+      - webpack-cli
+      - webpack-hot-middleware
+
+  '@nx/devkit@22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))':
+    dependencies:
+      '@zkochan/js-yaml': 0.0.7
+      ejs: 3.1.10
+      enquirer: 2.3.6
+      minimatch: 10.1.1
+      nx: 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      semver: 7.7.3
+      tslib: 2.8.1
+      yargs-parser: 21.1.1
+
+  '@nx/eslint-plugin@22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)))(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(typescript@5.9.3)':
+    dependencies:
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      chalk: 4.1.2
+      confusing-browser-globals: 1.0.11
+      globals: 15.9.0
+      jsonc-eslint-parser: 2.4.2
+      semver: 7.7.3
+      tslib: 2.8.1
+    optionalDependencies:
+      eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@1.21.7))
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - debug
+      - eslint
+      - nx
+      - supports-color
+      - typescript
+      - verdaccio
+
+  '@nx/eslint@22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@zkochan/js-yaml@0.0.7)(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))':
+    dependencies:
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      eslint: 9.39.2(jiti@1.21.7)
+      semver: 7.7.3
+      tslib: 2.8.1
+      typescript: 5.9.3
+    optionalDependencies:
+      '@zkochan/js-yaml': 0.0.7
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - debug
+      - nx
+      - supports-color
+      - verdaccio
+
+  '@nx/jest@22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))(typescript@5.9.3)':
+    dependencies:
+      '@jest/reporters': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
+      identity-obj-proxy: 3.0.0
+      jest-config: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      jest-resolve: 30.2.0
+      jest-util: 30.2.0
+      minimatch: 10.1.1
+      picocolors: 1.1.1
+      resolve.exports: 2.0.3
+      semver: 7.7.3
+      tslib: 2.8.1
+      yargs-parser: 21.1.1
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@types/node'
+      - babel-plugin-macros
+      - debug
+      - esbuild-register
+      - node-notifier
+      - nx
+      - supports-color
+      - ts-node
+      - typescript
+      - verdaccio
+
+  '@nx/js@22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.28.5)
+      '@babel/preset-env': 7.28.5(@babel/core@7.28.5)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
+      '@babel/runtime': 7.28.4
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/workspace': 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      '@zkochan/js-yaml': 0.0.7
+      babel-plugin-const-enum: 1.2.0(@babel/core@7.28.5)
+      babel-plugin-macros: 3.1.0
+      babel-plugin-transform-typescript-metadata: 0.3.2(@babel/core@7.28.5)(@babel/traverse@7.28.5)
+      chalk: 4.1.2
+      columnify: 1.6.0
+      detect-port: 1.6.1
+      ignore: 5.3.2
+      js-tokens: 4.0.0
+      jsonc-parser: 3.2.0
+      npm-run-path: 4.0.1
+      picocolors: 1.1.1
+      picomatch: 4.0.2
+      semver: 7.7.3
+      source-map-support: 0.5.19
+      tinyglobby: 0.2.15
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - debug
+      - nx
+      - supports-color
+
+  '@nx/module-federation@22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(esbuild@0.27.0)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/enhanced': 0.21.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      '@module-federation/node': 2.7.26(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      '@module-federation/sdk': 0.21.6
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/web': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      express: 4.22.1
+      http-proxy-middleware: 3.0.5
+      picocolors: 1.1.1
+      tslib: 2.8.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/helpers'
+      - bufferutil
+      - debug
+      - esbuild
+      - next
+      - nx
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - verdaccio
+      - vue-tsc
+      - webpack-cli
+
+  '@nx/nx-darwin-arm64@22.5.1':
+    optional: true
+
+  '@nx/nx-darwin-x64@22.5.1':
+    optional: true
+
+  '@nx/nx-freebsd-x64@22.5.1':
+    optional: true
+
+  '@nx/nx-linux-arm-gnueabihf@22.5.1':
+    optional: true
+
+  '@nx/nx-linux-arm64-gnu@22.5.1':
+    optional: true
+
+  '@nx/nx-linux-arm64-musl@22.5.1':
+    optional: true
+
+  '@nx/nx-linux-x64-gnu@22.5.1':
+    optional: true
+
+  '@nx/nx-linux-x64-musl@22.5.1':
+    optional: true
+
+  '@nx/nx-win32-arm64-msvc@22.5.1':
+    optional: true
+
+  '@nx/nx-win32-x64-msvc@22.5.1':
+    optional: true
+
+  '@nx/playwright@22.5.1(@babel/traverse@7.28.5)(@playwright/test@1.57.0)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@zkochan/js-yaml@0.0.7)(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))':
+    dependencies:
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/eslint': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@zkochan/js-yaml@0.0.7)(eslint@9.39.2(jiti@1.21.7))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      minimatch: 10.1.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@playwright/test': 1.57.0
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@zkochan/js-yaml'
+      - debug
+      - eslint
+      - nx
+      - supports-color
+      - verdaccio
+
+  '@nx/rspack@22.5.1(@babel/traverse@7.28.5)(@module-federation/enhanced@0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)))(@module-federation/node@2.7.26(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)))(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(@types/express@5.0.6)(esbuild@0.27.0)(less@4.5.1)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(react-dom@19.2.3(react@19.2.3))(react-refresh@0.18.0)(react@19.2.3)(typescript@5.9.3)':
+    dependencies:
+      '@module-federation/enhanced': 0.22.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      '@module-federation/node': 2.7.26(@rspack/core@1.6.8(@swc/helpers@0.5.18))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/module-federation': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/helpers@0.5.18)(esbuild@0.27.0)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      '@nx/web': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      '@rspack/dev-server': 1.1.5(@rspack/core@1.6.8(@swc/helpers@0.5.18))(@types/express@5.0.6)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      '@rspack/plugin-react-refresh': 1.5.3(react-refresh@0.18.0)
+      autoprefixer: 10.4.23(postcss@8.5.6)
+      browserslist: 4.28.1
+      css-loader: 6.11.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      enquirer: 2.3.6
+      express: 4.22.1
+      http-proxy-middleware: 3.0.5
+      less-loader: 11.1.4(less@4.5.1)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      license-webpack-plugin: 4.0.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      loader-utils: 2.0.4
+      parse5: 4.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 14.1.0(postcss@8.5.6)
+      postcss-loader: 8.2.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(postcss@8.5.6)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      sass: 1.97.1
+      sass-embedded: 1.97.1
+      sass-loader: 16.0.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(sass-embedded@1.97.1)(sass@1.97.1)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      source-map-loader: 5.0.0(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      style-loader: 3.3.4(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      ts-checker-rspack-plugin: 1.2.3(@rspack/core@1.6.8(@swc/helpers@0.5.18))(typescript@5.9.3)
+      tslib: 2.8.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+      webpack-node-externals: 3.0.0
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/helpers'
+      - '@types/express'
+      - bufferutil
+      - debug
+      - esbuild
+      - less
+      - next
+      - node-sass
+      - nx
+      - react
+      - react-dom
+      - react-refresh
+      - supports-color
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - verdaccio
+      - vue-tsc
+      - webpack-cli
+      - webpack-hot-middleware
+
+  '@nx/web@22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))':
+    dependencies:
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      detect-port: 1.6.1
+      http-server: 14.1.1
+      picocolors: 1.1.1
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - debug
+      - nx
+      - supports-color
+      - verdaccio
+
+  '@nx/webpack@22.5.1(@babel/traverse@7.28.5)(@rspack/core@1.6.8(@swc/helpers@0.5.18))(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(typescript@5.9.3)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@nx/js': 22.5.1(@babel/traverse@7.28.5)(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
+      ajv: 8.17.1
+      autoprefixer: 10.4.23(postcss@8.5.6)
+      babel-loader: 9.2.1(@babel/core@7.28.5)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      browserslist: 4.28.1
+      copy-webpack-plugin: 10.2.4(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      css-loader: 6.11.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      css-minimizer-webpack-plugin: 5.0.1(esbuild@0.27.0)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      fork-ts-checker-webpack-plugin: 7.2.13(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      less: 4.5.1
+      less-loader: 11.1.4(less@4.5.1)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      license-webpack-plugin: 4.0.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      loader-utils: 2.0.4
+      mini-css-extract-plugin: 2.4.7(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      parse5: 4.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 14.1.0(postcss@8.5.6)
+      postcss-loader: 6.2.1(postcss@8.5.6)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      rxjs: 7.8.2
+      sass: 1.97.1
+      sass-embedded: 1.97.1
+      sass-loader: 16.0.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(sass-embedded@1.97.1)(sass@1.97.1)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      source-map-loader: 5.0.0(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      style-loader: 3.3.4(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      terser-webpack-plugin: 5.3.16(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      ts-loader: 9.5.4(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      tsconfig-paths-webpack-plugin: 4.2.0
+      tslib: 2.8.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+      webpack-dev-server: 5.2.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      webpack-node-externals: 3.0.0
+      webpack-subresource-integrity: 5.1.0(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@parcel/css'
+      - '@rspack/core'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/css'
+      - bufferutil
+      - clean-css
+      - csso
+      - debug
+      - esbuild
+      - html-webpack-plugin
+      - lightningcss
+      - node-sass
+      - nx
+      - supports-color
+      - typescript
+      - uglify-js
+      - utf-8-validate
+      - verdaccio
+      - vue-template-compiler
+      - webpack-cli
+
+  '@nx/workspace@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))':
+    dependencies:
+      '@nx/devkit': 22.5.1(nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))
+      '@zkochan/js-yaml': 0.0.7
+      chalk: 4.1.2
+      enquirer: 2.3.6
+      nx: 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      picomatch: 4.0.2
+      semver: 7.7.3
+      tslib: 2.8.1
+      yargs-parser: 21.1.1
+    transitivePeerDependencies:
+      - '@swc-node/register'
+      - '@swc/core'
+      - debug
+
+  '@octokit/auth-token@6.0.0': {}
+
+  '@octokit/core@7.0.6':
+    dependencies:
+      '@octokit/auth-token': 6.0.0
+      '@octokit/graphql': 9.0.3
+      '@octokit/request': 10.0.7
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      before-after-hook: 4.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/endpoint@11.0.2':
+    dependencies:
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/graphql@9.0.3':
+    dependencies:
+      '@octokit/request': 10.0.7
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/openapi-types@26.0.0': {}
+
+  '@octokit/openapi-types@27.0.0': {}
+
+  '@octokit/plugin-paginate-rest@13.2.1(@octokit/core@7.0.6)':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/types': 15.0.2
+
+  '@octokit/plugin-retry@8.0.3(@octokit/core@7.0.6)':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      bottleneck: 2.19.5
+
+  '@octokit/plugin-throttling@11.0.3(@octokit/core@7.0.6)':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/types': 16.0.0
+      bottleneck: 2.19.5
+
+  '@octokit/request-error@7.1.0':
+    dependencies:
+      '@octokit/types': 16.0.0
+
+  '@octokit/request@10.0.7':
+    dependencies:
+      '@octokit/endpoint': 11.0.2
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      fast-content-type-parse: 3.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/types@15.0.2':
+    dependencies:
+      '@octokit/openapi-types': 26.0.0
+
+  '@octokit/types@16.0.0':
+    dependencies:
+      '@octokit/openapi-types': 27.0.0
+
+  '@oslojs/encoding@1.1.0': {}
+
+  '@oxc-project/types@0.106.0': {}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.17.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-win32-ia32-msvc@11.17.1':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.17.1':
+    optional: true
+
+  '@parcel/watcher-android-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher@2.5.1':
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+    optional: true
+
+  '@phenomnomnominal/tsquery@6.1.4(typescript@5.9.3)':
+    dependencies:
+      '@types/esquery': 1.5.4
+      esquery: 1.7.0
+      typescript: 5.9.3
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@pkgr/core@0.2.9': {}
+
+  '@playwright/test@1.57.0':
+    dependencies:
+      playwright: 1.57.0
+
+  '@pnpm/config.env-replace@1.1.0': {}
+
+  '@pnpm/network.ca-file@1.0.2':
+    dependencies:
+      graceful-fs: 4.2.10
+
+  '@pnpm/npm-conf@2.3.1':
+    dependencies:
+      '@pnpm/config.env-replace': 1.1.0
+      '@pnpm/network.ca-file': 1.0.2
+      config-chain: 1.1.13
+
+  '@rolldown/binding-android-arm64@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.58':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.58':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-beta.58': {}
+
+  '@rollup/pluginutils@5.3.0(rollup@4.59.0)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.59.0
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@rspack/binding-darwin-arm64@1.6.8':
+    optional: true
+
+  '@rspack/binding-darwin-x64@1.6.8':
+    optional: true
+
+  '@rspack/binding-linux-arm64-gnu@1.6.8':
+    optional: true
+
+  '@rspack/binding-linux-arm64-musl@1.6.8':
+    optional: true
+
+  '@rspack/binding-linux-x64-gnu@1.6.8':
+    optional: true
+
+  '@rspack/binding-linux-x64-musl@1.6.8':
+    optional: true
+
+  '@rspack/binding-wasm32-wasi@1.6.8':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.7
+    optional: true
+
+  '@rspack/binding-win32-arm64-msvc@1.6.8':
+    optional: true
+
+  '@rspack/binding-win32-ia32-msvc@1.6.8':
+    optional: true
+
+  '@rspack/binding-win32-x64-msvc@1.6.8':
+    optional: true
+
+  '@rspack/binding@1.6.8':
+    optionalDependencies:
+      '@rspack/binding-darwin-arm64': 1.6.8
+      '@rspack/binding-darwin-x64': 1.6.8
+      '@rspack/binding-linux-arm64-gnu': 1.6.8
+      '@rspack/binding-linux-arm64-musl': 1.6.8
+      '@rspack/binding-linux-x64-gnu': 1.6.8
+      '@rspack/binding-linux-x64-musl': 1.6.8
+      '@rspack/binding-wasm32-wasi': 1.6.8
+      '@rspack/binding-win32-arm64-msvc': 1.6.8
+      '@rspack/binding-win32-ia32-msvc': 1.6.8
+      '@rspack/binding-win32-x64-msvc': 1.6.8
+
+  '@rspack/core@1.6.8(@swc/helpers@0.5.18)':
+    dependencies:
+      '@module-federation/runtime-tools': 0.21.6
+      '@rspack/binding': 1.6.8
+      '@rspack/lite-tapable': 1.1.0
+    optionalDependencies:
+      '@swc/helpers': 0.5.18
+
+  '@rspack/dev-server@1.1.5(@rspack/core@1.6.8(@swc/helpers@0.5.18))(@types/express@5.0.6)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))':
+    dependencies:
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      chokidar: 3.6.0
+      http-proxy-middleware: 2.0.9(@types/express@5.0.6)
+      p-retry: 6.2.1
+      webpack-dev-server: 5.2.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - '@types/express'
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+      - webpack
+      - webpack-cli
+
+  '@rspack/lite-tapable@1.1.0': {}
+
+  '@rspack/plugin-react-refresh@1.5.3(react-refresh@0.18.0)':
+    dependencies:
+      error-stack-parser: 2.1.4
+      html-entities: 2.6.0
+      react-refresh: 0.18.0
+
+  '@rtsao/scc@1.1.0': {}
+
+  '@schematics/angular@21.1.4':
+    dependencies:
+      '@angular-devkit/core': 21.1.4
+      '@angular-devkit/schematics': 21.1.4
+      jsonc-parser: 3.3.1
+    transitivePeerDependencies:
+      - chokidar
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@semantic-release/changelog@6.0.3(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      '@semantic-release/error': 3.0.0
+      aggregate-error: 3.1.0
+      fs-extra: 11.3.3
+      lodash: 4.18.1
+      semantic-release: 24.2.9(typescript@5.9.3)
+
+  '@semantic-release/commit-analyzer@13.0.1(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      conventional-changelog-angular: 8.1.0
+      conventional-changelog-writer: 8.2.0
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.2.1
+      debug: 4.4.3
+      import-from-esm: 2.0.0
+      lodash-es: 4.18.1
+      micromatch: 4.0.8
+      semantic-release: 24.2.9(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@semantic-release/error@3.0.0': {}
+
+  '@semantic-release/error@4.0.0': {}
+
+  '@semantic-release/git@10.0.1(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      '@semantic-release/error': 3.0.0
+      aggregate-error: 3.1.0
+      debug: 4.4.3
+      dir-glob: 3.0.1
+      execa: 5.1.1
+      lodash: 4.18.1
+      micromatch: 4.0.8
+      p-reduce: 2.1.0
+      semantic-release: 24.2.9(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@semantic-release/github@11.0.6(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/plugin-paginate-rest': 13.2.1(@octokit/core@7.0.6)
+      '@octokit/plugin-retry': 8.0.3(@octokit/core@7.0.6)
+      '@octokit/plugin-throttling': 11.0.3(@octokit/core@7.0.6)
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 5.0.0
+      debug: 4.4.3
+      dir-glob: 3.0.1
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      issue-parser: 7.0.1
+      lodash-es: 4.18.1
+      mime: 4.1.0
+      p-filter: 4.1.0
+      semantic-release: 24.2.9(typescript@5.9.3)
+      tinyglobby: 0.2.15
+      url-join: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@semantic-release/npm@12.0.1(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 5.0.0
+      execa: 9.6.1
+      fs-extra: 11.3.3
+      lodash-es: 4.18.1
+      nerf-dart: 1.0.0
+      normalize-url: 8.1.1
+      npm: 10.9.4
+      rc: 1.2.8
+      read-pkg: 9.0.1
+      registry-auth-token: 5.1.0
+      semantic-release: 24.2.9(typescript@5.9.3)
+      semver: 7.7.3
+      tempy: 3.1.0
+
+  '@semantic-release/npm@12.0.2(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 5.0.0
+      execa: 9.6.1
+      fs-extra: 11.3.3
+      lodash-es: 4.18.1
+      nerf-dart: 1.0.0
+      normalize-url: 8.1.1
+      npm: 10.9.4
+      rc: 1.2.8
+      read-pkg: 9.0.1
+      registry-auth-token: 5.1.0
+      semantic-release: 24.2.9(typescript@5.9.3)
+      semver: 7.7.3
+      tempy: 3.1.0
+
+  '@semantic-release/release-notes-generator@14.1.0(semantic-release@24.2.9(typescript@5.9.3))':
+    dependencies:
+      conventional-changelog-angular: 8.1.0
+      conventional-changelog-writer: 8.2.0
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.2.1
+      debug: 4.4.3
+      get-stream: 7.0.1
+      import-from-esm: 2.0.0
+      into-stream: 7.0.0
+      lodash-es: 4.18.1
+      read-package-up: 11.0.0
+      semantic-release: 24.2.9(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@shikijs/core@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
+  '@shikijs/engine-oniguruma@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/themes@3.22.0':
+    dependencies:
+      '@shikijs/types': 3.22.0
+
+  '@shikijs/types@3.22.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@sigstore/bundle@4.0.0':
+    dependencies:
+      '@sigstore/protobuf-specs': 0.5.0
+
+  '@sigstore/core@3.1.0': {}
+
+  '@sigstore/protobuf-specs@0.5.0': {}
+
+  '@sigstore/sign@4.1.0':
+    dependencies:
+      '@sigstore/bundle': 4.0.0
+      '@sigstore/core': 3.1.0
+      '@sigstore/protobuf-specs': 0.5.0
+      make-fetch-happen: 15.0.3
+      proc-log: 6.1.0
+      promise-retry: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sigstore/tuf@4.0.1':
+    dependencies:
+      '@sigstore/protobuf-specs': 0.5.0
+      tuf-js: 4.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sigstore/verify@3.1.0':
+    dependencies:
+      '@sigstore/bundle': 4.0.0
+      '@sigstore/core': 3.1.0
+      '@sigstore/protobuf-specs': 0.5.0
+
+  '@sinclair/typebox@0.27.8': {}
+
+  '@sinclair/typebox@0.34.46': {}
+
+  '@sindresorhus/is@4.6.0': {}
+
+  '@sindresorhus/merge-streams@2.3.0': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@sinonjs/commons@3.0.1':
+    dependencies:
+      type-detect: 4.0.8
+
+  '@sinonjs/fake-timers@13.0.5':
+    dependencies:
+      '@sinonjs/commons': 3.0.1
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@swc-node/core@1.14.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)':
+    dependencies:
+      '@swc/core': 1.15.8(@swc/helpers@0.5.18)
+      '@swc/types': 0.1.25
+
+  '@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3)':
+    dependencies:
+      '@swc-node/core': 1.14.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)
+      '@swc-node/sourcemap-support': 0.6.1
+      '@swc/core': 1.15.8(@swc/helpers@0.5.18)
+      colorette: 2.0.20
+      debug: 4.4.3
+      oxc-resolver: 11.17.1
+      pirates: 4.0.7
+      tslib: 2.8.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@swc/types'
+      - supports-color
+
+  '@swc-node/sourcemap-support@0.6.1':
+    dependencies:
+      source-map-support: 0.5.21
+      tslib: 2.8.1
+
+  '@swc/core-darwin-arm64@1.15.8':
+    optional: true
+
+  '@swc/core-darwin-x64@1.15.8':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.15.8':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.15.8':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.15.8':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.15.8':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.15.8':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.15.8':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.15.8':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.15.8':
+    optional: true
+
+  '@swc/core@1.15.8(@swc/helpers@0.5.18)':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.25
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.15.8
+      '@swc/core-darwin-x64': 1.15.8
+      '@swc/core-linux-arm-gnueabihf': 1.15.8
+      '@swc/core-linux-arm64-gnu': 1.15.8
+      '@swc/core-linux-arm64-musl': 1.15.8
+      '@swc/core-linux-x64-gnu': 1.15.8
+      '@swc/core-linux-x64-musl': 1.15.8
+      '@swc/core-win32-arm64-msvc': 1.15.8
+      '@swc/core-win32-ia32-msvc': 1.15.8
+      '@swc/core-win32-x64-msvc': 1.15.8
+      '@swc/helpers': 0.5.18
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.18':
+    dependencies:
+      tslib: 2.8.1
+
+  '@swc/types@0.1.25':
+    dependencies:
+      '@swc/counter': 0.1.3
+
+  '@szmarczak/http-timer@4.0.6':
+    dependencies:
+      defer-to-connect: 2.0.1
+
+  '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
+
+  '@tootallnate/once@2.0.0': {}
+
+  '@tsconfig/node10@1.0.12': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
+  '@tufjs/canonical-json@2.0.0': {}
+
+  '@tufjs/models@4.1.0':
+    dependencies:
+      '@tufjs/canonical-json': 2.0.0
+      minimatch: 10.1.1
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@tybys/wasm-util@0.9.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.29.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/better-sqlite3@7.6.13':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/body-parser@1.19.6':
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 20.19.9
+
+  '@types/bonjour@3.5.13':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/cacheable-request@6.0.3':
+    dependencies:
+      '@types/http-cache-semantics': 4.0.4
+      '@types/keyv': 3.1.4
+      '@types/node': 20.19.9
+      '@types/responselike': 1.0.3
+
+  '@types/connect-history-api-fallback@1.5.4':
+    dependencies:
+      '@types/express-serve-static-core': 4.19.7
+      '@types/node': 20.19.9
+
+  '@types/connect@3.4.38':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/cors@2.8.19':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/eslint-scope@3.7.7':
+    dependencies:
+      '@types/eslint': 9.6.1
+      '@types/estree': 1.0.8
+
+  '@types/eslint@9.6.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+
+  '@types/esquery@1.5.4':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/esrecurse@4.3.1': {}
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/estree@1.0.8': {}
+
+  '@types/express-serve-static-core@4.19.7':
+    dependencies:
+      '@types/node': 20.19.9
+      '@types/qs': 6.14.0
+      '@types/range-parser': 1.2.7
+      '@types/send': 1.2.1
+
+  '@types/express-serve-static-core@5.1.1':
+    dependencies:
+      '@types/node': 20.19.9
+      '@types/qs': 6.14.0
+      '@types/range-parser': 1.2.7
+      '@types/send': 1.2.1
+
+  '@types/express@4.17.25':
+    dependencies:
+      '@types/body-parser': 1.19.6
+      '@types/express-serve-static-core': 4.19.7
+      '@types/qs': 6.14.0
+      '@types/serve-static': 1.15.10
+
+  '@types/express@5.0.6':
+    dependencies:
+      '@types/body-parser': 1.19.6
+      '@types/express-serve-static-core': 5.1.1
+      '@types/serve-static': 2.2.0
+
+  '@types/fs-extra@9.0.13':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/http-cache-semantics@4.0.4': {}
+
+  '@types/http-errors@2.0.5': {}
+
+  '@types/http-proxy@1.17.17':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/jest@30.0.0':
+    dependencies:
+      expect: 30.2.0
+      pretty-format: 30.2.0
+
+  '@types/jsdom@21.1.7':
+    dependencies:
+      '@types/node': 20.19.9
+      '@types/tough-cookie': 4.0.5
+      parse5: 7.3.0
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/json5@0.0.29': {}
+
+  '@types/keyv@3.1.4':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/lodash@4.17.20': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdx@2.0.13': {}
+
+  '@types/mime@1.3.5': {}
+
+  '@types/mocha@9.0.0': {}
+
+  '@types/ms@2.1.0': {}
+
+  '@types/nlcst@2.0.3':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/node-forge@1.3.14':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/node@17.0.45': {}
+
+  '@types/node@20.19.9':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/node@22.19.3':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/normalize-package-data@2.4.4': {}
+
+  '@types/parse-json@4.0.2': {}
+
+  '@types/plist@3.0.5':
+    dependencies:
+      '@types/node': 20.19.9
+      xmlbuilder: 15.1.1
+    optional: true
+
+  '@types/qs@6.14.0': {}
+
+  '@types/range-parser@1.2.7': {}
+
+  '@types/responselike@1.0.3':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/retry@0.12.2': {}
+
+  '@types/sax@1.2.7':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/semver@7.5.8': {}
+
+  '@types/semver@7.7.1': {}
+
+  '@types/send@0.17.6':
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 20.19.9
+
+  '@types/send@1.2.1':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/serve-index@1.9.4':
+    dependencies:
+      '@types/express': 5.0.6
+
+  '@types/serve-static@1.15.10':
+    dependencies:
+      '@types/http-errors': 2.0.5
+      '@types/node': 20.19.9
+      '@types/send': 0.17.6
+
+  '@types/serve-static@2.2.0':
+    dependencies:
+      '@types/http-errors': 2.0.5
+      '@types/node': 20.19.9
+
+  '@types/sockjs@0.3.36':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/stack-utils@2.0.3': {}
+
+  '@types/tough-cookie@4.0.5': {}
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/uuid@10.0.0': {}
+
+  '@types/verror@1.10.11':
+    optional: true
+
+  '@types/video.js@7.3.29': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 20.19.9
+
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@17.0.35':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 20.19.9
+    optional: true
+
+  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.51.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.51.0':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/visitor-keys': 8.51.0
+
+  '@typescript-eslint/tsconfig-utils@8.51.0(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.51.0': {}
+
+  '@typescript-eslint/typescript-estree@8.51.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/visitor-keys': 8.51.0
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.51.0':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      eslint-visitor-keys: 4.2.1
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@videojs/http-streaming@2.15.0(video.js@8.23.4)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      aes-decrypter: 3.1.3
+      global: 4.4.0
+      m3u8-parser: 4.8.0
+      mpd-parser: 0.22.0
+      mux.js: 6.0.1
+      video.js: 8.23.4
+
+  '@videojs/http-streaming@2.16.3(video.js@7.21.7)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      aes-decrypter: 3.1.3
+      global: 4.4.0
+      m3u8-parser: 4.8.0
+      mpd-parser: 0.22.1
+      mux.js: 6.0.1
+      video.js: 7.21.7
+
+  '@videojs/http-streaming@3.17.2(video.js@8.23.4)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 4.1.1
+      aes-decrypter: 4.0.2
+      global: 4.4.0
+      m3u8-parser: 7.2.0
+      mpd-parser: 1.3.1
+      mux.js: 7.1.0
+      video.js: 8.23.4
+
+  '@videojs/vhs-utils@3.0.5':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      url-toolkit: 2.2.5
+
+  '@videojs/vhs-utils@4.1.1':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+
+  '@videojs/xhr@2.6.0':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      is-function: 1.0.2
+
+  '@videojs/xhr@2.7.0':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      is-function: 1.0.2
+
+  '@vitejs/plugin-basic-ssl@2.1.0(vite@7.3.0(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      vite: 7.3.0(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+
+  '@webassemblyjs/ast@1.14.1':
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
+
+  '@webassemblyjs/helper-api-error@1.13.2': {}
+
+  '@webassemblyjs/helper-buffer@1.14.1': {}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.13.2
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@xtuc/long': 4.2.2
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/wasm-gen': 1.14.1
+
+  '@webassemblyjs/ieee754@1.13.2':
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+
+  '@webassemblyjs/leb128@1.13.2':
+    dependencies:
+      '@xtuc/long': 4.2.2
+
+  '@webassemblyjs/utf8@1.13.2': {}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/helper-wasm-section': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-opt': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      '@webassemblyjs/wast-printer': 1.14.1
+
+  '@webassemblyjs/wasm-gen@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+
+  '@webassemblyjs/wasm-opt@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+
+  '@webassemblyjs/wasm-parser@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+
+  '@webassemblyjs/wast-printer@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@xtuc/long': 4.2.2
+
+  '@xmldom/xmldom@0.7.13': {}
+
+  '@xmldom/xmldom@0.8.11': {}
+
+  '@xtuc/ieee754@1.2.0': {}
+
+  '@xtuc/long@4.2.2': {}
+
+  '@yangkghjh/videojs-aspect-ratio-panel@0.0.1':
+    dependencies:
+      global: 4.4.0
+      video.js: 7.21.7
+
+  '@yarnpkg/lockfile@1.1.0': {}
+
+  '@yarnpkg/parsers@3.0.2':
+    dependencies:
+      js-yaml: 3.14.2
+      tslib: 2.8.1
+
+  '@zkochan/js-yaml@0.0.7':
+    dependencies:
+      argparse: 2.0.1
+
+  abbrev@1.1.1: {}
+
+  abbrev@4.0.0: {}
+
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
+
+  acorn-import-phases@1.0.4(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  add-stream@1.0.0: {}
+
+  address@1.2.2: {}
+
+  adm-zip@0.5.16: {}
+
+  aes-decrypter@3.1.3:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      global: 4.4.0
+      pkcs7: 1.0.4
+
+  aes-decrypter@4.0.2:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 4.1.1
+      global: 4.4.0
+      pkcs7: 1.0.4
+
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  agent-base@7.1.4: {}
+
+  agentkeepalive@4.6.0:
+    dependencies:
+      humanize-ms: 1.2.1
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  aggregate-error@5.0.0:
+    dependencies:
+      clean-stack: 5.3.0
+      indent-string: 5.0.0
+
+  ajv-formats@2.1.1(ajv@8.17.1):
+    optionalDependencies:
+      ajv: 8.17.1
+
+  ajv-formats@3.0.1(ajv@8.17.1):
+    optionalDependencies:
+      ajv: 8.17.1
+
+  ajv-keywords@3.5.2(ajv@6.14.0):
+    dependencies:
+      ajv: 6.14.0
+
+  ajv-keywords@5.1.0(ajv@8.17.1):
+    dependencies:
+      ajv: 8.17.1
+      fast-deep-equal: 3.1.3
+
+  ajv@6.14.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  algoliasearch@5.46.2:
+    dependencies:
+      '@algolia/abtesting': 1.12.2
+      '@algolia/client-abtesting': 5.46.2
+      '@algolia/client-analytics': 5.46.2
+      '@algolia/client-common': 5.46.2
+      '@algolia/client-insights': 5.46.2
+      '@algolia/client-personalization': 5.46.2
+      '@algolia/client-query-suggestions': 5.46.2
+      '@algolia/client-search': 5.46.2
+      '@algolia/ingestion': 1.46.2
+      '@algolia/monitoring': 1.46.2
+      '@algolia/recommend': 5.46.2
+      '@algolia/requester-browser-xhr': 5.46.2
+      '@algolia/requester-fetch': 5.46.2
+      '@algolia/requester-node-http': 5.46.2
+
+  angular-eslint@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript-eslint@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(typescript@5.9.3):
+    dependencies:
+      '@angular-devkit/core': 20.3.13
+      '@angular-devkit/schematics': 20.3.13
+      '@angular-eslint/builder': 20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/eslint-plugin': 20.5.2(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/eslint-plugin-template': 20.5.2(@angular-eslint/template-parser@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/schematics': 20.5.2(@angular-eslint/template-parser@20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(@typescript-eslint/types@8.51.0)(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@angular-eslint/template-parser': 20.5.2(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+      typescript-eslint: 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - chokidar
+      - supports-color
+
+  angularx-qrcode@21.0.4(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)):
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      qrcode: 1.5.4
+      tslib: 2.8.1
+
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-colors@4.1.3: {}
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-escapes@7.2.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-html-community@0.0.8: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  ansi-styles@6.2.3: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
+  app-builder-bin@5.0.0-alpha.10: {}
+
+  app-builder-bin@5.0.0-alpha.12: {}
+
+  app-builder-lib@25.1.8(dmg-builder@25.1.8):
+    dependencies:
+      '@develar/schema-utils': 2.6.5
+      '@electron/notarize': 2.5.0
+      '@electron/osx-sign': 1.3.1
+      '@electron/rebuild': 3.6.1
+      '@electron/universal': 2.0.1
+      '@malept/flatpak-bundler': 0.4.0
+      '@types/fs-extra': 9.0.13
+      async-exit-hook: 2.0.1
+      bluebird-lst: 1.0.9
+      builder-util: 25.1.7
+      builder-util-runtime: 9.2.10
+      chromium-pickle-js: 0.2.0
+      config-file-ts: 0.2.8-rc1
+      debug: 4.4.3
+      dmg-builder: 25.1.8
+      dotenv: 16.6.1
+      dotenv-expand: 11.0.7
+      ejs: 3.1.10
+      electron-publish: 25.1.7
+      form-data: 4.0.5
+      fs-extra: 10.1.0
+      hosted-git-info: 4.1.0
+      is-ci: 3.0.1
+      isbinaryfile: 5.0.7
+      js-yaml: 4.1.1
+      json5: 2.2.3
+      lazy-val: 1.0.5
+      minimatch: 10.2.2
+      resedit: 1.7.2
+      sanitize-filename: 1.6.3
+      semver: 7.7.3
+      tar: 6.2.1
+      temp-file: 3.4.0
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  app-builder-lib@26.0.12(dmg-builder@26.0.12):
+    dependencies:
+      '@develar/schema-utils': 2.6.5
+      '@electron/asar': 3.2.18
+      '@electron/fuses': 1.8.0
+      '@electron/notarize': 2.5.0
+      '@electron/osx-sign': 1.3.1
+      '@electron/rebuild': 3.7.0
+      '@electron/universal': 2.0.1
+      '@malept/flatpak-bundler': 0.4.0
+      '@types/fs-extra': 9.0.13
+      async-exit-hook: 2.0.1
+      builder-util: 26.0.11
+      builder-util-runtime: 9.3.1
+      chromium-pickle-js: 0.2.0
+      config-file-ts: 0.2.8-rc1
+      debug: 4.4.3
+      dmg-builder: 26.0.12
+      dotenv: 16.6.1
+      dotenv-expand: 11.0.7
+      ejs: 3.1.10
+      electron-publish: 26.0.11
+      fs-extra: 10.1.0
+      hosted-git-info: 4.1.0
+      is-ci: 3.0.1
+      isbinaryfile: 5.0.7
+      js-yaml: 4.1.1
+      json5: 2.2.3
+      lazy-val: 1.0.5
+      minimatch: 10.1.1
+      plist: 3.1.0
+      resedit: 1.7.2
+      semver: 7.7.3
+      tar: 6.2.1
+      temp-file: 3.4.0
+      tiny-async-pool: 1.3.0
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  aproba@2.1.0: {}
+
+  are-we-there-yet@3.0.1:
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.2
+
+  arg@4.1.3: {}
+
+  arg@5.0.2: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  argv-formatter@1.0.0: {}
+
+  aria-query@5.3.2: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-flatten@1.1.1: {}
+
+  array-ify@1.0.0: {}
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array-iterate@2.0.1: {}
+
+  array-union@3.0.1: {}
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  artplayer@5.3.0:
+    dependencies:
+      option-validator: 2.0.6
+
+  assert-plus@1.0.0:
+    optional: true
+
+  astral-regex@2.0.0:
+    optional: true
+
+  astring@1.9.0: {}
+
+  astro@5.18.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(rollup@4.59.0)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2):
+    dependencies:
+      '@astrojs/compiler': 2.13.1
+      '@astrojs/internal-helpers': 0.7.6
+      '@astrojs/markdown-remark': 6.3.11
+      '@astrojs/telemetry': 3.3.0
+      '@capsizecss/unpack': 4.0.0
+      '@oslojs/encoding': 1.1.0
+      '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
+      acorn: 8.15.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      boxen: 8.0.1
+      ci-info: 4.3.1
+      clsx: 2.1.1
+      common-ancestor-path: 1.0.1
+      cookie: 1.1.1
+      cssesc: 3.0.0
+      debug: 4.4.3
+      deterministic-object-hash: 2.0.2
+      devalue: 5.6.4
+      diff: 8.0.3
+      dlv: 1.1.3
+      dset: 3.1.4
+      es-module-lexer: 1.7.0
+      esbuild: 0.27.7
+      estree-walker: 3.0.3
+      flattie: 1.1.1
+      fontace: 0.4.1
+      github-slugger: 2.0.0
+      html-escaper: 3.0.3
+      http-cache-semantics: 4.2.0
+      import-meta-resolve: 4.2.0
+      js-yaml: 4.1.1
+      magic-string: 0.30.21
+      magicast: 0.5.2
+      mrmime: 2.0.1
+      neotraverse: 0.6.18
+      p-limit: 6.2.0
+      p-queue: 8.1.1
+      package-manager-detector: 1.6.0
+      piccolore: 0.1.3
+      picomatch: 4.0.3
+      prompts: 2.4.2
+      rehype: 13.0.2
+      semver: 7.7.3
+      shiki: 3.22.0
+      smol-toml: 1.6.1
+      svgo: 4.0.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tsconfck: 3.1.6(typescript@5.9.3)
+      ultrahtml: 1.6.0
+      unifont: 0.7.4
+      unist-util-visit: 5.1.0
+      unstorage: 1.17.4
+      vfile: 6.0.3
+      vite: 6.4.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitefu: 1.1.1(vite@6.4.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      xxhash-wasm: 1.1.0
+      yargs-parser: 21.1.1
+      yocto-spinner: 0.2.3
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.1(zod@3.25.76)
+      zod-to-ts: 1.2.0(typescript@5.9.3)(zod@3.25.76)
+    optionalDependencies:
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@types/node'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - jiti
+      - less
+      - lightningcss
+      - rollup
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - yaml
+
+  async-exit-hook@2.0.1: {}
+
+  async-function@1.0.0: {}
+
+  async@3.2.6: {}
+
+  asynckit@0.4.0: {}
+
+  at-least-node@1.0.0: {}
+
+  autoprefixer@10.4.23(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001762
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axios@1.15.0:
+    dependencies:
+      follow-redirects: 1.16.0(debug@4.4.3)
+      form-data: 4.0.5
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+
+  axobject-query@4.1.0: {}
+
+  babel-jest@30.2.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@jest/transform': 30.2.0
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 7.0.1
+      babel-preset-jest: 30.2.0(@babel/core@7.28.5)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-loader@9.2.1(@babel/core@7.28.5)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      '@babel/core': 7.28.5
+      find-cache-dir: 4.0.0
+      schema-utils: 4.3.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  babel-plugin-const-enum@1.2.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-istanbul@7.0.1:
+    dependencies:
+      '@babel/helper-plugin-utils': 7.27.1
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-instrument: 6.0.3
+      test-exclude: 6.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-jest-hoist@30.2.0:
+    dependencies:
+      '@types/babel__core': 7.20.5
+
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      cosmiconfig: 7.1.0
+      resolve: 1.22.11
+
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.5):
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      core-js-compat: 3.47.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-transform-typescript-metadata@0.3.2(@babel/core@7.28.5)(@babel/traverse@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+    optionalDependencies:
+      '@babel/traverse': 7.28.5
+
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.28.5)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.28.5)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.28.5)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.5)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.28.5)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.28.5)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.5)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.28.5)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.28.5)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.28.5)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.5)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.28.5)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.28.5)
+
+  babel-preset-jest@30.2.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      babel-plugin-jest-hoist: 30.2.0
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.5)
+
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.3: {}
+
+  base-64@1.0.0: {}
+
+  base64-js@1.5.1: {}
+
+  baseline-browser-mapping@2.9.11: {}
+
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  batch@0.6.1: {}
+
+  beasties@0.3.5:
+    dependencies:
+      css-select: 6.0.0
+      css-what: 7.0.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      htmlparser2: 10.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-media-query-parser: 0.2.3
+
+  before-after-hook@4.0.0: {}
+
+  better-sqlite3@12.5.0:
+    dependencies:
+      bindings: 1.5.0
+      prebuild-install: 7.1.3
+
+  big.js@5.2.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  bindings@1.5.0:
+    dependencies:
+      file-uri-to-path: 1.0.0
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  bluebird-lst@1.0.9:
+    dependencies:
+      bluebird: 3.7.2
+
+  bluebird@3.7.2: {}
+
+  body-parser@1.20.4:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.14.1
+      raw-body: 2.5.3
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  body-parser@2.2.1:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.1
+      on-finished: 2.4.1
+      qs: 6.14.1
+      raw-body: 3.0.2
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  bonjour-service@1.3.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      multicast-dns: 7.2.5
+
+  boolbase@1.0.0: {}
+
+  boolean@3.2.0:
+    optional: true
+
+  bottleneck@2.19.5: {}
+
+  boxen@8.0.1:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 8.0.0
+      chalk: 5.6.2
+      cli-boxes: 3.0.0
+      string-width: 7.2.0
+      type-fest: 4.41.0
+      widest-line: 5.0.0
+      wrap-ansi: 9.0.2
+
+  brace-expansion@1.1.13:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.1.0:
+    dependencies:
+      balanced-match: 1.0.2
+
+  brace-expansion@5.0.2:
+    dependencies:
+      balanced-match: 4.0.3
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.11
+      caniuse-lite: 1.0.30001762
+      electron-to-chromium: 1.5.267
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  bs-logger@0.2.6:
+    dependencies:
+      fast-json-stable-stringify: 2.1.0
+
+  bser@2.1.1:
+    dependencies:
+      node-int64: 0.4.0
+
+  btoa@1.2.1: {}
+
+  buffer-builder@0.2.0: {}
+
+  buffer-crc32@0.2.13: {}
+
+  buffer-from@1.1.2: {}
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  builder-util-runtime@9.2.10:
+    dependencies:
+      debug: 4.4.3
+      sax: 1.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  builder-util-runtime@9.3.1:
+    dependencies:
+      debug: 4.4.3
+      sax: 1.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  builder-util@25.1.7:
+    dependencies:
+      7zip-bin: 5.2.0
+      '@types/debug': 4.1.12
+      app-builder-bin: 5.0.0-alpha.10
+      bluebird-lst: 1.0.9
+      builder-util-runtime: 9.2.10
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      fs-extra: 10.1.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-ci: 3.0.1
+      js-yaml: 4.1.1
+      source-map-support: 0.5.21
+      stat-mode: 1.0.0
+      temp-file: 3.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  builder-util@26.0.11:
+    dependencies:
+      7zip-bin: 5.2.0
+      '@types/debug': 4.1.12
+      app-builder-bin: 5.0.0-alpha.12
+      builder-util-runtime: 9.3.1
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      fs-extra: 10.1.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-ci: 3.0.1
+      js-yaml: 4.1.1
+      sanitize-filename: 1.6.3
+      source-map-support: 0.5.21
+      stat-mode: 1.0.0
+      temp-file: 3.4.0
+      tiny-async-pool: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.1.2: {}
+
+  cacache@16.1.3:
+    dependencies:
+      '@npmcli/fs': 2.1.2
+      '@npmcli/move-file': 2.0.1
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      glob: 8.1.0
+      infer-owner: 1.0.4
+      lru-cache: 7.18.3
+      minipass: 3.3.6
+      minipass-collect: 1.0.2
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      mkdirp: 1.0.4
+      p-map: 4.0.0
+      promise-inflight: 1.0.1
+      rimraf: 3.0.2
+      ssri: 9.0.1
+      tar: 6.2.1
+      unique-filename: 2.0.1
+    transitivePeerDependencies:
+      - bluebird
+
+  cacache@20.0.3:
+    dependencies:
+      '@npmcli/fs': 5.0.0
+      fs-minipass: 3.0.3
+      glob: 13.0.6
+      lru-cache: 11.2.4
+      minipass: 7.1.2
+      minipass-collect: 2.0.1
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      p-map: 7.0.4
+      ssri: 13.0.1
+      unique-filename: 5.0.0
+
+  cacheable-lookup@5.0.4: {}
+
+  cacheable-request@7.0.4:
+    dependencies:
+      clone-response: 1.0.3
+      get-stream: 5.2.0
+      http-cache-semantics: 4.2.0
+      keyv: 4.5.4
+      lowercase-keys: 2.0.0
+      normalize-url: 6.1.0
+      responselike: 2.0.1
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camelcase-css@2.0.1: {}
+
+  camelcase@5.3.1: {}
+
+  camelcase@6.3.0: {}
+
+  camelcase@8.0.0: {}
+
+  caniuse-api@3.0.0:
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001762
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+
+  caniuse-lite@1.0.30001762: {}
+
+  ccount@2.0.1: {}
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.6.2: {}
+
+  char-regex@1.0.2: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  chardet@2.1.1: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  chownr@1.1.4: {}
+
+  chownr@2.0.0: {}
+
+  chownr@3.0.0: {}
+
+  chrome-trace-event@1.0.4: {}
+
+  chromium-pickle-js@0.2.0: {}
+
+  ci-info@3.9.0: {}
+
+  ci-info@4.3.1: {}
+
+  cjs-module-lexer@2.2.0: {}
+
+  clean-stack@2.2.0: {}
+
+  clean-stack@5.3.0:
+    dependencies:
+      escape-string-regexp: 5.0.0
+
+  cli-boxes@3.0.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-highlight@2.1.11:
+    dependencies:
+      chalk: 4.1.2
+      highlight.js: 10.7.3
+      mz: 2.7.0
+      parse5: 5.1.1
+      parse5-htmlparser2-tree-adapter: 6.0.1
+      yargs: 16.2.0
+
+  cli-spinners@2.6.1: {}
+
+  cli-spinners@2.9.2: {}
+
+  cli-spinners@3.4.0: {}
+
+  cli-table3@0.6.5:
+    dependencies:
+      string-width: 4.2.3
+    optionalDependencies:
+      '@colors/colors': 1.5.0
+
+  cli-truncate@2.1.0:
+    dependencies:
+      slice-ansi: 3.0.0
+      string-width: 4.2.3
+    optional: true
+
+  cli-truncate@5.1.1:
+    dependencies:
+      slice-ansi: 7.1.2
+      string-width: 8.2.0
+
+  cli-width@4.1.0: {}
+
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
+  cliui@7.0.4:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  cliui@9.0.1:
+    dependencies:
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
+
+  clone-deep@4.0.1:
+    dependencies:
+      is-plain-object: 2.0.4
+      kind-of: 6.0.3
+      shallow-clone: 3.0.1
+
+  clone-response@1.0.3:
+    dependencies:
+      mimic-response: 1.0.1
+
+  clone@1.0.4: {}
+
+  clsx@2.1.1: {}
+
+  co@4.6.0: {}
+
+  collapse-white-space@2.1.0: {}
+
+  collect-v8-coverage@1.0.3: {}
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  color-support@1.1.3: {}
+
+  colord@2.9.3: {}
+
+  colorette@2.0.20: {}
+
+  colorjs.io@0.5.2: {}
+
+  columnify@1.6.0:
+    dependencies:
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@11.1.0: {}
+
+  commander@2.20.3: {}
+
+  commander@4.1.1: {}
+
+  commander@5.1.0: {}
+
+  commander@7.2.0: {}
+
+  common-ancestor-path@1.0.1: {}
+
+  common-path-prefix@3.0.0: {}
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  compare-version@0.1.2: {}
+
+  compressible@2.0.18:
+    dependencies:
+      mime-db: 1.54.0
+
+  compression@1.8.1:
+    dependencies:
+      bytes: 3.1.2
+      compressible: 2.0.18
+      debug: 2.6.9
+      negotiator: 0.6.4
+      on-headers: 1.1.0
+      safe-buffer: 5.2.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  concat-map@0.0.1: {}
+
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
+  config-file-ts@0.2.8-rc1:
+    dependencies:
+      glob: 10.5.0
+      typescript: 5.9.3
+
+  confusing-browser-globals@1.0.11: {}
+
+  connect-history-api-fallback@2.0.0: {}
+
+  console-control-strings@1.1.0: {}
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-disposition@1.0.1: {}
+
+  content-type@1.0.5: {}
+
+  conventional-changelog-angular@8.1.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-atom@5.0.0: {}
+
+  conventional-changelog-cli@5.0.0(conventional-commits-filter@5.0.0):
+    dependencies:
+      add-stream: 1.0.0
+      conventional-changelog: 6.0.0(conventional-commits-filter@5.0.0)
+      meow: 13.2.0
+      tempfile: 5.0.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+
+  conventional-changelog-codemirror@5.0.0: {}
+
+  conventional-changelog-conventionalcommits@8.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-core@8.0.0(conventional-commits-filter@5.0.0):
+    dependencies:
+      '@hutson/parse-repository-url': 5.0.0
+      add-stream: 1.0.0
+      conventional-changelog-writer: 8.2.0
+      conventional-commits-parser: 6.2.1
+      git-raw-commits: 5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1)
+      git-semver-tags: 8.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1)
+      hosted-git-info: 7.0.2
+      normalize-package-data: 6.0.2
+      read-package-up: 11.0.0
+      read-pkg: 9.0.1
+    transitivePeerDependencies:
+      - conventional-commits-filter
+
+  conventional-changelog-ember@5.0.0: {}
+
+  conventional-changelog-eslint@6.0.0: {}
+
+  conventional-changelog-express@5.0.0: {}
+
+  conventional-changelog-jquery@6.0.0: {}
+
+  conventional-changelog-jshint@5.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-preset-loader@5.0.0: {}
+
+  conventional-changelog-writer@8.2.0:
+    dependencies:
+      conventional-commits-filter: 5.0.0
+      handlebars: 4.7.8
+      meow: 13.2.0
+      semver: 7.7.3
+
+  conventional-changelog@6.0.0(conventional-commits-filter@5.0.0):
+    dependencies:
+      conventional-changelog-angular: 8.1.0
+      conventional-changelog-atom: 5.0.0
+      conventional-changelog-codemirror: 5.0.0
+      conventional-changelog-conventionalcommits: 8.0.0
+      conventional-changelog-core: 8.0.0(conventional-commits-filter@5.0.0)
+      conventional-changelog-ember: 5.0.0
+      conventional-changelog-eslint: 6.0.0
+      conventional-changelog-express: 5.0.0
+      conventional-changelog-jquery: 6.0.0
+      conventional-changelog-jshint: 5.0.0
+      conventional-changelog-preset-loader: 5.0.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+
+  conventional-commits-filter@5.0.0: {}
+
+  conventional-commits-parser@6.2.1:
+    dependencies:
+      meow: 13.2.0
+
+  convert-hrtime@5.0.0: {}
+
+  convert-source-map@1.9.0: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-es@1.2.2: {}
+
+  cookie-signature@1.0.7: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  cookie@1.1.1: {}
+
+  cookies@0.9.1:
+    dependencies:
+      depd: 2.0.0
+      keygrip: 1.1.0
+
+  copy-anything@2.0.6:
+    dependencies:
+      is-what: 3.14.1
+
+  copy-webpack-plugin@10.2.4(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      globby: 12.2.0
+      normalize-path: 3.0.0
+      schema-utils: 4.3.3
+      serialize-javascript: 6.0.2
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  copy-webpack-plugin@12.0.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      globby: 14.1.0
+      normalize-path: 3.0.0
+      schema-utils: 4.3.3
+      serialize-javascript: 6.0.2
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  core-js-compat@3.47.0:
+    dependencies:
+      browserslist: 4.28.1
+
+  core-util-is@1.0.2:
+    optional: true
+
+  core-util-is@1.0.3: {}
+
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  corser@2.0.1: {}
+
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.3
+
+  cosmiconfig@8.3.6(typescript@5.9.3):
+    dependencies:
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  cosmiconfig@9.0.0(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  crc@3.8.0:
+    dependencies:
+      buffer: 5.7.1
+    optional: true
+
+  create-require@1.1.1: {}
+
+  cron-parser@4.9.0:
+    dependencies:
+      luxon: 3.7.2
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crossws@0.3.5:
+    dependencies:
+      uncrypto: 0.1.3
+
+  crypto-random-string@4.0.0:
+    dependencies:
+      type-fest: 1.4.0
+
+  css-declaration-sorter@7.3.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  css-loader@6.11.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.6)
+      postcss-modules-scope: 3.2.1(postcss@8.5.6)
+      postcss-modules-values: 4.0.0(postcss@8.5.6)
+      postcss-value-parser: 4.2.0
+      semver: 7.7.3
+    optionalDependencies:
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  css-minimizer-webpack-plugin@5.0.1(esbuild@0.27.0)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      cssnano: 6.1.2(postcss@8.5.6)
+      jest-worker: 29.7.0
+      postcss: 8.5.6
+      schema-utils: 4.3.3
+      serialize-javascript: 6.0.2
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    optionalDependencies:
+      esbuild: 0.27.0
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-select@6.0.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 7.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
+  css-tree@2.3.1:
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.1
+
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
+  css-what@7.0.0: {}
+
+  cssesc@3.0.0: {}
+
+  cssnano-preset-default@6.1.2(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      css-declaration-sorter: 7.3.1(postcss@8.5.6)
+      cssnano-utils: 4.0.2(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-calc: 9.0.1(postcss@8.5.6)
+      postcss-colormin: 6.1.0(postcss@8.5.6)
+      postcss-convert-values: 6.1.0(postcss@8.5.6)
+      postcss-discard-comments: 6.0.2(postcss@8.5.6)
+      postcss-discard-duplicates: 6.0.3(postcss@8.5.6)
+      postcss-discard-empty: 6.0.3(postcss@8.5.6)
+      postcss-discard-overridden: 6.0.2(postcss@8.5.6)
+      postcss-merge-longhand: 6.0.5(postcss@8.5.6)
+      postcss-merge-rules: 6.1.1(postcss@8.5.6)
+      postcss-minify-font-values: 6.1.0(postcss@8.5.6)
+      postcss-minify-gradients: 6.0.3(postcss@8.5.6)
+      postcss-minify-params: 6.1.0(postcss@8.5.6)
+      postcss-minify-selectors: 6.0.4(postcss@8.5.6)
+      postcss-normalize-charset: 6.0.2(postcss@8.5.6)
+      postcss-normalize-display-values: 6.0.2(postcss@8.5.6)
+      postcss-normalize-positions: 6.0.2(postcss@8.5.6)
+      postcss-normalize-repeat-style: 6.0.2(postcss@8.5.6)
+      postcss-normalize-string: 6.0.2(postcss@8.5.6)
+      postcss-normalize-timing-functions: 6.0.2(postcss@8.5.6)
+      postcss-normalize-unicode: 6.1.0(postcss@8.5.6)
+      postcss-normalize-url: 6.0.2(postcss@8.5.6)
+      postcss-normalize-whitespace: 6.0.2(postcss@8.5.6)
+      postcss-ordered-values: 6.0.2(postcss@8.5.6)
+      postcss-reduce-initial: 6.1.0(postcss@8.5.6)
+      postcss-reduce-transforms: 6.0.2(postcss@8.5.6)
+      postcss-svgo: 6.0.3(postcss@8.5.6)
+      postcss-unique-selectors: 6.0.4(postcss@8.5.6)
+
+  cssnano-utils@4.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  cssnano@6.1.2(postcss@8.5.6):
+    dependencies:
+      cssnano-preset-default: 6.1.2(postcss@8.5.6)
+      lilconfig: 3.1.3
+      postcss: 8.5.6
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  date-fns@4.1.0: {}
+
+  date-format@4.0.14: {}
+
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decamelize@1.2.0: {}
+
+  decimal.js@10.6.0: {}
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  decompress-response@6.0.0:
+    dependencies:
+      mimic-response: 3.1.0
+
+  dedent@1.7.1(babel-plugin-macros@3.1.0):
+    optionalDependencies:
+      babel-plugin-macros: 3.1.0
+
+  deep-equal@1.0.1: {}
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.4.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  default-shell@2.2.0: {}
+
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  defer-to-connect@2.0.1: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-lazy-prop@2.0.0: {}
+
+  define-lazy-prop@3.0.0: {}
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  defu@6.1.6: {}
+
+  delayed-stream@1.0.0: {}
+
+  delegates@1.0.0: {}
+
+  depd@1.1.2: {}
+
+  depd@2.0.0: {}
+
+  dequal@2.0.3: {}
+
+  destr@2.0.5: {}
+
+  destroy@1.2.0: {}
+
+  detect-libc@1.0.3:
+    optional: true
+
+  detect-libc@2.1.2: {}
+
+  detect-newline@3.1.0: {}
+
+  detect-node@2.1.0: {}
+
+  detect-port@1.6.1:
+    dependencies:
+      address: 1.2.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  deterministic-object-hash@2.0.2:
+    dependencies:
+      base-64: 1.0.0
+
+  devalue@5.6.4: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  didyoumean@1.2.2: {}
+
+  diff@4.0.2: {}
+
+  diff@8.0.3: {}
+
+  dijkstrajs@1.0.3: {}
+
+  dir-compare@4.2.0:
+    dependencies:
+      minimatch: 3.1.2
+      p-limit: 3.1.0
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dlv@1.1.3: {}
+
+  dmg-builder@25.1.8:
+    dependencies:
+      app-builder-lib: 25.1.8(dmg-builder@25.1.8)
+      builder-util: 25.1.7
+      builder-util-runtime: 9.2.10
+      fs-extra: 10.1.0
+      iconv-lite: 0.6.3
+      js-yaml: 4.1.1
+    optionalDependencies:
+      dmg-license: 1.0.11
+    transitivePeerDependencies:
+      - bluebird
+      - electron-builder-squirrel-windows
+      - supports-color
+
+  dmg-builder@26.0.12:
+    dependencies:
+      app-builder-lib: 26.0.12(dmg-builder@26.0.12)
+      builder-util: 26.0.11
+      builder-util-runtime: 9.3.1
+      fs-extra: 10.1.0
+      iconv-lite: 0.6.3
+      js-yaml: 4.1.1
+    optionalDependencies:
+      dmg-license: 1.0.11
+    transitivePeerDependencies:
+      - bluebird
+      - electron-builder-squirrel-windows
+      - supports-color
+
+  dmg-license@1.0.11:
+    dependencies:
+      '@types/plist': 3.0.5
+      '@types/verror': 1.10.11
+      ajv: 6.14.0
+      crc: 3.8.0
+      iconv-corefoundation: 1.1.7
+      plist: 3.1.0
+      smart-buffer: 4.2.0
+      verror: 1.10.1
+    optional: true
+
+  dns-packet@5.6.1:
+    dependencies:
+      '@leichtgewicht/ip-codec': 2.0.5
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  dom-walk@0.1.2: {}
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dot-prop@5.3.0:
+    dependencies:
+      is-obj: 2.0.0
+
+  dotenv-expand@11.0.7:
+    dependencies:
+      dotenv: 16.6.1
+
+  dotenv@16.4.7: {}
+
+  dotenv@16.6.1: {}
+
+  drizzle-kit@0.31.5:
+    dependencies:
+      '@drizzle-team/brocli': 0.10.2
+      '@esbuild-kit/esm-loader': 2.6.5
+      esbuild: 0.25.12
+      esbuild-register: 3.6.0(esbuild@0.25.12)
+    transitivePeerDependencies:
+      - supports-color
+
+  drizzle-orm@0.45.2(@types/better-sqlite3@7.6.13)(better-sqlite3@12.5.0):
+    optionalDependencies:
+      '@types/better-sqlite3': 7.6.13
+      better-sqlite3: 12.5.0
+
+  dset@3.1.4: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  duplexer2@0.1.4:
+    dependencies:
+      readable-stream: 2.3.8
+
+  eastasianwidth@0.2.0: {}
+
+  ee-first@1.1.1: {}
+
+  ejs@3.1.10:
+    dependencies:
+      jake: 10.9.4
+
+  electron-builder@25.1.8:
+    dependencies:
+      app-builder-lib: 25.1.8(dmg-builder@25.1.8)
+      builder-util: 25.1.7
+      builder-util-runtime: 9.2.10
+      chalk: 4.1.2
+      dmg-builder: 25.1.8
+      fs-extra: 10.1.0
+      is-ci: 3.0.1
+      lazy-val: 1.0.5
+      simple-update-notifier: 2.0.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bluebird
+      - electron-builder-squirrel-windows
+      - supports-color
+
+  electron-builder@26.0.12:
+    dependencies:
+      app-builder-lib: 26.0.12(dmg-builder@26.0.12)
+      builder-util: 26.0.11
+      builder-util-runtime: 9.3.1
+      chalk: 4.1.2
+      dmg-builder: 26.0.12
+      fs-extra: 10.1.0
+      is-ci: 3.0.1
+      lazy-val: 1.0.5
+      simple-update-notifier: 2.0.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bluebird
+      - electron-builder-squirrel-windows
+      - supports-color
+
+  electron-conf@1.3.0(electron@39.8.8):
+    dependencies:
+      ajv: 8.17.1
+      electron: 39.8.8
+
+  electron-dl@4.0.0:
+    dependencies:
+      ext-name: 5.0.0
+      pupa: 3.3.0
+      unused-filename: 4.0.1
+
+  electron-playwright-helpers@1.8.2:
+    dependencies:
+      '@electron/asar': 3.4.1
+
+  electron-publish@25.1.7:
+    dependencies:
+      '@types/fs-extra': 9.0.13
+      builder-util: 25.1.7
+      builder-util-runtime: 9.2.10
+      chalk: 4.1.2
+      fs-extra: 10.1.0
+      lazy-val: 1.0.5
+      mime: 2.6.0
+    transitivePeerDependencies:
+      - supports-color
+
+  electron-publish@26.0.11:
+    dependencies:
+      '@types/fs-extra': 9.0.13
+      builder-util: 26.0.11
+      builder-util-runtime: 9.3.1
+      chalk: 4.1.2
+      form-data: 4.0.5
+      fs-extra: 10.1.0
+      lazy-val: 1.0.5
+      mime: 2.6.0
+    transitivePeerDependencies:
+      - supports-color
+
+  electron-to-chromium@1.5.267: {}
+
+  electron@39.8.8:
+    dependencies:
+      '@electron/get': 2.0.3
+      '@types/node': 22.19.3
+      extract-zip: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  emittery@0.13.1: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  emojilib@2.4.0: {}
+
+  emojis-list@3.0.0: {}
+
+  encodeurl@2.0.0: {}
+
+  encoding@0.1.13:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
+  enhanced-resolve@5.18.4:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  enquirer@2.3.6:
+    dependencies:
+      ansi-colors: 4.1.3
+
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
+  env-ci@11.2.0:
+    dependencies:
+      execa: 8.0.1
+      java-properties: 1.0.2
+
+  env-paths@2.2.1: {}
+
+  environment@1.1.0: {}
+
+  err-code@2.0.3: {}
+
+  errno@0.1.8:
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  error-stack-parser@2.1.4:
+    dependencies:
+      stackframe: 1.3.4
+
+  es-abstract@1.24.1:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-module-lexer@2.0.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  es6-error@4.1.1:
+    optional: true
+
+  es6-promise@4.2.8: {}
+
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.15.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  esbuild-register@3.6.0(esbuild@0.25.12):
+    dependencies:
+      debug: 4.4.3
+      esbuild: 0.25.12
+    transitivePeerDependencies:
+      - supports-color
+
+  esbuild-register@3.6.0(esbuild@0.27.0):
+    dependencies:
+      debug: 4.4.3
+      esbuild: 0.27.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  esbuild-wasm@0.27.2: {}
+
+  esbuild@0.18.20:
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
+  esbuild@0.27.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.0
+      '@esbuild/android-arm': 0.27.0
+      '@esbuild/android-arm64': 0.27.0
+      '@esbuild/android-x64': 0.27.0
+      '@esbuild/darwin-arm64': 0.27.0
+      '@esbuild/darwin-x64': 0.27.0
+      '@esbuild/freebsd-arm64': 0.27.0
+      '@esbuild/freebsd-x64': 0.27.0
+      '@esbuild/linux-arm': 0.27.0
+      '@esbuild/linux-arm64': 0.27.0
+      '@esbuild/linux-ia32': 0.27.0
+      '@esbuild/linux-loong64': 0.27.0
+      '@esbuild/linux-mips64el': 0.27.0
+      '@esbuild/linux-ppc64': 0.27.0
+      '@esbuild/linux-riscv64': 0.27.0
+      '@esbuild/linux-s390x': 0.27.0
+      '@esbuild/linux-x64': 0.27.0
+      '@esbuild/netbsd-arm64': 0.27.0
+      '@esbuild/netbsd-x64': 0.27.0
+      '@esbuild/openbsd-arm64': 0.27.0
+      '@esbuild/openbsd-x64': 0.27.0
+      '@esbuild/openharmony-arm64': 0.27.0
+      '@esbuild/sunos-x64': 0.27.0
+      '@esbuild/win32-arm64': 0.27.0
+      '@esbuild/win32-ia32': 0.27.0
+      '@esbuild/win32-x64': 0.27.0
+
+  esbuild@0.27.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.2
+      '@esbuild/android-arm': 0.27.2
+      '@esbuild/android-arm64': 0.27.2
+      '@esbuild/android-x64': 0.27.2
+      '@esbuild/darwin-arm64': 0.27.2
+      '@esbuild/darwin-x64': 0.27.2
+      '@esbuild/freebsd-arm64': 0.27.2
+      '@esbuild/freebsd-x64': 0.27.2
+      '@esbuild/linux-arm': 0.27.2
+      '@esbuild/linux-arm64': 0.27.2
+      '@esbuild/linux-ia32': 0.27.2
+      '@esbuild/linux-loong64': 0.27.2
+      '@esbuild/linux-mips64el': 0.27.2
+      '@esbuild/linux-ppc64': 0.27.2
+      '@esbuild/linux-riscv64': 0.27.2
+      '@esbuild/linux-s390x': 0.27.2
+      '@esbuild/linux-x64': 0.27.2
+      '@esbuild/netbsd-arm64': 0.27.2
+      '@esbuild/netbsd-x64': 0.27.2
+      '@esbuild/openbsd-arm64': 0.27.2
+      '@esbuild/openbsd-x64': 0.27.2
+      '@esbuild/openharmony-arm64': 0.27.2
+      '@esbuild/sunos-x64': 0.27.2
+      '@esbuild/win32-arm64': 0.27.2
+      '@esbuild/win32-ia32': 0.27.2
+      '@esbuild/win32-x64': 0.27.2
+
+  esbuild@0.27.7:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
+
+  escalade@3.2.0: {}
+
+  escape-goat@4.0.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@2.0.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.2(jiti@1.21.7))
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-playwright@1.8.3(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+      globals: 13.24.0
+
+  eslint-scope@5.1.1:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-scope@9.1.0:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.39.2(jiti@1.21.7):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.39.2
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.14.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 1.21.7
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+
+  esprima@4.0.1: {}
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@4.3.0: {}
+
+  estraverse@5.3.0: {}
+
+  estree-util-attach-comments@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  estree-util-build-jsx@3.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-walker: 3.0.3
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+
+  estree-util-to-js@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      astring: 1.9.0
+      source-map: 0.7.6
+
+  estree-util-visit@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  eventemitter3@4.0.7: {}
+
+  eventemitter3@5.0.1: {}
+
+  events@3.3.0: {}
+
+  eventsource-parser@3.0.6: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.0.6
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  exit-x@0.2.2: {}
+
+  expand-template@2.0.3: {}
+
+  expand-tilde@2.0.2:
+    dependencies:
+      homedir-polyfill: 1.0.3
+
+  expect@30.2.0:
+    dependencies:
+      '@jest/expect-utils': 30.2.0
+      '@jest/get-type': 30.1.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+
+  exponential-backoff@3.1.3: {}
+
+  express-rate-limit@8.3.0(express@5.2.1):
+    dependencies:
+      express: 5.2.1
+      ip-address: 10.1.0
+
+  express@4.22.1:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.4
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.0.7
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.2
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.13
+      proxy-addr: 2.0.7
+      qs: 6.14.1
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.2
+      serve-static: 1.16.3
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.1
+      content-disposition: 1.0.1
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.1
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  ext-list@2.2.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  ext-name@5.0.0:
+    dependencies:
+      ext-list: 2.2.2
+      sort-keys-length: 1.0.1
+
+  extend@3.0.2: {}
+
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.4.3
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
+  extsprintf@1.4.1:
+    optional: true
+
+  fast-content-type-parse@3.0.0: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.0: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  faye-websocket@0.11.4:
+    dependencies:
+      websocket-driver: 0.7.4
+
+  fb-watchman@2.0.2:
+    dependencies:
+      bser: 2.1.1
+
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  figures@2.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-uri-to-path@1.0.0: {}
+
+  filelist@1.0.4:
+    dependencies:
+      minimatch: 5.1.6
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@1.3.2:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  find-cache-dir@4.0.0:
+    dependencies:
+      common-path-prefix: 3.0.0
+      pkg-dir: 7.0.0
+
+  find-file-up@2.0.1:
+    dependencies:
+      resolve-dir: 1.0.1
+
+  find-pkg@2.0.0:
+    dependencies:
+      find-file-up: 2.0.1
+
+  find-up-simple@1.0.1: {}
+
+  find-up@2.1.0:
+    dependencies:
+      locate-path: 2.0.0
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  find-up@6.3.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+
+  find-versions@6.0.0:
+    dependencies:
+      semver-regex: 4.0.5
+      super-regex: 1.1.0
+
+  fix-path@5.0.0:
+    dependencies:
+      shell-path: 3.1.0
+      strip-ansi: 7.1.2
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.4.2
+      keyv: 4.5.4
+
+  flat@5.0.2: {}
+
+  flatted@3.4.2: {}
+
+  flattie@1.1.1: {}
+
+  follow-redirects@1.16.0(debug@4.4.3):
+    optionalDependencies:
+      debug: 4.4.3
+
+  fontace@0.4.1:
+    dependencies:
+      fontkitten: 1.0.2
+
+  fontkitten@1.0.2:
+    dependencies:
+      tiny-inflate: 1.0.3
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  fork-ts-checker-webpack-plugin@7.2.13(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      chalk: 4.1.2
+      chokidar: 3.6.0
+      cosmiconfig: 7.1.0
+      deepmerge: 4.3.1
+      fs-extra: 10.1.0
+      memfs: 3.5.3
+      minimatch: 3.1.2
+      node-abort-controller: 3.1.1
+      schema-utils: 3.3.0
+      semver: 7.7.3
+      tapable: 2.3.0
+      typescript: 5.9.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      chalk: 4.1.2
+      chokidar: 4.0.3
+      cosmiconfig: 8.3.6(typescript@5.9.3)
+      deepmerge: 4.3.1
+      fs-extra: 10.1.0
+      memfs: 3.5.3
+      minimatch: 3.1.2
+      node-abort-controller: 3.1.1
+      schema-utils: 3.3.0
+      semver: 7.7.3
+      tapable: 2.3.0
+      typescript: 5.9.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  forwarded@0.2.0: {}
+
+  fraction.js@5.3.4: {}
+
+  fresh@0.5.2: {}
+
+  fresh@2.0.0: {}
+
+  from2@2.3.0:
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 2.3.8
+
+  front-matter@4.0.2:
+    dependencies:
+      js-yaml: 3.14.2
+
+  fs-constants@1.0.0: {}
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@11.3.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@8.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fs-extra@9.1.0:
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+
+  fs-minipass@3.0.3:
+    dependencies:
+      minipass: 7.1.2
+
+  fs-monkey@1.1.0: {}
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.2:
+    optional: true
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function-timeout@1.0.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
+  gauge@4.0.4:
+    dependencies:
+      aproba: 2.1.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+
+  generator-function@2.0.1: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.4.0: {}
+
+  get-east-asian-width@1.5.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-package-type@0.1.0: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.3
+
+  get-stream@6.0.1: {}
+
+  get-stream@7.0.1: {}
+
+  get-stream@8.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  git-log-parser@1.2.1:
+    dependencies:
+      argv-formatter: 1.0.0
+      spawn-error-forwarder: 1.0.0
+      split2: 1.0.0
+      stream-combiner2: 1.1.1
+      through2: 2.0.5
+      traverse: 0.6.8
+
+  git-raw-commits@5.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1):
+    dependencies:
+      '@conventional-changelog/git-client': 1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1)
+      meow: 13.2.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+      - conventional-commits-parser
+
+  git-semver-tags@8.0.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1):
+    dependencies:
+      '@conventional-changelog/git-client': 1.0.1(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.2.1)
+      meow: 13.2.0
+    transitivePeerDependencies:
+      - conventional-commits-filter
+      - conventional-commits-parser
+
+  github-from-package@0.0.0: {}
+
+  github-slugger@2.0.0: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-to-regex.js@1.2.0(tslib@2.8.1):
+    dependencies:
+      tslib: 2.8.1
+
+  glob-to-regexp@0.4.1: {}
+
+  glob@10.5.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.3
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@13.0.6:
+    dependencies:
+      minimatch: 10.2.2
+      minipass: 7.1.3
+      path-scurry: 2.0.2
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  glob@8.1.0:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.9
+      once: 1.4.0
+
+  global-agent@3.0.0:
+    dependencies:
+      boolean: 3.2.0
+      es6-error: 4.1.1
+      matcher: 3.0.0
+      roarr: 2.15.4
+      semver: 7.7.3
+      serialize-error: 7.0.1
+    optional: true
+
+  global-modules@1.0.0:
+    dependencies:
+      global-prefix: 1.0.2
+      is-windows: 1.0.2
+      resolve-dir: 1.0.1
+
+  global-prefix@1.0.2:
+    dependencies:
+      expand-tilde: 2.0.2
+      homedir-polyfill: 1.0.3
+      ini: 1.3.8
+      is-windows: 1.0.2
+      which: 1.3.1
+
+  global@4.4.0:
+    dependencies:
+      min-document: 2.19.2
+      process: 0.11.10
+
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
+  globals@14.0.0: {}
+
+  globals@15.9.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  globby@12.2.0:
+    dependencies:
+      array-union: 3.0.1
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 4.0.0
+
+  globby@14.1.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 2.3.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      path-type: 6.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.3.0
+
+  gopd@1.2.0: {}
+
+  got@11.8.6:
+    dependencies:
+      '@sindresorhus/is': 4.6.0
+      '@szmarczak/http-timer': 4.0.6
+      '@types/cacheable-request': 6.0.3
+      '@types/responselike': 1.0.3
+      cacheable-lookup: 5.0.4
+      cacheable-request: 7.0.4
+      decompress-response: 6.0.0
+      http2-wrapper: 1.0.3
+      lowercase-keys: 2.0.0
+      p-cancelable: 2.1.1
+      responselike: 2.0.1
+
+  graceful-fs@4.2.10: {}
+
+  graceful-fs@4.2.11: {}
+
+  h3@1.15.10:
+    dependencies:
+      cookie-es: 1.2.2
+      crossws: 0.3.5
+      defu: 6.1.6
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.4
+      radix3: 1.1.2
+      ufo: 1.6.3
+      uncrypto: 0.1.3
+
+  handle-thing@2.0.1: {}
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  harmony-reflect@1.6.2: {}
+
+  has-bigints@1.1.0: {}
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  has-unicode@2.0.1: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.0
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-estree@3.1.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
+  he@1.2.0: {}
+
+  highlight.js@10.7.3: {}
+
+  hls.js@1.6.13: {}
+
+  homedir-polyfill@1.0.3:
+    dependencies:
+      parse-passwd: 1.0.0
+
+  hono@4.12.14: {}
+
+  hook-std@4.0.0: {}
+
+  hosted-git-info@4.1.0:
+    dependencies:
+      lru-cache: 6.0.0
+
+  hosted-git-info@7.0.2:
+    dependencies:
+      lru-cache: 10.4.3
+
+  hosted-git-info@8.1.0:
+    dependencies:
+      lru-cache: 10.4.3
+
+  hosted-git-info@9.0.2:
+    dependencies:
+      lru-cache: 11.2.4
+
+  hpack.js@2.1.6:
+    dependencies:
+      inherits: 2.0.4
+      obuf: 1.1.2
+      readable-stream: 2.3.8
+      wbuf: 1.7.3
+
+  html-encoding-sniffer@3.0.0:
+    dependencies:
+      whatwg-encoding: 2.0.0
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-entities@2.6.0: {}
+
+  html-escaper@2.0.2: {}
+
+  html-escaper@3.0.3: {}
+
+  html-void-elements@3.0.0: {}
+
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
+  http-assert@1.5.0:
+    dependencies:
+      deep-equal: 1.0.1
+      http-errors: 1.8.1
+
+  http-cache-semantics@4.2.0: {}
+
+  http-deceiver@1.2.7: {}
+
+  http-errors@1.6.3:
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+
+  http-errors@1.8.1:
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 1.5.0
+      toidentifier: 1.0.1
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-parser-js@0.5.10: {}
+
+  http-proxy-agent@5.0.0:
+    dependencies:
+      '@tootallnate/once': 2.0.0
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  http-proxy-middleware@2.0.9(@types/express@4.17.25):
+    dependencies:
+      '@types/http-proxy': 1.17.17
+      http-proxy: 1.18.1(debug@4.4.3)
+      is-glob: 4.0.3
+      is-plain-obj: 3.0.0
+      micromatch: 4.0.8
+    optionalDependencies:
+      '@types/express': 4.17.25
+    transitivePeerDependencies:
+      - debug
+
+  http-proxy-middleware@2.0.9(@types/express@5.0.6):
+    dependencies:
+      '@types/http-proxy': 1.17.17
+      http-proxy: 1.18.1(debug@4.4.3)
+      is-glob: 4.0.3
+      is-plain-obj: 3.0.0
+      micromatch: 4.0.8
+    optionalDependencies:
+      '@types/express': 5.0.6
+    transitivePeerDependencies:
+      - debug
+
+  http-proxy-middleware@3.0.5:
+    dependencies:
+      '@types/http-proxy': 1.17.17
+      debug: 4.4.3
+      http-proxy: 1.18.1(debug@4.4.3)
+      is-glob: 4.0.3
+      is-plain-object: 5.0.0
+      micromatch: 4.0.8
+    transitivePeerDependencies:
+      - supports-color
+
+  http-proxy@1.18.1(debug@4.4.3):
+    dependencies:
+      eventemitter3: 4.0.7
+      follow-redirects: 1.16.0(debug@4.4.3)
+      requires-port: 1.0.0
+    transitivePeerDependencies:
+      - debug
+
+  http-server@14.1.1:
+    dependencies:
+      basic-auth: 2.0.1
+      chalk: 4.1.2
+      corser: 2.0.1
+      he: 1.2.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy: 1.18.1(debug@4.4.3)
+      mime: 1.6.0
+      minimist: 1.2.8
+      opener: 1.5.2
+      portfinder: 1.0.38
+      secure-compare: 3.0.1
+      union: 0.5.0
+      url-join: 4.0.1
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
+  http2-wrapper@1.0.3:
+    dependencies:
+      quick-lru: 5.1.1
+      resolve-alpn: 1.2.1
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@5.0.0: {}
+
+  human-signals@8.0.1: {}
+
+  humanize-ms@1.2.1:
+    dependencies:
+      ms: 2.1.3
+
+  hyperdyperid@1.2.0: {}
+
+  iconv-corefoundation@1.1.7:
+    dependencies:
+      cli-truncate: 2.1.0
+      node-addon-api: 1.7.2
+    optional: true
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.1:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  icss-utils@5.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  identity-obj-proxy@3.0.0:
+    dependencies:
+      harmony-reflect: 1.6.2
+
+  ieee754@1.2.1: {}
+
+  ignore-walk@8.0.0:
+    dependencies:
+      minimatch: 10.1.1
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  image-size@0.5.5:
+    optional: true
+
+  immutable@5.1.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-from-esm@2.0.0:
+    dependencies:
+      debug: 4.4.3
+      import-meta-resolve: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  import-local@3.2.0:
+    dependencies:
+      pkg-dir: 4.2.0
+      resolve-cwd: 3.0.0
+
+  import-meta-resolve@4.2.0: {}
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  indent-string@5.0.0: {}
+
+  index-to-position@1.2.0: {}
+
+  individual@2.0.0: {}
+
+  infer-owner@1.0.4: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.3: {}
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ini@6.0.0: {}
+
+  inline-style-parser@0.2.7: {}
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  into-stream@7.0.0:
+    dependencies:
+      from2: 2.3.0
+      p-is-promise: 3.0.0
+
+  ip-address@10.1.0: {}
+
+  ipaddr.js@1.9.1: {}
+
+  ipaddr.js@2.3.0: {}
+
+  iptv-playlist-parser@https://codeload.github.com/4gray/iptv-playlist-parser/tar.gz/38a62d0b7c98f442bfa102ee8e1fe14169ae9386:
+    dependencies:
+      is-valid-path: 0.1.1
+      validator: 13.15.26
+
+  iron-webcrypto@1.2.1: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-arrayish@0.2.1: {}
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-callable@1.2.7: {}
+
+  is-ci@3.0.1:
+    dependencies:
+      ci-info: 3.9.0
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-decimal@2.0.1: {}
+
+  is-docker@2.2.1: {}
+
+  is-docker@3.0.0: {}
+
+  is-extglob@1.0.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+
+  is-function@1.0.2: {}
+
+  is-generator-fn@2.1.0: {}
+
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@2.0.1:
+    dependencies:
+      is-extglob: 1.0.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hexadecimal@2.0.1: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@1.0.0: {}
+
+  is-interactive@2.0.0: {}
+
+  is-invalid-path@0.1.0:
+    dependencies:
+      is-glob: 2.0.1
+
+  is-lambda@1.0.1: {}
+
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-network-error@1.3.0: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-obj@2.0.0: {}
+
+  is-plain-obj@1.1.0: {}
+
+  is-plain-obj@3.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-plain-object@2.0.4:
+    dependencies:
+      isobject: 3.0.1
+
+  is-plain-object@5.0.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-promise@4.0.0: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-stream@2.0.1: {}
+
+  is-stream@3.0.0: {}
+
+  is-stream@4.0.1: {}
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-unicode-supported@0.1.0: {}
+
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-valid-path@0.1.1:
+    dependencies:
+      is-invalid-path: 0.1.0
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-what@3.14.1: {}
+
+  is-windows@1.0.2: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  isarray@1.0.0: {}
+
+  isarray@2.0.5: {}
+
+  isbinaryfile@4.0.10: {}
+
+  isbinaryfile@5.0.7: {}
+
+  isexe@2.0.0: {}
+
+  isexe@4.0.0: {}
+
+  isobject@3.0.1: {}
+
+  isomorphic-ws@5.0.0(ws@8.18.0):
+    dependencies:
+      ws: 8.18.0
+
+  issue-parser@7.0.1:
+    dependencies:
+      lodash.capitalize: 4.2.1
+      lodash.escaperegexp: 4.1.2
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.uniqby: 4.7.0
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-instrument@6.0.3:
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/parser': 7.29.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jake@10.9.4:
+    dependencies:
+      async: 3.2.6
+      filelist: 1.0.4
+      picocolors: 1.1.1
+
+  java-properties@1.0.2: {}
+
+  jest-changed-files@30.2.0:
+    dependencies:
+      execa: 5.1.1
+      jest-util: 30.2.0
+      p-limit: 3.1.0
+
+  jest-circus@30.2.0(babel-plugin-macros@3.1.0):
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/expect': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      co: 4.6.0
+      dedent: 1.7.1(babel-plugin-macros@3.1.0)
+      is-generator-fn: 2.1.0
+      jest-each: 30.2.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-runtime: 30.2.0
+      jest-snapshot: 30.2.0
+      jest-util: 30.2.0
+      p-limit: 3.1.0
+      pretty-format: 30.2.0
+      pure-rand: 7.0.1
+      slash: 3.0.0
+      stack-utils: 2.0.6
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-cli@30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)):
+    dependencies:
+      '@jest/core': 30.2.0(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      '@jest/test-result': 30.2.0
+      '@jest/types': 30.2.0
+      chalk: 4.1.2
+      exit-x: 0.2.2
+      import-local: 3.2.0
+      jest-config: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - esbuild-register
+      - supports-color
+      - ts-node
+
+  jest-config@30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@jest/get-type': 30.1.0
+      '@jest/pattern': 30.0.1
+      '@jest/test-sequencer': 30.2.0
+      '@jest/types': 30.2.0
+      babel-jest: 30.2.0(@babel/core@7.28.5)
+      chalk: 4.1.2
+      ci-info: 4.3.1
+      deepmerge: 4.3.1
+      glob: 10.5.0
+      graceful-fs: 4.2.11
+      jest-circus: 30.2.0(babel-plugin-macros@3.1.0)
+      jest-docblock: 30.2.0
+      jest-environment-node: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-resolve: 30.2.0
+      jest-runner: 30.2.0
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 30.2.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 20.19.9
+      esbuild-register: 3.6.0(esbuild@0.27.0)
+      ts-node: 10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-diff@30.2.0:
+    dependencies:
+      '@jest/diff-sequences': 30.0.1
+      '@jest/get-type': 30.1.0
+      chalk: 4.1.2
+      pretty-format: 30.2.0
+
+  jest-docblock@30.2.0:
+    dependencies:
+      detect-newline: 3.1.0
+
+  jest-each@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      '@jest/types': 30.2.0
+      chalk: 4.1.2
+      jest-util: 30.2.0
+      pretty-format: 30.2.0
+
+  jest-environment-jsdom@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/environment-jsdom-abstract': 30.2.0(jsdom@26.1.0)
+      '@types/jsdom': 21.1.7
+      '@types/node': 20.19.9
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jest-environment-node@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/fake-timers': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+
+  jest-haste-map@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      anymatch: 3.1.3
+      fb-watchman: 2.0.2
+      graceful-fs: 4.2.11
+      jest-regex-util: 30.0.1
+      jest-util: 30.2.0
+      jest-worker: 30.2.0
+      micromatch: 4.0.8
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  jest-leak-detector@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      pretty-format: 30.2.0
+
+  jest-matcher-utils@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      chalk: 4.1.2
+      jest-diff: 30.2.0
+      pretty-format: 30.2.0
+
+  jest-message-util@30.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@jest/types': 30.2.0
+      '@types/stack-utils': 2.0.3
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      pretty-format: 30.2.0
+      slash: 3.0.0
+      stack-utils: 2.0.6
+
+  jest-mock@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      jest-util: 30.2.0
+
+  jest-pnp-resolver@1.2.3(jest-resolve@30.2.0):
+    optionalDependencies:
+      jest-resolve: 30.2.0
+
+  jest-preset-angular@15.0.3(c95b39587e3b37a11597cec5dd875b5c):
+    dependencies:
+      '@angular/compiler-cli': 21.1.5(@angular/compiler@21.1.5)(typescript@5.9.3)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+      '@angular/platform-browser-dynamic': 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/compiler@21.1.5)(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))
+      '@jest/environment-jsdom-abstract': 30.2.0(jsdom@26.1.0)
+      bs-logger: 0.2.6
+      esbuild-wasm: 0.27.2
+      jest: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      jest-util: 30.2.0
+      jsdom: 26.1.0
+      pretty-format: 30.2.0
+      ts-jest: 29.4.6(@babel/core@7.28.5)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.5))(esbuild@0.27.0)(jest-util@30.2.0)(jest@30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)))(typescript@5.9.3)
+      typescript: 5.9.3
+    optionalDependencies:
+      esbuild: 0.27.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@jest/transform'
+      - '@jest/types'
+      - babel-jest
+      - canvas
+
+  jest-regex-util@30.0.1: {}
+
+  jest-resolve-dependencies@30.2.0:
+    dependencies:
+      jest-regex-util: 30.0.1
+      jest-snapshot: 30.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-resolve@30.2.0:
+    dependencies:
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      jest-pnp-resolver: 1.2.3(jest-resolve@30.2.0)
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      slash: 3.0.0
+      unrs-resolver: 1.11.1
+
+  jest-runner@30.2.0:
+    dependencies:
+      '@jest/console': 30.2.0
+      '@jest/environment': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      emittery: 0.13.1
+      exit-x: 0.2.2
+      graceful-fs: 4.2.11
+      jest-docblock: 30.2.0
+      jest-environment-node: 30.2.0
+      jest-haste-map: 30.2.0
+      jest-leak-detector: 30.2.0
+      jest-message-util: 30.2.0
+      jest-resolve: 30.2.0
+      jest-runtime: 30.2.0
+      jest-util: 30.2.0
+      jest-watcher: 30.2.0
+      jest-worker: 30.2.0
+      p-limit: 3.1.0
+      source-map-support: 0.5.13
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-runtime@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/fake-timers': 30.2.0
+      '@jest/globals': 30.2.0
+      '@jest/source-map': 30.0.1
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      cjs-module-lexer: 2.2.0
+      collect-v8-coverage: 1.0.3
+      glob: 10.5.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-resolve: 30.2.0
+      jest-snapshot: 30.2.0
+      jest-util: 30.2.0
+      slash: 3.0.0
+      strip-bom: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-snapshot@30.2.0:
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/generator': 7.28.5
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/types': 7.29.0
+      '@jest/expect-utils': 30.2.0
+      '@jest/get-type': 30.1.0
+      '@jest/snapshot-utils': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.5)
+      chalk: 4.1.2
+      expect: 30.2.0
+      graceful-fs: 4.2.11
+      jest-diff: 30.2.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-util: 30.2.0
+      pretty-format: 30.2.0
+      semver: 7.7.3
+      synckit: 0.11.11
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-util@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      graceful-fs: 4.2.11
+      picomatch: 2.3.2
+
+  jest-util@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      chalk: 4.1.2
+      ci-info: 4.3.1
+      graceful-fs: 4.2.11
+      picomatch: 4.0.3
+
+  jest-validate@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      '@jest/types': 30.2.0
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      leven: 3.1.0
+      pretty-format: 30.2.0
+
+  jest-watcher@30.2.0:
+    dependencies:
+      '@jest/test-result': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.9
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      emittery: 0.13.1
+      jest-util: 30.2.0
+      string-length: 4.0.2
+
+  jest-worker@27.5.1:
+    dependencies:
+      '@types/node': 20.19.9
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jest-worker@29.7.0:
+    dependencies:
+      '@types/node': 20.19.9
+      jest-util: 29.7.0
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jest-worker@30.2.0:
+    dependencies:
+      '@types/node': 20.19.9
+      '@ungap/structured-clone': 1.3.0
+      jest-util: 30.2.0
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jest@30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)):
+    dependencies:
+      '@jest/core': 30.2.0(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      '@jest/types': 30.2.0
+      import-local: 3.2.0
+      jest-cli: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - esbuild-register
+      - supports-color
+      - ts-node
+
+  jiti@1.21.7: {}
+
+  jiti@2.4.2: {}
+
+  jiti@2.6.1: {}
+
+  jose@6.1.3: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@3.14.2:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.23
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.18.3
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-parse-better-errors@1.0.2: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-parse-even-better-errors@5.0.0: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json-stringify-safe@5.0.1:
+    optional: true
+
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
+  json5@2.2.3: {}
+
+  jsonc-eslint-parser@2.4.2:
+    dependencies:
+      acorn: 8.15.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.7.3
+
+  jsonc-parser@3.2.0: {}
+
+  jsonc-parser@3.3.1: {}
+
+  jsonfile@4.0.0:
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonparse@1.3.1: {}
+
+  keycode@2.2.1: {}
+
+  keygrip@1.1.0:
+    dependencies:
+      tsscmp: 1.0.6
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  kind-of@6.0.3: {}
+
+  kleur@3.0.3: {}
+
+  klona@2.0.6: {}
+
+  koa-compose@4.1.0: {}
+
+  koa@3.0.3:
+    dependencies:
+      accepts: 1.3.8
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookies: 0.9.1
+      delegates: 1.0.0
+      destroy: 1.2.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      fresh: 0.5.2
+      http-assert: 1.5.0
+      http-errors: 2.0.1
+      koa-compose: 4.1.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+
+  launch-editor@2.12.0:
+    dependencies:
+      picocolors: 1.1.1
+      shell-quote: 1.8.3
+
+  lazy-val@1.0.5: {}
+
+  less-loader@11.1.4(less@4.5.1)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      less: 4.5.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  less@4.5.1:
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.8.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.3.1
+      source-map: 0.6.1
+
+  leven@3.1.0: {}
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  license-webpack-plugin@4.0.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      webpack-sources: 3.3.3
+    optionalDependencies:
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lines-and-columns@2.0.3: {}
+
+  listr2@9.0.5:
+    dependencies:
+      cli-truncate: 5.1.1
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.2
+
+  lmdb@3.4.4:
+    dependencies:
+      msgpackr: 1.11.8
+      node-addon-api: 6.1.0
+      node-gyp-build-optional-packages: 5.2.2
+      ordered-binary: 1.6.1
+      weak-lru-cache: 1.2.2
+    optionalDependencies:
+      '@lmdb/lmdb-darwin-arm64': 3.4.4
+      '@lmdb/lmdb-darwin-x64': 3.4.4
+      '@lmdb/lmdb-linux-arm': 3.4.4
+      '@lmdb/lmdb-linux-arm64': 3.4.4
+      '@lmdb/lmdb-linux-x64': 3.4.4
+      '@lmdb/lmdb-win32-arm64': 3.4.4
+      '@lmdb/lmdb-win32-x64': 3.4.4
+    optional: true
+
+  load-json-file@4.0.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      parse-json: 4.0.0
+      pify: 3.0.0
+      strip-bom: 3.0.0
+
+  loader-runner@4.3.1: {}
+
+  loader-utils@2.0.4:
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.3
+
+  locate-path@2.0.0:
+    dependencies:
+      p-locate: 2.0.0
+      path-exists: 3.0.0
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  locate-path@7.2.0:
+    dependencies:
+      p-locate: 6.0.0
+
+  lodash-es@4.18.1: {}
+
+  lodash.capitalize@4.2.1: {}
+
+  lodash.clonedeepwith@4.5.0: {}
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.escaperegexp@4.1.2: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.isstring@4.0.1: {}
+
+  lodash.memoize@4.1.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash.uniq@4.5.0: {}
+
+  lodash.uniqby@4.7.0: {}
+
+  lodash@4.18.1: {}
+
+  log-symbols@4.1.0:
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
+  log-symbols@7.0.1:
+    dependencies:
+      is-unicode-supported: 2.1.0
+      yoctocolors: 2.1.2
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.2.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
+
+  log4js@6.9.1:
+    dependencies:
+      date-format: 4.0.14
+      debug: 4.4.3
+      flatted: 3.4.2
+      rfdc: 1.4.1
+      streamroller: 3.1.5
+    transitivePeerDependencies:
+      - supports-color
+
+  long-timeout@0.1.1: {}
+
+  longest-streak@3.1.0: {}
+
+  lowercase-keys@2.0.0: {}
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@11.2.4: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  lru-cache@7.18.3: {}
+
+  luxon@3.7.2: {}
+
+  m3u8-parser@4.8.0:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      global: 4.4.0
+
+  m3u8-parser@7.2.0:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 4.1.1
+      global: 4.4.0
+
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.5.2:
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      source-map-js: 1.2.1
+
+  make-asynchronous@1.0.1:
+    dependencies:
+      p-event: 6.0.1
+      type-fest: 4.41.0
+      web-worker: 1.2.0
+
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  make-error@1.3.6: {}
+
+  make-fetch-happen@10.2.1:
+    dependencies:
+      agentkeepalive: 4.6.0
+      cacache: 16.1.3
+      http-cache-semantics: 4.2.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-lambda: 1.0.1
+      lru-cache: 7.18.3
+      minipass: 3.3.6
+      minipass-collect: 1.0.2
+      minipass-fetch: 2.1.2
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      negotiator: 0.6.4
+      promise-retry: 2.0.1
+      socks-proxy-agent: 7.0.0
+      ssri: 9.0.1
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  make-fetch-happen@15.0.3:
+    dependencies:
+      '@npmcli/agent': 4.0.0
+      cacache: 20.0.3
+      http-cache-semantics: 4.2.0
+      minipass: 7.1.3
+      minipass-fetch: 5.0.1
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      negotiator: 1.0.0
+      proc-log: 6.1.0
+      promise-retry: 2.0.1
+      ssri: 13.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  makeerror@1.0.12:
+    dependencies:
+      tmpl: 1.0.5
+
+  markdown-extensions@2.0.0: {}
+
+  markdown-table@3.0.4: {}
+
+  marked-terminal@7.3.0(marked@15.0.12):
+    dependencies:
+      ansi-escapes: 7.2.0
+      ansi-regex: 6.2.2
+      chalk: 5.6.2
+      cli-highlight: 2.1.11
+      cli-table3: 0.6.5
+      marked: 15.0.12
+      node-emoji: 2.2.0
+      supports-hyperlinks: 3.2.0
+
+  marked@15.0.12: {}
+
+  matcher@3.0.0:
+    dependencies:
+      escape-string-regexp: 4.0.0
+    optional: true
+
+  material-design-icons-iconfont@6.7.0: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-definitions@6.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.1.0
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx@3.0.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.0.30: {}
+
+  mdn-data@2.12.2: {}
+
+  media-typer@0.3.0: {}
+
+  media-typer@1.1.0: {}
+
+  memfs@3.5.3:
+    dependencies:
+      fs-monkey: 1.1.0
+
+  memfs@4.51.1:
+    dependencies:
+      '@jsonjoy.com/json-pack': 1.21.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
+      glob-to-regex.js: 1.2.0(tslib@2.8.1)
+      thingies: 2.5.0(tslib@2.8.1)
+      tree-dump: 1.1.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  meow@13.2.0: {}
+
+  merge-descriptors@1.0.3: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  methods@1.1.2: {}
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-expression@3.0.1:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-jsx@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
+  micromark-extension-mdx-md@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-extension-mdxjs@3.0.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-mdx-expression@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-events-to-acorn@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@1.6.0: {}
+
+  mime@2.6.0: {}
+
+  mime@4.1.0: {}
+
+  mimic-fn@2.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
+  mimic-function@5.0.1: {}
+
+  mimic-response@1.0.1: {}
+
+  mimic-response@3.1.0: {}
+
+  min-document@2.19.2:
+    dependencies:
+      dom-walk: 0.1.2
+
+  mini-css-extract-plugin@2.4.7(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      schema-utils: 4.3.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  minimalistic-assert@1.0.1: {}
+
+  minimatch@10.1.1:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
+  minimatch@10.2.2:
+    dependencies:
+      brace-expansion: 5.0.2
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.13
+
+  minimatch@5.1.6:
+    dependencies:
+      brace-expansion: 2.1.0
+
+  minimatch@5.1.9:
+    dependencies:
+      brace-expansion: 2.1.0
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.1.0
+
+  minimist@1.2.8: {}
+
+  minipass-collect@1.0.2:
+    dependencies:
+      minipass: 3.3.6
+
+  minipass-collect@2.0.1:
+    dependencies:
+      minipass: 7.1.3
+
+  minipass-fetch@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      minipass-sized: 1.0.3
+      minizlib: 2.1.2
+    optionalDependencies:
+      encoding: 0.1.13
+
+  minipass-fetch@5.0.1:
+    dependencies:
+      minipass: 7.1.3
+      minipass-sized: 2.0.0
+      minizlib: 3.1.0
+    optionalDependencies:
+      encoding: 0.1.13
+
+  minipass-flush@1.0.5:
+    dependencies:
+      minipass: 3.3.6
+
+  minipass-pipeline@1.2.4:
+    dependencies:
+      minipass: 3.3.6
+
+  minipass-sized@1.0.3:
+    dependencies:
+      minipass: 3.3.6
+
+  minipass-sized@2.0.0:
+    dependencies:
+      minipass: 7.1.3
+
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+
+  minipass@5.0.0: {}
+
+  minipass@7.1.2: {}
+
+  minipass@7.1.3: {}
+
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+
+  minizlib@3.1.0:
+    dependencies:
+      minipass: 7.1.3
+
+  mkdirp-classic@0.5.3: {}
+
+  mkdirp@1.0.4: {}
+
+  mpd-parser@0.22.0:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      '@xmldom/xmldom': 0.7.13
+      global: 4.4.0
+
+  mpd-parser@0.22.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      '@xmldom/xmldom': 0.8.11
+      global: 4.4.0
+
+  mpd-parser@1.3.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 4.1.1
+      '@xmldom/xmldom': 0.8.11
+      global: 4.4.0
+
+  mpegts.js@1.8.0:
+    dependencies:
+      es6-promise: 4.2.8
+      webworkify-webpack: https://codeload.github.com/xqq/webworkify-webpack/tar.gz/24d1e719b4a6cac37a518b2bb10fe124527ef4ef
+
+  mrmime@2.0.1: {}
+
+  ms@2.0.0: {}
+
+  ms@2.1.3: {}
+
+  msgpackr-extract@3.0.3:
+    dependencies:
+      node-gyp-build-optional-packages: 5.2.2
+    optionalDependencies:
+      '@msgpackr-extract/msgpackr-extract-darwin-arm64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-darwin-x64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-arm': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.3
+    optional: true
+
+  msgpackr@1.11.8:
+    optionalDependencies:
+      msgpackr-extract: 3.0.3
+    optional: true
+
+  multicast-dns@7.2.5:
+    dependencies:
+      dns-packet: 5.6.1
+      thunky: 1.1.0
+
+  mute-stream@2.0.0: {}
+
+  mux.js@6.0.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+
+  mux.js@7.1.0:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.11: {}
+
+  napi-build-utils@2.0.0: {}
+
+  napi-postinstall@0.3.4: {}
+
+  natural-compare@1.4.0: {}
+
+  needle@3.3.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.4.3
+    optional: true
+
+  negotiator@0.6.3: {}
+
+  negotiator@0.6.4: {}
+
+  negotiator@1.0.0: {}
+
+  neo-async@2.6.2: {}
+
+  neotraverse@0.6.18: {}
+
+  nerf-dart@1.0.0: {}
+
+  ng-mocks@14.15.1(93120d4c81fe34719ab854033955f316):
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      '@angular/forms': 21.1.5(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(@angular/platform-browser@21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(rxjs@7.8.2)
+      '@angular/platform-browser': 21.1.5(@angular/animations@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)))(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))
+
+  ngx-indexed-db@21.0.0(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)):
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+
+  ngx-skeleton-loader@11.3.0(@angular/common@21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)):
+    dependencies:
+      '@angular/common': 21.1.5(@angular/core@21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 21.1.5(@angular/compiler@21.1.5)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+
+  nlcst-to-string@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+
+  node-abi@3.85.0:
+    dependencies:
+      semver: 7.7.3
+
+  node-abort-controller@3.1.1: {}
+
+  node-addon-api@1.7.2:
+    optional: true
+
+  node-addon-api@6.1.0:
+    optional: true
+
+  node-addon-api@7.1.1:
+    optional: true
+
+  node-api-version@0.2.1:
+    dependencies:
+      semver: 7.7.3
+
+  node-emoji@2.2.0:
+    dependencies:
+      '@sindresorhus/is': 4.6.0
+      char-regex: 1.0.2
+      emojilib: 2.4.0
+      skin-tone: 2.0.0
+
+  node-fetch-native@1.6.7: {}
+
+  node-fetch@2.7.0(encoding@0.1.13):
+    dependencies:
+      whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
+
+  node-forge@1.4.0: {}
+
+  node-gyp-build-optional-packages@5.2.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optional: true
+
+  node-gyp@12.2.0:
+    dependencies:
+      env-paths: 2.2.1
+      exponential-backoff: 3.1.3
+      graceful-fs: 4.2.11
+      make-fetch-happen: 15.0.3
+      nopt: 9.0.0
+      proc-log: 6.1.0
+      semver: 7.7.3
+      tar: 7.5.9
+      tinyglobby: 0.2.15
+      which: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  node-gyp@9.4.1:
+    dependencies:
+      env-paths: 2.2.1
+      exponential-backoff: 3.1.3
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      make-fetch-happen: 10.2.1
+      nopt: 6.0.0
+      npmlog: 6.0.2
+      rimraf: 3.0.2
+      semver: 7.7.3
+      tar: 6.2.1
+      which: 2.0.2
+    transitivePeerDependencies:
+      - bluebird
+      - supports-color
+
+  node-int64@0.4.0: {}
+
+  node-machine-id@1.1.12: {}
+
+  node-mock-http@1.0.4: {}
+
+  node-releases@2.0.27: {}
+
+  node-schedule@2.1.1:
+    dependencies:
+      cron-parser: 4.9.0
+      long-timeout: 0.1.1
+      sorted-array-functions: 1.3.0
+
+  nopt@6.0.0:
+    dependencies:
+      abbrev: 1.1.1
+
+  nopt@9.0.0:
+    dependencies:
+      abbrev: 4.0.0
+
+  normalize-package-data@6.0.2:
+    dependencies:
+      hosted-git-info: 7.0.2
+      semver: 7.7.3
+      validate-npm-package-license: 3.0.4
+
+  normalize-path@3.0.0: {}
+
+  normalize-url@6.1.0: {}
+
+  normalize-url@8.1.1: {}
+
+  npm-bundled@5.0.0:
+    dependencies:
+      npm-normalize-package-bin: 5.0.0
+
+  npm-install-checks@8.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  npm-normalize-package-bin@5.0.0: {}
+
+  npm-package-arg@13.0.2:
+    dependencies:
+      hosted-git-info: 9.0.2
+      proc-log: 6.1.0
+      semver: 7.7.3
+      validate-npm-package-name: 7.0.2
+
+  npm-packlist@10.0.3:
+    dependencies:
+      ignore-walk: 8.0.0
+      proc-log: 6.1.0
+
+  npm-pick-manifest@11.0.3:
+    dependencies:
+      npm-install-checks: 8.0.0
+      npm-normalize-package-bin: 5.0.0
+      npm-package-arg: 13.0.2
+      semver: 7.7.3
+
+  npm-registry-fetch@19.1.1:
+    dependencies:
+      '@npmcli/redact': 4.0.0
+      jsonparse: 1.3.1
+      make-fetch-happen: 15.0.3
+      minipass: 7.1.2
+      minipass-fetch: 5.0.1
+      minizlib: 3.1.0
+      npm-package-arg: 13.0.2
+      proc-log: 6.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  npm@10.9.4: {}
+
+  npmlog@6.0.2:
+    dependencies:
+      are-we-there-yet: 3.0.1
+      console-control-strings: 1.1.0
+      gauge: 4.0.4
+      set-blocking: 2.0.0
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  nwsapi@2.2.23: {}
+
+  nx-electron@21.0.1(@nx/workspace@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)))(@swc/core@1.15.8(@swc/helpers@0.5.18))(electron@39.8.8)(esbuild@0.27.0)(rxjs@7.8.2)(typescript@5.9.3):
+    dependencies:
+      '@nx/workspace': 22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18))
+      copy-webpack-plugin: 12.0.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      electron: 39.8.8
+      electron-builder: 25.1.8
+      fork-ts-checker-webpack-plugin: 9.1.0(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      license-webpack-plugin: 4.0.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      rxjs-for-await: 1.0.0(rxjs@7.8.2)
+      strip-json-comments: 3.1.1
+      terser-webpack-plugin: 5.3.16(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      tree-kill: 1.2.2
+      ts-loader: 9.5.4(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      tsconfig-paths-webpack-plugin: 4.2.0
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+      webpack-merge: 5.10.0
+    transitivePeerDependencies:
+      - '@swc/core'
+      - bluebird
+      - electron-builder-squirrel-windows
+      - esbuild
+      - rxjs
+      - supports-color
+      - typescript
+      - uglify-js
+      - webpack-cli
+
+  nx@22.5.1(@swc-node/register@1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3))(@swc/core@1.15.8(@swc/helpers@0.5.18)):
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.4
+      '@yarnpkg/lockfile': 1.1.0
+      '@yarnpkg/parsers': 3.0.2
+      '@zkochan/js-yaml': 0.0.7
+      axios: 1.15.0
+      cli-cursor: 3.1.0
+      cli-spinners: 2.6.1
+      cliui: 8.0.1
+      dotenv: 16.4.7
+      dotenv-expand: 11.0.7
+      ejs: 3.1.10
+      enquirer: 2.3.6
+      figures: 3.2.0
+      flat: 5.0.2
+      front-matter: 4.0.2
+      ignore: 7.0.5
+      jest-diff: 30.2.0
+      jsonc-parser: 3.2.0
+      lines-and-columns: 2.0.3
+      minimatch: 10.1.1
+      node-machine-id: 1.1.12
+      npm-run-path: 4.0.1
+      open: 8.4.2
+      ora: 5.3.0
+      picocolors: 1.1.1
+      resolve.exports: 2.0.3
+      semver: 7.7.3
+      string-width: 4.2.3
+      tar-stream: 2.2.0
+      tmp: 0.2.5
+      tree-kill: 1.2.2
+      tsconfig-paths: 4.2.0
+      tslib: 2.8.1
+      yaml: 2.8.2
+      yargs: 17.7.2
+      yargs-parser: 21.1.1
+    optionalDependencies:
+      '@nx/nx-darwin-arm64': 22.5.1
+      '@nx/nx-darwin-x64': 22.5.1
+      '@nx/nx-freebsd-x64': 22.5.1
+      '@nx/nx-linux-arm-gnueabihf': 22.5.1
+      '@nx/nx-linux-arm64-gnu': 22.5.1
+      '@nx/nx-linux-arm64-musl': 22.5.1
+      '@nx/nx-linux-x64-gnu': 22.5.1
+      '@nx/nx-linux-x64-musl': 22.5.1
+      '@nx/nx-win32-arm64-msvc': 22.5.1
+      '@nx/nx-win32-x64-msvc': 22.5.1
+      '@swc-node/register': 1.11.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(@swc/types@0.1.25)(typescript@5.9.3)
+      '@swc/core': 1.15.8(@swc/helpers@0.5.18)
+    transitivePeerDependencies:
+      - debug
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  obuf@1.1.2: {}
+
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.3
+
+  ohash@2.0.11: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  on-headers@1.1.0: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.4:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.4.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
+  opener@1.5.2: {}
+
+  option-validator@2.0.6:
+    dependencies:
+      kind-of: 6.0.3
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  ora@5.3.0:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  ora@5.4.1:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  ora@9.0.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 3.4.0
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 7.0.1
+      stdin-discarder: 0.2.2
+      string-width: 8.2.0
+      strip-ansi: 7.1.2
+
+  ordered-binary@1.6.1:
+    optional: true
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  oxc-resolver@11.17.1:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.17.1
+      '@oxc-resolver/binding-android-arm64': 11.17.1
+      '@oxc-resolver/binding-darwin-arm64': 11.17.1
+      '@oxc-resolver/binding-darwin-x64': 11.17.1
+      '@oxc-resolver/binding-freebsd-x64': 11.17.1
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.17.1
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.17.1
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.17.1
+      '@oxc-resolver/binding-linux-arm64-musl': 11.17.1
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.17.1
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.17.1
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.17.1
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.17.1
+      '@oxc-resolver/binding-linux-x64-gnu': 11.17.1
+      '@oxc-resolver/binding-linux-x64-musl': 11.17.1
+      '@oxc-resolver/binding-openharmony-arm64': 11.17.1
+      '@oxc-resolver/binding-wasm32-wasi': 11.17.1
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.17.1
+      '@oxc-resolver/binding-win32-ia32-msvc': 11.17.1
+      '@oxc-resolver/binding-win32-x64-msvc': 11.17.1
+
+  p-cancelable@2.1.1: {}
+
+  p-each-series@3.0.0: {}
+
+  p-event@6.0.1:
+    dependencies:
+      p-timeout: 6.1.4
+
+  p-filter@4.1.0:
+    dependencies:
+      p-map: 7.0.4
+
+  p-is-promise@3.0.0: {}
+
+  p-limit@1.3.0:
+    dependencies:
+      p-try: 1.0.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-limit@4.0.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-limit@6.2.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-locate@2.0.0:
+    dependencies:
+      p-limit: 1.3.0
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-locate@6.0.0:
+    dependencies:
+      p-limit: 4.0.0
+
+  p-map@4.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
+  p-map@7.0.4: {}
+
+  p-queue@8.1.1:
+    dependencies:
+      eventemitter3: 5.0.1
+      p-timeout: 6.1.4
+
+  p-reduce@2.1.0: {}
+
+  p-reduce@3.0.0: {}
+
+  p-retry@6.2.1:
+    dependencies:
+      '@types/retry': 0.12.2
+      is-network-error: 1.3.0
+      retry: 0.13.1
+
+  p-timeout@6.1.4: {}
+
+  p-try@1.0.0: {}
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  package-manager-detector@1.6.0: {}
+
+  pacote@21.0.4:
+    dependencies:
+      '@npmcli/git': 7.0.1
+      '@npmcli/installed-package-contents': 4.0.0
+      '@npmcli/package-json': 7.0.5
+      '@npmcli/promise-spawn': 9.0.1
+      '@npmcli/run-script': 10.0.3
+      cacache: 20.0.3
+      fs-minipass: 3.0.3
+      minipass: 7.1.2
+      npm-package-arg: 13.0.2
+      npm-packlist: 10.0.3
+      npm-pick-manifest: 11.0.3
+      npm-registry-fetch: 19.1.1
+      proc-log: 6.1.0
+      promise-retry: 2.0.1
+      sigstore: 4.1.0
+      ssri: 13.0.1
+      tar: 7.5.2
+    transitivePeerDependencies:
+      - supports-color
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse-json@4.0.0:
+    dependencies:
+      error-ex: 1.3.4
+      json-parse-better-errors: 1.0.2
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-json@8.3.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      index-to-position: 1.2.0
+      type-fest: 4.41.0
+
+  parse-latin@7.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      '@types/unist': 3.0.3
+      nlcst-to-string: 4.0.0
+      unist-util-modify-children: 4.0.0
+      unist-util-visit-children: 3.0.0
+      vfile: 6.0.3
+
+  parse-ms@4.0.0: {}
+
+  parse-node-version@1.0.1: {}
+
+  parse-passwd@1.0.0: {}
+
+  parse5-html-rewriting-stream@8.0.0:
+    dependencies:
+      entities: 6.0.1
+      parse5: 8.0.0
+      parse5-sax-parser: 8.0.0
+
+  parse5-htmlparser2-tree-adapter@6.0.1:
+    dependencies:
+      parse5: 6.0.1
+
+  parse5-sax-parser@8.0.0:
+    dependencies:
+      parse5: 8.0.0
+
+  parse5@4.0.0: {}
+
+  parse5@5.1.1: {}
+
+  parse5@6.0.1: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parse5@8.0.0:
+    dependencies:
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
+
+  path-exists@3.0.0: {}
+
+  path-exists@4.0.0: {}
+
+  path-exists@5.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.3
+
+  path-scurry@2.0.2:
+    dependencies:
+      lru-cache: 11.2.4
+      minipass: 7.1.3
+
+  path-to-regexp@0.1.13: {}
+
+  path-to-regexp@8.3.0: {}
+
+  path-type@4.0.0: {}
+
+  path-type@6.0.0: {}
+
+  pe-library@0.4.1: {}
+
+  pend@1.2.0: {}
+
+  piccolore@0.1.3: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  picomatch@4.0.2: {}
+
+  picomatch@4.0.3: {}
+
+  pify@2.3.0: {}
+
+  pify@3.0.0: {}
+
+  pify@4.0.1:
+    optional: true
+
+  pirates@4.0.7: {}
+
+  piscina@5.1.4:
+    optionalDependencies:
+      '@napi-rs/nice': 1.1.1
+
+  pkce-challenge@5.0.1: {}
+
+  pkcs7@1.0.4:
+    dependencies:
+      '@babel/runtime': 7.28.4
+
+  pkg-conf@2.1.0:
+    dependencies:
+      find-up: 2.1.0
+      load-json-file: 4.0.0
+
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
+  pkg-dir@7.0.0:
+    dependencies:
+      find-up: 6.3.0
+
+  playwright-core@1.57.0: {}
+
+  playwright@1.57.0:
+    dependencies:
+      playwright-core: 1.57.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  plist@3.1.0:
+    dependencies:
+      '@xmldom/xmldom': 0.8.11
+      base64-js: 1.5.1
+      xmlbuilder: 15.1.1
+
+  pngjs@5.0.0: {}
+
+  portfinder@1.0.38:
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-calc@9.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+      postcss-value-parser: 4.2.0
+
+  postcss-colormin@6.1.0(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-convert-values@6.1.0(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-discard-comments@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-duplicates@6.0.3(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-empty@6.0.3(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-overridden@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-import@14.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.11
+
+  postcss-import@15.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.11
+
+  postcss-js@4.1.0(postcss@8.5.6):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.6
+
+  postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.8.2
+    optionalDependencies:
+      postcss: 8.5.6
+      ts-node: 10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)
+
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.21.0)(yaml@2.8.2):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 1.21.7
+      postcss: 8.5.6
+      tsx: 4.21.0
+      yaml: 2.8.2
+
+  postcss-loader@6.2.1(postcss@8.5.6)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      cosmiconfig: 7.1.0
+      klona: 2.0.6
+      postcss: 8.5.6
+      semver: 7.7.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  postcss-loader@8.2.0(@rspack/core@1.6.8(@swc/helpers@0.5.18))(postcss@8.5.6)(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      jiti: 2.6.1
+      postcss: 8.5.6
+      semver: 7.7.3
+    optionalDependencies:
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    transitivePeerDependencies:
+      - typescript
+
+  postcss-media-query-parser@0.2.3: {}
+
+  postcss-merge-longhand@6.0.5(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      stylehacks: 6.1.1(postcss@8.5.6)
+
+  postcss-merge-rules@6.1.1(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-api: 3.0.0
+      cssnano-utils: 4.0.2(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-minify-font-values@6.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-gradients@6.0.3(postcss@8.5.6):
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 4.0.2(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-params@6.1.0(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      cssnano-utils: 4.0.2(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-selectors@6.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.6):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+
+  postcss-modules-scope@3.2.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-modules-values@4.0.0(postcss@8.5.6):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  postcss-nested@6.2.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-normalize-charset@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-normalize-display-values@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-positions@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-repeat-style@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-string@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-timing-functions@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-unicode@6.1.0(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-url@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-whitespace@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-ordered-values@6.0.2(postcss@8.5.6):
+    dependencies:
+      cssnano-utils: 4.0.2(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-reduce-initial@6.1.0(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-api: 3.0.0
+      postcss: 8.5.6
+
+  postcss-reduce-transforms@6.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-svgo@6.0.3(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      svgo: 3.3.3
+
+  postcss-unique-selectors@6.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prebuild-install@7.1.3:
+    dependencies:
+      detect-libc: 2.1.2
+      expand-template: 2.0.3
+      github-from-package: 0.0.0
+      minimist: 1.2.8
+      mkdirp-classic: 0.5.3
+      napi-build-utils: 2.0.0
+      node-abi: 3.85.0
+      pump: 3.0.3
+      rc: 1.2.8
+      simple-get: 4.0.1
+      tar-fs: 2.1.4
+      tunnel-agent: 0.6.0
+
+  prelude-ls@1.2.1: {}
+
+  prettier@3.8.1: {}
+
+  pretty-format@30.2.0:
+    dependencies:
+      '@jest/schemas': 30.0.5
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  prismjs@1.30.0: {}
+
+  proc-log@2.0.1: {}
+
+  proc-log@6.1.0: {}
+
+  process-nextick-args@2.0.1: {}
+
+  process@0.11.10: {}
+
+  progress@2.0.3: {}
+
+  promise-inflight@1.0.1: {}
+
+  promise-retry@2.0.1:
+    dependencies:
+      err-code: 2.0.3
+      retry: 0.12.0
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  property-information@7.1.0: {}
+
+  proto-list@1.2.4: {}
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  proxy-from-env@2.1.0: {}
+
+  prr@1.0.1:
+    optional: true
+
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
+  punycode@2.3.1: {}
+
+  pupa@3.3.0:
+    dependencies:
+      escape-goat: 4.0.0
+
+  pure-rand@7.0.1: {}
+
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
+  qs@6.14.1:
+    dependencies:
+      side-channel: 1.1.0
+
+  queue-microtask@1.2.3: {}
+
+  quick-lru@5.1.1: {}
+
+  radix3@1.1.2: {}
+
+  rambda@9.4.2: {}
+
+  randombytes@2.1.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  range-parser@1.2.1: {}
+
+  raw-body@2.5.3:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.1
+      unpipe: 1.0.0
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
+  react-dom@19.2.3(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      scheduler: 0.27.0
+
+  react-is@18.3.1: {}
+
+  react-refresh@0.18.0: {}
+
+  react@19.2.3: {}
+
+  read-binary-file-arch@1.0.6:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  read-package-up@11.0.0:
+    dependencies:
+      find-up-simple: 1.0.1
+      read-pkg: 9.0.1
+      type-fest: 4.41.0
+
+  read-pkg@9.0.1:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 6.0.2
+      parse-json: 8.3.0
+      type-fest: 4.41.0
+      unicorn-magic: 0.1.0
+
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.2
+
+  readdirp@4.1.2: {}
+
+  readdirp@5.0.0: {}
+
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.1(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  reflect-metadata@0.2.2: {}
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regenerate-unicode-properties@10.2.2:
+    dependencies:
+      regenerate: 1.4.2
+
+  regenerate@1.4.2: {}
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  regexpu-core@6.4.0:
+    dependencies:
+      regenerate: 1.4.2
+      regenerate-unicode-properties: 10.2.2
+      regjsgen: 0.8.0
+      regjsparser: 0.13.0
+      unicode-match-property-ecmascript: 2.0.0
+      unicode-match-property-value-ecmascript: 2.2.1
+
+  registry-auth-token@5.1.0:
+    dependencies:
+      '@pnpm/npm-conf': 2.3.1
+
+  regjsgen@0.8.0: {}
+
+  regjsparser@0.13.0:
+    dependencies:
+      jsesc: 3.1.0
+
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.3
+    transitivePeerDependencies:
+      - supports-color
+
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+      unified: 11.0.5
+
+  rehype@13.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      rehype-parse: 9.0.1
+      rehype-stringify: 10.0.1
+      unified: 11.0.5
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-mdx@3.1.1:
+    dependencies:
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-smartypants@3.0.2:
+    dependencies:
+      retext: 9.0.0
+      retext-smartypants: 6.2.0
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  require-main-filename@2.0.0: {}
+
+  requires-port@1.0.0: {}
+
+  resedit@1.7.2:
+    dependencies:
+      pe-library: 0.4.1
+
+  resolve-alpn@1.2.1: {}
+
+  resolve-cwd@3.0.0:
+    dependencies:
+      resolve-from: 5.0.0
+
+  resolve-dir@1.0.1:
+    dependencies:
+      expand-tilde: 2.0.2
+      global-modules: 1.0.0
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve.exports@2.0.3: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@1.22.8:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  responselike@2.0.1:
+    dependencies:
+      lowercase-keys: 2.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  retext-latin@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      parse-latin: 7.0.0
+      unified: 11.0.5
+
+  retext-smartypants@6.2.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      nlcst-to-string: 4.0.0
+      unist-util-visit: 5.1.0
+
+  retext-stringify@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      nlcst-to-string: 4.0.0
+      unified: 11.0.5
+
+  retext@9.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      retext-latin: 4.0.0
+      retext-stringify: 4.0.0
+      unified: 11.0.5
+
+  retry@0.12.0: {}
+
+  retry@0.13.1: {}
+
+  reusify@1.1.0: {}
+
+  rfdc@1.4.1: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  roarr@2.15.4:
+    dependencies:
+      boolean: 3.2.0
+      detect-node: 2.1.0
+      globalthis: 1.0.4
+      json-stringify-safe: 5.0.1
+      semver-compare: 1.0.0
+      sprintf-js: 1.1.3
+    optional: true
+
+  rolldown@1.0.0-beta.58:
+    dependencies:
+      '@oxc-project/types': 0.106.0
+      '@rolldown/pluginutils': 1.0.0-beta.58
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-beta.58
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.58
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.58
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.58
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.58
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.58
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.58
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.58
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.58
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.58
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.58
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.58
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.58
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  rrweb-cssom@0.8.0: {}
+
+  run-applescript@7.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rust-result@1.0.0:
+    dependencies:
+      individual: 2.0.0
+
+  rxjs-for-await@1.0.0(rxjs@7.8.2):
+    dependencies:
+      rxjs: 7.8.2
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safe-json-parse@4.0.0:
+    dependencies:
+      rust-result: 1.0.0
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safer-buffer@2.1.2: {}
+
+  sanitize-filename@1.6.3:
+    dependencies:
+      truncate-utf8-bytes: 1.0.2
+
+  sass-embedded-all-unknown@1.97.1:
+    dependencies:
+      sass: 1.97.1
+    optional: true
+
+  sass-embedded-android-arm64@1.97.1:
+    optional: true
+
+  sass-embedded-android-arm@1.97.1:
+    optional: true
+
+  sass-embedded-android-riscv64@1.97.1:
+    optional: true
+
+  sass-embedded-android-x64@1.97.1:
+    optional: true
+
+  sass-embedded-darwin-arm64@1.97.1:
+    optional: true
+
+  sass-embedded-darwin-x64@1.97.1:
+    optional: true
+
+  sass-embedded-linux-arm64@1.97.1:
+    optional: true
+
+  sass-embedded-linux-arm@1.97.1:
+    optional: true
+
+  sass-embedded-linux-musl-arm64@1.97.1:
+    optional: true
+
+  sass-embedded-linux-musl-arm@1.97.1:
+    optional: true
+
+  sass-embedded-linux-musl-riscv64@1.97.1:
+    optional: true
+
+  sass-embedded-linux-musl-x64@1.97.1:
+    optional: true
+
+  sass-embedded-linux-riscv64@1.97.1:
+    optional: true
+
+  sass-embedded-linux-x64@1.97.1:
+    optional: true
+
+  sass-embedded-unknown-all@1.97.1:
+    dependencies:
+      sass: 1.97.1
+    optional: true
+
+  sass-embedded-win32-arm64@1.97.1:
+    optional: true
+
+  sass-embedded-win32-x64@1.97.1:
+    optional: true
+
+  sass-embedded@1.97.1:
+    dependencies:
+      '@bufbuild/protobuf': 2.10.2
+      buffer-builder: 0.2.0
+      colorjs.io: 0.5.2
+      immutable: 5.1.5
+      rxjs: 7.8.2
+      supports-color: 8.1.1
+      sync-child-process: 1.0.2
+      varint: 6.0.0
+    optionalDependencies:
+      sass-embedded-all-unknown: 1.97.1
+      sass-embedded-android-arm: 1.97.1
+      sass-embedded-android-arm64: 1.97.1
+      sass-embedded-android-riscv64: 1.97.1
+      sass-embedded-android-x64: 1.97.1
+      sass-embedded-darwin-arm64: 1.97.1
+      sass-embedded-darwin-x64: 1.97.1
+      sass-embedded-linux-arm: 1.97.1
+      sass-embedded-linux-arm64: 1.97.1
+      sass-embedded-linux-musl-arm: 1.97.1
+      sass-embedded-linux-musl-arm64: 1.97.1
+      sass-embedded-linux-musl-riscv64: 1.97.1
+      sass-embedded-linux-musl-x64: 1.97.1
+      sass-embedded-linux-riscv64: 1.97.1
+      sass-embedded-linux-x64: 1.97.1
+      sass-embedded-unknown-all: 1.97.1
+      sass-embedded-win32-arm64: 1.97.1
+      sass-embedded-win32-x64: 1.97.1
+
+  sass-loader@16.0.6(@rspack/core@1.6.8(@swc/helpers@0.5.18))(sass-embedded@1.97.1)(sass@1.97.1)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      neo-async: 2.6.2
+    optionalDependencies:
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+      sass: 1.97.1
+      sass-embedded: 1.97.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  sass@1.97.1:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.5
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+
+  sax@1.4.3: {}
+
+  sax@1.6.0: {}
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scheduler@0.27.0: {}
+
+  schema-utils@3.3.0:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 6.14.0
+      ajv-keywords: 3.5.2(ajv@6.14.0)
+
+  schema-utils@4.3.3:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.17.1
+      ajv-formats: 2.1.1(ajv@8.17.1)
+      ajv-keywords: 5.1.0(ajv@8.17.1)
+
+  secure-compare@3.0.1: {}
+
+  select-hose@2.0.0: {}
+
+  selfsigned@2.4.1:
+    dependencies:
+      '@types/node-forge': 1.3.14
+      node-forge: 1.4.0
+
+  semantic-release@24.2.9(typescript@5.9.3):
+    dependencies:
+      '@semantic-release/commit-analyzer': 13.0.1(semantic-release@24.2.9(typescript@5.9.3))
+      '@semantic-release/error': 4.0.0
+      '@semantic-release/github': 11.0.6(semantic-release@24.2.9(typescript@5.9.3))
+      '@semantic-release/npm': 12.0.2(semantic-release@24.2.9(typescript@5.9.3))
+      '@semantic-release/release-notes-generator': 14.1.0(semantic-release@24.2.9(typescript@5.9.3))
+      aggregate-error: 5.0.0
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      debug: 4.4.3
+      env-ci: 11.2.0
+      execa: 9.6.1
+      figures: 6.1.0
+      find-versions: 6.0.0
+      get-stream: 6.0.1
+      git-log-parser: 1.2.1
+      hook-std: 4.0.0
+      hosted-git-info: 8.1.0
+      import-from-esm: 2.0.0
+      lodash-es: 4.18.1
+      marked: 15.0.12
+      marked-terminal: 7.3.0(marked@15.0.12)
+      micromatch: 4.0.8
+      p-each-series: 3.0.0
+      p-reduce: 3.0.0
+      read-package-up: 11.0.0
+      resolve-from: 5.0.0
+      semver: 7.7.3
+      semver-diff: 5.0.0
+      signale: 1.4.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  semver-compare@1.0.0:
+    optional: true
+
+  semver-diff@5.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  semver-regex@4.0.5: {}
+
+  semver@5.7.2: {}
+
+  semver@6.3.1: {}
+
+  semver@7.6.3: {}
+
+  semver@7.7.3: {}
+
+  send@0.19.2:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serialize-error@7.0.1:
+    dependencies:
+      type-fest: 0.13.1
+    optional: true
+
+  serialize-javascript@6.0.2:
+    dependencies:
+      randombytes: 2.1.0
+
+  serve-index@1.9.1:
+    dependencies:
+      accepts: 1.3.8
+      batch: 0.6.1
+      debug: 2.6.9
+      escape-html: 1.0.3
+      http-errors: 1.6.3
+      mime-types: 2.1.35
+      parseurl: 1.3.3
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@1.16.3:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.19.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  set-blocking@2.0.0: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  setprototypeof@1.1.0: {}
+
+  setprototypeof@1.2.0: {}
+
+  shallow-clone@3.0.1:
+    dependencies:
+      kind-of: 6.0.3
+
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.0.0
+      detect-libc: 2.1.2
+      semver: 7.7.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  shell-env@4.0.1:
+    dependencies:
+      default-shell: 2.2.0
+      execa: 5.1.1
+      strip-ansi: 7.1.2
+
+  shell-path@3.1.0:
+    dependencies:
+      shell-env: 4.0.1
+
+  shell-quote@1.8.3: {}
+
+  shiki@3.22.0:
+    dependencies:
+      '@shikijs/core': 3.22.0
+      '@shikijs/engine-javascript': 3.22.0
+      '@shikijs/engine-oniguruma': 3.22.0
+      '@shikijs/langs': 3.22.0
+      '@shikijs/themes': 3.22.0
+      '@shikijs/types': 3.22.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  signale@1.4.0:
+    dependencies:
+      chalk: 2.4.2
+      figures: 2.0.0
+      pkg-conf: 2.1.0
+
+  sigstore@4.1.0:
+    dependencies:
+      '@sigstore/bundle': 4.0.0
+      '@sigstore/core': 3.1.0
+      '@sigstore/protobuf-specs': 0.5.0
+      '@sigstore/sign': 4.1.0
+      '@sigstore/tuf': 4.0.1
+      '@sigstore/verify': 3.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  simple-concat@1.0.1: {}
+
+  simple-get@4.0.1:
+    dependencies:
+      decompress-response: 6.0.0
+      once: 1.4.0
+      simple-concat: 1.0.1
+
+  simple-update-notifier@2.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  sisteransi@1.0.5: {}
+
+  sitemap@8.0.2:
+    dependencies:
+      '@types/node': 17.0.45
+      '@types/sax': 1.2.7
+      arg: 5.0.2
+      sax: 1.4.3
+
+  skin-tone@2.0.0:
+    dependencies:
+      unicode-emoji-modifier-base: 1.0.0
+
+  slash@3.0.0: {}
+
+  slash@4.0.0: {}
+
+  slash@5.1.0: {}
+
+  slice-ansi@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    optional: true
+
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  smart-buffer@4.2.0: {}
+
+  smol-toml@1.6.1: {}
+
+  sockjs@0.3.24:
+    dependencies:
+      faye-websocket: 0.11.4
+      uuid: 8.3.2
+      websocket-driver: 0.7.4
+
+  socks-proxy-agent@7.0.0:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+      socks: 2.8.7
+    transitivePeerDependencies:
+      - supports-color
+
+  socks-proxy-agent@8.0.5:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      socks: 2.8.7
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.7:
+    dependencies:
+      ip-address: 10.1.0
+      smart-buffer: 4.2.0
+
+  sort-keys-length@1.0.1:
+    dependencies:
+      sort-keys: 1.1.2
+
+  sort-keys@1.1.2:
+    dependencies:
+      is-plain-obj: 1.1.0
+
+  sorted-array-functions@1.3.0: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map-loader@5.0.0(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      iconv-lite: 0.6.3
+      source-map-js: 1.2.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  source-map-support@0.5.13:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map-support@0.5.19:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  source-map@0.7.6: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  spawn-error-forwarder@1.0.0: {}
+
+  spdx-correct@3.2.0:
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.22
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@3.0.1:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.22
+
+  spdx-expression-parse@4.0.0:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.22
+
+  spdx-license-ids@3.0.22: {}
+
+  spdy-transport@3.0.0:
+    dependencies:
+      debug: 4.4.3
+      detect-node: 2.1.0
+      hpack.js: 2.1.6
+      obuf: 1.1.2
+      readable-stream: 3.6.2
+      wbuf: 1.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  spdy@4.0.2:
+    dependencies:
+      debug: 4.4.3
+      handle-thing: 2.0.1
+      http-deceiver: 1.2.7
+      select-hose: 2.0.0
+      spdy-transport: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  split2@1.0.0:
+    dependencies:
+      through2: 2.0.5
+
+  sprintf-js@1.0.3: {}
+
+  sprintf-js@1.1.3:
+    optional: true
+
+  ssri@13.0.1:
+    dependencies:
+      minipass: 7.1.2
+
+  ssri@9.0.1:
+    dependencies:
+      minipass: 3.3.6
+
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
+  stackframe@1.3.4: {}
+
+  stat-mode@1.0.0: {}
+
+  statuses@1.5.0: {}
+
+  statuses@2.0.2: {}
+
+  stdin-discarder@0.2.2: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  stream-combiner2@1.1.1:
+    dependencies:
+      duplexer2: 0.1.4
+      readable-stream: 2.3.8
+
+  stream-replace-string@2.0.0: {}
+
+  streamroller@3.1.5:
+    dependencies:
+      date-format: 4.0.14
+      debug: 4.4.3
+      fs-extra: 8.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  string-length@4.0.2:
+    dependencies:
+      char-regex: 1.0.2
+      strip-ansi: 6.0.1
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string-width@8.2.0:
+    dependencies:
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.1.2
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-bom@4.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@3.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  strip-json-comments@2.0.1: {}
+
+  strip-json-comments@3.1.1: {}
+
+  style-loader@3.3.4(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
+  stylehacks@6.1.1(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.15
+      ts-interface-checker: 0.1.13
+
+  sumchecker@3.0.1:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  super-regex@1.1.0:
+    dependencies:
+      function-timeout: 1.0.2
+      make-asynchronous: 1.0.1
+      time-span: 5.1.0
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-hyperlinks@3.2.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  svgo@3.3.3:
+    dependencies:
+      commander: 7.2.0
+      css-select: 5.2.2
+      css-tree: 2.3.1
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.6.0
+
+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.3
+
+  symbol-tree@3.2.4: {}
+
+  sync-child-process@1.0.2:
+    dependencies:
+      sync-message-port: 1.1.3
+
+  sync-message-port@1.1.3: {}
+
+  synckit@0.11.11:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
+  tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.1.0(postcss@8.5.6)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.21.0)(yaml@2.8.2)
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.11
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
+  tapable@2.3.0: {}
+
+  tar-fs@2.1.4:
+    dependencies:
+      chownr: 1.1.4
+      mkdirp-classic: 0.5.3
+      pump: 3.0.3
+      tar-stream: 2.2.0
+
+  tar-stream@2.2.0:
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.5
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+
+  tar@7.5.2:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.1.0
+      yallist: 5.0.0
+
+  tar@7.5.9:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.1.0
+      yallist: 5.0.0
+
+  temp-dir@3.0.0: {}
+
+  temp-file@3.4.0:
+    dependencies:
+      async-exit-hook: 2.0.1
+      fs-extra: 10.1.0
+
+  tempfile@5.0.0:
+    dependencies:
+      temp-dir: 3.0.0
+
+  tempy@3.1.0:
+    dependencies:
+      is-stream: 3.0.0
+      temp-dir: 3.0.0
+      type-fest: 2.19.0
+      unique-string: 3.0.0
+
+  terser-webpack-plugin@5.3.16(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      serialize-javascript: 6.0.2
+      terser: 5.44.1
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    optionalDependencies:
+      '@swc/core': 1.15.8(@swc/helpers@0.5.18)
+      esbuild: 0.27.0
+
+  terser@5.44.1:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.15.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  thingies@2.5.0(tslib@2.8.1):
+    dependencies:
+      tslib: 2.8.1
+
+  through2@2.0.5:
+    dependencies:
+      readable-stream: 2.3.8
+      xtend: 4.0.2
+
+  thunky@1.1.0: {}
+
+  time-span@5.1.0:
+    dependencies:
+      convert-hrtime: 5.0.0
+
+  tiny-async-pool@1.3.0:
+    dependencies:
+      semver: 5.7.2
+
+  tiny-inflate@1.0.3: {}
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tldts-core@6.1.86: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
+  tmp-promise@3.0.3:
+    dependencies:
+      tmp: 0.2.5
+
+  tmp@0.2.5: {}
+
+  tmpl@1.0.5: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toidentifier@1.0.1: {}
+
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
+  tr46@0.0.3: {}
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
+  traverse@0.6.8: {}
+
+  tree-dump@1.1.0(tslib@2.8.1):
+    dependencies:
+      tslib: 2.8.1
+
+  tree-kill@1.2.2: {}
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  truncate-utf8-bytes@1.0.2:
+    dependencies:
+      utf8-byte-length: 1.0.5
+
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-checker-rspack-plugin@1.2.3(@rspack/core@1.6.8(@swc/helpers@0.5.18))(typescript@5.9.3):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@rspack/lite-tapable': 1.1.0
+      chokidar: 3.6.0
+      is-glob: 4.0.3
+      memfs: 4.51.1
+      minimatch: 9.0.5
+      picocolors: 1.1.1
+      typescript: 5.9.3
+    optionalDependencies:
+      '@rspack/core': 1.6.8(@swc/helpers@0.5.18)
+
+  ts-interface-checker@0.1.13: {}
+
+  ts-jest@29.4.6(@babel/core@7.28.5)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.5))(esbuild@0.27.0)(jest-util@30.2.0)(jest@30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3)))(typescript@5.9.3):
+    dependencies:
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      handlebars: 4.7.8
+      jest: 30.2.0(@types/node@20.19.9)(babel-plugin-macros@3.1.0)(esbuild-register@3.6.0(esbuild@0.27.0))(ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3))
+      json5: 2.2.3
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.7.3
+      type-fest: 4.41.0
+      typescript: 5.9.3
+      yargs-parser: 21.1.1
+    optionalDependencies:
+      '@babel/core': 7.28.5
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      babel-jest: 30.2.0(@babel/core@7.28.5)
+      esbuild: 0.27.0
+      jest-util: 30.2.0
+
+  ts-loader@9.5.4(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.18.4
+      micromatch: 4.0.8
+      semver: 7.7.3
+      source-map: 0.7.6
+      typescript: 5.9.3
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  ts-node@10.9.2(@swc/core@1.15.8(@swc/helpers@0.5.18))(@types/node@20.19.9)(typescript@5.9.3):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.12
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.19.9
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.9.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.15.8(@swc/helpers@0.5.18)
+
+  tsconfck@3.1.6(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  tsconfig-paths-webpack-plugin@4.2.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.18.4
+      tapable: 2.3.0
+      tsconfig-paths: 4.2.0
+
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@2.8.1: {}
+
+  tsscmp@1.0.6: {}
+
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.0
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  tuf-js@4.1.0:
+    dependencies:
+      '@tufjs/models': 4.1.0
+      debug: 4.4.3
+      make-fetch-happen: 15.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  tunnel-agent@0.6.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-detect@4.0.8: {}
+
+  type-fest@0.13.1:
+    optional: true
+
+  type-fest@0.20.2: {}
+
+  type-fest@0.21.3: {}
+
+  type-fest@1.4.0: {}
+
+  type-fest@2.19.0: {}
+
+  type-fest@4.41.0: {}
+
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.2
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typed-assert@1.0.9: {}
+
+  typescript-eslint@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  ufo@1.6.3: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  ultrahtml@1.6.0: {}
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  uncrypto@0.1.3: {}
+
+  undici-types@6.21.0: {}
+
+  undici@7.20.0: {}
+
+  unicode-canonical-property-names-ecmascript@2.0.1: {}
+
+  unicode-emoji-modifier-base@1.0.0: {}
+
+  unicode-match-property-ecmascript@2.0.0:
+    dependencies:
+      unicode-canonical-property-names-ecmascript: 2.0.1
+      unicode-property-aliases-ecmascript: 2.2.0
+
+  unicode-match-property-value-ecmascript@2.2.1: {}
+
+  unicode-property-aliases-ecmascript@2.2.0: {}
+
+  unicorn-magic@0.1.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unifont@0.7.4:
+    dependencies:
+      css-tree: 3.1.0
+      ofetch: 1.5.1
+      ohash: 2.0.11
+
+  union@0.5.0:
+    dependencies:
+      qs: 6.14.1
+
+  unique-filename@2.0.1:
+    dependencies:
+      unique-slug: 3.0.0
+
+  unique-filename@5.0.0:
+    dependencies:
+      unique-slug: 6.0.0
+
+  unique-slug@3.0.0:
+    dependencies:
+      imurmurhash: 0.1.4
+
+  unique-slug@6.0.0:
+    dependencies:
+      imurmurhash: 0.1.4
+
+  unique-string@3.0.0:
+    dependencies:
+      crypto-random-string: 4.0.0
+
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-modify-children@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      array-iterate: 2.0.1
+
+  unist-util-position-from-estree@2.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-remove-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-visit: 5.1.0
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-children@3.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  universal-user-agent@7.0.3: {}
+
+  universalify@0.1.2: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  unstorage@1.17.4:
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 5.0.0
+      destr: 2.0.5
+      h3: 1.15.10
+      lru-cache: 11.2.4
+      node-fetch-native: 1.6.7
+      ofetch: 1.5.1
+      ufo: 1.6.3
+
+  unused-filename@4.0.1:
+    dependencies:
+      escape-string-regexp: 5.0.0
+      path-exists: 5.0.0
+
+  upath@2.0.1: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  url-join@4.0.1: {}
+
+  url-join@5.0.0: {}
+
+  url-toolkit@2.2.5: {}
+
+  utf8-byte-length@1.0.5: {}
+
+  util-deprecate@1.0.2: {}
+
+  utils-merge@1.0.1: {}
+
+  uuid@8.3.2: {}
+
+  uuid@9.0.0: {}
+
+  v8-compile-cache-lib@3.0.1: {}
+
+  v8-to-istanbul@9.3.0:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 2.0.0
+
+  validate-npm-package-license@3.0.4:
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+
+  validate-npm-package-name@7.0.2: {}
+
+  validator@13.15.26: {}
+
+  varint@6.0.0: {}
+
+  vary@1.1.2: {}
+
+  verror@1.10.1:
+    dependencies:
+      assert-plus: 1.0.0
+      core-util-is: 1.0.2
+      extsprintf: 1.4.1
+    optional: true
+
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  video.js@7.21.7:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/http-streaming': 2.16.3(video.js@7.21.7)
+      '@videojs/vhs-utils': 3.0.5
+      '@videojs/xhr': 2.6.0
+      aes-decrypter: 3.1.3
+      global: 4.4.0
+      keycode: 2.2.1
+      m3u8-parser: 4.8.0
+      mpd-parser: 0.22.1
+      mux.js: 6.0.1
+      safe-json-parse: 4.0.0
+      videojs-font: 3.2.0
+      videojs-vtt.js: 0.15.5
+
+  video.js@8.23.4:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/http-streaming': 3.17.2(video.js@8.23.4)
+      '@videojs/vhs-utils': 4.1.1
+      '@videojs/xhr': 2.7.0
+      aes-decrypter: 4.0.2
+      global: 4.4.0
+      m3u8-parser: 7.2.0
+      mpd-parser: 1.3.1
+      mux.js: 7.1.0
+      videojs-contrib-quality-levels: 4.1.0(video.js@8.23.4)
+      videojs-font: 4.2.0
+      videojs-vtt.js: 0.15.5
+
+  videojs-contrib-quality-levels@4.1.0(video.js@8.23.4):
+    dependencies:
+      global: 4.4.0
+      video.js: 8.23.4
+
+  videojs-font@3.2.0: {}
+
+  videojs-font@4.2.0: {}
+
+  videojs-quality-selector-hls@1.1.1:
+    dependencies:
+      global: 4.4.0
+      video.js: 8.23.4
+      videojs-contrib-quality-levels: 4.1.0(video.js@8.23.4)
+
+  videojs-vtt.js@0.15.5:
+    dependencies:
+      global: 4.4.0
+
+  vite@6.4.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.19.9
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      less: 4.5.1
+      sass: 1.97.1
+      sass-embedded: 1.97.1
+      terser: 5.44.1
+      tsx: 4.21.0
+      yaml: 2.8.2
+
+  vite@7.3.0(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.27.0
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.19.9
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      less: 4.5.1
+      sass: 1.97.1
+      sass-embedded: 1.97.1
+      terser: 5.44.1
+      tsx: 4.21.0
+      yaml: 2.8.2
+
+  vitefu@1.1.1(vite@6.4.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
+    optionalDependencies:
+      vite: 6.4.1(@types/node@20.19.9)(jiti@1.21.7)(less@4.5.1)(sass-embedded@1.97.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  walker@1.0.8:
+    dependencies:
+      makeerror: 1.0.12
+
+  watchpack@2.5.0:
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+
+  wbuf@1.7.3:
+    dependencies:
+      minimalistic-assert: 1.0.1
+
+  wcwidth@1.0.1:
+    dependencies:
+      defaults: 1.0.4
+
+  weak-lru-cache@1.2.2:
+    optional: true
+
+  web-namespaces@2.0.1: {}
+
+  web-worker@1.2.0: {}
+
+  webidl-conversions@3.0.1: {}
+
+  webidl-conversions@7.0.0: {}
+
+  webpack-dev-middleware@7.4.5(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      colorette: 2.0.20
+      memfs: 4.51.1
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  webpack-dev-server@5.2.2(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      '@types/bonjour': 3.5.13
+      '@types/connect-history-api-fallback': 1.5.4
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.7
+      '@types/serve-index': 1.9.4
+      '@types/serve-static': 1.15.10
+      '@types/sockjs': 0.3.36
+      '@types/ws': 8.18.1
+      ansi-html-community: 0.0.8
+      bonjour-service: 1.3.0
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      compression: 1.8.1
+      connect-history-api-fallback: 2.0.0
+      express: 4.22.1
+      graceful-fs: 4.2.11
+      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
+      ipaddr.js: 2.3.0
+      launch-editor: 2.12.0
+      open: 10.2.0
+      p-retry: 6.2.1
+      schema-utils: 4.3.3
+      selfsigned: 2.4.1
+      serve-index: 1.9.1
+      sockjs: 0.3.24
+      spdy: 4.0.2
+      webpack-dev-middleware: 7.4.5(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      ws: 8.18.3
+    optionalDependencies:
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
+  webpack-merge@5.10.0:
+    dependencies:
+      clone-deep: 4.0.1
+      flat: 5.0.2
+      wildcard: 2.0.1
+
+  webpack-node-externals@3.0.0: {}
+
+  webpack-sources@3.3.3: {}
+
+  webpack-subresource-integrity@5.1.0(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)):
+    dependencies:
+      typed-assert: 1.0.9
+      webpack: 5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)
+
+  webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.15.0
+      acorn-import-phases: 1.0.4(acorn@8.15.0)
+      browserslist: 4.28.1
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.4
+      es-module-lexer: 2.0.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.16(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0)(webpack@5.104.1(@swc/core@1.15.8(@swc/helpers@0.5.18))(esbuild@0.27.0))
+      watchpack: 2.5.0
+      webpack-sources: 3.3.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  websocket-driver@0.7.4:
+    dependencies:
+      http-parser-js: 0.5.10
+      safe-buffer: 5.2.1
+      websocket-extensions: 0.1.4
+
+  websocket-extensions@0.1.4: {}
+
+  webworkify-webpack@https://codeload.github.com/xqq/webworkify-webpack/tar.gz/24d1e719b4a6cac37a518b2bb10fe124527ef4ef: {}
+
+  whatwg-encoding@2.0.0:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-module@2.0.1: {}
+
+  which-pm-runs@1.1.0: {}
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@1.3.1:
+    dependencies:
+      isexe: 2.0.0
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  which@6.0.1:
+    dependencies:
+      isexe: 4.0.0
+
+  wide-align@1.1.5:
+    dependencies:
+      string-width: 4.2.3
+
+  widest-line@5.0.0:
+    dependencies:
+      string-width: 7.2.0
+
+  wildcard@2.0.1: {}
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  wrappy@1.0.2: {}
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
+  ws@8.18.0: {}
+
+  ws@8.18.3: {}
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.0
+
+  xml-name-validator@5.0.0: {}
+
+  xmlbuilder@15.1.1: {}
+
+  xmlchars@2.2.0: {}
+
+  xtend@4.0.2: {}
+
+  xxhash-wasm@1.1.0: {}
+
+  y18n@4.0.3: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@4.0.0: {}
+
+  yallist@5.0.0: {}
+
+  yaml@1.10.3: {}
+
+  yaml@2.8.2: {}
+
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs-parser@20.2.9: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs-parser@22.0.0: {}
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
+  yargs@16.2.0:
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yargs@18.0.0:
+    dependencies:
+      cliui: 9.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      string-width: 7.2.0
+      y18n: 5.0.8
+      yargs-parser: 22.0.0
+
+  yauzl@2.10.0:
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+
+  yn@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  yocto-queue@1.2.2: {}
+
+  yocto-spinner@0.2.3:
+    dependencies:
+      yoctocolors: 2.1.2
+
+  yoctocolors-cjs@2.1.3: {}
+
+  yoctocolors@2.1.2: {}
+
+  zod-to-json-schema@3.25.1(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod-to-json-schema@3.25.1(zod@4.3.5):
+    dependencies:
+      zod: 4.3.5
+
+  zod-to-ts@1.2.0(typescript@5.9.3)(zod@3.25.76):
+    dependencies:
+      typescript: 5.9.3
+      zod: 3.25.76
+
+  zod@3.25.76: {}
+
+  zod@4.3.5: {}
+
+  zone.js@0.15.1: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..38e2b65
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,12 @@
+ignoredBuiltDependencies:
+  - '@parcel/watcher'
+  - '@swc/core'
+  - esbuild
+  - lmdb
+  - msgpackr-extract
+  - unrs-resolver
+
+onlyBuiltDependencies:
+  - better-sqlite3
+  - electron
+  - nx
diff --git a/test-signal.ts b/test-signal.ts
new file mode 100644
index 0000000..e54ee35
--- /dev/null
+++ b/test-signal.ts
@@ -0,0 +1,3 @@
+import { signal } from '@angular/core';
+const sig = signal<any>(undefined);
+console.log(!!sig());
diff --git a/tools/i18n/apply-shell-es-ui.mjs b/tools/i18n/apply-shell-es-ui.mjs
new file mode 100644
index 0000000..bd1cc32
--- /dev/null
+++ b/tools/i18n/apply-shell-es-ui.mjs
@@ -0,0 +1,227 @@
+/**
+ * Spanish copy for the Xtream / workspace shell UI (replaces merged English in es.json).
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const esPath = path.resolve(
+    __dirname,
+    '..',
+    '..',
+    'apps/web/src/assets/i18n/es.json'
+);
+
+const j = JSON.parse(fs.readFileSync(esPath, 'utf8'));
+
+const shell = {
+    GO_TO_DASHBOARD: 'Volver al panel',
+    GO_TO_SOURCES: 'Ir a fuentes',
+    DROP_OVERLAY_TITLE: 'Suelta para añadir lista',
+    DROP_OVERLAY_BODY:
+        'Suelta un archivo .m3u o .m3u8 en cualquier parte del espacio de trabajo para importarlo.',
+    DROP_OVERLAY_REJECTED_BODY:
+        'Suelta un archivo .m3u o .m3u8. Pulsa Esc para cerrar.',
+    DROP_OVERLAY_REJECTED_UNSUPPORTED: 'Tipo de archivo no admitido',
+    DROP_OVERLAY_REJECTED_EMPTY: 'Ese archivo está vacío',
+    DROP_OVERLAY_REJECTED_READ_ERROR: 'No se pudo leer el archivo',
+    DROP_IMPORT_SUCCESS: 'Importando «{{title}}»…',
+    EXTERNAL_PLAYBACK_CLOSE: 'Cerrar reproductor',
+    BRAND_ALT: 'IPTVnator',
+    RAIL_DASHBOARD: 'Panel',
+    OPEN_DASHBOARD: 'Abrir panel',
+    RAIL_SOURCES: 'Fuentes',
+    OPEN_SOURCES: 'Abrir fuentes',
+    RAIL_GLOBAL_FAVORITES: 'Favoritos globales',
+    RAIL_GLOBAL_RECENT: 'Visto recientemente',
+    RAIL_SETTINGS: 'Ajustes',
+    OPEN_SETTINGS: 'Abrir ajustes',
+    RAIL_LIBRARY: 'Biblioteca',
+    RAIL_MOVIES: 'Películas',
+    RAIL_LIVE: 'TV en directo',
+    RAIL_SERIES: 'Series',
+    RAIL_RECENTLY_ADDED: 'Añadidos recientemente',
+    RAIL_SEARCH: 'Búsqueda avanzada',
+    RAIL_RECENT: 'Visto recientemente',
+    RAIL_FAVORITES: 'Favoritos',
+    RAIL_DOWNLOADS: 'Descargas',
+    RAIL_ALL_CHANNELS: 'Todos los canales',
+    RAIL_GROUPS: 'Grupos',
+    RAIL_CONTEXT_ACTIONS: 'Acciones de la sección',
+    SEARCH_LABEL: 'Buscar',
+    SEARCH_SOURCES_PLACEHOLDER: 'Buscar fuentes (todas las listas)…',
+    SEARCH_PLAYLIST_PLACEHOLDER: 'Buscar en esta lista…',
+    SEARCH_SECTION_PLACEHOLDER: 'Buscar en esta sección…',
+    FILTER_SECTION_PLACEHOLDER: 'Filtrar esta sección…',
+    SEARCH_STATUS_LOADED_ONLY: 'Solo canales cargados',
+    COMMAND_PALETTE_SHORTCUT: 'Paleta de comandos (Ctrl/Cmd+K)',
+    OPEN_COMMAND_PALETTE: 'Abrir paleta de comandos',
+    ADD_PLAYLIST_ALL: 'Añadir lista',
+    ADD_PLAYLIST: 'Añadir lista',
+    OPEN_DOWNLOADS: 'Abrir descargas',
+    OPEN_CONTEXT_ACTIONS: 'Abrir acciones de la sección',
+    NO_SECTION_ACTIONS: 'No hay acciones para esta sección',
+    PLAYLIST_INFO: 'Info de la lista',
+    ACCOUNT_INFO: 'Info de la cuenta',
+    REFRESH_PLAYLIST: 'Actualizar lista',
+    CLEAR_COMPLETED_DOWNLOADS_ALL: 'Borrar descargas completadas (todas las listas)',
+    CLEAR_COMPLETED_DOWNLOADS_ALL_ARIA:
+        'Borrar descargas completadas de todas las listas',
+    CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST:
+        'Borrar descargas completadas (esta lista)',
+    CLEAR_COMPLETED_DOWNLOADS_THIS_PLAYLIST_ARIA:
+        'Borrar descargas completadas de esta lista',
+    CLEAR_RECENTLY_VIEWED_SECTION: 'Borrar visto recientemente',
+    CLEAR_RECENTLY_VIEWED_SECTION_ARIA:
+        'Borrar visto recientemente de esta sección',
+    CLEAR_RECENTLY_VIEWED_TYPE: 'Borrar visto recientemente ({{type}})',
+    CLEAR_RECENTLY_VIEWED_DIALOG_TITLE:
+        '¿Borrar visto recientemente ({{type}})?',
+    CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_PLAYLIST:
+        'Se quitarán del historial todos los elementos de {{type}} de esta lista. No se puede deshacer.',
+    CLEAR_RECENTLY_VIEWED_DIALOG_MESSAGE_ALL:
+        'Se quitarán del historial todos los elementos de {{type}} de todas las listas. No se puede deshacer.',
+    CLEAR_FAVORITES_TYPE: 'Borrar favoritos de {{type}}',
+    CLEAR_FAVORITES_DIALOG_TITLE: '¿Quitar todos los favoritos de {{type}}?',
+    CLEAR_FAVORITES_DIALOG_MESSAGE_PLAYLIST:
+        'Se quitarán todos los favoritos de {{type}} de esta lista. No se puede deshacer.',
+    CLEAR_FAVORITES_DIALOG_MESSAGE_ALL:
+        'Se quitarán todos los favoritos de {{type}} de todas las listas. No se puede deshacer.',
+    XTREAM_CODE: 'Código Xtream',
+    STALKER_PORTAL: 'Portal Stalker',
+    CHANNELS_COUNT: '{{count}} canales',
+    NO_SOURCES_AVAILABLE: 'No hay fuentes disponibles',
+    ONE_SOURCE_AVAILABLE: '1 fuente disponible',
+    SOURCES_AVAILABLE: '{{count}} fuentes disponibles',
+    XTREAM_IMPORT_TITLE: 'Sincronizando lista',
+    XTREAM_IMPORT_REMOTE_BADGE: 'Fuente remota',
+    XTREAM_IMPORT_LOCAL_BADGE: 'Biblioteca local',
+    XTREAM_IMPORT_DETAIL_REMOTE: 'Esperando respuesta del proveedor.',
+    XTREAM_IMPORT_DETAIL_LOCAL:
+        'Preparando un cambio de lista más rápido para la próxima visita.',
+    XTREAM_IMPORT_PREPARING: 'Preparando biblioteca local…',
+    XTREAM_IMPORT_LOADING: 'Obteniendo datos de la lista…',
+    XTREAM_IMPORT_SAVING: 'Guardando datos de la lista en local…',
+    XTREAM_IMPORT_RESTORING_FAVORITES: 'Restaurando favoritos desde local…',
+    XTREAM_IMPORT_RESTORING_RECENT: 'Restaurando visto recientemente desde local…',
+    XTREAM_IMPORT_PROGRESS: '{{type}} importados: {{current}} / {{total}}',
+    XTREAM_IMPORT_CANCEL: 'Detener sincronización',
+    XTREAM_IMPORT_CANCELLING: 'Deteniendo sincronización…',
+};
+
+const shellCommands = {
+    ADD_PLAYLIST_M3U_LABEL: 'Añadir lista M3U',
+    ADD_PLAYLIST_M3U_DESCRIPTION:
+        'Abrir el diálogo en la pestaña de archivo o URL M3U',
+    ADD_PLAYLIST_XTREAM_LABEL: 'Añadir lista Xtream Codes',
+    ADD_PLAYLIST_XTREAM_DESCRIPTION:
+        'Abrir el diálogo en la pestaña Xtream Codes',
+    ADD_PLAYLIST_STALKER_LABEL: 'Añadir portal Stalker',
+    ADD_PLAYLIST_STALKER_DESCRIPTION:
+        'Abrir el diálogo en la pestaña Portal Stalker',
+    GLOBAL_SEARCH_LABEL: 'Buscar en todas las listas Xtream',
+    GLOBAL_SEARCH_DESCRIPTION: 'Abrir búsqueda global',
+    PLAYLIST_SEARCH_LABEL: 'Búsqueda avanzada en esta lista',
+    PLAYLIST_SEARCH_DESCRIPTION: 'Abrir búsqueda avanzada de la lista',
+    OPEN_GLOBAL_FAVORITES_LABEL: 'Abrir favoritos globales',
+    OPEN_GLOBAL_FAVORITES_DESCRIPTION: 'Ir a favoritos agregados',
+    OPEN_DOWNLOADS_LABEL: 'Abrir descargas',
+    OPEN_DOWNLOADS_DESCRIPTION: 'Ir a la vista de descargas',
+    OPEN_GLOBAL_RECENT_LABEL: 'Abrir visto recientemente',
+    OPEN_GLOBAL_RECENT_DESCRIPTION: 'Abrir página global de recientes',
+    OPEN_SETTINGS_LABEL: 'Abrir ajustes',
+    OPEN_SETTINGS_DESCRIPTION: 'Ir a los ajustes de la aplicación',
+    OPEN_SOURCES_LABEL: 'Gestionar fuentes',
+    OPEN_SOURCES_DESCRIPTION: 'Ir a la gestión de fuentes',
+    OPEN_DASHBOARD_LABEL: 'Abrir panel',
+    OPEN_DASHBOARD_DESCRIPTION: 'Ir al panel',
+    ADD_PLAYLIST_LABEL: 'Añadir fuente',
+    ADD_PLAYLIST_DESCRIPTION: 'Abrir diálogo para añadir lista',
+    REFRESH_PLAYLIST_LABEL: 'Actualizar lista',
+    REFRESH_PLAYLIST_DESCRIPTION: 'Volver a sincronizar con el origen',
+    PLAYLIST_INFO_LABEL: 'Detalles de la lista',
+    PLAYLIST_INFO_DESCRIPTION: 'Mostrar información de la lista actual',
+    ACCOUNT_INFO_LABEL: 'Info de la cuenta',
+    ACCOUNT_INFO_DESCRIPTION: 'Mostrar datos de la cuenta Xtream',
+    OPEN_VIEW_DESCRIPTION: 'Ir a {{view}}',
+    CLEAR_CURRENT_VIEW_DESCRIPTION:
+        'Borrar todos los elementos visibles de {{type}} en esta vista',
+    OPEN_MULTI_EPG_DESCRIPTION: 'Abrir la guía multi-canal',
+    GO_TO_VOD_LABEL: 'Películas',
+    GO_TO_VOD_DESCRIPTION: 'Ir a películas',
+    GO_TO_LIVE_LABEL: 'TV en directo',
+    GO_TO_LIVE_DESCRIPTION: 'Ir a TV en directo',
+    GO_TO_SERIES_LABEL: 'Series',
+    GO_TO_SERIES_DESCRIPTION: 'Ir a series',
+};
+
+const context = {
+    CATEGORIES: 'Categorías',
+    MOVIE_CATEGORIES: 'Categorías de películas',
+    SERIES_CATEGORIES: 'Categorías de series',
+    LIVE_CATEGORIES: 'Categorías en directo',
+    XTREAM_SYNCING_MOVIES: 'Sincronizando categorías de películas…',
+    XTREAM_SYNCING_SERIES: 'Sincronizando categorías de series…',
+    XTREAM_SYNCING_LIVE: 'Sincronizando categorías en directo…',
+    XTREAM_SOURCE: 'Fuente Xtream',
+    STALKER_PORTAL: 'Portal Stalker',
+    MANAGE_CATEGORIES: 'Gestionar categorías',
+    LOAD_CATEGORIES_ERROR: 'No se pudieron cargar las categorías',
+    LOAD_CATEGORIES_ERROR_HINT:
+        'Reintenta o comprueba la configuración del portal.',
+    FILTER_BY_TYPE: 'Filtrar por tipo',
+    ITEM_COUNT_ONE: '1 elemento',
+    ITEM_COUNT_OTHER: '{{count}} elementos',
+    SEARCH: 'Buscar',
+    SEARCH_CATEGORIES: 'Buscar categorías',
+};
+
+const commandPalette = {
+    TITLE: 'Paleta de comandos',
+    SUBTITLE: 'Acciones globales y del contexto',
+    SEARCH_PLACEHOLDER: 'Escribe para filtrar comandos',
+    SEARCH_LABEL: 'Filtrar comandos',
+    EMPTY: 'No se encontraron comandos',
+    GROUP_GLOBAL: 'Acciones globales',
+    GROUP_PLAYLIST: 'Esta lista',
+    GROUP_VIEW: 'Vista actual',
+    GROUP_SECTION: 'Esta sección',
+};
+
+j.WORKSPACE = j.WORKSPACE || {};
+j.WORKSPACE.SHELL = { ...j.WORKSPACE.SHELL, ...shell };
+j.WORKSPACE.SHELL.COMMANDS = {
+    ...j.WORKSPACE.SHELL.COMMANDS,
+    ...shellCommands,
+};
+j.WORKSPACE.CONTEXT = { ...j.WORKSPACE.CONTEXT, ...context };
+j.WORKSPACE.COMMAND_PALETTE = {
+    ...j.WORKSPACE.COMMAND_PALETTE,
+    ...commandPalette,
+};
+
+if (j.PORTALS) {
+    j.PORTALS.SELECT_CATEGORY = 'Selecciona una categoría';
+}
+
+if (j.CANCEL === 'Cancel') j.CANCEL = 'Cancelar';
+if (j.CLEAR === 'Clear') j.CLEAR = 'Limpiar';
+if (j.SHOW_MORE === 'More') j.SHOW_MORE = 'Más';
+if (j.SHOW_LESS === 'Less') j.SHOW_LESS = 'Menos';
+if (j.PLAYLISTS === 'Playlists') j.PLAYLISTS = 'Listas de reproducción';
+
+if (j.REMOTE_CONTROL?.TITLE === 'Remote control') {
+    j.REMOTE_CONTROL = {
+        ...j.REMOTE_CONTROL,
+        TITLE: 'Control remoto',
+        SUBTITLE: 'Controla el reproductor IPTV a distancia',
+        UP_CHANNEL: 'Canal siguiente',
+        DOWN_CHANNEL: 'Canal anterior',
+        HEADER: 'Control remoto IPTVnator',
+        FOOTER: 'Control remoto IPTVnator',
+    };
+}
+
+fs.writeFileSync(esPath, JSON.stringify(j, null, 4) + '\n');
+console.log('Applied Spanish UI strings for WORKSPACE shell / PORTALS / root keys.');
diff --git a/tools/i18n/fill-missing-es-from-en.mjs b/tools/i18n/fill-missing-es-from-en.mjs
new file mode 100644
index 0000000..5ae913c
--- /dev/null
+++ b/tools/i18n/fill-missing-es-from-en.mjs
@@ -0,0 +1,45 @@
+/**
+ * Recursively copies missing keys from en.json into es.json (does not overwrite
+ * existing Spanish strings). Fixes ngx-translate showing raw keys like WORKSPACE.SHELL.*.
+ *
+ * After running this, optionally run `node tools/i18n/apply-shell-es-ui.mjs` to
+ * replace merged English workspace shell strings with Spanish for KiraTV / es UI.
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, '..', '..');
+const enPath = path.join(root, 'apps/web/src/assets/i18n/en.json');
+const esPath = path.join(root, 'apps/web/src/assets/i18n/es.json');
+
+function fillMissing(enVal, esVal) {
+    if (enVal === null || typeof enVal !== 'object' || Array.isArray(enVal)) {
+        return esVal !== undefined ? esVal : enVal;
+    }
+    const out =
+        esVal !== null && typeof esVal === 'object' && !Array.isArray(esVal)
+            ? { ...esVal }
+            : {};
+    for (const [k, v] of Object.entries(enVal)) {
+        if (out[k] === undefined) {
+            out[k] = Array.isArray(v) ? [...v] : v;
+        } else if (
+            v !== null &&
+            typeof v === 'object' &&
+            !Array.isArray(v) &&
+            typeof out[k] === 'object' &&
+            !Array.isArray(out[k])
+        ) {
+            out[k] = fillMissing(v, out[k]);
+        }
+    }
+    return out;
+}
+
+const en = JSON.parse(fs.readFileSync(enPath, 'utf8'));
+const es = JSON.parse(fs.readFileSync(esPath, 'utf8'));
+const merged = fillMissing(en, es);
+fs.writeFileSync(esPath, JSON.stringify(merged, null, 4) + '\n');
+console.log('Merged missing i18n keys from en.json into es.json');
diff --git a/tools/packaging/download-vlc-windows.mjs b/tools/packaging/download-vlc-windows.mjs
new file mode 100644
index 0000000..b6190e8
--- /dev/null
+++ b/tools/packaging/download-vlc-windows.mjs
@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * Downloads the official VLC for Windows x64 zip and unpacks it into
+ * tools/packaging/bundled-vlc/win64/ (vlc.exe at the root of that folder).
+ * Used by make-kiratv-windows-nsis.mjs so the NSIS installer ships VLC in resources/vlc.
+ *
+ * GPL-2.0+ applies to VLC; see https://www.videolan.org/legal.html
+ */
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, '..', '..');
+const destDir = path.join(root, 'tools', 'packaging', 'bundled-vlc', 'win64');
+const VLC_VERSION = '3.0.21';
+const zipName = `vlc-${VLC_VERSION}-win64.zip`;
+const zipUrl = `https://get.videolan.org/vlc/${VLC_VERSION}/win64/${zipName}`;
+
+const force = process.argv.includes('--force');
+const vlcExe = path.join(destDir, 'vlc.exe');
+
+if (!force && fs.existsSync(vlcExe)) {
+    console.log('VLC bundle already present:', vlcExe);
+    console.log('Use --force to re-download.');
+    process.exit(0);
+}
+
+const tmpParent = path.join(root, 'tmp');
+fs.mkdirSync(tmpParent, { recursive: true });
+const tmpRoot = fs.mkdtempSync(path.join(tmpParent, 'vlc-dl-'));
+const zipPath = path.join(tmpRoot, zipName);
+const extractDir = path.join(tmpRoot, 'extracted');
+
+try {
+    console.log('Downloading', zipUrl);
+    const res = await fetch(zipUrl, { redirect: 'follow' });
+    if (!res.ok) {
+        throw new Error(`HTTP ${res.status} ${res.statusText}`);
+    }
+    const buf = Buffer.from(await res.arrayBuffer());
+    fs.writeFileSync(zipPath, buf);
+
+    fs.mkdirSync(extractDir, { recursive: true });
+    if (process.platform === 'win32') {
+        execSync(`tar -xf "${zipPath}" -C "${extractDir}"`, {
+            stdio: 'inherit',
+            shell: true,
+        });
+    } else {
+        execSync(`unzip -o -q "${zipPath}" -d "${extractDir}"`, {
+            stdio: 'inherit',
+        });
+    }
+
+    const top = fs.readdirSync(extractDir, { withFileTypes: true });
+    const innerDir = top.find((e) => e.isDirectory());
+    if (!innerDir) {
+        throw new Error('Unexpected zip layout: no top-level directory');
+    }
+    const innerPath = path.join(extractDir, innerDir.name);
+    const innerVlc = path.join(innerPath, 'vlc.exe');
+    if (!fs.existsSync(innerVlc)) {
+        throw new Error('Unexpected zip layout: vlc.exe not found under ' + innerPath);
+    }
+
+    fs.rmSync(destDir, { recursive: true, force: true });
+    fs.mkdirSync(path.dirname(destDir), { recursive: true });
+    fs.cpSync(innerPath, destDir, { recursive: true });
+
+    console.log('VLC extracted to', destDir);
+} finally {
+    fs.rmSync(tmpRoot, { recursive: true, force: true });
+}
diff --git a/tools/packaging/linux-after-pack.cjs b/tools/packaging/linux-after-pack.cjs
new file mode 100644
index 0000000..93e6b8c
--- /dev/null
+++ b/tools/packaging/linux-after-pack.cjs
@@ -0,0 +1,72 @@
+const fs = require('fs/promises');
+const path = require('path');
+
+function log(message) {
+    console.log(`  - ${message}`);
+}
+
+function createLoaderScript({ executableName, productName }) {
+    return `#!/usr/bin/env bash
+set -u
+
+UNPRIVILEGED_USERNS_ENABLED=$(cat /proc/sys/kernel/unprivileged_userns_clone 2>/dev/null)
+RESTRICT_UNPRIVILEGED_USERNS=$(cat /proc/sys/kernel/apparmor_restrict_unprivileged_userns 2>/dev/null)
+
+SCRIPT_PATH="\${BASH_SOURCE[0]}"
+if command -v readlink >/dev/null 2>&1; then
+    RESOLVED_SCRIPT_PATH=$(readlink -f "$SCRIPT_PATH" 2>/dev/null || true)
+    if [ -n "$RESOLVED_SCRIPT_PATH" ]; then
+        SCRIPT_PATH="$RESOLVED_SCRIPT_PATH"
+    fi
+fi
+
+SCRIPT_DIR="$(cd "$(dirname "$SCRIPT_PATH")" && pwd)"
+
+APPLY_NO_SANDBOX_FLAG=0
+if [ "$UNPRIVILEGED_USERNS_ENABLED" != 1 ] || [ "$RESTRICT_UNPRIVILEGED_USERNS" = 1 ]; then
+    APPLY_NO_SANDBOX_FLAG=1
+fi
+
+if [ "$SCRIPT_DIR" = "/usr/bin" ]; then
+    SCRIPT_DIR="/opt/${productName}"
+fi
+
+EXEC_ARGS=()
+if [ "$APPLY_NO_SANDBOX_FLAG" = 1 ]; then
+    echo "Note: Running with --no-sandbox since unprivileged_userns_clone is disabled or apparmor_restrict_unprivileged_userns is enabled."
+    EXEC_ARGS+=(--no-sandbox)
+fi
+
+exec "$SCRIPT_DIR/${executableName}.bin" "\${EXEC_ARGS[@]}" "$@"
+`;
+}
+
+async function afterPackHook(params) {
+    if (params.electronPlatformName !== 'linux') {
+        return;
+    }
+
+    log('applying Linux launcher sandbox fix');
+
+    const executable = path.join(params.appOutDir, params.packager.executableName);
+
+    try {
+        await fs.rename(executable, `${executable}.bin`);
+        await fs.writeFile(
+            executable,
+            createLoaderScript({
+                executableName: params.packager.executableName,
+                productName: params.packager.appInfo.productName,
+            })
+        );
+        await fs.chmod(executable, 0o755);
+    } catch (error) {
+        log(`failed to create launcher wrapper: ${error.message}`);
+        throw new Error('Failed to create launcher wrapper');
+    }
+
+    log('Linux launcher sandbox fix applied');
+}
+
+module.exports = afterPackHook;
+module.exports.createLoaderScript = createLoaderScript;
diff --git a/tools/packaging/make-kiratv-linux-deb-appimage.mjs b/tools/packaging/make-kiratv-linux-deb-appimage.mjs
new file mode 100644
index 0000000..11b512f
--- /dev/null
+++ b/tools/packaging/make-kiratv-linux-deb-appimage.mjs
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+/**
+ * Build KiraTV and package .deb + AppImage for the current machine architecture.
+ */
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const workspaceRoot = path.resolve(__dirname, '..', '..');
+const configPath = path.join(workspaceRoot, 'electron-builder.json');
+
+function linuxArchFromNode() {
+    switch (process.arch) {
+        case 'arm64':
+            return 'arm64';
+        case 'arm':
+            return 'armv7l';
+        default:
+            return 'x64';
+    }
+}
+
+const original = fs.readFileSync(configPath, 'utf8');
+const config = JSON.parse(original);
+
+const arch = linuxArchFromNode();
+config.linux = config.linux ?? {};
+config.linux.target = [
+    { target: 'deb', arch: [arch] },
+    { target: 'AppImage', arch: [arch] },
+];
+
+fs.writeFileSync(configPath, JSON.stringify(config, null, 4) + '\n');
+
+const run = (cmd) => {
+    execSync(cmd, { stdio: 'inherit', cwd: workspaceRoot, env: process.env });
+};
+
+try {
+    const nx = path.join(workspaceRoot, 'node_modules', '.bin', 'nx');
+    const nxCmd = fs.existsSync(nx) ? `"${nx}"` : 'npx nx';
+    run(`${nxCmd} run electron-backend:build --configuration=kiratv`);
+    run(`${nxCmd} run electron-backend:make --configuration=kiratv`);
+
+    console.log(
+        '\nPaquetes generados en dist/executables: .deb y .AppImage (kiratv-*-linux-*).\n'
+    );
+} finally {
+    fs.writeFileSync(configPath, original);
+}
diff --git a/tools/packaging/make-kiratv-linux-deb.mjs b/tools/packaging/make-kiratv-linux-deb.mjs
new file mode 100644
index 0000000..2984949
--- /dev/null
+++ b/tools/packaging/make-kiratv-linux-deb.mjs
@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * Build KiraTV and package only a .deb for the current machine architecture.
+ * Temporarily narrows electron-builder linux targets, then restores config.
+ */
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const workspaceRoot = path.resolve(__dirname, '..', '..');
+const configPath = path.join(workspaceRoot, 'electron-builder.json');
+
+function debArchFromNode() {
+    switch (process.arch) {
+        case 'arm64':
+            return 'arm64';
+        case 'arm':
+            return 'armv7l';
+        default:
+            return 'x64';
+    }
+}
+
+const original = fs.readFileSync(configPath, 'utf8');
+const config = JSON.parse(original);
+
+const arch = debArchFromNode();
+config.linux = config.linux ?? {};
+config.linux.target = [{ target: 'deb', arch: [arch] }];
+
+fs.writeFileSync(configPath, JSON.stringify(config, null, 4) + '\n');
+
+const run = (cmd) => {
+    execSync(cmd, { stdio: 'inherit', cwd: workspaceRoot, env: process.env });
+};
+
+try {
+    const nx = path.join(workspaceRoot, 'node_modules', '.bin', 'nx');
+    const nxCmd = fs.existsSync(nx) ? `"${nx}"` : 'npx nx';
+    run(`${nxCmd} run electron-backend:build --configuration=kiratv`);
+    run(`${nxCmd} run electron-backend:make --configuration=kiratv`);
+
+    console.log(
+        '\nPaquete .deb generado en dist/executables (busca kiratv-*-linux-*.deb).\n'
+    );
+} finally {
+    fs.writeFileSync(configPath, original);
+}
diff --git a/tools/packaging/make-kiratv-release-artifacts.mjs b/tools/packaging/make-kiratv-release-artifacts.mjs
new file mode 100644
index 0000000..0d3c2f9
--- /dev/null
+++ b/tools/packaging/make-kiratv-release-artifacts.mjs
@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+/**
+ * Linux: .deb + AppImage (arquitectura actual).
+ * Windows: solo si process.platform === 'win32' → NSIS x64 con VLC embebido.
+ */
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, '..', '..');
+
+function run(relScript) {
+    const p = path.join(root, relScript);
+    execSync(`node "${p}"`, { stdio: 'inherit', cwd: root, env: process.env });
+}
+
+run('tools/packaging/make-kiratv-linux-deb-appimage.mjs');
+
+if (process.platform === 'win32') {
+    run('tools/packaging/make-kiratv-windows-nsis.mjs');
+} else {
+    console.log(
+        '\n[Windows] Omitido en este SO. En un PC Windows ejecuta:\n' +
+            '  pnpm run make:kiratv:windows-nsis\n'
+    );
+}
diff --git a/tools/packaging/make-kiratv-windows-nsis.mjs b/tools/packaging/make-kiratv-windows-nsis.mjs
new file mode 100644
index 0000000..c40e46c
--- /dev/null
+++ b/tools/packaging/make-kiratv-windows-nsis.mjs
@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+/**
+ * Windows only: download bundled VLC, patch electron-builder to ship resources/vlc,
+ * then build KiraTV NSIS installer (x64).
+ */
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+if (process.platform !== 'win32') {
+    console.error(
+        'Este script debe ejecutarse en Windows (Node win32).\n' +
+            'Para generar el .exe con VLC embebido, usa una máquina Windows o un job windows-latest en CI.'
+    );
+    process.exit(1);
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const workspaceRoot = path.resolve(__dirname, '..', '..');
+const configPath = path.join(workspaceRoot, 'electron-builder.json');
+
+execSync(`node "${path.join(__dirname, 'download-vlc-windows.mjs')}"`, {
+    stdio: 'inherit',
+    cwd: workspaceRoot,
+});
+
+const vlcExe = path.join(
+    workspaceRoot,
+    'tools',
+    'packaging',
+    'bundled-vlc',
+    'win64',
+    'vlc.exe'
+);
+if (!fs.existsSync(vlcExe)) {
+    console.error('Missing bundled VLC after download:', vlcExe);
+    process.exit(1);
+}
+
+const original = fs.readFileSync(configPath, 'utf8');
+const config = JSON.parse(original);
+
+const baseExtra = Array.isArray(config.extraResources)
+    ? config.extraResources
+    : config.extraResources
+      ? [config.extraResources]
+      : [];
+
+config.extraResources = [
+    ...baseExtra.filter((e) => {
+        if (typeof e === 'string') {
+            return !String(e).includes('bundled-vlc');
+        }
+        if (e && typeof e === 'object' && e.to === 'vlc') {
+            return false;
+        }
+        return true;
+    }),
+    {
+        from: 'tools/packaging/bundled-vlc/win64',
+        to: 'vlc',
+        filter: ['**/*'],
+    },
+];
+
+config.win = config.win ?? {};
+config.win.target = [{ target: 'nsis', arch: ['x64'] }];
+
+fs.writeFileSync(configPath, JSON.stringify(config, null, 4) + '\n');
+
+const run = (cmd) => {
+    execSync(cmd, { stdio: 'inherit', cwd: workspaceRoot, env: process.env });
+};
+
+try {
+    const nx = path.join(workspaceRoot, 'node_modules', '.bin', 'nx');
+    const nxCmd = fs.existsSync(nx) ? `"${nx}"` : 'npx nx';
+    run(`${nxCmd} run electron-backend:build --configuration=kiratv`);
+    // On Windows, Nx defaults to the Windows platform. Do not pass --platform/--arch:
+    // Nx forwards them to dependency targets (web, remote-control-web) and breaks.
+    run(`${nxCmd} run electron-backend:make --configuration=kiratv`);
+
+    console.log(
+        '\nInstalador NSIS generado en dist/executables (kiratv-*-windows-x64-setup.exe) con VLC en resources/vlc.\n'
+    );
+} finally {
+    fs.writeFileSync(configPath, original);
+}
diff --git a/tools/packaging/verify-electron-package-layout.mjs b/tools/packaging/verify-electron-package-layout.mjs
new file mode 100644
index 0000000..52523d9
--- /dev/null
+++ b/tools/packaging/verify-electron-package-layout.mjs
@@ -0,0 +1,513 @@
+import fs from 'fs';
+import path from 'path';
+
+const args = process.argv.slice(2);
+const normalizedArgs = args[0] === '--' ? args.slice(1) : args;
+const [platform, arch = ''] = normalizedArgs;
+
+if (!platform) {
+    console.error(
+        'Usage: node tools/packaging/verify-electron-package-layout.mjs <macos|linux|windows> [arch]'
+    );
+    process.exit(1);
+}
+
+const workspaceRoot = process.cwd();
+const executablesRoot = path.join(workspaceRoot, 'dist', 'executables');
+const packageJsonPath = path.join(workspaceRoot, 'package.json');
+const electronBuilderConfigPath = path.join(
+    workspaceRoot,
+    'electron-builder.json'
+);
+const builderEffectiveConfigPath = path.join(
+    executablesRoot,
+    'builder-effective-config.yaml'
+);
+const flatpakMetainfoPath = path.join(
+    workspaceRoot,
+    'apps',
+    'electron-backend',
+    'linux',
+    'com.kiracloud.kiratv.metainfo.xml'
+);
+const packageMetadata = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+const electronBuilderConfig = JSON.parse(
+    fs.readFileSync(electronBuilderConfigPath, 'utf8')
+);
+const flatpakFinishArgs = electronBuilderConfig.flatpak?.finishArgs ?? [];
+const snapConfigInspection = loadSnapConfigInspection();
+const workerRelativeDir = path.join(
+    'dist',
+    'apps',
+    'electron-backend',
+    'workers'
+);
+const workerFiles = ['epg-parser.worker.js', 'database.worker.js'];
+const nativeModuleRelativeDirs = [
+    path.join('app.asar.unpacked', 'node_modules'),
+    path.join('app.asar.unpacked', 'electron-backend', 'node_modules'),
+    path.join(
+        'app.asar.unpacked',
+        'dist',
+        'apps',
+        'electron-backend',
+        'node_modules'
+    ),
+];
+const linuxExecutableName = getLinuxExecutableName();
+
+function directoryExists(directoryPath) {
+    return (
+        fs.existsSync(directoryPath) && fs.statSync(directoryPath).isDirectory()
+    );
+}
+
+function fileExists(filePath) {
+    return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
+}
+
+function getMacResourceDirs() {
+    const candidates = [
+        {
+            arch: 'x64',
+            directory: path.join(
+                executablesRoot,
+                'mac',
+                'KiraTV.app',
+                'Contents',
+                'Resources'
+            ),
+        },
+        {
+            arch: 'arm64',
+            directory: path.join(
+                executablesRoot,
+                'mac-arm64',
+                'KiraTV.app',
+                'Contents',
+                'Resources'
+            ),
+        },
+    ];
+
+    return candidates
+        .filter((candidate) => !arch || candidate.arch === arch)
+        .map((candidate) => candidate.directory)
+        .filter(directoryExists);
+}
+
+function getUnpackedResourceDirs(prefix) {
+    if (!directoryExists(executablesRoot)) {
+        return [];
+    }
+
+    return fs
+        .readdirSync(executablesRoot, { withFileTypes: true })
+        .filter(
+            (entry) =>
+                entry.isDirectory() &&
+                entry.name.startsWith(prefix) &&
+                entry.name.endsWith('-unpacked')
+        )
+        .map((entry) => path.join(executablesRoot, entry.name, 'resources'))
+        .filter(directoryExists);
+}
+
+function getResourceDirs() {
+    switch (platform) {
+        case 'macos':
+            return getMacResourceDirs();
+        case 'linux':
+            return getUnpackedResourceDirs('linux');
+        case 'windows':
+            return getUnpackedResourceDirs('win');
+        default:
+            console.error(`Unsupported platform "${platform}"`);
+            process.exit(1);
+    }
+}
+
+function sanitizeExecutableName(value) {
+    return value.replace(/[<>:"/\\|?*\u0000-\u001f]/g, '');
+}
+
+function getLinuxExecutableName() {
+    const configuredExecutableName =
+        electronBuilderConfig.linux?.executableName ??
+        electronBuilderConfig.executableName;
+
+    if (configuredExecutableName) {
+        return sanitizeExecutableName(configuredExecutableName);
+    }
+
+    return packageMetadata.name.toLowerCase();
+}
+
+function parseYamlScalar(value) {
+    const normalizedValue = value.trim();
+
+    if (normalizedValue === 'true') {
+        return true;
+    }
+
+    if (normalizedValue === 'false') {
+        return false;
+    }
+
+    if (normalizedValue === 'null') {
+        return null;
+    }
+
+    const singleQuotedMatch = normalizedValue.match(/^'(.*)'$/);
+    if (singleQuotedMatch) {
+        return singleQuotedMatch[1].replace(/''/g, "'");
+    }
+
+    const doubleQuotedMatch = normalizedValue.match(/^"(.*)"$/);
+    if (doubleQuotedMatch) {
+        return doubleQuotedMatch[1].replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+    }
+
+    return normalizedValue;
+}
+
+function getYamlSectionLines(yamlContent, sectionName) {
+    const lines = yamlContent.split(/\r?\n/);
+    const sectionHeader = `${sectionName}:`;
+    const sectionLines = [];
+    let isInsideSection = false;
+
+    for (const line of lines) {
+        if (!isInsideSection) {
+            if (line === sectionHeader) {
+                isInsideSection = true;
+            }
+            continue;
+        }
+
+        if (line.trim() === '') {
+            sectionLines.push(line);
+            continue;
+        }
+
+        const indentation = line.match(/^ */)?.[0].length ?? 0;
+        if (indentation === 0) {
+            break;
+        }
+
+        sectionLines.push(line);
+    }
+
+    return isInsideSection ? sectionLines : null;
+}
+
+function parseIndentedYamlSequence(lines, startIndex, indentation) {
+    const values = [];
+    let nextIndex = startIndex;
+
+    while (nextIndex < lines.length) {
+        const line = lines[nextIndex];
+        const trimmedLine = line.trim();
+
+        if (trimmedLine === '') {
+            nextIndex += 1;
+            continue;
+        }
+
+        const currentIndentation = line.match(/^ */)?.[0].length ?? 0;
+        if (currentIndentation < indentation) {
+            break;
+        }
+
+        if (currentIndentation > indentation || !trimmedLine.startsWith('- ')) {
+            break;
+        }
+
+        values.push(parseYamlScalar(trimmedLine.slice(2)));
+        nextIndex += 1;
+    }
+
+    return {
+        values,
+        nextIndex,
+    };
+}
+
+function parseIndentedYamlMapping(lines, startIndex, indentation) {
+    const values = {};
+    let nextIndex = startIndex;
+
+    while (nextIndex < lines.length) {
+        const line = lines[nextIndex];
+        const trimmedLine = line.trim();
+
+        if (trimmedLine === '') {
+            nextIndex += 1;
+            continue;
+        }
+
+        const currentIndentation = line.match(/^ */)?.[0].length ?? 0;
+        if (currentIndentation < indentation) {
+            break;
+        }
+
+        if (currentIndentation > indentation) {
+            break;
+        }
+
+        const separatorIndex = trimmedLine.indexOf(':');
+        if (separatorIndex === -1) {
+            break;
+        }
+
+        const key = trimmedLine.slice(0, separatorIndex).trim();
+        const rawValue = trimmedLine.slice(separatorIndex + 1).trim();
+        values[key] = parseYamlScalar(rawValue);
+        nextIndex += 1;
+    }
+
+    return {
+        values,
+        nextIndex,
+    };
+}
+
+function parseEffectiveSnapConfig(yamlContent) {
+    const sectionLines = getYamlSectionLines(yamlContent, 'snap');
+
+    if (!sectionLines) {
+        return null;
+    }
+
+    const snapConfig = {};
+
+    for (let index = 0; index < sectionLines.length; index += 1) {
+        const line = sectionLines[index];
+        const trimmedLine = line.trim();
+
+        if (trimmedLine === '') {
+            continue;
+        }
+
+        const indentation = line.match(/^ */)?.[0].length ?? 0;
+        if (indentation !== 2) {
+            continue;
+        }
+
+        const separatorIndex = trimmedLine.indexOf(':');
+        if (separatorIndex === -1) {
+            continue;
+        }
+
+        const key = trimmedLine.slice(0, separatorIndex).trim();
+        const rawValue = trimmedLine.slice(separatorIndex + 1).trim();
+
+        if (rawValue !== '') {
+            snapConfig[key] = parseYamlScalar(rawValue);
+            continue;
+        }
+
+        if (key === 'executableArgs') {
+            const { values, nextIndex } = parseIndentedYamlSequence(
+                sectionLines,
+                index + 1,
+                4
+            );
+            snapConfig[key] = values;
+            index = nextIndex - 1;
+            continue;
+        }
+
+        if (key === 'environment') {
+            const { values, nextIndex } = parseIndentedYamlMapping(
+                sectionLines,
+                index + 1,
+                4
+            );
+            snapConfig[key] = values;
+            index = nextIndex - 1;
+        }
+    }
+
+    return snapConfig;
+}
+
+function loadSnapConfigInspection() {
+    if (fileExists(builderEffectiveConfigPath)) {
+        const effectiveConfigContent = fs.readFileSync(
+            builderEffectiveConfigPath,
+            'utf8'
+        );
+        const effectiveSnapConfig = parseEffectiveSnapConfig(
+            effectiveConfigContent
+        );
+
+        if (effectiveSnapConfig) {
+            return {
+                config: effectiveSnapConfig,
+                sourcePath: builderEffectiveConfigPath,
+            };
+        }
+    }
+
+    return {
+        config: electronBuilderConfig.snap ?? {},
+        sourcePath: electronBuilderConfigPath,
+    };
+}
+
+function verifyLinuxLauncher(resourceDir, errors) {
+    const appDir = path.dirname(resourceDir);
+    const launcherPath = path.join(appDir, linuxExecutableName);
+    const launcherBinaryPath = `${launcherPath}.bin`;
+
+    if (!fileExists(launcherBinaryPath)) {
+        errors.push(
+            `Missing Linux launcher binary in ${appDir}: ${path.basename(launcherBinaryPath)}`
+        );
+        return;
+    }
+
+    if (!fileExists(launcherPath)) {
+        errors.push(
+            `Missing Linux launcher wrapper in ${appDir}: ${path.basename(launcherPath)}`
+        );
+        return;
+    }
+
+    const launcherScript = fs.readFileSync(launcherPath, 'utf8');
+    const requiredMarkers = [
+        'SCRIPT_PATH="${BASH_SOURCE[0]}"',
+        'readlink -f "$SCRIPT_PATH"',
+        `exec "$SCRIPT_DIR/${linuxExecutableName}.bin"`,
+    ];
+    const missingMarkers = requiredMarkers.filter(
+        (marker) => !launcherScript.includes(marker)
+    );
+
+    if (missingMarkers.length > 0) {
+        errors.push(
+            [
+                `Linux launcher wrapper is missing symlink-safe logic in ${launcherPath}.`,
+                'Missing markers:',
+                ...missingMarkers.map((marker) => `- ${marker}`),
+            ].join('\n')
+        );
+    }
+}
+
+function verifyFlatpakPermissions(errors) {
+    if (!Array.isArray(flatpakFinishArgs)) {
+        errors.push('Flatpak finishArgs must be configured as an array.');
+        return;
+    }
+
+    if (!flatpakFinishArgs.includes('--talk-name=org.freedesktop.Flatpak')) {
+        errors.push(
+            'Flatpak finishArgs must include --talk-name=org.freedesktop.Flatpak for host player launching.'
+        );
+    }
+}
+
+function verifySnapPackagingConfig(errors) {
+    if (snapConfigInspection.config?.base !== 'core22') {
+        errors.push(
+            `Snap config in ${snapConfigInspection.sourcePath} must set base to core22 so packaged native modules stay compatible with the Snap runtime glibc.`
+        );
+    }
+
+    const snapExecutableArgs = Array.isArray(
+        snapConfigInspection.config?.executableArgs
+    )
+        ? snapConfigInspection.config.executableArgs
+        : [];
+
+    if (!snapExecutableArgs.includes('--ozone-platform=x11')) {
+        errors.push(
+            `Snap config in ${snapConfigInspection.sourcePath} must include --ozone-platform=x11 in executableArgs.`
+        );
+    }
+
+    if (snapConfigInspection.config?.allowNativeWayland === true) {
+        errors.push(
+            `Snap config in ${snapConfigInspection.sourcePath} must not enable allowNativeWayland while the X11 startup workaround is required.`
+        );
+    }
+}
+
+function verifyResourceDir(resourceDir) {
+    const missingWorkers = workerFiles.filter(
+        (workerFile) =>
+            !fileExists(path.join(resourceDir, workerRelativeDir, workerFile))
+    );
+
+    const nativeModuleDirs = nativeModuleRelativeDirs.map((relativeDir) =>
+        path.join(resourceDir, relativeDir)
+    );
+    const matchingNativeModuleDir = nativeModuleDirs.find((nativeDir) =>
+        fileExists(path.join(nativeDir, 'better-sqlite3', 'package.json'))
+    );
+
+    const errors = [];
+
+    if (missingWorkers.length > 0) {
+        errors.push(
+            `Missing worker artifacts in ${resourceDir}: ${missingWorkers.join(', ')}`
+        );
+    }
+
+    if (!matchingNativeModuleDir) {
+        errors.push(
+            [
+                `Unable to find unpacked better-sqlite3 in ${resourceDir}.`,
+                'Checked:',
+                ...nativeModuleDirs.map((nativeDir) => `- ${nativeDir}`),
+            ].join('\n')
+        );
+    }
+
+    if (platform === 'linux') {
+        if (!fileExists(flatpakMetainfoPath)) {
+            errors.push(
+                `Missing Flatpak metainfo file: ${flatpakMetainfoPath}`
+            );
+        }
+        verifyFlatpakPermissions(errors);
+        verifySnapPackagingConfig(errors);
+        verifyLinuxLauncher(resourceDir, errors);
+    }
+
+    return {
+        resourceDir,
+        errors,
+        matchingNativeModuleDir,
+    };
+}
+
+const resourceDirs = getResourceDirs();
+
+if (resourceDirs.length === 0) {
+    console.error(
+        `No packaged resource directories found for ${platform}${arch ? ` (${arch})` : ''}.`
+    );
+    process.exit(1);
+}
+
+const results = resourceDirs.map(verifyResourceDir);
+const failures = results.filter((result) => result.errors.length > 0);
+
+for (const result of results) {
+    console.log(`Verified packaged resources: ${result.resourceDir}`);
+    if (result.matchingNativeModuleDir) {
+        console.log(
+            `Resolved unpacked better-sqlite3 at: ${result.matchingNativeModuleDir}`
+        );
+    }
+}
+
+if (failures.length > 0) {
+    for (const failure of failures) {
+        console.error(failure.errors.join('\n'));
+    }
+    process.exit(1);
+}
diff --git a/tools/release/capture-v020-screenshots.ts b/tools/release/capture-v020-screenshots.ts
new file mode 100644
index 0000000..eb09fce
--- /dev/null
+++ b/tools/release/capture-v020-screenshots.ts
@@ -0,0 +1,1165 @@
+import { spawn, type ChildProcess } from 'node:child_process';
+import {
+    accessSync,
+    mkdtempSync,
+    mkdirSync,
+    readFileSync,
+    rmSync,
+    writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import process from 'node:process';
+import {
+    _electron as electron,
+    type ElectronApplication,
+    type Page,
+} from '@playwright/test';
+
+type ThemeName = 'dark' | 'light';
+type ScreenshotSlug =
+    | 'dashboard'
+    | 'm3u-live-groups-two-column'
+    | 'settings'
+    | 'xtream-series-season-open'
+    | 'xtream-vod-details';
+
+type CaptureTarget = {
+    slug: ScreenshotSlug;
+    title: string;
+    kicker: string;
+};
+
+const workspaceRoot = process.cwd();
+const electronMainPath = path.join(
+    workspaceRoot,
+    'dist/apps/electron-backend/main.js'
+);
+const rendererIndexPath = path.join(workspaceRoot, 'dist/apps/web/index.html');
+const xtreamMockOrigin = 'http://localhost:3211';
+const outputRoot = path.join(
+    workspaceRoot,
+    'apps/website/public/blog/v0-20/screenshots'
+);
+const heroOutputPath = path.join(
+    workspaceRoot,
+    'apps/website/public/blog/v0-20/v0-20-hero.png'
+);
+const viewport = { width: 1280, height: 720 };
+const captureTargets: CaptureTarget[] = [
+    {
+        slug: 'dashboard',
+        title: 'Content-first dashboard',
+        kicker: 'New in v0.20',
+    },
+    {
+        slug: 'xtream-vod-details',
+        title: 'Richer movie details',
+        kicker: 'Xtream',
+    },
+    {
+        slug: 'xtream-series-season-open',
+        title: 'Series seasons and episodes',
+        kicker: 'Xtream',
+    },
+    {
+        slug: 'settings',
+        title: 'Reworked settings',
+        kicker: 'Customization',
+    },
+    {
+        slug: 'm3u-live-groups-two-column',
+        title: 'Two-column live TV',
+        kicker: 'M3U',
+    },
+];
+let capturedM3uPlaylistId: string | undefined;
+let capturedXtreamPlaylistId: string | undefined;
+
+async function main(): Promise<void> {
+    assertBuiltRuntimeExists();
+
+    mkdirSync(outputRoot, { recursive: true });
+    const managedMockServer = await ensureXtreamMockServer();
+    const dataDir = mkdtempSync(path.join(tmpdir(), 'iptvnator-v020-shots-'));
+    const m3uFixturePath = writeM3uPlaylistFixture(dataDir);
+    let app: ElectronApplication | undefined;
+
+    try {
+        app = await launchApp(dataDir);
+        const page = await findMainWindow(app);
+        await sizeElectronWindow(app);
+        await waitForAppReady(page);
+        await seedDemoData(page, m3uFixturePath);
+
+        for (const theme of ['dark', 'light'] as ThemeName[]) {
+            await applyTheme(page, theme);
+            await captureThemeSet(page, theme);
+        }
+
+        await createHeroImage(page);
+        await verifyExpectedAssets();
+    } finally {
+        await app?.close().catch(() => undefined);
+        managedMockServer?.kill('SIGTERM');
+        rmSync(dataDir, { recursive: true, force: true });
+    }
+}
+
+function assertBuiltRuntimeExists(): void {
+    if (!fileExists(electronMainPath) || !fileExists(rendererIndexPath)) {
+        throw new Error(
+            [
+                'Electron E2E runtime is missing.',
+                `Expected ${electronMainPath}`,
+                `Expected ${rendererIndexPath}`,
+                'Build it first, for example: pnpm nx run electron-backend:build-e2e',
+            ].join('\n')
+        );
+    }
+}
+
+async function ensureXtreamMockServer(): Promise<ChildProcess | undefined> {
+    if (await isHealthy(`${xtreamMockOrigin}/health`)) {
+        return undefined;
+    }
+
+    const child = spawn(
+        path.join(workspaceRoot, 'node_modules/.bin/tsx'),
+        ['apps/xtream-mock-server/src/main.ts'],
+        {
+            cwd: workspaceRoot,
+            env: {
+                ...process.env,
+                NODE_ENV: 'development',
+                PORT: '3211',
+            },
+            stdio: ['ignore', 'pipe', 'pipe'],
+        }
+    );
+
+    child.stdout?.on('data', (chunk) => {
+        process.stdout.write(`[xtream-mock] ${chunk}`);
+    });
+    child.stderr?.on('data', (chunk) => {
+        process.stderr.write(`[xtream-mock] ${chunk}`);
+    });
+
+    await waitForHealthy(`${xtreamMockOrigin}/health`, 20_000);
+    return child;
+}
+
+function buildM3uPlaylist(): string {
+    const channels = [
+        ['Newsroom', 'Aurora Local', 'aurora-local'],
+        ['Newsroom', 'Civic Pulse', 'civic-pulse'],
+        ['Sports', 'Fieldside One', 'fieldside-one'],
+        ['Sports', 'Motion Arena', 'motion-arena'],
+        ['Kids', 'Horizon Kids', 'horizon-kids'],
+        ['Kids', 'Story Lantern', 'story-lantern'],
+        ['Culture', 'Atlas Culture', 'atlas-culture'],
+        ['Culture', 'Night Music', 'night-music'],
+    ];
+    const stream = `${xtreamMockOrigin}/live/marketing/marketing/52000.m3u8`;
+    const lines = ['#EXTM3U'];
+
+    channels.forEach(([group, title, slug], index) => {
+        lines.push(
+            `#EXTINF:-1 tvg-id="demo-${index + 1}" tvg-name="${title}" tvg-logo="${xtreamMockOrigin}/assets/marketing/logo/${slug}.svg?size=256x256" group-title="${group}",${title}`
+        );
+        lines.push(stream);
+    });
+
+    return `${lines.join('\n')}\n`;
+}
+
+function writeM3uPlaylistFixture(dataDir: string): string {
+    const filePath = path.join(dataDir, 'v020-demo.m3u');
+    writeFileSync(filePath, buildM3uPlaylist(), 'utf8');
+    return filePath;
+}
+
+function marketingAssetUrl(
+    kind: 'backdrop' | 'episode' | 'logo' | 'poster' | 'season',
+    title: string,
+    size: string
+): string {
+    return `${xtreamMockOrigin}/assets/marketing/${kind}/${slugifyForFile(
+        title
+    )}.svg?size=${encodeURIComponent(size)}`;
+}
+
+async function launchApp(dataDir: string): Promise<ElectronApplication> {
+    return electron.launch({
+        args: [electronMainPath],
+        env: {
+            ...process.env,
+            ELECTRON_IS_DEV: '0',
+            IPTVNATOR_E2E_DATA_DIR: dataDir,
+            NODE_ENV: 'test',
+        },
+    });
+}
+
+async function findMainWindow(app: ElectronApplication): Promise<Page> {
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    for (const candidate of app.windows()) {
+        const title = await candidate.title();
+        if (!title.includes('DevTools')) {
+            return candidate;
+        }
+    }
+
+    return app.firstWindow();
+}
+
+async function sizeElectronWindow(app: ElectronApplication): Promise<void> {
+    await app.evaluate(({ BrowserWindow }, size) => {
+        const win = BrowserWindow.getAllWindows().find(
+            (candidate) => !candidate.webContents.getTitle().includes('DevTools')
+        );
+        win?.setSize(size.width, size.height);
+        win?.center();
+    }, viewport);
+}
+
+async function waitForAppReady(page: Page): Promise<void> {
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForSelector('app-root', { timeout: 45_000 });
+    await page.waitForFunction(
+        () => (document.querySelector('app-root')?.innerHTML.trim().length ?? 0) > 0,
+        { timeout: 45_000 }
+    );
+}
+
+async function seedDemoData(page: Page, m3uPath: string): Promise<void> {
+    await addXtreamPortal(page);
+    await addM3uPlaylist(page, m3uPath);
+    await seedDashboardActivity(page);
+}
+
+async function addXtreamPortal(page: Page): Promise<void> {
+    await openAddPlaylistDialog(page);
+    const dialog = page.locator('mat-dialog-container').last();
+
+    await clickDialogOption(dialog, /^xtream$/i);
+    await dialog.locator('#title').fill('v0.20 Fictional Xtream');
+    await dialog.locator('#serverUrl').fill(xtreamMockOrigin);
+    await dialog.locator('#username').fill('marketing');
+    await dialog.locator('#password').fill('marketing');
+    await dialog.getByRole('button', { name: /^(add|add playlist)$/i }).last().click();
+    await dialog.waitFor({ state: 'detached', timeout: 30_000 });
+    await page.waitForURL(/\/workspace\/xtreams\/[^/]+\/vod/, {
+        timeout: 45_000,
+    });
+    capturedXtreamPlaylistId = playlistIdFromUrl(page.url(), 'xtreams');
+    await page.locator('.category-content-layout, app-content-card').first().waitFor({
+        state: 'visible',
+        timeout: 45_000,
+    });
+}
+
+async function addM3uPlaylist(page: Page, m3uPath: string): Promise<void> {
+    await openAddPlaylistDialog(page);
+    const dialog = page.locator('mat-dialog-container').last();
+
+    await clickDialogOption(dialog, /^m3u$/i);
+    await clickDialogOption(dialog, /add\s+via\s+file\s+upload/i);
+
+    const fileInput = dialog.locator('input[type="file"][name="playlist"]');
+    await fileInput.evaluate((element, selectedFilePath) => {
+        (element as HTMLInputElement).dataset.filePathOverride =
+            selectedFilePath;
+    }, m3uPath);
+    await fileInput.setInputFiles(m3uPath);
+    await dialog
+        .getByRole('button', { name: /add playlist/i })
+        .last()
+        .click({ timeout: 15_000 });
+    await dialog.waitFor({ state: 'detached', timeout: 30_000 });
+    await page.waitForURL(/\/workspace\/playlists\/[^/]+\/all/, {
+        timeout: 45_000,
+    });
+    capturedM3uPlaylistId = playlistIdFromUrl(page.url(), 'playlists');
+    try {
+        await page.locator('[data-test-id="channel-item"]').first().waitFor({
+            state: 'visible',
+            timeout: 60_000,
+        });
+    } catch (error) {
+        await writeDebugScreenshot(page, 'm3u-import');
+        const diagnostics = await page.evaluate(() => ({
+            bodyText: document.body.innerText.slice(0, 2000),
+            title: document.title,
+            url: location.href,
+        }));
+
+        console.error(
+            `[capture] M3U import did not show channels: ${JSON.stringify(
+                diagnostics,
+                null,
+                2
+            )}`
+        );
+        throw error;
+    }
+}
+
+async function seedDashboardActivity(page: Page): Promise<void> {
+    const playlistId = requireCapturedPlaylistId('xtreams');
+    const items = [
+        {
+            xtreamId: 62000,
+            type: 'movie' as const,
+            backdropUrl: marketingAssetUrl('backdrop', 'Crimson Skylark', '1280x720'),
+            favorite: true,
+            recent: true,
+        },
+        {
+            xtreamId: 62001,
+            type: 'movie' as const,
+            backdropUrl: marketingAssetUrl('backdrop', 'The Voltage Guard', '1280x720'),
+            favorite: true,
+            recent: true,
+        },
+        {
+            xtreamId: 62002,
+            type: 'movie' as const,
+            backdropUrl: marketingAssetUrl('backdrop', 'Midnight Mantle', '1280x720'),
+            favorite: true,
+            recent: false,
+        },
+        {
+            xtreamId: 72000,
+            type: 'series' as const,
+            backdropUrl: marketingAssetUrl('backdrop', 'Skyline Sentinels', '1280x720'),
+            favorite: true,
+            recent: true,
+        },
+        {
+            xtreamId: 72001,
+            type: 'series' as const,
+            backdropUrl: marketingAssetUrl('backdrop', 'The Aegis Club', '1280x720'),
+            favorite: true,
+            recent: false,
+        },
+    ];
+
+    await page.evaluate(
+        async ({ items, playlistId }) => {
+            const electronApi = (window as typeof window & {
+                electron?: {
+                    dbAddFavorite?: (
+                        contentId: number,
+                        playlistId: string,
+                        backdropUrl?: string
+                    ) => Promise<unknown>;
+                    dbAddRecentItem?: (
+                        contentId: number,
+                        playlistId: string,
+                        backdropUrl?: string
+                    ) => Promise<unknown>;
+                    dbGetContentByXtreamId?: (
+                        xtreamId: number,
+                        playlistId: string,
+                        contentType?: 'live' | 'movie' | 'series'
+                    ) => Promise<{ id: number } | null>;
+                };
+            }).electron;
+
+            if (!electronApi?.dbGetContentByXtreamId) {
+                throw new Error('Electron database bridge is unavailable.');
+            }
+
+            for (const item of items) {
+                const content = await electronApi.dbGetContentByXtreamId(
+                    item.xtreamId,
+                    playlistId,
+                    item.type
+                );
+
+                if (!content?.id) {
+                    throw new Error(
+                        `Could not find imported Xtream content ${item.xtreamId}.`
+                    );
+                }
+
+                if (item.favorite) {
+                    await electronApi.dbAddFavorite?.(
+                        content.id,
+                        playlistId,
+                        item.backdropUrl
+                    );
+                }
+
+                if (item.recent) {
+                    await electronApi.dbAddRecentItem?.(
+                        content.id,
+                        playlistId,
+                        item.backdropUrl
+                    );
+                }
+            }
+        },
+        { items, playlistId }
+    );
+}
+
+async function openAddPlaylistDialog(page: Page): Promise<void> {
+    await page.getByRole('button', { name: /add playlist/i }).first().click();
+    await page.locator('mat-dialog-container').last().waitFor({
+        state: 'visible',
+        timeout: 15_000,
+    });
+}
+
+async function clickDialogOption(dialog: ReturnType<Page['locator']>, label: RegExp): Promise<void> {
+    const tab = dialog.getByRole('tab', { name: label }).first();
+    if ((await tab.count()) > 0) {
+        await tab.click();
+        return;
+    }
+
+    await dialog.getByRole('button', { name: label }).first().click();
+}
+
+async function applyTheme(page: Page, theme: ThemeName): Promise<void> {
+    await openSettings(page);
+    const testId = theme === 'dark' ? 'DARK_THEME' : 'LIGHT_THEME';
+    const themeButton = page.locator(`[data-test-id="${testId}"]`).first();
+
+    await themeButton.scrollIntoViewIfNeeded();
+    await themeButton.click();
+
+    const saveButton = page.locator('[data-test-id="save-settings"]').first();
+    if (await saveButton.isEnabled()) {
+        await saveButton.click();
+        await waitForTransientUiToSettle(page);
+    }
+
+    await page.waitForFunction(
+        (expectedTheme) =>
+            document.body.classList.contains('dark-theme') ===
+            (expectedTheme === 'dark'),
+        theme,
+        { timeout: 10_000 }
+    );
+}
+
+async function openSettings(page: Page): Promise<void> {
+    await page.locator('a[href$="/workspace/settings"]').first().click();
+    await page.waitForURL(/\/workspace\/settings/, { timeout: 15_000 });
+    await page.locator('[data-test-id="settings-container"]').waitFor({
+        state: 'visible',
+        timeout: 15_000,
+    });
+}
+
+async function captureThemeSet(page: Page, theme: ThemeName): Promise<void> {
+    await captureCurrentView(page, theme, 'settings');
+    await openDashboard(page);
+    await captureCurrentView(page, theme, 'dashboard');
+    await openXtreamVodDetails(page);
+    await captureCurrentView(page, theme, 'xtream-vod-details');
+    await openXtreamSeriesSeason(page);
+    await captureCurrentView(page, theme, 'xtream-series-season-open');
+    await openM3uGroupsView(page);
+    await captureCurrentView(page, theme, 'm3u-live-groups-two-column');
+}
+
+async function openDashboard(page: Page): Promise<void> {
+    await page.locator('a.brand[href$="/workspace/dashboard"]').first().click();
+    await page.waitForURL(/\/workspace\/dashboard/, { timeout: 20_000 });
+    await page.locator('[data-test-id="dashboard-page"]').waitFor({
+        state: 'visible',
+        timeout: 20_000,
+    });
+    await waitForTransientUiToSettle(page);
+    await page.locator('[data-test-id="dashboard-hero"]').waitFor({
+        state: 'visible',
+        timeout: 30_000,
+    });
+
+    for (const testId of [
+        'dashboard-recently-watched-rail',
+        'dashboard-global-favorites-rail',
+        'dashboard-recent-sources-rail',
+        'dashboard-xtream-recently-added-rail',
+    ]) {
+        await page.locator(`[data-test-id="${testId}"]`).waitFor({
+            state: 'visible',
+            timeout: 30_000,
+        });
+    }
+}
+
+async function waitForTransientUiToSettle(page: Page): Promise<void> {
+    await page
+        .locator('.mat-mdc-snack-bar-container')
+        .first()
+        .waitFor({ state: 'detached', timeout: 10_000 })
+        .catch(() => undefined);
+    await page.evaluate(() => {
+        document
+            .querySelectorAll('.mat-mdc-snack-bar-container, simple-snack-bar')
+            .forEach((element) => {
+                const overlayPane = element.closest('.cdk-overlay-pane');
+                (overlayPane ?? element).remove();
+            });
+    });
+    await page.waitForTimeout(250);
+}
+
+async function openXtreamVodDetails(page: Page): Promise<void> {
+    const xtreamId = requireCapturedPlaylistId('xtreams');
+
+    await clickHrefSuffix(page, `/workspace/xtreams/${xtreamId}/vod`);
+    await clickCategoryByName(page, 'Hero Premieres');
+    await clickFirstGridCard(page);
+    await page.waitForURL(/\/workspace\/xtreams\/[^/]+\/vod\/[^/]+\/[^/]+/, {
+        timeout: 30_000,
+    });
+    await page.locator('app-content-hero').waitFor({
+        state: 'visible',
+        timeout: 30_000,
+    });
+    await page.waitForTimeout(700);
+}
+
+async function openXtreamSeriesSeason(page: Page): Promise<void> {
+    const xtreamId = requireCapturedPlaylistId('xtreams');
+
+    await clickHrefSuffix(page, `/workspace/xtreams/${xtreamId}/series`);
+    await clickCategoryByName(page, 'Hero Teams');
+    await clickFirstGridCard(page);
+    await page.waitForURL(/\/workspace\/xtreams\/[^/]+\/series\/[^/]+\/[^/]+/, {
+        timeout: 30_000,
+    });
+    await page.locator('app-season-container').waitFor({
+        state: 'visible',
+        timeout: 30_000,
+    });
+    await page.locator('.season-card').first().click();
+    await page.locator('.episode-card, .episode-list-item').first().waitFor({
+        state: 'visible',
+        timeout: 20_000,
+    });
+    await page.waitForTimeout(700);
+}
+
+async function openM3uGroupsView(page: Page): Promise<void> {
+    const playlistId = requireCapturedPlaylistId('playlists');
+
+    await switchPlaylistFromHeader(page, 'v020-demo');
+    await page.waitForURL(new RegExp(`/workspace/playlists/${playlistId}/`), {
+        timeout: 20_000,
+    });
+    await clickHrefSuffix(page, `/workspace/playlists/${playlistId}/groups`);
+    await page.waitForURL(/\/workspace\/playlists\/[^/]+\/groups/, {
+        timeout: 20_000,
+    });
+    await page.locator('.group-nav-item').first().waitFor({
+        state: 'visible',
+        timeout: 20_000,
+    });
+    await page.locator('.group-nav-item').first().click();
+    await page.locator('[data-test-id="channel-item"]').first().click();
+    await page.waitForTimeout(1_000);
+}
+
+async function switchPlaylistFromHeader(
+    page: Page,
+    title: string
+): Promise<void> {
+    await page.locator('app-playlist-switcher .playlist-switcher-trigger').click();
+
+    const item = page
+        .locator('.cdk-overlay-pane .playlist-item')
+        .filter({ hasText: title })
+        .first();
+
+    await item.waitFor({ state: 'visible', timeout: 20_000 });
+    await item.click();
+    await page.locator('.cdk-overlay-pane .playlist-item').first().waitFor({
+        state: 'detached',
+        timeout: 10_000,
+    });
+}
+
+async function clickCategoryByName(
+    page: Page,
+    categoryName: string
+): Promise<void> {
+    const category = page
+        .locator('app-workspace-context-panel .category-item')
+        .filter({ hasText: categoryName })
+        .first();
+
+    try {
+        await category.waitFor({ state: 'visible', timeout: 30_000 });
+    } catch (error) {
+        await writeDebugScreenshot(page, `category-${slugifyForFile(categoryName)}`);
+        const diagnostics = await page.evaluate(() => ({
+            bodyText: document.body.innerText.slice(0, 2500),
+            categories: Array.from(
+                document.querySelectorAll(
+                    'app-workspace-context-panel .category-item'
+                )
+            ).map((element) => ({
+                id: element.getAttribute('data-category-id'),
+                text: (element.textContent ?? '').trim(),
+            })),
+            title: document.title,
+            url: location.href,
+        }));
+
+        console.error(
+            `[capture] Category ${categoryName} was not visible: ${JSON.stringify(
+                diagnostics,
+                null,
+                2
+            )}`
+        );
+        throw error;
+    }
+    await category.click();
+    await page.waitForTimeout(600);
+}
+
+async function clickFirstGridCard(page: Page): Promise<void> {
+    const card = page.locator('.category-content-layout mat-card').first();
+
+    await card.waitFor({ state: 'visible', timeout: 30_000 });
+    await card.click();
+}
+
+function requireCapturedPlaylistId(
+    provider: 'playlists' | 'xtreams'
+): string {
+    const id =
+        provider === 'playlists'
+            ? capturedM3uPlaylistId
+            : capturedXtreamPlaylistId;
+
+    if (!id) {
+        throw new Error(`Could not resolve captured ${provider} playlist id.`);
+    }
+
+    return id;
+}
+
+function playlistIdFromUrl(url: string, provider: 'playlists' | 'xtreams'): string {
+    const match = url.match(new RegExp(`/workspace/${provider}/([^/]+)`));
+
+    if (!match?.[1]) {
+        throw new Error(`Could not resolve ${provider} playlist id from URL ${url}`);
+    }
+
+    return match[1];
+}
+
+async function clickHrefSuffix(page: Page, suffix: string): Promise<void> {
+    const link = page.locator(`a[href$="${suffix}"]`).first();
+
+    await link.waitFor({ state: 'attached', timeout: 20_000 });
+    await link.click({ force: true });
+    await page.waitForTimeout(500);
+}
+
+async function captureCurrentView(
+    page: Page,
+    theme: ThemeName,
+    slug: ScreenshotSlug
+): Promise<void> {
+    const originalPath = screenshotPath('original', theme, slug);
+
+    mkdirSync(path.dirname(originalPath), { recursive: true });
+    await prepareForScreenshot(page);
+    await page.screenshot({
+        path: originalPath,
+        type: 'png',
+        fullPage: slug === 'dashboard',
+        scale: 'css',
+    });
+
+    await createDesignedCopy(
+        page,
+        originalPath,
+        screenshotPath('designed', theme, slug),
+        {
+            ...captureTargets.find((target) => target.slug === slug)!,
+            theme,
+        }
+    );
+}
+
+async function prepareForScreenshot(page: Page): Promise<void> {
+    await page.mouse.move(viewport.width - 32, viewport.height - 32);
+    await page.keyboard.press('Escape').catch(() => undefined);
+    await waitForTransientUiToSettle(page);
+    await page
+        .locator('.mat-mdc-tooltip, .mdc-tooltip, .mat-tooltip-panel')
+        .first()
+        .waitFor({ state: 'detached', timeout: 1_500 })
+        .catch(() => undefined);
+    await page.waitForTimeout(200);
+}
+
+async function writeDebugScreenshot(page: Page, name: string): Promise<void> {
+    const debugPath = path.join(outputRoot, 'debug', `${name}.png`);
+    mkdirSync(path.dirname(debugPath), { recursive: true });
+    await page.screenshot({ path: debugPath, fullPage: true, type: 'png' });
+}
+
+function screenshotPath(
+    variant: 'designed' | 'original',
+    theme: ThemeName,
+    slug: ScreenshotSlug
+): string {
+    return path.join(outputRoot, variant, theme, `${slug}.png`);
+}
+
+async function createDesignedCopy(
+    page: Page,
+    inputPath: string,
+    outputPath: string,
+    options: CaptureTarget & { theme: ThemeName }
+): Promise<void> {
+    mkdirSync(path.dirname(outputPath), { recursive: true });
+
+    const canvasWidth = 1920;
+    const canvasHeight = 1080;
+    const screenshotWidth = 1460;
+    const screenshotHeight = 822;
+    const left = 360;
+    const top = 170;
+    const palette =
+        options.theme === 'dark'
+            ? {
+                  bg1: '#090b12',
+                  bg2: '#172235',
+                  accent: '#49c6e5',
+                  text: '#f8fafc',
+                  muted: '#a7b4c8',
+              }
+            : {
+                  bg1: '#eef2f7',
+                  bg2: '#dce7ef',
+                  accent: '#2563eb',
+                  text: '#111827',
+                  muted: '#475569',
+              };
+    const dataUrl = await page.evaluate(
+        async ({
+            inputDataUrl,
+            options,
+            palette,
+            canvasWidth,
+            canvasHeight,
+            screenshotWidth,
+            screenshotHeight,
+            left,
+            top,
+        }) => {
+            const image = await loadCanvasImage(inputDataUrl);
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+
+            if (!context) {
+                throw new Error('Canvas 2D context is unavailable.');
+            }
+
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+
+            const background = context.createLinearGradient(
+                0,
+                0,
+                canvasWidth,
+                canvasHeight
+            );
+            background.addColorStop(0, palette.bg1);
+            background.addColorStop(1, palette.bg2);
+            context.fillStyle = background;
+            context.fillRect(0, 0, canvasWidth, canvasHeight);
+
+            context.globalAlpha = 0.16;
+            context.fillStyle = palette.accent;
+            context.beginPath();
+            context.arc(1710, 140, 260, 0, Math.PI * 2);
+            context.fill();
+            context.globalAlpha = 0.12;
+            context.beginPath();
+            context.arc(160, 930, 340, 0, Math.PI * 2);
+            context.fill();
+            context.globalAlpha = 0.28;
+            context.strokeStyle = palette.accent;
+            context.lineWidth = 4;
+            context.beginPath();
+            context.moveTo(0, 810);
+            context.bezierCurveTo(420, 650, 720, 1040, 1220, 840);
+            context.bezierCurveTo(1460, 744, 1720, 610, 1920, 720);
+            context.stroke();
+            context.globalAlpha = 1;
+
+            context.fillStyle = palette.accent;
+            context.font = '800 28px Arial, Helvetica, sans-serif';
+            context.fillText(options.kicker.toUpperCase(), 110, 150);
+            context.fillStyle = palette.text;
+            context.font = '900 72px Arial, Helvetica, sans-serif';
+            context.fillText(options.title, 110, 220);
+            context.fillStyle = palette.muted;
+            context.font = '600 28px Arial, Helvetica, sans-serif';
+            context.fillText(
+                'IPTVnator v0.20 release preview using fictional demo content',
+                110,
+                278
+            );
+
+            context.save();
+            context.shadowColor =
+                options.theme === 'dark'
+                    ? 'rgba(0, 0, 0, 0.42)'
+                    : 'rgba(0, 0, 0, 0.18)';
+            context.shadowBlur = 76;
+            context.shadowOffsetY = 34;
+            context.globalAlpha = options.theme === 'dark' ? 0.78 : 0.9;
+            context.fillStyle = options.theme === 'dark' ? '#020617' : '#ffffff';
+            drawRoundRect(
+                context,
+                left - 18,
+                top - 18,
+                screenshotWidth + 36,
+                screenshotHeight + 36,
+                34
+            );
+            context.fill();
+            context.restore();
+
+            context.save();
+            drawRoundRect(context, left, top, screenshotWidth, screenshotHeight, 18);
+            context.clip();
+            context.drawImage(
+                image,
+                0,
+                0,
+                image.naturalWidth,
+                image.naturalHeight,
+                left,
+                top,
+                screenshotWidth,
+                screenshotHeight
+            );
+            context.restore();
+
+            context.strokeStyle = hexToRgba(palette.accent, 0.35);
+            context.lineWidth = 2;
+            drawRoundRect(
+                context,
+                left - 18,
+                top - 18,
+                screenshotWidth + 36,
+                screenshotHeight + 36,
+                34
+            );
+            context.stroke();
+
+            return canvas.toDataURL('image/png');
+
+            function loadCanvasImage(src: string): Promise<HTMLImageElement> {
+                return new Promise((resolve, reject) => {
+                    const candidate = new Image();
+                    candidate.onload = () => resolve(candidate);
+                    candidate.onerror = () =>
+                        reject(new Error('Could not load screenshot image.'));
+                    candidate.src = src;
+                });
+            }
+
+            function drawRoundRect(
+                context: CanvasRenderingContext2D,
+                x: number,
+                y: number,
+                width: number,
+                height: number,
+                radius: number
+            ): void {
+                context.beginPath();
+                context.moveTo(x + radius, y);
+                context.lineTo(x + width - radius, y);
+                context.quadraticCurveTo(x + width, y, x + width, y + radius);
+                context.lineTo(x + width, y + height - radius);
+                context.quadraticCurveTo(
+                    x + width,
+                    y + height,
+                    x + width - radius,
+                    y + height
+                );
+                context.lineTo(x + radius, y + height);
+                context.quadraticCurveTo(x, y + height, x, y + height - radius);
+                context.lineTo(x, y + radius);
+                context.quadraticCurveTo(x, y, x + radius, y);
+                context.closePath();
+            }
+
+            function hexToRgba(hex: string, alpha: number): string {
+                const normalized = hex.replace('#', '');
+                const red = Number.parseInt(normalized.slice(0, 2), 16);
+                const green = Number.parseInt(normalized.slice(2, 4), 16);
+                const blue = Number.parseInt(normalized.slice(4, 6), 16);
+                return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+            }
+        },
+        {
+            inputDataUrl: fileToDataUrl(inputPath),
+            options,
+            palette,
+            canvasWidth,
+            canvasHeight,
+            screenshotWidth,
+            screenshotHeight,
+            left,
+            top,
+        }
+    );
+
+    writeDataUrlPng(outputPath, dataUrl);
+}
+
+async function createHeroImage(page: Page): Promise<void> {
+    const dashboard = screenshotPath('original', 'dark', 'dashboard');
+    const vod = screenshotPath('original', 'dark', 'xtream-vod-details');
+    const series = screenshotPath('original', 'light', 'xtream-series-season-open');
+    mkdirSync(path.dirname(heroOutputPath), { recursive: true });
+
+    const dataUrl = await page.evaluate(
+        async ({ dashboard, vod, series }) => {
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+
+            if (!context) {
+                throw new Error('Canvas 2D context is unavailable.');
+            }
+
+            canvas.width = 1600;
+            canvas.height = 900;
+
+            const background = context.createLinearGradient(0, 0, 1600, 900);
+            background.addColorStop(0, '#06111f');
+            background.addColorStop(0.52, '#111827');
+            background.addColorStop(1, '#233b54');
+            context.fillStyle = background;
+            context.fillRect(0, 0, 1600, 900);
+
+            context.globalAlpha = 0.18;
+            context.fillStyle = '#49c6e5';
+            context.beginPath();
+            context.arc(1380, 120, 240, 0, Math.PI * 2);
+            context.fill();
+            context.globalAlpha = 0.15;
+            context.fillStyle = '#f2a65a';
+            context.beginPath();
+            context.arc(170, 790, 290, 0, Math.PI * 2);
+            context.fill();
+            context.globalAlpha = 1;
+
+            context.fillStyle = '#49c6e5';
+            context.font = '800 30px Arial, Helvetica, sans-serif';
+            context.fillText('IPTVNATOR V0.20', 86, 138);
+            context.fillStyle = '#f8fafc';
+            context.font = '900 78px Arial, Helvetica, sans-serif';
+            context.fillText('Unified UI.', 86, 224);
+            context.fillText('Content-first.', 86, 306);
+            context.fillStyle = '#b9c4d6';
+            context.font = '600 28px Arial, Helvetica, sans-serif';
+            context.fillText(
+                'Dashboard, search, favorites, history, and settings reworked across M3U, Xtream, and Stalker.',
+                88,
+                366
+            );
+
+            await drawFramedImage(context, dashboard, 650, 130, 780, 438, 26, '#020617');
+            await drawFramedImage(context, vod, 500, 505, 520, 292, 22, '#020617');
+            await drawFramedImage(context, series, 990, 565, 430, 242, 20, '#f8fafc');
+
+            return canvas.toDataURL('image/png');
+
+            async function drawFramedImage(
+                context: CanvasRenderingContext2D,
+                src: string,
+                x: number,
+                y: number,
+                width: number,
+                height: number,
+                radius: number,
+                frameColor: string
+            ): Promise<void> {
+                const image = await loadCanvasImage(src);
+
+                context.save();
+                context.shadowColor = 'rgba(0, 0, 0, 0.45)';
+                context.shadowBlur = 60;
+                context.shadowOffsetY = 28;
+                context.globalAlpha = frameColor === '#f8fafc' ? 0.94 : 0.82;
+                context.fillStyle = frameColor;
+                drawRoundRect(context, x, y, width, height, radius);
+                context.fill();
+                context.restore();
+
+                context.save();
+                drawRoundRect(context, x, y, width, height, radius);
+                context.clip();
+                context.drawImage(
+                    image,
+                    0,
+                    0,
+                    image.naturalWidth,
+                    image.naturalHeight,
+                    x,
+                    y,
+                    width,
+                    height
+                );
+                context.restore();
+            }
+
+            function loadCanvasImage(src: string): Promise<HTMLImageElement> {
+                return new Promise((resolve, reject) => {
+                    const candidate = new Image();
+                    candidate.onload = () => resolve(candidate);
+                    candidate.onerror = () =>
+                        reject(new Error('Could not load screenshot image.'));
+                    candidate.src = src;
+                });
+            }
+
+            function drawRoundRect(
+                context: CanvasRenderingContext2D,
+                x: number,
+                y: number,
+                width: number,
+                height: number,
+                radius: number
+            ): void {
+                context.beginPath();
+                context.moveTo(x + radius, y);
+                context.lineTo(x + width - radius, y);
+                context.quadraticCurveTo(x + width, y, x + width, y + radius);
+                context.lineTo(x + width, y + height - radius);
+                context.quadraticCurveTo(
+                    x + width,
+                    y + height,
+                    x + width - radius,
+                    y + height
+                );
+                context.lineTo(x + radius, y + height);
+                context.quadraticCurveTo(x, y + height, x, y + height - radius);
+                context.lineTo(x, y + radius);
+                context.quadraticCurveTo(x, y, x + radius, y);
+                context.closePath();
+            }
+        },
+        {
+            dashboard: fileToDataUrl(dashboard),
+            vod: fileToDataUrl(vod),
+            series: fileToDataUrl(series),
+        }
+    );
+
+    writeDataUrlPng(heroOutputPath, dataUrl);
+}
+
+async function verifyExpectedAssets(): Promise<void> {
+    const expected = [
+        heroOutputPath,
+        ...(['dark', 'light'] as ThemeName[]).flatMap((theme) =>
+            captureTargets.flatMap((target) => [
+                screenshotPath('original', theme, target.slug),
+                screenshotPath('designed', theme, target.slug),
+            ])
+        ),
+    ];
+
+    for (const filePath of expected) {
+        if (!fileExists(filePath)) {
+            throw new Error(`Expected screenshot asset was not created: ${filePath}`);
+        }
+
+        const dimensions = readPngDimensions(filePath);
+        if (!dimensions.width || !dimensions.height) {
+            throw new Error(`Screenshot asset has invalid dimensions: ${filePath}`);
+        }
+    }
+}
+
+async function isHealthy(url: string): Promise<boolean> {
+    try {
+        const response = await fetch(url);
+        return response.ok;
+    } catch {
+        return false;
+    }
+}
+
+async function waitForHealthy(url: string, timeoutMs: number): Promise<void> {
+    const deadline = Date.now() + timeoutMs;
+
+    while (Date.now() < deadline) {
+        if (await isHealthy(url)) {
+            return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+
+    throw new Error(`Timed out waiting for ${url}`);
+}
+
+function fileExists(filePath: string): boolean {
+    try {
+        accessSync(filePath);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+function fileToDataUrl(filePath: string): string {
+    return `data:image/png;base64,${readFileSync(filePath).toString('base64')}`;
+}
+
+function writeDataUrlPng(filePath: string, dataUrl: string): void {
+    const marker = 'data:image/png;base64,';
+
+    if (!dataUrl.startsWith(marker)) {
+        throw new Error(`Expected PNG data URL for ${filePath}`);
+    }
+
+    writeFileSync(filePath, Buffer.from(dataUrl.slice(marker.length), 'base64'));
+}
+
+function readPngDimensions(filePath: string): { height: number; width: number } {
+    const buffer = readFileSync(filePath);
+    const pngSignature = '89504e470d0a1a0a';
+
+    if (buffer.subarray(0, 8).toString('hex') !== pngSignature) {
+        throw new Error(`Expected PNG signature in ${filePath}`);
+    }
+
+    return {
+        width: buffer.readUInt32BE(16),
+        height: buffer.readUInt32BE(20),
+    };
+}
+
+function slugifyForFile(value: string): string {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
+main().catch((error) => {
+    console.error(error);
+    process.exit(1);
+});
diff --git a/tools/release/generate-marketing-artwork.ts b/tools/release/generate-marketing-artwork.ts
new file mode 100644
index 0000000..a466523
--- /dev/null
+++ b/tools/release/generate-marketing-artwork.ts
@@ -0,0 +1,759 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import sharp from 'sharp';
+import {
+    listMarketingArtworkFixtures,
+    type MarketingArtworkFixture,
+} from '../../apps/xtream-mock-server/src/app/generators/marketing.generator.js';
+
+type ArtworkKind = 'backdrop' | 'poster';
+type ArtworkQuality = 'low' | 'medium' | 'high' | 'auto';
+type RunMode = 'dry-run' | 'generate' | 'manifest' | 'validate';
+
+type ArtworkJob = {
+    contentType: 'movie' | 'series';
+    filename: string;
+    kind: ArtworkKind;
+    outputPath: string;
+    prompt: string;
+    quality: ArtworkQuality;
+    size: string;
+    slug: string;
+    title: string;
+};
+
+type ArtworkManifest = {
+    assetRoot: string;
+    assets: Array<{
+        contentType: 'movie' | 'series';
+        filename: string;
+        kind: ArtworkKind;
+        manualApprovalStatus: 'pending-human-review';
+        model: string;
+        prompt: string;
+        quality: ArtworkQuality;
+        size: string;
+        slug: string;
+        title: string;
+    }>;
+    model: string;
+    outputFormat: 'png';
+    version: 1;
+};
+
+const workspaceRoot = process.cwd();
+const assetRoot = path.join(
+    workspaceRoot,
+    'apps/xtream-mock-server/public/marketing'
+);
+const manifestPath = path.join(assetRoot, 'manifest.json');
+const relativeAssetRoot = 'apps/xtream-mock-server/public/marketing';
+const defaultModel = 'gpt-image-2';
+const outputFormat = 'png';
+
+const args = process.argv.slice(2);
+const mode = getMode(args);
+const model = getStringArg('--model') ?? process.env['OPENAI_IMAGE_MODEL'] ?? defaultModel;
+const quality = getQualityArg('--quality') ?? getQuality(process.env['OPENAI_IMAGE_QUALITY']) ?? 'medium';
+const force = args.includes('--force');
+const limit = getNumberArg('--limit');
+const delayMs = getNumberArg('--delay-ms') ?? 0;
+
+const allJobs = buildArtworkJobs(model, quality);
+const jobs = allJobs.slice(0, limit ?? undefined);
+
+async function main(): Promise<void> {
+    if (mode === 'dry-run') {
+        printDryRun();
+        return;
+    }
+
+    ensureOutputDirs();
+    writeManifest(model, allJobs);
+
+    if (mode === 'manifest') {
+        console.log(`Wrote artwork manifest: ${relativePath(manifestPath)}`);
+        return;
+    }
+
+    if (mode === 'generate') {
+        await generateMissingArtwork();
+    }
+
+    await validateArtwork(jobs);
+}
+
+function buildArtworkJobs(
+    selectedModel: string,
+    selectedQuality: ArtworkQuality
+): ArtworkJob[] {
+    return listMarketingArtworkFixtures().flatMap((fixture) =>
+        (['poster', 'backdrop'] as const).map((kind) => {
+            const filename = `${kind}/${fixture.slug}.png`;
+            return {
+                contentType: fixture.contentType,
+                filename,
+                kind,
+                outputPath: path.join(assetRoot, filename),
+                prompt: buildPrompt(fixture, kind),
+                quality: selectedQuality,
+                size: kind === 'poster' ? '1024x1536' : '1536x864',
+                slug: fixture.slug,
+                title: fixture.name,
+            };
+        })
+    );
+}
+
+function buildPrompt(fixture: MarketingArtworkFixture, kind: ArtworkKind): string {
+    const profile = promptProfileForTitle(fixture.name);
+    const direction = visualDirectionForTitle(fixture.name);
+    const shared = [
+        `Create original fictional demo artwork for IPTVnator release screenshots.`,
+        `Fictional ${fixture.contentType}: "${fixture.name}" (${fixture.year}).`,
+        `Genre: ${fixture.genre}.`,
+        `Story seed: ${fixture.tagline} ${fixture.description}`,
+        `Visual direction: ${direction}`,
+        `Visual medium and style: ${profile.style}`,
+        `Palette and texture: ${profile.palette}`,
+        [
+            'Safety and originality constraints:',
+            'Do not depict or reference any real movie, series, franchise, celebrity, actor likeness, branded character, copyrighted logo, trademarked costume, existing poster composition, or readable brand mark.',
+            'No watermarks, no studio logos, no credits, no title typography, and no legible text.',
+        ].join(' '),
+    ];
+
+    if (kind === 'poster') {
+        return [
+            'Use case: ads-marketing',
+            'Asset type: portrait cover/poster PNG for a fictional streaming demo catalog.',
+            ...shared,
+            `Composition: portrait 2:3 ${profile.posterComposition}; high contrast at thumbnail size; title-safe image with no necessary text because the app UI renders metadata separately.`,
+        ].join('\n');
+    }
+
+    return [
+        'Use case: ads-marketing',
+        'Asset type: landscape backdrop PNG for a fictional streaming demo details screen.',
+        ...shared,
+        `Composition: wide 16:9 ${profile.backdropComposition}; darker edges and open negative space so app UI overlays remain readable; no text or logos.`,
+    ].join('\n');
+}
+
+type PromptProfile = {
+    backdropComposition: string;
+    palette: string;
+    posterComposition: string;
+    style: string;
+};
+
+function promptProfileForTitle(title: string): PromptProfile {
+    const profiles: Record<string, PromptProfile> = {
+        'Crimson Skylark': {
+            style: 'golden-hour aerial adventure photography with realistic rescue-drama production design, wind, clouds, practical flight gear, and natural lens flare',
+            palette:
+                'sunrise coral, storm gray, aviation green, grainy but realistic atmospheric haze',
+            posterComposition:
+                'single rescue courier against a huge storm sky, diagonal flight path, naturalistic poster photography',
+            backdropComposition:
+                'vast sky route above a modern city, layered storm clouds, small courier silhouette, breathable horizon',
+        },
+        'The Voltage Guard': {
+            style: 'gritty disaster-thriller photography, rain-soaked infrastructure, documentary realism, sparks, emergency work lights, no fantasy costumes',
+            palette:
+                'steel blue, sodium orange, wet asphalt black, white electrical flares',
+            posterComposition:
+                'workers and rail geometry forming a tense action triangle, practical uniforms and tools',
+            backdropComposition:
+                'wide elevated transit grid under unstable weather, workers small in frame, strong industrial depth',
+        },
+        'Midnight Mantle': {
+            style: 'gothic noir illustration with theatrical shadow shapes, old print texture, rain, velvet blacks, and painterly mystery atmosphere',
+            palette:
+                'deep violet, amber marquee light, wet black streets, muted crimson accents',
+            posterComposition:
+                'theatre silhouette and sweeping cloak as an abstract mystery shape, not a superhero pose',
+            backdropComposition:
+                'empty theatre district at night, marquee glow without readable letters, cloak-like shadow crossing rooftops',
+        },
+        'Quantum Comet': {
+            style: 'hard science-fiction concept art with crisp spacecraft detail, star charts, comet ice, scale diagrams, and luminous navigation UI shapes without readable text',
+            palette:
+                'icy cyan, white comet dust, deep navy, precise magenta navigation glows',
+            posterComposition:
+                'cartographer figure and fractured comet arc arranged like a scientific expedition poster',
+            backdropComposition:
+                'wide comet trail and distant armada silhouettes, clean negative space around the center',
+        },
+        'Orbit of Atlas': {
+            style: 'epic cosmic survival painting with mineral surfaces, colony lights, gravitational dust ribbons, and solemn scale',
+            palette:
+                'burnt gold, moon gray, dusty umber, cold blue space shadows',
+            posterComposition:
+                'small rescue pilot dwarfed by a cracked moon, monumental survival mood',
+            backdropComposition:
+                'fractured moon over a remote colony, dust and sunlight bending in wide arcs',
+        },
+        'Nova Relay': {
+            style: 'sleek space-opera animation art with clean silhouettes, radiant motion trails, glossy star-bridge architecture, and optimistic color',
+            palette:
+                'electric teal, royal blue, white light trails, warm planetary glow',
+            posterComposition:
+                'twin runners crossing a luminous bridge with strong graphic diagonals',
+            backdropComposition:
+                'star bridge leading toward a blue planet, two tiny figures and sweeping light messages',
+        },
+        'Beacon Boy and the Clockwork Garden': {
+            style: 'storybook 3D animated fantasy, handmade brass mechanisms, moss, warm lantern light, rounded forms, and tactile toy-like detail',
+            palette:
+                'moss green, brass gold, warm amber, soft twilight blue',
+            posterComposition:
+                'young inventor, grandmother, and clockwork garden guardian in a warm discovery tableau',
+            backdropComposition:
+                'hidden underground garden with gears, vines, lanterns, and gentle mechanical guardians',
+        },
+        'The Invisible Saturday': {
+            style: 'bright claymation-inspired family comedy, miniature fairground sets, visible handmade textures, playful invisible-person gags',
+            palette:
+                'cotton-candy pink, sunny yellow, grass green, soft sky blue',
+            posterComposition:
+                'floating ribbons, footprints, and balloons implying invisible siblings at a fair',
+            backdropComposition:
+                'wide neighborhood fair scene with playful impossible traces and generous open sky',
+        },
+        'Captain Kindling': {
+            style: 'warm hand-painted camping comedy illustration, cozy forest dusk, ember glow, imperfect brush texture, gentle humor',
+            palette:
+                'campfire orange, pine green, twilight purple, warm tan canvas',
+            posterComposition:
+                'camp counselor spark and misfit camper silhouettes around a glowing clearing',
+            backdropComposition:
+                'wide forest camp at dusk with cabin lights, ember trails, and friendly wilderness depth',
+        },
+        'Masks of Tomorrow': {
+            style: 'fashion-documentary editorial photography, fabric tables, workshop tools, mirrors, fittings, and soft daylight realism',
+            palette:
+                'cream fabric, graphite tools, tomato red thread, daylight blue shadows',
+            posterComposition:
+                'hands, mannequins, and unfinished masks arranged as an editorial magazine cover image',
+            backdropComposition:
+                'busy workshop with textiles and signal equipment, human craft details, no logo marks',
+        },
+        'Signal Tower Seven': {
+            style: 'retro 1970s disaster-drama poster art, analog radio equipment, snowy mountain rescue maps, screen-print texture',
+            palette:
+                'faded mustard, radio-room brown, emergency red, winter blue',
+            posterComposition:
+                'radio operator profile, signal tower, and storm map shapes in vintage rescue-drama layout',
+            backdropComposition:
+                'wide analog signal room overlooking winter mountains and storm lights',
+        },
+        'The League of Lanterns': {
+            style: 'human-interest documentary photography with natural faces, handheld lanterns, dark streets, and hopeful realism',
+            palette:
+                'blackout navy, lantern gold, brick red, soft skin tones',
+            posterComposition:
+                'volunteers carrying lanterns through darkness, intimate eye-level composition',
+            backdropComposition:
+                'wide city block during blackout with lantern paths and community silhouettes',
+        },
+        'Paper Moon Parade': {
+            style: 'simple flat paper-cut illustration for children, large clean shapes, visible paper grain, gentle handmade collage, no realistic rendering',
+            palette:
+                'midnight blue, butter yellow, pale lavender, soft coral, warm paper white',
+            posterComposition:
+                'big smiling paper moon, tiny town silhouettes, parade shapes, lots of clean negative space',
+            backdropComposition:
+                'wide paper-cut town street under a rolling moon with simple parade banners and sparse stars',
+        },
+        'Dot and the Cloud Train': {
+            style: 'ultra-simple preschool cartoon, rounded vector shapes, soft gradients, thick friendly outlines, very low detail',
+            palette:
+                'sky blue, marshmallow white, lemon yellow, strawberry pink, mint green',
+            posterComposition:
+                'small dot character stepping onto a rounded cloud train, clear simple shapes for young kids',
+            backdropComposition:
+                'wide pastel sky with a cloud train crossing simple weather-color stops',
+        },
+        'Tiny Planet Picnic': {
+            style: 'minimal flat family sci-fi cartoon, clean vector-like shapes, playful scale, sparse details, soft geometric planets',
+            palette:
+                'peach, teal, lilac, sunny yellow, deep space blue used sparingly',
+            posterComposition:
+                'three children on a tiny round planet with picnic blanket and orbiting flowers',
+            backdropComposition:
+                'wide tiny planet landscape with flowers orbiting like satellites and open simple sky',
+        },
+        'The Quiet Aquarium': {
+            style: 'abstract meditative poster art, flat translucent shapes, slow gradients, simplified fish silhouettes, calm museum-like composition',
+            palette:
+                'deep sea blue, glass cyan, muted violet, soft black, small coral accents',
+            posterComposition:
+                'large abstract aquarium window with drifting shapes and one quiet visitor silhouette',
+            backdropComposition:
+                'wide closed aquarium interior with glowing tanks, drifting abstract fish shapes, and quiet negative space',
+        },
+        'Square City Sonata': {
+            style: 'Bauhaus-inspired abstract musical city art, flat geometric blocks, no perspective realism, rhythmic rectangles and circles',
+            palette:
+                'cream, brick red, cobalt blue, mustard yellow, charcoal',
+            posterComposition:
+                'stacked city blocks, windows, and circles arranged like a musical score',
+            backdropComposition:
+                'wide geometric city grid with crosswalk rhythms and streetlight circles across a flat afternoon',
+        },
+        'Lanterns Under Snow': {
+            style: 'minimal winter folk illustration, flat shapes, quiet negative space, soft paper texture, restrained detail',
+            palette:
+                'snow white, ink navy, lantern amber, muted pine green, pale gray',
+            posterComposition:
+                'single warm lantern path climbing a snowy hill town with small simple figures',
+            backdropComposition:
+                'wide snowy hillside town with sparse houses, paper lantern dots, and a calm empty sky',
+        },
+        'Skyline Sentinels': {
+            style: 'urban infrastructure drama photography, maintenance crew realism, rooftops, rails, bridge cables, sunrise work shift mood',
+            palette:
+                'concrete gray, safety yellow, sunrise peach, river blue',
+            posterComposition:
+                'young maintenance crew on a roof with tools and city geometry, not heroic costumes',
+            backdropComposition:
+                'wide rooftop and bridge panorama with work lights and morning haze',
+        },
+        'The Aegis Club': {
+            style: 'warm workplace dramedy photography, neighborhood social club interiors, old wood, mismatched chairs, trophies, candid ensemble energy',
+            palette:
+                'walnut brown, faded green upholstery, brass lamps, soft cream walls',
+            posterComposition:
+                'group around an old club table with lived-in props and gentle humor',
+            backdropComposition:
+                'wide social club room with training area, memorabilia, and warm lamps',
+        },
+        'Starfall Academy': {
+            style: 'colorful anime-inspired space-school illustration with expressive cadets, school-ship corridors, science experiments, and star windows',
+            palette:
+                'bubblegum pink, starship white, asteroid gray, neon mint',
+            posterComposition:
+                'cadets and floating school equipment in dynamic anime school-club composition',
+            backdropComposition:
+                'wide school-ship classroom near asteroid belt with desks, windows, and drifting experiment lights',
+        },
+        'Tomorrow Bureau': {
+            style: 'minimalist bureaucratic sci-fi thriller, glass offices, files, clocks, reflection grids, restrained corporate unease',
+            palette:
+                'frosted glass, desaturated teal, paper white, warning red pinpoints',
+            posterComposition:
+                'analyst silhouette amid files and clocks, clean tense graphic composition',
+            backdropComposition:
+                'wide operations room with glass walls, layered clock reflections, and negative space',
+        },
+        'Alley Mask': {
+            style: 'neo-noir street photography, bicycle courier realism, coded light marks, wet alleys, handheld camera energy',
+            palette:
+                'wet asphalt, sodium yellow, deep green shadows, chalk-white signal marks',
+            posterComposition:
+                'bike courier and alley geometry, face partly obscured by ordinary rain gear, grounded mystery',
+            backdropComposition:
+                'wide narrow alley after rain with coded signal glyphs and long perspective',
+        },
+        'Neon Sparrow': {
+            style: 'stylized cyberpunk graphic novel art, rooftop rain, neon clue trails, birdlike light motifs, bold ink shapes',
+            palette:
+                'magenta neon, cyan rain, black ink, pale green glow',
+            posterComposition:
+                'rooftop messenger and sparrow-like light trail in bold graphic silhouette',
+            backdropComposition:
+                'wide rain-soaked rooftop cityscape with glowing clues and open sky',
+        },
+        'Cape Makers': {
+            style: 'behind-the-scenes craft docuseries photography, sewing machines, engineering benches, stage fabric, candid hands-at-work details',
+            palette:
+                'indigo cloth, warm workshop bulbs, steel tools, chalk marks',
+            posterComposition:
+                'tailors and engineers at work around stage gear, tactile documentary composition',
+            backdropComposition:
+                'wide busy design studio with fabric rolls, benches, sketches without readable text',
+        },
+        'Citizens of the Beacon': {
+            style: 'quiet social documentary photography, ordinary residents, practical signal lamps, neighborhood streets, compassionate realism',
+            palette:
+                'lamp amber, dusk blue, concrete gray, muted household colors',
+            posterComposition:
+                'ordinary residents around a beacon lamp, intimate human-interest portrait',
+            backdropComposition:
+                'wide neighborhood rescue network at dusk with lamps in windows and street corners',
+        },
+        'Bubble Street Workshop': {
+            style: 'flat kids craft cartoon, simple circles and paper shapes, playful handmade textures, bright but not busy',
+            palette:
+                'bubblegum pink, craft paper tan, sky blue, crayon green, sunflower yellow',
+            posterComposition:
+                'round neighbors building a simple invention from paper, string, and circles',
+            backdropComposition:
+                'wide cheerful street workshop with tables, bubbles, paper circles, and open simple storefront shapes',
+        },
+        'Flatland Detectives': {
+            style: 'flat geometric mystery comedy, shape-language characters, simple shadows, crisp poster design, no realism',
+            palette:
+                'warm gray, detective orange, navy, cream, clue green',
+            posterComposition:
+                'two geometric detectives inspecting a simple shape clue with playful noir lighting',
+            backdropComposition:
+                'wide flat neighborhood map scene with shadows, arrows, and geometric clues',
+        },
+        'Color Orchard': {
+            style: 'preschool nature cartoon, very simple flat rounded shapes, soft friendly faces implied by objects, low detail',
+            palette:
+                'apple red, leaf green, pear yellow, sky blue, soft soil brown',
+            posterComposition:
+                'tiny caretakers under one large color-changing tree, simple fruit shapes and musical notes without text',
+            backdropComposition:
+                'wide gentle orchard made of rounded flat trees changing colors across the morning',
+        },
+        'Museum of Little Robots': {
+            style: 'flat retro-future cartoon, simple rounded robots, clean museum shapes, limited details, soft mid-century geometry',
+            palette:
+                'dusty teal, warm cream, tomato red, brushed metal gray, muted orange',
+            posterComposition:
+                'small helpful robots arranging one oversized exhibit in a quiet museum hall',
+            backdropComposition:
+                'wide retro-future museum after closing with tiny robots, plinths, and simple geometric exhibits',
+        },
+    };
+
+    return (
+        profiles[title] ?? {
+            backdropComposition:
+                'immersive genre scene with clean depth and readable negative space',
+            palette: 'balanced multi-color palette with tactile texture',
+            posterComposition:
+                'distinctive key image built around an original fictional subject',
+            style: 'original genre artwork with a clearly differentiated visual language',
+        }
+    );
+}
+
+function visualDirectionForTitle(title: string): string {
+    const directions: Record<string, string> = {
+        'Crimson Skylark':
+            'an aerial rescue courier navigating storm routes above Meridian City, a solar signal crest glowing in the cloudbreak',
+        'The Voltage Guard':
+            'transit workers protecting an elevated rail grid from a living thunderstorm, blue-white electricity reflected in wet streets',
+        'Midnight Mantle':
+            'an old theatre district at night, a mysterious cloak rumor visualized through shadows, marquee light, and rain-soaked cobblestones',
+        'Quantum Comet':
+            'an orbital cartographer crossing fractured comet trails beside a time-bent armada, star maps glowing in cold blue light',
+        'Orbit of Atlas':
+            'a rescue pilot navigating a cracked moon orbit over a fragile colony, gravity ribbons bending dust and sunlight',
+        'Nova Relay':
+            'twin signal runners racing across a luminous star bridge, urgent light messages streaking toward a blue planet',
+        'Beacon Boy and the Clockwork Garden':
+            'a young inventor and grandmother discovering mechanical garden guardians under a city park, brass leaves and gentle lantern light',
+        'The Invisible Saturday':
+            'two adventurous siblings at a neighborhood fair where only their footprints, floating ribbons, and playful shadows reveal them',
+        'Captain Kindling':
+            'a forest camp at dusk with ember-bright protective magic, young misfit campers gathered around a warm heroic spark',
+        'Masks of Tomorrow':
+            'costume makers, signal engineers, and citizens preparing original hero emblems in a workshop filled with fabric, tools, and soft window light',
+        'Signal Tower Seven':
+            'retro radio operators coordinating rescues from a tall signal room, analog dials, maps, and amber emergency light',
+        'The League of Lanterns':
+            'volunteers carrying lanterns through an impossible blackout, safe glowing paths forming across city streets',
+        'Paper Moon Parade':
+            'a flat paper-cut moon rolling through a tiny town with simple parade shapes and shy children joining in',
+        'Dot and the Cloud Train':
+            'a small dot boarding a soft cloud train that stops at simple weather-color stations',
+        'Tiny Planet Picnic':
+            'children preparing a picnic on a pocket-sized planet where flowers orbit like friendly satellites',
+        'The Quiet Aquarium':
+            'abstract glowing aquarium tanks after closing time, drifting shapes, quiet visitors, and calm water-light',
+        'Square City Sonata':
+            'geometric blocks, windows, crosswalks, and streetlights arranged as a flat city symphony',
+        'Lanterns Under Snow':
+            'neighbors carrying warm paper lanterns across a silent snowy hill town',
+        'Skyline Sentinels':
+            'a young rooftop rescue team watching rails, bridges, and river lights from high above Meridian City at sunrise',
+        'The Aegis Club':
+            'retired heroes in a restored neighborhood social club, worn memorabilia, warm lamps, and a new generation training nearby',
+        'Starfall Academy':
+            'cadets with unstable cosmic powers aboard a school ship near the asteroid belt, classroom windows filled with stars',
+        'Tomorrow Bureau':
+            'future analysts in a glass-walled operations room sorting one-day-ahead disaster files, clocks and reflections layered across the scene',
+        'Alley Mask':
+            'a bike courier stepping through deep city shadows while following strange signal glyphs in narrow alleys after rain',
+        'Neon Sparrow':
+            'a rooftop messenger following glowing clues that appear in midnight rain, neon reflections and small bright wing motifs',
+        'Cape Makers':
+            'tailors, engineers, and artists building original stage gear in a busy design studio, fabric tests and hand-built emblems everywhere',
+        'Citizens of the Beacon':
+            'ordinary residents maintaining a citywide rescue network after the first beacon, hopeful faces lit by practical signal lamps',
+        'Bubble Street Workshop':
+            'neighbors building simple inventions from circles, paper, string, and bright workshop tables',
+        'Flatland Detectives':
+            'two geometric detectives solving gentle neighborhood mysteries using maps, shadows, and shape clues',
+        'Color Orchard':
+            'a preschool orchard changing color each morning while tiny caretakers learn seasons and sound',
+        'Museum of Little Robots':
+            'small helpful robots arranging exhibits after closing time in a quiet retro-future museum',
+    };
+
+    return directions[title] ?? 'an original cinematic genre scene for a fictional streaming title';
+}
+
+async function generateMissingArtwork(): Promise<void> {
+    const apiKey = process.env['OPENAI_API_KEY'];
+
+    if (!apiKey) {
+        throw new Error('OPENAI_API_KEY is required for --generate.');
+    }
+
+    for (const [index, job] of jobs.entries()) {
+        if (existsSync(job.outputPath) && !force) {
+            console.log(
+                `[${index + 1}/${jobs.length}] exists, skipping ${job.filename}`
+            );
+            continue;
+        }
+
+        console.log(
+            `[${index + 1}/${jobs.length}] generating ${job.filename} (${job.size}, ${job.quality})`
+        );
+        const imageBytes = await requestImage(apiKey, job);
+        writeFileSync(job.outputPath, imageBytes);
+
+        if (delayMs > 0 && index < jobs.length - 1) {
+            await sleep(delayMs);
+        }
+    }
+}
+
+async function requestImage(apiKey: string, job: ArtworkJob): Promise<Buffer> {
+    const payload = {
+        model,
+        prompt: job.prompt,
+        quality: job.quality,
+        size: job.size,
+        output_format: outputFormat,
+        moderation: 'auto',
+    };
+
+    for (let attempt = 1; attempt <= 4; attempt += 1) {
+        const response = await fetch('https://api.openai.com/v1/images/generations', {
+            body: JSON.stringify(payload),
+            headers: {
+                Authorization: `Bearer ${apiKey}`,
+                'Content-Type': 'application/json',
+            },
+            method: 'POST',
+        });
+
+        const body = await response.json().catch(() => undefined);
+
+        if (response.ok) {
+            const imageBase64 = readImageBase64(body);
+            return Buffer.from(imageBase64, 'base64');
+        }
+
+        const message = readErrorMessage(body) ?? `${response.status} ${response.statusText}`;
+        if ((response.status === 429 || response.status >= 500) && attempt < 4) {
+            const retryAfter = Number(response.headers.get('retry-after'));
+            const waitMs = Number.isFinite(retryAfter)
+                ? retryAfter * 1000
+                : attempt * 15_000;
+            console.warn(
+                `OpenAI image request failed for ${job.filename}: ${message}. Retrying in ${Math.round(
+                    waitMs / 1000
+                )}s.`
+            );
+            await sleep(waitMs);
+            continue;
+        }
+
+        throw new Error(
+            `OpenAI image request failed for ${job.filename}: ${message}`
+        );
+    }
+
+    throw new Error(`OpenAI image request failed for ${job.filename}.`);
+}
+
+function readImageBase64(body: unknown): string {
+    if (
+        typeof body === 'object' &&
+        body !== null &&
+        'data' in body &&
+        Array.isArray((body as { data: unknown }).data)
+    ) {
+        const first = (body as { data: Array<{ b64_json?: unknown }> }).data[0];
+        if (typeof first?.b64_json === 'string' && first.b64_json.length > 0) {
+            return first.b64_json;
+        }
+    }
+
+    throw new Error('OpenAI response did not include data[0].b64_json.');
+}
+
+function readErrorMessage(body: unknown): string | undefined {
+    if (
+        typeof body === 'object' &&
+        body !== null &&
+        'error' in body &&
+        typeof (body as { error?: { message?: unknown } }).error?.message === 'string'
+    ) {
+        return (body as { error: { message: string } }).error.message;
+    }
+
+    return undefined;
+}
+
+async function validateArtwork(selectedJobs: ArtworkJob[]): Promise<void> {
+    const manifest = JSON.parse(readFileSync(manifestPath, 'utf8')) as ArtworkManifest;
+    const expectedManifestCount = selectedJobs.length;
+
+    if (manifest.version !== 1 || manifest.assets.length < expectedManifestCount) {
+        throw new Error(
+            `Manifest has ${manifest.assets.length} assets, expected at least ${expectedManifestCount}.`
+        );
+    }
+
+    for (const job of selectedJobs) {
+        if (!existsSync(job.outputPath)) {
+            throw new Error(`Missing generated artwork: ${relativePath(job.outputPath)}`);
+        }
+
+        const metadata = await sharp(job.outputPath).metadata();
+        const [expectedWidth, expectedHeight] = job.size.split('x').map(Number);
+
+        if (metadata.format !== 'png') {
+            throw new Error(`Artwork is not PNG: ${relativePath(job.outputPath)}`);
+        }
+
+        if (metadata.width !== expectedWidth || metadata.height !== expectedHeight) {
+            throw new Error(
+                `Artwork has invalid dimensions: ${relativePath(job.outputPath)} ` +
+                    `expected ${job.size}, got ${metadata.width}x${metadata.height}`
+            );
+        }
+    }
+
+    console.log(
+        `Validated ${selectedJobs.length} artwork assets and manifest: ${relativePath(
+            manifestPath
+        )}`
+    );
+}
+
+function writeManifest(selectedModel: string, selectedJobs: ArtworkJob[]): void {
+    const manifest: ArtworkManifest = {
+        assetRoot: relativeAssetRoot,
+        assets: selectedJobs.map((job) => ({
+            contentType: job.contentType,
+            filename: job.filename,
+            kind: job.kind,
+            manualApprovalStatus: 'pending-human-review',
+            model: selectedModel,
+            prompt: job.prompt,
+            quality: job.quality,
+            size: job.size,
+            slug: job.slug,
+            title: job.title,
+        })),
+        model: selectedModel,
+        outputFormat,
+        version: 1,
+    };
+
+    writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`, 'utf8');
+}
+
+function printDryRun(): void {
+    const manifest = {
+        assetRoot: relativeAssetRoot,
+        assets: jobs.map((job) => ({
+            filename: job.filename,
+            kind: job.kind,
+            model,
+            quality: job.quality,
+            size: job.size,
+            title: job.title,
+        })),
+        count: jobs.length,
+        outputFormat,
+    };
+
+    console.log(JSON.stringify(manifest, null, 2));
+}
+
+function ensureOutputDirs(): void {
+    mkdirSync(path.join(assetRoot, 'poster'), { recursive: true });
+    mkdirSync(path.join(assetRoot, 'backdrop'), { recursive: true });
+}
+
+function getMode(argv: string[]): RunMode {
+    const selectedModes = [
+        argv.includes('--dry-run') ? 'dry-run' : undefined,
+        argv.includes('--generate') ? 'generate' : undefined,
+        argv.includes('--manifest') ? 'manifest' : undefined,
+        argv.includes('--validate') ? 'validate' : undefined,
+    ].filter(Boolean) as RunMode[];
+
+    if (selectedModes.length > 1) {
+        throw new Error('Choose only one mode: --dry-run, --manifest, --generate, or --validate.');
+    }
+
+    return selectedModes[0] ?? 'dry-run';
+}
+
+function getStringArg(name: string): string | undefined {
+    const index = args.indexOf(name);
+    return index >= 0 ? args[index + 1] : undefined;
+}
+
+function getNumberArg(name: string): number | undefined {
+    const raw = getStringArg(name);
+    if (raw === undefined) {
+        return undefined;
+    }
+
+    const value = Number(raw);
+    if (!Number.isFinite(value) || value < 0) {
+        throw new Error(`${name} must be a non-negative number.`);
+    }
+
+    return value;
+}
+
+function getQualityArg(name: string): ArtworkQuality | undefined {
+    return getQuality(getStringArg(name));
+}
+
+function getQuality(raw: string | undefined): ArtworkQuality | undefined {
+    if (
+        raw === 'low' ||
+        raw === 'medium' ||
+        raw === 'high' ||
+        raw === 'auto'
+    ) {
+        return raw;
+    }
+
+    if (raw === undefined) {
+        return undefined;
+    }
+
+    throw new Error('Quality must be one of: low, medium, high, auto.');
+}
+
+function relativePath(filePath: string): string {
+    return path.relative(workspaceRoot, filePath);
+}
+
+function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+main().catch((error: unknown) => {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+});
diff --git a/tools/testing/launch-packaged-electron.mjs b/tools/testing/launch-packaged-electron.mjs
new file mode 100644
index 0000000..68ffb4f
--- /dev/null
+++ b/tools/testing/launch-packaged-electron.mjs
@@ -0,0 +1,116 @@
+import fs from 'fs';
+import path from 'path';
+import { spawn } from 'child_process';
+
+const args = process.argv.slice(2);
+const normalizedArgs = args[0] === '--' ? args.slice(1) : args;
+const [platformArg, arch = ''] = normalizedArgs;
+const currentPlatform =
+    platformArg ??
+    (process.platform === 'darwin'
+        ? 'macos'
+        : process.platform === 'win32'
+          ? 'windows'
+          : 'linux');
+
+const workspaceRoot = process.cwd();
+const executablesRoot = path.join(workspaceRoot, 'dist', 'executables');
+const remoteDebuggingPort = '9222';
+
+function ensureFile(filePath) {
+    return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
+}
+
+function findUnpackedExecutable(prefix, executableNames) {
+    if (!fs.existsSync(executablesRoot)) {
+        return undefined;
+    }
+
+    const unpackedDirs = fs
+        .readdirSync(executablesRoot, { withFileTypes: true })
+        .filter(
+            (entry) =>
+                entry.isDirectory() &&
+                entry.name.startsWith(prefix) &&
+                entry.name.endsWith('-unpacked')
+        )
+        .map((entry) => path.join(executablesRoot, entry.name));
+
+    for (const unpackedDir of unpackedDirs) {
+        for (const executableName of executableNames) {
+            const executablePath = path.join(unpackedDir, executableName);
+            if (ensureFile(executablePath)) {
+                return executablePath;
+            }
+        }
+    }
+
+    return undefined;
+}
+
+function resolvePackagedExecutable() {
+    if (currentPlatform === 'macos') {
+        const candidates = [
+            {
+                arch: 'x64',
+                executable: path.join(
+                    executablesRoot,
+                    'mac',
+                    'IPTVnator.app',
+                    'Contents',
+                    'MacOS',
+                    'IPTVnator'
+                ),
+            },
+            {
+                arch: 'arm64',
+                executable: path.join(
+                    executablesRoot,
+                    'mac-arm64',
+                    'IPTVnator.app',
+                    'Contents',
+                    'MacOS',
+                    'IPTVnator'
+                ),
+            },
+        ];
+
+        const match = candidates.find(
+            (candidate) => (!arch || candidate.arch === arch) && ensureFile(candidate.executable)
+        );
+        return match?.executable;
+    }
+
+    if (currentPlatform === 'windows') {
+        return findUnpackedExecutable('win', ['IPTVnator.exe']);
+    }
+
+    if (currentPlatform === 'linux') {
+        return findUnpackedExecutable('linux', ['IPTVnator', 'iptvnator']);
+    }
+
+    return undefined;
+}
+
+const executable = resolvePackagedExecutable();
+
+if (!executable) {
+    console.error(
+        `Unable to resolve a packaged executable for ${currentPlatform}${arch ? ` (${arch})` : ''}.`
+    );
+    process.exit(1);
+}
+
+console.log(`Launching packaged app: ${executable}`);
+console.log(
+    `After the window opens, connect with: agent-browser --cdp ${remoteDebuggingPort} tab list`
+);
+
+const child = spawn(executable, [`--remote-debugging-port=${remoteDebuggingPort}`], {
+    stdio: 'inherit',
+    detached: false,
+});
+
+child.on('exit', (code) => {
+    process.exit(code ?? 0);
+});
diff --git a/tools/testing/run-web-esm-lib-tests.mjs b/tools/testing/run-web-esm-lib-tests.mjs
new file mode 100644
index 0000000..0d6ff6c
--- /dev/null
+++ b/tools/testing/run-web-esm-lib-tests.mjs
@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+import { readdirSync } from 'node:fs';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+import process from 'node:process';
+
+const [targetDir, ...jestArgs] = process.argv.slice(2);
+
+if (!targetDir) {
+    console.error(
+        'Usage: node tools/testing/run-web-esm-lib-tests.mjs <directory> [jest args...]'
+    );
+    process.exit(1);
+}
+
+const workspaceRoot = process.cwd();
+const absoluteTargetDir = path.resolve(workspaceRoot, targetDir);
+
+function collectSpecFiles(directory) {
+    const entries = readdirSync(directory, { withFileTypes: true });
+    const specFiles = [];
+
+    for (const entry of entries) {
+        const fullPath = path.join(directory, entry.name);
+
+        if (entry.isDirectory()) {
+            specFiles.push(...collectSpecFiles(fullPath));
+            continue;
+        }
+
+        if (
+            entry.isFile() &&
+            (entry.name.endsWith('.spec.ts') || entry.name.endsWith('.test.ts'))
+        ) {
+            specFiles.push(fullPath);
+        }
+    }
+
+    return specFiles;
+}
+
+const specFiles = collectSpecFiles(absoluteTargetDir).sort();
+
+if (specFiles.length === 0) {
+    console.error(`No spec files found under ${targetDir}`);
+    process.exit(1);
+}
+
+const jestBin = path.resolve(workspaceRoot, 'node_modules/jest/bin/jest.js');
+const jestConfig = path.resolve(
+    workspaceRoot,
+    'jest.web-esm.workspace.ts'
+);
+
+const result = spawnSync(
+    process.execPath,
+    [jestBin, '--config', jestConfig, '--runTestsByPath', ...specFiles, ...jestArgs],
+    {
+        env: process.env,
+        stdio: 'inherit',
+    }
+);
+
+process.exit(result.status ?? 1);
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..b2f71f3
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,93 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "rootDir": ".",
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "target": "es2015",
+        "module": "esnext",
+        "lib": ["es2020", "dom"],
+        "skipLibCheck": true,
+        "skipDefaultLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@iptvnator/portal/catalog/feature": [
+                "libs/portal/catalog/feature/src/index.ts"
+            ],
+            "@iptvnator/portal/downloads/feature": [
+                "libs/portal/downloads/feature/src/index.ts"
+            ],
+            "@iptvnator/portal/shared/ui": [
+                "libs/portal/shared/ui/src/index.ts"
+            ],
+            "@iptvnator/portal/shared/util": [
+                "libs/portal/shared/util/src/index.ts"
+            ],
+            "@iptvnator/epg/data-access": ["libs/epg/data-access/src/index.ts"],
+            "@iptvnator/playlist/shared/ui": [
+                "libs/playlist/shared/ui/src/index.ts"
+            ],
+            "@iptvnator/playlist/shared/util": [
+                "libs/playlist/shared/util/src/index.ts"
+            ],
+            "@iptvnator/ui/epg": ["libs/ui/epg/src/index.ts"],
+            "@iptvnator/ui/epg/progress-panel": [
+                "libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.ts"
+            ],
+            "@iptvnator/ui/playback/external-player-info-dialog": [
+                "libs/ui/playback/src/lib/external-player-info-dialog/external-player-info-dialog.component.ts"
+            ],
+            "@iptvnator/ui/playback": ["libs/ui/playback/src/index.ts"],
+            "@iptvnator/playlist/import/feature": [
+                "libs/playlist/import/feature/src/index.ts"
+            ],
+            "@iptvnator/playlist/m3u/feature-player": [
+                "libs/playlist/m3u/feature-player/src/index.ts"
+            ],
+            "@iptvnator/portal/stalker/feature": [
+                "libs/portal/stalker/feature/src/index.ts"
+            ],
+            "@iptvnator/portal/stalker/data-access": [
+                "libs/portal/stalker/data-access/src/index.ts"
+            ],
+            "@iptvnator/portal/xtream/feature": [
+                "libs/portal/xtream/feature/src/index.ts"
+            ],
+            "@iptvnator/portal/xtream/data-access": [
+                "libs/portal/xtream/data-access/src/index.ts"
+            ],
+            "@iptvnator/workspace/shell/feature": [
+                "libs/workspace/shell/feature/src/index.ts"
+            ],
+            "@iptvnator/workspace/shell/util": [
+                "libs/workspace/shell/util/src/index.ts"
+            ],
+            "@iptvnator/pipes": ["libs/ui/pipes/src/index.ts"],
+            "@package": ["./package.json"],
+            "components": ["libs/ui/components/src/index.ts"],
+            "m3u-state": ["libs/m3u-state/src/index.ts"],
+            "m3u-utils": ["libs/shared/m3u-utils/src/index.ts"],
+            "services": ["libs/services/src/index.ts"],
+            "shared-interfaces": ["libs/shared/interfaces/src/index.ts"],
+            "shared-portals": ["libs/ui/shared-portals/src/index.ts"],
+            "remote-control": ["libs/ui/remote-control/src/index.ts"],
+            "database": ["libs/shared/database/src/index.ts"],
+            "database-schema": ["libs/shared/database/src/lib/schema.ts"],
+            "database-path-utils": [
+                "libs/shared/database/src/lib/path-utils.ts"
+            ],
+            "workspace-dashboard-feature": [
+                "libs/workspace/dashboard/feature/src/index.ts"
+            ],
+            "workspace-dashboard-data-access": [
+                "libs/workspace/dashboard/data-access/src/index.ts"
+            ]
+        }
+    },
+    "exclude": ["node_modules", "tmp"],
+    "files": ["global.d.ts"]
+}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
new file mode 100644
index 0000000..6e98bf1
--- /dev/null
+++ b/tsconfig.spec.json
@@ -0,0 +1,3 @@
+{
+    "extends": "./apps/web/tsconfig.spec.json"
+}
diff --git a/upload-via-url.png b/upload-via-url.png
new file mode 100644
index 0000000..95cdc01
Binary files /dev/null and b/upload-via-url.png differ